feat: Quote Component 구현

Author: 01-binary

packages/notion-to-jsx/src/components/Renderer/components/Block/BlockRenderer.tsx

@@ -9,6 +9,7 @@ import {
 import { CodeBlock } from '../Code';
 import { Heading1, Heading2, Heading3, Paragraph } from '../Typography';
 import { ColumnList } from '../Column';
+import { Quote } from '../Quote';
 
 export interface Props {
   block: any;
@@ -91,6 +92,9 @@ const BlockRenderer: React.FC<Props> = ({ block, onFocus, index }) => {
       // 개별 column은 ColumnList에서 처리됩니다
       return null;
 
+    case 'quote':
+      return <Quote richText={block.quote.rich_text} {...blockProps} />;
+
     default:
       console.log(`지원되지 않는 블록 타입: ${block.type}`, block);
       return null;

packages/notion-to-jsx/src/components/Renderer/components/Quote/Quote.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { MemoizedRichText } from '../MemoizedComponents';
+import { container } from './styles.css';
+
+export interface QuoteProps {
+  richText: any[];
+  tabIndex?: number;
+}
+
+const Quote: React.FC<QuoteProps> = ({ richText, tabIndex }) => {
+  return (
+    <blockquote className={container} tabIndex={tabIndex}>
+      <MemoizedRichText richTexts={richText} />
+    </blockquote>
+  );
+};
+
+export default Quote;

packages/notion-to-jsx/src/components/Renderer/components/Quote/index.ts

@@ -0,0 +1 @@
+export { default as Quote } from './Quote';

packages/notion-to-jsx/src/components/Renderer/components/Quote/styles.css.ts

@@ -0,0 +1,12 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  position: 'relative',
+  margin: '0.5rem 0',
+  padding: '0.25rem 0 0.25rem 1rem',
+  borderLeft: '3px solid #e1e1e1',
+  color: '#37352f',
+  fontSize: '1rem',
+  lineHeight: '1.5',
+  fontStyle: 'italic',
+});