refactor: components to use TypeScript types and remove React imports

01-binary · 01-binary · commit 0b709b948524 · 2025-04-29T16:25:16.000+09:00
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Code/CodeBlock.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Code/CodeBlock.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
 import { codeBlock } from './styles.css';
 import Prism, { Grammar, Token } from 'prismjs';
 import { MemoizedRichText } from '../MemoizedComponents';
@@ -12,13 +12,13 @@ if (typeof window !== 'undefined') {
   window.Prism = Prism;
 }
 
-const renderToken = (token: string | Token, i: number): React.ReactNode => {
+const renderToken = (token: string | Token, i: number): ReactNode => {
   if (typeof token === 'string') {
     return <span key={i}>{token}</span>;
   }
 
   const content = token.content;
-  let tokenContent: React.ReactNode;
+  let tokenContent: ReactNode;
 
   if (Array.isArray(content)) {
     tokenContent = content.map((subToken, j) => renderToken(subToken, j));
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Column/Column.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Column/Column.tsx
@@ -1,25 +1,18 @@
-import React from 'react';
+import { ColumnBlock } from '../../../../types';
 import BlockRenderer from '../Block/BlockRenderer';
 import { columnContainer } from './styles.css';
 
 export interface ColumnProps {
-  block: any;
-  onFocus?: () => void;
+  block: ColumnBlock;
 }
 
-const Column: React.FC<ColumnProps> = ({ block, onFocus }) => {
+const Column = ({ block }: ColumnProps) => {
   if (!block || !block.children) return null;
 
   return (
     <div className={columnContainer}>
-      {block.children.map((childBlock: any, index: number) => (
-        <BlockRenderer
-          key={childBlock.id}
-          block={childBlock}
-          onFocus={onFocus}
-          index={index}
-          isColumn
-        />
+      {block.children.map((childBlock) => (
+        <BlockRenderer key={childBlock.id} block={childBlock} isColumn />
       ))}
     </div>
   );
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Column/ColumnList.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Column/ColumnList.tsx
@@ -1,19 +1,18 @@
-import React from 'react';
 import Column from './Column';
 import { columnListContainer } from './styles.css';
+import { ColumnListBlock } from '../../../../types';
 
 export interface ColumnListProps {
-  block: any;
-  onFocus?: () => void;
+  block: ColumnListBlock;
 }
 
-const ColumnList: React.FC<ColumnListProps> = ({ block, onFocus }) => {
+const ColumnList = ({ block }: ColumnListProps) => {
   if (!block || !block.children) return null;
 
   return (
     <div className={columnListContainer}>
-      {block.children.map((column: any) => (
-        <Column key={column.id} block={column} onFocus={onFocus} />
+      {block.children.map((column) => (
+        <Column key={column.id} block={column} />
       ))}
     </div>
   );
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Image/Image.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Image/Image.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { MemoizedRichText } from '../MemoizedComponents';
 import {
   imageContainer,
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/LinkPreview/LinkPreview.tsx b/packages/notion-to-jsx/src/components/Renderer/components/LinkPreview/LinkPreview.tsx
@@ -1,10 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import * as styles from './styles.css';
 
-export interface LinkPreviewProps {
-  url: string;
-}
-
 interface RepoData {
   name: string;
   full_name: string;
@@ -172,7 +168,10 @@ const formatUpdatedTime = (dateString: string): string => {
   }
 };
 
-const LinkPreview: React.FC<LinkPreviewProps> = ({ url }) => {
+export interface LinkPreviewProps {
+  url: string;
+}
+const LinkPreview = ({ url }: LinkPreviewProps) => {
   const [repoData, setRepoData] = useState<RepoData | null>(null);
   const [figmaData, setFigmaData] = useState<FigmaData | null>(null);
   const [loading, setLoading] = useState(true);
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/List/ListBlocksRenderer.tsx b/packages/notion-to-jsx/src/components/Renderer/components/List/ListBlocksRenderer.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { List, ListItem } from './List';
 import { MemoizedRichText } from '../MemoizedComponents';
 import {
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Quote/Quote.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Quote/Quote.tsx
@@ -1,15 +1,13 @@
-import React from 'react';
 import { MemoizedRichText } from '../MemoizedComponents';
 import { container } from './styles.css';
 import { RichTextItem } from '../RichText/RichTexts';
-import { richText } from '../RichText/styles.css';
 
 export interface QuoteProps {
   richTexts: RichTextItem[];
   tabIndex?: number;
 }
 
-const Quote: React.FC<QuoteProps> = ({ richTexts, tabIndex }) => {
+const Quote = ({ richTexts, tabIndex }: QuoteProps) => {
   return (
     <blockquote className={container} tabIndex={tabIndex}>
       <MemoizedRichText richTexts={richTexts} />
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/RichText/RichTexts.tsx b/packages/notion-to-jsx/src/components/Renderer/components/RichText/RichTexts.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactNode } from 'react';
 import { richText, link } from './styles.css';
 
 // 지원하는 Notion 색상 타입 정의
@@ -50,20 +50,20 @@ export interface RichTextItem {
   };
 }
 
-export interface RichTextProps {
-  richTexts: RichTextItem[];
-}
-
 /**
  * 링크 컴포넌트를 생성하는 함수
  */
-const renderLink = (href: string, content: React.ReactNode) => (
+const renderLink = (href: string, content: ReactNode) => (
   <a href={href} target="_blank" rel="noopener noreferrer" className={link}>
     {content}
   </a>
 );
 
-const RichTexts: React.FC<RichTextProps> = ({ richTexts }) => {
+export interface RichTextProps {
+  richTexts: RichTextItem[];
+}
+
+const RichTexts = ({ richTexts }: RichTextProps) => {
   return (
     <>
       {richTexts.map((text, index) => {
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Table/Table.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Table/Table.tsx
@@ -1,27 +1,23 @@
-import React from 'react';
-import { tableContainer, table, headerCell, hasRowHeader } from './styles.css';
+import { tableContainer, table, headerCell } from './styles.css';
 import TableRow from './TableRow';
-import { NotionBlock } from '../../../../types';
+import { TableBlock } from '../../../../types';
 
 interface TableProps {
-  block: NotionBlock;
-  tabIndex?: number;
+  block: TableBlock;
 }
 
-const Table: React.FC<TableProps> = ({ block, tabIndex = 0 }) => {
+const Table = ({ block }: TableProps) => {
   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'
-    ) || [];
+    block.children?.filter((child) => child.type === 'table_row') || [];
 
   return (
     <div className={tableContainer}>
-      <table className={table} tabIndex={tabIndex}>
+      <table className={table}>
         {rows.length > 0 && (
           <>
             {has_column_header && rows[0] && (
@@ -32,20 +28,13 @@ const Table: React.FC<TableProps> = ({ block, tabIndex = 0 }) => {
             <tbody>
               {/* 유효한 row만 매핑하도록 필터링 추가 */}
               {rows
-                .filter(
-                  (row): row is NotionBlock =>
-                    row !== undefined && row.type === 'table_row'
-                )
-                .map((row: NotionBlock, rowIndex: number) => {
+                .filter((row) => row !== undefined && row.type === 'table_row')
+                .map((row, 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}
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Table/TableRow.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Table/TableRow.tsx
@@ -1,20 +1,19 @@
-import React from 'react';
 import { tableCell, firstCell, lastCell, hasRowHeader } from './styles.css';
 import { MemoizedRichText } from '../MemoizedComponents';
-import { NotionBlock } from '../../../../types';
+import { TableRowBlock } from '../../../../types';
 import { RichTextItem } from '../RichText/RichTexts';
 
 interface TableRowProps {
-  rowBlock: NotionBlock;
+  rowBlock: TableRowBlock;
   cellClassName?: string;
   rowHeaderIndex?: number;
 }
 
-const TableRow: React.FC<TableRowProps> = ({
+const TableRow = ({
   rowBlock,
   cellClassName = '',
   rowHeaderIndex = -1,
-}) => {
+}: TableRowProps) => {
   if (!rowBlock.table_row?.cells) {
     return null;
   }
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Table/index.ts b/packages/notion-to-jsx/src/components/Renderer/components/Table/index.ts
@@ -1,5 +1,3 @@
 import Table from './Table';
-import TableRow from './TableRow';
-
-export { TableRow };
+export { default as TableRow } from './TableRow';
 export default Table;
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Toggle/Toggle.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Toggle/Toggle.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState, KeyboardEvent } from 'react';
 import { ToggleBlock } from '../../../../types';
 import {
   toggleContainer,
@@ -26,7 +26,7 @@ const Toggle = ({ block }: ToggleProps) => {
     setIsOpen(!isOpen);
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
+  const handleKeyDown = (e: KeyboardEvent) => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
       handleToggle();
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Typography/Typography.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Typography/Typography.tsx
@@ -1,51 +1,49 @@
-import React from 'react';
+import { HTMLAttributes, PropsWithChildren } from 'react';
 import { paragraph, heading1, heading2, heading3 } from './styles.css';
 
-interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
-  children: React.ReactNode;
-}
+type TypographyProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 
-export const Paragraph: React.FC<TypographyProps> = ({
+export const Paragraph = ({
   className,
   children,
   ...props
-}) => {
+}: TypographyProps) => {
   return (
     <p className={paragraph} {...props}>
       {children}
     </p>
   );
 };
 
-export const Heading1: React.FC<TypographyProps> = ({
+export const Heading1 = ({
   className,
   children,
   ...props
-}) => {
+}: TypographyProps) => {
   return (
     <h1 className={heading1} {...props}>
       {children}
     </h1>
   );
 };
 
-export const Heading2: React.FC<TypographyProps> = ({
+export const Heading2 = ({
   className,
   children,
   ...props
-}) => {
+}: TypographyProps) => {
   return (
     <h2 className={heading2} {...props}>
       {children}
     </h2>
   );
 };
 
-export const Heading3: React.FC<TypographyProps> = ({
+export const Heading3 = ({
   className,
   children,
   ...props
-}) => {
+}: TypographyProps) => {
   return (
     <h3 className={heading3} {...props}>
       {children}
diff --git a/packages/notion-to-jsx/src/components/Skeleton/index.tsx b/packages/notion-to-jsx/src/components/Skeleton/index.tsx
@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import * as styles from './styles.css';
 
 type SkeletonProps = {
@@ -25,12 +24,12 @@ type SkeletonProps = {
  * 콘텐츠 로딩 중에 표시되는 물결 효과가 있는 스켈레톤 컴포넌트입니다.
  * 이미지, 텍스트 등의 로딩 상태를 표시하는 데 사용합니다.
  */
-const Skeleton: FC<SkeletonProps> = ({
+const Skeleton = ({
   variant = 'rect',
   width,
   height,
   className,
-}) => {
+}: SkeletonProps) => {
   const getVariantClass = () => {
     switch (variant) {
       case 'circle':
diff --git a/packages/notion-to-jsx/src/types/index.ts b/packages/notion-to-jsx/src/types/index.ts
@@ -94,17 +94,18 @@ interface BookmarkBlock extends BaseNotionBlock {
 }
 
 // 테이블 블록
-interface TableBlock extends BaseNotionBlock {
+export interface TableBlock extends BaseNotionBlock {
   type: 'table';
   table: {
     table_width: number;
     has_column_header: boolean;
     has_row_header: boolean;
   };
+  children?: TableRowBlock[];
 }
 
 // 테이블 행 블록
-interface TableRowBlock extends BaseNotionBlock {
+export interface TableRowBlock extends BaseNotionBlock {
   type: 'table_row';
   table_row: {
     cells: RichTextItem[][];
@@ -148,12 +149,13 @@ export interface NumberedListItemBlock extends BaseNotionBlock {
 }
 
 // 컬럼 리스트 블록
-interface ColumnListBlock extends BaseNotionBlock {
+export interface ColumnListBlock extends BaseNotionBlock {
   type: 'column_list';
+  children?: ColumnBlock[];
 }
 
 // 컬럼 블록
-interface ColumnBlock extends BaseNotionBlock {
+export interface ColumnBlock extends BaseNotionBlock {
   type: 'column';
 }
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import React, { useState } from 'react';`
	`1`	`+import { useState } from 'react';`
`2`	`2`	`import { MemoizedRichText } from '../MemoizedComponents';`
`3`	`3`	`import {`
`4`	`4`	`imageContainer,`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import React from 'react';`
`2`	`1`	`import { List, ListItem } from './List';`
`3`	`2`	`import { MemoizedRichText } from '../MemoizedComponents';`
`4`	`3`	`import {`