@sayren/mcp 0.5.1 → 0.6.0

package/template/src/routeTree.gen.ts

@@ -12,7 +12,9 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as AccountRouteImport } from './routes/account'
 import { Route as CartRouteImport } from './routes/cart'
+import { Route as GuestOrderRouteImport } from './routes/guest-order'
 import { Route as LoginRouteImport } from './routes/login'
+import { Route as SignupRouteImport } from './routes/signup'
 import { Route as AuthCallbackRouteImport } from './routes/auth.callback'
 import { Route as CheckoutIndexRouteImport } from './routes/checkout.index'
 import { Route as CheckoutCompleteRouteImport } from './routes/checkout.complete'
@@ -37,11 +39,21 @@ const CartRoute = CartRouteImport.update({
   path: '/cart',
   getParentRoute: () => rootRouteImport,
 } as any)
+const GuestOrderRoute = GuestOrderRouteImport.update({
+  id: '/guest-order',
+  path: '/guest-order',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const LoginRoute = LoginRouteImport.update({
   id: '/login',
   path: '/login',
   getParentRoute: () => rootRouteImport,
 } as any)
+const SignupRoute = SignupRouteImport.update({
+  id: '/signup',
+  path: '/signup',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AuthCallbackRoute = AuthCallbackRouteImport.update({
   id: '/auth/callback',
   path: '/auth/callback',
@@ -87,7 +99,9 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/account': typeof AccountRoute
   '/cart': typeof CartRoute
+  '/guest-order': typeof GuestOrderRoute
   '/login': typeof LoginRoute
+  '/signup': typeof SignupRoute
   '/auth/callback': typeof AuthCallbackRoute
   '/checkout/complete': typeof CheckoutCompleteRoute
   '/checkout/return': typeof CheckoutReturnRoute
@@ -101,7 +115,9 @@ export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/account': typeof AccountRoute
   '/cart': typeof CartRoute
+  '/guest-order': typeof GuestOrderRoute
   '/login': typeof LoginRoute
+  '/signup': typeof SignupRoute
   '/auth/callback': typeof AuthCallbackRoute
   '/checkout/complete': typeof CheckoutCompleteRoute
   '/checkout/return': typeof CheckoutReturnRoute
@@ -116,7 +132,9 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/account': typeof AccountRoute
   '/cart': typeof CartRoute
+  '/guest-order': typeof GuestOrderRoute
   '/login': typeof LoginRoute
+  '/signup': typeof SignupRoute
   '/auth/callback': typeof AuthCallbackRoute
   '/checkout/complete': typeof CheckoutCompleteRoute
   '/checkout/return': typeof CheckoutReturnRoute
@@ -132,7 +150,9 @@ export interface FileRouteTypes {
     | '/'
     | '/account'
     | '/cart'
+    | '/guest-order'
     | '/login'
+    | '/signup'
     | '/auth/callback'
     | '/checkout/complete'
     | '/checkout/return'
@@ -146,7 +166,9 @@ export interface FileRouteTypes {
     | '/'
     | '/account'
     | '/cart'
+    | '/guest-order'
     | '/login'
+    | '/signup'
     | '/auth/callback'
     | '/checkout/complete'
     | '/checkout/return'
@@ -160,7 +182,9 @@ export interface FileRouteTypes {
     | '/'
     | '/account'
     | '/cart'
+    | '/guest-order'
     | '/login'
+    | '/signup'
     | '/auth/callback'
     | '/checkout/complete'
     | '/checkout/return'
@@ -175,7 +199,9 @@ export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   AccountRoute: typeof AccountRoute
   CartRoute: typeof CartRoute
+  GuestOrderRoute: typeof GuestOrderRoute
   LoginRoute: typeof LoginRoute
+  SignupRoute: typeof SignupRoute
   AuthCallbackRoute: typeof AuthCallbackRoute
   CheckoutCompleteRoute: typeof CheckoutCompleteRoute
   CheckoutReturnRoute: typeof CheckoutReturnRoute
@@ -209,6 +235,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof CartRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/guest-order': {
+      id: '/guest-order'
+      path: '/guest-order'
+      fullPath: '/guest-order'
+      preLoaderRoute: typeof GuestOrderRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/login': {
       id: '/login'
       path: '/login'
@@ -216,6 +249,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LoginRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/signup': {
+      id: '/signup'
+      path: '/signup'
+      fullPath: '/signup'
+      preLoaderRoute: typeof SignupRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/auth/callback': {
       id: '/auth/callback'
       path: '/auth/callback'
@@ -279,7 +319,9 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AccountRoute: AccountRoute,
   CartRoute: CartRoute,
+  GuestOrderRoute: GuestOrderRoute,
   LoginRoute: LoginRoute,
+  SignupRoute: SignupRoute,
   AuthCallbackRoute: AuthCallbackRoute,
   CheckoutCompleteRoute: CheckoutCompleteRoute,
   CheckoutReturnRoute: CheckoutReturnRoute,

package/template/src/routes/__root.tsx

@@ -5,11 +5,13 @@ import {
   Link,
   Outlet,
   Scripts,
+  useRouterState,
 } from "@tanstack/react-router";
 import { createServerFn } from "@tanstack/react-start";
 import { useEffect } from "react";
-import { SiteHeader } from "../components/site-header";
+import { SiteHeader, type StoreBrand } from "../components/site-header";
 import { type AnalyticsConfig, startAnalytics } from "../lib/analytics";
+import { apiFor } from "../lib/api.server";
 import { ANALYTICS_DEBUG, API_BASE_URL, resolveStoreCode } from "../lib/config.server";
 import appCss from "../styles.css?url";
 
@@ -22,16 +24,42 @@ const getAnalyticsConfig = createServerFn({ method: "GET" }).handler(
   }),
 );
 
+/**
+ * 스토어 이름·로고 — 셀러가 콘솔 설정 › 스토어 정보에서 정한 값이다. 헤더와 문서 제목에 쓴다.
+ * 읽지 못해도 화면은 그린다(각 화면이 자기 데이터로 오류를 보인다).
+ */
+const getStoreBrand = createServerFn({ method: "GET" }).handler(
+  async (): Promise<StoreBrand | null> => {
+    const store = await apiFor()
+      .store.get()
+      .catch(() => null);
+    return store ? { name: store.name, logoUrl: store.logoUrl } : null;
+  },
+);
+
+interface RootData {
+  analytics: AnalyticsConfig;
+  store: StoreBrand | null;
+}
+
 export const Route = createRootRoute({
-  head: () => ({
+  head: ({ loaderData }) => ({
     meta: [
       { charSet: "utf-8" },
       { name: "viewport", content: "width=device-width, initial-scale=1" },
-      { title: "스토어" },
+      // 화면마다 제목을 덮어쓴다. 여기 값은 제목을 정하지 않은 화면의 기본값이다
+      { title: loaderData?.store?.name ?? "스토어" },
+    ],
+    links: [
+      { rel: "stylesheet", href: appCss },
+      // 확장 지점 — 파비콘은 public/favicon.svg를 바꾼다
+      { rel: "icon", href: "/favicon.svg", type: "image/svg+xml" },
     ],
-    links: [{ rel: "stylesheet", href: appCss }],
   }),
-  loader: async () => ({ analytics: await getAnalyticsConfig() }),
+  loader: async (): Promise<RootData> => {
+    const [analytics, store] = await Promise.all([getAnalyticsConfig(), getStoreBrand()]);
+    return { analytics, store };
+  },
   // 설정은 바뀌지 않는다 — 화면을 옮길 때마다 다시 받지 않는다
   staleTime: Number.POSITIVE_INFINITY,
   shellComponent: RootDocument,
@@ -41,13 +69,17 @@ export const Route = createRootRoute({
 });
 
 function RootDocument({ children }: { children: React.ReactNode }) {
+  // 셸은 오류 화면도 감싼다 — loader가 실패했을 수 있어 값이 없을 때를 함께 다룬다
+  const store = useRouterState({
+    select: (state) => (state.matches[0]?.loaderData as RootData | undefined)?.store ?? null,
+  });
   return (
     <html lang="ko">
       <head>
         <HeadContent />
       </head>
       <body className="min-h-screen bg-white text-ink">
-        <SiteHeader />
+        <SiteHeader store={store} />
         <main className="mx-auto w-full max-w-5xl px-4 py-8">{children}</main>
         <Scripts />
       </body>

package/template/src/routes/account.tsx

@@ -1,4 +1,8 @@
-import { ApiError, type SocialProvider } from "@sayren/storefront-sdk";
+import {
+  ApiError,
+  type SocialProvider,
+  withdrawalBlockedDetailsSchema,
+} from "@sayren/storefront-sdk";
 import { createFileRoute, redirect, useRouter } from "@tanstack/react-router";
 import { createServerFn } from "@tanstack/react-start";
 import { getRequestUrl } from "@tanstack/react-start/server";
@@ -7,7 +11,7 @@ import { z } from "zod";
 import { SubmitButton } from "../components/submit-button";
 import { apiFor, authFor } from "../lib/api.server";
 import { formatDateTime } from "../lib/format";
-import { readToken } from "../lib/session.server";
+import { readToken, signOut } from "../lib/session.server";
 import { SOCIAL_BUTTONS } from "../lib/social-buttons";
 import { writeSocialLogin } from "../lib/social-login.server";
 
@@ -104,6 +108,61 @@ const unlink = createServerFn({ method: "POST" })
     }
   });
 
+/**
+ * 로그아웃 — 서버에서 이 구매자의 리프레시 토큰을 모두 폐기하고 세션 쿠키를 지운다.
+ * 서버 호출이 실패해도 쿠키는 지운다(이 브라우저에서는 로그아웃된다).
+ */
+const logout = createServerFn({ method: "POST" }).handler(async () => {
+  const accessToken = readToken();
+  if (accessToken)
+    await authFor()
+      .signOut(accessToken)
+      .catch(() => undefined);
+  signOut();
+});
+
+/**
+ * 회원 탈퇴 — 되돌릴 수 없다. 비밀번호가 있는 구매자는 비밀번호를 다시 받는다. 소셜 로그인만 쓰는 구매자는
+ * 최근 10분 안에 로그인한 세션이어야 한다(아니면 403 `REAUTH_REQUIRED`). 성공하면 세션 쿠키를 지운다.
+ */
+const withdraw = createServerFn({ method: "POST" })
+  .validator(z.object({ password: z.string().optional() }))
+  .handler(async ({ data }) => {
+    const accessToken = readToken();
+    if (!accessToken) return { error: "다시 로그인해 주십시오" };
+    try {
+      await authFor().withdraw(accessToken, { password: data.password || undefined });
+      signOut();
+      return { error: null };
+    } catch (error) {
+      return { error: withdrawErrorMessage(error) };
+    }
+  });
+
+function withdrawErrorMessage(error: unknown): string {
+  if (!(error instanceof ApiError)) return "탈퇴하지 못했습니다. 잠시 후 다시 시도해 주십시오";
+  if (error.code === "WITHDRAWAL_BLOCKED") {
+    const details = withdrawalBlockedDetailsSchema.safeParse(error.details);
+    const reasons = details.success
+      ? [
+          details.data.inProgressOrderItems
+            ? `진행 중인 주문 ${details.data.inProgressOrderItems}건`
+            : null,
+          details.data.openClaims ? `처리 중인 취소·반품 ${details.data.openClaims}건` : null,
+          details.data.pendingPayments ? `진행 중인 결제 ${details.data.pendingPayments}건` : null,
+        ].filter(Boolean)
+      : [];
+    return `${reasons.length ? `${reasons.join(", ")}이 있어` : "진행 중인 주문이 있어"} 지금은 탈퇴할 수 없습니다`;
+  }
+  if (error.code === "PASSWORD_MISMATCH") return "비밀번호가 맞지 않습니다";
+  if (error.code === "PASSWORD_REQUIRED") return "비밀번호를 입력해 주십시오";
+  if (error.code === "REAUTH_REQUIRED")
+    return "보안을 위해 다시 로그인한 뒤 10분 안에 탈퇴해 주십시오";
+  if (error.code === "ACCOUNT_LOCKED")
+    return "비밀번호를 여러 번 틀려 잠시 잠겼습니다. 10분 뒤에 다시 시도해 주십시오";
+  return "탈퇴하지 못했습니다. 잠시 후 다시 시도해 주십시오";
+}
+
 const ERROR_MESSAGE: Record<string, string> = {
   IDENTITY_IN_USE: "이 계정은 이미 다른 회원에 연결돼 있습니다",
   PROVIDER_ALREADY_LINKED:
@@ -238,7 +297,11 @@ function Account() {
             })}
           </ul>
         </form>
-        {error ? <p className="text-point text-sm">{error}</p> : null}
+        {error ? (
+          <p role="alert" className="text-point text-sm">
+            {error}
+          </p>
+        ) : null}
         <p className="text-muted text-xs">
           연결한 계정으로도 같은 회원으로 로그인합니다. 마지막 로그인 수단은 해제할 수 없습니다.
         </p>
@@ -308,6 +371,104 @@ function Account() {
           </li>
         </ul>
       </section>
+
+      <section className="space-y-3">
+        <h2 className="font-bold text-lg">계정</h2>
+        <button
+          type="button"
+          disabled={pending}
+          onClick={() => {
+            setPending(true);
+            // 로그아웃 상태가 모든 화면에 새로 반영되도록 문서째 이동한다
+            void logout().finally(() => window.location.assign("/"));
+          }}
+          className="h-10 rounded-md border border-line px-4 text-sm disabled:opacity-50"
+        >
+          로그아웃
+        </button>
+        <WithdrawForm hasPassword={identities.hasPassword} />
+      </section>
     </div>
   );
 }
+
+/** 회원 탈퇴 — 확인을 한 번 더 받는다. 주문·리뷰·문의 기록은 스토어가 보관한다 */
+function WithdrawForm({ hasPassword }: { hasPassword: boolean }) {
+  const [open, setOpen] = useState(false);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  if (!open) {
+    return (
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className="block text-muted text-sm underline"
+      >
+        회원 탈퇴
+      </button>
+    );
+  }
+  return (
+    <form
+      aria-label="회원 탈퇴"
+      className="space-y-3 rounded-md bg-chip p-4 text-sm"
+      onSubmit={(event) => {
+        event.preventDefault();
+        const form = new FormData(event.currentTarget);
+        setPending(true);
+        setError(null);
+        void withdraw({ data: { password: String(form.get("password") ?? "") } })
+          .then((result) => {
+            if (!result.error) {
+              window.location.assign("/");
+              return;
+            }
+            setError(result.error);
+            setPending(false);
+          })
+          .catch(() => {
+            setError("탈퇴하지 못했습니다. 잠시 후 다시 시도해 주십시오");
+            setPending(false);
+          });
+      }}
+    >
+      <p>
+        탈퇴하면 계정·배송지·장바구니가 지워지고 되돌릴 수 없습니다. 주문·리뷰·문의 기록은 스토어가
+        보관합니다.
+      </p>
+      {hasPassword ? (
+        <label className="block space-y-1">
+          <span>비밀번호 확인</span>
+          <input
+            type="password"
+            name="password"
+            autoComplete="current-password"
+            required
+            className="h-10 w-full rounded-md border border-line bg-white px-3"
+          />
+        </label>
+      ) : (
+        <p className="text-muted text-xs">
+          소셜 로그인 회원은 로그인한 지 10분 안에만 탈퇴할 수 있습니다.
+        </p>
+      )}
+      {error ? (
+        <p role="alert" className="text-point">
+          {error}
+        </p>
+      ) : null}
+      <div className="flex items-center gap-3">
+        <SubmitButton
+          disabled={pending}
+          className="h-10 rounded-md bg-ink px-4 font-semibold text-white disabled:opacity-50"
+        >
+          탈퇴하기
+        </SubmitButton>
+        <button type="button" onClick={() => setOpen(false)} className="text-muted underline">
+          취소
+        </button>
+      </div>
+    </form>
+  );
+}

package/template/src/routes/cart.tsx

@@ -92,6 +92,7 @@ function CartPage() {
           <li key={item.cartItemId} className="flex gap-4 py-4">
             <ProductThumb
               src={item.thumbnailUrl}
+              alt={item.productName}
               className="size-20 rounded-md bg-chip object-cover"
             />
             <div className="flex flex-1 flex-col gap-1">
@@ -126,6 +127,7 @@ function CartPage() {
                   <input
                     type="number"
                     name="quantity"
+                    aria-label={`${item.productName} 수량`}
                     min={1}
                     max={999}
                     defaultValue={item.quantity}
@@ -141,7 +143,11 @@ function CartPage() {
                     change({ intent: "remove", cartItemId: item.cartItemId });
                   }}
                 >
-                  <SubmitButton disabled={pending} className="text-muted text-xs underline">
+                  <SubmitButton
+                    disabled={pending}
+                    ariaLabel={`${item.productName} 삭제`}
+                    className="text-muted text-xs underline"
+                  >
                     삭제
                   </SubmitButton>
                 </form>

package/template/src/routes/checkout.complete.tsx

@@ -10,13 +10,13 @@ const completeSearch = z.object({ orderId: z.string().optional().catch(undefined
 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 })
+    if (!data.orderId || !accessToken) return { order: null, member: Boolean(accessToken) };
+    const order = await apiFor({ accessToken })
       .myOrders.get(data.orderId)
       .catch(() => null);
+    return { order, member: true };
   });
 
 export const Route = createFileRoute("/checkout/complete")({
@@ -28,7 +28,7 @@ export const Route = createFileRoute("/checkout/complete")({
 });
 
 function CheckoutComplete() {
-  const order = Route.useLoaderData();
+  const { order, member } = Route.useLoaderData();
   const { orderId } = Route.useSearch();
 
   return (
@@ -38,7 +38,7 @@ function CheckoutComplete() {
         {orderId ? (
           <p className="text-muted text-sm">주문번호 {orderId}</p>
         ) : (
-          <p className="text-muted text-sm">주문 내역에서 주문을 확인해주십시오</p>
+          <p className="text-muted text-sm">주문 내역에서 주문을 확인해 주십시오</p>
         )}
       </div>
 
@@ -61,9 +61,20 @@ function CheckoutComplete() {
       ) : null}
 
       <div className="flex justify-center gap-2">
-        <Link to="/orders" className="rounded-md border border-ink px-5 py-3">
-          주문 내역
-        </Link>
+        {/* 비회원 주문은 주문번호·연락처·주문 조회 비밀번호로 찾는다 */}
+        {member || !orderId ? (
+          <Link to="/orders" className="rounded-md border border-ink px-5 py-3">
+            주문 내역
+          </Link>
+        ) : (
+          <Link
+            to="/guest-order"
+            search={{ orderId }}
+            className="rounded-md border border-ink px-5 py-3"
+          >
+            비회원 주문 조회
+          </Link>
+        )}
         <Link to="/products" className="rounded-md bg-ink px-5 py-3 text-white">
           계속 쇼핑하기
         </Link>

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

@@ -12,7 +12,7 @@ import type { PaymentResult } from "@sayren/storefront-sdk/payments";
 import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
 import { createServerFn } from "@tanstack/react-start";
 import { getRequestUrl } from "@tanstack/react-start/server";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { z } from "zod";
 import { SubmitButton } from "../components/submit-button";
 import { apiFor } from "../lib/api.server";
@@ -21,6 +21,7 @@ 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 { forgetPaymentOptions, rememberPaymentOptions } from "../lib/payment-options";
 import { PAYMENT_RETURN_PATH, paymentsFor } from "../lib/payments";
 import { readToken } from "../lib/session.server";
 
@@ -66,7 +67,7 @@ const quoteDelivery = createServerFn({ method: "POST" })
     } catch {
       return {
         quote: null,
-        error: "배송비를 확인하지 못했습니다. 우편번호를 다시 확인해주십시오.",
+        error: "배송비를 확인하지 못했습니다. 우편번호를 다시 확인해 주십시오.",
       };
     }
   });
@@ -95,7 +96,7 @@ const startPayment = createServerFn({ method: "POST" })
   .handler(async ({ data }) => {
     const accessToken = readToken();
     const api = apiFor({ accessToken, cartToken: readCartToken() });
-    // 복귀 주소 — 이 도메인이 셀러 콘솔 결제 도메인에 있어야 한다(테스트 결제는 localhost 허용)
+    // 복귀 주소 — 결제 도메인을 등록한 스토어는 이 도메인이 목록 안이어야 한다(테스트 결제는 localhost 허용)
     const returnUrl = new URL(PAYMENT_RETURN_PATH, new URL(getRequestUrl()).origin);
     returnUrl.searchParams.set("back", data.back);
     try {
@@ -129,20 +130,20 @@ const startPayment = createServerFn({ method: "POST" })
 
 function startErrorMessage(error: unknown): string {
   if (!(error instanceof ApiError))
-    return "결제를 시작하지 못했습니다. 잠시 후 다시 시도해주십시오.";
+    return "결제를 시작하지 못했습니다. 잠시 후 다시 시도해 주십시오.";
   switch (error.code) {
     case "PAYMENT_OPTION_UNAVAILABLE":
-      return "지금 쓸 수 없는 결제수단입니다. 다른 결제수단을 골라주십시오.";
+      return "지금 쓸 수 없는 결제수단입니다. 다른 결제수단을 골라 주십시오.";
     case "PAYMENT_PROVIDER_UNAVAILABLE":
-      return "결제창을 준비하지 못했습니다. 다른 결제수단으로 시도해주십시오.";
+      return "결제창을 준비하지 못했습니다. 다른 결제수단으로 시도해 주십시오.";
     case "PAYMENT_NOT_CONFIGURED":
-      return "결제 수단을 준비하고 있습니다. 잠시 후 다시 시도해주십시오.";
+      return "결제 수단을 준비하고 있습니다. 잠시 후 다시 시도해 주십시오.";
     case "CASH_RECEIPT_NOT_AVAILABLE":
       return "현금영수증은 계좌이체·가상계좌 결제에서만 신청할 수 있습니다.";
     case "RETURN_URL_NOT_ALLOWED":
-      return "이 쇼핑몰 주소에서는 결제할 수 없습니다. 셀러 콘솔 설정 › 결제에서 결제 도메인을 확인해주십시오.";
+      return "이 쇼핑몰 주소에서는 결제할 수 없습니다. 셀러 콘솔 설정 › 결제에서 결제 도메인을 확인해 주십시오.";
     default:
-      return "결제를 시작하지 못했습니다. 입력한 내용을 확인하고 다시 시도해주십시오.";
+      return "결제를 시작하지 못했습니다. 입력한 내용을 확인하고 다시 시도해 주십시오.";
   }
 }
 
@@ -196,6 +197,7 @@ function Checkout() {
 
   const settle = (result: PaymentResult, back: string) => {
     if (result.status === "COMPLETED") {
+      forgetPaymentOptions(result.paymentId);
       void navigate({
         to: "/checkout/complete",
         search: { orderId: result.orderId },
@@ -214,10 +216,10 @@ function Checkout() {
     }
     setNotice(
       result.status === "CANCELED"
-        ? "결제를 취소했습니다. 다른 결제수단으로 다시 시도해주십시오."
+        ? "결제를 취소했습니다. 다른 결제수단으로 다시 시도해 주십시오."
         : result.status === "FAILED"
           ? result.message
-          : "결제 결과를 확인하지 못했습니다. 주문 내역을 확인해주십시오.",
+          : "결제 결과를 확인하지 못했습니다. 주문 내역을 확인해 주십시오.",
     );
   };
 
@@ -225,7 +227,7 @@ function Checkout() {
     event.preventDefault();
     const option = options.find((item) => paymentOptionKey(item) === selected);
     if (!option) {
-      setNotice("결제수단을 골라주십시오.");
+      setNotice("결제수단을 골라 주십시오.");
       return;
     }
     const form = new FormData(event.currentTarget);
@@ -237,7 +239,7 @@ function Checkout() {
         identityNumber: field("cashReceiptNumber"),
       });
       if (!parsed.success) {
-        setNotice(parsed.error.issues[0]?.message ?? "현금영수증 번호를 확인해주십시오.");
+        setNotice(parsed.error.issues[0]?.message ?? "현금영수증 번호를 확인해 주십시오.");
         return;
       }
       cashReceipt = parsed.data;
@@ -274,12 +276,14 @@ function Checkout() {
         const paymentStart = paymentStartSchema.parse(JSON.parse(start));
         // 확정 금액 — 서버가 보낸 배송지로 배송비를 다시 계산했다. 화면에 보여 준 금액과 다를 수 있다
         setQuote({ amounts: paymentStart.amounts, delivery: paymentStart.delivery });
+        // 리다이렉트 결제가 실패해 복귀 화면으로 오면 같은 결제를 다른 옵션으로 다시 시도한다 — 그때 쓸 목록
+        rememberPaymentOptions(paymentStart.paymentId, options);
         // 결제 서비스가 결제창을 그린다. 팝업이면 결과를 여기서 받고, 리다이렉트면 이 탭이 떠난다
         settle(await payments.open(paymentStart, { window: paymentWindow }), back);
       })
       .catch(() => {
         paymentWindow.close();
-        setNotice("결제를 시작하지 못했습니다. 잠시 후 다시 시도해주십시오.");
+        setNotice("결제를 시작하지 못했습니다. 잠시 후 다시 시도해 주십시오.");
       })
       .finally(() => setSubmitting(false));
   };
@@ -445,7 +449,11 @@ function Checkout() {
             테스트 결제입니다. 실제로 돈이 오가지 않습니다.
           </p>
         ) : null}
-        {notice ? <p className="rounded-md bg-chip px-3 py-2 text-sm">{notice}</p> : null}
+        {notice ? (
+          <p role="status" className="rounded-md bg-chip px-3 py-2 text-sm">
+            {notice}
+          </p>
+        ) : null}
       </aside>
     </div>
   );
@@ -481,11 +489,18 @@ function Field({
   hint?: string;
   onBlur?: (value: string) => void;
 }) {
+  const hintId = useId();
   return (
     <label className="block space-y-1">
       <span className="text-sm">
         {label}
-        {required ? <span className="text-point"> *</span> : null}
+        {/* 필수 표시는 눈으로만 본다 — 입력의 required가 보조 기술에 필수임을 알린다 */}
+        {required ? (
+          <span aria-hidden="true" className="text-point">
+            {" "}
+            *
+          </span>
+        ) : null}
       </span>
       {/* 프리필은 defaultValue로 준다 — SSR HTML에 값이 실린다 */}
       <input
@@ -494,10 +509,17 @@ function Field({
         defaultValue={defaultValue}
         placeholder={placeholder}
         required={required}
+        // 이름은 라벨 글자 그대로다(필수 표시·안내 문구는 빼고) — 안내는 aria-describedby로 잇는다
+        aria-label={label}
+        aria-describedby={hint ? hintId : undefined}
         onBlur={onBlur ? (event) => onBlur(event.target.value) : undefined}
         className="h-11 w-full rounded-md border border-line px-3"
       />
-      {hint ? <span className="text-muted text-xs">{hint}</span> : null}
+      {hint ? (
+        <span id={hintId} className="block text-muted text-xs">
+          {hint}
+        </span>
+      ) : null}
     </label>
   );
 }