react-query で取得した値でセレクトボックスを出すところまで実装

1 files changed, 14 insertions, 5 deletions

diff --git a/src/SignUpConfirm.tsx b/src/SignUpConfirm.tsx
index 295bad6..63b9d10 100644
--- a/src/SignUpConfirm.tsx
+++ b/src/SignUpConfirm.tsx
@@ -1,17 +1,19 @@
 import './SignUp.css'
 import { useLocation, Navigate } from 'react-router-dom';
-import { Form } from './signUpSchema'
+import { Form1Data, Form2Data, Form3Data, FormData, displayTel } from './signUpSchema'
 
 export const SignUpConfirm = () => {
   const location = useLocation()
 
-  const form = location.state as Form | null;
+  const data = location.state as { form1: Form1Data, form2: Form2Data, form3: Form3Data } | null;
 
-  // form1 のデータがない場合は form1 にリダイレクトする
-  if (form === null) {
+  if (data === null) {
     return <Navigate replace to="/sign-up/form1" />
   }
 
+  const { form1, form2, form3 } = data
+  const form: FormData = { ...form1, ...form2, ...form3 }
+
   return (
     <>
       <h1>会員登録 確認画面</h1>
@@ -20,14 +22,21 @@ export const SignUpConfirm = () => {
         <div className="signUpForm">
           <p>お名前: {form.name}</p>
           <p>名前カナ: {form.kana}</p>
-          <p>電話番号: {form.tel1}-{form.tel2}-{form.tel3}</p>
+          <p>電話番号: {displayTel(form)}</p>
         </div>
         <h2>ログイン関連の情報</h2>
         <div className="signUpForm">
           <p>メールアドレス: {form.email}</p>
           <p>パスワード: セキュリティ上の理由のため非表示</p>
         </div>
+        <h2>プログラミング関連の情報</h2>
+        <div className="signUpForm">
+          <p>GitHubのアカウントはある？: {form.hasGitHubRepo ? 'ある' : 'ない'}</p>
+          <p>GitHub の username: {form.gitHubUsername}</p>
+          <p>お気に入りの GitHub リポジトリ: {form.repoName}</p>
+        </div>
       </div>
+      <button>送信</button>
     </>
   );
 }