@sayren/mcp 0.6.1 → 0.8.0

package/template/src/routes/signup.tsx

@@ -1,11 +1,15 @@
+import { zodResolver } from "@hookform/resolvers/zod";
 import { ApiError, signupRequestSchema } from "@sayren/storefront-sdk";
 import { createFileRoute, Link, redirect } from "@tanstack/react-router";
 import { createServerFn } from "@tanstack/react-start";
-import { useId, useState } from "react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { SubmitButton } from "../components/submit-button";
+import { TextField } from "../components/text-field";
 import { apiFor, authFor } from "../lib/api.server";
 import { clearCartToken, readCartToken } from "../lib/cart-session.server";
+import { type SignupForm, type SignupFormInput, signupFormSchema } from "../lib/form-schemas";
 import { pageTitle } from "../lib/page-title";
 import { safeRedirect } from "../lib/safe-redirect";
 import { signIn } from "../lib/session.server";
@@ -90,57 +94,72 @@ export const Route = createFileRoute("/signup")({
 function Signup() {
   const { redirectTo } = Route.useSearch();
   const [error, setError] = useState<string | null>(null);
-  const [pending, setPending] = useState(false);
+  const [leaving, setLeaving] = useState(false);
+  const form = useForm<SignupFormInput, unknown, SignupForm>({
+    resolver: zodResolver(signupFormSchema),
+    // 기본값을 주지 않는다 — 주면 등록할 때 DOM을 덮어 하이드레이션 전에 입력·체크한 값이 사라진다.
+    // 체크박스는 DOM에서 boolean으로 읽힌다
+  });
+  const { errors, isSubmitting } = form.formState;
 
-  const submit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    const form = new FormData(event.currentTarget);
-    const text = (name: string) => String(form.get(name) ?? "");
-    setPending(true);
+  const submit = form.handleSubmit(async (values) => {
     setError(null);
-    void signUp({
-      data: {
-        email: text("email"),
-        password: text("password"),
-        name: text("name"),
-        phone: text("phone"),
-        terms: form.get("terms") === "on",
-        privacy: form.get("privacy") === "on",
-        marketing: form.get("marketing") === "on",
-        redirectTo,
-      },
-    })
-      .then((result) => {
-        // 로그인 상태가 모든 화면에 새로 반영되도록 문서째 이동한다
-        if (result.redirectTo) window.location.assign(result.redirectTo);
-        else {
-          setError(result.error);
-          setPending(false);
-        }
-      })
-      .catch(() => {
-        setError("가입하지 못했습니다. 잠시 후 다시 시도해 주십시오");
-        setPending(false);
+    try {
+      const result = await signUp({
+        data: {
+          email: values.email,
+          password: values.password,
+          name: values.name,
+          phone: values.phone,
+          terms: values.agreements.terms,
+          privacy: values.agreements.privacy,
+          marketing: values.agreements.marketing,
+          redirectTo,
+        },
       });
-  };
+      // 로그인 상태가 모든 화면에 새로 반영되도록 문서째 이동한다. 이동하는 동안 버튼을 다시 열지 않는다
+      if (result.redirectTo) {
+        setLeaving(true);
+        window.location.assign(result.redirectTo);
+      } else setError(result.error);
+    } catch {
+      setError("가입하지 못했습니다. 잠시 후 다시 시도해 주십시오");
+    }
+  });
+  const agreementError = errors.agreements?.terms?.message ?? errors.agreements?.privacy?.message;
 
   return (
     <div className="mx-auto max-w-sm space-y-5 py-10">
       <h1 className="font-bold text-2xl">회원가입</h1>
       <form onSubmit={submit} className="space-y-3">
-        <TextField label="이메일" name="email" type="email" autoComplete="email" required />
+        <TextField
+          label="이메일"
+          registration={form.register("email")}
+          error={errors.email?.message}
+          type="email"
+          autoComplete="email"
+          required
+        />
         <TextField
           label="비밀번호"
-          name="password"
+          registration={form.register("password")}
+          error={errors.password?.message}
           type="password"
           autoComplete="new-password"
           required
           hint="10자 이상, 영문·숫자·특수문자 중 2종 이상"
         />
-        <TextField label="이름" name="name" autoComplete="name" required />
+        <TextField
+          label="이름"
+          registration={form.register("name")}
+          error={errors.name?.message}
+          autoComplete="name"
+          required
+        />
         <TextField
           label="휴대폰 번호"
-          name="phone"
+          registration={form.register("phone")}
+          error={errors.phone?.message}
           type="tel"
           autoComplete="tel"
           placeholder="01012345678"
@@ -149,21 +168,22 @@ function Signup() {
         <fieldset className="space-y-2 rounded-md border border-line p-3 text-sm">
           <legend className="px-1 font-medium">약관 동의</legend>
           <label className="flex items-center gap-2">
-            <input type="checkbox" name="terms" required />
+            <input type="checkbox" {...form.register("agreements.terms")} required />
             이용약관 동의 (필수)
           </label>
           <label className="flex items-center gap-2">
-            <input type="checkbox" name="privacy" required />
+            <input type="checkbox" {...form.register("agreements.privacy")} required />
             개인정보 수집이용 동의 (필수)
           </label>
           <label className="flex items-center gap-2">
-            <input type="checkbox" name="marketing" />
+            <input type="checkbox" {...form.register("agreements.marketing")} />
             마케팅 수신 동의 (선택)
           </label>
+          {agreementError ? <p className="text-point text-xs">{agreementError}</p> : null}
         </fieldset>
 
         <SubmitButton
-          disabled={pending}
+          disabled={isSubmitting || leaving}
           className="h-12 w-full rounded-md bg-ink font-semibold text-white disabled:opacity-50"
         >
           가입하기
@@ -183,53 +203,3 @@ function Signup() {
     </div>
   );
 }
-
-function TextField({
-  label,
-  name,
-  type = "text",
-  autoComplete,
-  placeholder,
-  required,
-  hint,
-}: {
-  label: string;
-  name: string;
-  type?: string;
-  autoComplete?: string;
-  placeholder?: string;
-  required?: boolean;
-  hint?: string;
-}) {
-  const hintId = useId();
-  return (
-    <label className="block space-y-1">
-      <span className="text-sm">
-        {label}
-        {/* 필수 표시는 눈으로만 본다 — 입력의 required가 보조 기술에 필수임을 알린다 */}
-        {required ? (
-          <span aria-hidden="true" className="text-point">
-            {" "}
-            *
-          </span>
-        ) : null}
-      </span>
-      <input
-        type={type}
-        name={name}
-        autoComplete={autoComplete}
-        placeholder={placeholder}
-        required={required}
-        // 이름은 라벨 글자 그대로다(필수 표시·안내 문구는 빼고) — 안내는 aria-describedby로 잇는다
-        aria-label={label}
-        aria-describedby={hint ? hintId : undefined}
-        className="h-11 w-full rounded-md border border-line px-3"
-      />
-      {hint ? (
-        <span id={hintId} className="block text-muted text-xs">
-          {hint}
-        </span>
-      ) : null}
-    </label>
-  );
-}