teachable-design-system 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "teachable-design-system",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,179 @@
+import React,{ useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Table from './Table';
+import type { TableColumn } from '../../types/table';
+
+const meta = {
+  title: 'Components/Table',
+  component: Table,
+  parameters: { layout: 'padded' },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    columns: [
+      { key: 'id', header: 'ID', width: '60px' },
+      { key: 'name', header: '이름', width: '120px' },
+    ],
+    data: [
+      { id: 1, name: '홍길동' },
+      { id: 2, name: '김철수' },
+    ],
+  },
+};
+
+interface FileData extends Record<string, unknown> {
+  no: string;
+  filename: string;
+  modifiedDate: string;
+  school: string;
+  classCount: string;
+  teacherCount: string;
+}
+
+const FileSelectComponent = () => {
+  const [selectedRow, setSelectedRow] = useState<number>(0);
+
+  const columns: TableColumn<FileData>[] = [
+    { key: 'no', header: '번호', width: '80px' },
+    { key: 'filename', header: '파일명', width: '300px' },
+    { key: 'modifiedDate', header: '변경일자', width: '140px' },
+    { key: 'school', header: '학교명', width: '250px' },
+    { key: 'classCount', header: '학급', width: '80px' },
+    { key: 'teacherCount', header: '교사', width: '80px' },
+  ];
+
+  const data: FileData[] = [
+    { no: '01', filename: '2025학년도 2학기 시간표(실습)', modifiedDate: '2025-11-05', school: '대구소프트웨어마이스터고', classCount: '12', teacherCount: '0' },
+    { no: '02', filename: '2025학년도 2학기 시간표(실습)', modifiedDate: '2025-11-05', school: '대구소프트웨어마이스터고', classCount: '12', teacherCount: '0' },
+    { no: '03', filename: '2025학년도 2학기 시간표(실습)', modifiedDate: '2025-11-05', school: '대구소프트웨어마이스터고', classCount: '12', teacherCount: '0' },
+    { no: '04', filename: '2025학년도 2학기 시간표(실습)', modifiedDate: '2025-11-05', school: '대구소프트웨어마이스터고', classCount: '12', teacherCount: '0' },
+    { no: '05', filename: '2025학년도 2학기 시간표(실습)', modifiedDate: '2025-11-05', school: '대구소프트웨어마이스터고', classCount: '12', teacherCount: '0' },
+    { no: '06', filename: '2025학년도 2학기 시간표(실습)', modifiedDate: '2025-11-05', school: '대구소프트웨어마이스터고', classCount: '12', teacherCount: '0' },
+    { no: '07', filename: '2025학년도 2학기 시간표(실습)', modifiedDate: '2025-11-05', school: '대구소프트웨어마이스터고', classCount: '12', teacherCount: '0' },
+    { no: '08', filename: '2025학년도 2학기 시간표(실습)', modifiedDate: '2025-11-05', school: '대구소프트웨어마이스터고', classCount: '12', teacherCount: '0' },
+    { no: '09', filename: '2025학년도 2학기 시간표(실습)', modifiedDate: '2025-11-05', school: '대구소프트웨어마이스터고', classCount: '12', teacherCount: '0' },
+    { no: '10', filename: '2025학년도 2학기 시간표(실습)', modifiedDate: '2025-11-05', school: '대구소프트웨어마이스터고', classCount: '12', teacherCount: '0' },
+  ];
+
+  return (
+    <div style={{ width: '716px' }}>
+      <Table<FileData>
+        columns={columns}
+        data={data}
+        enableRowSelection
+        enableKeyboardNavigation
+        selectedRowIndex={selectedRow}
+        onRowClick={(rowIndex) => setSelectedRow(rowIndex)}
+      />
+    </div>
+  );
+};
+
+export const FileSelect: Story = {
+  name: 'File Select',
+  args: { columns: [], data: [] },
+  render: () => <FileSelectComponent />,
+};
+
+interface MemberData extends Record<string, unknown> {
+  code: string;
+  teacher: string;
+}
+
+const MemberListComponent = () => {
+  const [selectedRow, setSelectedRow] = useState<number>(0);
+
+  const columns: TableColumn<MemberData>[] = [
+    { key: 'code', header: '코드', width: '80px' },
+    { key: 'teacher', header: '교사', width: '80px' },
+  ];
+
+  const data: MemberData[] = [
+    { code: '01', teacher: '강원석' },
+    { code: '02', teacher: '권헌춘' },
+    { code: '03', teacher: '김돈호' },
+    { code: '04', teacher: '김상숙' },
+    { code: '05', teacher: '김영아' },
+    { code: '06', teacher: '김익현' },
+    { code: '07', teacher: '김인숙' },
+    { code: '08', teacher: '김지영' },
+    { code: '09', teacher: '김지운' },
+    { code: '10', teacher: '류주혜' },
+    { code: '11', teacher: '마아람' },
+    { code: '12', teacher: '김인숙' },
+    { code: '13', teacher: '김지영' },
+    { code: '14', teacher: '김지운' },
+    { code: '15', teacher: '류주혜' },
+    { code: '16', teacher: '마아람' },
+    { code: '17', teacher: '마아람' },
+    { code: '18', teacher: '마아람' },
+    { code: '19', teacher: '마아람' },
+  ];
+
+  return (
+    <div style={{ width: '180px' }}>
+      <Table<MemberData>
+        columns={columns}
+        data={data}
+        enableRowSelection
+        enableKeyboardNavigation
+        selectedRowIndex={selectedRow}
+        onRowClick={(rowIndex) => setSelectedRow(rowIndex)}
+        maxHeight="570px"
+      />
+    </div>
+  );
+};
+
+export const MemberList: Story = {
+  name: 'Member List',
+  args: { columns: [], data: [] },
+  render: () => <MemberListComponent />,
+};
+
+interface EditRow extends Record<string, unknown> {
+  id: number;
+  name: string;
+  score: number;
+}
+
+const EditTableComponent = () => {
+  const [data, setData] = useState<EditRow[]>([
+    { id: 1, name: '홍길동', score: 90 },
+    { id: 2, name: '김철수', score: 75 },
+    { id: 3, name: '이영희', score: 88 },
+  ]);
+
+  const columns: TableColumn<EditRow>[] = [
+    { key: 'id', header: 'ID', width: '60px', editable: false, dataType: 'number' },
+    { key: 'name', header: '이름', width: '140px' },
+    { key: 'score', header: '점수', width: '100px', dataType: 'number' },
+  ];
+
+  return (
+    <div style={{ width: '320px' }}>
+      <Table<EditRow>
+        columns={columns}
+        data={data}
+        onCellEdit={(rowIndex, columnKey, value) => {
+          setData((prev) =>
+            prev.map((row, idx) =>
+              idx === rowIndex ? ({ ...row, [columnKey]: value } as EditRow) : row
+            )
+          );
+        }}
+      />
+    </div>
+  );
+};
+
+export const Edit: Story = {
+  name: 'Edit',
+  args: { columns: [], data: [] },
+  render: () => <EditTableComponent />,
+};

package/src/components/Table/Table.tsx

@@ -0,0 +1,510 @@
+import React, { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { ChevronUp, ChevronDown, Copy, ClipboardPaste, Trash2, XCircle } from 'lucide-react';
+import type { TableProps, SortDirection, DataType, CellPosition } from '../../types/table';
+import {
+  TableWrapper,
+  TableContainer,
+  StyledTable,
+  TableOuterWrapper,
+  ScrollContainer,
+  ScrollButton,
+  ContextMenu,
+  ContextMenuItem,
+  ContextMenuDivider,
+  ContextMenuOverlay,
+} from './style';
+import TableHeader from './table-header';
+import TableBody from './table-body';
+
+interface ContextMenuState {
+  visible: boolean;
+  x: number;
+  y: number;
+}
+
+const compareValues = (a: unknown, b: unknown, dataType?: DataType): number => {
+  if (a == null) return 1;
+  if (b == null) return -1;
+
+  switch (dataType) {
+    case 'number':
+      return Number(a) - Number(b);
+    case 'date':
+      return new Date(a as string).getTime() - new Date(b as string).getTime();
+    case 'boolean':
+      return (a ? 1 : 0) - (b ? 1 : 0);
+    default:
+      return String(a).localeCompare(String(b), 'ko-KR');
+  }
+};
+
+const getNextSortDirection = (current: SortDirection): SortDirection => {
+  if (current === 'asc') return 'desc';
+  if (current === 'desc') return null;
+  return 'asc';
+};
+
+const formatCellValue = (value: unknown): string => {
+  if (value == null) return '';
+  if (value instanceof Date) return value.toLocaleDateString('ko-KR');
+  if (typeof value === 'boolean') return value ? '예' : '아니오';
+  if (typeof value === 'number') return value.toString();
+  return String(value);
+};
+
+export default function Table<T extends Record<string, unknown> = Record<string, unknown>>({
+  columns,
+  data,
+  onCellEdit,
+  onSort,
+  onSelectionChange,
+  onPaste,
+  maxHeight,
+  rowHeight,
+  className,
+  enableRowSelection,
+  selectedRowIndex,
+  onRowClick,
+  enableKeyboardNavigation,
+}: TableProps<T>) {
+  const outerRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [sortColumn, setSortColumn] = useState<string | null>(null);
+  const [sortDirection, setSortDirection] = useState<SortDirection>(null);
+  const [isSelecting, setIsSelecting] = useState(false);
+  const [selectionStart, setSelectionStart] = useState<CellPosition | null>(null);
+  const [selectionEnd, setSelectionEnd] = useState<CellPosition | null>(null);
+  const [contextMenu, setContextMenu] = useState<ContextMenuState>({ visible: false, x: 0, y: 0 });
+  const [hoveredRowIndex, setHoveredRowIndex] = useState<number | null>(null);
+  const [editingCell, setEditingCell] = useState<CellPosition | null>(null);
+  const [editStartValue, setEditStartValue] = useState<string | null>(null);
+  const [editToken, setEditToken] = useState(0);
+
+  const sortedData = useMemo(() => {
+    if (!sortColumn || !sortDirection) return data;
+
+    const column = columns.find((col) => col.key === sortColumn);
+    if (!column) return data;
+
+    return [...data].sort((a, b) => {
+      const aVal = a[sortColumn as keyof T];
+      const bVal = b[sortColumn as keyof T];
+
+      const result = column.sortFn
+        ? column.sortFn(aVal, bVal)
+        : compareValues(aVal, bVal, column.dataType);
+
+      return sortDirection === 'asc' ? result : -result;
+    });
+  }, [data, sortColumn, sortDirection, columns]);
+
+  const handleSort = useCallback((columnKey: string) => {
+    const isSameColumn = sortColumn === columnKey;
+    const nextDirection = isSameColumn
+      ? getNextSortDirection(sortDirection)
+      : 'asc';
+
+    setSortColumn(nextDirection ? columnKey : null);
+    setSortDirection(nextDirection);
+    onSort?.(columnKey, nextDirection);
+  }, [sortColumn, sortDirection, onSort]);
+
+  const scroll = useCallback((delta: number) => {
+    containerRef.current?.scrollBy({ top: delta, behavior: 'smooth' });
+  }, []);
+
+  const handleCellMouseDown = useCallback((rowIndex: number, colIndex: number) => {
+    setIsSelecting(true);
+    setSelectionStart({ row: rowIndex, col: colIndex });
+    setSelectionEnd({ row: rowIndex, col: colIndex });
+  }, []);
+
+  const handleCellMouseEnter = useCallback((rowIndex: number, colIndex: number) => {
+    if (isSelecting) {
+      setSelectionEnd({ row: rowIndex, col: colIndex });
+    }
+  }, [isSelecting]);
+
+  const handleCellMouseUp = useCallback(() => {
+    if (isSelecting && selectionStart && selectionEnd) {
+      const cells: CellPosition[] = [];
+      const minRow = Math.min(selectionStart.row, selectionEnd.row);
+      const maxRow = Math.max(selectionStart.row, selectionEnd.row);
+      const minCol = Math.min(selectionStart.col, selectionEnd.col);
+      const maxCol = Math.max(selectionStart.col, selectionEnd.col);
+
+      for (let r = minRow; r <= maxRow; r++) {
+        for (let c = minCol; c <= maxCol; c++) {
+          cells.push({ row: r, col: c });
+        }
+      }
+      onSelectionChange?.(cells);
+    }
+    setIsSelecting(false);
+  }, [isSelecting, selectionStart, selectionEnd, onSelectionChange]);
+
+  const getSelectedData = useCallback((): string => {
+    if (!selectionStart || !selectionEnd) return '';
+
+    const minRow = Math.min(selectionStart.row, selectionEnd.row);
+    const maxRow = Math.max(selectionStart.row, selectionEnd.row);
+    const minCol = Math.min(selectionStart.col, selectionEnd.col);
+    const maxCol = Math.max(selectionStart.col, selectionEnd.col);
+
+    const rows: string[] = [];
+    for (let r = minRow; r <= maxRow; r++) {
+      const cols: string[] = [];
+      for (let c = minCol; c <= maxCol; c++) {
+        const colKey = columns[c]?.key;
+        const value = sortedData[r]?.[colKey as keyof T];
+        cols.push(formatCellValue(value));
+      }
+      rows.push(cols.join('\t'));
+    }
+    return rows.join('\n');
+  }, [selectionStart, selectionEnd, columns, sortedData]);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    // 셀 편집(input/textarea) 중에는 전역 키 핸들러가 Backspace/Delete 등을 가로채지 않도록 무시
+    const target = e.target as HTMLElement | null;
+    if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) {
+      return;
+    }
+
+    // 행 선택 모드에서 키보드 네비게이션
+    if (enableRowSelection && enableKeyboardNavigation && onRowClick) {
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        const currentIndex = selectedRowIndex ?? 0;
+        const newIndex = Math.max(0, currentIndex - 1);
+        onRowClick(newIndex, sortedData[newIndex]);
+        return;
+      }
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        const currentIndex = selectedRowIndex ?? -1;
+        const newIndex = Math.min(sortedData.length - 1, currentIndex + 1);
+        onRowClick(newIndex, sortedData[newIndex]);
+        return;
+      }
+    }
+
+    if (!selectionStart || !selectionEnd) return;
+
+    // 셀 선택 상태에서 문자 입력 시 즉시 편집 모드로 전환 (스프레드시트 UX)
+    // - 단일 셀 선택일 때만 동작
+    // - onCellEdit가 있어야 의미 있는 편집이 가능
+    if (
+      onCellEdit &&
+      !e.ctrlKey &&
+      !e.metaKey &&
+      !e.altKey &&
+      e.key.length === 1
+    ) {
+      const isSingleCell = selectionStart.row === selectionEnd.row && selectionStart.col === selectionEnd.col;
+      if (!isSingleCell) {
+        setSelectionEnd(selectionStart);
+      }
+      e.preventDefault();
+      setEditingCell({ row: selectionStart.row, col: selectionStart.col });
+      setEditStartValue(e.key);
+      setEditToken((t) => t + 1);
+      setContextMenu({ visible: false, x: 0, y: 0 });
+      return;
+    }
+
+    if ((e.ctrlKey || e.metaKey) && e.key === 'c') {
+      e.preventDefault();
+      const text = getSelectedData();
+      navigator.clipboard.writeText(text).catch(console.error);
+    }
+
+    if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
+      e.preventDefault();
+      navigator.clipboard.readText().then((text) => {
+        if (!text || !selectionStart) return;
+
+        const rows = text
+          .replace(/\r\n/g, '\n')
+          .replace(/\r/g, '\n')
+          .split('\n')
+          .filter((row, idx, arr) => !(idx === arr.length - 1 && row === ''))
+          .map(row => row.split('\t'));
+        
+        const startRow = Math.min(selectionStart.row, selectionEnd?.row ?? selectionStart.row);
+        const startCol = Math.min(selectionStart.col, selectionEnd?.col ?? selectionStart.col);
+
+        if (onPaste) {
+          onPaste(startRow, startCol, rows);
+        } else if (onCellEdit) {
+          rows.forEach((row, rIdx) => {
+            row.forEach((cellValue, cIdx) => {
+              const targetRow = startRow + rIdx;
+              const targetCol = startCol + cIdx;
+              if (targetRow < data.length && targetCol < columns.length) {
+                const col = columns[targetCol];
+                if (col.editable !== false) {
+                  let parsedValue: unknown = cellValue;
+                  if (col.dataType === 'number') {
+                    const num = parseFloat(cellValue.replace(/,/g, ''));
+                    parsedValue = isNaN(num) ? 0 : num;
+                  }
+                  onCellEdit(targetRow, col.key, parsedValue);
+                }
+              }
+            });
+          });
+        }
+      }).catch(console.error);
+    }
+
+    if (e.key === 'Delete' || e.key === 'Backspace') {
+      if (!onCellEdit) return;
+      e.preventDefault();
+      const minRow = Math.min(selectionStart.row, selectionEnd.row);
+      const maxRow = Math.max(selectionStart.row, selectionEnd.row);
+      const minCol = Math.min(selectionStart.col, selectionEnd.col);
+      const maxCol = Math.max(selectionStart.col, selectionEnd.col);
+
+      for (let r = minRow; r <= maxRow; r++) {
+        for (let c = minCol; c <= maxCol; c++) {
+          const col = columns[c];
+          if (col.editable !== false) {
+            onCellEdit(r, col.key, '');
+          }
+        }
+      }
+    }
+
+    if (e.key === 'Escape') {
+      setSelectionStart(null);
+      setSelectionEnd(null);
+      setContextMenu({ visible: false, x: 0, y: 0 });
+    }
+  }, [enableRowSelection, enableKeyboardNavigation, selectedRowIndex, sortedData, onRowClick, selectionStart, selectionEnd, getSelectedData, onPaste, onCellEdit, data, columns]);
+
+  // 표 밖을 클릭하면 셀 선택(타겟) 해제
+  useEffect(() => {
+    const handleMouseDownOutside = (event: MouseEvent) => {
+      const root = outerRef.current;
+      const target = event.target as Node | null;
+      if (!root || !target) return;
+      if (root.contains(target)) return;
+
+      setIsSelecting(false);
+      setSelectionStart(null);
+      setSelectionEnd(null);
+      setEditingCell(null);
+      setEditStartValue(null);
+      setContextMenu({ visible: false, x: 0, y: 0 });
+    };
+
+    document.addEventListener('mousedown', handleMouseDownOutside, true);
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDownOutside, true);
+    };
+  }, []);
+
+  const handleContextMenu = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    if (selectionStart && selectionEnd) {
+      setContextMenu({ visible: true, x: e.clientX, y: e.clientY });
+    }
+  }, [selectionStart, selectionEnd]);
+
+  const closeContextMenu = useCallback(() => {
+    setContextMenu({ visible: false, x: 0, y: 0 });
+  }, []);
+
+  const handleCopy = useCallback(() => {
+    const text = getSelectedData();
+    navigator.clipboard.writeText(text).catch(console.error);
+    closeContextMenu();
+  }, [getSelectedData, closeContextMenu]);
+
+  const handlePaste = useCallback(() => {
+    if (!selectionStart || !selectionEnd) return;
+    
+    navigator.clipboard.readText().then((text) => {
+      if (!text) return;
+
+      const rows = text
+        .replace(/\r\n/g, '\n')
+        .replace(/\r/g, '\n')
+        .split('\n')
+        .filter((row, idx, arr) => !(idx === arr.length - 1 && row === ''))
+        .map(row => row.split('\t'));
+      
+      const startRow = Math.min(selectionStart.row, selectionEnd.row);
+      const startCol = Math.min(selectionStart.col, selectionEnd.col);
+
+      if (onPaste) {
+        onPaste(startRow, startCol, rows);
+      } else if (onCellEdit) {
+        rows.forEach((row, rIdx) => {
+          row.forEach((cellValue, cIdx) => {
+            const targetRow = startRow + rIdx;
+            const targetCol = startCol + cIdx;
+            if (targetRow < data.length && targetCol < columns.length) {
+              const col = columns[targetCol];
+              if (col.editable !== false) {
+                let parsedValue: unknown = cellValue;
+                if (col.dataType === 'number') {
+                  const num = parseFloat(cellValue.replace(/,/g, ''));
+                  parsedValue = isNaN(num) ? 0 : num;
+                }
+                onCellEdit(targetRow, col.key, parsedValue);
+              }
+            }
+          });
+        });
+      }
+    }).catch(console.error);
+    closeContextMenu();
+  }, [selectionStart, selectionEnd, onPaste, onCellEdit, data, columns, closeContextMenu]);
+
+  const handleDelete = useCallback(() => {
+    if (!selectionStart || !selectionEnd || !onCellEdit) return;
+    
+    const minRow = Math.min(selectionStart.row, selectionEnd.row);
+    const maxRow = Math.max(selectionStart.row, selectionEnd.row);
+    const minCol = Math.min(selectionStart.col, selectionEnd.col);
+    const maxCol = Math.max(selectionStart.col, selectionEnd.col);
+
+    for (let r = minRow; r <= maxRow; r++) {
+      for (let c = minCol; c <= maxCol; c++) {
+        const col = columns[c];
+        if (col.editable !== false) {
+          onCellEdit(r, col.key, '');
+        }
+      }
+    }
+    closeContextMenu();
+  }, [selectionStart, selectionEnd, onCellEdit, columns, closeContextMenu]);
+
+  const handleClearSelection = useCallback(() => {
+    setSelectionStart(null);
+    setSelectionEnd(null);
+    closeContextMenu();
+  }, [closeContextMenu]);
+
+  const hasSelection = selectionStart !== null && selectionEnd !== null;
+  const selectionCellCount = useMemo(() => {
+    if (!selectionStart || !selectionEnd) return 0;
+    const rows = Math.abs(selectionEnd.row - selectionStart.row) + 1;
+    const cols = Math.abs(selectionEnd.col - selectionStart.col) + 1;
+    return rows * cols;
+  }, [selectionStart, selectionEnd]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleMouseUp = () => {
+      if (isSelecting) {
+        handleCellMouseUp();
+      }
+    };
+
+    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('keydown', handleKeyDown as unknown as EventListener);
+
+    return () => {
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener('keydown', handleKeyDown as unknown as EventListener);
+    };
+  }, [isSelecting, handleCellMouseUp, handleKeyDown]);
+
+  return (
+    <TableOuterWrapper ref={outerRef} className={className} tabIndex={0} onContextMenu={handleContextMenu}>
+      <TableWrapper>
+        <TableContainer ref={containerRef} maxHeight={maxHeight}>
+          <StyledTable>
+            <colgroup>
+              {columns.map((col) => (
+                <col
+                  key={String(col.key)}
+                  style={col.width ? { width: col.width } : undefined}
+                />
+              ))}
+            </colgroup>
+            <TableHeader<T>
+              columns={columns}
+              sortColumn={sortColumn ?? undefined}
+              sortDirection={sortDirection}
+              onSort={handleSort}
+            />
+            <TableBody<T>
+              columns={columns}
+              data={sortedData}
+              rowHeight={rowHeight}
+              onCellEdit={onCellEdit}
+              selectionStart={enableRowSelection ? null : selectionStart}
+              selectionEnd={enableRowSelection ? null : selectionEnd}
+              editingCell={enableRowSelection ? null : editingCell}
+              editStartValue={editStartValue}
+              editToken={editToken}
+              onCellMouseDown={enableRowSelection ? undefined : handleCellMouseDown}
+              onCellMouseEnter={enableRowSelection ? undefined : handleCellMouseEnter}
+              onCellMouseUp={enableRowSelection ? undefined : handleCellMouseUp}
+              enableRowSelection={enableRowSelection}
+              selectedRowIndex={selectedRowIndex}
+              hoveredRowIndex={hoveredRowIndex ?? undefined}
+              onRowClick={(rowIndex) => onRowClick?.(rowIndex, sortedData[rowIndex])}
+              onRowHover={setHoveredRowIndex}
+            />
+          </StyledTable>
+        </TableContainer>
+      </TableWrapper>
+
+      {maxHeight && (
+        <ScrollContainer>
+          <ScrollButton position="top" onClick={() => scroll(-100)}>
+            <ChevronUp />
+          </ScrollButton>
+          <ScrollButton position="bottom" onClick={() => scroll(100)}>
+            <ChevronDown />
+          </ScrollButton>
+        </ScrollContainer>
+      )}
+
+      {contextMenu.visible && (
+        <>
+          <ContextMenuOverlay onClick={closeContextMenu} />
+          <ContextMenu x={contextMenu.x} y={contextMenu.y}>
+            <ContextMenuItem onClick={handleCopy} disabled={!hasSelection}>
+              <Copy size={14} />
+              복사
+              <span className="shortcut">⌘C</span>
+            </ContextMenuItem>
+            <ContextMenuItem onClick={handlePaste} disabled={!hasSelection}>
+              <ClipboardPaste size={14} />
+              붙여넣기
+              <span className="shortcut">⌘V</span>
+            </ContextMenuItem>
+            <ContextMenuDivider />
+            <ContextMenuItem onClick={handleDelete} disabled={!hasSelection || !onCellEdit}>
+              <Trash2 size={14} />
+              삭제
+              <span className="shortcut">Del</span>
+            </ContextMenuItem>
+            <ContextMenuDivider />
+            <ContextMenuItem onClick={handleClearSelection} disabled={!hasSelection}>
+              <XCircle size={14} />
+              선택 해제
+              <span className="shortcut">Esc</span>
+            </ContextMenuItem>
+            {hasSelection && (
+              <>
+                <ContextMenuDivider />
+                <ContextMenuItem disabled style={{ fontSize: '11px', color: '#9ca3af' }}>
+                  {selectionCellCount}개 셀 선택됨
+                </ContextMenuItem>
+              </>
+            )}
+          </ContextMenu>
+        </>
+      )}
+    </TableOuterWrapper>
+  );
+}

package/src/components/Table/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Table';
+export { default as Table } from './Table';