feat: Toggle Component 추가

Author: 01-binary

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

@@ -11,6 +11,7 @@ import { Heading1, Heading2, Heading3, Paragraph } from '../Typography';
 import { ColumnList } from '../Column';
 import { Quote } from '../Quote';
 import Table from '../Table';
+import { Toggle } from '../Toggle';
 
 export interface Props {
   block: any;
@@ -97,6 +98,9 @@ const BlockRenderer: React.FC<Props> = ({ block, onFocus, index }) => {
 
     case 'table':
       return <Table block={block} tabIndex={blockProps.tabIndex} />;
+      
+    case 'toggle':
+      return <Toggle block={block} tabIndex={blockProps.tabIndex} onFocus={onFocus} />;
 
     default:
       console.log(`지원되지 않는 블록 타입: ${block.type}`, block);

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

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { NotionBlock } from '../../../../types';
+import { 
+  toggleContainer, 
+  toggleHeader, 
+  toggleIcon, 
+  toggleIconOpen, 
+  toggleContent 
+} from './styles.css';
+import { RichTexts } from '../../components/RichText';
+import BlockRenderer from '../../components/Block/BlockRenderer';
+
+interface ToggleProps {
+  block: NotionBlock;
+  tabIndex?: number;
+  onFocus?: () => void;
+}
+
+const Toggle: React.FC<ToggleProps> = ({ block, tabIndex = 0, onFocus }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Toggle이 없거나 children이 없는 경우 렌더링하지 않음
+  if (!block.toggle || !block.children) {
+    return null;
+  }
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleToggle();
+    }
+  };
+
+  return (
+    <div className={toggleContainer}>
+      <div 
+        className={toggleHeader}
+        onClick={handleToggle}
+        onKeyDown={handleKeyDown}
+        tabIndex={tabIndex}
+        onFocus={onFocus}
+        role="button"
+        aria-expanded={isOpen}
+      >
+        <span className={`${toggleIcon} ${isOpen ? toggleIconOpen : ''}`}>
+          ▶
+        </span>
+        <RichTexts richTexts={block.toggle.rich_text} />
+      </div>
+
+      {isOpen && block.children && (
+        <div className={toggleContent}>
+          {block.children.map((childBlock, index) => (
+            <BlockRenderer
+              key={childBlock.id}
+              block={childBlock}
+              index={index}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Toggle;

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

@@ -0,0 +1,3 @@
+import Toggle from './Toggle';
+
+export { Toggle };

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

@@ -0,0 +1,40 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../../../styles/theme.css';
+
+export const toggleContainer = style({
+  position: 'relative',
+});
+
+export const toggleHeader = style({
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  fontSize: vars.typography.fontSize.base,
+  fontWeight: vars.typography.fontWeight.normal,
+  color: 'inherit',
+  padding: `${vars.spacing.xs} 0`,
+  borderRadius: vars.borderRadius.sm,
+  ':hover': {
+    background: 'rgba(55, 53, 47, 0.08)',
+  },
+});
+
+export const toggleIcon = style({
+  marginRight: vars.spacing.sm,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  transition: 'transform 0.2s ease',
+  width: '1.2rem',
+  height: '1.2rem',
+});
+
+export const toggleIconOpen = style({
+  transform: 'rotate(90deg)',
+});
+
+export const toggleContent = style({
+  paddingLeft: vars.spacing.lg,
+  marginTop: vars.spacing.xs,
+  overflow: 'hidden',
+});

packages/notion-to-jsx/src/types/index.ts

@@ -15,7 +15,8 @@ export interface NotionBlock {
     | 'bookmark'
     | 'table'
     | 'table_row'
-    | 'quote';
+    | 'quote'
+    | 'toggle';
   paragraph?: {
     rich_text: RichTextItem[];
     color: string;
@@ -67,6 +68,10 @@ export interface NotionBlock {
     rich_text: RichTextItem[];
     color: string;
   };
+  toggle?: {
+    rich_text: RichTextItem[];
+    color: string;
+  };
   children?: NotionBlock[];
   has_children?: boolean;
   parent?: {