teachable-design-system 0.2.0 → 0.3.0

package/src/components/Table/style.ts

@@ -0,0 +1,345 @@
+import styled from '@emotion/styled';
+import { colors as themeColors, typography } from '../../style/theme';
+import type { SortDirection } from '../../types/table';
+
+// ============================================
+// 디자인 토큰
+// ============================================
+const colors = {
+  header: themeColors.surface['secondary-subtler'],
+  headerHover: themeColors.action['secondary-pressed'],
+  body: themeColors.surface.white,
+  bodyHover: themeColors.surface['gray-subtler'],
+  border: themeColors.border['gray-light'],
+  borderLight: themeColors.border['secondary-light'],
+  text: themeColors.text.bolder,
+  textSecondary: themeColors.text.subtle,
+  scrollThumb: themeColors.surface['gray-subtle'],
+  scrollThumbBorder: themeColors.border.gray,
+  selected: themeColors.surface['information-subtler'],
+  selectedBorder: themeColors.border.primary,
+  disabledText: themeColors.text.disabled,
+} as const;
+
+const spacing = {
+  cellPadding: '4px 16px',
+  headerPadding: '4px 16px',
+} as const;
+
+// ============================================
+// 레이아웃 컴포넌트
+// ============================================
+export const TableOuterWrapper = styled.div`
+  position: relative;
+  display: inline-block;
+  outline: none;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+export const TableWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+`;
+
+export const TableContainer = styled.div<{ maxHeight?: string }>`
+  width: 100%;
+  overflow: auto;
+  position: relative;
+  ${({ maxHeight }) => maxHeight && `max-height: ${maxHeight};`}
+
+  /* 스크롤바 스타일 */
+  &::-webkit-scrollbar {
+    width: 20px;
+    height: 20px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${colors.body};
+    border: 1px solid ${colors.border};
+    margin-top: 20px; /* 상단 화살표 버튼 높이만큼 여백 */
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${colors.scrollThumb};
+    border: 1px solid ${colors.scrollThumbBorder};
+
+    &:hover {
+      background: ${colors.headerHover};
+    }
+  }
+
+  &::-webkit-scrollbar-button:vertical:start:decrement,
+  &::-webkit-scrollbar-button:vertical:end:increment {
+    display: block;
+    height: 20px;
+    background: ${colors.header};
+    border: 1px solid ${colors.borderLight};
+  }
+
+  &::-webkit-scrollbar-button:vertical:start:decrement:hover,
+  &::-webkit-scrollbar-button:vertical:end:increment:hover {
+    background: ${colors.headerHover};
+  }
+`;
+
+// ============================================
+// 테이블 기본 컴포넌트
+// ============================================
+export const StyledTable = styled.table`
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: auto;
+  font-family: ${typography.fontFamily.primary};
+`;
+
+export const TableHead = styled.thead`
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: ${colors.header};
+`;
+
+export const TableBody = styled.tbody``;
+
+export const TableRow = styled.tr<{ striped?: boolean }>`
+  &:nth-of-type(even) {
+    ${({ striped }) => striped && `background-color: ${colors.bodyHover};`}
+  }
+
+  &:hover {
+    background-color: ${colors.bodyHover};
+  }
+`;
+
+// ============================================
+// 셀 컴포넌트
+// ============================================
+const baseCellStyle = `
+  box-sizing: border-box;
+  vertical-align: middle;
+  line-height: 1.5;
+`;
+
+export const TableHeaderCell = styled.th<{ width?: string; sortable?: boolean }>`
+  ${baseCellStyle}
+  min-width: ${({ width }) => (width ? '0' : '80px')};
+  background: ${colors.header};
+  border: 1px solid ${colors.borderLight};
+  border-left: none;
+  padding: ${spacing.headerPadding};
+  text-align: left;
+  font-weight: 700;
+  font-size: 15px;
+  color: ${colors.text};
+  height: 30px;
+  white-space: nowrap;
+  position: relative;
+  ${({ width }) => width && `width: ${width};`}
+
+  &:first-of-type {
+    border-left: 1px solid ${colors.borderLight};
+  }
+
+  ${({ sortable }) =>
+    sortable &&
+    `
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      background: ${colors.headerHover};
+    }
+  `}
+`;
+
+export const TableDataCell = styled.td<{
+  editable?: boolean;
+  width?: string;
+  height?: string;
+  isHeaderColumn?: boolean;
+  isSelected?: boolean;
+  $edgeTop?: boolean;
+  $edgeBottom?: boolean;
+  $edgeLeft?: boolean;
+  $edgeRight?: boolean;
+  $rowSelected?: boolean;
+}>`
+  ${baseCellStyle}
+  min-width: ${({ width }) => (width ? '0' : '80px')};
+  background: ${({ isHeaderColumn, isSelected, $rowSelected }) => 
+    isSelected ? colors.selected : (isHeaderColumn ? colors.header : ($rowSelected ? 'inherit' : colors.body))};
+  border-right: 1px solid ${({ isHeaderColumn }) => 
+    isHeaderColumn ? colors.borderLight : colors.border};
+  border-bottom: 1px solid ${({ isHeaderColumn }) => 
+    isHeaderColumn ? colors.borderLight : colors.border};
+  border-left: none;
+  border-top: none;
+  padding: ${({ isHeaderColumn }) => (isHeaderColumn ? spacing.headerPadding : spacing.cellPadding)};
+  font-weight: ${({ isHeaderColumn }) => (isHeaderColumn ? 700 : 400)};
+  font-size: ${({ isHeaderColumn }) => (isHeaderColumn ? '15px' : '13px')};
+  color: ${({ isHeaderColumn }) => (isHeaderColumn ? colors.text : colors.textSecondary)};
+  height: ${({ height }) => height ?? '30px'};
+  position: relative;
+  user-select: none;
+
+  &:first-of-type {
+    border-left: 1px solid ${({ isHeaderColumn }) => 
+      isHeaderColumn ? colors.borderLight : colors.border};
+  }
+
+  ${({ isSelected, $edgeTop, $edgeBottom, $edgeLeft, $edgeRight }) =>
+    isSelected &&
+    `
+    z-index: 1;
+    box-shadow: 
+      ${$edgeTop ? `inset 0 2px 0 0 ${colors.selectedBorder}` : `inset 0 0.5px 0 0 ${colors.selectedBorder}50`}${$edgeBottom ? `, inset 0 -2px 0 0 ${colors.selectedBorder}` : `, inset 0 -0.5px 0 0 ${colors.selectedBorder}50`}${$edgeLeft ? `, inset 2px 0 0 0 ${colors.selectedBorder}` : `, inset 0.5px 0 0 0 ${colors.selectedBorder}50`}${$edgeRight ? `, inset -2px 0 0 0 ${colors.selectedBorder}` : `, inset -0.5px 0 0 0 ${colors.selectedBorder}50`};
+  `}
+
+  ${({ editable, isSelected, $rowSelected }) =>
+    editable && !isSelected && !$rowSelected &&
+    `
+    cursor: cell;
+    &:hover {
+      background-color: ${colors.bodyHover};
+    }
+  `}
+
+  ${({ isSelected }) =>
+    isSelected &&
+    `
+    &:hover {
+      background-color: ${colors.selected};
+    }
+  `}
+`;
+
+// ============================================
+// 정렬 및 입력 컴포넌트
+// ============================================
+export const SortIcon = styled.span<{ active?: boolean; direction?: SortDirection }>`
+  display: inline-flex;
+  flex-direction: column;
+  margin-left: 4px;
+  opacity: ${({ active }) => (active ? 1 : 0.3)};
+
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+`;
+
+export const EditableInput = styled.input`
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  margin: -12px -16px;
+  padding: ${spacing.cellPadding};
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+// ============================================
+// 스크롤 컨트롤
+// ============================================
+export const ScrollContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  right: 0;
+  top: 0;
+`;
+
+export const ScrollButton = styled.button<{ position: 'top' | 'bottom' }>`
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: ${colors.header};
+  border: 1px solid ${colors.borderLight};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background: ${colors.headerHover};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  svg {
+    width: 14px;
+    height: 14px;
+    color: ${colors.text};
+  }
+`;
+
+// ============================================
+// 컨텍스트 메뉴
+// ============================================
+export const ContextMenuOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+`;
+
+export const ContextMenu = styled.div<{ x: number; y: number }>`
+  position: fixed;
+  top: ${({ y }) => y}px;
+  left: ${({ x }) => x}px;
+  z-index: 1000;
+  min-width: 160px;
+  background: ${colors.body};
+  border: 1px solid ${colors.border};
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 4px 0;
+  font-family: ${typography.fontFamily.primary};
+`;
+
+export const ContextMenuItem = styled.button<{ disabled?: boolean }>`
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  text-align: left;
+  font-size: 13px;
+  color: ${({ disabled }) => (disabled ? colors.disabledText : colors.text)};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  &:hover {
+    background: ${({ disabled }) => (disabled ? 'transparent' : colors.bodyHover)};
+  }
+
+  span.shortcut {
+    margin-left: auto;
+    font-size: 11px;
+    color: ${colors.disabledText};
+  }
+`;
+
+export const ContextMenuDivider = styled.div`
+  height: 1px;
+  background: ${colors.borderLight};
+  margin: 4px 0;
+`;

package/src/components/Table/table-body.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import type { TableBodyProps, CellPosition } from '../../types/table';
+import { TableBody as StyledTableBody, TableRow } from './style';
+import TableCell from './table-cell';
+
+const getSelectionInfo = (
+  rowIndex: number,
+  colIndex: number,
+  start: CellPosition | null | undefined,
+  end: CellPosition | null | undefined
+): { isSelected: boolean; edge: { top: boolean; bottom: boolean; left: boolean; right: boolean } } => {
+  if (!start || !end) {
+    return { isSelected: false, edge: { top: false, bottom: false, left: false, right: false } };
+  }
+  
+  const minRow = Math.min(start.row, end.row);
+  const maxRow = Math.max(start.row, end.row);
+  const minCol = Math.min(start.col, end.col);
+  const maxCol = Math.max(start.col, end.col);
+  
+  const isSelected = rowIndex >= minRow && rowIndex <= maxRow && colIndex >= minCol && colIndex <= maxCol;
+  
+  if (!isSelected) {
+    return { isSelected: false, edge: { top: false, bottom: false, left: false, right: false } };
+  }
+  
+  return {
+    isSelected: true,
+    edge: {
+      top: rowIndex === minRow,
+      bottom: rowIndex === maxRow,
+      left: colIndex === minCol,
+      right: colIndex === maxCol,
+    }
+  };
+};
+
+export default function TableBody<T extends Record<string, unknown> = Record<string, unknown>>({
+  columns,
+  data,
+  rowHeight,
+  onCellEdit,
+  selectionStart,
+  selectionEnd,
+  editingCell,
+  editStartValue,
+  editToken,
+  onCellMouseDown,
+  onCellMouseEnter,
+  onCellMouseUp,
+  enableRowSelection,
+  selectedRowIndex,
+  hoveredRowIndex,
+  onRowClick,
+  onRowHover,
+}: TableBodyProps<T>) {
+  const getRowBackground = (rowIndex: number): string | undefined => {
+    if (!enableRowSelection) return undefined;
+    if (selectedRowIndex === rowIndex) return '#e7f4fe';
+    if (hoveredRowIndex === rowIndex) return '#f4f5f6';
+    return undefined;
+  };
+
+  return (
+    <StyledTableBody>
+      {data.map((row, rowIndex) => (
+        <TableRow
+          key={rowIndex}
+          onClick={enableRowSelection ? () => onRowClick?.(rowIndex) : undefined}
+          onMouseEnter={enableRowSelection ? () => onRowHover?.(rowIndex) : undefined}
+          onMouseLeave={enableRowSelection ? () => onRowHover?.(null) : undefined}
+          style={{
+            cursor: enableRowSelection ? 'pointer' : undefined,
+            backgroundColor: getRowBackground(rowIndex),
+            transition: enableRowSelection ? 'background-color 0.15s ease' : undefined,
+          }}
+        >
+          {columns.map((col, colIndex) => {
+            const { isSelected, edge } = getSelectionInfo(rowIndex, colIndex, selectionStart, selectionEnd);
+            const isEditingRequested =
+              !!editingCell && editingCell.row === rowIndex && editingCell.col === colIndex;
+            return (
+              <TableCell
+                key={`${rowIndex}-${col.key}`}
+                value={row[col.key]}
+                editable={col.editable !== false}
+                width={col.width}
+                height={col.height}
+                rowHeight={rowHeight}
+                dataType={col.dataType}
+                isHeaderColumn={col.isHeaderColumn}
+                isSelected={isSelected}
+                rowSelected={enableRowSelection && (selectedRowIndex === rowIndex || hoveredRowIndex === rowIndex)}
+                isEditingRequested={isEditingRequested}
+                startEditingToken={editToken}
+                startEditingValue={isEditingRequested ? editStartValue : null}
+                selectionEdge={isSelected ? edge : undefined}
+                rowSpan={col.rowSpan}
+                colSpan={col.colSpan}
+                onEdit={(value) => onCellEdit?.(rowIndex, col.key, value)}
+                render={col.render ? (value) => col.render!(value, row, rowIndex) : undefined}
+                onMouseDown={enableRowSelection ? undefined : () => onCellMouseDown?.(rowIndex, colIndex)}
+                onMouseEnter={enableRowSelection ? undefined : () => onCellMouseEnter?.(rowIndex, colIndex)}
+                onMouseUp={enableRowSelection ? undefined : onCellMouseUp}
+              />
+            );
+          })}
+        </TableRow>
+      ))}
+    </StyledTableBody>
+  );
+}

package/src/components/Table/table-cell.tsx

@@ -0,0 +1,153 @@
+import React, { useEffect, useRef, useState, useCallback, type KeyboardEvent, type MouseEvent } from 'react';
+import type { TableCellProps, DataType } from '../../types/table';
+import { TableDataCell, EditableInput } from './style';
+
+const formatValue = (val: unknown, dataType: DataType): string => {
+  if (val == null) return '';
+
+  switch (dataType) {
+    case 'number':
+      return typeof val === 'number' ? val.toLocaleString() : String(val);
+    case 'date':
+      return val instanceof Date ? val.toLocaleDateString('ko-KR') : String(val);
+    case 'boolean':
+      return val ? '예' : '아니오';
+    default:
+      return String(val);
+  }
+};
+
+const parseValue = (val: string, dataType: DataType): unknown => {
+  switch (dataType) {
+    case 'number': {
+      const num = parseFloat(val.replace(/,/g, ''));
+      return isNaN(num) ? 0 : num;
+    }
+    case 'date':
+      return new Date(val);
+    case 'boolean':
+      return val === '예' || val === 'true' || val === '1';
+    default:
+      return val;
+  }
+};
+
+const getInputType = (dataType: DataType): string => {
+  if (dataType === 'number') return 'number';
+  if (dataType === 'date') return 'date';
+  return 'text';
+};
+
+export default function TableCell({
+  value,
+  editable = false,
+  width,
+  height,
+  rowHeight,
+  dataType = 'text',
+  isHeaderColumn = false,
+  isSelected = false,
+  rowSelected = false,
+  isEditingRequested,
+  startEditingToken,
+  startEditingValue,
+  selectionEdge,
+  rowSpan,
+  colSpan,
+  onEdit,
+  render,
+  onMouseDown,
+  onMouseEnter,
+  onMouseUp,
+}: TableCellProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState('');
+  const lastStartTokenRef = useRef<number | undefined>(undefined);
+
+  const startEditing = useCallback(() => {
+    if (!editable) return;
+    setEditValue(formatValue(value, dataType));
+    setIsEditing(true);
+  }, [editable, value, dataType]);
+
+  // 부모에서 "편집 시작" 요청이 오면 (예: 선택 셀에서 타이핑) 편집 모드로 진입
+  useEffect(() => {
+    if (!isEditingRequested) return;
+    if (startEditingToken == null) return;
+    if (lastStartTokenRef.current === startEditingToken) return;
+
+    lastStartTokenRef.current = startEditingToken;
+    if (!editable) return;
+
+    const nextValue = startEditingValue ?? formatValue(value, dataType);
+    setEditValue(nextValue);
+    setIsEditing(true);
+  }, [isEditingRequested, startEditingToken, startEditingValue, editable, value, dataType]);
+
+  const save = useCallback(() => {
+    onEdit?.(parseValue(editValue, dataType));
+    setIsEditing(false);
+  }, [editValue, dataType, onEdit]);
+
+  const cancel = useCallback(() => {
+    setEditValue('');
+    setIsEditing(false);
+  }, []);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      save();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      cancel();
+    }
+  }, [save, cancel]);
+
+  const handleMouseDown = useCallback((e: MouseEvent) => {
+    if (isEditing) return;
+    e.preventDefault();
+    onMouseDown?.();
+  }, [isEditing, onMouseDown]);
+
+  const handleMouseEnter = useCallback(() => {
+    if (isEditing) return;
+    onMouseEnter?.();
+  }, [isEditing, onMouseEnter]);
+
+  const displayValue = render ? render(value) : formatValue(value, dataType);
+
+  return (
+    <TableDataCell
+      editable={editable}
+      width={width}
+      height={height || rowHeight}
+      isHeaderColumn={isHeaderColumn}
+      isSelected={isSelected}
+      $rowSelected={rowSelected}
+      $edgeTop={selectionEdge?.top}
+      $edgeBottom={selectionEdge?.bottom}
+      $edgeLeft={selectionEdge?.left}
+      $edgeRight={selectionEdge?.right}
+      rowSpan={rowSpan}
+      colSpan={colSpan}
+      onDoubleClick={startEditing}
+      onMouseDown={handleMouseDown}
+      onMouseEnter={handleMouseEnter}
+      onMouseUp={onMouseUp}
+    >
+      {isEditing ? (
+        <EditableInput
+          type={getInputType(dataType)}
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          onBlur={save}
+          onKeyDown={handleKeyDown}
+          autoFocus
+        />
+      ) : (
+        displayValue
+      )}
+    </TableDataCell>
+  );
+}

package/src/components/Table/table-header.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { ChevronUp, ChevronDown } from 'lucide-react';
+import type { TableHeaderProps, SortDirection } from '../../types/table';
+import { TableHead, TableRow, TableHeaderCell, SortIcon } from './style';
+
+/** 정렬 아이콘 컴포넌트 */
+function SortIndicator({ isActive, direction }: { isActive: boolean; direction?: SortDirection }) {
+  if (!isActive || !direction) {
+    return <ChevronUp style={{ opacity: 0.3 }} />;
+  }
+  return direction === 'asc' ? <ChevronUp /> : <ChevronDown />;
+}
+
+/** 테이블 헤더 */
+export default function TableHeader<T = Record<string, unknown>>({
+  columns,
+  sortColumn,
+  sortDirection,
+  onSort,
+}: TableHeaderProps<T>) {
+  const handleClick = (key: string, sortable?: boolean) => {
+    if (sortable) onSort?.(key);
+  };
+
+  return (
+    <TableHead>
+      <TableRow>
+        {columns.map(({ key, header, width, sortable, rowSpan, colSpan }) => {
+          const isActive = sortColumn === key;
+
+          return (
+            <TableHeaderCell
+              key={key}
+              width={width}
+              sortable={sortable}
+              rowSpan={rowSpan}
+              colSpan={colSpan}
+              onClick={() => handleClick(key, sortable)}
+            >
+              {header}
+              {sortable && (
+                <SortIcon active={isActive} direction={isActive ? sortDirection : null}>
+                  <SortIndicator isActive={isActive} direction={sortDirection} />
+                </SortIcon>
+              )}
+            </TableHeaderCell>
+          );
+        })}
+      </TableRow>
+    </TableHead>
+  );
+}

package/src/components/index.ts

@@ -1,6 +1,7 @@
-export * from './Button'
-export * from './CheckBox'
+export * from './Button';
+export * from './CheckBox';
 export * from './Dropdown'
-export * from './Input'
+export * from './Input';
 export * from './Sidebar'
-export * from './TabBar'
+export * from './TabBar';
+export * from './Table';