feat: ListItem 추가, 로직 refactoring

Author: 01-binary

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

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

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

@@ -18,9 +18,13 @@ const ListBlocksRenderer: React.FC<Props> = ({ blocks, startIndex, type }) => {
       break;
     }
   }
-
   return (
-    <List as={type === 'numbered' ? 'ol' : 'ul'} type={type}>
+    <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) => (

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

@@ -4,8 +4,7 @@ import { vars } from '../../../../styles/theme.css';
 
 export const list = recipe({
   base: {
-    margin: `${vars.spacing.sm} 0`,
-    paddingLeft: vars.spacing.xl,
+    paddingLeft: vars.spacing.lg,
   },
   variants: {
     type: {
@@ -19,6 +18,4 @@ export const list = recipe({
   },
 });
 
-export const listItem = style({
-  margin: `${vars.spacing.xs} 0`,
-});
+export const listItem = style({});

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

@@ -16,17 +16,6 @@ const notion = {
   },
 };
 
-// const GlobalStyle = createGlobalStyle<{ theme: Theme }>`
-//   body {
-//     background-color: ${({ theme }) => theme.colors.background};
-//     color: ${({ theme }) => theme.colors.text};
-//     font-family: ${({ theme }) => theme.typography.fontFamily.base};
-//     line-height: ${({ theme }) => theme.typography.lineHeight.base};
-//     margin: 0;
-//     padding: 0;
-//   }
-// `;
-
 interface Props {
   isDarkMode?: boolean;
   onBlockFocus?: (index: number) => void;
@@ -37,7 +26,7 @@ export const Renderer: React.FC<Props> = React.memo(
     const theme = isDarkMode ? darkTheme : lightTheme;
     const [focusedIndex, setFocusedIndex] = useState<number>(-1);
 
-    // For test
+    // TODO: For test
     useEffect(() => {
       const fetchBlocks = async () => {
         const result = await notion.getPageBlocks();
@@ -62,62 +51,44 @@ export const Renderer: React.FC<Props> = React.memo(
         const block = blocks[i];
         if (!block) break;
 
-        if (
-          block.type === 'bulleted_list_item' &&
-          (i === 0 || blocks[i - 1]?.type !== 'bulleted_list_item')
-        ) {
-          result.push(
-            <List
-              as="ul"
-              type="bulleted"
-              role="list"
-              aria-label="Bulleted list"
-              key={block.id}
-            >
-              <ListBlocksRenderer
-                blocks={blocks}
-                startIndex={i}
-                type="bulleted"
-              />
-            </List>
-          );
-          while (
-            i + 1 < blocks.length &&
-            blocks[i + 1] &&
-            blocks[i + 1]?.type === 'bulleted_list_item'
+        // 리스트 아이템 타입 처리를 위한 공통 함수
+        const handleListItem = (listType: 'bulleted' | 'numbered') => {
+          const listItemType = `${listType}_list_item`;
+
+          if (
+            block.type === listItemType &&
+            (i === 0 || blocks[i - 1]?.type !== listItemType)
           ) {
-            i++;
-          }
-        } else if (
-          block.type === 'numbered_list_item' &&
-          (i === 0 || blocks[i - 1]?.type !== 'numbered_list_item')
-        ) {
-          result.push(
-            <List
-              as="ol"
-              type="numbered"
-              role="list"
-              aria-label="Numbered list"
-              key={block.id}
-            >
+            result.push(
               <ListBlocksRenderer
+                key={block.id}
                 blocks={blocks}
                 startIndex={i}
-                type="numbered"
+                type={listType}
               />
-            </List>
-          );
-          while (
-            i + 1 < blocks.length &&
-            blocks[i + 1] &&
-            blocks[i + 1]?.type === 'numbered_list_item'
-          ) {
-            i++;
+            );
+
+            // 연속된 같은 타입의 리스트 아이템 건너뛰기
+            while (
+              i + 1 < blocks.length &&
+              blocks[i + 1] &&
+              blocks[i + 1]?.type === listItemType
+            ) {
+              i++;
+            }
+
+            return true;
           }
-        } else if (
-          block.type !== 'bulleted_list_item' &&
-          block.type !== 'numbered_list_item'
-        ) {
+
+          return false;
+        };
+
+        // 순서대로 각 리스트 타입 처리 시도
+        if (handleListItem('bulleted') || handleListItem('numbered')) {
+          // 리스트 아이템이 처리되었으므로 다음 블록으로 진행
+          continue;
+        } else {
+          // 리스트 아이템이 아닌 일반 블록 처리
           result.push(
             <BlockRenderer
               key={block.id}