@roottale/cms-renderer-next 0.56.0 → 0.58.0

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # @roottale/cms-renderer-next
 
+## 0.58.0
+
+### Minor Changes
+
+- dd82c92: 공통 블록 표시 형태(presentation) — 블록의 모양(본문처럼/카드·배경색·링크 버튼·버튼 색)을 어드민이
+  정해 공개 API `presentation` 으로 내려준다. 사이트는 색·모양을 CSS 에 고정하지 않는다.
+  - `@roottale/cms-core`: `readSitePatternPresentation`·`sitePatternPresentationAttributes`·
+    `DEFAULT_SITE_PATTERN_PRESENTATION`.
+  - `@roottale/cms-client`: `CmsSitePattern.presentation`(구 서버는 기본값), `sitePatternPresentationAttributes`
+    (래퍼 data 속성 + `--rt-pattern-bg`·`--rt-pattern-btn-n` CSS 변수).
+  - `@roottale/cms-renderer-next`: `RootTaleBlogPost`·`RootTalePostPattern` 이 data 속성·변수를 얹고,
+    `cms-public.css` 가 카드/버튼 모양을 그 값으로만 그린다.
+
+### Patch Changes
+
+- Updated dependencies [dd82c92]
+  - @roottale/cms-core@0.58.0
+  - @roottale/cms-client@0.58.0
+
+## 0.57.0
+
+### Minor Changes
+
+- e222471: 본문 예약 내부 링크(`[[internal:키|문구]]`)를 공용 렌더러가 해석한다.
+  - `@roottale/cms-core`: 토큰 정규식·탐색(`findInternalContentLinkTokens`), 경로→키
+    (`internalContentKeyFromPath`), 발행 글 경로 색인(`internalContentPathIndex`, 옛 slug 포함),
+    텍스트·정화된 HTML 안의 토큰을 링크로 바꾸는 `renderInternalContentLinksInText/InHtml`.
+  - `@roottale/cms-renderer-next`: `RenderTiptap`·`RootTaleBlogPost` 에 `internalLinks`
+    (Map·함수) 옵션. `RootTaleBlogPost` 는 기본 `"auto"` — 본문에 토큰이 있을 때만
+    `fetchInternalContentPathIndex` 로 발행 글 경로 색인을 만들어 링크로 렌더한다.
+    대상이 없는 토큰은 문구만 남기고 `data-rt-internal-link-pending="키"` 를 단다.
+    `<code>`·`<pre>`·기존 링크 안은 건드리지 않는다.
+  - 문서: FRONT 가 토큰을 직접 해석하지 않아도 되는 경로를 안내한다.
+
+- 92d0ad4: 공통 블록(Site Patterns) — 여러 글의 같은 자리(글 하단)에 붙는 재사용 본문.
+  - `@roottale/cms-client`: 글 응답 `patternSlots`(자리 key → 블록 key | null, 구 서버는 빈
+    객체), `fetchSitePatterns`(발행 블록 목록, `GET /v1/cms/public/patterns`),
+    `selectSitePatternForSlot`, `SITE_PATTERNS_CACHE_TAG`(`SETTINGS_CACHE_TAGS` 에 포함 —
+    `theme.updated` 로 함께 갱신), `POST_FOOTER_PATTERN_SLOT`.
+  - `@roottale/cms-renderer-next`: `RootTaleBlogPost` 가 `patternSlots.post_footer` 블록을 본문
+    바로 아래에 자동으로 그린다(목록 요청 실패는 블록만 생략). 자체 글 화면용
+    `RootTalePostPattern` 서버 컴포넌트와 `.rt-cms-post-pattern` 스타일 추가.
+  - `@roottale/cms-core`: 자리 선언·배치 규칙 정규화·`resolvePatternSlots` (플랫폼 서버·어드민과
+    공유하는 순수 규칙).
+  - 문서: `theme-and-settings.md` "공통 블록", `api-reference.md` `GET /patterns`·`pattern_slots`.
+
+### Patch Changes
+
+- Updated dependencies [e222471]
+- Updated dependencies [92d0ad4]
+  - @roottale/cms-core@0.57.0
+  - @roottale/cms-client@0.57.0
+
 ## 0.56.0
 
 ### Minor Changes

package/dist/cms-public.css

@@ -980,6 +980,64 @@
   opacity: 0.92;
 }
 
+/* 공통 블록(post_footer) — 본문 바로 아래, 본문과 같은 폭. 모양은 어드민 표시 형태
+   (data-pattern-layout / data-pattern-link-style / --rt-pattern-bg / --rt-pattern-btn-n)를 따른다. */
+[data-roottale-cms] :where(.rt-cms-post-pattern) {
+  max-inline-size: var(--rt-cms-measure, 42.5rem);
+  margin-inline: auto;
+  margin-block-start: var(--rt-spacing-6, 1.5rem);
+}
+
+[data-roottale-cms] :where(.rt-cms-post-pattern[data-pattern-layout="plain"]) {
+  padding-block-start: var(--rt-spacing-5, 1.25rem);
+  border-block-start: 1px solid color-mix(in srgb, var(--rt-color-border, #dceef3) 82%, transparent);
+}
+
+[data-roottale-cms] :where(.rt-cms-post-pattern[data-pattern-layout="card"]) {
+  padding: var(--rt-spacing-5, 1.25rem);
+  background: var(--rt-pattern-bg, var(--rt-color-muted, #f7f8f7));
+  border-radius: var(--rt-radius-lg, 0.75rem);
+}
+
+[data-roottale-cms] :where(.rt-cms-post-pattern[data-pattern-layout="card"] > :first-child) {
+  margin-block-start: 0;
+}
+
+[data-roottale-cms] :where(.rt-cms-post-pattern[data-pattern-link-style="buttons"] > p:last-child:has(> a)) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--rt-spacing-2, 0.5rem);
+  margin-block-start: var(--rt-spacing-4, 1rem);
+}
+
+[data-roottale-cms] :where(.rt-cms-post-pattern[data-pattern-link-style="buttons"] > p:last-child > a) {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.625rem 1.25rem;
+  background: var(--rt-pattern-btn-1, #03c75a);
+  color: #fff;
+  font-weight: 600;
+  text-decoration: none;
+  border-radius: var(--rt-radius-sm, 0.25rem);
+  white-space: nowrap;
+}
+
+[data-roottale-cms] :where(.rt-cms-post-pattern[data-pattern-link-style="buttons"] > p:last-child > a:nth-of-type(2)) {
+  background: var(--rt-pattern-btn-2, var(--rt-pattern-btn-1));
+}
+
+[data-roottale-cms] :where(.rt-cms-post-pattern[data-pattern-link-style="buttons"] > p:last-child > a:nth-of-type(3)) {
+  background: var(--rt-pattern-btn-3, var(--rt-pattern-btn-2, var(--rt-pattern-btn-1)));
+}
+
+[data-roottale-cms] :where(.rt-cms-post-pattern[data-pattern-link-style="buttons"] > p:last-child > a:nth-of-type(n + 4)) {
+  background: var(--rt-pattern-btn-4, var(--rt-pattern-btn-3, var(--rt-pattern-btn-2, var(--rt-pattern-btn-1))));
+}
+
+[data-roottale-cms] :where(.rt-cms-post-pattern[data-pattern-link-style="buttons"] > p:last-child > br) {
+  display: none;
+}
+
 /* FAQ 블록 (roottale/faq) — <details> 아코디언. 0 JS. */
 [data-roottale-cms] :where(.rt-cms-faq) {
   border: 1px solid color-mix(in srgb, var(--rt-color-border, #dceef3) 88%, transparent);

package/dist/routes.js

@@ -925,7 +925,7 @@ function createFleetInfoRoute(config = {}) {
         site: config.site ?? env.VERCEL_PROJECT_PRODUCTION_URL ?? null,
         framework: "next",
         cms_client: CMS_CLIENT_VERSION,
-        cms_renderer: true ? "0.56.0" : "dev",
+        cms_renderer: true ? "0.58.0" : "dev",
         build_sha: env.VERCEL_GIT_COMMIT_SHA?.slice(0, 7) ?? null
       },
       { headers: { "cache-control": "public, max-age=300" } }

package/dist/server.d.ts

@@ -2,7 +2,7 @@ import { ReactElement, ReactNode } from 'react';
 import { CmsPostContent, RootTaleTheme, CmsPostType } from '@roottale/cms-client/server';
 export { RootTaleTheme } from '@roottale/cms-client/server';
 import { RootTaleThemeStyle } from '@roottale/ui-react/theme';
-import { Block, BindingResolver, RouteCollection } from '@roottale/cms-core';
+import { Block, BindingResolver, RouteCollection, InternalContentLinkResolver } from '@roottale/cms-core';
 export { a as BlogCategory, B as BlogCategoryWithCount, c as collectCategories, b as collectCategoriesWithCounts, d as defaultCategoryHref, f as filterPostsByCategory, m as makeCategoryHref } from './blog-filter-qE9Lj49C.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -262,6 +262,13 @@ type RootTaleBlogPostProps = {
     locale?: string;
     authorHref?: (slug: string) => string;
     breadcrumb?: BlogPostBreadcrumbOptions;
+    /**
+     * 본문 예약 내부 링크(`[[internal:키|문구]]`) 해석. 기본 `"auto"` = 본문에 토큰이
+     * 있을 때만 발행 글 경로 색인(`fetchInternalContentPathIndex`)을 만들어 링크로
+     * 렌더한다. `false` 면 토큰을 텍스트 그대로 둔다. 미리 만든 색인(Map)이나
+     * 함수를 주면 그것을 쓴다.
+     */
+    internalLinks?: "auto" | false | InternalContentLinkResolver | ReadonlyMap<string, string>;
 };
 interface BlogPostBreadcrumbOptions {
     siteUrl?: string;
@@ -279,6 +286,21 @@ declare function RootTaleFaqJsonLd({ doc, }: {
     readonly doc: unknown;
 }): ReactElement | null;
 
+interface RootTalePostPatternProps {
+    readonly apiKey: string;
+    readonly baseUrl?: string;
+    /** `fetchPost`/`fetchPosts` 로 받은 글(또는 `patternSlots` 만 있는 객체). */
+    readonly post: Pick<CmsPostContent, "patternSlots">;
+    /** 자리 key. 기본 글 하단(`post_footer`). */
+    readonly slot?: string;
+}
+/**
+ * 자체 글 화면을 가진 사이트가 글 하단 공통 블록만 가져다 쓰는 서버 컴포넌트.
+ * `RootTaleBlogPost` 는 이미 본문 아래에 같은 블록을 그리므로 둘을 함께 쓰지 않는다.
+ */
+declare function RootTalePostPattern(props: RootTalePatternProps): Promise<ReactElement | null>;
+type RootTalePatternProps = RootTalePostPatternProps;
+
 interface RootTalePreviewNoticeProps {
     /** `ko`(기본) · `en`. */
     locale?: string;
@@ -319,13 +341,36 @@ interface RootTaleExposureSlotProps {
 /** FRONT가 코드로 만든 슬롯 안에서만 활성 배너·팝업을 렌더한다. */
 declare function RootTaleExposureSlot(props: RootTaleExposureSlotProps): Promise<react_jsx_runtime.JSX.Element | null>;
 
+type InternalLinksSource = InternalContentLinkResolver | ReadonlyMap<string, string> | null;
 type RenderTiptapProps = {
     readonly doc: Record<string, unknown>;
     readonly fields?: Record<string, unknown> | null;
     readonly apiKey?: string;
     readonly baseUrl?: string;
+    /**
+     * 본문 예약 내부 링크(`[[internal:키|문구]]`) 해석 — 키 → 공개 경로.
+     * `fetchInternalContentPathIndex` 결과(Map)나 함수. 없으면 토큰을 텍스트 그대로 둔다.
+     */
+    readonly internalLinks?: InternalLinksSource;
 };
-declare function RenderTiptap({ doc, fields, apiKey, baseUrl, }: RenderTiptapProps): ReactElement;
+declare function RenderTiptap({ doc, fields, apiKey, baseUrl, internalLinks, }: RenderTiptapProps): ReactElement;
+
+interface FetchInternalContentPathIndexOptions {
+    readonly apiKey: string;
+    readonly baseUrl?: string;
+    readonly locale?: string;
+    /** ISR revalidate 초. */
+    readonly revalidate?: number;
+    /** 안전장치 — 이 이상 페이지는 읽지 않는다(100건/페이지). 기본 20 = 2,000건. */
+    readonly maxPages?: number;
+}
+/**
+ * 발행 글 전부의 경로를 모아 키 색인을 만든다. 한 페이지라도 실패하면 그때까지
+ * 모은 것으로 답한다(fail-soft — 링크가 몇 개 문구로 남는 편이 500 보다 낫다).
+ */
+declare function fetchInternalContentPathIndex(options: FetchInternalContentPathIndexOptions): Promise<Map<string, string>>;
+/** 본문(JSON 또는 HTML)에 토큰이 있는지 — 색인을 만들 필요가 있는지 미리 본다. */
+declare function bodyHasInternalContentLinkTokens(doc: Record<string, unknown> | null | undefined, html?: string | null): boolean;
 
 /**
  * 본문 렌더 소스 결정 — HTML 정본 우선, 없으면 Block JSON 폴백.
@@ -356,4 +401,4 @@ type PostBodySource = {
  */
 declare function resolvePostBodySource(bodyHtml: string | null | undefined): PostBodySource;
 
-export { type BlogPostBreadcrumbOptions, type CtaButton, type CtaButtonType, type FloatingCtaPosition, type LeadFormVertical, type PostBodySource, RenderTiptap, RootTaleBlogCategories, type RootTaleBlogCategoriesProps, RootTaleBlogList, type RootTaleBlogListProps, RootTaleBlogPost, type RootTaleBlogPostProps, type RootTaleCssVars, RootTaleExposureSlot, type RootTaleExposureSlotProps, RootTaleFaqJsonLd, RootTaleFloatingCta, type RootTaleFloatingCtaProps, RootTaleLeadForm, type RootTaleLeadFormProps, RootTalePage, type RootTalePageProps, RootTalePostCard, type RootTalePostCardProps, RootTalePreviewNotice, type RootTalePreviewNoticeProps, RootTaleTableOfContents, type RootTaleTableOfContentsProps, type RootTaleThemeInput, RootTaleThemeProvider, type TocEntry, attachHeadingIds, extractToc, headingToId, renderBlock, renderBlocks, renderBoundBlocks, resolvePostBodySource, themeToCssVars };
+export { type BlogPostBreadcrumbOptions, type CtaButton, type CtaButtonType, type FetchInternalContentPathIndexOptions, type FloatingCtaPosition, type InternalLinksSource, type LeadFormVertical, type PostBodySource, RenderTiptap, RootTaleBlogCategories, type RootTaleBlogCategoriesProps, RootTaleBlogList, type RootTaleBlogListProps, RootTaleBlogPost, type RootTaleBlogPostProps, type RootTaleCssVars, RootTaleExposureSlot, type RootTaleExposureSlotProps, RootTaleFaqJsonLd, RootTaleFloatingCta, type RootTaleFloatingCtaProps, RootTaleLeadForm, type RootTaleLeadFormProps, RootTalePage, type RootTalePageProps, RootTalePostCard, type RootTalePostCardProps, RootTalePostPattern, type RootTalePostPatternProps, RootTalePreviewNotice, type RootTalePreviewNoticeProps, RootTaleTableOfContents, type RootTaleTableOfContentsProps, type RootTaleThemeInput, RootTaleThemeProvider, type TocEntry, attachHeadingIds, bodyHasInternalContentLinkTokens, extractToc, fetchInternalContentPathIndex, headingToId, renderBlock, renderBlocks, renderBoundBlocks, resolvePostBodySource, themeToCssVars };