Feat : 폼을 페이지로부터 분리하고 validation을 적용합니다.

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>
+  );
+}

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>
+  );
+}

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>