teachable-design-system 0.2.1 → 0.3.2

package/dist/types/components/Dropdown/Dropdown.d.ts

@@ -1,3 +1,3 @@
 import { DropdownProps } from "../../types/Dropdown.types";
-export declare function Dropdown({ size, options, onSelect, label, placeholder }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dropdown({ size, options, onSelect, label, placeholder, width }: DropdownProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Dropdown.d.ts.map

package/dist/types/components/Dropdown/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAC;AAIzD,wBAAgB,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAC,EAAE,aAAa,2CAkDpF"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAC;AAIzD,wBAAgB,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,EAAE,aAAa,2CAmD3F"}

package/dist/types/components/Dropdown/style.d.ts

@@ -3,6 +3,7 @@ export interface StyledDropdownProps {
     onSelect?: (option: string) => void;
     isOpen?: boolean;
     isSelected?: boolean;
+    width?: string;
 }
 export declare const StyledDropDown: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

package/dist/types/components/Dropdown/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/style.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,mBAAmB;IACnC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AA+FD,eAAO,MAAM,cAAc;;;2IAc1B,CAAC;AAEF,eAAO,MAAM,SAAS;;;yGAOrB,CAAA;AAED,eAAO,MAAM,UAAU;;;2IAStB,CAAA;AAED,eAAO,MAAM,WAAW;;;qHAGvB,CAAA;AAED,eAAO,MAAM,UAAU;;;+HAEtB,CAAA;AAED,eAAO,MAAM,aAAa;;;+HAezB,CAAA;AAED,eAAO,MAAM,YAAY;;;+HA4CxB,CAAA"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/style.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,mBAAmB;IACnC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AA+FD,eAAO,MAAM,cAAc;;;2IAc1B,CAAC;AAEF,eAAO,MAAM,SAAS;;;yGAOrB,CAAA;AAED,eAAO,MAAM,UAAU;;;2IAStB,CAAA;AAED,eAAO,MAAM,WAAW;;;qHAGvB,CAAA;AAED,eAAO,MAAM,UAAU;;;+HAEtB,CAAA;AAED,eAAO,MAAM,aAAa;;;+HAezB,CAAA;AAED,eAAO,MAAM,YAAY;;;+HA4CxB,CAAA"}

package/dist/types/components/Table/Table.d.ts

@@ -0,0 +1,3 @@
+import type { TableProps } from '../../types/table';
+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>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Table.d.ts.map

package/dist/types/components/Table/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAyC,MAAM,mBAAmB,CAAC;AAoD3F,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EACzF,OAAO,EACP,IAAI,EACJ,UAAU,EACV,MAAM,EACN,iBAAiB,EACjB,OAAO,EACP,SAAS,EACT,SAAS,EACT,SAAS,EACT,kBAAkB,EAClB,gBAAgB,EAChB,UAAU,EACV,wBAAwB,GACzB,EAAE,UAAU,CAAC,CAAC,CAAC,2CAybf"}

package/dist/types/components/Table/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Table';
+export { default as Table } from './Table';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/Table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/types/components/Table/style.d.ts

@@ -0,0 +1,98 @@
+import type { SortDirection } from '../../types/table';
+export declare const TableOuterWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TableWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TableContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    maxHeight?: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTable: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+export declare const TableHead: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, {}>;
+export declare const TableBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, {}>;
+export declare const TableRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    striped?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
+export declare const TableHeaderCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    width?: string;
+    sortable?: boolean;
+}, import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {}>;
+export declare const TableDataCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    editable?: boolean;
+    width?: string;
+    height?: string;
+    isHeaderColumn?: boolean;
+    isSelected?: boolean;
+    $edgeTop?: boolean;
+    $edgeBottom?: boolean;
+    $edgeLeft?: boolean;
+    $edgeRight?: boolean;
+    $rowSelected?: boolean;
+}, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
+export declare const SortIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    active?: boolean;
+    direction?: SortDirection;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const EditableInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const ScrollContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ScrollButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    position: "top" | "bottom";
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const ContextMenuOverlay: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContextMenu: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    x: number;
+    y: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContextMenuItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    disabled?: boolean;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const ContextMenuDivider: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=style.d.ts.map

package/dist/types/components/Table/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/style.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AA6BvD,eAAO,MAAM,iBAAiB;;;yGAQ7B,CAAC;AAEF,eAAO,MAAM,YAAY;;;yGAKxB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;gBAA4B,MAAM;yGAuC5D,CAAC;AAKF,eAAO,MAAM,WAAW;;;kHAMvB,CAAC;AAEF,eAAO,MAAM,SAAS;;;2HAKrB,CAAC;AAEF,eAAO,MAAM,SAAS;;;2HAAiB,CAAC;AAExC,eAAO,MAAM,QAAQ;;;;cAAyB,OAAO;mHAQpD,CAAC;AAWF,eAAO,MAAM,eAAe;;;;YAAuB,MAAM;eAAa,OAAO;mIA8B5E,CAAC;AAEF,eAAO,MAAM,aAAa;;;;eACb,OAAO;YACV,MAAM;aACL,MAAM;qBACE,OAAO;iBACX,OAAO;eACT,OAAO;kBACJ,OAAO;gBACT,OAAO;iBACN,OAAO;mBACL,OAAO;+HAiDvB,CAAC;AAKF,eAAO,MAAM,QAAQ;;;;aAA0B,OAAO;gBAAc,aAAa;2GAUhF,CAAC;AAEF,eAAO,MAAM,aAAa;;;kHAazB,CAAC;AAKF,eAAO,MAAM,eAAe;;;yGAM3B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;cAA6B,KAAK,GAAG,QAAQ;qHA0BrE,CAAC;AAKF,eAAO,MAAM,kBAAkB;;;yGAO9B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;OAAmB,MAAM;OAAK,MAAM;yGAY3D,CAAC;AAEF,eAAO,MAAM,eAAe;;;;eAA8B,OAAO;qHAsBhE,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGAI9B,CAAC"}

package/dist/types/components/Table/table-body.d.ts

@@ -0,0 +1,3 @@
+import type { TableBodyProps } from '../../types/table';
+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>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=table-body.d.ts.map

package/dist/types/components/Table/table-body.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-body.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/table-body.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAgB,MAAM,mBAAmB,CAAC;AAoCtE,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC7F,OAAO,EACP,IAAI,EACJ,SAAS,EACT,UAAU,EACV,cAAc,EACd,YAAY,EACZ,WAAW,EACX,cAAc,EACd,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EACf,UAAU,EACV,UAAU,GACX,EAAE,cAAc,CAAC,CAAC,CAAC,2CAwDnB"}

package/dist/types/components/Table/table-cell.d.ts

@@ -0,0 +1,3 @@
+import type { TableCellProps } from '../../types/table';
+export default function TableCell({ value, editable, width, height, rowHeight, dataType, isHeaderColumn, isSelected, rowSelected, isEditingRequested, startEditingToken, startEditingValue, selectionEdge, rowSpan, colSpan, onEdit, render, onMouseDown, onMouseEnter, onMouseUp, }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=table-cell.d.ts.map

package/dist/types/components/Table/table-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/table-cell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAY,MAAM,mBAAmB,CAAC;AAuClE,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,KAAK,EACL,QAAgB,EAChB,KAAK,EACL,MAAM,EACN,SAAS,EACT,QAAiB,EACjB,cAAsB,EACtB,UAAkB,EAClB,WAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,aAAa,EACb,OAAO,EACP,OAAO,EACP,MAAM,EACN,MAAM,EACN,WAAW,EACX,YAAY,EACZ,SAAS,GACV,EAAE,cAAc,2CA2FhB"}

package/dist/types/components/Table/table-header.d.ts

@@ -0,0 +1,4 @@
+import type { TableHeaderProps } from '../../types/table';
+/** 테이블 헤더 */
+export default function TableHeader<T = Record<string, unknown>>({ columns, sortColumn, sortDirection, onSort, }: TableHeaderProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=table-header.d.ts.map

package/dist/types/components/Table/table-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-header.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/table-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAiB,MAAM,mBAAmB,CAAC;AAWzE,aAAa;AACb,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC/D,OAAO,EACP,UAAU,EACV,aAAa,EACb,MAAM,GACP,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAgCrB"}

package/dist/types/components/index.d.ts

@@ -4,4 +4,5 @@ export * from './Dropdown';
 export * from './Input';
 export * from './Sidebar';
 export * from './TabBar';
+export * from './Table';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}

package/dist/types/types/Dropdown.types.d.ts

@@ -4,5 +4,6 @@ export interface DropdownProps {
     options: string[];
     label?: string;
     placeholder?: string;
+    width?: string;
 }
 //# sourceMappingURL=Dropdown.types.d.ts.map

package/dist/types/types/Dropdown.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.types.d.ts","sourceRoot":"","sources":["../../../src/types/Dropdown.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB"}
+{"version":3,"file":"Dropdown.types.d.ts","sourceRoot":"","sources":["../../../src/types/Dropdown.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf"}

package/dist/types/types/index.d.ts

@@ -1 +1,7 @@
+export * from './button.types';
+export * from './checkBox.types';
+export * from './Dropdown.types';
+export * from './input.types';
+export * from './Sidebar.types';
+export * from './table';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}

package/dist/types/types/table.d.ts

@@ -0,0 +1,141 @@
+import type { ReactNode } from 'react';
+/** 셀 데이터 타입 */
+export type DataType = 'text' | 'number' | 'date' | 'boolean' | 'custom';
+/** 정렬 방향 */
+export type SortDirection = 'asc' | 'desc' | null;
+/**
+ * 테이블 컬럼 정의
+ * @template T - 행 데이터 타입
+ */
+export interface TableColumn<T = Record<string, unknown>> {
+    /** 컬럼 고유 키 */
+    key: keyof T extends string ? keyof T : string;
+    /** 헤더 텍스트 */
+    header: string;
+    /** 컬럼 너비 (예: '100px', '20%') */
+    width?: string;
+    /** 편집 가능 여부 @default true */
+    editable?: boolean;
+    /** 셀 높이 */
+    height?: string;
+    /** 데이터 타입 @default 'text' */
+    dataType?: DataType;
+    /** 정렬 가능 여부 @default false */
+    sortable?: boolean;
+    /** 헤더 스타일 적용 (좌측 열 강조) */
+    isHeaderColumn?: boolean;
+    /** 행 병합 수 */
+    rowSpan?: number;
+    /** 열 병합 수 */
+    colSpan?: number;
+    /** 커스텀 렌더링 */
+    render?: (value: unknown, row: T, rowIndex: number) => ReactNode;
+    /** 커스텀 정렬 함수 */
+    sortFn?: (a: unknown, b: unknown) => number;
+}
+/** 테이블 행 데이터 타입 */
+export type TableRow<T = Record<string, unknown>> = T;
+/** 테이블 컴포넌트 Props */
+export interface TableProps<T = Record<string, unknown>> {
+    columns: TableColumn<T>[];
+    data: TableRow<T>[];
+    onCellEdit?: (rowIndex: number, columnKey: string, value: unknown) => void;
+    onSort?: (columnKey: string, direction: SortDirection) => void;
+    onSelectionChange?: (cells: CellPosition[]) => void;
+    onPaste?: (startRow: number, startCol: number, values: string[][]) => void;
+    /** 최대 높이 (스크롤 활성화) */
+    maxHeight?: string;
+    /** 행 높이 (기본값: 30px) */
+    rowHeight?: string;
+    /** 줄무늬 스타일 */
+    striped?: boolean;
+    className?: string;
+    /** 행 선택 활성화 */
+    enableRowSelection?: boolean;
+    /** 선택된 행 인덱스 */
+    selectedRowIndex?: number;
+    /** 행 클릭 콜백 */
+    onRowClick?: (rowIndex: number, row: T) => void;
+    /** 키보드 네비게이션 활성화 (↑↓ 화살표) */
+    enableKeyboardNavigation?: boolean;
+}
+/** 테이블 셀 Props */
+export interface TableCellProps {
+    value: unknown;
+    editable?: boolean;
+    width?: string;
+    height?: string;
+    rowHeight?: string;
+    dataType?: DataType;
+    isHeaderColumn?: boolean;
+    rowSpan?: number;
+    colSpan?: number;
+    isSelected?: boolean;
+    rowSelected?: boolean;
+    /** 부모에서 편집 시작 요청 여부 */
+    isEditingRequested?: boolean;
+    /** 편집 시작 트리거 토큰(값이 바뀌면 편집 시작) */
+    startEditingToken?: number;
+    /** 편집 시작 시 초기 입력 값(타이핑 시작 등) */
+    startEditingValue?: string | null;
+    selectionEdge?: {
+        top: boolean;
+        bottom: boolean;
+        left: boolean;
+        right: boolean;
+    };
+    onEdit?: (value: unknown) => void;
+    render?: (value: unknown) => ReactNode;
+    onMouseDown?: () => void;
+    onMouseEnter?: () => void;
+    onMouseUp?: () => void;
+}
+/** 테이블 헤더 Props */
+export interface TableHeaderProps<T = Record<string, unknown>> {
+    columns: TableColumn<T>[];
+    sortColumn?: string;
+    sortDirection?: SortDirection;
+    onSort?: (columnKey: string) => void;
+}
+/** 테이블 바디 Props */
+export interface TableBodyProps<T = Record<string, unknown>> {
+    columns: TableColumn<T>[];
+    data: TableRow<T>[];
+    rowHeight?: string;
+    onCellEdit?: (rowIndex: number, columnKey: string, value: unknown) => void;
+    selectedCells?: Set<string>;
+    selectionStart?: CellPosition | null;
+    selectionEnd?: CellPosition | null;
+    /** 키 입력 등으로 시작되는 편집 대상 셀 */
+    editingCell?: CellPosition | null;
+    /** 키 입력으로 시작된 경우 초기 값 */
+    editStartValue?: string | null;
+    /** 편집 시작 트리거 토큰 */
+    editToken?: number;
+    onCellMouseDown?: (rowIndex: number, colIndex: number) => void;
+    onCellMouseEnter?: (rowIndex: number, colIndex: number) => void;
+    onCellMouseUp?: () => void;
+    /** 행 선택 활성화 */
+    enableRowSelection?: boolean;
+    /** 선택된 행 인덱스 */
+    selectedRowIndex?: number;
+    /** 호버된 행 인덱스 */
+    hoveredRowIndex?: number;
+    /** 행 클릭 콜백 */
+    onRowClick?: (rowIndex: number) => void;
+    /** 행 호버 콜백 */
+    onRowHover?: (rowIndex: number | null) => void;
+}
+/** 셀 위치 */
+export interface CellPosition {
+    row: number;
+    col: number;
+}
+/** 선택 범위 */
+export interface SelectionRange {
+    startRow: number;
+    endRow: number;
+    startCol: number;
+    endCol: number;
+}
+//# sourceMappingURL=table.d.ts.map

package/dist/types/types/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/types/table.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -21,6 +21,10 @@ const meta = {
 			control: 'text',
 			description: '상단 라벨 텍스트',
 		},
+		width: {
+			control: 'text',
+			description: '드롭다운 너비 (예: 320px, 100%)',
+		},
 		options: {
 			control: 'object',
 			description: '표시할 옵션 문자열 배열',

package/src/components/Dropdown/Dropdown.tsx

@@ -3,7 +3,7 @@ import {DropdownProps} from "../../types/Dropdown.types";
 import {StyledBox, StyledDropDown, StyledText, StyledLabel, StyledIcon, StyledOptions, StyledOption} from "./style";
 import arrowDownIcon from '../../assets/icons/arrow-down.png';
 
-export function Dropdown({size, options, onSelect, label, placeholder}: DropdownProps) {
+export function Dropdown({size, options, onSelect, label, placeholder, width}: DropdownProps) {
 	const [open, setOpen] = React.useState(false);
 	const [selected, setSelected] = React.useState<string | null>(null);
 	const ref = React.useRef<HTMLDivElement>(null);
@@ -30,6 +30,7 @@ export function Dropdown({size, options, onSelect, label, placeholder}: Dropdown
 			<StyledLabel>{label}</StyledLabel>
 			<StyledDropDown onClick={() => setOpen((prev) => !prev)}
 				size={size}
+				width={width}
 				isOpen={open}
 				>
 				<StyledBox>

package/src/components/Dropdown/style.ts

@@ -9,6 +9,7 @@ export interface StyledDropdownProps {
 	onSelect?: (option: string) => void;
 	isOpen?: boolean;
 	isSelected?: boolean;
+	width?: string;
 }
 
 const getButtonSize = (size?: 'small' | 'medium' | 'large') => {
@@ -112,7 +113,7 @@ export const StyledDropDown = styled.button<StyledDropdownProps>`
     flex-direction: column;
     align-items: flex-start;
     gap: 8px;
-	width: 320px;
+	width: ${({ width }) => width || '320px'};
 	
     border: ${({ isOpen }) =>
             isOpen ? `2px solid ${colors.input['border-active']}` : `1px solid ${colors.input.border}`};

package/src/components/Sidebar/style.ts

@@ -16,8 +16,8 @@ export const StyledIcon = styled.img<TitleProps>`
 
 export const StyledSidebar = styled.div`
     display: flex;
-    width: 240px;
-    height: 100vh;
+    width: 208px;
+    height: 621px;
     padding: 16px;
     flex-direction: column;
     align-items: flex-start;
@@ -33,7 +33,7 @@ export const StyledDescription = styled.div`
     align-items: flex-start;
     gap: 18px;
     flex: 1 0 0;
-    max-height: calc(100vh - 40px);
+    max-height: calc(100% - 40px);
     overflow-y: auto;
     overflow-x: hidden;
 
@@ -89,7 +89,7 @@ export const StyledOpenContents = styled.div`
     align-items: flex-start;
     gap: 8px;
     align-self: stretch;
-    width: 186px;
+    width: 154px;
 
     border-radius: 12px;
     background: ${colors.surface["gray-subtler"]};

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 />,
+};