@roottale/cms-renderer-next 0.53.0 → 0.53.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @roottale/cms-renderer-next
 
+## 0.53.1
+
+### Patch Changes
+
+- 1efecbb: 페이지·글·정보의 콘텐츠 모델 공개 계약과 `modelKey` 조회를 추가합니다. 개발자가 선언한 슬롯에서만 배너·팝업을 조회하고 접근성 있게 렌더하는 API, client, renderer, 예제 문서를 함께 제공합니다. 기존 collections와 collectionKey 계약은 유지합니다.
+- 800a797: CMS 글 목록 API가 일시적으로 실패해도 `RootTaleBlogList`와 `RootTaleBlogCategories`가 빈 상태를 렌더하도록 바꿉니다. 신규 사이트의 최초 빌드와 공개 목록 페이지가 CMS 장애 때문에 전체 500으로 중단되지 않습니다.
+- 5cd0e3b: 주소 이동 middleware가 API 장애 시 stale 규칙을 계속 사용하고, 순환 규칙은 브라우저를 왕복시키지 않도록 통과처리합니다. Site Materializer 납품물에 middleware와 회귀 검증 파일을 필수로 포함합니다.
+- cf84636: ChatGPT 등에서 만든 완전한 HTML 문서의 태그 구조, class·id·`data-*`, inline style·`<style>` CSS와 반응형 레이아웃을 `importedHtml` 블록에 보존합니다. 본문의 `h1`은 글 제목과 충돌하지 않도록 `h2`로 바꾸되 원래 `h1` CSS 선택자는 변환된 제목에 이어서 적용합니다. 안전한 `!important`도 유지합니다. CSS는 블록별 고유 범위로 격리하며 스크립트·이벤트 속성·외부 CSS 로드·화면을 덮는 CSS만 제거합니다.
+
+  `html`·`body` 속성, SVG, `picture`·`srcset`, keyframes와 미러링한 CSS 이미지·woff/woff2 폰트도 보존합니다. 가져온 블록별로 문서 루트, animation과 font 이름을 격리해 다른 본문이나 사이트 UI와 충돌하지 않게 합니다.
+
+- Updated dependencies [6df15b6]
+- Updated dependencies [1efecbb]
+- Updated dependencies [cf84636]
+  - @roottale/cms-client@0.53.1
+  - @roottale/cms-core@0.53.1
+
 ## 0.53.0
 
 ### Minor Changes

package/README.md

@@ -227,7 +227,7 @@ The form submits via HTML POST (no custom JS). In a Next.js site, point `action`
 
 | Export | Use |
 |---|---|
-| `RootTaleBlogList` | RSC — fetches `/v1/cms/public/posts?type=post` and renders an `<ul>`. |
+| `RootTaleBlogList` | RSC — fetches `/v1/cms/public/posts?type=post`; renders an `<ul>` or a fail-soft empty state. |
 | `RootTaleBlogPost` | RSC — fetches one post, renders Tiptap doc + optional TOC. |
 | `RootTaleLeadForm` | RSC — HTML form for `/v1/public/inquiries` forward routes. |
 | `RootTalePostCard` | Single card primitive (used internally by `RootTaleBlogList`). |
@@ -239,7 +239,15 @@ The form submits via HTML POST (no custom JS). In a Next.js site, point `action`
 ## Security model
 
 - `@roottale/cms-client` throws if you import it into a browser bundle (`assertServer()`). Never expose `rtlk_cust_*` to the client.
-- Block JSON is server-rendered with hardcoded mark/node mappings — no `dangerouslySetInnerHTML` from authored content. Links pass an `isSafeHref()` allowlist (http/https/mailto/tel/root-relative/fragment/query).
+- Block JSON is server-rendered with hardcoded mark/node mappings. The `importedHtml`
+  node is the only authored raw-HTML boundary: the renderer sanitizes its semantic
+  markup and imported CSS again before `dangerouslySetInnerHTML`. Imported selectors
+  are isolated to a per-block scope. Body `h1` elements become `h2` so the page title
+  remains the only `h1`; original `h1` selectors are mapped to the converted heading.
+  `data-*` selectors and safe `!important` declarations are preserved. Scripts, event
+  handlers, unsafe URL schemes, external CSS loads, and layout-overlay CSS are removed.
+  Links in ordinary Tiptap nodes pass an `isSafeHref()` allowlist
+  (http/https/mailto/tel/root-relative/fragment/query).
 - The default `target="_blank"` on link marks gets `rel="noopener noreferrer"`.
 
 ## Compatibility

package/dist/chunk-GVKENK6H.js

@@ -0,0 +1,75 @@
+"use client";
+
+// src/exposure-client.tsx
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function storageKey(campaign) {
+  return `rt-exposure-dismissed:${campaign.id}`;
+}
+function wasDismissed(campaign) {
+  if (campaign.repeat === "always") return false;
+  try {
+    const storage = campaign.repeat === "session" ? sessionStorage : localStorage;
+    const value = storage.getItem(storageKey(campaign));
+    if (!value) return false;
+    if (campaign.repeat === "day") return Date.now() - Number(value) < 864e5;
+    return true;
+  } catch {
+    return false;
+  }
+}
+function rememberDismissal(campaign) {
+  if (campaign.repeat === "always") return;
+  try {
+    const storage = campaign.repeat === "session" ? sessionStorage : localStorage;
+    storage.setItem(storageKey(campaign), String(Date.now()));
+  } catch {
+  }
+}
+function RootTaleExposure({
+  campaign,
+  allowedVariants
+}) {
+  const [dismissed, setDismissed] = useState(false);
+  const closeRef = useRef(null);
+  const knownVariant = allowedVariants.includes(campaign.content.variant);
+  const eligible = useSyncExternalStore(
+    () => () => void 0,
+    () => !wasDismissed(campaign),
+    () => false
+  );
+  const visible = knownVariant && eligible && !dismissed;
+  useEffect(() => {
+    if (!visible || campaign.kind !== "popup") return;
+    closeRef.current?.focus();
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") dismiss();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  });
+  function dismiss() {
+    rememberDismissal(campaign);
+    setDismissed(true);
+  }
+  if (!knownVariant || !visible) return null;
+  const body = /* @__PURE__ */ jsxs("div", { className: "rt-exposure__body", children: [
+    campaign.content.assetUrl ? /* @__PURE__ */ jsx("img", { className: "rt-exposure__asset", src: campaign.content.assetUrl, alt: campaign.content.assetAlt ?? "" }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "rt-exposure__copy", children: [
+      campaign.content.eyebrow ? /* @__PURE__ */ jsx("p", { className: "rt-exposure__eyebrow", children: campaign.content.eyebrow }) : null,
+      /* @__PURE__ */ jsx("h2", { className: "rt-exposure__title", children: campaign.content.title }),
+      campaign.content.description ? /* @__PURE__ */ jsx("p", { className: "rt-exposure__description", children: campaign.content.description }) : null,
+      campaign.content.linkUrl && campaign.content.linkLabel ? /* @__PURE__ */ jsx("a", { className: "rt-exposure__link", href: campaign.content.linkUrl, children: campaign.content.linkLabel }) : null
+    ] }),
+    /* @__PURE__ */ jsx("button", { ref: closeRef, type: "button", className: "rt-exposure__close", "aria-label": "\uB2EB\uAE30", onClick: dismiss, children: "\xD7" })
+  ] });
+  if (campaign.kind === "banner") {
+    return /* @__PURE__ */ jsx("aside", { className: `rt-exposure rt-exposure--banner rt-exposure--${campaign.content.variant}`, "aria-label": "\uC548\uB0B4", children: body });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "rt-exposure-backdrop", role: "presentation", children: /* @__PURE__ */ jsx("section", { className: `rt-exposure rt-exposure--popup rt-exposure--${campaign.content.variant}`, role: "dialog", "aria-modal": "true", "aria-label": campaign.content.title, children: body }) });
+}
+
+export {
+  RootTaleExposure
+};
+//# sourceMappingURL=chunk-GVKENK6H.js.map

package/dist/chunk-GVKENK6H.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/exposure-client.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState, useSyncExternalStore } from \"react\";\n\nimport type { CmsExposureCampaign } from \"@roottale/cms-client/server\";\n\nfunction storageKey(campaign: CmsExposureCampaign): string {\n  return `rt-exposure-dismissed:${campaign.id}`;\n}\n\nfunction wasDismissed(campaign: CmsExposureCampaign): boolean {\n  if (campaign.repeat === \"always\") return false;\n  try {\n    const storage = campaign.repeat === \"session\" ? sessionStorage : localStorage;\n    const value = storage.getItem(storageKey(campaign));\n    if (!value) return false;\n    if (campaign.repeat === \"day\") return Date.now() - Number(value) < 86_400_000;\n    return true;\n  } catch {\n    return false;\n  }\n}\n\nfunction rememberDismissal(campaign: CmsExposureCampaign): void {\n  if (campaign.repeat === \"always\") return;\n  try {\n    const storage = campaign.repeat === \"session\" ? sessionStorage : localStorage;\n    storage.setItem(storageKey(campaign), String(Date.now()));\n  } catch {\n    // 저장소 차단 환경에서는 현재 화면에서만 닫는다.\n  }\n}\n\nexport function RootTaleExposure({\n  campaign,\n  allowedVariants,\n}: {\n  readonly campaign: CmsExposureCampaign;\n  readonly allowedVariants: readonly string[];\n}) {\n  const [dismissed, setDismissed] = useState(false);\n  const closeRef = useRef<HTMLButtonElement>(null);\n  const knownVariant = allowedVariants.includes(campaign.content.variant);\n  const eligible = useSyncExternalStore(\n    () => () => undefined,\n    () => !wasDismissed(campaign),\n    () => false,\n  );\n  const visible = knownVariant && eligible && !dismissed;\n\n  useEffect(() => {\n    if (!visible || campaign.kind !== \"popup\") return;\n    closeRef.current?.focus();\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") dismiss();\n    };\n    window.addEventListener(\"keydown\", onKeyDown);\n    return () => window.removeEventListener(\"keydown\", onKeyDown);\n  });\n\n  function dismiss() {\n    rememberDismissal(campaign);\n    setDismissed(true);\n  }\n\n  if (!knownVariant || !visible) return null;\n  const body = <div className=\"rt-exposure__body\">\n    {campaign.content.assetUrl ? <img className=\"rt-exposure__asset\" src={campaign.content.assetUrl} alt={campaign.content.assetAlt ?? \"\"} /> : null}\n    <div className=\"rt-exposure__copy\">\n      {campaign.content.eyebrow ? <p className=\"rt-exposure__eyebrow\">{campaign.content.eyebrow}</p> : null}\n      <h2 className=\"rt-exposure__title\">{campaign.content.title}</h2>\n      {campaign.content.description ? <p className=\"rt-exposure__description\">{campaign.content.description}</p> : null}\n      {campaign.content.linkUrl && campaign.content.linkLabel ? <a className=\"rt-exposure__link\" href={campaign.content.linkUrl}>{campaign.content.linkLabel}</a> : null}\n    </div>\n    <button ref={closeRef} type=\"button\" className=\"rt-exposure__close\" aria-label=\"닫기\" onClick={dismiss}>×</button>\n  </div>;\n\n  if (campaign.kind === \"banner\") {\n    return <aside className={`rt-exposure rt-exposure--banner rt-exposure--${campaign.content.variant}`} aria-label=\"안내\">{body}</aside>;\n  }\n  return <div className=\"rt-exposure-backdrop\" role=\"presentation\">\n    <section className={`rt-exposure rt-exposure--popup rt-exposure--${campaign.content.variant}`} role=\"dialog\" aria-modal=\"true\" aria-label={campaign.content.title}>\n      {body}\n    </section>\n  </div>;\n}\n"],"mappings":";AAEA,SAAS,WAAW,QAAQ,UAAU,4BAA4B;AAiEjC,cAC7B,YAD6B;AA7DjC,SAAS,WAAW,UAAuC;AACzD,SAAO,yBAAyB,SAAS,EAAE;AAC7C;AAEA,SAAS,aAAa,UAAwC;AAC5D,MAAI,SAAS,WAAW,SAAU,QAAO;AACzC,MAAI;AACF,UAAM,UAAU,SAAS,WAAW,YAAY,iBAAiB;AACjE,UAAM,QAAQ,QAAQ,QAAQ,WAAW,QAAQ,CAAC;AAClD,QAAI,CAAC,MAAO,QAAO;AACnB,QAAI,SAAS,WAAW,MAAO,QAAO,KAAK,IAAI,IAAI,OAAO,KAAK,IAAI;AACnE,WAAO;AAAA,EACT,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,SAAS,kBAAkB,UAAqC;AAC9D,MAAI,SAAS,WAAW,SAAU;AAClC,MAAI;AACF,UAAM,UAAU,SAAS,WAAW,YAAY,iBAAiB;AACjE,YAAQ,QAAQ,WAAW,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAC,CAAC;AAAA,EAC1D,QAAQ;AAAA,EAER;AACF;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,WAAW,OAA0B,IAAI;AAC/C,QAAM,eAAe,gBAAgB,SAAS,SAAS,QAAQ,OAAO;AACtE,QAAM,WAAW;AAAA,IACf,MAAM,MAAM;AAAA,IACZ,MAAM,CAAC,aAAa,QAAQ;AAAA,IAC5B,MAAM;AAAA,EACR;AACA,QAAM,UAAU,gBAAgB,YAAY,CAAC;AAE7C,YAAU,MAAM;AACd,QAAI,CAAC,WAAW,SAAS,SAAS,QAAS;AAC3C,aAAS,SAAS,MAAM;AACxB,UAAM,YAAY,CAAC,UAAyB;AAC1C,UAAI,MAAM,QAAQ,SAAU,SAAQ;AAAA,IACtC;AACA,WAAO,iBAAiB,WAAW,SAAS;AAC5C,WAAO,MAAM,OAAO,oBAAoB,WAAW,SAAS;AAAA,EAC9D,CAAC;AAED,WAAS,UAAU;AACjB,sBAAkB,QAAQ;AAC1B,iBAAa,IAAI;AAAA,EACnB;AAEA,MAAI,CAAC,gBAAgB,CAAC,QAAS,QAAO;AACtC,QAAM,OAAO,qBAAC,SAAI,WAAU,qBACzB;AAAA,aAAS,QAAQ,WAAW,oBAAC,SAAI,WAAU,sBAAqB,KAAK,SAAS,QAAQ,UAAU,KAAK,SAAS,QAAQ,YAAY,IAAI,IAAK;AAAA,IAC5I,qBAAC,SAAI,WAAU,qBACZ;AAAA,eAAS,QAAQ,UAAU,oBAAC,OAAE,WAAU,wBAAwB,mBAAS,QAAQ,SAAQ,IAAO;AAAA,MACjG,oBAAC,QAAG,WAAU,sBAAsB,mBAAS,QAAQ,OAAM;AAAA,MAC1D,SAAS,QAAQ,cAAc,oBAAC,OAAE,WAAU,4BAA4B,mBAAS,QAAQ,aAAY,IAAO;AAAA,MAC5G,SAAS,QAAQ,WAAW,SAAS,QAAQ,YAAY,oBAAC,OAAE,WAAU,qBAAoB,MAAM,SAAS,QAAQ,SAAU,mBAAS,QAAQ,WAAU,IAAO;AAAA,OAChK;AAAA,IACA,oBAAC,YAAO,KAAK,UAAU,MAAK,UAAS,WAAU,sBAAqB,cAAW,gBAAK,SAAS,SAAS,kBAAC;AAAA,KACzG;AAEA,MAAI,SAAS,SAAS,UAAU;AAC9B,WAAO,oBAAC,WAAM,WAAW,gDAAgD,SAAS,QAAQ,OAAO,IAAI,cAAW,gBAAM,gBAAK;AAAA,EAC7H;AACA,SAAO,oBAAC,SAAI,WAAU,wBAAuB,MAAK,gBAChD,8BAAC,aAAQ,WAAW,+CAA+C,SAAS,QAAQ,OAAO,IAAI,MAAK,UAAS,cAAW,QAAO,cAAY,SAAS,QAAQ,OACzJ,gBACH,GACF;AACF;","names":[]}

package/dist/cms-public.css

@@ -23,6 +23,21 @@
   list-style: none;
 }
 
+.rt-sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+.rt-exposure { color: var(--rt-color-foreground, #111827); background: var(--rt-color-background, #fff); border: 1px solid var(--rt-color-border, #e5e7eb); }
+.rt-exposure__body { position: relative; display: grid; gap: 1rem; padding: 1rem; }
+.rt-exposure__asset { max-inline-size: 100%; block-size: auto; border-radius: .5rem; }
+.rt-exposure__copy { display: grid; gap: .5rem; }
+.rt-exposure__eyebrow, .rt-exposure__title, .rt-exposure__description { margin: 0; }
+.rt-exposure__eyebrow { font-size: .75rem; font-weight: 700; }
+.rt-exposure__title { font-size: 1.25rem; line-height: 1.3; }
+.rt-exposure__link { inline-size: fit-content; font-weight: 700; color: var(--rt-color-primary, #1d4ed8); }
+.rt-exposure__close { position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem; inline-size: 2.75rem; block-size: 2.75rem; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--rt-color-background, #fff) 85%, transparent); color: inherit; cursor: pointer; font-size: 1.5rem; }
+.rt-exposure-backdrop { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 1rem; background: rgb(0 0 0 / .55); }
+.rt-exposure--popup { inline-size: min(100%, 34rem); max-block-size: calc(100dvh - 2rem); overflow: auto; border-radius: 1rem; box-shadow: 0 1.5rem 4rem rgb(0 0 0 / .25); }
+@media (min-width: 40rem) { .rt-exposure--banner .rt-exposure__body { grid-template-columns: minmax(0, 12rem) 1fr; align-items: center; } }
+@media (prefers-reduced-motion: reduce) { .rt-exposure, .rt-exposure-backdrop { scroll-behavior: auto; animation: none !important; transition: none !important; } }
+
 /* Category filter — chips are <a> links (/blog/categories/slug), SSR-only, no JS. */
 [data-roottale-cms] :where(.rt-cms-filter) {
   display: flex;
@@ -370,6 +385,18 @@
   overflow-wrap: anywhere;
 }
 
+/* 외부 게시판 HTML 가져오기. 원문의 안전한 inline style은 유지하되,
+   넓은 표·이미지가 본문 measure 밖으로 페이지를 밀지 않게 경계를 둔다. */
+[data-roottale-cms] :where(.rt-imported-html) {
+  min-inline-size: 0;
+  overflow-x: auto;
+}
+
+[data-roottale-cms] :where(.rt-imported-html img) {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
 /* 시각 브레드크럼 (avcd 구조, opt-in — RootTaleBlogPost `breadcrumb` prop). */
 [data-roottale-cms] :where(.rt-cms-breadcrumb) {
   max-inline-size: var(--rt-cms-measure, 42.5rem);

package/dist/exposure-client.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CmsExposureCampaign } from '@roottale/cms-client/server';
+
+declare function RootTaleExposure({ campaign, allowedVariants, }: {
+    readonly campaign: CmsExposureCampaign;
+    readonly allowedVariants: readonly string[];
+}): react_jsx_runtime.JSX.Element | null;
+
+export { RootTaleExposure };

package/dist/exposure-client.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  RootTaleExposure
+} from "./chunk-GVKENK6H.js";
+export {
+  RootTaleExposure
+};
+//# sourceMappingURL=exposure-client.js.map

package/dist/exposure-client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/routes.d.ts

@@ -389,7 +389,7 @@ declare function normalizeRedirectPath(path: string): string;
  * 매칭하지 않는다. 절대 URL 도착지는 체인 종단(다른 origin 위임). 상태 코드는
  * 실제 요청 경로에 매칭된 첫 규칙을 따른다. null = 해당 없음.
  */
-declare function matchRedirect(redirects: readonly RootTaleRedirect[], pathname: string): {
+declare function matchRedirect(redirects: readonly RootTaleRedirect[], pathname: string, origin?: string): {
     toTarget: string;
     statusCode: 301 | 302;
 } | null;

package/dist/routes.js

@@ -791,7 +791,17 @@ function normalizeRedirectPath(path) {
 function isAbsoluteUrl(target) {
   return /^https?:\/\//i.test(target);
 }
-function matchRedirect(redirects, pathname) {
+function internalTargetPath(target, origin) {
+  if (!isAbsoluteUrl(target)) return normalizeRedirectPath(target);
+  if (!origin) return null;
+  try {
+    const url = new URL(target);
+    return url.origin === origin ? normalizeRedirectPath(url.pathname) : null;
+  } catch {
+    return null;
+  }
+}
+function matchRedirect(redirects, pathname, origin) {
   const byFrom = /* @__PURE__ */ new Map();
   for (const r of redirects) {
     const key = normalizeRedirectPath(r.fromPath);
@@ -802,21 +812,18 @@ function matchRedirect(redirects, pathname) {
   let current = start;
   let finalTarget = null;
   let firstStatus = null;
-  for (let hop = 0; hop < 10; hop++) {
+  for (; ; ) {
     const rule = byFrom.get(current);
     if (!rule) break;
-    if (hop === 0) firstStatus = rule.statusCode;
-    if (isAbsoluteUrl(rule.toTarget)) {
+    if (firstStatus === null) firstStatus = rule.statusCode;
+    const nextPath = internalTargetPath(rule.toTarget, origin);
+    if (nextPath === null) {
       finalTarget = rule.toTarget;
       break;
     }
-    const nextPath = normalizeRedirectPath(rule.toTarget);
-    if (nextPath === start) {
-      if (hop === 0) return null;
-      break;
-    }
+    if (nextPath === start) return null;
     finalTarget = rule.toTarget;
-    if (visited.has(nextPath)) break;
+    if (visited.has(nextPath)) return null;
     visited.add(nextPath);
     current = nextPath;
   }
@@ -860,7 +867,7 @@ function createRedirectMiddleware(config) {
     }
     const now = Date.now();
     const redirects = await loadRedirects(now);
-    const hit = matchRedirect(redirects, pathname);
+    const hit = matchRedirect(redirects, pathname, origin);
     if (!hit) return null;
     const dest = new URL(hit.toTarget, origin);
     if (dest.origin === origin && normalizeRedirectPath(dest.pathname) === normalizeRedirectPath(pathname)) {
@@ -888,7 +895,7 @@ function createFleetInfoRoute(config = {}) {
         site: config.site ?? env.VERCEL_PROJECT_PRODUCTION_URL ?? null,
         framework: "next",
         cms_client: CMS_CLIENT_VERSION,
-        cms_renderer: true ? "0.53.0" : "dev",
+        cms_renderer: true ? "0.53.1" : "dev",
         build_sha: env.VERCEL_GIT_COMMIT_SHA?.slice(0, 7) ?? null
       },
       { headers: { "cache-control": "public, max-age=300" } }