Demo Post 1

Notion 스타일 블록과 인라인 서식 예시.

Date
Status
guide

Overview

이 문서는 Notion 스타일 블록 렌더링 예시다. 각 행은 독립 블록이며 제목은 고정 앵커와 우측 Outline으로 연결된다.

Block model

리치 텍스트는 굵게, 기울이기, 밑줄, inline code, 링크와 텍스트 색상을 함께 저장한다.

  • 블록 타입에 따라 중앙 렌더러가 표시 방식을 선택한다.
  • 중첩 블록은 전체 문서를 hydrate하지 않고 재귀적으로 렌더링한다.
왜 콘텐츠 저장과 렌더링을 분리하는가?

같은 블록 구조를 로컬 JSON, Git 기반 콘텐츠, 나중의 원격 API에 모두 사용할 수 있다. 페이지 UI는 저장 위치를 알 필요가 없다.

ts
type BaseBlock = {\n  id: string;\n  type: string;\n  children?: Block[];\n};

Reader actions

읽는 화면은 휴지 상태에서는 조용해야 한다. 편집 기능은 에디터에 두고, 포스트는 문서 읽기와 탐색에 집중한다.
Light Dark