初期登録確認画面のデザイン改善

Author: RRRyoma

web/app/signup/steps/step3_confirmation.tsx

@@ -1,6 +1,7 @@
 import type { Step1User } from "common/zod/types";
 import type { BackProp, StepProps } from "~/app/signup/common";
 import CardBasicInfo from "~/components/CardBasicInfo";
+import UserAvatar from "~/components/human/avatar";
 import type { Step2Data } from "./step2_img";
 
 interface inputDataProps {
@@ -18,27 +19,40 @@ export default function Confirmation({
     throw new Error("don't skip the steps");
   }
   return (
-    <div className="px-8 py-2">
-      <h1 className="mb-2 text-xl">確認</h1>
-      <p>以下の内容で登録する場合は「次へ」を押してください。</p>
-      <h3 className="pt-4 text-lg">基本情報</h3>
-      <div className="flex flex-col items-center py-4">
-        <div
-          className="rounded-md border-2 border-primary bg-secondary p-5"
-          style={{ width: "min(50dvh, 87.5vw)" }}
-        >
-          <CardBasicInfo
-            displayedUser={{
-              ...Step1Data,
-              ...Step2Data,
-              id: 0, // dummy
-              guid: "zero", // dummy
-            }}
-          />
+    <>
+      <div className="px-8 py-2">
+        <h1 className="mb-2 text-xl">確認(3/5)</h1>
+        <p>以下の内容で登録する場合は「次へ」を押してください。</p>
+        <div className="p-6 space-y-10">
+          <div className="w-6/6 mx-auto">
+            <h3 className="text-xl font-bold mb-2">プロフィール画像</h3>
+            <div className="card bg-white p-6">
+              <UserAvatar
+                pictureUrl={Step2Data.pictureUrl}
+                width={"200"}
+                height={"200"}
+              />
+            </div>
+          </div>
+          <div className="w-6/6 mx-auto">
+            <h3 className="text-xl font-bold mb-2">基本情報</h3>
+            <div className="card bg-white p-6">
+              <p>名前：　　{Step1Data.name}</p>
+              <p>学年：　　{Step1Data.grade}</p>
+              <p>
+                学部学科：{Step1Data.faculty}
+                {Step1Data.department}
+              </p>
+            </div>
+          </div>
+          <div className="w-6/6 mx-auto">
+            <h3 className="text-xl font-bold mb-2">自己紹介</h3>
+            <div className="card bg-white p-6">
+              <p className="pt-2">{Step1Data.intro}</p>
+            </div>
+          </div>
         </div>
       </div>
-      <h3 className="pt-4 text-lg">自己紹介</h3>
-      <p className="pt-2">{Step1Data.intro}</p>
       <div className="fixed bottom-0 left-0 flex w-full justify-between p-3">
         <button type="button" onClick={back} className="btn">
           前へ
@@ -51,6 +65,6 @@ export default function Confirmation({
           次へ
         </button>
       </div>
-    </div>
+    </>
   );
 }