@sayren/mcp 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sayren/mcp",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "bin": {
     "sayren-mcp": "./dist/index.mjs"
@@ -13,7 +13,7 @@
     "@modelcontextprotocol/sdk": "^1.22.0",
     "zod": "^4.6.5",
     "@sayren/store-sdk": "^0.3.0",
-    "@sayren/storefront-sdk": "^0.2.1"
+    "@sayren/storefront-sdk": "^0.3.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.14",

package/template/.template-meta.json

@@ -8,7 +8,7 @@
   },
   "versions": {
     "@sayren/store-sdk": "0.3.0",
-    "@sayren/storefront-sdk": "0.2.1",
+    "@sayren/storefront-sdk": "0.3.0",
     "@sayren/ui": "0.1.0"
   }
 }

package/template/README.md

@@ -26,7 +26,9 @@ pnpm dev
 `app/lib/analytics.ts`가 브라우저에서 방문 분석을 시작한다. 페이지뷰·체류는 자동으로 세고, 상품 조회·목록 노출·검색은
 화면에서 `useTrack`으로 남긴다. 장바구니·결제·구매는 `app/lib/api.server.ts`가 방문자 쿠키를 API 요청 헤더에 실어
 서버가 기록한다. localhost에서는 보내지 않는다. 개발 중에 확인하려면 `SAYREN_ANALYTICS_DEBUG=1`을 준다.
-쿠키 동의 배너를 붙인다면 `consent`를 `"pending"`으로 바꾸고 배너에서 `setConsent`를 부른다.
+동의 기본값은 `granted`(바로 수집)다. 개인정보를 저장하지 않는 1st-party 쿠키라 국내 쇼핑몰 기준으로 정했다.
+EU 등 분석 쿠키에 사전 동의가 필요한 지역의 구매자를 받는다면 `app/lib/analytics.ts`의 `consent`를 `"pending"`으로 바꾸고,
+쿠키 동의 배너에서 `setConsent("granted" | "denied")`를 부른다. 동의 전에는 쿠키를 만들지 않고 이벤트를 모아 두었다가 동의하면 보낸다.
 
 ## 확장 지점
 

package/template/app/lib/api.server.ts

@@ -1,4 +1,5 @@
 import { analyticsIdsFromCookie, createStorefrontClient } from "@sayren/storefront-sdk";
+import { createStorefrontAuth } from "@sayren/storefront-sdk/auth";
 import { API_BASE_URL, resolveStoreCode } from "./config.server";
 
 /**
@@ -35,3 +36,11 @@ export function apiFor(
     },
   });
 }
+
+/**
+ * 구매자 인증 — 로그인·가입·비회원 세션·토큰 갱신. 화면은 이 앱이 그리고 계정은 sayren이 보관한다.
+ * 결과 토큰은 `session.server.ts`가 HttpOnly 쿠키에 둔다.
+ */
+export function authFor(request: Request) {
+  return createStorefrontAuth({ baseUrl: API_BASE_URL, storeCode: resolveStoreCode(request) });
+}

package/template/app/lib/safe-redirect.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { safeRedirect } from "./safe-redirect";
+
+describe("safeRedirect", () => {
+  it("같은 사이트 경로는 그대로 둔다", () => {
+    expect(safeRedirect("/cart")).toBe("/cart");
+    expect(safeRedirect("/orders/ord_1?tab=items")).toBe("/orders/ord_1?tab=items");
+  });
+
+  it("외부로 나가는 주소와 빈 값은 기본 경로로 바꾼다", () => {
+    for (const value of [
+      null,
+      "",
+      "https://evil.com",
+      "//evil.com",
+      "/\\evil.com",
+      "/\t/evil.com",
+      "/\n/evil.com",
+      "cart",
+    ]) {
+      expect(safeRedirect(value)).toBe("/orders");
+    }
+  });
+});

package/template/app/lib/safe-redirect.ts

@@ -0,0 +1,13 @@
+/**
+ * 로그인 뒤 이동할 곳 — 같은 사이트 경로만 받는다(외부 주소로 보내는 열린 리다이렉트 방지).
+ * `//evil.com`과 `/\evil.com`은 브라우저가 외부 주소로 해석하므로 두 번째 글자가 `/`·`\`면 거부하고,
+ * 제어 문자(탭·개행은 URL 파싱에서 지워진다)도 거부한다.
+ */
+export function safeRedirect(value: FormDataEntryValue | null): string {
+  const fallback = "/orders";
+  if (typeof value !== "string" || !value.startsWith("/")) return fallback;
+  if (value[1] === "/" || value[1] === "\\") return fallback;
+  // biome-ignore lint/suspicious/noControlCharactersInRegex: 제어 문자를 거부하려고 찾는다
+  if (/[\u0000-\u001f\u007f]/.test(value)) return fallback;
+  return value;
+}

package/template/app/lib/session.server.ts

@@ -1,24 +1,99 @@
-import { createCookie } from "react-router";
+import { ApiError, type TokenPair } from "@sayren/storefront-sdk/auth";
+import {
+  createContext,
+  createCookie,
+  type MiddlewareFunction,
+  type RouterContextProvider,
+} from "react-router";
+import { authFor } from "./api.server";
 
 /**
- * 구매자 세션 — 액세스 토큰을 HttpOnly 쿠키에 둔다. 브라우저 JS가 토큰을 읽지 못하고,
- * SSR loader가 그대로 쓸 수 있다.
+ * 구매자 세션 — 로그인 토큰 쌍을 HttpOnly 쿠키 하나에 둔다. 브라우저 JS는 토큰을 읽지 못하고,
+ * 서버(loader·action)만 쓴다.
  *
- * 확장 지점: 리프레시 토큰 회전을 쓰려면 여기에 refresh 쿠키를 더한다.
+ * 액세스 토큰은 30분이라 `buyerSession` 미들웨어가 요청마다 만료를 보고, 곧 끝나면 리프레시 토큰으로
+ * 새 쌍을 받아 쿠키를 갈아 끼운다. 리프레시 토큰이 거부되면(401: 14일 만료·폐기) 쿠키를 지워 로그아웃 상태가 된다.
+ * 네트워크 오류·5xx 같은 일시 장애에는 쿠키를 지우지 않는다 — 다음 요청에서 다시 갱신한다.
  */
 export const sessionCookie = createCookie("sayren_member", {
   httpOnly: true,
   sameSite: "lax",
   path: "/",
   secure: process.env.NODE_ENV === "production",
-  maxAge: 60 * 60 * 24 * 7,
+  maxAge: 60 * 60 * 24 * 14,
 });
 
-export async function readToken(request: Request): Promise<string | null> {
-  const value = await sessionCookie.parse(request.headers.get("cookie"));
-  return typeof value === "string" ? value : null;
+interface StoredSession {
+  accessToken: string;
+  refreshToken: string;
+  /** 액세스 토큰 만료 시각(epoch ms) */
+  expiresAt: number;
 }
 
-export function tokenHeaders(accessToken: string | null): Promise<string> {
-  return sessionCookie.serialize(accessToken ?? "", accessToken ? undefined : { maxAge: 0 });
+/** 만료 이만큼 전에 미리 갱신한다 — 요청 도중 만료로 401이 나지 않게 */
+const REFRESH_LEEWAY_MS = 60_000;
+
+const accessTokenContext = createContext<string | null>(null);
+
+function toStored(tokens: TokenPair): StoredSession {
+  return {
+    accessToken: tokens.accessToken,
+    refreshToken: tokens.refreshToken,
+    expiresAt: Date.now() + tokens.expiresIn * 1000,
+  };
+}
+
+async function parseSession(request: Request): Promise<StoredSession | null> {
+  const value: unknown = await sessionCookie.parse(request.headers.get("cookie"));
+  if (!value || typeof value !== "object") return null;
+  const session = value as Partial<StoredSession>;
+  if (typeof session.accessToken !== "string" || typeof session.refreshToken !== "string")
+    return null;
+  return {
+    accessToken: session.accessToken,
+    refreshToken: session.refreshToken,
+    expiresAt: Number(session.expiresAt),
+  };
+}
+
+/** 루트 미들웨어 — 이 요청의 액세스 토큰을 정하고, 갱신했으면 응답에 새 쿠키를 싣는다 */
+export const buyerSession: MiddlewareFunction<Response> = async ({ request, context }, next) => {
+  const stored = await parseSession(request);
+  let setCookie: string | null = null;
+  let accessToken = stored?.accessToken ?? null;
+
+  // 만료 시각을 모르면(형식이 다른 쿠키) 만료로 본다
+  if (stored && !(stored.expiresAt - REFRESH_LEEWAY_MS > Date.now())) {
+    try {
+      const refreshed = toStored(await authFor(request).refresh(stored.refreshToken));
+      accessToken = refreshed.accessToken;
+      setCookie = await sessionCookie.serialize(refreshed);
+    } catch (error) {
+      // 일시 장애면 이번 요청은 기존 토큰으로 진행한다(만료 전 여유 1분 안이면 아직 유효하다)
+      if (error instanceof ApiError && error.status === 401) {
+        accessToken = null;
+        setCookie = await signOutCookie();
+      }
+    }
+  }
+
+  context.set(accessTokenContext, accessToken);
+  const response = await next();
+  if (setCookie) response.headers.append("Set-Cookie", setCookie);
+  return response;
+};
+
+/** 이 요청의 구매자 액세스 토큰 — 로그인하지 않았으면 null */
+export function readToken(context: Readonly<RouterContextProvider>): string | null {
+  return context.get(accessTokenContext);
+}
+
+/** 로그인·가입 직후 응답에 실을 쿠키 */
+export function signInCookie(tokens: TokenPair): Promise<string> {
+  return sessionCookie.serialize(toStored(tokens));
+}
+
+/** 로그아웃 — 쿠키를 지운다 */
+export function signOutCookie(): Promise<string> {
+  return sessionCookie.serialize("", { maxAge: 0 });
 }

package/template/app/root.tsx

@@ -11,6 +11,7 @@ import type { Route } from "./+types/root";
 import { SiteHeader } from "./components/site-header";
 import { type AnalyticsConfig, startAnalytics } from "./lib/analytics";
 import { ANALYTICS_DEBUG, API_BASE_URL, resolveStoreCode } from "./lib/config.server";
+import { buyerSession } from "./lib/session.server";
 import "./app.css";
 
 export function Layout({ children }: { children: React.ReactNode }) {
@@ -32,6 +33,9 @@ export function Layout({ children }: { children: React.ReactNode }) {
   );
 }
 
+/** 구매자 세션 — 모든 요청에서 액세스 토큰을 정하고 만료가 가까우면 갱신한다 */
+export const middleware: Route.MiddlewareFunction[] = [buyerSession];
+
 export function loader({ request }: Route.LoaderArgs) {
   const analytics: AnalyticsConfig = {
     apiBaseUrl: API_BASE_URL,

package/template/app/routes/cart.tsx

@@ -9,8 +9,8 @@ export function meta() {
   return [{ title: "장바구니" }];
 }
 
-export async function loader({ request }: Route.LoaderArgs) {
-  const accessToken = await readToken(request);
+export async function loader({ request, context }: Route.LoaderArgs) {
+  const accessToken = readToken(context);
   const cartToken = await readCartToken(request);
   // 비회원이 아직 장바구니를 만든 적이 없으면 서버에 물어볼 것이 없다
   if (!accessToken && !cartToken) {
@@ -20,10 +20,10 @@ export async function loader({ request }: Route.LoaderArgs) {
   return { cart: await api.cart.get() };
 }
 
-export async function action({ request }: Route.ActionArgs) {
+export async function action({ request, context }: Route.ActionArgs) {
   const form = await request.formData();
   const intent = String(form.get("intent") ?? "");
-  const accessToken = await readToken(request);
+  const accessToken = readToken(context);
   const cartToken = await readCartToken(request);
   let issued: string | null = null;
   const api = apiFor(request, {

package/template/app/routes/checkout-complete.tsx

@@ -8,12 +8,12 @@ export function meta() {
   return [{ title: "주문 완료" }];
 }
 
-export async function loader({ request }: Route.LoaderArgs) {
+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 accessToken = await readToken(request);
+  const accessToken = readToken(context);
   if (!accessToken) return { orderId, order: null };
 
   const api = apiFor(request, { accessToken });

package/template/app/routes/checkout.tsx

@@ -14,11 +14,11 @@ export function meta() {
   return [{ title: "주문서" }];
 }
 
-export async function loader({ request }: Route.LoaderArgs) {
+export async function loader({ request, context }: Route.LoaderArgs) {
   const intent = checkoutIntentFrom(new URL(request.url).searchParams);
   if (!intent) throw redirect("/cart");
 
-  const accessToken = await readToken(request);
+  const accessToken = readToken(context);
   const cartToken = await readCartToken(request);
   const api = apiFor(request, { accessToken, cartToken });
   // 주문서 세션은 진입할 때마다 새로 만든다 — 조회 API가 없고, 가격·재고를 매번 다시 계산한다
@@ -34,10 +34,10 @@ export async function loader({ request }: Route.LoaderArgs) {
 }
 
 /** 결제 요청은 서버에서 한다 — 토큰이 브라우저 JS에 노출되지 않는다 */
-export async function action({ request }: Route.ActionArgs) {
+export async function action({ request, context }: Route.ActionArgs) {
   const form = await request.formData();
   const checkoutId = String(form.get("checkoutId") ?? "");
-  const accessToken = await readToken(request);
+  const accessToken = readToken(context);
   const cartToken = await readCartToken(request);
   const api = apiFor(request, { accessToken, cartToken });
 

package/template/app/routes/login.tsx

@@ -1,26 +1,47 @@
+import { ApiError } from "@sayren/storefront-sdk";
 import { Form, redirect } from "react-router";
-import { apiFor } from "../lib/api.server";
-import { sessionCookie } from "../lib/session.server";
+import { authFor } from "../lib/api.server";
+import { cartCookie, readCartToken } from "../lib/cart-session.server";
+import { safeRedirect } from "../lib/safe-redirect";
+import { signInCookie } from "../lib/session.server";
 import type { Route } from "./+types/login";
 
 export function meta() {
   return [{ title: "로그인" }];
 }
 
+/**
+ * 로그인 — 화면은 이 앱이 그리고, 확인은 sayren이 한다. 비회원으로 담아 둔 장바구니 토큰을 함께 보내면
+ * 회원 장바구니로 합쳐지고 그 토큰은 닫힌다. 그래서 장바구니 쿠키도 지운다.
+ */
 export async function action({ request }: Route.ActionArgs) {
   const form = await request.formData();
-  const api = apiFor(request);
+  const cartToken = await readCartToken(request);
   try {
-    const session = await api.auth.login({
+    const tokens = await authFor(request).session({
       email: String(form.get("email") ?? ""),
       password: String(form.get("password") ?? ""),
+      cartToken: cartToken ?? undefined,
     });
-    return redirect(String(form.get("redirectTo") ?? "/orders"), {
-      headers: { "Set-Cookie": await sessionCookie.serialize(session.accessToken) },
-    });
-  } catch {
-    return { error: "이메일이나 비밀번호가 맞지 않아요" };
+    const headers = new Headers();
+    headers.append("Set-Cookie", await signInCookie(tokens));
+    if (cartToken) headers.append("Set-Cookie", await cartCookie.serialize("", { maxAge: 0 }));
+    const redirectTo =
+      form.get("redirectTo") ?? new URL(request.url).searchParams.get("redirectTo");
+    return redirect(safeRedirect(redirectTo), { headers });
+  } catch (error) {
+    return { error: loginErrorMessage(error) };
+  }
+}
+
+function loginErrorMessage(error: unknown): string {
+  if (error instanceof ApiError) {
+    if (error.code === "INVALID_CREDENTIALS") return "이메일이나 비밀번호가 맞지 않아요";
+    if (error.code === "ACCOUNT_LOCKED")
+      return "로그인을 여러 번 실패해 잠시 잠겼어요. 10분 뒤에 다시 시도해 주세요";
+    if (error.status === 400) return "이메일과 비밀번호를 확인해 주세요";
   }
+  return "로그인하지 못했어요. 잠시 후 다시 시도해 주세요";
 }
 
 export default function Login({ actionData }: Route.ComponentProps) {

package/template/app/routes/order-detail.tsx

@@ -8,8 +8,8 @@ export function meta({ params }: Route.MetaArgs) {
   return [{ title: `주문 ${params.orderId}` }];
 }
 
-export async function loader({ request, params }: Route.LoaderArgs) {
-  const accessToken = await readToken(request);
+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) };

package/template/app/routes/orders.tsx

@@ -8,8 +8,8 @@ export function meta() {
   return [{ title: "주문 내역" }];
 }
 
-export async function loader({ request }: Route.LoaderArgs) {
-  const accessToken = await readToken(request);
+export async function loader({ request, context }: Route.LoaderArgs) {
+  const accessToken = readToken(context);
   if (!accessToken) throw redirect("/login?redirectTo=/orders");
   const api = apiFor(request, { accessToken });
   return { orders: await api.myOrders.list({ size: 20 }) };

package/template/app/routes/product-detail.tsx

@@ -22,12 +22,12 @@ export async function loader({ request, params }: Route.LoaderArgs) {
  * 장바구니 담기·바로구매를 서버에서 처리한다. 비회원 장바구니 토큰은 서버가 새로 발급할 수 있어
  * 응답 쿠키에 다시 심는다.
  */
-export async function action({ request, params }: Route.ActionArgs) {
+export async function action({ request, params, context }: Route.ActionArgs) {
   const form = await request.formData();
   const optionId = String(form.get("optionId") ?? "") || undefined;
   const quantity = Number(form.get("quantity") ?? 1);
 
-  const accessToken = await readToken(request);
+  const accessToken = readToken(context);
   let cartToken = await readCartToken(request);
   let issued: string | null = null;
   const api = apiFor(request, {