step3

Author: aster-void

web/app/signup/steps/step3_confirmation.tsx

@@ -1,19 +1,8 @@
-import { Box, Typography } from "@mui/material";
 import type { BackProp, StepProps } from "~/app/signup/common";
 import type { Step1User } from "~/common/zod/types";
-import UserAvatar from "~/components/human/avatar";
+import { CardFront } from "~/components/Card.tsx";
 import type { Step2Data } from "./step2_img";
 
-interface UserInfoProp {
-  name: string;
-  gender: string;
-  grade: string;
-  faculty: string;
-  department: string;
-  intro: string;
-  pictureUrl: string;
-}
-
 interface inputDataProps {
   Step1Data: Step1User | undefined;
   Step2Data: Step2Data | undefined;
@@ -37,38 +26,22 @@ export default function Confirmation({
           margin: "20px",
         }}
       >
-        <Typography variant="h6" component="h1" mb={2}>
-          確認
-        </Typography>
-        <Box
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-          }}
-        >
-          <CardFront UserInfo={{ ...Step1Data, ...Step2Data }} />
-        </Box>
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-          }}
-        >
+        <h1 className="mb-2 text-xl">確認</h1>
+        <div className="flex flex-col items-center">
+          <CardFront
+            displayedUser={{
+              ...Step1Data,
+              ...Step2Data,
+              id: 0,
+              guid: "zero",
+            }}
+          />
+        </div>
+        <div className="flex flex-col items-center">
           <p>この内容で登録しますか？</p>
         </div>
       </div>
-      <Box
-        p={3}
-        sx={{
-          position: "fixed",
-          display: "flex",
-          justifyContent: "space-between",
-          bottom: 0,
-          width: "100%",
-        }}
-      >
+      <div className="p-3 fixed flex justify-between bottom-0 w-full">
         <button type="button" onClick={back} className="btn">
           前へ
         </button>
@@ -79,47 +52,7 @@ export default function Confirmation({
         >
           次へ
         </button>
-      </Box>
-    </>
-  );
-}
-
-function CardFront({ UserInfo }: { UserInfo: UserInfoProp }) {
-  return (
-    <div
-      style={{
-        width: "70vw",
-        height: "70vh",
-        position: "relative",
-        backgroundColor: "#F7FCFF",
-        border: "2px solid #3596C6",
-        padding: "10px",
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "space-around",
-        }}
-      >
-        <div style={{ width: "50%", maxWidth: "300px", maxHeight: "300px" }}>
-          <UserAvatar
-            pictureUrl={UserInfo?.pictureUrl}
-            width="80%"
-            height="auto"
-          />
-        </div>
-        <p style={{ fontSize: "4vw", fontWeight: "bold" }}>{UserInfo?.name}</p>
       </div>
-      <div style={{ padding: "10px" }}>
-        {UserInfo?.grade && <p>学年： {UserInfo.grade}</p>}
-        {UserInfo?.faculty && <p>学部： {UserInfo.faculty}</p>}
-        {UserInfo?.department && <p>学科： {UserInfo.department}</p>}
-        {UserInfo?.gender && <p>性別： {UserInfo?.gender}</p>}
-        {UserInfo?.intro && <p>自己紹介: {UserInfo.intro}</p>}
-      </div>
-    </div>
+    </>
   );
 }

web/components/Card.tsx

@@ -86,7 +86,7 @@ export function Card({ displayedUser, comparisonUserId, onFlip }: CardProps) {
   );
 }
 
-const CardFront = ({ displayedUser }: CardProps) => {
+export const CardFront = ({ displayedUser }: CardProps) => {
   return (
     <div
       style={{
@@ -250,7 +250,7 @@ const CardFront = ({ displayedUser }: CardProps) => {
   );
 };
 
-const CardBack = ({ displayedUser, comparisonUserId }: CardProps) => {
+export const CardBack = ({ displayedUser, comparisonUserId }: CardProps) => {
   return (
     <div
       style={{