diff options
Diffstat (limited to 'src/SignUpConfirm.tsx')
-rw-r--r-- | src/SignUpConfirm.tsx | 19 |
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> </> ); } |