@sayren/mcp 0.1.8 → 0.1.9

package/template/src/routes/login.tsx

@@ -0,0 +1,198 @@
+import { ApiError, type SocialProvider } from "@sayren/storefront-sdk";
+import { createFileRoute } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { getRequestUrl } from "@tanstack/react-start/server";
+import { 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";
+import { SOCIAL_BUTTONS } from "../lib/social-buttons";
+import { writeSocialLogin } from "../lib/social-login.server";
+
+const loginSearch = z.object({
+  redirectTo: z.string().optional().catch(undefined),
+  error: z.string().optional().catch(undefined),
+});
+
+/** 켜진 로그인 방법 — 셀러가 콘솔 설정 › 로그인에서 켠 것만 온다 */
+const getLoginMethods = createServerFn({ method: "GET" }).handler(async () => {
+  const store = await apiFor().store.get();
+  return store.loginMethods;
+});
+
+/**
+ * 소셜 로그인 시작 — state·PKCE verifier를 쿠키에 두고 공급자 로그인 화면 주소를 돌려준다. 돌아오는 곳은
+ * `/auth/callback`이고, 이 앱의 주소가 콘솔의 스토어프런트 도메인에 등록돼 있어야 한다.
+ */
+const startSocial = createServerFn({ method: "POST" })
+  .validator(z.object({ provider: z.enum(["kakao", "naver", "google"]), redirectTo: z.unknown() }))
+  .handler(async ({ data }) => {
+    const origin = new URL(getRequestUrl()).origin;
+    try {
+      const started = await authFor().idp(data.provider, {
+        redirectUri: `${origin}/auth/callback`,
+      });
+      writeSocialLogin({
+        state: started.state,
+        codeVerifier: started.codeVerifier,
+        redirectTo: safeRedirect(data.redirectTo),
+      });
+      return { url: started.url, error: null };
+    } catch (error) {
+      return { url: null, error: loginErrorMessage(error) };
+    }
+  });
+
+/**
+ * 로그인 — 화면은 이 앱이 그리고, 확인은 sayren이 한다. 비회원으로 담아 둔 장바구니 토큰을 함께 보내면
+ * 회원 장바구니로 합쳐지고 그 토큰은 닫힌다. 그래서 장바구니 쿠키도 지운다.
+ */
+const passwordLogin = createServerFn({ method: "POST" })
+  .validator(z.object({ email: z.string(), password: z.string(), redirectTo: z.unknown() }))
+  .handler(async ({ data }) => {
+    const cartToken = readCartToken();
+    try {
+      const tokens = await authFor().session({
+        email: data.email,
+        password: data.password,
+        cartToken: cartToken ?? undefined,
+      });
+      signIn(tokens);
+      if (cartToken) clearCartToken();
+      return { redirectTo: safeRedirect(data.redirectTo), error: null };
+    } catch (error) {
+      return { redirectTo: null, error: loginErrorMessage(error) };
+    }
+  });
+
+function loginErrorMessage(error: unknown): string {
+  if (error instanceof ApiError) {
+    if (error.code === "INVALID_CREDENTIALS") return "이메일이나 비밀번호가 맞지 않아요";
+    if (error.code === "PASSWORD_LOGIN_DISABLED") return "이 스토어는 소셜 로그인만 받아요";
+    if (error.code === "ACCOUNT_LOCKED")
+      return "로그인을 여러 번 실패해 잠시 잠겼어요. 10분 뒤에 다시 시도해 주세요";
+    if (error.status === 400) return "이메일과 비밀번호를 확인해 주세요";
+  }
+  return "로그인하지 못했어요. 잠시 후 다시 시도해 주세요";
+}
+
+const CALLBACK_ERRORS: Record<string, string> = {
+  access_denied: "로그인을 취소했어요",
+  state_mismatch: "로그인 요청이 만료됐어요. 다시 시도해 주세요",
+};
+
+export const Route = createFileRoute("/login")({
+  validateSearch: loginSearch,
+  loader: () => getLoginMethods(),
+  head: () => ({ meta: [{ title: "로그인" }] }),
+  component: Login,
+});
+
+function Login() {
+  const loginMethods = Route.useLoaderData();
+  const { redirectTo, error: callbackError } = Route.useSearch();
+  const [actionError, setActionError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+  const social = loginMethods.filter((method): method is SocialProvider => method !== "password");
+  const password = loginMethods.includes("password");
+  const error =
+    actionError ??
+    (callbackError
+      ? (CALLBACK_ERRORS[callbackError] ?? "로그인하지 못했어요. 다시 시도해 주세요")
+      : null);
+
+  const submitSocial = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const submitter = (event.nativeEvent as SubmitEvent).submitter as HTMLButtonElement | null;
+    const provider = submitter?.value as SocialProvider | undefined;
+    if (!provider) return;
+    setPending(true);
+    void startSocial({ data: { provider, redirectTo } }).then((result) => {
+      // 공급자 로그인 화면은 다른 사이트라 문서째 이동한다
+      if (result.url) window.location.assign(result.url);
+      else {
+        setActionError(result.error);
+        setPending(false);
+      }
+    });
+  };
+
+  const submitPassword = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const form = new FormData(event.currentTarget);
+    setPending(true);
+    void passwordLogin({
+      data: {
+        email: String(form.get("email") ?? ""),
+        password: String(form.get("password") ?? ""),
+        redirectTo,
+      },
+    }).then((result) => {
+      // 로그인 상태가 모든 화면에 새로 반영되도록 문서째 이동한다
+      if (result.redirectTo) window.location.assign(result.redirectTo);
+      else {
+        setActionError(result.error);
+        setPending(false);
+      }
+    });
+  };
+
+  return (
+    <div className="mx-auto max-w-sm space-y-5 py-10">
+      <h1 className="font-bold text-2xl">로그인</h1>
+      {social.length ? (
+        <form onSubmit={submitSocial} className="space-y-2">
+          {social.map((provider) => (
+            <SubmitButton
+              key={provider}
+              name="social"
+              value={provider}
+              disabled={pending}
+              className={`h-12 w-full rounded-md font-semibold ${SOCIAL_BUTTONS[provider].className}`}
+            >
+              {SOCIAL_BUTTONS[provider].label}
+            </SubmitButton>
+          ))}
+        </form>
+      ) : null}
+      {social.length && password ? (
+        <div className="flex items-center gap-3 text-muted text-xs">
+          <span className="h-px flex-1 bg-line" />
+          또는 이메일로
+          <span className="h-px flex-1 bg-line" />
+        </div>
+      ) : null}
+      {password ? (
+        <form onSubmit={submitPassword} className="space-y-3">
+          <input
+            type="email"
+            name="email"
+            placeholder="이메일"
+            required
+            className="h-11 w-full rounded-md border border-line px-3"
+          />
+          <input
+            type="password"
+            name="password"
+            placeholder="비밀번호"
+            required
+            className="h-11 w-full rounded-md border border-line px-3"
+          />
+          <SubmitButton
+            disabled={pending}
+            className="h-12 w-full rounded-md bg-ink font-semibold text-white disabled:opacity-50"
+          >
+            로그인
+          </SubmitButton>
+        </form>
+      ) : null}
+      {error ? <p className="text-point text-sm">{error}</p> : null}
+      {social.length ? (
+        <p className="text-center text-muted text-xs">처음 소셜 로그인하면 가입이 함께 돼요</p>
+      ) : null}
+    </div>
+  );
+}

package/template/{app/routes/order-detail.tsx → src/routes/orders.$orderId.tsx}

@@ -1,22 +1,34 @@
-import { Link, redirect } from "react-router";
+import { ApiError } from "@sayren/storefront-sdk";
+import { createFileRoute, Link, notFound, redirect } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { z } from "zod";
 import { apiFor } from "../lib/api.server";
 import { formatDateTime, formatPrice } from "../lib/format";
 import { readToken } from "../lib/session.server";
-import type { Route } from "./+types/order-detail";
 
-export function meta({ params }: Route.MetaArgs) {
-  return [{ title: `주문 ${params.orderId}` }];
-}
+const getOrder = createServerFn({ method: "GET" })
+  .validator(z.object({ orderId: z.string() }))
+  .handler(async ({ data }) => {
+    const accessToken = readToken();
+    if (!accessToken) {
+      throw redirect({ to: "/login", search: { redirectTo: `/orders/${data.orderId}` } });
+    }
+    try {
+      return await apiFor({ accessToken }).myOrders.get(data.orderId);
+    } catch (error) {
+      if (error instanceof ApiError && error.status === 404) throw notFound();
+      throw error;
+    }
+  });
 
-export async function loader({ request, params, context }: Route.LoaderArgs) {
-  const accessToken = readToken(context);
-  if (!accessToken) throw redirect(`/login?redirectTo=/orders/${params.orderId}`);
-  const api = apiFor(request, { accessToken });
-  return { order: await api.myOrders.get(params.orderId) };
-}
+export const Route = createFileRoute("/orders/$orderId")({
+  loader: ({ params }) => getOrder({ data: { orderId: params.orderId } }),
+  head: ({ params }) => ({ meta: [{ title: `주문 ${params.orderId}` }] }),
+  component: OrderDetail,
+});
 
-export default function OrderDetail({ loaderData }: Route.ComponentProps) {
-  const { order } = loaderData;
+function OrderDetail() {
+  const order = Route.useLoaderData();
 
   return (
     <div className="space-y-6">

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],
+}));