@sayren/mcp 0.1.0

package/template/app/routes/checkout.tsx

@@ -0,0 +1,251 @@
+import { useEffect, useRef, useState } from "react";
+import { Form, redirect, useNavigate } from "react-router";
+import { browserApi } from "../lib/api";
+import { apiFor } from "../lib/api.server";
+import { readCartToken } from "../lib/cart-session.server";
+import { checkoutIntentFrom } from "../lib/checkout-intent";
+import { API_BASE_URL, resolveStoreCode } from "../lib/config.server";
+import { formatPrice } from "../lib/format";
+import { createPaymentPopup } from "../lib/payment-popup";
+import { readToken } from "../lib/session.server";
+import type { Route } from "./+types/checkout";
+
+export function meta() {
+  return [{ title: "주문서" }];
+}
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const intent = checkoutIntentFrom(new URL(request.url).searchParams);
+  if (!intent) throw redirect("/cart");
+
+  const accessToken = await readToken(request);
+  const cartToken = await readCartToken(request);
+  const api = apiFor(request, { accessToken, cartToken });
+  // 주문서 세션은 진입할 때마다 새로 만든다 — 조회 API가 없고, 가격·재고를 매번 다시 계산한다
+  const [checkout, member] = await Promise.all([
+    api.checkout.create(intent),
+    accessToken ? api.member.me().catch(() => null) : null,
+  ]);
+  return {
+    checkout,
+    member,
+    config: { apiBaseUrl: API_BASE_URL, storeCode: resolveStoreCode(request) },
+  };
+}
+
+/** 결제 요청은 서버에서 한다 — 토큰이 브라우저 JS에 노출되지 않는다 */
+export async function action({ request }: Route.ActionArgs) {
+  const form = await request.formData();
+  const checkoutId = String(form.get("checkoutId") ?? "");
+  const accessToken = await readToken(request);
+  const cartToken = await readCartToken(request);
+  const api = apiFor(request, { accessToken, cartToken });
+
+  const guestName = String(form.get("guestName") ?? "");
+  const payment = await api.checkout.requestPayment(checkoutId, {
+    shippingAddress: {
+      receiverName: String(form.get("receiverName") ?? ""),
+      phone: String(form.get("phone") ?? ""),
+      zipCode: String(form.get("zipCode") ?? ""),
+      address1: String(form.get("address1") ?? ""),
+      address2: String(form.get("address2") ?? "") || undefined,
+      deliveryMemo: String(form.get("deliveryMemo") ?? "") || undefined,
+    },
+    paymentMethod: "CARD",
+    guest: accessToken
+      ? undefined
+      : {
+          name: guestName,
+          phone: String(form.get("phone") ?? ""),
+          email: String(form.get("email") ?? ""),
+          orderPassword: String(form.get("orderPassword") ?? ""),
+        },
+  });
+  return { payment };
+}
+
+export default function Checkout({ loaderData, actionData }: Route.ComponentProps) {
+  const { checkout, member, config } = loaderData;
+  const navigate = useNavigate();
+  const popupRef = useRef<ReturnType<typeof createPaymentPopup> | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [checking, setChecking] = useState(false);
+
+  // 결제 요청 응답이 오면 이미 열어 둔 팝업을 결제 주소로 보낸다
+  useEffect(() => {
+    const popupUrl = actionData?.payment?.pgParams?.popupUrl;
+    if (!popupUrl || !popupRef.current) return;
+    if (!popupRef.current.navigate(popupUrl)) {
+      setNotice("결제창이 열리지 않았어요. 팝업 차단을 풀고 다시 시도해주세요.");
+    }
+  }, [actionData]);
+
+  const handleSubmit = () => {
+    // 클릭 콜스택에서 동기적으로 연다 — 응답을 기다린 뒤 열면 차단된다
+    popupRef.current = createPaymentPopup({
+      onCompleted: (message) => {
+        if (message.orderId) {
+          void navigate(`/checkout/complete?orderId=${message.orderId}`);
+        } else {
+          setNotice("결제가 완료됐어요. 주문 내역에서 확인해주세요.");
+        }
+      },
+      onFailed: (message) => {
+        setNotice(message.message ?? "결제가 실패했어요. 다시 시도해주세요.");
+      },
+      onClosed: () => {
+        // 닫혔다고 실패로 단정하지 않는다 — 서버에 결제 상태를 물어본다
+        const paymentId = actionDataPaymentId(actionData);
+        if (!paymentId) return;
+        setChecking(true);
+        void pollPaymentStatus(config, paymentId).then((status) => {
+          setChecking(false);
+          if (status?.status === "completed" && status.orderId) {
+            void navigate(`/checkout/complete?orderId=${status.orderId}`);
+          } else {
+            setNotice("결제창이 닫혔어요. 결제를 마쳤다면 잠시 뒤 주문 내역에서 확인해주세요.");
+          }
+        });
+      },
+    });
+    popupRef.current.open();
+  };
+
+  return (
+    <div className="grid gap-8 md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)] md:items-start">
+      <Form method="post" onSubmit={handleSubmit} className="space-y-6">
+        <input type="hidden" name="checkoutId" value={checkout.checkoutId} />
+        <section className="space-y-3">
+          <h2 className="font-bold text-lg">배송지</h2>
+          <Field label="수령인" name="receiverName" defaultValue={member?.name ?? ""} required />
+          <Field label="연락처" name="phone" placeholder="01012345678" required />
+          <Field label="우편번호" name="zipCode" placeholder="04524" required />
+          <Field label="주소" name="address1" required />
+          <Field label="상세 주소" name="address2" />
+          <Field label="배송 메모" name="deliveryMemo" />
+        </section>
+
+        {member ? null : (
+          <section className="space-y-3">
+            <h2 className="font-bold text-lg">비회원 주문</h2>
+            <Field label="주문자명" name="guestName" required />
+            <Field label="이메일" name="email" type="email" required />
+            <Field
+              label="주문 조회 비밀번호"
+              name="orderPassword"
+              type="password"
+              required
+              hint="주문 내역을 찾을 때 쓸 6자 이상 비밀번호예요"
+            />
+          </section>
+        )}
+
+        <button type="submit" className="h-12 w-full rounded-md bg-ink font-semibold text-white">
+          {formatPrice(checkout.amounts.totalAmount)} 결제하기
+        </button>
+        <p className="text-center text-muted text-xs">결제창은 새 팝업에서 열려요</p>
+      </Form>
+
+      <aside className="space-y-4 rounded-lg border border-line p-5">
+        <h2 className="font-bold text-lg">주문 상품</h2>
+        <ul className="space-y-3">
+          {checkout.items.map((item) => (
+            <li
+              key={`${item.productId}-${item.optionId}`}
+              className="flex justify-between gap-3 text-sm"
+            >
+              <span className="flex flex-col">
+                <span>{item.productName}</span>
+                {item.optionName ? (
+                  <span className="text-muted text-xs">{item.optionName}</span>
+                ) : null}
+                <span className="text-muted text-xs">수량 {item.quantity}개</span>
+              </span>
+              <span>{formatPrice(item.totalPrice)}</span>
+            </li>
+          ))}
+        </ul>
+        <dl className="space-y-1 border-line border-t pt-3 text-sm">
+          <Row label="상품 금액" value={formatPrice(checkout.amounts.productAmount)} />
+          <Row label="배송비" value={formatPrice(checkout.amounts.deliveryFee)} />
+          <div className="flex justify-between border-line border-t pt-2 font-bold">
+            <dt>총 결제금액</dt>
+            <dd>{formatPrice(checkout.amounts.totalAmount)}</dd>
+          </div>
+        </dl>
+        {checkout.testPayment ? (
+          <p className="rounded-md bg-chip px-3 py-2 text-xs">
+            테스트 결제예요. 실제로 돈이 오가지 않아요.
+          </p>
+        ) : null}
+        {checking ? <p className="text-muted text-sm">결제 상태를 확인하고 있어요…</p> : null}
+        {notice ? <p className="rounded-md bg-chip px-3 py-2 text-sm">{notice}</p> : null}
+      </aside>
+    </div>
+  );
+}
+
+function actionDataPaymentId(actionData: Route.ComponentProps["actionData"]): string | null {
+  return actionData?.payment?.paymentId ?? null;
+}
+
+/** 팝업이 결과 없이 닫힌 경우 — 서버 상태가 진실이다 */
+async function pollPaymentStatus(
+  config: { apiBaseUrl: string; storeCode: string },
+  paymentId: string,
+) {
+  const api = browserApi(config);
+  for (let attempt = 0; attempt < 6; attempt += 1) {
+    const status = await api.payments.getStatus(paymentId).catch(() => null);
+    if (status && status.status !== "pending" && status.status !== "processing") return status;
+    if (status?.status === "completed") return status;
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+  }
+  return null;
+}
+
+function Field({
+  label,
+  name,
+  type = "text",
+  defaultValue,
+  placeholder,
+  required,
+  hint,
+}: {
+  label: string;
+  name: string;
+  type?: string;
+  defaultValue?: string;
+  placeholder?: string;
+  required?: boolean;
+  hint?: string;
+}) {
+  return (
+    <label className="block space-y-1">
+      <span className="text-sm">
+        {label}
+        {required ? <span className="text-point"> *</span> : null}
+      </span>
+      {/* 프리필은 defaultValue로 준다 — register만 쓰면 SSR HTML에 값이 실리지 않는다 */}
+      <input
+        type={type}
+        name={name}
+        defaultValue={defaultValue}
+        placeholder={placeholder}
+        required={required}
+        className="h-11 w-full rounded-md border border-line px-3"
+      />
+      {hint ? <span className="text-muted text-xs">{hint}</span> : null}
+    </label>
+  );
+}
+
+function Row({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex justify-between">
+      <dt className="text-muted">{label}</dt>
+      <dd>{value}</dd>
+    </div>
+  );
+}

package/template/app/routes/home.tsx

@@ -0,0 +1,67 @@
+import { Link } from "react-router";
+import { ProductCard } from "../components/product-card";
+import { apiFor } from "../lib/api.server";
+import type { Route } from "./+types/home";
+
+export function meta() {
+  return [{ title: "스토어" }, { name: "description", content: "지금 인기 있는 상품" }];
+}
+
+/**
+ * 홈 — 서버에서 상품을 먼저 받아 그린다(SSR). 클라이언트에서 다시 받지 않는다.
+ * 확장 지점: 배너·기획전 레일을 추가하려면 여기서 데이터를 더 불러 `Promise.all`에 넣는다.
+ */
+export async function loader({ request }: Route.LoaderArgs) {
+  const api = apiFor(request);
+  const [categories, recommended, latest] = await Promise.all([
+    api.catalog.listCategories(),
+    api.catalog.searchProducts({ sort: "recommend", size: 8 }),
+    api.catalog.searchProducts({ sort: "latest", size: 8 }),
+  ]);
+  return { categories, recommended: recommended.contents, latest: latest.contents };
+}
+
+export default function Home({ loaderData }: Route.ComponentProps) {
+  const { categories, recommended, latest } = loaderData;
+
+  return (
+    <div className="space-y-10">
+      {categories.length ? (
+        <nav className="flex flex-wrap gap-2">
+          {categories.map((category) => (
+            <Link
+              key={category.categoryId}
+              to={`/products?categoryId=${category.categoryId}`}
+              className="rounded-full bg-chip px-3 py-1.5 text-sm hover:bg-line"
+            >
+              {category.name}
+            </Link>
+          ))}
+        </nav>
+      ) : null}
+
+      <ProductSection title="추천 상품" products={recommended} />
+      <ProductSection title="새로 들어왔어요" products={latest} />
+    </div>
+  );
+}
+
+function ProductSection({
+  title,
+  products,
+}: {
+  title: string;
+  products: Awaited<ReturnType<typeof loader>>["recommended"];
+}) {
+  if (!products.length) return null;
+  return (
+    <section className="space-y-4">
+      <h2 className="font-bold text-xl">{title}</h2>
+      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+        {products.map((product) => (
+          <ProductCard key={product.productId} product={product} />
+        ))}
+      </div>
+    </section>
+  );
+}

package/template/app/routes/login.tsx

@@ -0,0 +1,52 @@
+import { Form, redirect } from "react-router";
+import { apiFor } from "../lib/api.server";
+import { sessionCookie } from "../lib/session.server";
+import type { Route } from "./+types/login";
+
+export function meta() {
+  return [{ title: "로그인" }];
+}
+
+export async function action({ request }: Route.ActionArgs) {
+  const form = await request.formData();
+  const api = apiFor(request);
+  try {
+    const session = await api.auth.login({
+      email: String(form.get("email") ?? ""),
+      password: String(form.get("password") ?? ""),
+    });
+    return redirect(String(form.get("redirectTo") ?? "/orders"), {
+      headers: { "Set-Cookie": await sessionCookie.serialize(session.accessToken) },
+    });
+  } catch {
+    return { error: "이메일이나 비밀번호가 맞지 않아요" };
+  }
+}
+
+export default function Login({ actionData }: Route.ComponentProps) {
+  return (
+    <div className="mx-auto max-w-sm space-y-5 py-10">
+      <h1 className="font-bold text-2xl">로그인</h1>
+      <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"
+        />
+        {actionData?.error ? <p className="text-point text-sm">{actionData.error}</p> : null}
+        <button type="submit" className="h-12 w-full rounded-md bg-ink font-semibold text-white">
+          로그인
+        </button>
+      </Form>
+    </div>
+  );
+}

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

@@ -0,0 +1,76 @@
+import { Link, redirect } from "react-router";
+import { apiFor } from "../lib/api.server";
+import { formatDateTime, formatPrice } from "../lib/format";
+import { readToken } from "../lib/session.server";
+import type { Route } from "./+types/order-detail";
+
+export function meta({ params }: Route.MetaArgs) {
+  return [{ title: `주문 ${params.orderId}` }];
+}
+
+export async function loader({ request, params }: Route.LoaderArgs) {
+  const accessToken = await readToken(request);
+  if (!accessToken) throw redirect(`/login?redirectTo=/orders/${params.orderId}`);
+  const api = apiFor(request, { accessToken });
+  return { order: await api.myOrders.get(params.orderId) };
+}
+
+export default function OrderDetail({ loaderData }: Route.ComponentProps) {
+  const { order } = loaderData;
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-1">
+        <Link to="/orders" className="text-muted text-sm underline">
+          주문 내역
+        </Link>
+        <h1 className="font-bold text-2xl">주문 {order.orderId}</h1>
+        <p className="text-muted text-sm">{formatDateTime(order.orderedAt)}</p>
+      </div>
+
+      <ul className="divide-y divide-line border-line border-y">
+        {order.items.map((item) => (
+          <li key={item.orderItemId} className="flex items-center gap-4 py-4">
+            <img
+              src={item.thumbnailUrl}
+              alt=""
+              className="size-16 rounded-md bg-chip object-cover"
+            />
+            <span className="flex flex-1 flex-col gap-1 text-sm">
+              <span>{item.productName}</span>
+              {item.optionName ? (
+                <span className="text-muted text-xs">{item.optionName}</span>
+              ) : null}
+              <span className="text-muted text-xs">
+                {item.status} · 수량 {item.quantity}개
+              </span>
+            </span>
+            <span className="text-sm">{formatPrice(item.totalPrice)}</span>
+          </li>
+        ))}
+      </ul>
+
+      <dl className="space-y-1 text-sm">
+        <div className="flex justify-between border-line border-t pt-1 font-bold">
+          <dt>결제 금액</dt>
+          <dd>{formatPrice(order.payment.totalAmount)}</dd>
+        </div>
+        {order.payment.receiptUrl ? (
+          <div className="flex justify-between">
+            <dt className="text-muted">영수증</dt>
+            <dd>
+              <a
+                href={order.payment.receiptUrl}
+                className="underline"
+                target="_blank"
+                rel="noreferrer"
+              >
+                열기
+              </a>
+            </dd>
+          </div>
+        ) : null}
+      </dl>
+    </div>
+  );
+}

package/template/app/routes/orders.tsx

@@ -0,0 +1,48 @@
+import { Link, redirect } from "react-router";
+import { apiFor } from "../lib/api.server";
+import { formatDateTime, formatPrice } from "../lib/format";
+import { readToken } from "../lib/session.server";
+import type { Route } from "./+types/orders";
+
+export function meta() {
+  return [{ title: "주문 내역" }];
+}
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const accessToken = await readToken(request);
+  if (!accessToken) throw redirect("/login?redirectTo=/orders");
+  const api = apiFor(request, { accessToken });
+  return { orders: await api.myOrders.list({ size: 20 }) };
+}
+
+export default function Orders({ loaderData }: Route.ComponentProps) {
+  const { orders } = loaderData;
+
+  if (!orders.contents.length) {
+    return <p className="py-16 text-center text-muted">아직 주문이 없어요</p>;
+  }
+
+  return (
+    <div className="space-y-5">
+      <h1 className="font-bold text-2xl">주문 내역</h1>
+      <ul className="space-y-3">
+        {orders.contents.map((order) => (
+          <li key={order.orderId}>
+            <Link
+              to={`/orders/${order.orderId}`}
+              className="flex items-center justify-between gap-4 rounded-lg border border-line p-4 hover:border-ink"
+            >
+              <span className="flex flex-col gap-1">
+                <span className="text-sm">{order.orderId}</span>
+                <span className="text-muted text-xs">{formatDateTime(order.orderedAt)}</span>
+              </span>
+              <span className="font-semibold text-sm">
+                {formatPrice(order.payment.totalAmount)}
+              </span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

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

@@ -0,0 +1,153 @@
+import { useState } from "react";
+import { Form, redirect, useNavigation } from "react-router";
+import { ProductDescription } from "../components/product-description";
+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/product-detail";
+
+export function meta({ loaderData }: Route.MetaArgs) {
+  return [{ title: loaderData ? loaderData.product.name : "상품" }];
+}
+
+export async function loader({ request, params }: Route.LoaderArgs) {
+  const api = apiFor(request);
+  const product = await api.catalog.getProduct(params.productId);
+  return { product };
+}
+
+/**
+ * 장바구니 담기·바로구매를 서버에서 처리한다. 비회원 장바구니 토큰은 서버가 새로 발급할 수 있어
+ * 응답 쿠키에 다시 심는다.
+ */
+export async function action({ request, params }: Route.ActionArgs) {
+  const form = await request.formData();
+  const intent = String(form.get("intent") ?? "cart");
+  const optionId = String(form.get("optionId") ?? "") || undefined;
+  const quantity = Number(form.get("quantity") ?? 1);
+
+  const accessToken = await readToken(request);
+  let cartToken = await readCartToken(request);
+  let issued: string | null = null;
+  const api = apiFor(request, {
+    accessToken,
+    cartToken,
+    onCartToken: (token) => {
+      issued = token;
+    },
+  });
+
+  await api.cart.addItem({ productId: params.productId, optionId, quantity });
+  cartToken = issued ?? cartToken;
+  return redirect("/cart", {
+    headers: cartToken ? { "Set-Cookie": await cartCookie.serialize(cartToken) } : undefined,
+  });
+}
+
+export default function ProductDetail({ loaderData }: Route.ComponentProps) {
+  const { product } = loaderData;
+  const navigation = useNavigation();
+  const submitting = navigation.state !== "idle";
+  const hasOptions = product.optionGroups.length > 0;
+  const [quantity, setQuantity] = useState(1);
+  const [variantId, setVariantId] = useState(
+    product.variants.find((variant) => !variant.soldOut)?.variantId ?? "",
+  );
+  const variant = product.variants.find((v) => v.variantId === variantId);
+  const price =
+    (product.discountedPrice ?? product.salePrice) + (variant ? variant.additionalPrice : 0);
+
+  return (
+    <div className="grid gap-8 md:grid-cols-2">
+      <div className="space-y-3">
+        <img src={product.thumbnailUrl} alt="" className="w-full rounded-lg bg-chip" />
+        {product.images.slice(0, 4).map((image) => (
+          <img
+            key={image}
+            src={image}
+            alt=""
+            className="w-full rounded-lg bg-chip"
+            loading="lazy"
+          />
+        ))}
+      </div>
+
+      <div className="space-y-5">
+        <div className="space-y-2">
+          <h1 className="font-bold text-2xl">{product.name}</h1>
+          <p className="font-bold text-xl">{formatPrice(price)}</p>
+          <p className="text-muted text-sm">
+            {product.delivery.type === "FREE"
+              ? "무료배송"
+              : `배송비 ${formatPrice(product.delivery.fee)}`}
+            {product.delivery.estimatedDays ? ` · ${product.delivery.estimatedDays}` : ""}
+          </p>
+        </div>
+
+        <Form method="post" className="space-y-4">
+          {hasOptions ? (
+            <label className="block space-y-1">
+              <span className="text-sm">옵션</span>
+              <select
+                name="optionId"
+                value={variantId}
+                onChange={(event) => setVariantId(event.target.value)}
+                className="h-11 w-full rounded-md border border-line px-3"
+              >
+                {product.variants.map((option) => (
+                  <option key={option.variantId} value={option.variantId} disabled={option.soldOut}>
+                    {option.name}
+                    {option.soldOut ? " (품절)" : ""}
+                  </option>
+                ))}
+              </select>
+            </label>
+          ) : null}
+
+          <label className="block space-y-1">
+            <span className="text-sm">수량</span>
+            <input
+              type="number"
+              name="quantity"
+              min={1}
+              max={999}
+              value={quantity}
+              onChange={(event) => setQuantity(Number(event.target.value) || 1)}
+              className="h-11 w-24 rounded-md border border-line px-3"
+            />
+          </label>
+
+          <button
+            type="submit"
+            name="intent"
+            value="cart"
+            disabled={submitting || product.soldOut}
+            className="h-12 w-full rounded-md border border-ink font-semibold disabled:opacity-50"
+          >
+            장바구니
+          </button>
+        </Form>
+
+        {/* 바로구매는 주문서를 GET으로 연다 — 장바구니를 거치지 않는다 */}
+        <Form method="get" action="/checkout" className="space-y-0">
+          <input type="hidden" name="productId" value={product.productId} />
+          {hasOptions ? <input type="hidden" name="optionId" value={variantId} /> : null}
+          <input type="hidden" name="quantity" value={quantity} />
+          <button
+            type="submit"
+            disabled={submitting || product.soldOut}
+            className="h-12 w-full rounded-md bg-ink font-semibold text-white disabled:opacity-50"
+          >
+            바로구매
+          </button>
+        </Form>
+
+        <section className="space-y-2 border-line border-t pt-5">
+          <h2 className="font-semibold">상품 설명</h2>
+          <ProductDescription description={product.description ?? ""} />
+        </section>
+      </div>
+    </div>
+  );
+}