From 90ad0c0b348b893eabe96aa3aa4dced2ef95d8b1 Mon Sep 17 00:00:00 2001
From: heo min <min@weffwd.com>
Date: Wed, 20 Sep 2023 23:23:59 +0900
Subject: [PATCH] =?UTF-8?q?Feat=20:=20=ED=8F=BC=EC=9D=84=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EB=A1=9C=EB=B6=80=ED=84=B0=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC=ED=95=98=EA=B3=A0=20validation=EC=9D=84=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9=ED=95=A9=EB=8B=88=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/(auth)/_component/error-message.tsx   | 11 +++
 .../app/(auth)/_component/register-form.tsx   | 88 +++++++++++++++++++
 apps/web/app/(auth)/register/page.tsx         | 21 +----
 3 files changed, 102 insertions(+), 18 deletions(-)
 create mode 100644 apps/web/app/(auth)/_component/error-message.tsx
 create mode 100644 apps/web/app/(auth)/_component/register-form.tsx

diff --git a/apps/web/app/(auth)/_component/error-message.tsx b/apps/web/app/(auth)/_component/error-message.tsx
new file mode 100644
index 00000000..087ea67d
--- /dev/null
+++ b/apps/web/app/(auth)/_component/error-message.tsx
@@ -0,0 +1,11 @@
+interface ErrorMessageProps {
+  message?: string;
+}
+
+export function ErrorMessage({ message }: ErrorMessageProps): JSX.Element {
+  return (
+    <ul className="error-messages">
+      <li>{message}</li>
+    </ul>
+  );
+}
diff --git a/apps/web/app/(auth)/_component/register-form.tsx b/apps/web/app/(auth)/_component/register-form.tsx
new file mode 100644
index 00000000..d39ce54c
--- /dev/null
+++ b/apps/web/app/(auth)/_component/register-form.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import type { SubmitHandler } from "react-hook-form";
+import { useForm } from "react-hook-form";
+import { useRouter } from "next/navigation";
+import type { RegisterReq } from "../_types";
+import { useRegister } from "../_hooks/use-register";
+import { UserSchema, UserType } from "../_types";
+import { ErrorMessage } from "./error-message";
+
+export function RegisterForm(): JSX.Element {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setError,
+    resetField,
+  } = useForm<RegisterReq>();
+
+  const { mutate } = useRegister();
+
+  const router = useRouter();
+
+  const onSubmit: SubmitHandler<RegisterReq> = data => {
+    mutate(data, {
+      onSuccess: () => {
+        router.push("/login");
+      },
+      onError: () => {
+        setError("email", {
+          message: "email has already been taken",
+        });
+        setError("username", {
+          message: "username has already been taken",
+        });
+
+        resetField("password");
+      },
+    });
+  };
+
+  const isEmailValid = (email: string) => {
+    const emailPattern = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
+    return emailPattern.test(email);
+  };
+
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <fieldset className="form-group">
+        <input
+          {...register("username", { required: "Username can't be blank" })}
+          className="form-control form-control-lg"
+          placeholder="Username"
+          type="text"
+        />
+      </fieldset>
+      {errors.username ? <ErrorMessage message={errors.username.message} /> : null}
+
+      <fieldset className="form-group">
+        <input
+          {...register("email", {
+            required: "Email can't be blank",
+            validate: email => isEmailValid(email) || "Invalid email format",
+          })}
+          className="form-control form-control-lg"
+          placeholder="Email"
+          type="text"
+        />
+      </fieldset>
+      {errors.email ? <ErrorMessage message={errors.email.message} /> : null}
+
+      <fieldset className="form-group">
+        <input
+          {...register("password", { required: "Password can't be blank" })}
+          className="form-control form-control-lg"
+          placeholder="Password"
+          type="password"
+        />
+      </fieldset>
+      {errors.password ? <ErrorMessage message={errors.password.message} /> : null}
+
+      <button className="btn btn-lg btn-primary pull-xs-right" type="submit">
+        Sign up
+      </button>
+    </form>
+  );
+}
diff --git a/apps/web/app/(auth)/register/page.tsx b/apps/web/app/(auth)/register/page.tsx
index 03737e48..bce9c155 100644
--- a/apps/web/app/(auth)/register/page.tsx
+++ b/apps/web/app/(auth)/register/page.tsx
@@ -1,3 +1,5 @@
+import { RegisterForm } from "../_component/register-form";
+
 export default function RegisterPage(): JSX.Element {
   return (
     <div className="auth-page">
@@ -9,24 +11,7 @@ export default function RegisterPage(): JSX.Element {
               <a href="/login">Have an account?</a>
             </p>
 
-            <ul className="error-messages">
-              <li>That email is already taken</li>
-            </ul>
-
-            <form>
-              <fieldset className="form-group">
-                <input className="form-control form-control-lg" placeholder="Username" type="text" />
-              </fieldset>
-              <fieldset className="form-group">
-                <input className="form-control form-control-lg" placeholder="Email" type="text" />
-              </fieldset>
-              <fieldset className="form-group">
-                <input className="form-control form-control-lg" placeholder="Password" type="password" />
-              </fieldset>
-              <button className="btn btn-lg btn-primary pull-xs-right" type="button">
-                Sign up
-              </button>
-            </form>
+            <RegisterForm />
           </div>
         </div>
       </div>