@sayren/mcp 0.6.0 → 0.8.0

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

@@ -1,42 +1,33 @@
-import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
-import { createServerFn } from "@tanstack/react-start";
-import { z } from "zod";
+import { productSortSchema } from "@sayren/storefront-sdk";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useQueryStates } from "nuqs";
 import { ProductCard } from "../components/product-card";
 import { useTrack } from "../lib/analytics";
-import { apiFor } from "../lib/api.server";
-
-/** 목록·검색 조건 — URL에 둔다. 공유·뒤로가기가 그대로 동작한다 */
-const productsSearch = z.object({
-  keyword: z.string().optional().catch(undefined),
-  categoryId: z.string().optional().catch(undefined),
-  sort: z.enum(["recommend", "latest"]).optional().catch(undefined),
-  page: z.coerce.number().int().min(1).optional().catch(undefined),
-});
-type ProductsSearch = z.infer<typeof productsSearch>;
-
-const searchProducts = createServerFn({ method: "GET" })
-  .validator(productsSearch)
-  .handler(async ({ data }) => {
-    const api = apiFor();
-    const [categories, page] = await Promise.all([
-      api.catalog.listCategories(),
-      api.catalog.searchProducts({ ...data, page: data.page ?? 1, size: 24 }),
-    ]);
-    return { categories, page };
-  });
+import { categoriesQuery, productsQuery } from "../lib/catalog-queries";
+import { pageTitle } from "../lib/page-title";
+import { parseProductsSearch, productsSearchParams, SORT_LABELS } from "../lib/products-search";
 
 export const Route = createFileRoute("/products/")({
-  validateSearch: productsSearch,
+  // 목록·검색 조건은 URL에 둔다 — 읽는 규칙은 nuqs 파서 하나다(`lib/products-search.ts`)
+  validateSearch: parseProductsSearch,
   loaderDeps: ({ search }) => search,
-  loader: ({ deps }) => searchProducts({ data: deps }),
-  head: () => ({ meta: [{ title: "전체 상품" }] }),
+  // 서버 렌더에서 미리 받아 쿼리 캐시에 넣는다. 화면은 같은 쿼리를 캐시에서 읽는다
+  loader: ({ context, deps }) =>
+    Promise.all([
+      context.queryClient.ensureQueryData(categoriesQuery()),
+      context.queryClient.ensureQueryData(productsQuery(deps)),
+    ]),
+  head: ({ matches }) => ({ meta: [{ title: pageTitle(matches, "전체 상품") }] }),
   component: Products,
 });
 
 function Products() {
-  const { categories, page } = Route.useLoaderData();
   const applied = Route.useSearch();
-  const navigate = useNavigate();
+  const { data: categories } = useSuspenseQuery(categoriesQuery());
+  const { data: page } = useSuspenseQuery(productsQuery(applied));
+  // 검색어·정렬을 바꾸면 URL만 고친다. 라우터가 바뀐 조건으로 loader를 다시 부른다
+  const [, setSearch] = useQueryStates(productsSearchParams, { history: "push" });
   useTrack(
     applied.keyword
       ? { name: "search", query: applied.keyword, resultCount: page.totalElements }
@@ -60,14 +51,12 @@ function Products() {
       {/* 하이드레이션 전에는 GET 폼으로 그대로 제출되고, 뒤에는 화면을 새로 그리지 않고 이동한다 */}
       <form
         action="/products"
-        className="flex gap-2"
+        className="flex flex-wrap gap-2"
         onSubmit={(event) => {
           event.preventDefault();
           const keyword = String(new FormData(event.currentTarget).get("keyword") ?? "").trim();
-          void navigate({
-            to: "/products",
-            search: { keyword: keyword || undefined, categoryId: applied.categoryId },
-          });
+          // 새 검색은 1페이지부터 — 카테고리·정렬은 그대로 둔다
+          void setSearch({ keyword: keyword || null, page: null });
         }}
       >
         <input
@@ -76,7 +65,7 @@ function Products() {
           aria-label="상품 검색"
           defaultValue={applied.keyword ?? ""}
           placeholder="상품 검색"
-          className="h-11 flex-1 rounded-md border border-line px-3"
+          className="h-11 min-w-0 flex-1 rounded-md border border-line px-3"
         />
         {applied.categoryId ? (
           <input type="hidden" name="categoryId" value={applied.categoryId} />
@@ -84,6 +73,22 @@ function Products() {
         <button type="submit" className="h-11 rounded-md bg-ink px-5 font-semibold text-white">
           검색
         </button>
+        <select
+          name="sort"
+          aria-label="정렬"
+          value={applied.sort ?? "recommend"}
+          onChange={(event) => {
+            const sort = productSortSchema.parse(event.target.value);
+            void setSearch({ sort, page: null });
+          }}
+          className="h-11 rounded-md border border-line px-3 text-sm"
+        >
+          {productSortSchema.options.map((sort) => (
+            <option key={sort} value={sort}>
+              {SORT_LABELS[sort]}
+            </option>
+          ))}
+        </select>
       </form>
 
       <div className="flex flex-wrap gap-2">
@@ -117,27 +122,21 @@ function Products() {
         </div>
       )}
 
-      <Pagination page={page.page} totalPages={page.totalPages} search={applied} />
+      <Pagination page={page.page} totalPages={page.totalPages} />
     </div>
   );
 }
 
-function Pagination({
-  page,
-  totalPages,
-  search,
-}: {
-  page: number;
-  totalPages: number;
-  search: ProductsSearch;
-}) {
+/** 페이지 이동은 링크다 — 자바스크립트 없이도 넘어가고, 다른 조건은 그대로 둔다 */
+function Pagination({ page, totalPages }: { page: number; totalPages: number }) {
   if (totalPages <= 1) return null;
+  const pageOf = (next: number) => (next > 1 ? next : undefined);
   return (
     <nav className="flex items-center justify-center gap-3 text-sm">
       {page > 1 ? (
         <Link
           to="/products"
-          search={{ ...search, page: page - 1 }}
+          search={(prev) => ({ ...prev, page: pageOf(page - 1) })}
           className="rounded-md border border-line px-3 py-1.5"
         >
           이전
@@ -149,7 +148,7 @@ function Pagination({
       {page < totalPages ? (
         <Link
           to="/products"
-          search={{ ...search, page: page + 1 }}
+          search={(prev) => ({ ...prev, page: pageOf(page + 1) })}
           className="rounded-md border border-line px-3 py-1.5"
         >
           다음

package/template/src/routes/signup.tsx

@@ -1,11 +1,16 @@
+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";
 
@@ -82,64 +87,79 @@ function signupErrorMessage(error: unknown): string {
 export const Route = createFileRoute("/signup")({
   validateSearch: signupSearch,
   loader: () => getSignupAvailable(),
-  head: () => ({ meta: [{ title: "회원가입" }] }),
+  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 [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"
@@ -148,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"
         >
           가입하기
@@ -182,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>
-  );
-}