@sayren/mcp 0.1.8 → 0.1.10

package/template/{app/routes/orders.tsx → src/routes/orders.index.tsx}

@@ -1,22 +1,23 @@
-import { Link, redirect } from "react-router";
+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 { readToken } from "../lib/session.server";
-import type { Route } from "./+types/orders";
 
-export function meta() {
-  return [{ title: "주문 내역" }];
-}
+const getOrders = createServerFn({ method: "GET" }).handler(async () => {
+  const accessToken = readToken();
+  if (!accessToken) throw redirect({ to: "/login", search: { redirectTo: "/orders" } });
+  return apiFor({ accessToken }).myOrders.list({ size: 20 });
+});
 
-export async function loader({ request, context }: Route.LoaderArgs) {
-  const accessToken = readToken(context);
-  if (!accessToken) throw redirect("/login?redirectTo=/orders");
-  const api = apiFor(request, { accessToken });
-  return { orders: await api.myOrders.list({ size: 20 }) };
-}
+export const Route = createFileRoute("/orders/")({
+  loader: () => getOrders(),
+  head: () => ({ meta: [{ title: "주문 내역" }] }),
+  component: Orders,
+});
 
-export default function Orders({ loaderData }: Route.ComponentProps) {
-  const { orders } = loaderData;
+function Orders() {
+  const orders = Route.useLoaderData();
 
   if (!orders.contents.length) {
     return <p className="py-16 text-center text-muted">아직 주문이 없어요</p>;
@@ -29,7 +30,8 @@ export default function Orders({ loaderData }: Route.ComponentProps) {
         {orders.contents.map((order) => (
           <li key={order.orderId}>
             <Link
-              to={`/orders/${order.orderId}`}
+              to="/orders/$orderId"
+              params={{ orderId: order.orderId }}
               className="flex items-center justify-between gap-4 rounded-lg border border-line p-4 hover:border-ink"
             >
               <span className="flex flex-col gap-1">

package/template/{app/routes/product-detail.tsx → src/routes/products.$productId.tsx}

@@ -1,55 +1,66 @@
+import { ApiError } from "@sayren/storefront-sdk";
+import { createFileRoute, Link, notFound, useNavigate } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
 import { useState } from "react";
-import { Form, redirect, useNavigation } from "react-router";
+import { z } from "zod";
 import { ProductDescription } from "../components/product-description";
+import { SubmitButton } from "../components/submit-button";
 import { useTrack } from "../lib/analytics";
 import { apiFor } from "../lib/api.server";
-import { cartCookie, readCartToken } from "../lib/cart-session.server";
+import { readCartToken, writeCartToken } from "../lib/cart-session.server";
 import { formatPrice } from "../lib/format";
 import { readToken } from "../lib/session.server";
-import type { Route } from "./+types/product-detail";
 
-export function meta({ loaderData }: Route.MetaArgs) {
-  return [{ title: loaderData ? loaderData.product.name : "상품" }];
-}
-
-export async function loader({ request, params }: Route.LoaderArgs) {
-  const api = apiFor(request);
-  const product = await api.catalog.getProduct(params.productId);
-  return { product };
-}
+const getProduct = createServerFn({ method: "GET" })
+  .validator(z.object({ productId: z.string() }))
+  .handler(async ({ data }) => {
+    try {
+      return await apiFor().catalog.getProduct(data.productId);
+    } catch (error) {
+      if (error instanceof ApiError && error.status === 404) throw notFound();
+      throw error;
+    }
+  });
 
 /**
- * 장바구니 담기·바로구매를 서버에서 처리한다. 비회원 장바구니 토큰은 서버가 새로 발급할 수 있어
+ * 장바구니 담기 — 서버에서 처리한다. 비회원 장바구니 토큰은 서버가 새로 발급할 수 있어
  * 응답 쿠키에 다시 심는다.
  */
-export async function action({ request, params, context }: Route.ActionArgs) {
-  const form = await request.formData();
-  const optionId = String(form.get("optionId") ?? "") || undefined;
-  const quantity = Number(form.get("quantity") ?? 1);
-
-  const accessToken = readToken(context);
-  let cartToken = await readCartToken(request);
-  let issued: string | null = null;
-  const api = apiFor(request, {
-    accessToken,
-    cartToken,
-    onCartToken: (token) => {
-      issued = token;
-    },
+const addToCart = createServerFn({ method: "POST" })
+  .validator(
+    z.object({
+      productId: z.string(),
+      optionId: z.string().optional(),
+      quantity: z.number().int().min(1).max(999),
+    }),
+  )
+  .handler(async ({ data }) => {
+    const cartToken = readCartToken();
+    let issued: string | null = null;
+    const api = apiFor({
+      accessToken: readToken(),
+      cartToken,
+      onCartToken: (token) => {
+        issued = token;
+      },
+    });
+    await api.cart.addItem(data);
+    const token = issued ?? cartToken;
+    if (token) writeCartToken(token);
   });
 
-  await api.cart.addItem({ productId: params.productId, optionId, quantity });
-  cartToken = issued ?? cartToken;
-  return redirect("/cart", {
-    headers: cartToken ? { "Set-Cookie": await cartCookie.serialize(cartToken) } : undefined,
-  });
-}
+export const Route = createFileRoute("/products/$productId")({
+  loader: ({ params }) => getProduct({ data: { productId: params.productId } }),
+  head: ({ loaderData }) => ({ meta: [{ title: loaderData ? loaderData.name : "상품" }] }),
+  component: ProductDetail,
+});
 
-export default function ProductDetail({ loaderData }: Route.ComponentProps) {
-  const { product } = loaderData;
+function ProductDetail() {
+  const product = Route.useLoaderData();
   useTrack({ name: "product_view", productId: product.productId });
-  const navigation = useNavigation();
-  const submitting = navigation.state !== "idle";
+  const navigate = useNavigate();
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
   const hasOptions = product.optionGroups.length > 0;
   const [quantity, setQuantity] = useState(1);
   const [variantId, setVariantId] = useState(
@@ -58,6 +69,7 @@ export default function ProductDetail({ loaderData }: Route.ComponentProps) {
   const variant = product.variants.find((v) => v.variantId === variantId);
   const price =
     (product.discountedPrice ?? product.salePrice) + (variant ? variant.additionalPrice : 0);
+  const optionId = hasOptions ? variantId : undefined;
 
   return (
     <div className="grid gap-8 md:grid-cols-2">
@@ -86,7 +98,18 @@ export default function ProductDetail({ loaderData }: Route.ComponentProps) {
           </p>
         </div>
 
-        <Form method="post" className="space-y-4">
+        <form
+          className="space-y-4"
+          onSubmit={(event) => {
+            event.preventDefault();
+            setSubmitting(true);
+            setError(null);
+            addToCart({ data: { productId: product.productId, optionId, quantity } })
+              .then(() => navigate({ to: "/cart" }))
+              .catch(() => setError("장바구니에 담지 못했어요. 다시 시도해주세요"))
+              .finally(() => setSubmitting(false));
+          }}
+        >
           {hasOptions ? (
             <label className="block space-y-1">
               <span className="text-sm">옵션</span>
@@ -119,30 +142,29 @@ export default function ProductDetail({ loaderData }: Route.ComponentProps) {
             />
           </label>
 
-          <button
-            type="submit"
-            name="intent"
-            value="cart"
+          <SubmitButton
             disabled={submitting || product.soldOut}
             className="h-12 w-full rounded-md border border-ink font-semibold disabled:opacity-50"
           >
             장바구니
-          </button>
-        </Form>
+          </SubmitButton>
+        </form>
 
-        {/* 바로구매는 주문서를 GET으로 연다 — 장바구니를 거치지 않는다 */}
-        <Form method="get" action="/checkout" className="space-y-0">
-          <input type="hidden" name="productId" value={product.productId} />
-          {hasOptions ? <input type="hidden" name="optionId" value={variantId} /> : null}
-          <input type="hidden" name="quantity" value={quantity} />
-          <button
-            type="submit"
-            disabled={submitting || product.soldOut}
-            className="h-12 w-full rounded-md bg-ink font-semibold text-white disabled:opacity-50"
+        {/* 바로구매는 주문서로 바로 간다 — 장바구니를 거치지 않는다 */}
+        {product.soldOut ? (
+          <span className="flex h-12 w-full items-center justify-center rounded-md bg-ink font-semibold text-white opacity-50">
+            바로구매
+          </span>
+        ) : (
+          <Link
+            to="/checkout"
+            search={{ productId: product.productId, optionId, quantity }}
+            className="flex h-12 w-full items-center justify-center rounded-md bg-ink font-semibold text-white"
           >
             바로구매
-          </button>
-        </Form>
+          </Link>
+        )}
+        {error ? <p className="text-point text-sm">{error}</p> : null}
 
         <section className="space-y-2 border-line border-t pt-5">
           <h2 className="font-semibold">상품 설명</h2>

package/template/{app/routes/products.tsx → src/routes/products.index.tsx}

@@ -1,34 +1,42 @@
-import { Form, Link, useSearchParams } from "react-router";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { z } from "zod";
 import { ProductCard } from "../components/product-card";
 import { useTrack } from "../lib/analytics";
 import { apiFor } from "../lib/api.server";
-import type { Route } from "./+types/products";
 
-export function meta() {
-  return [{ title: "전체 상품" }];
-}
+/** 목록·검색 조건 — 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>;
 
-/** 목록·검색 — 필터 상태는 URL에 둔다. 공유·뒤로가기가 그대로 동작한다 */
-export async function loader({ request }: Route.LoaderArgs) {
-  const url = new URL(request.url);
-  const params = {
-    keyword: url.searchParams.get("keyword") ?? undefined,
-    categoryId: url.searchParams.get("categoryId") ?? undefined,
-    sort: (url.searchParams.get("sort") ?? undefined) as "recommend" | "latest" | undefined,
-    page: Number(url.searchParams.get("page") ?? 1),
-    size: 24,
-  };
-  const api = apiFor(request);
-  const [categories, page] = await Promise.all([
-    api.catalog.listCategories(),
-    api.catalog.searchProducts(params),
-  ]);
-  return { categories, page, applied: params };
-}
+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 };
+  });
 
-export default function Products({ loaderData }: Route.ComponentProps) {
-  const { categories, page, applied } = loaderData;
-  const [searchParams] = useSearchParams();
+export const Route = createFileRoute("/products/")({
+  validateSearch: productsSearch,
+  loaderDeps: ({ search }) => search,
+  loader: ({ deps }) => searchProducts({ data: deps }),
+  head: () => ({ meta: [{ title: "전체 상품" }] }),
+  component: Products,
+});
+
+function Products() {
+  const { categories, page } = Route.useLoaderData();
+  const applied = Route.useSearch();
+  const navigate = useNavigate();
   useTrack(
     applied.keyword
       ? { name: "search", query: applied.keyword, resultCount: page.totalElements }
@@ -46,7 +54,19 @@ export default function Products({ loaderData }: Route.ComponentProps) {
 
   return (
     <div className="space-y-6">
-      <Form method="get" className="flex gap-2">
+      {/* 하이드레이션 전에는 GET 폼으로 그대로 제출되고, 뒤에는 화면을 새로 그리지 않고 이동한다 */}
+      <form
+        action="/products"
+        className="flex 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 },
+          });
+        }}
+      >
         <input
           type="search"
           name="keyword"
@@ -60,7 +80,7 @@ export default function Products({ loaderData }: Route.ComponentProps) {
         <button type="submit" className="h-11 rounded-md bg-ink px-5 font-semibold text-white">
           검색
         </button>
-      </Form>
+      </form>
 
       <div className="flex flex-wrap gap-2">
         <Link
@@ -72,7 +92,8 @@ export default function Products({ loaderData }: Route.ComponentProps) {
         {categories.map((category) => (
           <Link
             key={category.categoryId}
-            to={`/products?categoryId=${category.categoryId}`}
+            to="/products"
+            search={{ categoryId: category.categoryId }}
             className={`rounded-full px-3 py-1.5 text-sm ${
               applied.categoryId === category.categoryId ? "bg-ink text-white" : "bg-chip"
             }`}
@@ -92,7 +113,7 @@ export default function Products({ loaderData }: Route.ComponentProps) {
         </div>
       )}
 
-      <Pagination page={page.page} totalPages={page.totalPages} searchParams={searchParams} />
+      <Pagination page={page.page} totalPages={page.totalPages} search={applied} />
     </div>
   );
 }
@@ -100,22 +121,21 @@ export default function Products({ loaderData }: Route.ComponentProps) {
 function Pagination({
   page,
   totalPages,
-  searchParams,
+  search,
 }: {
   page: number;
   totalPages: number;
-  searchParams: URLSearchParams;
+  search: ProductsSearch;
 }) {
   if (totalPages <= 1) return null;
-  const linkTo = (next: number) => {
-    const params = new URLSearchParams(searchParams);
-    params.set("page", String(next));
-    return `/products?${params.toString()}`;
-  };
   return (
     <nav className="flex items-center justify-center gap-3 text-sm">
       {page > 1 ? (
-        <Link to={linkTo(page - 1)} className="rounded-md border border-line px-3 py-1.5">
+        <Link
+          to="/products"
+          search={{ ...search, page: page - 1 }}
+          className="rounded-md border border-line px-3 py-1.5"
+        >
           이전
         </Link>
       ) : null}
@@ -123,7 +143,11 @@ function Pagination({
         {page} / {totalPages}
       </span>
       {page < totalPages ? (
-        <Link to={linkTo(page + 1)} className="rounded-md border border-line px-3 py-1.5">
+        <Link
+          to="/products"
+          search={{ ...search, page: page + 1 }}
+          className="rounded-md border border-line px-3 py-1.5"
+        >
           다음
         </Link>
       ) : null}

package/template/src/start.ts

@@ -0,0 +1,18 @@
+import { createCsrfMiddleware, createMiddleware, createStart } from "@tanstack/react-start";
+import { refreshBuyerSession } from "./lib/session.server";
+
+/**
+ * 서버 함수 호출은 같은 사이트에서 온 것만 받는다. 구매자 세션이 쿠키라 다른 사이트가 결제·장바구니
+ * 서버 함수를 대신 부르지 못하게 한다.
+ */
+const csrf = createCsrfMiddleware({ filter: (ctx) => ctx.handlerType === "serverFn" });
+
+/** 구매자 세션 — 모든 요청에서 액세스 토큰을 정하고 만료가 가까우면 갱신한다(`readToken`으로 읽는다) */
+const buyerSession = createMiddleware().server(async ({ next }) => {
+  const accessToken = await refreshBuyerSession();
+  return next({ context: { accessToken } });
+});
+
+export const startInstance = createStart(() => ({
+  requestMiddleware: [csrf, buyerSession],
+}));

package/template/tsconfig.json

@@ -8,9 +8,8 @@
     "strict": true,
     "noEmit": true,
     "skipLibCheck": true,
-    "types": ["node", "vite/client"],
-    "rootDirs": [".", "./.react-router/types"],
-    "paths": { "~/*": ["./app/*"] }
+    "types": ["node", "vite/client"]
   },
-  "include": ["**/*.ts", "**/*.tsx", ".react-router/types/**/*"]
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "dist", ".output", ".tanstack"]
 }

package/template/vite.config.ts

@@ -1,9 +1,10 @@
-import { reactRouter } from "@react-router/dev/vite";
 import tailwindcss from "@tailwindcss/vite";
+import { tanstackStart } from "@tanstack/react-start/plugin/vite";
+import viteReact from "@vitejs/plugin-react";
 import { defineConfig, loadEnv } from "vite";
 
 export default defineConfig(({ mode }) => {
   // .env의 SAYREN_*를 서버 코드가 읽는 process.env에 싣는다. 셸에서 준 값이 우선한다
   Object.assign(process.env, loadEnv(mode, process.cwd(), "SAYREN_"), { ...process.env });
-  return { plugins: [tailwindcss(), reactRouter()] };
+  return { plugins: [tailwindcss(), tanstackStart(), viteReact()] };
 });

package/template/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
-  test: { environment: "node", include: ["app/**/*.test.ts"] },
+  test: { environment: "node", include: ["src/**/*.test.ts"] },
 });

package/template/app/lib/cart-session.server.ts

@@ -1,18 +0,0 @@
-import { createCookie } from "react-router";
-
-/**
- * 비회원 장바구니 토큰 — 서버가 `X-Cart-Token` 헤더로 발급한다. 회원은 액세스 토큰으로
- * 장바구니를 찾지만 비회원은 이 토큰이 유일한 열쇠라, 잃어버리면 담은 상품이 사라진다.
- */
-export const cartCookie = createCookie("sayren_cart", {
-  httpOnly: true,
-  sameSite: "lax",
-  path: "/",
-  secure: process.env.NODE_ENV === "production",
-  maxAge: 60 * 60 * 24 * 30,
-});
-
-export async function readCartToken(request: Request): Promise<string | null> {
-  const value = await cartCookie.parse(request.headers.get("cookie"));
-  return typeof value === "string" && value ? value : null;
-}

package/template/app/lib/format.ts

@@ -1,10 +0,0 @@
-const KRW = new Intl.NumberFormat("ko-KR");
-
-export function formatPrice(amount: number): string {
-  return `${KRW.format(amount)}원`;
-}
-
-export function formatDateTime(value: string | null | undefined): string {
-  if (!value) return "-";
-  return new Date(value).toLocaleString("ko-KR", { dateStyle: "medium", timeStyle: "short" });
-}

package/template/app/lib/session.server.ts

@@ -1,99 +0,0 @@
-import { ApiError, type TokenPair } from "@sayren/storefront-sdk/auth";
-import {
-  createContext,
-  createCookie,
-  type MiddlewareFunction,
-  type RouterContextProvider,
-} from "react-router";
-import { authFor } from "./api.server";
-
-/**
- * 구매자 세션 — 로그인 토큰 쌍을 HttpOnly 쿠키 하나에 둔다. 브라우저 JS는 토큰을 읽지 못하고,
- * 서버(loader·action)만 쓴다.
- *
- * 액세스 토큰은 30분이라 `buyerSession` 미들웨어가 요청마다 만료를 보고, 곧 끝나면 리프레시 토큰으로
- * 새 쌍을 받아 쿠키를 갈아 끼운다. 리프레시 토큰이 거부되면(401: 14일 만료·폐기) 쿠키를 지워 로그아웃 상태가 된다.
- * 네트워크 오류·5xx 같은 일시 장애에는 쿠키를 지우지 않는다 — 다음 요청에서 다시 갱신한다.
- */
-export const sessionCookie = createCookie("sayren_member", {
-  httpOnly: true,
-  sameSite: "lax",
-  path: "/",
-  secure: process.env.NODE_ENV === "production",
-  maxAge: 60 * 60 * 24 * 14,
-});
-
-interface StoredSession {
-  accessToken: string;
-  refreshToken: string;
-  /** 액세스 토큰 만료 시각(epoch ms) */
-  expiresAt: number;
-}
-
-/** 만료 이만큼 전에 미리 갱신한다 — 요청 도중 만료로 401이 나지 않게 */
-const REFRESH_LEEWAY_MS = 60_000;
-
-const accessTokenContext = createContext<string | null>(null);
-
-function toStored(tokens: TokenPair): StoredSession {
-  return {
-    accessToken: tokens.accessToken,
-    refreshToken: tokens.refreshToken,
-    expiresAt: Date.now() + tokens.expiresIn * 1000,
-  };
-}
-
-async function parseSession(request: Request): Promise<StoredSession | null> {
-  const value: unknown = await sessionCookie.parse(request.headers.get("cookie"));
-  if (!value || typeof value !== "object") return null;
-  const session = value as Partial<StoredSession>;
-  if (typeof session.accessToken !== "string" || typeof session.refreshToken !== "string")
-    return null;
-  return {
-    accessToken: session.accessToken,
-    refreshToken: session.refreshToken,
-    expiresAt: Number(session.expiresAt),
-  };
-}
-
-/** 루트 미들웨어 — 이 요청의 액세스 토큰을 정하고, 갱신했으면 응답에 새 쿠키를 싣는다 */
-export const buyerSession: MiddlewareFunction<Response> = async ({ request, context }, next) => {
-  const stored = await parseSession(request);
-  let setCookie: string | null = null;
-  let accessToken = stored?.accessToken ?? null;
-
-  // 만료 시각을 모르면(형식이 다른 쿠키) 만료로 본다
-  if (stored && !(stored.expiresAt - REFRESH_LEEWAY_MS > Date.now())) {
-    try {
-      const refreshed = toStored(await authFor(request).refresh(stored.refreshToken));
-      accessToken = refreshed.accessToken;
-      setCookie = await sessionCookie.serialize(refreshed);
-    } catch (error) {
-      // 일시 장애면 이번 요청은 기존 토큰으로 진행한다(만료 전 여유 1분 안이면 아직 유효하다)
-      if (error instanceof ApiError && error.status === 401) {
-        accessToken = null;
-        setCookie = await signOutCookie();
-      }
-    }
-  }
-
-  context.set(accessTokenContext, accessToken);
-  const response = await next();
-  if (setCookie) response.headers.append("Set-Cookie", setCookie);
-  return response;
-};
-
-/** 이 요청의 구매자 액세스 토큰 — 로그인하지 않았으면 null */
-export function readToken(context: Readonly<RouterContextProvider>): string | null {
-  return context.get(accessTokenContext);
-}
-
-/** 로그인·가입 직후 응답에 실을 쿠키 */
-export function signInCookie(tokens: TokenPair): Promise<string> {
-  return sessionCookie.serialize(toStored(tokens));
-}
-
-/** 로그아웃 — 쿠키를 지운다 */
-export function signOutCookie(): Promise<string> {
-  return sessionCookie.serialize("", { maxAge: 0 });
-}

package/template/app/lib/social-login.server.ts

@@ -1,31 +0,0 @@
-import { createCookie } from "react-router";
-
-/**
- * 소셜 로그인 왕복 상태 — 공급자로 보내기 전에 만든 state·PKCE verifier·돌아갈 곳을 HttpOnly 쿠키에 잠깐 둔다.
- * 돌아오면 state를 비교하고 verifier로 1회용 code를 토큰으로 바꾼 뒤 지운다. 10분이 지나면 사라진다.
- */
-export const socialLoginCookie = createCookie("sayren_social", {
-  httpOnly: true,
-  sameSite: "lax",
-  path: "/",
-  secure: process.env.NODE_ENV === "production",
-  maxAge: 60 * 10,
-});
-
-export interface SocialLoginState {
-  state: string;
-  codeVerifier: string;
-  redirectTo: string;
-}
-
-export async function readSocialLogin(request: Request): Promise<SocialLoginState | null> {
-  const value: unknown = await socialLoginCookie.parse(request.headers.get("cookie"));
-  if (!value || typeof value !== "object") return null;
-  const stored = value as Partial<SocialLoginState>;
-  if (typeof stored.state !== "string" || typeof stored.codeVerifier !== "string") return null;
-  return {
-    state: stored.state,
-    codeVerifier: stored.codeVerifier,
-    redirectTo: typeof stored.redirectTo === "string" ? stored.redirectTo : "/",
-  };
-}