@sayren/mcp 0.6.0 → 0.8.0

package/template/src/routes/checkout.return.tsx

@@ -6,6 +6,7 @@ import { useCallback, useEffect, useState } from "react";
 import { z } from "zod";
 import type { PublicConfig } from "../lib/config";
 import { API_BASE_URL, resolveStoreCode } from "../lib/config.server";
+import { pageTitle } from "../lib/page-title";
 import { forgetPaymentOptions, recallPaymentOptions } from "../lib/payment-options";
 import { paymentsFor } from "../lib/payments";
 import { safeRedirect } from "../lib/safe-redirect";
@@ -50,7 +51,12 @@ export const Route = createFileRoute("/checkout/return")({
   validateSearch: returnSearch,
   loader: () => getConfig(),
   // 복귀 주소의 결제 id가 외부 리소스 요청의 Referer로 새지 않게 한다
-  head: () => ({ meta: [{ title: "결제 확인" }, { name: "referrer", content: "no-referrer" }] }),
+  head: ({ matches }) => ({
+    meta: [
+      { title: pageTitle(matches, "결제 확인") },
+      { name: "referrer", content: "no-referrer" },
+    ],
+  }),
   component: PaymentReturn,
 });
 

package/template/src/routes/guest-order.tsx

@@ -1,13 +1,27 @@
+import { zodResolver } from "@hookform/resolvers/zod";
 import { ApiError, type MyOrder } from "@sayren/storefront-sdk";
 import { createFileRoute } from "@tanstack/react-router";
 import { createServerFn } from "@tanstack/react-start";
 import { useState } from "react";
+import { useForm } from "react-hook-form";
 import { z } from "zod";
+import { FulfillmentCodes } from "../components/fulfillment-codes";
+import { FulfillmentDownloads } from "../components/fulfillment-downloads";
 import { ProductThumb } from "../components/product-thumb";
 import { SubmitButton } from "../components/submit-button";
+import { TextField } from "../components/text-field";
 import { apiFor } from "../lib/api.server";
+import { type CodeRevealResult, codeRevealErrorMessage, normalizePhone } from "../lib/code-reveal";
+import { type DownloadResult, downloadErrorMessage } from "../lib/download";
+import {
+  type GuestOrderLookup,
+  type GuestOrderLookupInput,
+  guestOrderLookupSchema,
+} from "../lib/form-schemas";
 import { formatDateTime, formatPrice } from "../lib/format";
-import { orderItemStatusLabel } from "../lib/order-status";
+import { guestLookupLockedMessage } from "../lib/guest-order";
+import { orderItemStatusLabel, withdrawalRestrictedLabel } from "../lib/order-status";
+import { pageTitle } from "../lib/page-title";
 
 const guestOrderSearch = z.object({
   /** 주문 완료 화면이 주문번호를 채워 보낸다 */
@@ -22,7 +36,7 @@ const lookupGuestOrder = createServerFn({ method: "POST" })
   .validator(z.object({ orderId: z.string(), phone: z.string(), orderPassword: z.string() }))
   .handler(async ({ data }) => {
     const orderId = data.orderId.trim();
-    const phone = data.phone.replace(/[^0-9]/g, "");
+    const phone = normalizePhone(data.phone);
     if (!orderId || !phone || !data.orderPassword) {
       return { order: null, error: "주문번호·연락처·비밀번호를 모두 입력해 주십시오" };
     }
@@ -36,44 +50,102 @@ const lookupGuestOrder = createServerFn({ method: "POST" })
       if (error instanceof ApiError && (error.status === 401 || error.status === 404)) {
         return { order: null, error: "주문을 찾지 못했습니다. 입력한 내용을 확인해 주십시오" };
       }
+      // 주문번호마다 시도 한도가 있다. 여러 번 틀리면 한동안 맞는 비밀번호로도 조회되지 않는다
+      if (error instanceof ApiError && error.status === 429) {
+        return { order: null, error: guestLookupLockedMessage(error.details?.retryAfterSeconds) };
+      }
       return { order: null, error: "조회하지 못했습니다. 잠시 후 다시 시도해 주십시오" };
     }
   });
 
+/**
+ * 비회원 코드 열람 — 조회에 쓴 연락처·주문 조회 비밀번호로 다시 확인한다(주문 조회와 같은 시도 한도).
+ * 비밀번호는 서버 함수 본문(POST)으로만 보내고 주소에 남기지 않는다.
+ */
+const revealGuestCode = createServerFn({ method: "POST" })
+  .validator(
+    z.object({
+      orderId: z.string(),
+      orderItemId: z.string(),
+      phone: z.string(),
+      orderPassword: z.string(),
+    }),
+  )
+  .handler(async ({ data }): Promise<CodeRevealResult> => {
+    try {
+      const result = await apiFor().myOrders.revealGuestCode(data.orderId, data.orderItemId, {
+        phone: normalizePhone(data.phone),
+        orderPassword: data.orderPassword,
+      });
+      return { codes: result.codes, error: null };
+    } catch (error) {
+      return { codes: null, error: codeRevealErrorMessage(error) };
+    }
+  });
+
+/**
+ * 비회원 파일 받기 — 조회에 쓴 연락처·주문 조회 비밀번호로 다시 확인하고 서명 주소(수명 300초)를 받는다. 받을 때마다
+ * 횟수를 하나 쓴다. 비밀번호는 서버 함수 본문(POST)으로만 보내고 주소에 남기지 않는다.
+ */
+const createGuestDownload = createServerFn({ method: "POST" })
+  .validator(
+    z.object({
+      orderId: z.string(),
+      orderItemId: z.string(),
+      assetId: z.string(),
+      phone: z.string(),
+      orderPassword: z.string(),
+    }),
+  )
+  .handler(async ({ data }): Promise<DownloadResult> => {
+    try {
+      const link = await apiFor().myOrders.createGuestDownload(data.orderId, data.orderItemId, {
+        phone: normalizePhone(data.phone),
+        orderPassword: data.orderPassword,
+        assetId: data.assetId,
+      });
+      return { url: link.url, fileName: link.fileName, remaining: link.remaining, error: null };
+    } catch (error) {
+      return { url: null, error: downloadErrorMessage(error) };
+    }
+  });
+
 export const Route = createFileRoute("/guest-order")({
   validateSearch: guestOrderSearch,
-  head: () => ({ meta: [{ title: "비회원 주문 조회" }] }),
+  head: ({ matches }) => ({
+    // 주소에 주문번호(`?orderId=`)가 실린다. 외부 링크로 나갈 때 리퍼러로 흘리지 않는다
+    meta: [
+      { title: pageTitle(matches, "비회원 주문 조회") },
+      { name: "referrer", content: "no-referrer" },
+    ],
+  }),
   component: GuestOrder,
 });
 
 function GuestOrder() {
   const { orderId } = Route.useSearch();
   const [order, setOrder] = useState<MyOrder | null>(null);
+  // 코드 열람에 다시 쓰는 조회 값 — 이 컴포넌트 상태에만 둔다(주소·스토리지에 남기지 않는다)
+  const [lookup, setLookup] = useState<GuestOrderLookup | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const [pending, setPending] = useState(false);
+  const form = useForm<GuestOrderLookupInput, unknown, GuestOrderLookup>({
+    resolver: zodResolver(guestOrderLookupSchema),
+  });
+  const { errors, isSubmitting } = form.formState;
 
-  const submit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    const form = new FormData(event.currentTarget);
-    setPending(true);
+  const submit = form.handleSubmit(async (values) => {
     setError(null);
-    void lookupGuestOrder({
-      data: {
-        orderId: String(form.get("orderId") ?? ""),
-        phone: String(form.get("phone") ?? ""),
-        orderPassword: String(form.get("orderPassword") ?? ""),
-      },
-    })
-      .then((result) => {
-        setOrder(result.order);
-        setError(result.error);
-      })
-      .catch(() => {
-        setOrder(null);
-        setError("조회하지 못했습니다. 잠시 후 다시 시도해 주십시오");
-      })
-      .finally(() => setPending(false));
-  };
+    try {
+      const result = await lookupGuestOrder({ data: values });
+      setOrder(result.order);
+      setLookup(result.order ? values : null);
+      setError(result.error);
+    } catch {
+      setOrder(null);
+      setLookup(null);
+      setError("조회하지 못했습니다. 잠시 후 다시 시도해 주십시오");
+    }
+  });
 
   return (
     <div className="mx-auto max-w-lg space-y-6 py-10">
@@ -85,11 +157,32 @@ function GuestOrder() {
       </div>
 
       <form onSubmit={submit} className="space-y-3">
-        <Field label="주문번호" name="orderId" defaultValue={orderId} placeholder="ord_" />
-        <Field label="연락처" name="phone" type="tel" placeholder="01012345678" />
-        <Field label="주문 조회 비밀번호" name="orderPassword" type="password" />
+        {/* 주문 완료 화면이 주문번호를 채워 보낸다 — 서버 HTML에 값이 실리도록 defaultValue로 준다 */}
+        <TextField
+          label="주문번호"
+          registration={form.register("orderId")}
+          error={errors.orderId?.message}
+          defaultValue={orderId}
+          placeholder="ord_"
+          required
+        />
+        <TextField
+          label="연락처"
+          registration={form.register("phone")}
+          error={errors.phone?.message}
+          type="tel"
+          placeholder="01012345678"
+          required
+        />
+        <TextField
+          label="주문 조회 비밀번호"
+          registration={form.register("orderPassword")}
+          error={errors.orderPassword?.message}
+          type="password"
+          required
+        />
         <SubmitButton
-          disabled={pending}
+          disabled={isSubmitting}
           className="h-12 w-full rounded-md bg-ink font-semibold text-white disabled:opacity-50"
         >
           조회하기
@@ -109,22 +202,59 @@ function GuestOrder() {
           </div>
           <ul className="divide-y divide-line">
             {order.items.map((item) => (
-              <li key={item.orderItemId} className="flex items-center gap-3 py-3 text-sm">
-                <ProductThumb
-                  src={item.thumbnailUrl}
-                  alt={item.productName}
-                  className="size-14 rounded-md bg-chip object-cover"
-                />
-                <span className="flex flex-1 flex-col gap-0.5">
-                  <span>{item.productName}</span>
-                  {item.optionName ? (
-                    <span className="text-muted text-xs">{item.optionName}</span>
-                  ) : null}
-                  <span className="text-muted text-xs">
-                    {orderItemStatusLabel(item.status)} · 수량 {item.quantity}개
+              <li key={item.orderItemId} className="space-y-2 py-3 text-sm">
+                <div className="flex items-center gap-3">
+                  <ProductThumb
+                    src={item.thumbnailUrl}
+                    alt={item.productName}
+                    className="size-14 rounded-md bg-chip object-cover"
+                  />
+                  <span className="flex flex-1 flex-col gap-0.5">
+                    <span>{item.productName}</span>
+                    {item.optionName ? (
+                      <span className="text-muted text-xs">{item.optionName}</span>
+                    ) : null}
+                    <span className="text-muted text-xs">
+                      {orderItemStatusLabel(item.status, item.fulfillmentType)} · 수량{" "}
+                      {item.quantity}개
+                    </span>
+                    {withdrawalRestrictedLabel(item) ? (
+                      <span className="text-muted text-xs">{withdrawalRestrictedLabel(item)}</span>
+                    ) : null}
                   </span>
-                </span>
-                <span>{formatPrice(item.totalPrice)}</span>
+                  <span>{formatPrice(item.totalPrice)}</span>
+                </div>
+                {lookup ? (
+                  <FulfillmentCodes
+                    item={item}
+                    reveal={() =>
+                      revealGuestCode({
+                        data: {
+                          orderId: order.orderId,
+                          orderItemId: item.orderItemId,
+                          phone: lookup.phone,
+                          orderPassword: lookup.orderPassword,
+                        },
+                      })
+                    }
+                  />
+                ) : null}
+                {lookup ? (
+                  <FulfillmentDownloads
+                    item={item}
+                    download={(assetId) =>
+                      createGuestDownload({
+                        data: {
+                          orderId: order.orderId,
+                          orderItemId: item.orderItemId,
+                          assetId,
+                          phone: lookup.phone,
+                          orderPassword: lookup.orderPassword,
+                        },
+                      })
+                    }
+                  />
+                ) : null}
               </li>
             ))}
           </ul>
@@ -141,31 +271,3 @@ function GuestOrder() {
     </div>
   );
 }
-
-function Field({
-  label,
-  name,
-  type = "text",
-  defaultValue,
-  placeholder,
-}: {
-  label: string;
-  name: string;
-  type?: string;
-  defaultValue?: string;
-  placeholder?: string;
-}) {
-  return (
-    <label className="block space-y-1">
-      <span className="text-sm">{label}</span>
-      <input
-        type={type}
-        name={name}
-        defaultValue={defaultValue}
-        placeholder={placeholder}
-        required
-        className="h-11 w-full rounded-md border border-line px-3"
-      />
-    </label>
-  );
-}

package/template/src/routes/login.tsx

@@ -7,6 +7,7 @@ import { z } from "zod";
 import { SubmitButton } from "../components/submit-button";
 import { apiFor, authFor } from "../lib/api.server";
 import { clearCartToken, readCartToken } from "../lib/cart-session.server";
+import { pageTitle } from "../lib/page-title";
 import { safeRedirect } from "../lib/safe-redirect";
 import { signIn } from "../lib/session.server";
 import { SOCIAL_BUTTONS } from "../lib/social-buttons";
@@ -91,7 +92,7 @@ const CALLBACK_ERRORS: Record<string, string> = {
 export const Route = createFileRoute("/login")({
   validateSearch: loginSearch,
   loader: () => getLoginMethods(),
-  head: () => ({ meta: [{ title: "로그인" }] }),
+  head: ({ matches }) => ({ meta: [{ title: pageTitle(matches, "로그인") }] }),
   component: Login,
 });
 

package/template/src/routes/orders.$orderId.tsx

@@ -11,11 +11,20 @@ import { createFileRoute, Link, notFound, redirect, useRouter } from "@tanstack/
 import { createServerFn } from "@tanstack/react-start";
 import { useState } from "react";
 import { z } from "zod";
+import { FulfillmentCodes } from "../components/fulfillment-codes";
+import { FulfillmentDownloads } from "../components/fulfillment-downloads";
 import { ProductThumb } from "../components/product-thumb";
 import { SubmitButton } from "../components/submit-button";
 import { apiFor } from "../lib/api.server";
+import { type CodeRevealResult, codeRevealErrorMessage } from "../lib/code-reveal";
+import { type DownloadResult, downloadErrorMessage } from "../lib/download";
 import { formatDateTime, formatPrice } from "../lib/format";
-import { orderItemStatusLabel } from "../lib/order-status";
+import {
+  orderItemStatusLabel,
+  WITHDRAWAL_RESTRICTED_CLAIM_MESSAGE,
+  withdrawalRestrictedLabel,
+} from "../lib/order-status";
+import { pageTitle } from "../lib/page-title";
 import { readToken } from "../lib/session.server";
 
 const getOrder = createServerFn({ method: "GET" })
@@ -33,6 +42,42 @@ const getOrder = createServerFn({ method: "GET" })
     }
   });
 
+/**
+ * 코드 열람 — 코드 발급 상품의 평문 코드를 받는다. 처음 연 시각이 기록된다. 구매자 토큰은 서버에만 두므로 서버
+ * 함수에서 부르고, 평문은 응답으로만 돌려준다(저장하지 않는다).
+ */
+const revealCode = createServerFn({ method: "POST" })
+  .validator(z.object({ orderItemId: z.string() }))
+  .handler(async ({ data }): Promise<CodeRevealResult> => {
+    const accessToken = readToken();
+    if (!accessToken) throw redirect({ to: "/login", search: { redirectTo: "/orders" } });
+    try {
+      const result = await apiFor({ accessToken }).myOrders.revealCode(data.orderItemId);
+      return { codes: result.codes, error: null };
+    } catch (error) {
+      return { codes: null, error: codeRevealErrorMessage(error) };
+    }
+  });
+
+/**
+ * 파일 받기 — 파일 다운로드 상품의 서명 주소(수명 300초)를 받는다. 받을 때마다 횟수를 하나 쓴다. 구매자 토큰은 서버에만
+ * 두므로 서버 함수에서 부르고, 주소는 응답으로만 돌려준다(저장하지 않는다).
+ */
+const createDownload = createServerFn({ method: "POST" })
+  .validator(z.object({ orderItemId: z.string(), assetId: z.string() }))
+  .handler(async ({ data }): Promise<DownloadResult> => {
+    const accessToken = readToken();
+    if (!accessToken) throw redirect({ to: "/login", search: { redirectTo: "/orders" } });
+    try {
+      const link = await apiFor({ accessToken }).myOrders.createDownload(data.orderItemId, {
+        assetId: data.assetId,
+      });
+      return { url: link.url, fileName: link.fileName, remaining: link.remaining, error: null };
+    } catch (error) {
+      return { url: null, error: downloadErrorMessage(error) };
+    }
+  });
+
 /**
  * 취소·반품 접수 — 수량을 실으면 그 수량만 접수된다(생략하면 남은 수량 전체).
  * 상한은 주문 상품의 `activeQuantity`이고 넘기면 서버가 400 `INVALID_QUANTITY`로 거절한다.
@@ -73,6 +118,8 @@ function claimErrorMessage(error: unknown): string {
       return "지금은 신청할 수 없는 상태입니다. 주문 상태를 확인해 주십시오.";
     case "PERIOD_EXPIRED":
       return "반품·교환 가능 기간이 지났습니다.";
+    case "WITHDRAWAL_RESTRICTED":
+      return WITHDRAWAL_RESTRICTED_CLAIM_MESSAGE;
     default:
       return error.message || "접수하지 못했습니다. 잠시 후 다시 시도해 주십시오.";
   }
@@ -80,7 +127,9 @@ function claimErrorMessage(error: unknown): string {
 
 export const Route = createFileRoute("/orders/$orderId")({
   loader: ({ params }) => getOrder({ data: { orderId: params.orderId } }),
-  head: ({ params }) => ({ meta: [{ title: `주문 ${params.orderId}` }] }),
+  head: ({ matches, params }) => ({
+    meta: [{ title: pageTitle(matches, `주문 ${params.orderId}`) }],
+  }),
   component: OrderDetail,
 });
 
@@ -181,15 +230,30 @@ function OrderDetail() {
                   <span className="text-muted text-xs">{item.optionName}</span>
                 ) : null}
                 <span className="text-muted text-xs">
-                  {orderItemStatusLabel(item.status)} · 수량 {item.quantity}개
+                  {orderItemStatusLabel(item.status, item.fulfillmentType)} · 수량 {item.quantity}개
                   {item.canceledQuantity > 0
                     ? ` · 취소·반품 ${item.canceledQuantity}개 · 남은 수량 ${item.activeQuantity}개`
                     : null}
                 </span>
+                {withdrawalRestrictedLabel(item) ? (
+                  <span className="text-muted text-xs">{withdrawalRestrictedLabel(item)}</span>
+                ) : null}
               </span>
               <span className="text-sm">{formatPrice(item.totalPrice)}</span>
             </div>
 
+            <FulfillmentInfo item={item} />
+            <FulfillmentCodes
+              item={item}
+              reveal={() => revealCode({ data: { orderItemId: item.orderItemId } })}
+            />
+            <FulfillmentDownloads
+              item={item}
+              download={(assetId) =>
+                createDownload({ data: { orderItemId: item.orderItemId, assetId } })
+              }
+            />
+
             {claimableTypes(item.status).length > 0 &&
             !item.claimStatus &&
             item.activeQuantity > 0 ? (
@@ -244,6 +308,37 @@ function OrderDetail() {
   );
 }
 
+/**
+ * 배송이 없는 상품의 받는 방법 — 방문 수령 장소와 셀러가 제공 처리하며 남긴 이용 안내(이슈 #48).
+ * 배송 상품이거나 보여 줄 것이 없으면 그리지 않는다. 배송 상품이 아니므로 배송 조회 링크가 없다.
+ */
+function FulfillmentInfo({ item }: { item: MyOrderItem }) {
+  const pickup = item.fulfillmentType === "PICKUP" ? item.pickupLocation : null;
+  const note = item.fulfillment?.status === "FULFILLED" ? item.fulfillment.note : null;
+  if (!pickup && !note) return null;
+  return (
+    <dl className="space-y-2 rounded-md bg-chip p-3 text-xs">
+      {pickup ? (
+        <div className="space-y-0.5">
+          <dt className="font-semibold">수령 장소</dt>
+          <dd>{pickup.name}</dd>
+          <dd className="text-muted">
+            ({pickup.zipCode}) {pickup.address1}
+            {pickup.address2 ? ` ${pickup.address2}` : ""}
+          </dd>
+          <dd className="text-muted">{pickup.phone}</dd>
+        </div>
+      ) : null}
+      {note ? (
+        <div className="space-y-0.5">
+          <dt className="font-semibold">이용 안내</dt>
+          <dd className="whitespace-pre-line">{note}</dd>
+        </div>
+      ) : null}
+    </dl>
+  );
+}
+
 /**
  * 취소·반품 접수 폼. 수량 기본값은 남은 수량 전체이고 입력값은 `activeQuantity`까지다.
  * 서버 렌더한 마크업에 값이 그대로 남아야 하므로 프리필은 `defaultValue`로 준다.

package/template/src/routes/orders.index.tsx

@@ -2,6 +2,7 @@ import { createFileRoute, Link, redirect } from "@tanstack/react-router";
 import { createServerFn } from "@tanstack/react-start";
 import { apiFor } from "../lib/api.server";
 import { formatDateTime, formatPrice } from "../lib/format";
+import { pageTitle } from "../lib/page-title";
 import { readToken } from "../lib/session.server";
 
 const getOrders = createServerFn({ method: "GET" }).handler(async () => {
@@ -12,7 +13,7 @@ const getOrders = createServerFn({ method: "GET" }).handler(async () => {
 
 export const Route = createFileRoute("/orders/")({
   loader: () => getOrders(),
-  head: () => ({ meta: [{ title: "주문 내역" }] }),
+  head: ({ matches }) => ({ meta: [{ title: pageTitle(matches, "주문 내역") }] }),
   component: Orders,
 });
 

package/template/src/routes/products.$productId.tsx

@@ -10,6 +10,7 @@ import { useTrack } from "../lib/analytics";
 import { apiFor } from "../lib/api.server";
 import { readCartToken, writeCartToken } from "../lib/cart-session.server";
 import { formatPrice } from "../lib/format";
+import { pageTitle } from "../lib/page-title";
 import { readToken } from "../lib/session.server";
 
 const getProduct = createServerFn({ method: "GET" })
@@ -52,7 +53,9 @@ const addToCart = createServerFn({ method: "POST" })
 
 export const Route = createFileRoute("/products/$productId")({
   loader: ({ params }) => getProduct({ data: { productId: params.productId } }),
-  head: ({ loaderData }) => ({ meta: [{ title: loaderData ? loaderData.name : "상품" }] }),
+  head: ({ matches, loaderData }) => ({
+    meta: [{ title: pageTitle(matches, loaderData ? loaderData.name : "상품") }],
+  }),
   component: ProductDetail,
 });