Numbered List Item 블록

Numbered List Item 블록은 순서가 있는 목록을 만드는 데 사용됩니다. 각 항목은 순차적인 번호로 시작합니다.

데이터 구조

Numbered List Item 블록의 Notion API 데이터 구조는 다음과 같습니다:

{
  "type": "numbered_list_item",
  "numbered_list_item": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "This is a numbered list item",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "This is a numbered list item",
        "href": null
      }
    ],
    "color": "default"
  }
}

rich_text: 리스트 항목의 텍스트 내용과 스타일 정보를 담고 있는 배열입니다.
color: 텍스트의 색상을 지정합니다.

React 컴포넌트

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

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

type NumberedListProps = {
  children?: React.ReactNode;
} & NumberedListItemArgs;

const NumberedListItem: React.FC<NumberedListProps> = ({
  children,
  ...props
}) => {
  const {
    numbered_list_item: { rich_text: texts, color },
  } = props;
  const { marker, format } = numberedListItemMarker.getMarker(props);

  return (
    <ol
      data-notion-marker-format={format}
      className={`notion-block notion-list-numbered ${getColorCss(color)}`}
    >
      <li className="notion-display-contents">
        <div className="notion-list-numbered-content">
          <span
            data-notion-marker-format={format}
            className="notion-list-marker"
          >
            {marker}
          </span>
          <p>
            <RichText props={texts} />
          </p>
        </div>
        {children}
      </li>
    </ol>
  );
};

export default NumberedListItem;

사용 예시

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

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

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

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

스타일링

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

.notion-block: 모든 Notion 블록에 적용되는 기본 스타일
.notion-list-numbered: Numbered List Item 블록 특정 스타일
.notion-list-numbered-content: 리스트 항목 내용의 스타일
.notion-list-marker: 번호의 스타일

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

번호 매기기 방식

Numbered List Item의 번호 매기기 방식은 numberedListItemMarker.getMarker 함수에 의해 결정됩니다. 이 함수는 현재 항목의 위치와 중첩 레벨을 고려하여 적절한 번호나 문자를 반환합니다. 기본적으로 다음과 같은 순서를 따릅니다:

최상위 레벨: 1, 2, 3, ...
두 번째 레벨: a, b, c, ...
세 번째 레벨: i, ii, iii, ...

이 순서는 필요에 따라 커스터마이즈할 수 있습니다.

중첩된 리스트 처리

Numbered List Item도 중첩될 수 있습니다. 중첩된 리스트는 children prop을 통해 처리됩니다. 중첩 레벨에 따라 번호 매기기 방식이 달라질 수 있으며, 이는 numberedListItemMarker.getMarker 함수에서 처리됩니다.

주의사항

Numbered List Item 블록은 연속적으로 사용될 때 자동으로 하나의 리스트로 그룹화됩니다.
중첩된 리스트를 사용할 때는 적절한 들여쓰기를 통해 계층 구조를 명확히 표현하는 것이 좋습니다.
번호 매기기 방식은 Notion의 기본 스타일을 따르지만, CSS를 통해 커스터마이즈할 수 있습니다.
리스트가 중단되었다가 다시 시작될 경우, 번호 매기기가 새로 시작될 수 있으므로 주의가 필요합니다.