@sayren/mcp 0.1.7 → 0.1.9

package/template/tsconfig.json

@@ -8,9 +8,8 @@
     "strict": true,
     "noEmit": true,
     "skipLibCheck": true,
-    "types": ["node", "vite/client"],
-    "rootDirs": [".", "./.react-router/types"],
-    "paths": { "~/*": ["./app/*"] }
+    "types": ["node", "vite/client"]
   },
-  "include": ["**/*.ts", "**/*.tsx", ".react-router/types/**/*"]
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "dist", ".output", ".tanstack"]
 }

package/template/vite.config.ts

@@ -1,9 +1,10 @@
-import { reactRouter } from "@react-router/dev/vite";
 import tailwindcss from "@tailwindcss/vite";
+import { tanstackStart } from "@tanstack/react-start/plugin/vite";
+import viteReact from "@vitejs/plugin-react";
 import { defineConfig, loadEnv } from "vite";
 
 export default defineConfig(({ mode }) => {
   // .env의 SAYREN_*를 서버 코드가 읽는 process.env에 싣는다. 셸에서 준 값이 우선한다
   Object.assign(process.env, loadEnv(mode, process.cwd(), "SAYREN_"), { ...process.env });
-  return { plugins: [tailwindcss(), reactRouter()] };
+  return { plugins: [tailwindcss(), tanstackStart(), viteReact()] };
 });

package/template/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
-  test: { environment: "node", include: ["app/**/*.test.ts"] },
+  test: { environment: "node", include: ["src/**/*.test.ts"] },
 });

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

@@ -1,18 +0,0 @@
-import { createCookie } from "react-router";
-
-/**
- * 비회원 장바구니 토큰 — 서버가 `X-Cart-Token` 헤더로 발급한다. 회원은 액세스 토큰으로
- * 장바구니를 찾지만 비회원은 이 토큰이 유일한 열쇠라, 잃어버리면 담은 상품이 사라진다.
- */
-export const cartCookie = createCookie("sayren_cart", {
-  httpOnly: true,
-  sameSite: "lax",
-  path: "/",
-  secure: process.env.NODE_ENV === "production",
-  maxAge: 60 * 60 * 24 * 30,
-});
-
-export async function readCartToken(request: Request): Promise<string | null> {
-  const value = await cartCookie.parse(request.headers.get("cookie"));
-  return typeof value === "string" && value ? value : null;
-}

package/template/app/lib/format.ts

@@ -1,10 +0,0 @@
-const KRW = new Intl.NumberFormat("ko-KR");
-
-export function formatPrice(amount: number): string {
-  return `${KRW.format(amount)}원`;
-}
-
-export function formatDateTime(value: string | null | undefined): string {
-  if (!value) return "-";
-  return new Date(value).toLocaleString("ko-KR", { dateStyle: "medium", timeStyle: "short" });
-}

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

@@ -1,99 +0,0 @@
-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는 토큰을 읽지 못하고,
- * 서버(loader·action)만 쓴다.
- *
- * 액세스 토큰은 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 * 14,
-});
-
-interface StoredSession {
-  accessToken: string;
-  refreshToken: string;
-  /** 액세스 토큰 만료 시각(epoch ms) */
-  expiresAt: number;
-}
-
-/** 만료 이만큼 전에 미리 갱신한다 — 요청 도중 만료로 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/lib/social-login.server.ts

@@ -1,38 +0,0 @@
-import { createCookie } from "react-router";
-
-/**
- * 소셜 로그인 왕복 상태 — 공급자로 보내기 전에 만든 state·PKCE verifier·돌아갈 곳을 HttpOnly 쿠키에 잠깐 둔다.
- * 돌아오면 state를 비교하고 verifier로 1회용 code를 토큰으로 바꾼 뒤 지운다. 10분이 지나면 사라진다.
- */
-export const socialLoginCookie = createCookie("sayren_social", {
-  httpOnly: true,
-  sameSite: "lax",
-  path: "/",
-  secure: process.env.NODE_ENV === "production",
-  maxAge: 60 * 10,
-});
-
-export interface SocialLoginState {
-  state: string;
-  codeVerifier: string;
-  redirectTo: string;
-}
-
-export async function readSocialLogin(request: Request): Promise<SocialLoginState | null> {
-  const value: unknown = await socialLoginCookie.parse(request.headers.get("cookie"));
-  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 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/app/root.tsx

@@ -1,78 +0,0 @@
-import { useEffect } from "react";
-import {
-  isRouteErrorResponse,
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-} from "react-router";
-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 }) {
-  return (
-    <html lang="ko">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <Meta />
-        <Links />
-      </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>
-        <ScrollRestoration />
-        <Scripts />
-      </body>
-    </html>
-  );
-}
-
-/** 구매자 세션 — 모든 요청에서 액세스 토큰을 정하고 만료가 가까우면 갱신한다 */
-export const middleware: Route.MiddlewareFunction[] = [buyerSession];
-
-export function loader({ request }: Route.LoaderArgs) {
-  const analytics: AnalyticsConfig = {
-    apiBaseUrl: API_BASE_URL,
-    storeCode: resolveStoreCode(request),
-    debug: ANALYTICS_DEBUG,
-  };
-  return { analytics };
-}
-
-export default function App({ loaderData }: Route.ComponentProps) {
-  const { analytics } = loaderData;
-  // 방문 분석은 브라우저에서 한 번 시작한다. 이후 페이지뷰는 SDK가 History API 이동으로 센다
-  useEffect(() => {
-    startAnalytics(analytics);
-  }, [analytics]);
-  return <Outlet />;
-}
-
-export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
-  const title = isRouteErrorResponse(error)
-    ? error.status === 404
-      ? "찾을 수 없어요"
-      : "문제가 생겼어요"
-    : "문제가 생겼어요";
-  const detail = isRouteErrorResponse(error)
-    ? error.statusText || String(error.data ?? "")
-    : error instanceof Error
-      ? error.message
-      : "";
-
-  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}
-      <a className="inline-block text-point underline" href="/">
-        홈으로
-      </a>
-    </div>
-  );
-}

package/template/app/routes/auth-callback.tsx

@@ -1,44 +0,0 @@
-import { ApiError } from "@sayren/storefront-sdk";
-import { IdpCallbackError } from "@sayren/storefront-sdk/auth";
-import { redirect } from "react-router";
-import { authFor } from "../lib/api.server";
-import { cartCookie, readCartToken } from "../lib/cart-session.server";
-import { signInCookie } from "../lib/session.server";
-import { readSocialLogin, socialLoginCookie } from "../lib/social-login.server";
-import type { Route } from "./+types/auth-callback";
-
-/**
- * 소셜 로그인에서 돌아오는 곳 — 쿠키에 둔 state·verifier로 1회용 code를 구매자 토큰으로 바꾸고 세션 쿠키를 심는다.
- * 비회원 장바구니가 있으면 합친다. 실패하면 로그인 화면으로 이유를 들고 돌아간다.
- */
-export async function loader({ request }: Route.LoaderArgs) {
-  const url = new URL(request.url);
-  const stored = await readSocialLogin(request);
-  const clearSocial = await socialLoginCookie.serialize("", { maxAge: 0 });
-  const fail = (reason: string) =>
-    redirect(`/login?error=${encodeURIComponent(reason)}`, {
-      headers: { "Set-Cookie": clearSocial },
-    });
-  if (!stored) return fail("state_mismatch");
-
-  const cartToken = await readCartToken(request);
-  try {
-    const tokens = await authFor(request).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,
-    });
-    const headers = new Headers();
-    headers.append("Set-Cookie", await signInCookie(tokens));
-    headers.append("Set-Cookie", clearSocial);
-    if (cartToken) headers.append("Set-Cookie", await cartCookie.serialize("", { maxAge: 0 }));
-    return redirect(stored.redirectTo, { headers });
-  } catch (error) {
-    if (error instanceof IdpCallbackError) return fail(error.reason);
-    if (error instanceof ApiError) return fail("provider_error");
-    throw error;
-  }
-}

package/template/app/routes/login.tsx

@@ -1,152 +0,0 @@
-import { ApiError, type SocialProvider } from "@sayren/storefront-sdk";
-import { Form, redirect, useSearchParams } from "react-router";
-import { apiFor, 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 { SOCIAL_BUTTONS, socialLoginCookie } from "../lib/social-login.server";
-import type { Route } from "./+types/login";
-
-export function meta() {
-  return [{ title: "로그인" }];
-}
-
-/** 켜진 로그인 방법 — 셀러가 콘솔 설정 › 로그인에서 켠 것만 온다 */
-export async function loader({ request }: Route.LoaderArgs) {
-  const store = await apiFor(request).store.get();
-  return { loginMethods: store.loginMethods };
-}
-
-/**
- * 소셜 로그인 시작 — state·PKCE verifier를 쿠키에 두고 공급자 로그인 화면으로 보낸다. 돌아오는 곳은 `/auth/callback`이고,
- * 이 앱의 주소가 콘솔의 스토어프런트 도메인에 등록돼 있어야 한다.
- */
-async function startSocial(request: Request, provider: SocialProvider, redirectTo: string) {
-  const origin = new URL(request.url).origin;
-  const started = await authFor(request).idp(provider, { redirectUri: `${origin}/auth/callback` });
-  return redirect(started.url, {
-    headers: {
-      "Set-Cookie": await socialLoginCookie.serialize({
-        state: started.state,
-        codeVerifier: started.codeVerifier,
-        redirectTo,
-      }),
-    },
-  });
-}
-
-/**
- * 로그인 — 화면은 이 앱이 그리고, 확인은 sayren이 한다. 비회원으로 담아 둔 장바구니 토큰을 함께 보내면
- * 회원 장바구니로 합쳐지고 그 토큰은 닫힌다. 그래서 장바구니 쿠키도 지운다.
- */
-export async function action({ request }: Route.ActionArgs) {
-  const form = await request.formData();
-  const redirectTo = safeRedirect(
-    form.get("redirectTo") ?? new URL(request.url).searchParams.get("redirectTo"),
-  );
-  const social = form.get("social");
-  if (social === "kakao" || social === "naver" || social === "google") {
-    try {
-      return await startSocial(request, social, redirectTo);
-    } catch (error) {
-      return { error: loginErrorMessage(error) };
-    }
-  }
-  const cartToken = await readCartToken(request);
-  try {
-    const tokens = await authFor(request).session({
-      email: String(form.get("email") ?? ""),
-      password: String(form.get("password") ?? ""),
-      cartToken: cartToken ?? undefined,
-    });
-    const headers = new Headers();
-    headers.append("Set-Cookie", await signInCookie(tokens));
-    if (cartToken) headers.append("Set-Cookie", await cartCookie.serialize("", { maxAge: 0 }));
-    return redirect(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 === "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 default function Login({ loaderData, actionData }: Route.ComponentProps) {
-  const [params] = useSearchParams();
-  const callbackError = params.get("error");
-  const social = loaderData.loginMethods.filter(
-    (method): method is SocialProvider => method !== "password",
-  );
-  const password = loaderData.loginMethods.includes("password");
-  const error =
-    actionData?.error ??
-    (callbackError
-      ? (CALLBACK_ERRORS[callbackError] ?? "로그인하지 못했어요. 다시 시도해 주세요")
-      : null);
-
-  return (
-    <div className="mx-auto max-w-sm space-y-5 py-10">
-      <h1 className="font-bold text-2xl">로그인</h1>
-      {social.length ? (
-        <Form method="post" className="space-y-2">
-          {social.map((provider) => (
-            <button
-              key={provider}
-              type="submit"
-              name="social"
-              value={provider}
-              className={`h-12 w-full rounded-md font-semibold ${SOCIAL_BUTTONS[provider].className}`}
-            >
-              {SOCIAL_BUTTONS[provider].label}
-            </button>
-          ))}
-        </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 method="post" 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"
-          />
-          <button type="submit" className="h-12 w-full rounded-md bg-ink font-semibold text-white">
-            로그인
-          </button>
-        </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.ts

@@ -1,18 +0,0 @@
-import { index, type RouteConfig, route } from "@react-router/dev/routes";
-
-/**
- * 라우트 구성 — 구매 흐름 전체를 덮는다.
- * 확장 지점: 기획전·브랜드관 같은 화면은 여기에 route()를 더하면 된다.
- */
-export default [
-  index("routes/home.tsx"),
-  route("products", "routes/products.tsx"),
-  route("products/:productId", "routes/product-detail.tsx"),
-  route("cart", "routes/cart.tsx"),
-  route("checkout", "routes/checkout.tsx"),
-  route("checkout/complete", "routes/checkout-complete.tsx"),
-  route("login", "routes/login.tsx"),
-  route("auth/callback", "routes/auth-callback.tsx"),
-  route("orders", "routes/orders.tsx"),
-  route("orders/:orderId", "routes/order-detail.tsx"),
-] satisfies RouteConfig;

package/template/react-router.config.ts

@@ -1,6 +0,0 @@
-import type { Config } from "@react-router/dev/config";
-
-export default {
-  // SSR을 끄지 않는다 — 상품 데이터를 서버에서 먼저 받아야 검색 노출과 첫 페인트가 산다.
-  ssr: true,
-} satisfies Config;