Notion Presso

문서튜토리얼기여하기쇼케이스블로그깃허브
GithubXDiscord

block-types > Callout 블록

Callout 블록

Callout 블록은 주목을 끌어야 하는 내용을 강조하는 데 사용됩니다. 주로 아이콘과 함께 색상이 있는 배경으로 표시되어 시각적으로 눈에 띄게 만듭니다.

데이터 구조

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

{
  "type": "callout",
  "callout": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "This is a callout",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "This is a callout",
        "href": null
      }
    ],
    "icon": {
      "type": "emoji",
      "emoji": "💡"
    },
    "color": "gray_background"
  }
}
  • rich_text: Callout의 텍스트 내용과 스타일 정보를 담고 있는 배열입니다.
  • icon: Callout과 함께 표시될 아이콘 정보입니다. 이모지나 외부 이미지 URL이 될 수 있습니다.
  • color: Callout의 배경색을 지정합니다.

React 컴포넌트

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

import React from "react";
import type { CalloutArgs } from "../types";
import { getColorCss } from "../utils";
import RichText from "./internal/rich-text";
import Icon from "./internal/icon";

type CalloutProps = {
  children?: React.ReactNode;
} & CalloutArgs;

const Callout: React.FC<CalloutProps> = ({ children, ...props }) => {
  const { callout } = props;

  return (
    <div
      className={`notion-block notion-callout ${getColorCss(callout.color)}`}
    >
      <div className="notion-callout-content">
        <div className="notion-callout-icon" aria-hidden="true">
          <Icon icon={callout.icon} />
        </div>
        <div className="notion-callout-text">
          <RichText props={callout.rich_text} />
        </div>
      </div>
      {children}
    </div>
  );
};

export default Callout;

사용 예시

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

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

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

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

아이콘 처리

Callout 블록의 아이콘은 Icon 컴포넌트를 통해 처리됩니다. 이 컴포넌트는 이모지와 외부 이미지 URL을 모두 지원합니다. 아이콘 타입에 따라 적절한 렌더링 방식을 선택합니다.

스타일링

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

  • .notion-block: 모든 Notion 블록에 적용되는 기본 스타일
  • .notion-callout: Callout 블록 특정 스타일
  • .notion-callout-content: Callout 내용의 스타일
  • .notion-callout-icon: Callout 아이콘의 스타일
  • .notion-callout-text: Callout 텍스트의 스타일

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

.notion-callout {
  border-radius: 4px;
  padding: 16px;
  display: flex;
  align-items: center;
}

.notion-callout-icon {
  margin-right: 12px;
  font-size: 24px;
}

.notion-callout-text {
  flex: 1;
}

색상 처리

Callout의 color 속성은 배경색을 결정합니다. getColorCss 유틸리티 함수를 사용하여 적절한 CSS 클래스를 생성합니다. 이 함수는 Notion의 색상 이름을 CSS 클래스로 변환합니다.

중첩 지원

Callout 블록은 다른 블록을 포함할 수 있습니다. 이는 children prop을 통해 처리됩니다. 예를 들어, Callout 안에 리스트나 다른 텍스트 블록을 포함할 수 있습니다.

주의사항

  • Callout 블록은 주요 정보나 경고를 강조하는 데 효과적입니다. 그러나 과도한 사용은 오히려 주의를 분산시킬 수 있으므로 적절히 사용해야 합니다.
  • 아이콘과 배경색의 조합이 접근성 기준을 충족하는지 확인해야 합니다. 특히 텍스트와 배경 간의 충분한 대비를 유지해야 합니다.
  • 스크린 리더 사용자를 위해 아이콘에 적절한 대체 텍스트를 제공하는 것이 좋습니다.

Paragraph 블록

Toggle 블록