Heading 블록

Heading 블록은 문서의 구조를 나타내는 데 사용되며, 세 가지 레벨(Heading 1, Heading 2, Heading 3)을 지원합니다.

데이터 구조

Heading 블록의 Notion API 데이터 구조는 다음과 같습니다 (Heading 1의 예시):

{
  "type": "heading_1",
  "heading_1": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "This is a heading",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "This is a heading",
        "href": null
      }
    ],
    "color": "default",
    "is_toggleable": false
  }
}

• type: "heading_1", "heading_2", 또는 "heading_3" 중 하나입니다.
• rich_text: 헤딩 텍스트의 내용과 스타일 정보를 담고 있는 배열입니다.
• color: 헤딩의 색상을 지정합니다.
• is_toggleable: 토글 기능 사용 여부를 나타냅니다.

React 컴포넌트

Notionpresso에서 Heading 블록을 렌더링하는 컴포넌트는 다음과 같습니다:

import React, { useMemo } from "react";
import type { HeadingsProps, HeadingConfig } from "../types";
import { getColorCss } from "../utils";
import RichText from "./internal/rich-text";

const Headings: React.FC<HeadingsProps> = ({ children, type, ...props }) => {
  const {
    [type]: { color, rich_text: texts, is_toggleable },
  } = props;

  const { headingTag: HeadingTag, headingClassName } =
    useMemo<HeadingConfig>(() => {
      switch (type) {
        case "heading_2":
          return { headingTag: "h2", headingClassName: "notion-h2" };
        case "heading_3":
          return { headingTag: "h3", headingClassName: "notion-h3" };
        default:
          return { headingTag: "h1", headingClassName: "notion-h1" };
      }
    }, [type]);

  return (
    <div
      className={`notion-block ${headingClassName} ${getColorCss(color)}`}
    >
      <HeadingTag className={`notion-h-content ${headingClassName}-content`}>
        <RichText props={texts} />
      </HeadingTag>
      {children}
    </div>
  );
};

export default Headings;

사용 예시

Heading 블록을 사용하는 예시는 다음과 같습니다:

import { Notion } from "@notionpresso/react";

function MyNotionPage({ blocks }) {
  return (
    <Notion>
      <Notion.Blocks blocks={blocks} />
    </Notion>
  );
}

여기서 blocks는 Notion API로부터 받아온 블록 데이터 배열입니다.

스타일링

Heading 블록의 스타일은 다음 CSS 클래스를 통해 커스터마이즈할 수 있습니다:

• .notion-block: 모든 Notion 블록에 적용되는 기본 스타일
• .notion-h1, .notion-h2, .notion-h3: 각 헤딩 레벨에 대한 특정 스타일
• .notion-h1-content, .notion-h2-content, .notion-h3-content: 각 헤딩 내용의 스타일

추가적인 스타일링이 필요한 경우, 이 클래스들을 대상으로 CSS를 작성하면 됩니다.

주의사항

• Heading 블록은 문서의 구조를 나타내는 중요한 요소이므로, 적절한 레벨의 헤딩을 사용하는 것이 좋습니다.
• is_toggleable 속성이 true인 경우, 해당 헤딩은 토글 기능을 가지게 됩니다. 이 경우 추가적인 로직이 필요할 수 있습니다.