@zalkera/client 0.13.0 → 0.14.0

package/README.md

@@ -69,7 +69,7 @@ await zalkera.submitInquiry({name, email, subject, message}, {clientIp});
   `npx zalkera-aeo-check <사이트URL> --category BOOKING`(bin `zalkera-aeo-check`).
   소스가 아니라 산출물을 재므로 스택·디자인을 가리지 않는다.
   보장 주장이 없는 사이트는 `--category` 대신 `--site-wide-only`(robots·sitemap·JSON-LD 절대 URL 만).
-  스토어프론트 템플릿의 `npm run check:aeo` 는 이 bin 을 부르는 wrapper 다.
+  잣대 해석만 확인하려면 URL 없이 `--print-guarantees`.
 - 정본은 잘커라 백엔드에 있고 여기 실린 것은 그 **발행 산출물**이다(발행 전 기계 대조).
 
 ## API 스펙 (메서드)

package/llms.txt

@@ -62,6 +62,9 @@ await zalkera.submitInquiry(input, { clientIp: ip });
 - `getSiteConfig()` — 회사명·연락처·테마·SEO 기본값
 - `listCategories()` · `listPosts({category?,page?,size?,sort?})` · `getPost(slug)` · `recordPostView(slug,ctx)`
 - `getPage(slug)` · `listPages({page?,size?})`(열거 전용·본문 없음·sitemap 용·size 상한 100) · `listMenus()` (HEADER/FOOTER) · `getMediaUrl(id)`
+  - ⚠ 이 셋(`getPage`·`listPages`·`listMenus`)은 **섹션이 DB 에 있는 사이트**(`"content": "sections-db"`)의 표면이다.
+    **새로 만드는 사이트는 안 부른다** — 페이지·섹션·내비의 정본이 레포 파일이라 백엔드 왕복이 아예 없다(§4.8·§9.1).
+    계약은 append-only 라 메서드는 남지만, 소스 정본 레포에서 이걸 부르면 빈 결과로 화면이 비는 쪽이 정상이다.
 - `submitInquiry(input, ctx)` · `submitLead(input, ctx)`  ← ctx.clientIp 필수(서버)
 
 ### 커머스 — 카탈로그(공개)
@@ -144,7 +147,7 @@ await zalkera.submitInquiry(input, { clientIp: ip });
   빈 배열은 truthy 라 `if (items)` 로 결측을 판별하면 안 된다 — `items.length` 을 봐라.
 - 위 가드로 **필수 값이 없으면 그 섹션만 안 그린다**. 페이지 전체가 죽으면 안 된다.
 - `mediaSrc(assetId)` → `/media/{id}` **경로 문자열**. 이미지는 전부 이걸 통한다.
-  전제: 프로젝트에 `app/media/[id]/route.ts` 프록시 라우트가 있어야 한다(템플릿에 있다).
+  전제: 프로젝트에 `app/media/[id]/route.ts` 프록시 라우트가 있어야 한다(**§4.9 에 전문**).
   이 헬퍼는 경로만 만든다 — 라우트를 안 만들면 이미지가 404 다.
 - `asHandle(v)` / `asHandleArray(v)` / `assetPath(v)` — **참조 방언**(계약 `contractRev` 4 의 `dialects`)을 읽는다.
   숫자 id 를 못 쓰는 자리에서 상품은 `handle`(= `ProductSummary.slug`), 에셋은 레포 `public/` **루트 절대 경로**로
@@ -236,7 +239,7 @@ export async function POST(req: Request) {
    if (session.widget) {
      // 위젯형(토스) — 내 사이트에서 결제창을 띄우고, 성공 콜백 파라미터를 confirm 으로 넘긴다
      //   widget = { vendor:"TOSS_PAYMENTS", clientKey, orderId, amount, orderName }
-     //   → 템플릿의 checkout/page.tsx(openWidget)·payment/complete/page.tsx 를 그대로 쓴다
+     //   → 결제창 페이지에서 openWidget, 성공 리다이렉트 페이지에서 confirm (이 절의 흐름 그대로)
      await zalkera.confirmPayment(orderNo, { paymentKey }, access);   // BFF 경유
    } else {
      redirect(session.paymentUrl);   // 리다이렉트형(PG 결제창으로 이동)
@@ -260,7 +263,8 @@ export async function POST(req: Request) {
 >
 > 관용구는 소비자에 따라 둘이다:
 > - **브라우저(쿠키 있음)** = `` `co-${session.cartSessionKey}` `` **+ 체크아웃 성공 응답에서 카트 쿠키 회전**
->   (템플릿 `rotateCartSessionKey`). **회전 없이 카트키를 멱등키로 쓰지 마라** — 카트 쿠키는 30일이라
+>   (체크아웃 BFF 응답에 `response.cookies.set(CART_COOKIE, randomUUID(), {httpOnly:true, sameSite:"lax",
+>   secure, path:"/", maxAge: 30일})`). **회전 없이 카트키를 멱등키로 쓰지 마라** — 카트 쿠키는 30일이라
 >   회전이 없으면 위의 "영구 재사용"이 그대로 실현된다(실측 사고). 회전을 응답에 실으면 Set-Cookie 가
 >   성공 도달과 원자적으로 묶여서, 응답 유실 시엔 옛 키가 살아남아 재시도가 원주문을 재생한다 —
 >   **인메모리 "시도당 키"보다 이 쪽이 안전하다**(새로고침에 안 죽는다).
@@ -295,8 +299,8 @@ const shipment = await zalkera.getShipment(orderNo, { phone }); // 배송 상태
 // 1) 슬롯 보여주기 — 공개(비로그인 가능).
 // ⚠️ 이 RSC 직독 샘플은 **요청마다 렌더되는 동적 라우트에서만** 신선하다. 상품 상세가 ISR
 //    (force-static + revalidate=N)이면 슬롯이 프리렌더에 구워져 N초 낡은 시간표를 보여주고
-//    SLOT_FULL 을 만든다 — 그땐 **클라이언트 아일랜드 + BFF 프록시**로 내려라(템플릿
-//    BookingPanel + /api/booking/availability 가 그 선례다. 볼라틸한 데이터는 클라이언트 아일랜드로).
+//    SLOT_FULL 을 만든다 — 그땐 **클라이언트 아일랜드 + BFF 프록시**로 내려라(예약 패널을
+//    "use client" 로 두고 /api/booking/availability 가 대신 조회. 볼라틸한 데이터는 아일랜드로).
 const slots = await zalkera.availability({
   productId: product.id,               // slug 아님 — getProduct(slug).id
   from: new Date().toISOString(),
@@ -343,7 +347,272 @@ if (booking.orderNo) {                  // status=PENDING
   깨므로 금지(하나라도 있으면 `tracking` 을 채우고, 전무면 undefined).
 - **BFF 필수**: 브라우저에서 `submitLead` 직호출 금지(§2). route handler 에서 `x-forwarded-for` 첫
   홉을 `{ clientIp }` 로 넘긴다(안 넘기면 방문자 전원 429 — §4.6·문의와 동일 관용구).
-- 선례: `components/LeadForm.tsx`(아일랜드·UTM 캡처) · `app/api/lead/route.ts`(BFF·201 관통).
+
+### 4.8 콘텐츠 파일로 그리는 고정 페이지 (`"content": "source"` · 권장)
+
+사이트의 얼굴을 레포가 정본으로 가질 때의 배선이다. 파일 형상·방언은 §9.1·§9.2, 아래는 그것을 읽는 코드다.
+**라우트는 하나면 된다** — 페이지가 늘어도 `content/` 에 json 이 느는 것이지 라우트가 늘지 않는다.
+
+```ts
+// content/index.ts — 이 디렉터리의 유일한 코드. **정적 import** 라야 dev HMR + standalone 트레이싱을 얻는다.
+import home from "./pages/home.json";
+import about from "./pages/about.json";
+import nav from "./nav.json";
+
+// 값을 unknown 으로 둔다: 손으로 고치는 파일이라 형상이 틀릴 수 있고, 판정·강하는 로더 한 곳이 한다.
+// 여기서 타입을 주장하면 틀린 json 하나가 **빌드를 세운다** — 계약은 "틀린 부분만 안 그린다" 다.
+export const pages: Record<string, unknown> = { home, about };
+export { nav };
+```
+
+```ts
+// lib/content.ts — **절대 throw 하지 않는다.**
+import { asString } from "@zalkera/client";
+import { pages } from "../content";
+
+export interface ContentSection { type: string; config: unknown }   // config 는 **객체**다
+
+export function loadPageContent(slug: string) {
+  const raw = pages[slug];
+  if (raw == null || typeof raw !== "object" || Array.isArray(raw)) return null;
+  const r = raw as Record<string, unknown>;
+  const sections = (Array.isArray(r.sections) ? r.sections : []).flatMap((s): ContentSection[] => {
+    if (s == null || typeof s !== "object") return [];
+    const type = asString((s as Record<string, unknown>).type)?.trim();
+    return type ? [{ type, config: (s as Record<string, unknown>).config }] : [];   // config 는 그대로 넘긴다
+  });
+  return { title: asString(r.title)?.trim() || slug, seo: r.seo, sections };
+}
+
+export const pageSlugs = (): string[] => Object.keys(pages);   // sitemap·generateStaticParams 가 읽는다
+```
+
+```tsx
+// app/[slug]/page.tsx — 전 페이지를 이 하나가 그린다. 백엔드 왕복이 없다.
+export const dynamic = "force-static";
+export function generateStaticParams() { return pageSlugs().map((slug) => ({ slug })); }
+
+export default async function StaticPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const page = loadPageContent(slug);
+  if (!page) notFound();
+  if (slug === "home") redirect("/");           // 홈의 정본 주소는 루트다(같은 내용이 두 URL 로 색인되면 손해)
+  return (
+    <main>
+      <JsonLd data={webPageJsonLd({ title: page.title, slug }, siteUrl())} />
+      <h1>{page.title}</h1>
+      <SectionList sections={page.sections} />  {/* 정렬하지 않는다 — 배열 순서가 화면 순서다 */}
+    </main>
+  );
+}
+```
+
+- 상품 참조 섹션(`SERVICE_MENU`·`BOOKING_CTA`)이 있으면 `SectionList` 가 `listProducts` 를 **1회** 부르고
+  `slug`(= handle)를 키로 맵을 만들어 각 섹션에 넘긴다. 조회가 실패해도 페이지는 산다 — 그 섹션만 빠진다.
+- 홈(`app/page.tsx`)은 `loadPageContent("home")` 의 섹션이 있으면 그것을 그리고, 없으면 커머스 골격으로
+  강하한다. 콘텐츠 없는 것은 **정상**이다(커머스 테넌트).
+
+### 4.9 미디어 프록시 라우트 (`/media/{id}`) — **필수 부품**
+
+`mediaSrc(assetId)` 는 `/media/{id}` **경로 문자열만** 만든다. 그 경로를 받는 라우트는 프로젝트가 갖는다.
+**안 만들면 사이트의 이미지가 전부 404 다.** 아래를 `app/media/[id]/route.ts` 로 그대로 복사해라.
+
+왜 프록시가 필요한가 — 백엔드 공개 미디어는 둘 다 브라우저·크롤러가 직접 못 쓴다:
+- `/api/public/media/{id}/url` → **수 분 뒤 만료되는 presigned URL**. ISR 로 캐시된 HTML 안에서 죽고,
+  JSON-LD 에 넣으면 크롤러가 캐시한 뒤 깨진 이미지가 된다.
+- `/api/public/media/{id}/raw` → 안정 URL 이지만 **`X-Tenant` 헤더를 요구**한다(없으면 400). 크롤러도
+  `<img>` 도 그 헤더를 못 보낸다.
+
+```ts
+import {NextResponse} from "next/server";
+
+export async function GET(_req: Request, {params}: {params: Promise<{id: string}>}) {
+    const {id} = await params;
+    // id 를 URL 에 이어붙이므로 숫자만 통과시킨다(경로 주입 차단).
+    if (!/^\d+$/.test(id)) return new NextResponse(null, {status: 404});
+
+    // **미설정이면 여기서 죽는다.** 빈 헤더로 백엔드를 부르면 임의 테넌트에 조용히 붙거나
+    // 전 이미지가 400 이 되는데, 둘 다 원인이 안 보인다.
+    const base = process.env.ZALKERA_API_BASE;
+    const tenant = process.env.ZALKERA_TENANT;
+    if (!base || !tenant) throw new Error("ZALKERA_API_BASE·ZALKERA_TENANT 미설정");
+
+    let res: Response;
+    try {
+        res = await fetch(`${base}/api/public/media/${id}/raw`, {
+            headers: {"X-Tenant": tenant},
+            // 302 를 따라가면 이미지 바이트가 이 런타임을 통과한다 — Location 만 필요하다.
+            redirect: "manual",
+            cache: "no-store",
+        });
+    } catch {
+        return new NextResponse(null, {status: 502});
+    }
+
+    const location = res.headers.get("location");
+    // 302+Location 이 없으면(없는 id·타 테넌트 id) 그대로 없는 것으로 취급한다.
+    if (!location) return new NextResponse(null, {status: res.status === 404 ? 404 : 502});
+
+    return NextResponse.redirect(location, {status: 302, headers: {"Cache-Control": "no-store"}});
+}
+```
+
+- **바이트를 스트리밍하지 마라.** 그러면 모든 이미지 트래픽이 Next 런타임을 통과해 밀도 비용이 붙는다.
+  바이트는 스토리지→브라우저 직행하고, 이미지뷰당 서명 요청 1회만 낸다.
+- **`no-store` 를 지켜라** — 302 대상이 곧 만료되므로 이 응답을 캐시하면 죽은 링크를 재사용한다
+  (이미지 바이트는 스토리지 응답 헤더로 브라우저가 캐시한다).
+
+### 4.10 JSON-LD 부품 — **그대로 복사해서 쓴다**
+
+§5.1 이 요구하는 그래프를 만드는 부품이다. 재발명하지 마라 — 아래가 정본이고, 지어낸 필드·빈 값은
+구조화 데이터 정책 위반(리치결과 박탈)이다. **값이 없으면 필드를 통째로 뺀다**(널·0 을 넣지 않는다).
+
+삽입 컴포넌트(서버 컴포넌트로 유지 — `"use client"` 금지):
+
+```tsx
+export function JsonLd({data}: {data: object}) {
+    return (
+        <script
+            type="application/ld+json"
+            // `<` 를 유니코드 이스케이프 — 데이터에 `</script>` 가 섞여도 스크립트가 조기 종료되지
+            // 않는다(JSON-LD 삽입의 고전적 XSS 벡터). JSON.stringify 는 이걸 해주지 않는다.
+            dangerouslySetInnerHTML={{__html: JSON.stringify(data).replace(/</g, "\\u003c")}}
+        />
+    );
+}
+```
+
+빌더 — 전부 순수 함수다(평범한 객체를 반환한다):
+
+```ts
+import type {PostDetail, ProductDetail, RatingSummary, SiteConfig} from "@zalkera/client";
+
+/** 상품 상세. **variant 마다 Offer 하나** — 우리는 항상 variant 단위로 판다(옵션 없는 상품도 default 1개). */
+export function productJsonLd(product: ProductDetail, rating?: RatingSummary | null, siteBase = "", returnPolicy?: object | null) {
+    const url = `${siteBase}/products/${product.slug}`;
+    const offers = product.variants.map((v) => ({
+        "@type": "Offer", url, price: v.price, priceCurrency: v.currency,
+        availability: v.inStock ? "https://schema.org/InStock" : "https://schema.org/OutOfStock",
+        ...(v.sku ? {sku: v.sku} : {}),
+        ...(v.optionSignature ? {name: v.optionSignature} : {}),   // 단순 상품은 빈 문자열 — 이름을 안 붙인다
+        ...(returnPolicy ? {hasMerchantReturnPolicy: returnPolicy} : {}),
+    }));
+    return {
+        "@context": "https://schema.org", "@type": "Product", name: product.name, url,
+        // 페이지가 그리는 그 이미지 — **안정 URL(`/media/{id}`)**. presigned 는 만료돼 크롤러 캐시가 죽는다.
+        ...(product.coverAssetId != null ? {image: [`${siteBase}/media/${product.coverAssetId}`]} : {}),
+        ...(product.description ? {description: product.description} : {}),
+        ...(offers.length > 0 ? {offers} : {}),
+        // 후기 0건이면 aggregateRating 자체를 뺀다 — ratingValue:0 은 "0점짜리 상품"이라는 거짓 진술이다.
+        ...(rating && rating.reviewCount > 0
+            ? {aggregateRating: {"@type": "AggregateRating", ratingValue: rating.averageRating, reviewCount: rating.reviewCount}}
+            : {}),
+    };
+}
+
+/** 사이트 주체 — 홈에 1회. 업태는 **명시 입력값으로만** 좁힌다(테마 선택은 업태 진술이 아니다). */
+export function organizationJsonLd(config: SiteConfig, siteBase: string, type?: string) {
+    return {
+        "@context": "https://schema.org",
+        // 모르는 값·미설정은 Organization — 거짓 진술보다 덜 구체적인 진술이 낫다.
+        // 온라인 전용 몰에 LocalBusiness 를 붙이지 마라(주소·영업시간을 요구하는 타입이다).
+        "@type": type ?? (config.businessType === "BEAUTY" ? "BeautySalon" : "Organization"),
+        name: config.companyName, url: siteBase,
+        ...(config.tel ? {telephone: config.tel} : {}),
+        ...(config.email ? {email: config.email} : {}),
+        ...(config.address ? {address: {"@type": "PostalAddress", streetAddress: config.address, addressCountry: "KR"}} : {}),
+    };
+}
+
+/** 블로그·공지 상세. **author 를 넣지 마라** — 데이터에도 화면에도 없다(지어내면 위반). */
+export function blogPostingJsonLd(post: PostDetail, siteBase: string) {
+    return {
+        "@context": "https://schema.org", "@type": "BlogPosting",
+        headline: post.title, url: `${siteBase}/blog/${post.slug}`,
+        ...(post.publishedAt ? {datePublished: post.publishedAt} : {}),
+        ...(post.summary ? {description: post.summary} : {}),
+        ...(post.coverAssetId != null ? {image: [`${siteBase}/media/${post.coverAssetId}`]} : {}),
+    };
+}
+
+/** 고정 페이지(회사소개·이용안내 등). 없으면 순수 마케팅 사이트는 인용될 노드가 홈 하나뿐이 된다. */
+export function webPageJsonLd(page: {title: string; slug: string}, siteBase: string, description?: string) {
+    return {
+        "@context": "https://schema.org", "@type": "WebPage",
+        name: page.title, url: `${siteBase}/${page.slug}`,   // name 은 페이지가 그리는 <h1> 과 같은 값
+        ...(description ? {description} : {}),
+    };
+}
+
+function itemListNode(items: Array<{name: string; url: string}>) {
+    return {
+        "@type": "ItemList",
+        // position 은 **화면에 보이는 그 순서** — 원장이 정한 노출 순서를 기계에도 같은 순서로 준다.
+        itemListElement: items.map((item, i) => ({"@type": "ListItem", position: i + 1, name: item.name, url: item.url})),
+    };
+}
+
+/**
+ * 목록 표면(상품 목록·시술 메뉴·글 목록). **요약형** — 각 항목은 url 로 상세를 가리키고 이름만 든다.
+ * 가격·재고를 여기 복제하지 마라: 같은 사실이 두 곳에 있으면 갈라지고 갈라진 쪽이 거짓이 된다.
+ * 가격의 정본은 상세의 `Offer` 다.
+ */
+export function itemListJsonLd(items: Array<{name: string; url: string}>) {
+    return {"@context": "https://schema.org", ...itemListNode(items)};
+}
+
+/**
+ * 카테고리 페이지 — `ItemList` 를 `mainEntity` 로 **품는다**(나란히 내면 "이 페이지가 곧 그 목록"이
+ * 안 전해진다). **상품 0건이어도 낸다** — 이 페이지의 주어가 이 카테고리 하나라 "지금 0건"이 참인
+ * 진술이기 때문이다(카탈로그 전체 목록에서 빈 ItemList 를 빼는 것과 갈리는 자리다).
+ */
+export function collectionPageJsonLd(category: {name: string; slug: string}, items: Array<{name: string; url: string}>, siteBase: string, description?: string) {
+    return {
+        "@context": "https://schema.org", "@type": "CollectionPage",
+        name: category.name, url: `${siteBase}/c/${category.slug}`,
+        ...(description ? {description} : {}),
+        mainEntity: itemListNode(items),   // 중첩 노드에 @context 를 다시 달지 않는다
+    };
+}
+
+/** 경로 이동 — 검색결과에 `홈 > 상품 > 이름` 으로 노출된다. items 는 표시순. */
+export function breadcrumbJsonLd(items: Array<{name: string; url: string}>) {
+    return {
+        "@context": "https://schema.org", "@type": "BreadcrumbList",
+        itemListElement: items.map((item, i) => ({"@type": "ListItem", position: i + 1, name: item.name, item: item.url})),
+    };
+}
+```
+
+**환불 정책**(`MerchantReturnPolicy`)을 Offer 에 붙이면 구글이 "무료 반품·N일 이내"를 리치결과에 노출하고
+AI 에이전트가 "이 가게 환불 되나"를 읽는다. 두 규율이 중요하다:
+- **금액은 `config.defaultReturnShippingFee`(운영 값)** 를 쓴다 — 정책 문구가 아니라. 실제 차감액과
+  표시가 갈리면 표시 의무 위반이다.
+- **기간(`windowDays`)이 없으면 정책 전체를 내지 않는다** — 구글이 `merchantReturnDays` 를 요구하고,
+  창구를 모르는 채 "반품 됨"만 주장하는 건 무의미하다.
+
+```ts
+export function merchantReturnPolicyJsonLd(config: SiteConfig, windowDays?: number) {
+    // 구글이 정수를 요구한다. 7.5·-1 을 흘리면 정책 노드 전체가 무효 판정된다.
+    if (windowDays == null || !Number.isInteger(windowDays) || windowDays < 0) return null;
+    const fee = config.defaultReturnShippingFee;
+    return {
+        "@type": "MerchantReturnPolicy", applicableCountry: "KR",
+        returnPolicyCategory: "https://schema.org/MerchantReturnFiniteReturnWindow",
+        merchantReturnDays: windowDays, returnMethod: "https://schema.org/ReturnByMail",
+        ...(fee != null && fee > 0
+            ? {returnFees: "https://schema.org/ReturnShippingFees",
+               returnShippingFeesAmount: {"@type": "MonetaryAmount", value: fee, currency: "KRW"}}
+            : {returnFees: "https://schema.org/FreeReturn"}),   // 0원이면 무료 반품 — 그 사실이 노출된다
+    };
+}
+```
+
+> 테넌트 커머스 정책은 **스키마리스 JSON** 이라 소비 쪽에서 방어적으로 읽어라. 최상위 한 겹만 보면
+> 부족하다 — `{"returns":{"notes":{"ko":"…","en":"…"}}}` 같은 다국어 객체가 흔한 확장 모양인데, 그걸
+> 그대로 React 자식으로 그리면 *"Objects are not valid as a React child"* 로 페이지가 500 이 된다.
+> **필드별로 `typeof` 를 확인**하고 형에 안 맞으면 그 필드만 버려라(절 전체를 버리지 않는다).
+> 정책은 부가 정보이므로 파싱 실패가 페이지를 죽이면 안 된다.
 
 ## 5. 흔한 실수(하지 말 것)
 
@@ -360,6 +629,14 @@ if (booking.orderNo) {                  // status=PENDING
 - ❌ **`var(--oneq-*)` 참조**(정의처 없는 죽은 레거시 토큰). ✅ 테넌트 색은 토큰 유틸리티(`bg-primary`·
   `text-primary` 등, §8)로 쓴다.
 - ❌ 서버에서 `submitInquiry`/`submitLead`/`recordPostView` 부를 때 clientIp 누락 → 방문자 전원 rate-limit.
+- ❌ **콘텐츠 파일 사이트에서 페이지를 라우트로 신설**(`app/오시는길/page.tsx` 를 새로 짜기). ✅ `content/pages/<slug>.json`
+  **+ 매니페스트 1행**이면 끝이고 라우팅·sitemap 은 이미 있다(§4.8). 라우트를 새로 짜면 그 페이지만 계약 밖으로
+  나가 다음번 "말로 고치기"가 다시 tsx 탐색이 된다 — 실측된 회귀다.
+- ❌ **소스 파일에 숫자 id 적기**(`"assetId": 12`·`"productIds": [3,7]`). ✅ 소스 방언으로 — 에셋은 `public/`
+  루트 절대 경로, 상품은 handle(§9.2). 숫자 id 는 테넌트 스코프라 그 소스를 재업로드하면 의미를 잃는다.
+- ❌ **콘텐츠 파일에 `sortOrder` 를 넣거나 읽은 뒤 정렬**. ✅ 배열 순서가 곧 화면 순서다(§9.1).
+- ❌ **콘텐츠 json 을 런타임 `fs.readFile` 로 읽기.** ✅ `content/index.ts` 정적 import — fs 로 읽으면 dev HMR 이
+  안 돌고 `next build`(standalone) 산출물에서 페이지가 통째로 사라진다.
 - ❌ **상품·후기·게시글 등 도메인 데이터를 하드코딩**(리터럴 배열·목업 후기 등). ✅ 반드시 `@zalkera/client`
   로 조회한다. 계약에 없는 데이터(예: slug→productId 매핑이 없어 후기를 못 붙임)면 **하드코딩으로 때우지
   말고 그 사실을 보고**한다. 하드코딩한 데이터는 프리뷰·실사이트에서 실데이터와 갈라져 첫인상을 죽인다.
@@ -369,7 +646,7 @@ if (booking.orderNo) {                  // status=PENDING
   실시간·개인화 데이터(라이브 재고·개인화)는 **클라이언트 컴포넌트(아일랜드)**로 가져오고, 상태 변경
   (장바구니·주문)은 **BFF route handler** 로 한다. 신선도는 **온디맨드 revalidate**(백엔드 데이터 변경 시
   `POST /api/revalidate`)로 지킨다. 동적 SSR 이 꼭 필요하면(예: 검색) **정당화 주석**(`// zalkera-allow-dynamic:
-  <이유>`)이 필요하다 — 서버 동적 렌더는 상시 런타임 원가라 CI validator(§5)가 SEO 라우트에서 강제 차단한다.
+  <이유>`)이 필요하다 — 서버 동적 렌더는 **상시 런타임 원가**라 SEO 라우트에서는 기본이 아니다.
 
 ## 5.1 산출물 규범 — 발견되는 사이트 (필수)
 
@@ -379,8 +656,8 @@ if (booking.orderNo) {                  // status=PENDING
 - ✅ **SEO 페이지에 JSON-LD(schema.org) 필수.** 상품 상세 = `Product` + variant 마다 `Offer`(price·
   priceCurrency·availability) + 후기 있으면 `AggregateRating`. 홈 = `Organization`(오프라인 점포면
   `LocalBusiness`, 뷰티샵이면 `BeautySalon` 으로 좁힌다). 목록·상세엔 `BreadcrumbList`.
-  템플릿의 `src/components/JsonLd.tsx`(안전 직렬화 + `productJsonLd`/`organizationJsonLd`/
-  `breadcrumbJsonLd` 헬퍼)를 **그대로 쓴다 — 재발명 금지**.
+  **§4.10 의 부품**(안전 직렬화 + `productJsonLd`/`organizationJsonLd`/`breadcrumbJsonLd`)을
+  **그대로 복사해 쓴다 — 재발명 금지**.
 - ✅ **목록 라우트도 그래프를 낸다 — `ItemList`.** 상품 목록(`/products`)·글 목록(`/blog`)은 **화면에 그리는
   바로 그 순서·그 항목**으로 `ItemList` 를 낸다(`itemListJsonLd`). 왜 목록에도 그래프가 필요한가: 상세 N건만
   있으면 "이 가게가 무엇을 파는가"를 기계가 한 번에 못 받고 상세를 하나씩 발견해야 한다 — 목록은 그 N건을
@@ -390,27 +667,26 @@ if (booking.orderNo) {                  // status=PENDING
   내지 않는다**(빈 목록을 그래프로 주장하지 않는다 — "페이지에 없는 것을 쓰지 마라"의 목록판). 목록에도
   `BreadcrumbList` 를 함께 낸다. 그리고 목록은 **ISR 로 유지한다** — 정렬·필터를 `searchParams` 로 받는 순간
   라우트가 동적 렌더로 강등돼 크롤러 방문마다 서버 렌더가 돈다. 더 넓히려면 `/products/page/[n]` 같은
-  **정적 세그먼트**로 늘려라. 본보기: `src/app/products/page.tsx` · `src/app/blog/page.tsx`.
+  **정적 세그먼트**로 늘려라.
 - ✅ **예약(시술) 사이트의 목록 보장은 `SERVICE_MENU` 섹션이 낸다.** 섹션 어휘 `SERVICE_MENU` 는 계약상
-  `jsonLd: "ItemList"` 이고(`SECTION_CONTRACT` · `contractRev` 2 이상), config 의 `productIds` **순서 그대로**
+  `jsonLd: "ItemList"` 이고(`SECTION_CONTRACT` · `contractRev` 2 이상), config 의 상품 참조 배열
+  (DB 방언 `productIds` · 소스 방언 `products` — §9.2) **순서 그대로**
   목록 그래프를 낸다 — 원장이 정한 노출 순서를 기계에도 같은 순서로 준다. 시술 목록의 정위치는 **홈의 이
   섹션**이지 별도 라우트가 아니다: 뷰티 사이트에 목록 라우트를 강제하는 것은 디자인 자유를 깎으면서 얻는
   것이 없어서, 예약 유형의 목록 보장은 이 산출로 충족한다(`FAQ_LIST`↔`FAQPage` 와 같은 선례 — 목록의 정본이
-  그 섹션의 배열이라 다른 데서 다시 만들면 두 벌이 되고 갈라진다). 본보기:
-  `src/components/sections/ServiceMenuSection.tsx`.
+  그 섹션의 배열이라 다른 데서 다시 만들면 두 벌이 되고 갈라진다).
 - ✅ **CMS 고정 페이지(`/[slug]`)를 비워 두지 마라 — `WebPage` + `BreadcrumbList`.** 홈은 `Organization`,
   상품은 `Product`, 글은 `BlogPosting` 을 내는데 콘솔·시드가 만든 서브페이지(회사소개·이용안내 등)만 그래프가
   비기 쉽다. 순수 마케팅 사이트는 **그 서브페이지가 콘텐츠의 전부**라, 비어 있으면 답변 엔진이 인용할 노드가
   홈 하나뿐이 된다. `name` 은 페이지가 그리는 `<h1>` 과 같은 값으로, `description` 은 SEO 오버라이드가
   **실제로 있을 때만** 붙인다(`datePublished`·`author`·`image` 는 그 페이지에 그런 것이 없으므로 내지 않는다).
-  서브페이지의 `BreadcrumbList` 는 홈 아래 1뎁스(`홈 > 회사소개`)다. 본보기: `src/app/[slug]/page.tsx` ·
-  `webPageJsonLd`.
+  서브페이지의 `BreadcrumbList` 는 홈 아래 1뎁스(`홈 > 회사소개`)다. 그래프는 `webPageJsonLd`(§4.10)로 낸다.
 - ✅ **`sitemap.ts`·`robots.ts` 필수.** sitemap 엔 **실제로 존재하는 공개 라우트만** — 홈 · **목록 라우트
   (`/products`·`/blog`)** · 상품 상세 · 글 상세 · 콘텐츠 페이지. 목록 라우트를 빼면 카탈로그의 허브가 크롤러에게
   안 알려져 상세 N건을 개별 발견에만 맡기게 된다. 반대로 **비어 있는 목록은 싣지 않는다** — 상품 0건에
   `/products` 를, 글 0건에 `/blog` 를 실으면 크롤러에게 빈 페이지를 색인시키는 것이라 위 `ItemList` 규칙과
-  같은 판단이다(둘 다 "없는 것을 있다고 말하지 않는다"). 본보기 `src/app/sitemap.ts` 가 목록 API 를 훑어
-  이 조건부 등재를 한다. robots 는 세션·쓰기 경로(`/api/`·`/cart`·`/checkout`·`/mypage`·`/orders`·`/login`·
+  같은 판단이다(둘 다 "없는 것을 있다고 말하지 않는다"). **목록 API 를 훑어 0건이면 빼는 조건부 등재**를
+  `sitemap.ts` 안에서 한다. robots 는 세션·쓰기 경로(`/api/`·`/cart`·`/checkout`·`/mypage`·`/orders`·`/login`·
   `/auth`)만 막고 공개 카탈로그는 전부 연다. **AI 크롤러(GPTBot·ClaudeBot 등)를 막지 마라** — 발견 경로를
   우리 손으로 닫는 것이다.
 - ✅ **절대 URL.** JSON-LD·sitemap·robots 는 상대경로 불가. 단일 사이트는 env(`ZALKERA_SITE_URL`),
@@ -420,7 +696,7 @@ if (booking.orderNo) {                  // status=PENDING
 - ❌ **페이지에 없는 것을 JSON-LD 에 쓰지 마라.** 구조화 데이터는 **보이는 내용만** 서술한다. 후기 0건인데
   `aggregateRating`, 렌더하지도 않는 `image`, 지어낸 브랜드·재고는 전부 구조화 데이터 정책 위반(리치결과 박탈).
   값이 없으면 **그 필드를 통째로 뺀다**(널·0 을 넣지 않는다).
-- ✅ **상품 이미지는 `/media/{id}` 안정 URL 로.** 템플릿의 `src/app/media/[id]/route.ts` 가 `X-Tenant` 를 붙여
+- ✅ **상품 이미지는 `/media/{id}` 안정 URL 로.** §4.9 의 프록시 라우트가 `X-Tenant` 를 붙여
   백엔드를 부르고 302 Location 만 넘긴다(바이트는 스토리지→브라우저 직행 — Next 런타임에 태우지 마라).
   `<img src={`/media/${product.coverAssetId}`} loading="lazy">` + JSON-LD `image` 둘 다 이 URL 을 쓴다.
   `next/image` 는 최적화 프록시가 바이트를 런타임에 태우므로 금지(쓰려면 `unoptimized`).
@@ -436,9 +712,7 @@ if (booking.orderNo) {                  // status=PENDING
 ```bash
 npx zalkera-aeo-check https://개시된사이트 --category BOOKING   # 0=통과 · 1=미충족 · 2=실행 불가
 npx zalkera-aeo-check https://개시된사이트 --site-wide-only     # 보장 주장이 없는 사이트(사이트 축만)
-# 템플릿에서 출발한 프로젝트라면 같은 검사기를 이렇게도 부른다:
-npm run check:aeo -- https://개시된사이트 --category BOOKING
-npm run check:aeo -- --print-guarantees                        # 잣대 해석만 확인(크롤 없음)
+npx zalkera-aeo-check --print-guarantees                        # 잣대 해석만 확인(크롤 없음)
 ```
 
 - ❌ 배송 전(PAID)에 후기 작성 시도 → `NOT_DELIVERED_YET`(409). ✅ 주문이 **DELIVERED 이상**일 때만
@@ -493,15 +767,83 @@ catch (e) {
 
 ## 8. 스타일 규약 — Tailwind v4 + 테마 토큰 (필수)
 
-템플릿은 **Tailwind v4** 와 **테마 토큰**으로 스타일한다. 화면을 그릴 때 아래를 지킨다 — 어기면
-생성물이 초라해지거나(생짜 HTML) 테넌트의 "말로 색 바꾸기"가 깨진다. CI validator(S1~S5)가 강제한다.
+잘커라 사이트는 **Tailwind v4** 와 **테마 토큰**으로 스타일한다. 화면을 그릴 때 아래를 지킨다 — 어기면
+생성물이 초라해지거나(생짜 HTML) 테넌트의 "말로 색 바꾸기"가 깨진다.
+
+> 이 절은 **규약이지 게이트가 아니다.** 어떤 스택으로 짜든 사이트는 개시된다 — 판정 잣대는 §5.1 의
+> 산출물 검사(`zalkera-aeo-check`)뿐이고 소스를 보지 않는다. 다만 테마 토큰을 안 쓰면 테넌트가
+> 콘솔에서 색을 바꿔도 화면이 안 따라온다(그건 검사기가 아니라 **기능이 빠지는** 것이다).
 
 **스택 — 이것만 쓴다**
 - ✅ **Tailwind v4 유틸리티 클래스로만** 스타일한다. CSS 파일은 `src/app/globals.css` **하나뿐**이다 —
-  새 `.css` 파일·CSS Modules·CSS-in-JS 를 추가하지 마라(S3·S5).
-- ❌ 인라인 `style={{}}`(S2), 웹폰트·외부 스타일 CDN 추가, `tailwind.config.*` 생성(v4 는 config 없이 돈다).
+  새 `.css` 파일·CSS Modules·CSS-in-JS 를 추가하지 마라.
+- ❌ 인라인 `style={{}}`, 웹폰트·외부 스타일 CDN 추가, `tailwind.config.*` 생성(v4 는 config 없이 돈다).
   인라인 style 은 **CSS 변수 주입**(`style={{"--x":v}}`) 한 용례에만 허용된다(루트 layout 의 테마 주입이 그것).
 
+**토큰 정의 — `globals.css` 의 `@theme` 블록 (없으면 아래 유틸리티가 존재하지 않는다)**
+
+Tailwind v4 는 config 없이 돌고 토큰을 **CSS 에서** 선언한다. 이 블록이 없으면 `bg-primary`·`text-muted` 같은
+클래스가 **그냥 안 먹는다**(에러도 안 난다). §4.9 의 미디어 라우트와 같은 부류의 필수 부품이라 전문을 싣는다.
+
+```css
+@import "tailwindcss";
+
+@theme {
+    /* 테넌트 오버라이드 지점 — themeColors 가 <html> inline style 로 이 값들을 덮는다 */
+    --color-primary: oklch(20.8% 0.042 265.755);            /* slate-900 — 테넌트 색이 얹히기 전 기본 */
+    --color-primary-foreground: #ffffff;                     /* primary 위 글자색(서버가 명도로 산출) */
+    --color-secondary: oklch(55.4% 0.046 257.417);
+    --color-background: #ffffff;
+    --color-foreground: oklch(20.8% 0.042 265.755);
+
+    /* slate 중립 스케일에서 파생 — 테넌트 오버라이드 대상이 아니다(콘솔 스키마에 키가 없다) */
+    --color-muted: oklch(55.4% 0.046 257.417);
+    --color-border: oklch(92.9% 0.013 255.508);
+    --color-surface: oklch(98.4% 0.003 247.858);
+    --color-danger: oklch(57.7% 0.245 27.325);
+
+    /* 웹폰트 다운로드 없음 — 시스템 스택. font knob 이 --font-sans 를 덮는다 */
+    --font-sans: ui-sans-serif, system-ui, -apple-system, "Apple SD Gothic Neo",
+        "Malgun Gothic", "Noto Sans KR", sans-serif;
+
+    /* radius knob — 무단위 배수가 스케일 전체를 곱한다. sharp=0 · soft=1(기본) · round=2.
+       var() 폴백 1 이라 knob 미주입 시에도 Tailwind 기본 스케일과 정확히 일치한다. */
+    --radius-knob: 1;
+    --radius:     calc(0.25rem  * var(--radius-knob, 1));
+    --radius-sm:  calc(0.25rem  * var(--radius-knob, 1));
+    --radius-md:  calc(0.375rem * var(--radius-knob, 1));
+    --radius-lg:  calc(0.5rem   * var(--radius-knob, 1));
+    --radius-xl:  calc(0.75rem  * var(--radius-knob, 1));
+    --radius-2xl: calc(1rem     * var(--radius-knob, 1));
+
+    /* density knob — 이 베이스가 전 여백을 스케일한다(cozy=0.25rem 기본 · compact=0.22rem) */
+    --spacing: 0.25rem;
+}
+```
+
+루트 `layout` 이 이 값들을 덮어 쓰는 것이 "말로 색 바꾸기"의 전부다:
+
+```tsx
+const {cssVars} = parseThemeColors(config.themeColors);   // §3 계약 헬퍼 — 화이트리스트 파서
+return <html lang="ko" style={cssVars}>{/* … */}</html>;
+```
+
+`@theme` 만으로는 부족하다. Tailwind preflight 가 제목·폼 요소를 리셋하므로, **base 레이어가 없으면
+아래 레시피의 "`<h1>` 그대로"·"폼은 맨 요소 그대로"가 본문 크기 제목과 생짜 input 을 낳는다.**
+같은 파일에 이어 둔다:
+
+```css
+@layer base {
+    h1 { @apply text-2xl font-semibold tracking-tight; }
+    h2 { @apply text-lg font-semibold tracking-tight; }
+    a  { @apply underline-offset-4 hover:underline; }   /* 색은 상속 — 액센트 남발 금지 */
+    input, select, textarea {
+        @apply w-full rounded-lg border border-border bg-background px-3 py-2 text-sm
+               placeholder:text-muted focus:outline-2 focus:outline-primary;
+    }
+}
+```
+
 **토큰 — 색은 토큰으로만**
 | 유틸리티 | 뜻 |
 |---|---|
@@ -512,7 +854,7 @@ catch (e) {
 | `border-border` | 경계선 | `bg-surface` | 카드·필드 배경 | `text-danger` | 오류 |
 
 - ✅ 테넌트 브랜드색은 **`primary` 토큰으로만** 표현한다. ❌ hex 하드코딩(`bg-[#e91e63]`)은 콘솔의
-  "말로 색 바꾸기"를 죽인다(S4).
+  "말로 색 바꾸기"를 죽인다.
 - ✅ 중립 명도 단계가 토큰 표에 없으면 **slate 스케일만**(`text-slate-400` 등). ❌ gray·zinc·stone 혼용,
   유채색 팔레트(rose·emerald 등) 직접 사용 금지 — 새 색이 필요하면 **지어내지 말고 보고**한다.
 - 간격·타이포·라운드·섀도는 **Tailwind 기본 스케일**(`p-4`·`text-2xl`·`rounded-lg`·`shadow-sm`)을 쓴다.
@@ -520,7 +862,7 @@ catch (e) {
 
 **레시피**
 - 페이지 `<main className="py-8">` · 섹션 `<section className="mb-12">` · 제목은 base 가 크기를 주므로 `<h1>` 그대로.
-- 버튼은 `src/components/ui/Button`(`<Link>`·`<a>` 에는 `buttonClasses(variant)` 문자열) · 카드는 `ui/Card`.
+- 버튼·카드는 **프리미티브 한 벌**을 만들어 재사용한다(화면마다 새로 만들지 마라).
 - 폼 필드(`<input>`·`<select>`·`<textarea>`)는 base 레이어가 스타일하므로 **맨 요소 그대로** 쓴다.
 
 **절제 — 화려하게 만들지 마라**
@@ -528,7 +870,8 @@ catch (e) {
 
 **전역 토큰 knob — 말로 폰트·모서리·밀도 바꾸기 (계약버전 2)**
 색 외에 **폰트·모서리 둥글기·여백 밀도**도 테넌트가 콘솔에서 "말로" 바꾼다(`site.theme.update`). 값은 **enum**
-뿐이며 `src/lib/theme.ts` 매핑 테이블이 CSS 변수로 변환해 색과 같은 경로(`<html>` inline 주입)로 전 화면에 반영된다.
+뿐이며 **이 패키지의 `parseThemeColors`**(§3 계약 헬퍼)가 CSS 변수로 변환해 색과 같은 경로
+(`<html>` inline 주입)로 전 화면에 반영된다. 매핑 테이블을 직접 만들지 마라 — 그 함수가 정본이다.
 
 | knob | enum 값 | 효과 |
 |---|---|---|
@@ -541,22 +884,22 @@ catch (e) {
 - 새 knob 값(예: 다른 폰트)이 필요하면 **지어내지 말고 보고**한다 — enum 확장은 계약버전 증가를 동반한다.
 
 **테마 동작 — 배선을 건드리지 마라**
-- 테넌트 색은 `getSiteConfig().themeColors` → **루트 `layout` 이 `<html>` 의 CSS 변수로 주입**한다. 이 배선
-  (layout 의 테마 주입·`src/lib/theme.ts`)을 제거·우회하지 마라. **색 변경에 코드 수정이 필요하면 설계 위반**이다 —
+- 테넌트 색은 `getSiteConfig().themeColors` → `parseThemeColors` → **루트 `layout` 이 `<html>` 의 CSS
+  변수로 주입**한다. 이 배선을 제거·우회하지 마라. **색 변경에 코드 수정이 필요하면 설계 위반**이다 —
   콘솔에서 색을 바꾸면 재코딩 없이 반영되는 것이 정상이다.
 
-**UI 프리미티브 관용구 — 있는 것을 쓴다**
+**UI 프리미티브 관용구 — 한 벌만 만들어 재사용한다**
 - `cn(...)` = `twMerge(clsx(...))`. 조건부 클래스와 **덮어쓰기**(`cn("px-4", props.className)` 에서 `px-6` 이 이김)를
   둘 다 처리한다. 문자열 이어붙이기로 대체하지 마라 — 덮어쓰기가 조용히 안 먹는다.
-- 변형(variant)은 **cva** 로 선언한다(`ui/Button.tsx` 가 본보기). 조건문으로 클래스 문자열을 조립하지 마라.
-- `ui/Button`(버튼) · `buttonClasses(variant)`(`<Link>`·`<a>` 용 문자열) · `ui/Card`(카드) · `ui/Icon`(아이콘).
+- 변형(variant)은 **cva** 로 선언한다. 조건문으로 클래스 문자열을 조립하지 마라.
+- 버튼·카드·아이콘은 **프리미티브 한 벌**로 두고 화면마다 새로 만들지 마라. `<Link>`·`<a>` 에는
+  같은 변형을 **클래스 문자열로 내주는 헬퍼**를 함께 둔다(버튼 컴포넌트를 앵커로 감싸지 않는다).
 - 새 프리미티브가 정말 필요하면 shadcn/ui 에서 **발췌**해 온다(CLI 상시 설치 아님). 발췌물은 아래 재작성 표를
   적용하고 `asChild`/`Slot` 을 제거해 **Radix 의존 0** 을 유지한 뒤 `src/components/ui/` 에 커밋한다.
 
 **shadcn 발췌 재작성 표 — 남의 토큰 어휘는 반입 금지**
 shadcn 소스는 자기 변수층(`--card`·`--muted-foreground` …)을 전제한다. 우리는 그 층을 들이지 않는다(토큰 레이어가
-둘이 되면 테넌트 색 주입의 우선순위가 사람 머리에 얹힌다). 발췌 시 **좌변을 우변으로 기계적으로 바꾼다**.
-CI validator **S6** 가 좌변 잔존을 error 로 막는다.
+둘이 되면 테넌트 색 주입의 우선순위가 사람 머리에 얹힌다). 발췌 시 **좌변을 우변으로 기계적으로 바꾼다** — 아래 표가 그 규범이다.
 
 | shadcn | 우리 |
 |---|---|
@@ -573,39 +916,120 @@ CI validator **S6** 가 좌변 잔존을 error 로 막는다.
 
 ## 9. 섹션 어휘 — 페이지는 데이터로 그린다
 
-고정 페이지(`getPage(slug)`)는 본문 HTML 만 있는 게 아니라 **섹션 배열**을 갖는다. 각 섹션은 `type`(코드 enum)과
-`config`(타입별 JSON)뿐이고, 백엔드는 config 를 **파싱하지 않는다** — 스키마는 프론트 계약이다.
+고정 페이지는 본문 HTML 한 덩어리가 아니라 **섹션 배열**이다. 각 섹션은 `type`(코드 enum)과 `config`(타입별
+JSON)뿐이고, 백엔드는 config 를 **파싱하지 않는다** — 스키마는 프론트 계약이다.
+
+**왜 이 구조인가**: 콘텐츠가 마크업에 박히지 않고 계약을 타므로, 테넌트가 "말로" 고친 것이 재코딩 없이
+반영된다("FAQ 에 배송 질문 추가해줘"). **마크업에 문구를 하드코딩하면 이 경로가 죽는다** — 문구 한 줄을
+고치는 일이 컴포넌트 트리 탐색이 되고, 그 탐색이 곧 토큰이다.
+
+**그 배열이 사는 곳은 둘이고, 어느 쪽인지는 레포가 선언한다.**
+
+```json
+// package.json
+"zalkera": { "styling": "tailwind-tokens", "content": "source" }
+```
+
+| 선언 | 의미 |
+|---|---|
+| `"source"` | 사이트의 얼굴(페이지·섹션·문구·섹션 이미지·내비)의 정본이 **레포 파일**. **새로 만드는 사이트는 이 형상을 쓴다**(v1 팩 태생 사이트가 남아 있는 동안 그쪽은 `sections-db` 다) |
+| `"sections-db"` | 전환기 표기 — 섹션이 백엔드에 있고 `getPage(slug)` 가 준다(구 프리셋 태생 사이트) |
+| 미선언 | 안전 기본 — **선언이 없으면 이 계약을 안 쓰는 레포로 본다**(계약 검사도 걸지 않는다) |
+
+> ⚠ 이 선언은 **지금은 계약 표기일 뿐**이다. 콘솔이 이 값을 읽어 페이지·섹션 폼을 감추는 배선은
+> **아직 서지 않았다** — 그때까지는 선언과 무관하게 콘솔 폼이 보인다. 레시피가 실물을 앞지르지
+> 않으려고 그대로 적는다.
+
+두 거처는 **같은 어휘·같은 config 키**를 쓴다. 다른 것은 참조를 적는 방언 하나뿐이다(§9.2).
+
+### 9.1 소스 정본 (`"content": "source"`) — 권장 형상
+
+```
+content/
+  index.ts          # 이 디렉터리의 유일한 코드 — 페이지 json 을 정적 import 해 slug→맵으로 내놓는다
+  nav.json          # { "header": [{label, href}], "footer": [...] }
+  pages/home.json   # 페이지당 1파일. 키가 곧 URL 경로(home → /, about → /about)
+```
+
+```json
+// content/pages/home.json
+{
+  "title": "홈",
+  "seo": { "title": "…", "description": "…" },
+  "sections": [
+    { "type": "HERO", "config": { "title": "…", "asset": "/images/hero.png" } },
+    { "type": "SERVICE_MENU", "config": { "products": ["care-basic", "gel-onecolor"] } }
+  ]
+}
+```
+
+- **배열 순서가 화면 순서다.** `sortOrder` 키는 **없다** — 정렬하지 마라. 순서를 정하는 곳이 둘이면
+  "후기를 위로 올려줘"가 매번 어느 쪽을 고치는지 판별 문제가 된다.
+- **`config` 는 객체다**(문자열이 아니다). 두 거처를 하나의 소비자로 읽으려면 `readConfig` 를 쓴다 —
+  문자열이든 객체든 받는다.
+- **정적 import 매니페스트를 우회하지 마라.** 런타임 `fs` 로 읽으면 ⑴ dev 에서 json 을 고쳐도 HMR 이
+  안 돌고(확인이 비싸지면 재시도가 늘고 그게 곧 토큰이다) ⑵ `next build`(standalone) 산출물에 콘텐츠가
+  트레이싱되지 않아 **개시된 사이트에서만** 페이지가 사라진다.
+- **페이지 신설 = json 1개 + 매니페스트 1행.** 라우트를 새로 짜지 마라 — `src/app/[slug]/page.tsx` 하나가
+  전 페이지를 그리고 `src/app/sitemap.ts` 가 매니페스트에서 등재한다. 라우트를 새로 짜면 그 페이지만
+  계약 밖으로 나가 "말로 고치기"가 다시 tsx 탐색이 된다.
+- **로더는 절대 throw 하지 않는다.** json 은 사람과 AI 가 손으로 고치는 파일이라 형상이 틀릴 수 있다 —
+  틀린 곳만 안 그려지고 페이지는 산다. 문구 하나 잘못 고쳤다고 사이트가 500 이면 "말로 고친다"가 성립 안 한다.
+- 이 계약을 **안 지킨 레포도 정상으로 돈다.** 문구를 tsx 에 직접 든 레포도 개시·발행·"말로 고치기"가
+  전부 동작한다 — 강제가 아니라 권장이고, 검사는 위 선언을 **스스로 했을 때만** 격상된다.
+
+### 9.2 참조 방언 — 소스는 숫자 id 를 못 쓴다
+
+DB 는 자기가 발급한 숫자 id 를 쓰고, **소스는 그 id 를 알 수 없으므로** 사람이 읽고 쓰는 참조를 쓴다.
+**거처가 방언을 정한다.**
+
+| 참조 | DB 방언(`sections-db`) | 소스 방언(`source`) |
+|---|---|---|
+| 에셋 | `assetId`·`*AssetId` : number → `mediaSrc(id)` | `asset`·`*Asset` : `"/images/hero.png"` → `assetPath(v)` |
+| 상품 1개 | `productId` : number | `product`·`*Product` : handle 문자열 |
+| 상품 배열 | `productIds` : number[] | `products`·`*Products` : handle 문자열 배열 |
+
+- **handle = `ProductSummary.slug`.** 소스가 DB 카탈로그를 가리키는 **유일한 안정 키**다.
+- ❌ **소스에 숫자 id 를 적지 마라.** 테넌트 스코프 값이라, 고객이 그 소스를 소유하고 다른 테넌트에
+  재업로드하는 순간 의미를 잃는다.
+- `assetPath` 는 **레포 루트 절대 경로만** 통과시킨다(스킴·`//`·`..`·역슬래시 → `undefined`). 이미지 실물은
+  레포 `public/` 에 둔다. 원격 이미지는 계약 영역이 아니라 자유 영역이다.
+- `asHandleArray` 는 **배열 순서를 보존한다** — 그 순서가 노출 순서의 원장이다.
+- 상품 상세의 커버(`coverAssetId`)는 소스 방언에서도 여전히 숫자 id 다. 그건 카탈로그가 발급한 값이지
+  소스가 적는 값이 아니다 — 섹션 이미지와 상품 이미지는 다른 축이다.
+- **아래 §9.4 어휘 표의 `config` 선언은 DB 방언 표기다.** 소스에 적을 때 이 표로 옮겨 적는다.
+  키의 **의미**는 두 방언이 같다.
+
+### 9.3 DB 정본 (`"content": "sections-db"`) — 전환기
 
 ```ts
 const page = await zalkera.getPage("home");
 page.sections // [{ type: "HERO", sortOrder: 0, config: "{\"title\":\"…\"}" }, …]
 ```
 
-**왜 이 구조인가**: 콘텐츠가 마크업에 박히지 않고 계약을 타므로, 테넌트가 콘솔에서·"말로" 고친 것이 재코딩 없이
-반영된다("FAQ 에 배송 질문 추가해줘"). **마크업에 문구를 하드코딩하면 이 경로가 죽는다.**
+- `config` 가 **문자열**이다(컬럼 저장 형상). `parseConfig` 또는 `readConfig` 로 읽는다.
+- **`sortOrder` 로 한 번 더 정렬한다.** 서버가 정렬해 주지만 순서가 틀리면 화면에서 바로 티가 난다.
+- **key 는 `type`+`sortOrder`+index 로 짠다.** `PageSection` 계약에 id 가 없다(실측).
+
+### 9.4 어휘 (12종) — 두 거처 공통
 
 **규약**
-- `config` 는 **문자열**이다. 파싱은 `parseConfig` + `asString`/`asId`/`asIdArray`/`asObjectArray` 로 한다
-  (이 패키지가 export — 절대 throw 하지 않는다). 필수 필드가 없으면 **그 섹션만 안 그린다**.
-  페이지 전체가 죽으면 안 된다.
-- **미지 타입은 조용히 건너뛴다.** 어휘는 append-only 라 백엔드가 타입을 늘려도 옛 사이트가 깨지지 않아야 한다.
+- 파싱 헬퍼는 이 패키지가 준다: `readConfig`/`parseConfig` + `asString`/`asId`/`asIdArray`/`asObjectArray`
+  + 방언 헬퍼 `asHandle`/`asHandleArray`/`assetPath`. **절대 throw 하지 않는다** — 필수 필드가 없으면
+  **그 섹션만 안 그린다**. 페이지 전체가 죽으면 안 된다.
+- **미지 타입은 조용히 건너뛴다.** 어휘는 append-only 라 타입이 늘어도 옛 사이트가 깨지지 않아야 한다.
   `default:` 에서 에러·경고를 내지 마라 — 그게 계약이다.
-- 이미지는 `assetId`(숫자)다. `mediaSrc(id)`(이 패키지 export)로 프록시 경유해 그린다.
-- **모든 href 는 `safeLinkUrl()` 을 태운다.** 콘솔 입력이라 `javascript:` 가 들어올 수 있다(저장형 XSS).
+- **모든 href 는 `safeLinkUrl()` 을 태운다.** 콘솔 입력·손으로 고친 json 이라 `javascript:` 가 들어올 수 있다(저장형 XSS).
 - 자유 HTML 은 없다 — plain text + 줄바꿈뿐(`whitespace-pre-wrap`).
+- **디스패치는 직접 짠다** — `type` 으로 컴포넌트를 고르는 `switch` 하나면 된다.
 - 타입·키를 **지어내지 마라.** 계약 정본은 백엔드 레포의 `doc/contracts/section-vocabulary.json` 이고,
-  이 패키지가 export 하는 `SECTION_CONTRACT` 는 그것을 npm 으로 실어 나르는 **운반체**다(`src/sections.ts`
+  이 패키지가 export 하는 `SECTION_CONTRACT` 는 그것을 npm 으로 실어 나르는 **운반체**다(`sections.ts`
   KDoc 이 같은 말을 한다). 코드에서 읽을 것은 `SECTION_CONTRACT` 가 맞지만, 어휘를 **늘리는** 결정은
   정본 쪽에서 난다 — 필요한 어휘가 없으면 만들지 말고 **보고**한다.
 
-**디스패치는 직접 짠다** — `type` 으로 컴포넌트를 고르는 `switch` 하나면 된다. 위 규약에 더해 둘을 지켜라:
-
-- **`sortOrder` 로 한 번 더 정렬한다.** 서버가 정렬해 주지만 순서가 틀리면 화면에서 바로 티가 나는 종류다.
-- **key 는 `type`+`sortOrder`+index 로 짠다.** `PageSection` 계약에 id 가 없어(실측) 순수 인덱스보다 낫다.
-
-**어휘 (12종)** — `vertical` 은 콘솔 픽커 그룹핑용이지 사용 제한이 아니다(GENERAL 은 뷰티 테넌트도 쓴다).
+`vertical` 은 콘솔 픽커 그룹핑용이지 사용 제한이 아니다(GENERAL 은 뷰티 테넌트도 쓴다).
 
-| type | vertical | config (필수는 굵게) | JSON-LD |
+| type | vertical | config — **DB 방언 표기**(필수는 굵게 · 소스 방언 대응은 §9.2) | JSON-LD |
 |---|---|---|---|
 | `HERO` | GENERAL | eyebrow?, **title**, subtitle?, ctaLabel?, ctaHref?, assetId? | — |
 | `FEATURE_GRID` | GENERAL | title?, **items**[{icon?, **title**, body?}] | — |
@@ -615,7 +1039,7 @@ page.sections // [{ type: "HERO", sortOrder: 0, config: "{\"title\":\"…\"}" },
 | `TESTIMONIALS` | GENERAL | title?, **items**[{**quote**, author?, role?, assetId?}] | **없음(의도)** |
 | `FAQ_LIST` | GENERAL | title?, **items**[{**question**, **answer**}] | `FAQPage` |
 | `LEAD_CTA` | GENERAL | title?, body?, interest?, quick? | — (`submitLead` 계약) |
-| `SERVICE_MENU` | BEAUTY | productIds?, categorySlug? | — |
+| `SERVICE_MENU` | BEAUTY | **productIds**(rev 3 부터 필수), categorySlug? | `ItemList`(rev 2 부터) |
 | `BEFORE_AFTER_GALLERY` | BEAUTY | **items**[{**beforeAssetId**, **afterAssetId**, caption?}] | — |
 | `BOOKING_CTA` | BEAUTY | **productId**, label? | — |
 | `DOCTOR_INTRO` | BEAUTY | **name**, title?, photoAssetId?, bio? | — |
@@ -625,14 +1049,28 @@ page.sections // [{ type: "HERO", sortOrder: 0, config: "{\"title\":\"…\"}" },
   SSR 마크업에 실린다**(AI 답변엔진이 읽는다). 아코디언 라이브러리를 쓰지 마라. `FAQPage` JSON-LD 를 함께 낸다.
 - `TESTIMONIALS` 에 **`Review`·`AggregateRating` 을 내지 마라.** 자사 사이트의 자사 후기에 별점을 붙이는 것은
   self-serving reviews 정책 위반이라 제재 대상이다. 이건 빠뜨린 게 아니라 결정이다.
-- `LEAD_CTA` 는 템플릿의 `components/LeadForm` 을 그대로 쓴다(UTM·클릭ID 추적·레이트리밋 안내 동봉).
-  전환 부품을 두 벌 만들지 마라. 이 섹션은 **`id="lead"` 앵커**를 갖는다 — 원페이지 랜딩에서 히어로 CTA 를
+- `LEAD_CTA` 의 리드 폼은 **클라이언트 아일랜드**(`"use client"`)로 만들고 `/api/lead` BFF 로 POST 한다
+  (`clientIp` 는 서버가 XFF 에서 붙인다). 전환 부품을 두 벌 만들지 마라 — 하나로 재사용한다. 요건 넷:
+  · **연락처 필수 · 이메일 선택**(문의 폼과 반대다). 본문은 `{name, phone, email?, message?, interest,
+    isQuick, consentMarketing, tracking}`.
+  · **UTM·클릭ID 8키**를 `tracking` 으로 동봉한다 — `utm_source`·`utm_medium`·`utm_campaign`·
+    `utm_adgroup`·`utm_content`·`fbclid`·`gclid`·`nclid`. 하나라도 있으면 채운다.
+  · **캡처는 mount 후 `window.location.search`** 로 한다. 랜딩이 force-static ISR 일 수 있어 RSC 에서
+    `searchParams` 를 읽으면 정적 셸이 깨진다 — `useSearchParams()` 도 같은 이유로 금지.
+  · **`TOO_MANY_REQUESTS` 안내를 반드시 넣는다**(공개 폼이라 레이트리밋이 흔하다). 400 은 `errors[]` 를
+    필드별로 표시하고, 성공 시 입력만 비우고 **`tracking` 은 유지**한다(같은 방문의 재제출도 같은 유입 귀속).
+  이 섹션은 **`id="lead"` 앵커**를 갖는다 — 원페이지 랜딩에서 히어로 CTA 를
   `"ctaHref": "#lead"` 로 여기에 걸 수 있다. 앵커를 지우면 그 버튼이 조용히 아무 데도 안 간다.
+- `SERVICE_MENU` 는 상품 참조가 **필수**다(rev 3). 참조가 0 이면 렌더러가 그 섹션을 안 그려서 **개시 직후
+  조용히 사라진다** — 시술 목록의 AEO 보장(`ItemList`·§5.1)이 그 섹션에 걸려 있으므로 보장까지 함께 죽는다.
+  소스 방언에서는 `config.products` 의 **handle 배열 순서를 그대로** 그린다(정렬하지 마라 — 그 배열이 노출
+  순서의 원장이고, `ItemList` 도 같은 순서로 나가야 한다).
 - `LOGO_WALL` 에 실존 기업 로고를 넣지 마라 — 사용 허락이 있는 것만.
 
 **아이콘 — 큐레이션 맵의 키 문자열만**
-`FEATURE_GRID` 의 `icon` 은 아래 32개 중 하나다. 렌더는 `ui/Icon` 의 맵 lookup 이고 **미지 이름은 아이콘 영역을
-생략**한다(죽지 않는다·기본 글리프도 안 쓴다 — 틀린 아이콘보다 없는 아이콘이 낫다).
+`FEATURE_GRID` 의 `icon` 은 아래 32개 중 하나다. 렌더러는 **이 키 → 글리프 맵 lookup** 으로 짜고,
+**미지 이름은 아이콘 영역을 생략**한다(죽지 않는다·기본 글리프로 때우지도 않는다 — 틀린 아이콘보다
+없는 아이콘이 낫다).
 
 ```
 shield-check  rocket      line-chart  trending-up  users        user-check  clock     calendar-check

package/package.json

@@ -1,60 +1,60 @@
 {
-  "name": "@zalkera/client",
-  "version": "0.13.0",
-  "description": "zalkera 헤드리스 CMS 공개 API 클라이언트 (테넌트 사이트용)",
-  "license": "MIT",
-  "author": "Credium Co., Ltd.",
-  "type": "module",
-  "publishConfig": {
-    "access": "public"
-  },
-  "keywords": [
-    "zalkera",
-    "headless",
-    "commerce",
-    "cms",
-    "api-client",
-    "sdk"
-  ],
-  "homepage": "https://zalkera.com",
-  "files": [
-    "dist",
-    "llms.txt",
-    "contracts",
-    "bin",
-    "lib"
-  ],
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "bin": {
-    "zalkera-aeo-check": "./bin/check-aeo-surfaces.mjs"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+    "name": "@zalkera/client",
+    "version": "0.14.0",
+    "description": "zalkera 헤드리스 CMS 공개 API 클라이언트 (테넌트 사이트용)",
+    "license": "MIT",
+    "author": "Credium Co., Ltd.",
+    "type": "module",
+    "publishConfig": {
+        "access": "public"
     },
-    "./contracts/aeo-surface-guarantees.json": "./contracts/aeo-surface-guarantees.json",
-    "./bin/check-aeo-surfaces.mjs": "./bin/check-aeo-surfaces.mjs",
-    "./lib/site-crawl.mjs": "./lib/site-crawl.mjs"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "prepublishOnly": "npm run typecheck && npm test && npm run build"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "devDependencies": {
-    "@types/node": "^22.10.2",
-    "tsup": "^8.3.5",
-    "typescript": "^5.7.2",
-    "vitest": "^2.1.8"
-  }
+    "keywords": [
+        "zalkera",
+        "headless",
+        "commerce",
+        "cms",
+        "api-client",
+        "sdk"
+    ],
+    "homepage": "https://zalkera.com",
+    "files": [
+        "dist",
+        "llms.txt",
+        "contracts",
+        "bin",
+        "lib"
+    ],
+    "main": "./dist/index.cjs",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "bin": {
+        "zalkera-aeo-check": "./bin/check-aeo-surfaces.mjs"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "require": "./dist/index.cjs"
+        },
+        "./contracts/aeo-surface-guarantees.json": "./contracts/aeo-surface-guarantees.json",
+        "./bin/check-aeo-surfaces.mjs": "./bin/check-aeo-surfaces.mjs",
+        "./lib/site-crawl.mjs": "./lib/site-crawl.mjs"
+    },
+    "scripts": {
+        "build": "tsup",
+        "dev": "tsup --watch",
+        "typecheck": "tsc --noEmit",
+        "test": "vitest run",
+        "test:watch": "vitest",
+        "prepublishOnly": "npm run typecheck && npm test && npm run build"
+    },
+    "engines": {
+        "node": ">=18"
+    },
+    "devDependencies": {
+        "@types/node": "^22.10.2",
+        "tsup": "^8.3.5",
+        "typescript": "^5.7.2",
+        "vitest": "^2.1.8"
+    }
 }