@sayren/mcp 0.1.7 → 0.1.9

package/template/{app → src}/routes/cart.tsx

@@ -1,17 +1,16 @@
-import { Form, Link, redirect } from "react-router";
+import { createFileRoute, Link, useRouter } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { useState } from "react";
+import { z } from "zod";
+import { SubmitButton } from "../components/submit-button";
 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/cart";
 
-export function meta() {
-  return [{ title: "장바구니" }];
-}
-
-export async function loader({ request, context }: Route.LoaderArgs) {
-  const accessToken = readToken(context);
-  const cartToken = await readCartToken(request);
+const getCart = createServerFn({ method: "GET" }).handler(async () => {
+  const accessToken = readToken();
+  const cartToken = readCartToken();
   // 비회원이 아직 장바구니를 만든 적이 없으면 서버에 물어볼 것이 없다
   if (!accessToken && !cartToken) {
     return {
@@ -19,42 +18,56 @@ export async function loader({ request, context }: Route.LoaderArgs) {
       loginRequired: false,
     };
   }
-  const api = apiFor(request, { accessToken, cartToken });
+  const api = apiFor({ accessToken, cartToken });
   // 회원만 주문받는 스토어면 비회원에게 주문 버튼 대신 로그인 안내를 보인다(담기는 그대로 된다)
   const [cart, store] = await Promise.all([api.cart.get(), accessToken ? null : api.store.get()]);
   return { cart, loginRequired: store ? !store.guestCheckout : false };
-}
+});
 
-export async function action({ request, context }: Route.ActionArgs) {
-  const form = await request.formData();
-  const intent = String(form.get("intent") ?? "");
-  const accessToken = readToken(context);
-  const cartToken = await readCartToken(request);
-  let issued: string | null = null;
-  const api = apiFor(request, {
-    accessToken,
-    cartToken,
-    onCartToken: (token) => {
-      issued = token;
-    },
+const changeCart = createServerFn({ method: "POST" })
+  .validator(
+    z.discriminatedUnion("intent", [
+      z.object({ intent: z.literal("remove"), cartItemId: z.string() }),
+      z.object({
+        intent: z.literal("update"),
+        cartItemId: z.string(),
+        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;
+      },
+    });
+    if (data.intent === "remove") await api.cart.removeItem(data.cartItemId);
+    else await api.cart.updateItem(data.cartItemId, { quantity: data.quantity });
+    const token = issued ?? cartToken;
+    if (token) writeCartToken(token);
   });
 
-  if (intent === "remove") {
-    await api.cart.removeItem(String(form.get("cartItemId")));
-  } else if (intent === "update") {
-    await api.cart.updateItem(String(form.get("cartItemId")), {
-      quantity: Number(form.get("quantity")),
-    });
-  }
+export const Route = createFileRoute("/cart")({
+  loader: () => getCart(),
+  head: () => ({ meta: [{ title: "장바구니" }] }),
+  component: CartPage,
+});
 
-  const token = issued ?? cartToken;
-  return redirect("/cart", {
-    headers: token ? { "Set-Cookie": await cartCookie.serialize(token) } : undefined,
-  });
-}
+function CartPage() {
+  const { cart, loginRequired } = Route.useLoaderData();
+  const router = useRouter();
+  const [pending, setPending] = useState(false);
 
-export default function CartPage({ loaderData }: Route.ComponentProps) {
-  const { cart, loginRequired } = loaderData;
+  const change = (data: Parameters<typeof changeCart>[0]["data"]) => {
+    setPending(true);
+    changeCart({ data })
+      .then(() => router.invalidate())
+      .finally(() => setPending(false));
+  };
 
   if (!cart.items.length) {
     return (
@@ -82,7 +95,11 @@ export default function CartPage({ loaderData }: Route.ComponentProps) {
               className="size-20 rounded-md bg-chip object-cover"
             />
             <div className="flex flex-1 flex-col gap-1">
-              <Link to={`/products/${item.productId}`} className="text-sm">
+              <Link
+                to="/products/$productId"
+                params={{ productId: item.productId }}
+                className="text-sm"
+              >
                 {item.productName}
               </Link>
               {item.optionName ? (
@@ -94,8 +111,18 @@ export default function CartPage({ loaderData }: Route.ComponentProps) {
                 </span>
               ) : null}
               <div className="flex items-center gap-3 pt-1">
-                <Form method="post" className="flex items-center gap-2">
-                  <input type="hidden" name="cartItemId" value={item.cartItemId} />
+                <form
+                  className="flex items-center gap-2"
+                  onSubmit={(event) => {
+                    event.preventDefault();
+                    const form = new FormData(event.currentTarget);
+                    change({
+                      intent: "update",
+                      cartItemId: item.cartItemId,
+                      quantity: Number(form.get("quantity")),
+                    });
+                  }}
+                >
                   <input
                     type="number"
                     name="quantity"
@@ -104,26 +131,20 @@ export default function CartPage({ loaderData }: Route.ComponentProps) {
                     defaultValue={item.quantity}
                     className="h-9 w-20 rounded-md border border-line px-2 text-sm"
                   />
-                  <button
-                    type="submit"
-                    name="intent"
-                    value="update"
-                    className="text-muted text-xs underline"
-                  >
+                  <SubmitButton disabled={pending} className="text-muted text-xs underline">
                     수량 변경
-                  </button>
-                </Form>
-                <Form method="post">
-                  <input type="hidden" name="cartItemId" value={item.cartItemId} />
-                  <button
-                    type="submit"
-                    name="intent"
-                    value="remove"
-                    className="text-muted text-xs underline"
-                  >
+                  </SubmitButton>
+                </form>
+                <form
+                  onSubmit={(event) => {
+                    event.preventDefault();
+                    change({ intent: "remove", cartItemId: item.cartItemId });
+                  }}
+                >
+                  <SubmitButton disabled={pending} className="text-muted text-xs underline">
                     삭제
-                  </button>
-                </Form>
+                  </SubmitButton>
+                </form>
               </div>
             </div>
             <span className="font-semibold text-sm">{formatPrice(item.totalPrice)}</span>
@@ -153,31 +174,26 @@ export default function CartPage({ loaderData }: Route.ComponentProps) {
               이 스토어는 회원만 주문할 수 있어요. 담은 상품은 로그인하면 그대로 이어져요
             </p>
             <Link
-              to="/login?redirectTo=/cart"
+              to="/login"
+              search={{ redirectTo: "/cart" }}
               className="flex h-12 items-center justify-center rounded-md bg-ink font-semibold text-white"
             >
               로그인하고 주문하기
             </Link>
           </div>
+        ) : purchasable.length ? (
+          /* 주문 조건은 URL에 둔다 — 새로고침·뒤로가기가 그대로 동작한다 */
+          <Link
+            to="/checkout"
+            search={{ cartItemId: purchasable.map((item) => item.cartItemId) }}
+            className="flex h-12 w-full items-center justify-center rounded-md bg-ink font-semibold text-white md:w-64"
+          >
+            주문하기
+          </Link>
         ) : (
-          /* 주문서는 GET으로 연다 — 진입 조건이 URL에 남아 새로고침·뒤로가기가 그대로 동작한다 */
-          <Form method="get" action="/checkout" className="w-full md:w-64">
-            {purchasable.map((item) => (
-              <input
-                key={item.cartItemId}
-                type="hidden"
-                name="cartItemId"
-                value={item.cartItemId}
-              />
-            ))}
-            <button
-              type="submit"
-              disabled={!purchasable.length}
-              className="h-12 w-full rounded-md bg-ink font-semibold text-white disabled:opacity-50"
-            >
-              주문하기
-            </button>
-          </Form>
+          <span className="flex h-12 w-full items-center justify-center rounded-md bg-ink font-semibold text-white opacity-50 md:w-64">
+            주문하기
+          </span>
         )}
       </div>
     </div>

package/template/{app/routes/checkout-complete.tsx → src/routes/checkout.complete.tsx}

@@ -1,28 +1,35 @@
-import { Link } from "react-router";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { z } from "zod";
 import { apiFor } from "../lib/api.server";
 import { formatPrice } from "../lib/format";
 import { readToken } from "../lib/session.server";
-import type { Route } from "./+types/checkout-complete";
 
-export function meta() {
-  return [{ title: "주문 완료" }];
-}
-
-export async function loader({ request, context }: Route.LoaderArgs) {
-  const orderId = new URL(request.url).searchParams.get("orderId");
-  if (!orderId) return { orderId: null, order: null };
+const completeSearch = z.object({ orderId: z.string().optional().catch(undefined) });
 
-  // 비회원은 주문 조회에 비밀번호가 필요하다 — 완료 화면에서는 주문번호만 보여 준다
-  const accessToken = readToken(context);
-  if (!accessToken) return { orderId, order: null };
+const getCompletedOrder = createServerFn({ method: "GET" })
+  .validator(completeSearch)
+  .handler(async ({ data }) => {
+    if (!data.orderId) return null;
+    // 비회원은 주문 조회에 비밀번호가 필요하다 — 완료 화면에서는 주문번호만 보여 준다
+    const accessToken = readToken();
+    if (!accessToken) return null;
+    return apiFor({ accessToken })
+      .myOrders.get(data.orderId)
+      .catch(() => null);
+  });
 
-  const api = apiFor(request, { accessToken });
-  const order = await api.myOrders.get(orderId).catch(() => null);
-  return { orderId, order };
-}
+export const Route = createFileRoute("/checkout/complete")({
+  validateSearch: completeSearch,
+  loaderDeps: ({ search }) => search,
+  loader: ({ deps }) => getCompletedOrder({ data: deps }),
+  head: () => ({ meta: [{ title: "주문 완료" }] }),
+  component: CheckoutComplete,
+});
 
-export default function CheckoutComplete({ loaderData }: Route.ComponentProps) {
-  const { orderId, order } = loaderData;
+function CheckoutComplete() {
+  const order = Route.useLoaderData();
+  const { orderId } = Route.useSearch();
 
   return (
     <div className="space-y-6 py-10 text-center">

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

@@ -1,101 +1,116 @@
 import { ApiError } from "@sayren/storefront-sdk";
-import { useEffect, useRef, useState } from "react";
-import { Form, redirect, useNavigate } from "react-router";
+import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { useRef, useState } from "react";
+import { z } from "zod";
+import { SubmitButton } from "../components/submit-button";
 import { browserApi } from "../lib/api";
 import { apiFor } from "../lib/api.server";
 import { readCartToken } from "../lib/cart-session.server";
-import { checkoutIntentFrom } from "../lib/checkout-intent";
+import { checkoutIntentFrom, checkoutSearch } from "../lib/checkout-intent";
+import type { PublicConfig } from "../lib/config";
 import { API_BASE_URL, resolveStoreCode } from "../lib/config.server";
 import { formatPrice } from "../lib/format";
-import { createPaymentPopup } from "../lib/payment-popup";
+import { createPaymentPopup, type PaymentPopup } from "../lib/payment-popup";
 import { readToken } from "../lib/session.server";
-import type { Route } from "./+types/checkout";
 
-export function meta() {
-  return [{ title: "주문서" }];
-}
+const createCheckout = createServerFn({ method: "POST" })
+  .validator(z.object({ search: checkoutSearch, back: z.string() }))
+  .handler(async ({ data }) => {
+    const intent = checkoutIntentFrom(data.search);
+    if (!intent) throw redirect({ to: "/cart" });
 
-export async function loader({ request, context }: Route.LoaderArgs) {
-  const url = new URL(request.url);
-  const intent = checkoutIntentFrom(url.searchParams);
-  if (!intent) throw redirect("/cart");
+    const accessToken = readToken();
+    const api = apiFor({ accessToken, cartToken: readCartToken() });
+    // 주문서 세션은 진입할 때마다 새로 만든다 — 조회 API가 없고, 가격·재고를 매번 다시 계산한다
+    const [checkout, member] = await Promise.all([
+      api.checkout.create(intent).catch((error: unknown) => {
+        // 회원만 주문받는 스토어 — 로그인 뒤 돌아온다. 장바구니 주문은 로그인하며 장바구니가 합쳐져 항목 id가
+        // 바뀔 수 있으니 장바구니로, 바로구매는 같은 주문서로 돌아온다
+        if (error instanceof ApiError && error.code === "GUEST_CHECKOUT_DISABLED") {
+          throw redirect({
+            to: "/login",
+            search: { redirectTo: intent.cartItemIds ? "/cart" : data.back },
+          });
+        }
+        throw error;
+      }),
+      accessToken ? api.member.me().catch(() => null) : null,
+    ]);
+    const config: PublicConfig = { apiBaseUrl: API_BASE_URL, storeCode: resolveStoreCode() };
+    return { checkout, member, config };
+  });
 
-  const accessToken = readToken(context);
-  const cartToken = await readCartToken(request);
-  const api = apiFor(request, { accessToken, cartToken });
-  // 주문서 세션은 진입할 때마다 새로 만든다 — 조회 API가 없고, 가격·재고를 매번 다시 계산한다
-  const [checkout, member] = await Promise.all([
-    api.checkout.create(intent).catch((error: unknown) => {
-      // 회원만 주문받는 스토어 — 로그인 뒤 돌아온다. 장바구니 주문은 로그인하며 장바구니가 합쳐져 항목 id가
-      // 바뀔 수 있으니 장바구니로, 바로구매는 같은 주문서로 돌아온다
-      if (error instanceof ApiError && error.code === "GUEST_CHECKOUT_DISABLED") {
-        const back = intent.cartItemIds ? "/cart" : `${url.pathname}${url.search}`;
-        throw redirect(`/login?redirectTo=${encodeURIComponent(back)}`);
-      }
-      throw error;
-    }),
-    accessToken ? api.member.me().catch(() => null) : null,
-  ]);
-  return {
-    checkout,
-    member,
-    config: { apiBaseUrl: API_BASE_URL, storeCode: resolveStoreCode(request) },
-  };
-}
+const paymentForm = z.object({
+  checkoutId: z.string(),
+  receiverName: z.string(),
+  phone: z.string(),
+  zipCode: z.string(),
+  address1: z.string(),
+  address2: z.string(),
+  deliveryMemo: z.string(),
+  guestName: z.string(),
+  email: z.string(),
+  orderPassword: z.string(),
+});
 
 /** 결제 요청은 서버에서 한다 — 토큰이 브라우저 JS에 노출되지 않는다 */
-export async function action({ request, context }: Route.ActionArgs) {
-  const form = await request.formData();
-  const checkoutId = String(form.get("checkoutId") ?? "");
-  const accessToken = readToken(context);
-  const cartToken = await readCartToken(request);
-  const api = apiFor(request, { accessToken, cartToken });
-
-  const guestName = String(form.get("guestName") ?? "");
-  const payment = await api.checkout.requestPayment(checkoutId, {
-    shippingAddress: {
-      receiverName: String(form.get("receiverName") ?? ""),
-      phone: String(form.get("phone") ?? ""),
-      zipCode: String(form.get("zipCode") ?? ""),
-      address1: String(form.get("address1") ?? ""),
-      address2: String(form.get("address2") ?? "") || undefined,
-      deliveryMemo: String(form.get("deliveryMemo") ?? "") || undefined,
-    },
-    paymentMethod: "CARD",
-    guest: accessToken
-      ? undefined
-      : {
-          name: guestName,
-          phone: String(form.get("phone") ?? ""),
-          email: String(form.get("email") ?? ""),
-          orderPassword: String(form.get("orderPassword") ?? ""),
-        },
+const requestPayment = createServerFn({ method: "POST" })
+  .validator(paymentForm)
+  .handler(async ({ data }) => {
+    const accessToken = readToken();
+    const api = apiFor({ accessToken, cartToken: readCartToken() });
+    const payment = await api.checkout.requestPayment(data.checkoutId, {
+      shippingAddress: {
+        receiverName: data.receiverName,
+        phone: data.phone,
+        zipCode: data.zipCode,
+        address1: data.address1,
+        address2: data.address2 || undefined,
+        deliveryMemo: data.deliveryMemo || undefined,
+      },
+      paymentMethod: "CARD",
+      guest: accessToken
+        ? undefined
+        : {
+            name: data.guestName,
+            phone: data.phone,
+            email: data.email,
+            orderPassword: data.orderPassword,
+          },
+    });
+    // 브라우저에는 팝업 주소와 상태 조회 키만 내려준다
+    return { paymentId: payment.paymentId, popupUrl: payment.pgParams.popupUrl };
   });
-  return { payment };
-}
 
-export default function Checkout({ loaderData, actionData }: Route.ComponentProps) {
-  const { checkout, member, config } = loaderData;
+export const Route = createFileRoute("/checkout/")({
+  validateSearch: checkoutSearch,
+  loaderDeps: ({ search }) => search,
+  loader: ({ deps, location }) => createCheckout({ data: { search: deps, back: location.href } }),
+  head: () => ({ meta: [{ title: "주문서" }] }),
+  component: Checkout,
+});
+
+function Checkout() {
+  const { checkout, member, config } = Route.useLoaderData();
   const navigate = useNavigate();
-  const popupRef = useRef<ReturnType<typeof createPaymentPopup> | null>(null);
+  const popupRef = useRef<PaymentPopup | null>(null);
   const [notice, setNotice] = useState<string | null>(null);
   const [checking, setChecking] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
 
-  // 결제 요청 응답이 오면 이미 열어 둔 팝업을 결제 주소로 보낸다
-  useEffect(() => {
-    const popupUrl = actionData?.payment?.pgParams?.popupUrl;
-    if (!popupUrl || !popupRef.current) return;
-    if (!popupRef.current.navigate(popupUrl)) {
-      setNotice("결제창이 열리지 않았어요. 팝업 차단을 풀고 다시 시도해주세요.");
-    }
-  }, [actionData]);
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    // 문서를 다시 부르지 않는다 — 팝업 제어 상태가 사라진다
+    event.preventDefault();
+    const form = new FormData(event.currentTarget);
+    const field = (name: string) => String(form.get(name) ?? "");
+    let paymentId: string | null = null;
 
-  const handleSubmit = () => {
     // 클릭 콜스택에서 동기적으로 연다 — 응답을 기다린 뒤 열면 차단된다
-    popupRef.current = createPaymentPopup({
+    const popup = createPaymentPopup({
       onCompleted: (message) => {
         if (message.orderId) {
-          void navigate(`/checkout/complete?orderId=${message.orderId}`);
+          void navigate({ to: "/checkout/complete", search: { orderId: message.orderId } });
         } else {
           setNotice("결제가 완료됐어요. 주문 내역에서 확인해주세요.");
         }
@@ -105,26 +120,56 @@ export default function Checkout({ loaderData, actionData }: Route.ComponentProp
       },
       onClosed: () => {
         // 닫혔다고 실패로 단정하지 않는다 — 서버에 결제 상태를 물어본다
-        const paymentId = actionDataPaymentId(actionData);
         if (!paymentId) return;
         setChecking(true);
         void pollPaymentStatus(config, paymentId).then((status) => {
           setChecking(false);
           if (status?.status === "completed" && status.orderId) {
-            void navigate(`/checkout/complete?orderId=${status.orderId}`);
+            void navigate({ to: "/checkout/complete", search: { orderId: status.orderId } });
           } else {
             setNotice("결제창이 닫혔어요. 결제를 마쳤다면 잠시 뒤 주문 내역에서 확인해주세요.");
           }
         });
       },
     });
-    popupRef.current.open();
+    popupRef.current?.close();
+    popupRef.current = popup;
+    popup.open();
+
+    // 결제 요청 응답이 오면 이미 열어 둔 팝업을 결제 주소로 보낸다
+    setSubmitting(true);
+    setNotice(null);
+    requestPayment({
+      data: {
+        checkoutId: checkout.checkoutId,
+        receiverName: field("receiverName"),
+        phone: field("phone"),
+        zipCode: field("zipCode"),
+        address1: field("address1"),
+        address2: field("address2"),
+        deliveryMemo: field("deliveryMemo"),
+        guestName: field("guestName"),
+        email: field("email"),
+        orderPassword: field("orderPassword"),
+      },
+    })
+      .then((payment) => {
+        paymentId = payment.paymentId;
+        if (!popup.navigate(payment.popupUrl)) {
+          popup.close();
+          setNotice("결제창이 열리지 않았어요. 팝업 차단을 풀고 다시 시도해주세요.");
+        }
+      })
+      .catch(() => {
+        popup.close();
+        setNotice("결제를 시작하지 못했어요. 입력한 내용을 확인하고 다시 시도해주세요.");
+      })
+      .finally(() => setSubmitting(false));
   };
 
   return (
     <div className="grid gap-8 md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)] md:items-start">
-      <Form method="post" onSubmit={handleSubmit} className="space-y-6">
-        <input type="hidden" name="checkoutId" value={checkout.checkoutId} />
+      <form onSubmit={handleSubmit} className="space-y-6">
         <section className="space-y-3">
           <h2 className="font-bold text-lg">배송지</h2>
           <Field label="수령인" name="receiverName" defaultValue={member?.name ?? ""} required />
@@ -150,11 +195,14 @@ export default function Checkout({ loaderData, actionData }: Route.ComponentProp
           </section>
         )}
 
-        <button type="submit" className="h-12 w-full rounded-md bg-ink font-semibold text-white">
+        <SubmitButton
+          disabled={submitting}
+          className="h-12 w-full rounded-md bg-ink font-semibold text-white disabled:opacity-50"
+        >
           {formatPrice(checkout.amounts.totalAmount)} 결제하기
-        </button>
+        </SubmitButton>
         <p className="text-center text-muted text-xs">결제창은 새 팝업에서 열려요</p>
-      </Form>
+      </form>
 
       <aside className="space-y-4 rounded-lg border border-line p-5">
         <h2 className="font-bold text-lg">주문 상품</h2>
@@ -195,20 +243,12 @@ export default function Checkout({ loaderData, actionData }: Route.ComponentProp
   );
 }
 
-function actionDataPaymentId(actionData: Route.ComponentProps["actionData"]): string | null {
-  return actionData?.payment?.paymentId ?? null;
-}
-
 /** 팝업이 결과 없이 닫힌 경우 — 서버 상태가 진실이다 */
-async function pollPaymentStatus(
-  config: { apiBaseUrl: string; storeCode: string },
-  paymentId: string,
-) {
+async function pollPaymentStatus(config: PublicConfig, paymentId: string) {
   const api = browserApi(config);
   for (let attempt = 0; attempt < 6; attempt += 1) {
     const status = await api.payments.getStatus(paymentId).catch(() => null);
     if (status && status.status !== "pending" && status.status !== "processing") return status;
-    if (status?.status === "completed") return status;
     await new Promise((resolve) => setTimeout(resolve, 1500));
   }
   return null;
@@ -237,7 +277,7 @@ function Field({
         {label}
         {required ? <span className="text-point"> *</span> : null}
       </span>
-      {/* 프리필은 defaultValue로 준다 — register만 쓰면 SSR HTML에 값이 실리지 않는다 */}
+      {/* 프리필은 defaultValue로 준다 — SSR HTML에 값이 실린다 */}
       <input
         type={type}
         name={name}

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

@@ -1,29 +1,34 @@
-import { Link } from "react-router";
+import type { ProductCard as ProductCardData } from "@sayren/storefront-sdk";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
 import { ProductCard } from "../components/product-card";
 import { useTrack } from "../lib/analytics";
 import { apiFor } from "../lib/api.server";
-import type { Route } from "./+types/home";
-
-export function meta() {
-  return [{ title: "스토어" }, { name: "description", content: "지금 인기 있는 상품" }];
-}
 
 /**
  * 홈 — 서버에서 상품을 먼저 받아 그린다(SSR). 클라이언트에서 다시 받지 않는다.
  * 확장 지점: 배너·기획전 레일을 추가하려면 여기서 데이터를 더 불러 `Promise.all`에 넣는다.
  */
-export async function loader({ request }: Route.LoaderArgs) {
-  const api = apiFor(request);
+const getHome = createServerFn({ method: "GET" }).handler(async () => {
+  const api = apiFor();
   const [categories, recommended, latest] = await Promise.all([
     api.catalog.listCategories(),
     api.catalog.searchProducts({ sort: "recommend", size: 8 }),
     api.catalog.searchProducts({ sort: "latest", size: 8 }),
   ]);
   return { categories, recommended: recommended.contents, latest: latest.contents };
-}
+});
+
+export const Route = createFileRoute("/")({
+  head: () => ({
+    meta: [{ title: "스토어" }, { name: "description", content: "지금 인기 있는 상품" }],
+  }),
+  loader: () => getHome(),
+  component: Home,
+});
 
-export default function Home({ loaderData }: Route.ComponentProps) {
-  const { categories, recommended, latest } = loaderData;
+function Home() {
+  const { categories, recommended, latest } = Route.useLoaderData();
 
   return (
     <div className="space-y-10">
@@ -32,7 +37,8 @@ export default function Home({ loaderData }: Route.ComponentProps) {
           {categories.map((category) => (
             <Link
               key={category.categoryId}
-              to={`/products?categoryId=${category.categoryId}`}
+              to="/products"
+              search={{ categoryId: category.categoryId }}
               className="rounded-full bg-chip px-3 py-1.5 text-sm hover:bg-line"
             >
               {category.name}
@@ -54,7 +60,7 @@ function ProductSection({
 }: {
   listId: string;
   title: string;
-  products: Awaited<ReturnType<typeof loader>>["recommended"];
+  products: ProductCardData[];
 }) {
   useTrack(
     products.length