@sayren/mcp 0.5.2 → 0.6.1

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,12 +5,15 @@ 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 { FALLBACK_STORE_NAME } from "../lib/page-title";
 import appCss from "../styles.css?url";
 
 /** 방문 분석 설정 — 서버 값(`process.env`)이라 서버 함수로 내려준다 */
@@ -22,16 +25,43 @@ 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: "스토어" },
+      // 화면마다 `{화면} | {스토어 이름}`으로 덮어쓴다(`lib/page-title.ts`). 여기 값은 홈처럼
+      // 화면 이름이 없는 곳의 제목이다
+      { title: loaderData?.store?.name ?? FALLBACK_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 +71,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,8 @@ 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 { pageTitle } from "../lib/page-title";
+import { readToken, signOut } from "../lib/session.server";
 import { SOCIAL_BUTTONS } from "../lib/social-buttons";
 import { writeSocialLogin } from "../lib/social-login.server";
 
@@ -104,6 +109,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:
@@ -122,7 +182,7 @@ function accountErrorMessage(error: unknown): string {
 export const Route = createFileRoute("/account")({
   validateSearch: accountSearch,
   loader: () => getAccount(),
-  head: () => ({ meta: [{ title: "내 정보" }] }),
+  head: ({ matches }) => ({ meta: [{ title: pageTitle(matches, "내 정보") }] }),
   component: Account,
 });
 
@@ -238,7 +298,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 +372,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

@@ -7,6 +7,7 @@ import { SubmitButton } from "../components/submit-button";
 import { apiFor } from "../lib/api.server";
 import { readCartToken, writeCartToken } from "../lib/cart-session.server";
 import { formatPrice } from "../lib/format";
+import { pageTitle } from "../lib/page-title";
 import { readToken } from "../lib/session.server";
 
 const getCart = createServerFn({ method: "GET" }).handler(async () => {
@@ -54,7 +55,7 @@ const changeCart = createServerFn({ method: "POST" })
 
 export const Route = createFileRoute("/cart")({
   loader: () => getCart(),
-  head: () => ({ meta: [{ title: "장바구니" }] }),
+  head: ({ matches }) => ({ meta: [{ title: pageTitle(matches, "장바구니") }] }),
   component: CartPage,
 });
 
@@ -92,6 +93,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 +128,7 @@ function CartPage() {
                   <input
                     type="number"
                     name="quantity"
+                    aria-label={`${item.productName} 수량`}
                     min={1}
                     max={999}
                     defaultValue={item.quantity}
@@ -141,7 +144,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

@@ -3,6 +3,7 @@ import { createServerFn } from "@tanstack/react-start";
 import { z } from "zod";
 import { apiFor } from "../lib/api.server";
 import { formatPrice } from "../lib/format";
+import { pageTitle } from "../lib/page-title";
 import { readToken } from "../lib/session.server";
 
 const completeSearch = z.object({ orderId: z.string().optional().catch(undefined) });
@@ -10,25 +11,25 @@ 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")({
   validateSearch: completeSearch,
   loaderDeps: ({ search }) => search,
   loader: ({ deps }) => getCompletedOrder({ data: deps }),
-  head: () => ({ meta: [{ title: "주문 완료" }] }),
+  head: ({ matches }) => ({ meta: [{ title: pageTitle(matches, "주문 완료") }] }),
   component: CheckoutComplete,
 });
 
 function CheckoutComplete() {
-  const order = Route.useLoaderData();
+  const { order, member } = Route.useLoaderData();
   const { orderId } = Route.useSearch();
 
   return (
@@ -38,7 +39,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 +62,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>