@sayren/mcp 0.1.7 → 0.1.9

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

@@ -0,0 +1,121 @@
+import { ApiError, type TokenPair } from "@sayren/storefront-sdk/auth";
+import { getGlobalStartContext } from "@tanstack/react-start";
+import { deleteCookie, getCookie, setCookie } from "@tanstack/react-start/server";
+import { authFor } from "./api.server";
+
+/**
+ * 구매자 세션 — 로그인 토큰 쌍을 HttpOnly 쿠키 하나에 둔다. 브라우저 JS는 토큰을 읽지 못하고,
+ * 서버(서버 함수·서버 라우트)만 쓴다.
+ *
+ * 액세스 토큰은 30분이라 `refreshBuyerSession`(전역 요청 미들웨어, `start.ts`)이 요청마다 만료를 보고,
+ * 곧 끝나면 리프레시 토큰으로 새 쌍을 받아 쿠키를 갈아 끼운다. 리프레시 토큰이 거부되면(401: 14일 만료·폐기)
+ * 쿠키를 지워 로그아웃 상태가 된다. 네트워크 오류·5xx 같은 일시 장애에는 쿠키를 지우지 않는다 — 다음 요청에서
+ * 다시 갱신한다.
+ */
+const SESSION_COOKIE = "sayren_member";
+
+interface StoredSession {
+  accessToken: string;
+  refreshToken: string;
+  /** 액세스 토큰 만료 시각(epoch ms) */
+  expiresAt: number;
+}
+
+/** 만료 이만큼 전에 미리 갱신한다 — 요청 도중 만료로 401이 나지 않게 */
+const REFRESH_LEEWAY_MS = 60_000;
+
+/**
+ * 같은 리프레시 토큰의 갱신을 한 번으로 모은다. 화면 이동 한 번에 서버 함수 요청이 여러 개 동시에 오는데,
+ * 리프레시 토큰은 한 번 쓰면 폐기되므로 각자 갱신하면 늦은 쪽이 401을 받아 로그아웃된다.
+ * 결과는 그 리프레시 토큰을 들고 온 요청에만 돌려준다(다른 구매자와 섞이지 않는다).
+ */
+const refreshing = new Map<string, Promise<TokenPair>>();
+const REFRESH_SHARE_MS = 10_000;
+
+function refreshOnce(refreshToken: string): Promise<TokenPair> {
+  const inFlight = refreshing.get(refreshToken);
+  if (inFlight) return inFlight;
+  const next = authFor().refresh(refreshToken);
+  refreshing.set(refreshToken, next);
+  const forget = () => {
+    setTimeout(() => refreshing.delete(refreshToken), REFRESH_SHARE_MS);
+  };
+  next.then(forget, forget);
+  return next;
+}
+
+function toStored(tokens: TokenPair): StoredSession {
+  return {
+    accessToken: tokens.accessToken,
+    refreshToken: tokens.refreshToken,
+    expiresAt: Date.now() + tokens.expiresIn * 1000,
+  };
+}
+
+function readSession(): StoredSession | null {
+  const raw = getCookie(SESSION_COOKIE);
+  if (!raw) return null;
+  let value: unknown;
+  try {
+    value = JSON.parse(raw);
+  } catch {
+    return null;
+  }
+  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),
+  };
+}
+
+function writeSession(session: StoredSession) {
+  setCookie(SESSION_COOKIE, JSON.stringify(session), {
+    httpOnly: true,
+    sameSite: "lax",
+    path: "/",
+    secure: process.env.NODE_ENV === "production",
+    maxAge: 60 * 60 * 24 * 14,
+  });
+}
+
+/**
+ * 이 요청의 액세스 토큰을 정한다. 만료가 가까우면 갱신하고 응답에 새 쿠키를 싣는다.
+ * 전역 요청 미들웨어가 요청마다 한 번 부른다.
+ */
+export async function refreshBuyerSession(): Promise<string | null> {
+  const stored = readSession();
+  if (!stored) return null;
+  // 만료 시각을 모르면(형식이 다른 쿠키) 만료로 본다
+  if (stored.expiresAt - REFRESH_LEEWAY_MS > Date.now()) return stored.accessToken;
+  try {
+    const refreshed = toStored(await refreshOnce(stored.refreshToken));
+    writeSession(refreshed);
+    return refreshed.accessToken;
+  } catch (error) {
+    if (error instanceof ApiError && error.status === 401) {
+      signOut();
+      return null;
+    }
+    // 일시 장애면 이번 요청은 기존 토큰으로 진행한다(만료 전 여유 1분 안이면 아직 유효하다)
+    return stored.accessToken;
+  }
+}
+
+/** 이 요청의 구매자 액세스 토큰 — 로그인하지 않았으면 null */
+export function readToken(): string | null {
+  return getGlobalStartContext()?.accessToken ?? null;
+}
+
+/** 로그인·가입 직후 응답에 쿠키를 싣는다 */
+export function signIn(tokens: TokenPair) {
+  writeSession(toStored(tokens));
+}
+
+/** 로그아웃 — 쿠키를 지운다 */
+export function signOut() {
+  deleteCookie(SESSION_COOKIE, { path: "/" });
+}

package/template/src/lib/social-buttons.ts

@@ -0,0 +1,6 @@
+/** 공급자 표시 — 버튼 문구·색. 로고는 각 사 가이드의 공식 버튼 자산으로 바꿔 쓴다 */
+export const SOCIAL_BUTTONS = {
+  kakao: { label: "카카오로 시작하기", className: "bg-[#FEE500] text-[#191600]" },
+  naver: { label: "네이버로 시작하기", className: "bg-[#03A94D] text-white" },
+  google: { label: "구글로 시작하기", className: "border border-line bg-white text-ink" },
+} as const;

package/template/src/lib/social-login.server.ts

@@ -0,0 +1,46 @@
+import { deleteCookie, getCookie, setCookie } from "@tanstack/react-start/server";
+
+/**
+ * 소셜 로그인 왕복 상태 — 공급자로 보내기 전에 만든 state·PKCE verifier·돌아갈 곳을 HttpOnly 쿠키에 잠깐 둔다.
+ * 돌아오면 state를 비교하고 verifier로 1회용 code를 토큰으로 바꾼 뒤 지운다. 10분이 지나면 사라진다.
+ */
+const SOCIAL_COOKIE = "sayren_social";
+
+export interface SocialLoginState {
+  state: string;
+  codeVerifier: string;
+  redirectTo: string;
+}
+
+export function writeSocialLogin(value: SocialLoginState) {
+  setCookie(SOCIAL_COOKIE, JSON.stringify(value), {
+    httpOnly: true,
+    sameSite: "lax",
+    path: "/",
+    secure: process.env.NODE_ENV === "production",
+    maxAge: 60 * 10,
+  });
+}
+
+export function readSocialLogin(): SocialLoginState | null {
+  const raw = getCookie(SOCIAL_COOKIE);
+  if (!raw) return null;
+  let value: unknown;
+  try {
+    value = JSON.parse(raw);
+  } catch {
+    return null;
+  }
+  if (!value || typeof value !== "object") return null;
+  const stored = value as Partial<SocialLoginState>;
+  if (typeof stored.state !== "string" || typeof stored.codeVerifier !== "string") return null;
+  return {
+    state: stored.state,
+    codeVerifier: stored.codeVerifier,
+    redirectTo: typeof stored.redirectTo === "string" ? stored.redirectTo : "/",
+  };
+}
+
+export function clearSocialLogin() {
+  deleteCookie(SOCIAL_COOKIE, { path: "/" });
+}

package/template/src/routeTree.gen.ts

@@ -0,0 +1,262 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as CartRouteImport } from './routes/cart'
+import { Route as LoginRouteImport } from './routes/login'
+import { Route as AuthCallbackRouteImport } from './routes/auth.callback'
+import { Route as CheckoutIndexRouteImport } from './routes/checkout.index'
+import { Route as CheckoutCompleteRouteImport } from './routes/checkout.complete'
+import { Route as OrdersIndexRouteImport } from './routes/orders.index'
+import { Route as OrdersOrderIdRouteImport } from './routes/orders.$orderId'
+import { Route as ProductsIndexRouteImport } from './routes/products.index'
+import { Route as ProductsProductIdRouteImport } from './routes/products.$productId'
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const CartRoute = CartRouteImport.update({
+  id: '/cart',
+  path: '/cart',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const LoginRoute = LoginRouteImport.update({
+  id: '/login',
+  path: '/login',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const AuthCallbackRoute = AuthCallbackRouteImport.update({
+  id: '/auth/callback',
+  path: '/auth/callback',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const CheckoutIndexRoute = CheckoutIndexRouteImport.update({
+  id: '/checkout/',
+  path: '/checkout/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const CheckoutCompleteRoute = CheckoutCompleteRouteImport.update({
+  id: '/checkout/complete',
+  path: '/checkout/complete',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const OrdersIndexRoute = OrdersIndexRouteImport.update({
+  id: '/orders/',
+  path: '/orders/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const OrdersOrderIdRoute = OrdersOrderIdRouteImport.update({
+  id: '/orders/$orderId',
+  path: '/orders/$orderId',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ProductsIndexRoute = ProductsIndexRouteImport.update({
+  id: '/products/',
+  path: '/products/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ProductsProductIdRoute = ProductsProductIdRouteImport.update({
+  id: '/products/$productId',
+  path: '/products/$productId',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/cart': typeof CartRoute
+  '/login': typeof LoginRoute
+  '/auth/callback': typeof AuthCallbackRoute
+  '/checkout/complete': typeof CheckoutCompleteRoute
+  '/orders/$orderId': typeof OrdersOrderIdRoute
+  '/products/$productId': typeof ProductsProductIdRoute
+  '/checkout/': typeof CheckoutIndexRoute
+  '/orders/': typeof OrdersIndexRoute
+  '/products/': typeof ProductsIndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/cart': typeof CartRoute
+  '/login': typeof LoginRoute
+  '/auth/callback': typeof AuthCallbackRoute
+  '/checkout/complete': typeof CheckoutCompleteRoute
+  '/orders/$orderId': typeof OrdersOrderIdRoute
+  '/products/$productId': typeof ProductsProductIdRoute
+  '/checkout': typeof CheckoutIndexRoute
+  '/orders': typeof OrdersIndexRoute
+  '/products': typeof ProductsIndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/cart': typeof CartRoute
+  '/login': typeof LoginRoute
+  '/auth/callback': typeof AuthCallbackRoute
+  '/checkout/complete': typeof CheckoutCompleteRoute
+  '/orders/$orderId': typeof OrdersOrderIdRoute
+  '/products/$productId': typeof ProductsProductIdRoute
+  '/checkout/': typeof CheckoutIndexRoute
+  '/orders/': typeof OrdersIndexRoute
+  '/products/': typeof ProductsIndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/'
+    | '/cart'
+    | '/login'
+    | '/auth/callback'
+    | '/checkout/complete'
+    | '/orders/$orderId'
+    | '/products/$productId'
+    | '/checkout/'
+    | '/orders/'
+    | '/products/'
+  fileRoutesByTo: FileRoutesByTo
+  to:
+    | '/'
+    | '/cart'
+    | '/login'
+    | '/auth/callback'
+    | '/checkout/complete'
+    | '/orders/$orderId'
+    | '/products/$productId'
+    | '/checkout'
+    | '/orders'
+    | '/products'
+  id:
+    | '__root__'
+    | '/'
+    | '/cart'
+    | '/login'
+    | '/auth/callback'
+    | '/checkout/complete'
+    | '/orders/$orderId'
+    | '/products/$productId'
+    | '/checkout/'
+    | '/orders/'
+    | '/products/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  CartRoute: typeof CartRoute
+  LoginRoute: typeof LoginRoute
+  AuthCallbackRoute: typeof AuthCallbackRoute
+  CheckoutCompleteRoute: typeof CheckoutCompleteRoute
+  OrdersOrderIdRoute: typeof OrdersOrderIdRoute
+  ProductsProductIdRoute: typeof ProductsProductIdRoute
+  CheckoutIndexRoute: typeof CheckoutIndexRoute
+  OrdersIndexRoute: typeof OrdersIndexRoute
+  ProductsIndexRoute: typeof ProductsIndexRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/cart': {
+      id: '/cart'
+      path: '/cart'
+      fullPath: '/cart'
+      preLoaderRoute: typeof CartRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/login': {
+      id: '/login'
+      path: '/login'
+      fullPath: '/login'
+      preLoaderRoute: typeof LoginRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/auth/callback': {
+      id: '/auth/callback'
+      path: '/auth/callback'
+      fullPath: '/auth/callback'
+      preLoaderRoute: typeof AuthCallbackRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/checkout/': {
+      id: '/checkout/'
+      path: '/checkout'
+      fullPath: '/checkout/'
+      preLoaderRoute: typeof CheckoutIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/checkout/complete': {
+      id: '/checkout/complete'
+      path: '/checkout/complete'
+      fullPath: '/checkout/complete'
+      preLoaderRoute: typeof CheckoutCompleteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/orders/': {
+      id: '/orders/'
+      path: '/orders'
+      fullPath: '/orders/'
+      preLoaderRoute: typeof OrdersIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/orders/$orderId': {
+      id: '/orders/$orderId'
+      path: '/orders/$orderId'
+      fullPath: '/orders/$orderId'
+      preLoaderRoute: typeof OrdersOrderIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/products/': {
+      id: '/products/'
+      path: '/products'
+      fullPath: '/products/'
+      preLoaderRoute: typeof ProductsIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/products/$productId': {
+      id: '/products/$productId'
+      path: '/products/$productId'
+      fullPath: '/products/$productId'
+      preLoaderRoute: typeof ProductsProductIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  CartRoute: CartRoute,
+  LoginRoute: LoginRoute,
+  AuthCallbackRoute: AuthCallbackRoute,
+  CheckoutCompleteRoute: CheckoutCompleteRoute,
+  OrdersOrderIdRoute: OrdersOrderIdRoute,
+  ProductsProductIdRoute: ProductsProductIdRoute,
+  CheckoutIndexRoute: CheckoutIndexRoute,
+  OrdersIndexRoute: OrdersIndexRoute,
+  ProductsIndexRoute: ProductsIndexRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { startInstance } from './start.ts'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+    config: Awaited<ReturnType<typeof startInstance.getOptions>>
+  }
+}

package/template/src/router.tsx

@@ -0,0 +1,17 @@
+import { createRouter } from "@tanstack/react-router";
+import { routeTree } from "./routeTree.gen";
+
+export function getRouter() {
+  return createRouter({
+    routeTree,
+    scrollRestoration: true,
+    // 주문서는 들어올 때마다 세션을 만든다. 마우스를 올린 것만으로 만들지 않도록 미리 불러오기를 끈다
+    defaultPreload: false,
+  });
+}
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof getRouter>;
+  }
+}

package/template/src/routes/__root.tsx

@@ -0,0 +1,90 @@
+import {
+  createRootRoute,
+  type ErrorComponentProps,
+  HeadContent,
+  Link,
+  Outlet,
+  Scripts,
+} from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { useEffect } from "react";
+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 appCss from "../styles.css?url";
+
+/** 방문 분석 설정 — 서버 값(`process.env`)이라 서버 함수로 내려준다 */
+const getAnalyticsConfig = createServerFn({ method: "GET" }).handler(
+  (): AnalyticsConfig => ({
+    apiBaseUrl: API_BASE_URL,
+    storeCode: resolveStoreCode(),
+    debug: ANALYTICS_DEBUG,
+  }),
+);
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      { title: "스토어" },
+    ],
+    links: [{ rel: "stylesheet", href: appCss }],
+  }),
+  loader: async () => ({ analytics: await getAnalyticsConfig() }),
+  // 설정은 바뀌지 않는다 — 화면을 옮길 때마다 다시 받지 않는다
+  staleTime: Number.POSITIVE_INFINITY,
+  shellComponent: RootDocument,
+  component: Root,
+  errorComponent: RootError,
+  notFoundComponent: NotFound,
+});
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="ko">
+      <head>
+        <HeadContent />
+      </head>
+      <body className="min-h-screen bg-white text-ink">
+        <SiteHeader />
+        <main className="mx-auto w-full max-w-5xl px-4 py-8">{children}</main>
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+function Root() {
+  const { analytics } = Route.useLoaderData();
+  // 방문 분석은 브라우저에서 한 번 시작한다. 이후 페이지뷰는 SDK가 History API 이동으로 센다
+  useEffect(() => {
+    startAnalytics(analytics);
+  }, [analytics]);
+  return <Outlet />;
+}
+
+function RootError({ error }: ErrorComponentProps) {
+  return (
+    <ErrorView
+      title="문제가 생겼어요"
+      detail={error instanceof Error ? error.message : undefined}
+    />
+  );
+}
+
+function NotFound() {
+  return <ErrorView title="찾을 수 없어요" />;
+}
+
+function ErrorView({ title, detail }: { title: string; detail?: string }) {
+  return (
+    <div className="space-y-3 py-16 text-center">
+      <h1 className="font-bold text-2xl">{title}</h1>
+      {detail ? <p className="text-muted">{detail}</p> : null}
+      <Link className="inline-block text-point underline" to="/">
+        홈으로
+      </Link>
+    </div>
+  );
+}

package/template/src/routes/auth.callback.ts

@@ -0,0 +1,48 @@
+import { ApiError } from "@sayren/storefront-sdk";
+import { IdpCallbackError } from "@sayren/storefront-sdk/auth";
+import { createFileRoute } from "@tanstack/react-router";
+import { authFor } from "../lib/api.server";
+import { clearCartToken, readCartToken } from "../lib/cart-session.server";
+import { signIn } from "../lib/session.server";
+import { clearSocialLogin, readSocialLogin } from "../lib/social-login.server";
+
+/**
+ * 소셜 로그인에서 돌아오는 곳 — 쿠키에 둔 state·verifier로 1회용 code를 구매자 토큰으로 바꾸고 세션 쿠키를 심는다.
+ * 비회원 장바구니가 있으면 합친다. 실패하면 로그인 화면으로 이유를 들고 돌아간다.
+ *
+ * 화면이 없는 서버 라우트다. 공급자가 문서째 보내 오므로 응답은 리다이렉트 하나다.
+ */
+export const Route = createFileRoute("/auth/callback")({
+  server: {
+    handlers: {
+      GET: async ({ request }) => {
+        const url = new URL(request.url);
+        const stored = readSocialLogin();
+        clearSocialLogin();
+        const go = (location: string) =>
+          new Response(null, { status: 302, headers: { Location: location } });
+        const fail = (reason: string) => go(`/login?error=${encodeURIComponent(reason)}`);
+        if (!stored) return fail("state_mismatch");
+
+        const cartToken = readCartToken();
+        try {
+          const tokens = await authFor().idpCallback({
+            code: url.searchParams.get("code"),
+            state: url.searchParams.get("state"),
+            error: url.searchParams.get("error"),
+            expectedState: stored.state,
+            codeVerifier: stored.codeVerifier,
+            cartToken: cartToken ?? undefined,
+          });
+          signIn(tokens);
+          if (cartToken) clearCartToken();
+          return go(stored.redirectTo);
+        } catch (error) {
+          if (error instanceof IdpCallbackError) return fail(error.reason);
+          if (error instanceof ApiError) return fail("provider_error");
+          throw error;
+        }
+      },
+    },
+  },
+});