確認画面まで作成する

1 files changed, 8 insertions, 40 deletions

diff --git a/src/SignUpForm1.tsx b/src/SignUpForm1.tsx
index fee515f..76c6020 100644
--- a/src/SignUpForm1.tsx
+++ b/src/SignUpForm1.tsx
@@ -1,49 +1,18 @@
 import './SignUp.css'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from "@hookform/resolvers/zod"
-import * as z from "zod"
-import parsePhoneNumber from 'libphonenumber-js'
-
-const kanaRegex = /^[ァ-ン]+$/
-
-const schema = z.object({
-  name: z.string().min(1, { message: '必須項目です' }),
-  kana: z.string().min(1, { message: '必須項目です' }).regex(kanaRegex, { message: 'カタカナを入力してください' }),
-  tel1: z.string(),
-  tel2: z.string(),
-  tel3: z.string(),
-}).refine(
-  ({ tel1, tel2, tel3 }) => (tel1.length > 0 && tel2.length > 0 && tel3.length > 0),
-  {
-    message: '必須項目です',
-    path: ['tel3'],
-  }
-).refine(
-  ({ tel1, tel2, tel3 }) => {
-    const phoneNumber = parsePhoneNumber('+81' + `${tel1}${tel2}${tel3}`)
-    console.log([`${tel1}${tel2}${tel3}`, phoneNumber?.isValid()])
-    return phoneNumber?.isValid()
-  },
-  {
-    message: '電話番号が不正です',
-    path: ['tel3'],
-  }
-)
-
-type Form1 = {
-  name: string,
-  kana: string,
-  tel1: string,
-  tel2: string,
-  tel3: string,
-}
+import { useNavigate } from 'react-router-dom';
+import { Form1, form1Schema } from './signUpSchema'
 
 export const SignUpForm1 = () => {
   const { register, handleSubmit, formState: { errors } } = useForm<Form1>({
-    resolver: zodResolver(schema),
+    resolver: zodResolver(form1Schema),
   });
+  const navigate = useNavigate();
 
-  const onsubmit = (data: Form1) => console.log(data);
+  const onsubmit = (state: Form1) => {
+    navigate('/sign-up/form2', { state })
+  }
   const onerror = (err: any) => console.log(err);
 
   return (
@@ -70,8 +39,7 @@ export const SignUpForm1 = () => {
         <div>
           <button type="submit">次へ</button>
         </div>
-      </form >
+      </form>
     </>
   );
 }
-