@sayren/mcp 0.1.8 → 0.1.10

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

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">