@sayren/mcp 0.1.0

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

@@ -0,0 +1,19 @@
+import { storeCodeFromHost } from "./config";
+
+/**
+ * 서버 전용 설정 — `.server.ts`라 브라우저 번들에 들어가지 않는다. `process.env`를 여기에만 둔다.
+ * 브라우저에 필요한 값은 loader가 내려준다(`PublicConfig`).
+ */
+export const API_BASE_URL = process.env.SAYREN_API_URL ?? "https://api.sayren.app/storefront/v1";
+
+const FIXED_STORE_CODE = process.env.SAYREN_STORE_CODE ?? "";
+
+/** 요청에서 테넌트를 정한다 — 고정 값이 먼저이고, 없으면 호스트 서브도메인에서 뽑는다 */
+export function resolveStoreCode(request: Request): string {
+  if (FIXED_STORE_CODE) return FIXED_STORE_CODE;
+  const fromHost = storeCodeFromHost(request.headers.get("host"));
+  if (fromHost) return fromHost;
+  throw new Error(
+    "스토어 코드를 알 수 없어요. SAYREN_STORE_CODE 환경변수를 설정하거나 서브도메인으로 서비스해주세요",
+  );
+}

package/template/app/lib/config.test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+import { storeCodeFromHost } from "./config";
+
+describe("스토어 코드 해석", () => {
+  it("서브도메인이 있으면 첫 라벨을 쓴다", () => {
+    expect(storeCodeFromHost("mystore.example.com")).toBe("mystore");
+    expect(storeCodeFromHost("mystore.example.com:443")).toBe("mystore");
+  });
+
+  it("서브도메인이 없거나 로컬·IP면 알 수 없다", () => {
+    expect(storeCodeFromHost("example.com")).toBeNull();
+    expect(storeCodeFromHost("localhost:4010")).toBeNull();
+    expect(storeCodeFromHost("127.0.0.1:4010")).toBeNull();
+    expect(storeCodeFromHost(null)).toBeNull();
+  });
+});

package/template/app/lib/config.ts

@@ -0,0 +1,19 @@
+/**
+ * 브라우저와 서버가 함께 쓰는 값만 둔다. `process.env`는 여기에 두지 않는다 —
+ * 브라우저 번들에 들어가면 `process is not defined`로 화면이 깨진다(서버 값은 `config.server.ts`).
+ */
+
+/** 호스트에서 서브도메인을 뽑는다(`mystore.example.com` → `mystore`) */
+export function storeCodeFromHost(host: string | null | undefined): string | null {
+  if (!host) return null;
+  const hostname = host.split(":")[0] ?? "";
+  if (hostname === "localhost" || /^\d+\.\d+\.\d+\.\d+$/.test(hostname)) return null;
+  const labels = hostname.split(".");
+  return labels.length >= 3 ? (labels[0] ?? null) : null;
+}
+
+/** loader가 브라우저로 내려주는 값 */
+export interface PublicConfig {
+  apiBaseUrl: string;
+  storeCode: string;
+}

package/template/app/lib/format.ts

@@ -0,0 +1,10 @@
+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/payment-popup.ts

@@ -0,0 +1,98 @@
+/**
+ * Hosted Checkout 결제 팝업 — 이 파일은 그대로 두는 편이 좋다. 규칙을 하나라도 어기면
+ * 결제가 조용히 실패한다.
+ *
+ * 1. 팝업은 **클릭 콜스택에서 동기적으로** 연다. API 응답을 기다린 뒤에 열면 브라우저가 막는다.
+ *    그래서 빈 창을 먼저 열고 `navigate`로 결제 주소를 넣는다.
+ * 2. 팝업이 보내는 postMessage는 `event.origin`과 `event.source`를 **모두** 검증한다.
+ * 3. 결과 메시지 없이 창이 닫히면 결제가 끝났는지 알 수 없다. 이때는 실패로 단정하지 말고
+ *    서버에 결제 상태를 물어본다(주문서 화면이 폴링한다).
+ */
+export const PAYMENT_POPUP_NAME = "sayren-checkout";
+const PAYMENT_POPUP_FEATURES = "width=460,height=680";
+const CLOSE_POLL_MS = 500;
+
+export interface PaymentCompletedMessage {
+  type: "payment:completed";
+  paymentId: string;
+  /** 결제는 끝났지만 팝업이 주문번호를 모를 수 있다 — 이때는 주문 내역을 안내한다 */
+  orderId: string | null;
+}
+
+export interface PaymentFailedMessage {
+  type: "payment:failed";
+  paymentId?: string;
+  code?: string;
+  message?: string;
+}
+
+export interface PaymentPopupHandlers {
+  onCompleted: (message: PaymentCompletedMessage) => void;
+  onFailed: (message: PaymentFailedMessage) => void;
+  /** 결과 메시지 없이 닫혔다 — 실패가 아니라 "모른다"는 뜻이다 */
+  onClosed: () => void;
+}
+
+export interface PaymentPopup {
+  /** 클릭 즉시 부른다. 차단되면 null */
+  open: () => Window | null;
+  /** 결제 주소를 받은 뒤 부른다. 팝업이 없거나 닫혔으면 false */
+  navigate: (popupUrl: string) => boolean;
+  close: () => void;
+}
+
+export function createPaymentPopup(handlers: PaymentPopupHandlers): PaymentPopup {
+  let popup: Window | null = null;
+  let listener: ((event: MessageEvent) => void) | null = null;
+  let timer: ReturnType<typeof setInterval> | null = null;
+
+  const stop = () => {
+    if (listener) window.removeEventListener("message", listener);
+    listener = null;
+    if (timer) clearInterval(timer);
+    timer = null;
+  };
+
+  const watch = (origin: string) => {
+    stop();
+    listener = (event: MessageEvent) => {
+      if (event.origin !== origin) return;
+      if (event.source !== popup) return;
+      const data = event.data as PaymentCompletedMessage | PaymentFailedMessage | null;
+      if (!data || typeof data !== "object") return;
+      if (data.type === "payment:completed") {
+        stop();
+        handlers.onCompleted(data);
+      } else if (data.type === "payment:failed") {
+        stop();
+        handlers.onFailed(data);
+      }
+    };
+    window.addEventListener("message", listener);
+
+    timer = setInterval(() => {
+      if (popup?.closed) {
+        stop();
+        handlers.onClosed();
+      }
+    }, CLOSE_POLL_MS);
+  };
+
+  return {
+    open: () => {
+      popup = window.open("", PAYMENT_POPUP_NAME, PAYMENT_POPUP_FEATURES);
+      return popup;
+    },
+    navigate: (popupUrl) => {
+      if (!popup || popup.closed) return false;
+      popup.location.href = popupUrl;
+      watch(new URL(popupUrl).origin);
+      return true;
+    },
+    close: () => {
+      stop();
+      popup?.close();
+      popup = null;
+    },
+  };
+}

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

@@ -0,0 +1,24 @@
+import { createCookie } from "react-router";
+
+/**
+ * 구매자 세션 — 액세스 토큰을 HttpOnly 쿠키에 둔다. 브라우저 JS가 토큰을 읽지 못하고,
+ * SSR loader가 그대로 쓸 수 있다.
+ *
+ * 확장 지점: 리프레시 토큰 회전을 쓰려면 여기에 refresh 쿠키를 더한다.
+ */
+export const sessionCookie = createCookie("sayren_member", {
+  httpOnly: true,
+  sameSite: "lax",
+  path: "/",
+  secure: process.env.NODE_ENV === "production",
+  maxAge: 60 * 60 * 24 * 7,
+});
+
+export async function readToken(request: Request): Promise<string | null> {
+  const value = await sessionCookie.parse(request.headers.get("cookie"));
+  return typeof value === "string" ? value : null;
+}
+
+export function tokenHeaders(accessToken: string | null): Promise<string> {
+  return sessionCookie.serialize(accessToken ?? "", accessToken ? undefined : { maxAge: 0 });
+}

package/template/app/root.tsx

@@ -0,0 +1,57 @@
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "react-router";
+import type { Route } from "./+types/root";
+import { SiteHeader } from "./components/site-header";
+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 default function App() {
+  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/cart.tsx

@@ -0,0 +1,161 @@
+import { Form, Link, redirect } from "react-router";
+import { apiFor } from "../lib/api.server";
+import { cartCookie, readCartToken } from "../lib/cart-session.server";
+import { formatPrice } from "../lib/format";
+import { readToken } from "../lib/session.server";
+import type { Route } from "./+types/cart";
+
+export function meta() {
+  return [{ title: "장바구니" }];
+}
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const accessToken = await readToken(request);
+  const cartToken = await readCartToken(request);
+  // 비회원이 아직 장바구니를 만든 적이 없으면 서버에 물어볼 것이 없다
+  if (!accessToken && !cartToken) {
+    return { cart: { items: [], summary: { productAmount: 0, deliveryFee: 0, totalAmount: 0 } } };
+  }
+  const api = apiFor(request, { accessToken, cartToken });
+  return { cart: await api.cart.get() };
+}
+
+export async function action({ request }: Route.ActionArgs) {
+  const form = await request.formData();
+  const intent = String(form.get("intent") ?? "");
+  const accessToken = await readToken(request);
+  const cartToken = await readCartToken(request);
+  let issued: string | null = null;
+  const api = apiFor(request, {
+    accessToken,
+    cartToken,
+    onCartToken: (token) => {
+      issued = token;
+    },
+  });
+
+  if (intent === "remove") {
+    await api.cart.removeItem(String(form.get("cartItemId")));
+  } else if (intent === "update") {
+    await api.cart.updateItem(String(form.get("cartItemId")), {
+      quantity: Number(form.get("quantity")),
+    });
+  }
+
+  const token = issued ?? cartToken;
+  return redirect("/cart", {
+    headers: token ? { "Set-Cookie": await cartCookie.serialize(token) } : undefined,
+  });
+}
+
+export default function CartPage({ loaderData }: Route.ComponentProps) {
+  const { cart } = loaderData;
+
+  if (!cart.items.length) {
+    return (
+      <div className="space-y-4 py-16 text-center">
+        <p className="text-muted">장바구니가 비었어요</p>
+        <Link to="/products" className="inline-block rounded-md bg-ink px-5 py-3 text-white">
+          상품 보러 가기
+        </Link>
+      </div>
+    );
+  }
+
+  const purchasable = cart.items.filter((item) => item.purchasable);
+
+  return (
+    <div className="space-y-6">
+      <h1 className="font-bold text-2xl">장바구니</h1>
+
+      <ul className="divide-y divide-line border-line border-y">
+        {cart.items.map((item) => (
+          <li key={item.cartItemId} className="flex gap-4 py-4">
+            <img
+              src={item.thumbnailUrl}
+              alt=""
+              className="size-20 rounded-md bg-chip object-cover"
+            />
+            <div className="flex flex-1 flex-col gap-1">
+              <Link to={`/products/${item.productId}`} className="text-sm">
+                {item.productName}
+              </Link>
+              {item.optionName ? (
+                <span className="text-muted text-xs">{item.optionName}</span>
+              ) : null}
+              {!item.purchasable ? (
+                <span className="text-point text-xs">
+                  {item.unpurchasableReason === "SOLD_OUT" ? "품절이에요" : "지금은 살 수 없어요"}
+                </span>
+              ) : null}
+              <div className="flex items-center gap-3 pt-1">
+                <Form method="post" className="flex items-center gap-2">
+                  <input type="hidden" name="cartItemId" value={item.cartItemId} />
+                  <input
+                    type="number"
+                    name="quantity"
+                    min={1}
+                    max={999}
+                    defaultValue={item.quantity}
+                    className="h-9 w-20 rounded-md border border-line px-2 text-sm"
+                  />
+                  <button
+                    type="submit"
+                    name="intent"
+                    value="update"
+                    className="text-muted text-xs underline"
+                  >
+                    수량 변경
+                  </button>
+                </Form>
+                <Form method="post">
+                  <input type="hidden" name="cartItemId" value={item.cartItemId} />
+                  <button
+                    type="submit"
+                    name="intent"
+                    value="remove"
+                    className="text-muted text-xs underline"
+                  >
+                    삭제
+                  </button>
+                </Form>
+              </div>
+            </div>
+            <span className="font-semibold text-sm">{formatPrice(item.totalPrice)}</span>
+          </li>
+        ))}
+      </ul>
+
+      <div className="flex flex-col gap-3 md:items-end">
+        <dl className="w-full space-y-1 text-sm md:w-64">
+          <div className="flex justify-between">
+            <dt className="text-muted">상품 금액</dt>
+            <dd>{formatPrice(cart.summary.productAmount)}</dd>
+          </div>
+          <div className="flex justify-between">
+            <dt className="text-muted">배송비</dt>
+            <dd>{formatPrice(cart.summary.deliveryFee)}</dd>
+          </div>
+          <div className="flex justify-between border-line border-t pt-1 font-bold">
+            <dt>결제 금액</dt>
+            <dd>{formatPrice(cart.summary.totalAmount)}</dd>
+          </div>
+        </dl>
+
+        {/* 주문서는 GET으로 연다 — 진입 조건이 URL에 남아 새로고침·뒤로가기가 그대로 동작한다 */}
+        <Form method="get" action="/checkout" className="w-full md:w-64">
+          {purchasable.map((item) => (
+            <input key={item.cartItemId} type="hidden" name="cartItemId" value={item.cartItemId} />
+          ))}
+          <button
+            type="submit"
+            disabled={!purchasable.length}
+            className="h-12 w-full rounded-md bg-ink font-semibold text-white disabled:opacity-50"
+          >
+            주문하기
+          </button>
+        </Form>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,66 @@
+import { Link } from "react-router";
+import { apiFor } from "../lib/api.server";
+import { formatPrice } from "../lib/format";
+import { readToken } from "../lib/session.server";
+import type { Route } from "./+types/checkout-complete";
+
+export function meta() {
+  return [{ title: "주문 완료" }];
+}
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const orderId = new URL(request.url).searchParams.get("orderId");
+  if (!orderId) return { orderId: null, order: null };
+
+  // 비회원은 주문 조회에 비밀번호가 필요하다 — 완료 화면에서는 주문번호만 보여 준다
+  const accessToken = await readToken(request);
+  if (!accessToken) return { orderId, order: null };
+
+  const api = apiFor(request, { accessToken });
+  const order = await api.myOrders.get(orderId).catch(() => null);
+  return { orderId, order };
+}
+
+export default function CheckoutComplete({ loaderData }: Route.ComponentProps) {
+  const { orderId, order } = loaderData;
+
+  return (
+    <div className="space-y-6 py-10 text-center">
+      <div className="space-y-2">
+        <h1 className="font-bold text-2xl">주문을 완료했어요</h1>
+        {orderId ? (
+          <p className="text-muted text-sm">주문번호 {orderId}</p>
+        ) : (
+          <p className="text-muted text-sm">주문 내역에서 주문을 확인해주세요</p>
+        )}
+      </div>
+
+      {order ? (
+        <div className="mx-auto max-w-md space-y-2 rounded-lg border border-line p-5 text-left text-sm">
+          {order.items.map((item) => (
+            <div key={item.orderItemId} className="flex justify-between gap-3">
+              <span>
+                {item.productName}
+                <span className="text-muted"> × {item.quantity}</span>
+              </span>
+              <span>{formatPrice(item.totalPrice)}</span>
+            </div>
+          ))}
+          <div className="flex justify-between border-line border-t pt-2 font-bold">
+            <span>결제 금액</span>
+            <span>{formatPrice(order.payment.totalAmount)}</span>
+          </div>
+        </div>
+      ) : null}
+
+      <div className="flex justify-center gap-2">
+        <Link to="/orders" 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>
+      </div>
+    </div>
+  );
+}