@sayren/mcp 0.5.2 → 0.6.1

package/template/src/routes/orders.$orderId.tsx

@@ -15,6 +15,8 @@ import { ProductThumb } from "../components/product-thumb";
 import { SubmitButton } from "../components/submit-button";
 import { apiFor } from "../lib/api.server";
 import { formatDateTime, formatPrice } from "../lib/format";
+import { orderItemStatusLabel } from "../lib/order-status";
+import { pageTitle } from "../lib/page-title";
 import { readToken } from "../lib/session.server";
 
 const getOrder = createServerFn({ method: "GET" })
@@ -62,24 +64,26 @@ const createClaim = createServerFn({ method: "POST" })
   });
 
 function claimErrorMessage(error: unknown): string {
-  if (!(error instanceof ApiError)) return "접수하지 못했습니다. 잠시 후 다시 시도해주십시오.";
+  if (!(error instanceof ApiError)) return "접수하지 못했습니다. 잠시 후 다시 시도해 주십시오.";
   switch (error.code) {
     case "INVALID_QUANTITY":
-      return "남은 수량보다 많이 신청했습니다. 수량을 확인해주십시오.";
+      return "남은 수량보다 많이 신청했습니다. 수량을 확인해 주십시오.";
     case "CLAIM_IN_PROGRESS":
       return "이미 진행 중인 신청이 있습니다.";
     case "INVALID_STATUS":
-      return "지금은 신청할 수 없는 상태입니다. 주문 상태를 확인해주십시오.";
+      return "지금은 신청할 수 없는 상태입니다. 주문 상태를 확인해 주십시오.";
     case "PERIOD_EXPIRED":
       return "반품·교환 가능 기간이 지났습니다.";
     default:
-      return error.message || "접수하지 못했습니다. 잠시 후 다시 시도해주십시오.";
+      return error.message || "접수하지 못했습니다. 잠시 후 다시 시도해 주십시오.";
   }
 }
 
 export const Route = createFileRoute("/orders/$orderId")({
   loader: ({ params }) => getOrder({ data: { orderId: params.orderId } }),
-  head: ({ params }) => ({ meta: [{ title: `주문 ${params.orderId}` }] }),
+  head: ({ matches, params }) => ({
+    meta: [{ title: pageTitle(matches, `주문 ${params.orderId}`) }],
+  }),
   component: OrderDetail,
 });
 
@@ -171,6 +175,7 @@ function OrderDetail() {
             <div className="flex items-center gap-4">
               <ProductThumb
                 src={item.thumbnailUrl}
+                alt={item.productName}
                 className="size-16 rounded-md bg-chip object-cover"
               />
               <span className="flex flex-1 flex-col gap-1 text-sm">
@@ -179,7 +184,7 @@ function OrderDetail() {
                   <span className="text-muted text-xs">{item.optionName}</span>
                 ) : null}
                 <span className="text-muted text-xs">
-                  {item.status} · 수량 {item.quantity}개
+                  {orderItemStatusLabel(item.status)} · 수량 {item.quantity}개
                   {item.canceledQuantity > 0
                     ? ` · 취소·반품 ${item.canceledQuantity}개 · 남은 수량 ${item.activeQuantity}개`
                     : null}
@@ -271,9 +276,9 @@ function ClaimForm({
   const quantity = Number(quantityText);
   const quantityError =
     quantityText.trim() === "" || !Number.isInteger(quantity)
-      ? "수량을 입력해주십시오."
+      ? "수량을 입력해 주십시오."
       : quantity < 1 || quantity > item.activeQuantity
-        ? `수량은 1개 이상 ${item.activeQuantity}개 이하로 입력해주십시오.`
+        ? `수량은 1개 이상 ${item.activeQuantity}개 이하로 입력해 주십시오.`
         : null;
   return (
     <form

package/template/src/routes/orders.index.tsx

@@ -2,6 +2,7 @@ import { createFileRoute, Link, redirect } from "@tanstack/react-router";
 import { createServerFn } from "@tanstack/react-start";
 import { apiFor } from "../lib/api.server";
 import { formatDateTime, formatPrice } from "../lib/format";
+import { pageTitle } from "../lib/page-title";
 import { readToken } from "../lib/session.server";
 
 const getOrders = createServerFn({ method: "GET" }).handler(async () => {
@@ -12,7 +13,7 @@ const getOrders = createServerFn({ method: "GET" }).handler(async () => {
 
 export const Route = createFileRoute("/orders/")({
   loader: () => getOrders(),
-  head: () => ({ meta: [{ title: "주문 내역" }] }),
+  head: ({ matches }) => ({ meta: [{ title: pageTitle(matches, "주문 내역") }] }),
   component: Orders,
 });
 

package/template/src/routes/products.$productId.tsx

@@ -10,6 +10,7 @@ import { useTrack } from "../lib/analytics";
 import { apiFor } from "../lib/api.server";
 import { readCartToken, writeCartToken } from "../lib/cart-session.server";
 import { formatPrice } from "../lib/format";
+import { pageTitle } from "../lib/page-title";
 import { readToken } from "../lib/session.server";
 
 const getProduct = createServerFn({ method: "GET" })
@@ -52,7 +53,9 @@ const addToCart = createServerFn({ method: "POST" })
 
 export const Route = createFileRoute("/products/$productId")({
   loader: ({ params }) => getProduct({ data: { productId: params.productId } }),
-  head: ({ loaderData }) => ({ meta: [{ title: loaderData ? loaderData.name : "상품" }] }),
+  head: ({ matches, loaderData }) => ({
+    meta: [{ title: pageTitle(matches, loaderData ? loaderData.name : "상품") }],
+  }),
   component: ProductDetail,
 });
 
@@ -75,12 +78,16 @@ function ProductDetail() {
   return (
     <div className="grid gap-8 md:grid-cols-2">
       <div className="space-y-3">
-        <ProductThumb src={product.thumbnailUrl} className="w-full rounded-lg bg-chip" />
-        {product.images.slice(0, 4).map((image) => (
+        <ProductThumb
+          src={product.thumbnailUrl}
+          alt={product.name}
+          className="w-full rounded-lg bg-chip"
+        />
+        {product.images.slice(0, 4).map((image, index) => (
           <img
             key={image}
             src={image}
-            alt=""
+            alt={`${product.name} 이미지 ${index + 1}`}
             className="w-full rounded-lg bg-chip"
             loading="lazy"
           />
@@ -107,7 +114,7 @@ function ProductDetail() {
             setError(null);
             addToCart({ data: { productId: product.productId, optionId, quantity } })
               .then(() => navigate({ to: "/cart" }))
-              .catch(() => setError("장바구니에 담지 못했습니다. 다시 시도해주십시오"))
+              .catch(() => setError("장바구니에 담지 못했습니다. 다시 시도해 주십시오"))
               .finally(() => setSubmitting(false));
           }}
         >

package/template/src/routes/products.index.tsx

@@ -4,6 +4,7 @@ import { z } from "zod";
 import { ProductCard } from "../components/product-card";
 import { useTrack } from "../lib/analytics";
 import { apiFor } from "../lib/api.server";
+import { pageTitle } from "../lib/page-title";
 
 /** 목록·검색 조건 — URL에 둔다. 공유·뒤로가기가 그대로 동작한다 */
 const productsSearch = z.object({
@@ -29,7 +30,7 @@ export const Route = createFileRoute("/products/")({
   validateSearch: productsSearch,
   loaderDeps: ({ search }) => search,
   loader: ({ deps }) => searchProducts({ data: deps }),
-  head: () => ({ meta: [{ title: "전체 상품" }] }),
+  head: ({ matches }) => ({ meta: [{ title: pageTitle(matches, "전체 상품") }] }),
   component: Products,
 });
 
@@ -54,6 +55,9 @@ function Products() {
 
   return (
     <div className="space-y-6">
+      <h1 className="font-bold text-2xl">
+        {applied.keyword ? `"${applied.keyword}" 검색 결과` : "전체 상품"}
+      </h1>
       {/* 하이드레이션 전에는 GET 폼으로 그대로 제출되고, 뒤에는 화면을 새로 그리지 않고 이동한다 */}
       <form
         action="/products"
@@ -70,6 +74,7 @@ function Products() {
         <input
           type="search"
           name="keyword"
+          aria-label="상품 검색"
           defaultValue={applied.keyword ?? ""}
           placeholder="상품 검색"
           className="h-11 flex-1 rounded-md border border-line px-3"

package/template/src/routes/signup.tsx

@@ -0,0 +1,235 @@
+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 { pageTitle } from "../lib/page-title";
+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: ({ matches }) => ({ meta: [{ title: pageTitle(matches, "회원가입") }] }),
+  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>
+  );
+}