Update tsx files

5 files changed, 118 insertions, 67 deletions

diff --git a/src/SignUp.tsx b/src/SignUp.tsx
index 2a7f448..3103758 100644
--- a/src/SignUp.tsx
+++ b/src/SignUp.tsx
@@ -1,73 +1,32 @@
 import './SignUp.css'
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod"
+import { Link } from 'react-router-dom';
 
-const schema = z.object({
-  name: z.string(),
-  email: z.string().email("それメアドじゃないよ"),
-  birthday: z.coerce.date().max(new Date(), { message: "まだ生まれてないじゃん" }),
-  language: z.string(),
-})
+/* import { useState } from "react";
+ * import { useForm } from "react-hook-form";
+ * import { zodResolver } from "@hookform/resolvers/zod"; */
+/* import * as z from "zod" */
+/* 
+ * const schema = z.object({
+ *   name: z.string().min(1, { message: '必須項目です' }),
+ *   email: z.string().min(1, { message: '必須項目です' }).email("メールアドレスを入力してください"),
+ *   language: z.string(),
+ * }) */
 
-type Answer = {
-  name: string,
-  email: string,
-  birthday: Date,
-  language: string,
-}
+/* type Answer = {
+ *   name: string,
+ *   email: string,
+ *   birthday: Date,
+ *   language: string,
+ * } */
 
 export const SignUp = () => {
-  const { register, handleSubmit, reset, formState: { errors } } = useForm<Answer>({
-    resolver: zodResolver(schema)
-  });
-  const [answer, setAnswer] = useState<Answer | null>(null);
-
-  const yourAnswer = answer ? (
-    <>
-      <h2>あなたの情報です</h2>
-      <dl>
-        <dt>おぬしの名前は…</dt>
-        <dd>{answer.name}</dd>
-        <dt>おぬしのメアドは…</dt>
-        <dd>{answer.email}</dd>
-        <dt>あなたの誕生日</dt>
-        <dd>{answer.birthday.getFullYear()}年{answer.birthday.getMonth()}月{answer.birthday.getDay()}日</dd>
-        <dt>おぬしの好きなプログラミング言語は…</dt>
-        <dd>{answer.language}</dd>
-      </dl>
-    </>
-  ) : (<></>)
-
   return (
     <>
-      <h1>会員登録</h1>
-      <form className="SignUpForm" onSubmit={handleSubmit((data) => setAnswer(data))}>
-        <label>お名前:</label>
-        <input {...register("name")} placeholder="おなまえ" />
-        {errors.name?.message}
-        <label>めるあど</label>
-        <input {...register("email", { required: true })} placeholder="めるあど" />
-        {errors.email?.message && <p className="error">{errors.email?.message}</p>}
-        <label>生まれた日</label>
-        <input {...register("birthday", { required: true })} placeholder="yyyy/mm/dd" />
-        {errors.birthday?.message && <p className="error">{errors.birthday?.message}</p>}
-        <label>好きなプログラミング言語</label>
-        <select {...register("language", { required: true })}>
-          <option value="">Select...</option>
-          <option value="Gulie">Guile</option>
-          <option value="Gauche">Gauche</option>
-          <option value="Racket">Racket</option>
-          <option value="Larceny">Larceny</option>
-          <option value="Chicken">Chicken</option>
-        </select>
-        {errors.language?.message && <p className="error">{errors.language?.message}</p>}
-        <input type="submit" />
-        <button type="button" onClick={() => reset()}>消す</button>
-      </form>
-
-      {yourAnswer}
+      <div className="SignUpForm">
+        <h1>会員登録</h1>
+        <p>サービスの利用のためには会員登録が必要です。</p>
+        <Link to="/sign-up/form1">会員登録を始める</Link>
+      </div>
     </>
   );
 }
diff --git a/src/SignUpForm1.tsx b/src/SignUpForm1.tsx
new file mode 100644
index 0000000..fee515f
--- /dev/null
+++ b/src/SignUpForm1.tsx
@@ -0,0 +1,77 @@
+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,
+}
+
+export const SignUpForm1 = () => {
+  const { register, handleSubmit, formState: { errors } } = useForm<Form1>({
+    resolver: zodResolver(schema),
+  });
+
+  const onsubmit = (data: Form1) => console.log(data);
+  const onerror = (err: any) => console.log(err);
+
+  return (
+    <>
+      <h1>会員登録 フェーズ 1</h1>
+      <form className="SignUpForm" onSubmit={handleSubmit(onsubmit, onerror)}>
+        <div>
+          <label htmlFor="name">名前: </label>
+          <input id="name" type="text" {...register('name')}></input>
+          <div className="error">{errors.name?.message}</div>
+        </div>
+        <div>
+          <label htmlFor="kana">名前カナ: </label>
+          <input id="kana" type="text" {...register('kana')}></input>
+          <div className="error">{errors.kana?.message}</div>
+        </div>
+        <div>
+          <label>電話番号</label>
+          <input id="tel1" type="text" {...register('tel1')}></input>-
+          <input id="tel2" type="text" {...register('tel2')}></input>-
+          <input id="tel3" type="text" {...register('tel3')}></input>
+          <div className="error">{errors.tel3?.message}</div>
+        </div>
+        <div>
+          <button type="submit">次へ</button>
+        </div>
+      </form >
+    </>
+  );
+}
+
diff --git a/src/SignUpForm2.tsx b/src/SignUpForm2.tsx
new file mode 100644
index 0000000..1824fd6
--- /dev/null
+++ b/src/SignUpForm2.tsx
@@ -0,0 +1,9 @@
+import './SignUp.css'
+
+export const SignUpForm2 = () => {
+  return (
+    <>
+      <h1>会員登録 フェーズ 2</h1>
+    </>
+  );
+}
diff --git a/src/Top.tsx b/src/Top.tsx
index 7907ed5..9d88bc6 100644
--- a/src/Top.tsx
+++ b/src/Top.tsx
@@ -1,11 +1,13 @@
 import './Top.css'
+import { Link } from 'react-router-dom';
 
 export const Top = () => {
   return (
     <>
       <h1>トップページ</h1>
       <ul>
-        <li><a href='./sign-up'>会員登録</a></li>
+        <li><Link to="/">トップページ</Link></li>
+        <li><Link to="./sign-up">会員登録</Link></li>
       </ul>
     </>
   );
diff --git a/src/routes.tsx b/src/routes.tsx
index 8cac244..cb2b37c 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,8 +1,12 @@
 import { createBrowserRouter } from 'react-router-dom';
-import { Top } from './Top.tsx';
-import { SignUp } from './SignUp.tsx';
+import { Top } from './Top';
+import { SignUp } from './SignUp';
+import { SignUpForm1 } from './SignUpForm1';
+import { SignUpForm2 } from './SignUpForm2';
 
 export const routes = createBrowserRouter([
   { path: '/', element: <Top /> },
-  { path: '/sign-up', element: <SignUp /> }
+  { path: '/sign-up', element: <SignUp /> },
+  { path: '/sign-up/form1', element: <SignUpForm1 /> },
+  { path: '/sign-up/form2', element: <SignUpForm2 /> },
 ]);