@sayren/mcp 0.5.1 → 0.6.0

package/template/src/routes/signup.tsx

@@ -0,0 +1,234 @@
+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 { z } from "zod";
+import { SubmitButton } from "../components/submit-button";
+import { apiFor, authFor } from "../lib/api.server";
+import { clearCartToken, readCartToken } from "../lib/cart-session.server";
+import { safeRedirect } from "../lib/safe-redirect";
+import { signIn } from "../lib/session.server";
+
+const signupSearch = z.object({
+  redirectTo: z.string().optional().catch(undefined),
+});
+
+/**
+ * 가입 화면은 이메일·비밀번호 로그인이 켜진 스토어에서만 연다. 꺼져 있으면 서버가 403
+ * `PASSWORD_LOGIN_DISABLED`로 거절하므로 로그인 화면(소셜 로그인)으로 보낸다.
+ */
+const getSignupAvailable = createServerFn({ method: "GET" }).handler(async () => {
+  const store = await apiFor().store.get();
+  if (!store.loginMethods.includes("password")) throw redirect({ to: "/login" });
+  return null;
+});
+
+/**
+ * 가입 — 약관·개인정보 수집이용 동의는 필수이고 마케팅 수신은 선택이다. 서버가 가입과 같은 트랜잭션에서
+ * 동의 이력을 남긴다. 비회원으로 담아 둔 장바구니 토큰을 함께 보내면 회원 장바구니로 합쳐지고 그 토큰은 닫힌다.
+ */
+const signUp = createServerFn({ method: "POST" })
+  .validator(
+    z.object({
+      email: z.string(),
+      password: z.string(),
+      name: z.string(),
+      phone: z.string(),
+      terms: z.boolean(),
+      privacy: z.boolean(),
+      marketing: z.boolean(),
+      redirectTo: z.unknown(),
+    }),
+  )
+  .handler(async ({ data }) => {
+    const cartToken = readCartToken();
+    // 입력 규칙(비밀번호 조합·휴대폰 형식)은 SDK 스키마가 원천이다 — 서버에 보내기 전에 같은 규칙으로 안내한다
+    const parsed = signupRequestSchema.safeParse({
+      email: data.email.trim(),
+      password: data.password,
+      name: data.name.trim(),
+      phone: data.phone.trim() || undefined,
+      agreements: { terms: data.terms, privacy: data.privacy, marketing: data.marketing },
+      cartToken: cartToken ?? undefined,
+    });
+    if (!parsed.success) {
+      const issue = parsed.error.issues[0];
+      const field = issue?.path[0];
+      if (field === "agreements") return { redirectTo: null, error: "필수 약관에 동의해 주십시오" };
+      if (field === "email") return { redirectTo: null, error: "이메일 형식을 확인해 주십시오" };
+      if (field === "name") return { redirectTo: null, error: "이름을 입력해 주십시오" };
+      return { redirectTo: null, error: issue?.message ?? "입력한 내용을 확인해 주십시오" };
+    }
+    try {
+      signIn(await authFor().signUp(parsed.data));
+      if (cartToken) clearCartToken();
+      // 어디서 왔는지 모르면 홈으로 간다
+      return { redirectTo: safeRedirect(data.redirectTo ?? "/"), error: null };
+    } catch (error) {
+      return { redirectTo: null, error: signupErrorMessage(error) };
+    }
+  });
+
+function signupErrorMessage(error: unknown): string {
+  if (error instanceof ApiError) {
+    if (error.code === "EMAIL_ALREADY_EXISTS") return "이미 가입된 이메일입니다. 로그인해 주십시오";
+    if (error.code === "PASSWORD_LOGIN_DISABLED") return "이 스토어는 소셜 로그인으로만 가입합니다";
+    if (error.status === 400) return "입력한 내용을 확인해 주십시오";
+    if (error.status === 429) return "요청이 많습니다. 잠시 후 다시 시도해 주십시오";
+  }
+  return "가입하지 못했습니다. 잠시 후 다시 시도해 주십시오";
+}
+
+export const Route = createFileRoute("/signup")({
+  validateSearch: signupSearch,
+  loader: () => getSignupAvailable(),
+  head: () => ({ meta: [{ title: "회원가입" }] }),
+  component: Signup,
+});
+
+function Signup() {
+  const { redirectTo } = Route.useSearch();
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const form = new FormData(event.currentTarget);
+    const text = (name: string) => String(form.get(name) ?? "");
+    setPending(true);
+    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);
+      });
+  };
+
+  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="비밀번호"
+          name="password"
+          type="password"
+          autoComplete="new-password"
+          required
+          hint="10자 이상, 영문·숫자·특수문자 중 2종 이상"
+        />
+        <TextField label="이름" name="name" autoComplete="name" required />
+        <TextField
+          label="휴대폰 번호"
+          name="phone"
+          type="tel"
+          autoComplete="tel"
+          placeholder="01012345678"
+        />
+
+        <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 />
+            이용약관 동의 (필수)
+          </label>
+          <label className="flex items-center gap-2">
+            <input type="checkbox" name="privacy" required />
+            개인정보 수집이용 동의 (필수)
+          </label>
+          <label className="flex items-center gap-2">
+            <input type="checkbox" name="marketing" />
+            마케팅 수신 동의 (선택)
+          </label>
+        </fieldset>
+
+        <SubmitButton
+          disabled={pending}
+          className="h-12 w-full rounded-md bg-ink font-semibold text-white disabled:opacity-50"
+        >
+          가입하기
+        </SubmitButton>
+      </form>
+      {error ? (
+        <p role="alert" className="text-point text-sm">
+          {error}
+        </p>
+      ) : null}
+      <p className="text-center text-muted text-sm">
+        이미 회원이십니까?{" "}
+        <Link to="/login" search={{ redirectTo }} className="text-ink underline">
+          로그인
+        </Link>
+      </p>
+    </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>
+  );
+}