Bulleted List Item 블록

Bulleted List Item 블록은 순서가 없는 목록을 만드는 데 사용됩니다. 각 항목은 글머리 기호(bullet)로 시작합니다.

데이터 구조

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

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

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

React 컴포넌트

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

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

type BulletedListItemProps = {
  children?: React.ReactNode;
} & BulletedListItemArgs;

const BulletedListItem: React.FC<BulletedListItemProps> = ({
  children,
  ...props
}) => {
  const {
    bulleted_list_item: { rich_text: texts, color },
  } = props;
  const { marker, format } = bulletedListItemMarker.getMarker(props);

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

export default BulletedListItem;

사용 예시

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

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

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

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

스타일링

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

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

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

중첩된 리스트 처리

Bulleted List Item은 중첩될 수 있습니다. 중첩된 리스트는 children prop을 통해 처리됩니다. 중첩 레벨에 따라 글머리 기호의 모양이 달라질 수 있으며, 이는 bulletedListItemMarker.getMarker 함수에서 처리됩니다.

주의사항

• Bulleted List Item 블록은 연속적으로 사용될 때 자동으로 하나의 리스트로 그룹화됩니다.
• 중첩된 리스트를 사용할 때는 적절한 들여쓰기를 통해 계층 구조를 명확히 표현하는 것이 좋습니다.
• 글머리 기호의 모양은 Notion의 기본 스타일을 따르지만, CSS를 통해 커스터마이즈할 수 있습니다.