섹션

섹션은 편집자가 슬래시 명령어를 통해 콘텐츠에 삽입할 수 있는 재사용 가능한 콘텐츠 블록입니다. CTA, 추천사, 기능 그리드 또는 여러 페이지에 걸쳐 나타나는 모든 콘텐츠와 같은 일반적인 패턴에 사용하세요.

섹션 쿼리하기

getSection

슬러그로 단일 섹션 가져오기:

import { getSection } from "emdash";

const cta = await getSection("newsletter-cta");

if (cta) {
  console.log(cta.title);    // "Newsletter CTA"
  console.log(cta.content);  // PortableTextBlock[]
}

getSections

선택적 필터를 사용하여 여러 섹션 가져오기:

import { getSections } from "emdash";

// 모든 섹션 가져오기
const { items: all } = await getSections();

// 소스별 필터링
const { items: themeSections } = await getSections({ source: "theme" });

// 제목/키워드로 검색
const { items: results } = await getSections({ search: "newsletter" });

getSections는 표준 페이지네이션 패턴을 따르는 { items: Section[], nextCursor?: string }을 반환합니다.

섹션 구조

interface Section {
  id: string;
  slug: string;
  title: string;
  description?: string;
  keywords: string[];
  content: PortableTextBlock[];
  previewUrl?: string;
  source: "theme" | "user" | "import";
  themeId?: string;
  createdAt: string;
  updatedAt: string;
}

소스 유형

소스	설명
`theme`	시드 파일에 정의됨, 테마에서 관리됨
`user`	관리자에서 편집자가 생성함
`import`	WordPress(재사용 가능 블록)에서 가져옴

콘텐츠에서 섹션 사용하기

편집자는 리치 텍스트 편집기에서 /section 슬래시 명령어를 사용하여 섹션을 삽입합니다:

/section(또는 /pattern, /block, /template) 입력
사용 가능한 섹션 검색 또는 탐색
클릭하여 커서 위치에 섹션 콘텐츠 삽입

섹션의 Portable Text 콘텐츠가 문서에 복사됩니다. 이는 다음을 의미합니다:

섹션에 대한 변경 사항은 이미 삽입된 콘텐츠에 영향을 미치지 않음
편집자는 삽입된 콘텐츠를 사용자 정의할 수 있음
콘텐츠는 자체 포함된 상태로 유지됨

섹션 생성하기

관리자 UI에서

관리자 사이드바에서 Sections로 이동
New Section 클릭
다음을 작성:
- Title - 섹션의 표시 이름
- Slug - URL 식별자(제목에서 자동 생성됨)
- Description - 편집자를 위한 도움말 텍스트
리치 텍스트 편집기를 사용하여 콘텐츠 추가
선택적으로 검색 용이성을 위해 키워드 설정

시드 파일을 통해

테마의 시드 파일에 섹션 포함:

{
  "sections": [
    {
      "slug": "hero-centered",
      "title": "Centered Hero",
      "description": "Full-width hero with centered heading and CTA",
      "keywords": ["hero", "banner", "header"],
      "content": [
        {
          "_type": "block",
          "style": "h1",
            "children": [{ "_type": "span", "text": "우리 사이트에 오신 것을 환영합니다" }]
        },
        {
          "_type": "block",
          "children": [{ "_type": "span", "text": "Your tagline goes here." }]
        }
      ]
    },
    {
      "slug": "newsletter-cta",
      "title": "Newsletter CTA",
      "keywords": ["newsletter", "subscribe", "email"],
      "content": [
        {
          "_type": "block",
          "style": "h3",
          "children": [{ "_type": "span", "text": "Subscribe to our newsletter" }]
        }
      ]
    }
  ]
}

WordPress 가져오기를 통해

WordPress 재사용 가능 블록(wp_block 게시물 유형)은 자동으로 섹션으로 가져와집니다:

소스는 "import"로 설정됨
Gutenberg 콘텐츠가 Portable Text로 변환됨

프로그래밍 방식으로 섹션 렌더링하기

편집기 외부에서 서버 렌더링된 섹션 콘텐츠의 경우:

---
import { getSection } from "emdash";
import { PortableText } from "emdash/ui";

const newsletter = await getSection("newsletter-cta");
---

{newsletter && (
  <aside class="cta-box">
    <PortableText value={newsletter.content} />
  </aside>
)}

관리자 UI 기능

섹션 라이브러리(/_emdash/admin/sections)는 다음을 제공합니다:

섹션 미리보기가 있는 그리드 뷰
제목 및 키워드로 검색
소스별 필터
슬러그를 클립보드에 빠르게 복사
섹션 콘텐츠 및 메타데이터 편집
확인과 함께 삭제(테마 섹션에 대해 경고)

API 참조

`getSection(slug)`

슬러그로 섹션을 가져옵니다.

매개변수:

slug — 섹션의 고유 식별자(문자열)

반환값: Promise<Section | null>

`getSections(options?)`

선택적 필터로 섹션 목록을 가져옵니다.

매개변수:

options.source — 소스별 필터: "theme", "user", 또는 "import"
options.search — 제목 및 키워드 검색

반환값: Promise<Section[]>

REST API

섹션 목록 가져오기

GET /_emdash/api/sections
GET /_emdash/api/sections?source=theme
GET /_emdash/api/sections?search=newsletter

섹션 가져오기

GET /_emdash/api/sections/newsletter-cta

섹션 생성

POST /_emdash/api/sections
Content-Type: application/json

{
  "slug": "my-section",
  "title": "My Section",
  "description": "Optional description",
  "keywords": ["keyword1", "keyword2"],
  "content": [...]
}

섹션 업데이트

PUT /_emdash/api/sections/my-section
Content-Type: application/json

{
  "title": "Updated Title",
  "content": [...]
}

섹션 삭제

DELETE /_emdash/api/sections/my-section

다음 단계

콘텐츠 작업하기 - 리치 텍스트 편집기에 대해 알아보기
위젯 영역 - 동기화된 동적 콘텐츠용
콘텐츠 가져오기 - WordPress 재사용 가능 블록 가져오기