섹션

섹션은 편집자가 슬래시 명령으로 어떤 콘텐츠에도 삽입할 수 있는 재사용 블록입니다. CTA, 고객 후기, 기능 그리드 등 여러 페이지에 반복되는 패턴에 활용합니다.

섹션 조회

getSection

slug로 단일 섹션을 가져옵니다:

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;
}

소스 유형

콘텐츠에서 섹션 사용

편집자는 리치 텍스트 편집기에서 /section 슬래시 명령으로 섹션을 삽입합니다:

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

• 섹션을 변경해도 이미 삽입된 콘텐츠에 영향을 주지 않음
• 편집자가 삽입된 콘텐츠를 커스터마이즈할 수 있음
• 콘텐츠가 독립적으로 유지됨

섹션 만들기

관리 UI에서

1. 관리 사이드바에서 Sections로 이동합니다

2. New Section을 클릭합니다

3. 다음을 입력합니다:

   • Title — 섹션 표시 이름
   • Slug — URL 식별자(제목에서 자동 생성)
   • Description — 편집자용 도움말 텍스트

4. 리치 텍스트 편집기로 콘텐츠를 추가합니다

5. 선택적으로 검색이 쉽도록 키워드를 설정합니다

시드 파일로

테마 시드 파일에 섹션을 포함합니다:

{
  "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": "Welcome to Our Site" }]
        },
        {
          "_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)는 다음을 제공합니다:

• 그리드 보기 — 섹션 미리보기 포함
• 검색 — 제목과 키워드로 검색
• 필터 — 소스별 필터
• 빠른 복사 — slug를 클립보드에 복사
• 편집 — 섹션 콘텐츠와 메타데이터 편집
• 삭제 — 확인 대화상자(테마 섹션 경고)

API 참조

getSection(slug)

slug로 섹션을 가져옵니다.

매개변수:

• slug — 섹션의 고유 식별자 (string)

반환: 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 재사용 블록 가져오기