Quote 블록

Quote 블록은 다른 출처에서 인용한 텍스트를 표시하는 데 사용됩니다. 일반적으로 시각적으로 구분되는 스타일로 표현됩니다.

데이터 구조

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

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

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

React 컴포넌트

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

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

type QuoteProps = {
  children?: React.ReactNode;
} & QuoteArgs;

const Quote: React.FC<QuoteProps> = ({ children, ...props }) => {
  const {
    quote: { color, rich_text: texts },
  } = props;

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

export default Quote;

사용 예시

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

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

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

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

스타일링

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

• .notion-block: 모든 Notion 블록에 적용되는 기본 스타일
• .notion-quote: Quote 블록 특정 스타일
• .notion-quote-content: 인용문 내용의 스타일

추가적인 스타일링이 필요한 경우, 이 클래스들을 대상으로 CSS를 작성하면 됩니다. 일반적으로 Quote 블록은 다음과 같은 스타일 특성을 가집니다:

• 왼쪽 또는 양쪽에 두꺼운 테두리
• 약간의 들여쓰기
• 배경색 변경
• 폰트 스타일 변경 (예: 기울임꼴)

예를 들어, 다음과 같은 CSS를 적용할 수 있습니다:

.notion-quote {
  border-left: 4px solid #ccc;
  padding-left: 16px;
  margin-left: 0;
  margin-right: 0;
  font-style: italic;
  background-color: #f9f9f9;
}

중첩 지원

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

주의사항

• Quote 블록은 일반적으로 짧은 인용문에 사용됩니다. 긴 인용문의 경우, 가독성을 위해 여러 개의 Quote 블록으로 나누는 것이 좋을 수 있습니다.
• 인용문의 출처를 명시하는 것이 좋습니다. 이는 Quote 블록 아래에 별도의 Paragraph 블록으로 추가할 수 있습니다.
• 접근성을 고려하여, 스크린 리더 사용자를 위해 적절한 ARIA 속성을 추가하는 것이 좋습니다. 예를 들어, role="blockquote" 속성을 사용할 수 있습니다.