feat: 테이블 데이터 타입화

Musma · Dec 22, 2023 · 781939b · 781939b
1 parent 9e5b1be
commit 781939b
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git a/packages/react-component/src/components/Table/Table.tsx b/packages/react-component/src/components/Table/Table.tsx
@@ -7,7 +7,7 @@ import { Box } from 'src/elements'
 import { Size } from 'src/types'
 
 import { TableBody, TableHead, TableToolbar } from './components'
-import { TableColumn, ToolbarOption } from './types'
+import { TableColumn, TableData, ToolbarOption } from './types'
 
 export interface TableProps<T> extends HTMLAttributes<HTMLTableElement> {
   /**
@@ -67,7 +67,7 @@ export interface TableProps<T> extends HTMLAttributes<HTMLTableElement> {
   onRowClick?: (rowData: T) => void
 }
 
-export function Table<T extends { id: string }>({
+export function Table<T extends TableData>({
   data,
   columns,
   rounded = 'md',

diff --git a/packages/react-component/src/components/Table/components/TableBody.tsx b/packages/react-component/src/components/Table/components/TableBody.tsx
@@ -1,10 +1,10 @@
-import { ReactNode, useCallback } from 'react'
+import { useCallback } from 'react'
 
 import { useTheme } from '@emotion/react'
 
 import { Checkbox, Typography } from 'src/components'
 
-import { TableColumn } from '../types'
+import { TableColumn, TableData } from '../types'
 
 interface TableBodyProps<T> {
   /**
@@ -45,11 +45,7 @@ interface TableBodyProps<T> {
   onCheckboxClick?: (rowData: T) => void
 }
 
-interface TableDataProps extends Record<string, ReactNode> {
-  id: string
-}
-
-export function TableBody<T extends TableDataProps>({
+export function TableBody<T extends TableData>({
   columns,
   data,
   withCheckbox = false,

diff --git a/packages/react-component/src/components/Table/types/types.ts b/packages/react-component/src/components/Table/types/types.ts
@@ -1,5 +1,10 @@
 import { ReactNode } from 'react'
 
+export interface TableData {
+  id: string
+  [key: string]: ReactNode
+}
+
 export interface TableColumn {
   columnName: string
   columnLabel: ReactNode