feat: Table Component 추가

Author: 01-binary

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

@@ -10,6 +10,7 @@ import { CodeBlock } from '../Code';
 import { Heading1, Heading2, Heading3, Paragraph } from '../Typography';
 import { ColumnList } from '../Column';
 import { Quote } from '../Quote';
+import Table from '../Table';
 
 export interface Props {
   block: any;
@@ -23,7 +24,6 @@ const BlockRenderer: React.FC<Props> = ({ block, onFocus, index }) => {
   const blockProps = {
     tabIndex: 0,
     onFocus,
-    'data-block-id': block.id,
   };
 
   switch (block.type) {
@@ -93,7 +93,10 @@ const BlockRenderer: React.FC<Props> = ({ block, onFocus, index }) => {
       return null;
 
     case 'quote':
-      return <Quote richText={block.quote.rich_text} {...blockProps} />;
+      return <Quote richTexts={block.quote.rich_text} {...blockProps} />;
+
+    case 'table':
+      return <Table block={block} tabIndex={blockProps.tabIndex} />;
 
     default:
       console.log(`지원되지 않는 블록 타입: ${block.type}`, block);

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

@@ -15,7 +15,6 @@ const RecursiveListItem: React.FC<{
 }> = ({ block, index }) => {
   const blockProps = {
     tabIndex: 0,
-    'data-block-id': block.id,
   };
 
   const blockType = block.type;

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { tableContainer, table, headerCell, hasRowHeader } from './styles.css';
+import TableRow from './TableRow';
+import { NotionBlock } from '../../../../types';
+
+interface TableProps {
+  block: NotionBlock;
+  tabIndex?: number;
+}
+
+const Table: React.FC<TableProps> = ({ block, tabIndex = 0 }) => {
+  if (!block.table || !block.children) {
+    return null;
+  }
+
+  const { table_width, has_column_header, has_row_header } = block.table;
+  const rows =
+    block.children?.filter(
+      (child: NotionBlock) => child.type === 'table_row'
+    ) || [];
+
+  return (
+    <div className={tableContainer}>
+      <table className={table} tabIndex={tabIndex}>
+        {rows.length > 0 && (
+          <>
+            {has_column_header && rows[0] && (
+              <thead>
+                <TableRow rowBlock={rows[0]} cellClassName={headerCell} />
+              </thead>
+            )}
+            <tbody>
+              {/* 유효한 row만 매핑하도록 필터링 추가 */}
+              {rows
+                .filter(
+                  (row): row is NotionBlock =>
+                    row !== undefined && row.type === 'table_row'
+                )
+                .map((row: NotionBlock, rowIndex: number) => {
+                  // 열 헤더가 있고 첫 번째 행이면 이미 thead에서 렌더링되었으므로 건너뜁니다
+                  if (has_column_header && rowIndex === 0) {
+                    return null;
+                  }
+
+                  const actualRowIndex = has_column_header
+                    ? rowIndex - 1
+                    : rowIndex;
+                  // 타입 체크를 통해 row가 실제 Block 타입임을 확인합니다
+                  return (
+                    <TableRow
+                      key={row.id}
+                      rowBlock={row}
+                      rowHeaderIndex={has_row_header ? 0 : -1}
+                    />
+                  );
+                })}
+            </tbody>
+          </>
+        )}
+      </table>
+    </div>
+  );
+};
+
+export default Table;

packages/notion-to-jsx/src/components/Renderer/components/Table/TableRow.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { tableCell, firstCell, lastCell, hasRowHeader } from './styles.css';
+import { MemoizedRichText } from '../MemoizedComponents';
+import { NotionBlock } from '../../../../types';
+import { RichTextItem } from '../RichText/RichTexts';
+
+interface TableRowProps {
+  rowBlock: NotionBlock;
+  cellClassName?: string;
+  rowHeaderIndex?: number;
+}
+
+const TableRow: React.FC<TableRowProps> = ({
+  rowBlock,
+  cellClassName = '',
+  rowHeaderIndex = -1,
+}) => {
+  if (!rowBlock.table_row?.cells) {
+    return null;
+  }
+
+  const { cells } = rowBlock.table_row;
+
+  return (
+    <tr>
+      {cells.map((cell: RichTextItem[], index: number) => {
+        const isFirstCell = index === 0;
+        const isLastCell = index === cells.length - 1;
+        const isRowHeader = index === rowHeaderIndex;
+
+        let cellClasses = [tableCell, cellClassName];
+
+        if (isFirstCell) cellClasses.push(firstCell);
+        if (isLastCell) cellClasses.push(lastCell);
+        if (isRowHeader) cellClasses.push(hasRowHeader);
+
+        return (
+          <td
+            key={`${rowBlock.id}-cell-${index}`}
+            className={cellClasses.filter(Boolean).join(' ')}
+          >
+            <MemoizedRichText richTexts={cell} />
+          </td>
+        );
+      })}
+    </tr>
+  );
+};
+
+export default TableRow;

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

@@ -0,0 +1,5 @@
+import Table from './Table';
+import TableRow from './TableRow';
+
+export { TableRow };
+export default Table;

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

@@ -0,0 +1,48 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../../../styles/theme.css';
+
+export const tableContainer = style({
+  width: '100%',
+  marginTop: vars.spacing.xs,
+  marginBottom: vars.spacing.xs,
+  borderRadius: vars.borderRadius.sm,
+  overflow: 'hidden',
+});
+
+export const table = style({
+  width: '100%',
+  borderCollapse: 'collapse',
+  borderSpacing: 0,
+  fontSize: vars.typography.fontSize.small,
+  color: 'inherit',
+});
+
+export const headerCell = style({
+  backgroundColor: '#f7f6f3',
+  fontWeight: vars.typography.fontWeight.semibold,
+});
+
+export const tableCell = style({
+  position: 'relative',
+  padding: `${vars.spacing.xs} ${vars.spacing.sm}`,
+  minHeight: '2rem',
+  border: '1px solid rgba(55, 53, 47, 0.09)',
+  borderLeft: 'none',
+  borderRight: 'none',
+  verticalAlign: 'top',
+  textAlign: 'left',
+  userSelect: 'text',
+});
+
+export const firstCell = style({
+  borderLeft: '1px solid rgba(55, 53, 47, 0.09)',
+});
+
+export const lastCell = style({
+  borderRight: '1px solid rgba(55, 53, 47, 0.09)',
+});
+
+export const hasRowHeader = style({
+  backgroundColor: '#f7f6f3',
+  fontWeight: vars.typography.fontWeight.semibold,
+});