feat: 중첩 컴포넌트 재귀 처리

Author: 01-binary

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

@@ -7,7 +7,6 @@ import {
 } from '../MemoizedComponents';
 import { CodeBlock } from '../Code';
 import { Heading1, Heading2, Heading3, Paragraph } from '../Typography';
-import { ListItem } from '../List';
 
 export interface Props {
   block: any;
@@ -53,20 +52,6 @@ const BlockRenderer: React.FC<Props> = ({ block, onFocus, index }) => {
         </Heading3>
       );
 
-    case 'bulleted_list_item':
-      return (
-        <ListItem {...blockProps}>
-          <MemoizedRichText richTexts={block.bulleted_list_item.rich_text} />
-        </ListItem>
-      );
-
-    case 'numbered_list_item':
-      return (
-        <ListItem {...blockProps}>
-          <MemoizedRichText richTexts={block.numbered_list_item.rich_text} />
-        </ListItem>
-      );
-
     case 'code':
       return (
         <div {...blockProps}>

packages/notion-to-jsx/src/components/Renderer/components/List/ListBlocksRenderer.tsx

@@ -1,12 +1,67 @@
-import { BlockRenderer } from '../Block';
-import { List } from './List';
+import React from 'react';
+import { List, ListItem } from './List';
+import { MemoizedRichText } from '../MemoizedComponents';
 
 export interface Props {
   blocks: any[];
   startIndex: number;
   type: 'bulleted' | 'numbered';
 }
 
+// 리스트 아이템을 렌더링하는 컴포넌트 (중첩 리스트 지원)
+const RecursiveListItem: React.FC<{
+  block: any;
+  index: number;
+}> = ({ block, index }) => {
+  const blockProps = {
+    tabIndex: 0,
+    'data-block-id': block.id,
+  };
+
+  const blockType = block.type;
+  const richTexts = block[blockType]?.rich_text;
+
+  return (
+    <ListItem {...blockProps}>
+      <MemoizedRichText richTexts={richTexts} />
+      {block.children && block.children.length > 0 && (
+        <RecursiveListGroup
+          blocks={block.children}
+          type={blockType.split('_')[0] as 'bulleted' | 'numbered'}
+        />
+      )}
+    </ListItem>
+  );
+};
+
+// 중첩 리스트 그룹을 렌더링하는 컴포넌트
+const RecursiveListGroup: React.FC<{
+  blocks: any[];
+  type: 'bulleted' | 'numbered';
+}> = ({ blocks, type }) => {
+  if (!blocks || blocks.length === 0) return null;
+
+  // 리스트 타입에 맞는 아이템만 필터링
+  const listItems = blocks.filter(
+    (block) => block.type === `${type}_list_item`
+  );
+
+  if (listItems.length === 0) return null;
+
+  return (
+    <List
+      as={type === 'numbered' ? 'ol' : 'ul'}
+      type={type}
+      role="list"
+      aria-label={type === 'bulleted' ? 'Bulleted list' : 'Numbered list'}
+    >
+      {listItems.map((block, index) => (
+        <RecursiveListItem key={block.id} block={block} index={index} />
+      ))}
+    </List>
+  );
+};
+
 const ListBlocksRenderer: React.FC<Props> = ({ blocks, startIndex, type }) => {
   let consecutiveItems = 0;
   for (let i = startIndex; i < blocks.length; i++) {
@@ -18,22 +73,23 @@ const ListBlocksRenderer: React.FC<Props> = ({ blocks, startIndex, type }) => {
       break;
     }
   }
+
+  const listItems = blocks.slice(startIndex, startIndex + consecutiveItems);
+
   return (
     <List
       as={type === 'numbered' ? 'ol' : 'ul'}
       type={type}
       role="list"
       aria-label={type === 'bulleted' ? 'Bulleted list' : 'Numbered list'}
     >
-      {blocks
-        .slice(startIndex, startIndex + consecutiveItems)
-        .map((block, index) => (
-          <BlockRenderer
-            key={block.id}
-            block={block}
-            index={startIndex + index}
-          />
-        ))}
+      {listItems.map((block, index) => (
+        <RecursiveListItem
+          key={block.id}
+          block={block}
+          index={startIndex + index}
+        />
+      ))}
     </List>
   );
 };

packages/notion-to-jsx/src/components/Renderer/components/List/index.tsx

@@ -1,2 +1 @@
-export { List, ListItem } from './List';
 export { default as ListBlocksRenderer } from './ListBlocksRenderer';