Confirmation UI

web/app/signup/steps/step1_profile.tsx

@@ -44,7 +44,7 @@ export default function Step1({ onSave, prev, caller }: StepProps<Step1User>) {
   return (
     <>
       <div className="flex h-full flex-col gap-4 p-4">
-        <h1 className="text-xl">アカウント設定</h1>
+        <h1 className="text-xl">アカウント設定(1/5)</h1>
         <div className="flex flex-col gap-2">
           <form onSubmit={handleSubmit(onSubmit)}>
             <Field fieldName="name" fieldLabel="名前" error={errors?.name}>

web/app/signup/steps/step2_img.tsx

@@ -39,6 +39,7 @@ export default function Step2({
   return (
     <>
       <div className="g-2 flex flex-col p-2">
+        <h1 className="text-xl">プロフィール画像設定(2/5)</h1>
         <div style={{ textAlign: "center", marginTop: "15vh" }}>
           <PhotoModal
             open={open}

web/app/signup/steps/step3_confirmation.tsx

@@ -1,6 +1,6 @@
 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 +18,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 +64,6 @@ export default function Confirmation({
           次へ
         </button>
       </div>
-    </div>
+    </>
   );
 }

web/app/signup/steps/step4_course.tsx

@@ -13,7 +13,7 @@ export default function Step4({ onSave }: StepProps<void>) {
           <FullScreenCircularProgress />
         ) : (
           <div className="mx-4 mt-4 flex flex-1 flex-col gap-4">
-            <h1>授業情報の登録 (スキップ可)</h1>
+            <h1>授業情報の登録(4/5,スキップ可)</h1>
             <div className="flex-1">
               <EditableCoursesTable userId={state.data} />
             </div>

web/app/signup/steps/step5_interests.tsx

@@ -86,6 +86,7 @@ export default function Step5({ back }: BackProp) {
     <>
       <div className="h-full overflow-y-scroll">
         <div className="mx-auto flex h-full max-w-lg flex-col px-4">
+          <h1 className="text-xl">興味分野の登録(5/5、スキップ可)</h1>
           <div className="flex-1">
             <div className="flex flex-wrap gap-2 p-2">
               {draftSubjects.map((subject, index) => (