@thewrong/ui 0.2.0 → 0.4.0

package/dist/components/table/table.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../../node_modules/lucide-react/dist/esm/icons/grip-vertical.cjs"),n=require("../loading-spinner/LoadingSpinner.cjs"),r=require("../table-checkbox/TableCheckbox.cjs"),i=require("./column-group-utils.cjs"),a=require("./components/SortableHeaderCell.cjs"),o=require("./components/SortHeader.cjs"),s=require("./hooks/sort-state.cjs"),ee=require("./hooks/useColumnResize.cjs"),te=require("../../hooks/useFillEmptyRows.cjs"),ne=require("../../hooks/useTableDragSelection.cjs"),re=require("./hooks/useTableSort.cjs"),c=require("./utils.cjs");let l=require("react"),u=require("react/jsx-runtime"),d=require("@dnd-kit/core"),f=require("@dnd-kit/sortable");var ie=({transform:e,draggingNodeRect:t,containerNodeRect:n})=>{let r={...e,y:0};if(!t||!n)return r;let i=n.left-t.left,a=n.right-t.right;return r.x=Math.min(Math.max(r.x,i),a),r},p=(0,l.forwardRef)((p,m)=>{let{data:h,columns:g,columnGroups:ae,rowHeight:_,loading:oe=!1,isFetching:v=!1,emptyMessage:se=`데이터가 없어요`,onRowClick:y,selectedRows:b=[],onRowSelect:x,enableRowSelection:S=!1,enableSelectAll:C=!1,rowCompare:ce,getRowId:le,enableSorting:w=!1,sortCycle:ue=`tri`,formatSortLabel:de,serverSideSorting:T=!1,onSortChange:fe,initialSort:pe,variant:me=`default`,size:he=`medium`,stickyHeader:E=!0,height:D,maxHeight:O,storageKey:ge,columnState:k,fillEmptyRows:A=!0,totalElements:j,footerSlot:_e,className:M=``,"data-testid":N,...P}=p,{sort:F,sortedData:I,handleSort:ve}=re.useTableSort({initialSort:pe,cycle:ue,serverSide:T,onSort:fe||void 0}),L=e=>!!(e.sortable&&(w||T)),R=e=>L(e)?s.ariaSort(s.sortDirectionFor(F,e.key)):void 0,z=e=>{if(!L(e))return(0,u.jsx)(`span`,{children:e.header});let t=s.sortDirectionFor(F,e.key),n=s.nextSort(F,e.key,ue)?.direction??null;return(0,u.jsx)(o.SortHeader,{current:t,label:de?.(e,t,n),onSort:()=>ve(e.key),children:e.header})},B=(0,l.useMemo)(()=>!w||T?h:I(h,(e,t)=>{let n=g.find(e=>e.key===t);if(n?.accessor){let r=n.accessor(e);return typeof r==`string`||typeof r==`number`?r:e[t]}return e[t]}),[h,w,T,F,I,g]),V=(0,l.useRef)(null),H=(0,l.useRef)(null),U=(0,l.useRef)(null),ye=(0,l.useRef)(null),W=!!k,be=(0,d.useSensors)((0,d.useSensor)(d.PointerSensor,{activationConstraint:{distance:5}}),(0,d.useSensor)(d.KeyboardSensor,{coordinateGetter:f.sortableKeyboardCoordinates})),G=(0,l.useMemo)(()=>i.buildColumnSlots(g,ae),[g,ae]),K=(0,l.useMemo)(()=>{if(!k)return G.filter(e=>!(e.kind===`column`&&e.leafColumns[0].hidden));let e=new Set(k.hiddenColumns);return i.applyColumnState(G,k.columnOrder,e)},[G,k]),q=(0,l.useMemo)(()=>i.flattenLeafColumns(K),[K]),J=(0,l.useMemo)(()=>i.hasGroupSlot(K),[K]),xe=(0,l.useMemo)(()=>new Map(G.map(e=>[e.key,e])),[G]),Se=e=>{let{active:t,over:n}=e;if(!k||!n||t.id===n.id)return;let r=xe.get(String(n.id));if(r?.kind===`column`&&r.leafColumns[0].excludeFromPreset)return;let i=k.columnOrder,a=i.indexOf(String(t.id)),o=i.indexOf(String(n.id));a===-1||o===-1||k.onColumnOrderChange((0,f.arrayMove)(i,a,o))},{handleMouseDown:Ce,handleDoubleClick:we,getColumnWidth:Y,measureRef:Te}=ee.useColumnResize({columns:q,data:B,getCellContent:(e,t)=>{let n=q.find(e=>e.key===t);return n?.accessor?n.accessor(e):e[t]},tableRef:V,...k?{controlledWidths:k.columnWidths,onColumnWidthsChange:k.onColumnWidthsChange}:{storageKey:ge}}),Ee=c.getTableBaseClasses(),De=c.getTableVariantClasses(me),Oe=c.getTableSizeClasses(he),ke=S&&C?48:0,Ae=(0,l.useMemo)(()=>q.reduce((e,t)=>{let n=Y(t.key,t.width),r=parseFloat(n);return e+(Number.isFinite(r)?r:0)},0)+ke,[q,Y,ke]),X=(0,l.useMemo)(()=>{let e={};return D&&(e.height=typeof D==`number`?`${D}px`:D),O&&(e.maxHeight=typeof O==`number`?`${O}px`:O),e},[D,O]),{emptyRowCount:je,measuredRowHeight:Me}=te.useFillEmptyRows({enabled:A,containerRef:H,theadRef:U,tbodyRef:ye,excludeRowsSelector:`tr:not([data-empty-row])`,remainingMode:`sum-real-rows`,deps:[B,q]}),Z=e=>!S||b.length===0?!1:ce?b.some(t=>ce(t,e)):b.some(t=>t===e),Ne=(0,l.useMemo)(()=>!S||!C||B.length===0?!1:B.every(e=>Z(e)),[S,C,B,Z]),Pe=()=>{!S||!x||(Ne?B.forEach(e=>{Z(e)&&x(e,!1)}):B.forEach(e=>{Z(e)||x(e,!0)}))},Q=S&&!!x&&!!le,$=ne.useTableDragSelection({rows:B,getRowId:le??(()=>-1),isSelected:e=>Z(e),setSelected:(e,t)=>x?.(e,t),enabled:Q,scrollContainerRef:H}),Fe=(t,n)=>{let r=[c.getStripedRowClasses(n)];return Z(t)&&r.push(c.getSelectedRowClasses()),y&&r.push(c.getHoverableRowClasses()),e.cn(r)};return oe?(0,u.jsx)(`div`,{ref:m,className:e.cn(`flex items-center justify-center p-8 flex-1`,M),style:X,"data-testid":N,...P,children:(0,u.jsx)(n.LoadingSpinner,{message:`데이터를 불러오는 중이에요...`,className:`min-h-0`})}):(0,u.jsxs)(`div`,{ref:m,className:e.cn(`isolate relative flex flex-col min-h-0 gap-4 md:gap-5 xl:gap-6`,M),style:X,"data-testid":N,...P,children:[(0,u.jsx)(`div`,{ref:Te,className:`absolute invisible whitespace-nowrap`,style:{top:`-9999px`,left:`-9999px`}}),(0,u.jsxs)(`div`,{className:`flex flex-1 flex-col min-h-0 gap-4 md:gap-5 xl:gap-6`,children:[(0,u.jsxs)(`div`,{className:`relative flex flex-1 flex-col min-h-0`,children:[(0,u.jsx)(`div`,{className:e.cn(`pointer-events-none absolute inset-0 z-30 flex items-center justify-center bg-bg-surface/60 backdrop-blur-[2px] transition-opacity duration-150`,v?`opacity-100`:`opacity-0`),...v?{role:`status`,"aria-live":`polite`}:{"aria-hidden":!0},children:(0,u.jsx)(n.LoadingSpinner,{message:``,className:`min-h-0`})}),(0,u.jsx)(`div`,{ref:H,className:`scrollbar-table overflow-auto flex-1 bg-bg-page`,children:B.length===0?(0,u.jsx)(`div`,{className:`flex items-center justify-center p-8 h-full`,children:(0,u.jsx)(`p`,{className:`text-fg-muted`,children:se})}):(0,u.jsx)(d.DndContext,{sensors:be,collisionDetection:d.closestCenter,onDragEnd:Se,modifiers:[ie],children:(0,u.jsxs)(`table`,{ref:V,className:e.cn(Ee,De,Oe),style:{tableLayout:`fixed`,minWidth:`100%`,width:`${Ae}px`},children:[(0,u.jsxs)(`colgroup`,{children:[S&&C&&(0,u.jsx)(`col`,{style:{width:`48px`}}),q.map(e=>(0,u.jsx)(`col`,{"data-col-key":e.key,style:{width:Y(e.key,e.width)}},e.key))]}),(0,u.jsxs)(`thead`,{ref:U,className:c.getTableHeaderClasses(),style:{position:E?`sticky`:`relative`,top:E?0:void 0,zIndex:E?20:void 0},children:[(0,u.jsxs)(`tr`,{children:[S&&C&&(0,u.jsx)(`th`,{rowSpan:J?2:1,className:e.cn(c.getTableHeaderCellClasses(),c.getColumnAlignClasses(`center`),`w-12 px-0`),children:(0,u.jsx)(`div`,{className:`flex items-center justify-center`,children:(0,u.jsx)(r.TableCheckbox,{checked:Ne,onChange:()=>Pe(),ariaLabel:`전체 선택`})})}),(0,u.jsx)(f.SortableContext,{items:K.map(e=>e.key),strategy:f.horizontalListSortingStrategy,children:K.map(n=>{if(n.kind===`group`)return(0,u.jsxs)(a.SortableHeaderCell,{id:n.key,disabled:!W,as:`th`,colSpan:n.leafColumns.length,className:e.cn(c.getTableHeaderCellClasses(),c.getColumnAlignClasses(`center`),`group/header-cell relative`,n.hideOnMobile&&`hidden md:table-cell`),children:[W&&(0,u.jsx)(`span`,{className:`absolute left-0.5 top-1/2 -translate-y-1/2 text-fg-subtle opacity-0 transition-opacity group-hover/header-cell:opacity-100`,"aria-hidden":`true`,children:(0,u.jsx)(t.GripVertical,{className:`h-3.5 w-3.5`})}),(0,u.jsx)(`div`,{className:`flex items-center justify-center w-full pr-1 pl-3 select-none`,children:(0,u.jsx)(`span`,{children:n.header})})]},n.key);let r=n.leafColumns[0],i=!W||r.excludeFromPreset===!0;return(0,u.jsxs)(a.SortableHeaderCell,{id:r.key,disabled:i,as:`th`,"aria-sort":R(r),hasSortButton:L(r),rowSpan:J?2:1,className:e.cn(c.getTableHeaderCellClasses(),c.getColumnAlignClasses(`center`),`group/header-cell relative`,r.sticky&&`sticky left-0 z-20 bg-bg-table-header`,r.hideOnMobile&&`hidden md:table-cell`),style:{width:Y(r.key,r.width),minWidth:r.minWidth||50},children:[!i&&(0,u.jsx)(`span`,{className:`absolute left-0.5 top-1/2 -translate-y-1/2 text-fg-subtle opacity-0 transition-opacity group-hover/header-cell:opacity-100`,"aria-hidden":`true`,children:(0,u.jsx)(t.GripVertical,{className:`h-3.5 w-3.5`})}),(0,u.jsx)(`div`,{className:`flex items-center justify-center w-full pr-1 pl-3 select-none`,children:z(r)}),r.excludeFromPreset!==!0&&(0,u.jsx)(`div`,{className:`group/resize absolute right-0 top-0 h-full w-3 cursor-col-resize z-50 flex items-center justify-center`,onPointerDown:e=>e.stopPropagation(),onMouseDown:e=>{e.preventDefault(),e.stopPropagation(),Ce(r.key,e)},onDoubleClick:e=>{e.preventDefault(),e.stopPropagation(),we(r.key,e)},onClick:e=>{e.preventDefault(),e.stopPropagation()},style:{touchAction:`none`},title:`드래그하여 너비 조절, 더블 클릭하여 자동 조절`,children:(0,u.jsx)(`span`,{"aria-hidden":`true`,className:`h-1/2 w-0.5 rounded-full bg-transparent transition-colors group-hover/header-cell:bg-border-default group-hover/resize:!bg-primary group-active/resize:!bg-primary-hover`})})]},r.key)})})]}),J&&(0,u.jsx)(`tr`,{children:K.filter(e=>e.kind===`group`).flatMap(e=>e.leafColumns).map(t=>(0,u.jsx)(`th`,{"aria-sort":R(t),className:e.cn(c.getTableHeaderCellClasses(),c.getColumnAlignClasses(t.align??`center`),t.hideOnMobile&&`hidden md:table-cell`),style:{width:Y(t.key,t.width),minWidth:t.minWidth||50},children:(0,u.jsx)(`div`,{className:`flex items-center justify-center w-full pr-1 pl-3 select-none`,children:z(t)})},t.key))})]}),(0,u.jsxs)(`tbody`,{ref:ye,children:[B.map((t,n)=>{let i=Z(t);return(0,u.jsxs)(`tr`,{className:Fe(t,n),onClick:()=>y?.(t,n),style:_?{height:`${_}px`}:void 0,children:[S&&C&&(0,u.jsx)(`td`,{className:e.cn(c.getTableCellClasses(),c.getColumnAlignClasses(`center`),`w-12 select-none`),onClick:e=>e.stopPropagation(),onMouseDown:Q?e=>{e.preventDefault(),$.onRowMouseDown(n)}:void 0,onMouseEnter:Q?()=>$.onRowMouseEnter(n):void 0,children:(0,u.jsx)(`div`,{className:`flex items-center justify-center`,children:(0,u.jsx)(r.TableCheckbox,{checked:i,onChange:e=>x?.(t,e),pointerEventsNone:Q,ariaLabel:`행 선택`})})}),q.map(n=>{let r=n.accessor?n.accessor(t):t[n.key];return(0,u.jsx)(`td`,{className:e.cn(c.getTableCellClasses(),c.getColumnAlignClasses(n.align),n.sticky&&`sticky left-0 z-10 bg-inherit`,n.hideOnMobile&&`hidden md:table-cell`),style:{width:Y(n.key,n.width),minWidth:n.minWidth||50,..._?{height:`${_}px`,maxHeight:`${_}px`,overflow:`hidden`}:{}},children:r},n.key)})]},n)}),A&&Array.from({length:je}).map((t,n)=>{let r=B.length+n,i=_??Me??void 0;return(0,u.jsxs)(`tr`,{"data-empty-row":!0,"aria-hidden":`true`,className:c.getStripedRowClasses(r),style:i?{height:`${i}px`}:void 0,children:[S&&C&&(0,u.jsx)(`td`,{className:e.cn(c.getTableCellClasses(),`w-12`),style:i?{height:`${i}px`}:void 0}),q.map(t=>(0,u.jsx)(`td`,{className:e.cn(c.getTableCellClasses(),t.hideOnMobile&&`hidden md:table-cell`),style:{width:Y(t.key,t.width),minWidth:t.minWidth||50,...i?{height:`${i}px`}:{}}},t.key))]},`empty-${n}`)})]})]})})})]}),_e??(j===void 0?null:(0,u.jsx)(`div`,{className:`flex justify-end shrink-0 text-sm text-fg-muted`,children:(0,u.jsxs)(`span`,{children:[`총 `,j.toLocaleString(),`건`]})}))]})]})});p.displayName=`Table`,exports.Table=p;

package/dist/components/table/table.d.ts

@@ -0,0 +1,13 @@
+import { TableProps } from './types.js';
+/**
+ * Table — 코어 테이블. 헤더(정렬/리사이즈/grip 드래그) + 본문(스트라이프/선택/sticky) + 컬럼 프리셋.
+ *
+ * 페이지네이션이 없는 조회 API 또는 페이지네이션 영역을 별도로 렌더하는 경우 사용.
+ * PaginatedTable은 이 컴포넌트를 wrap해서 footer(Pagination/PageJump/PageSize)를 추가.
+ * 클라이언트 정렬은 전달된 현재 페이지 데이터만 정렬한다. 서버 페이지네이션이면 serverSideSorting을 사용하고,
+ * 정렬 변경 시 페이지 초기화는 호출부에서 처리한다.
+ * 컬럼 너비 합이 컨테이너보다 작아 열이 늘어나면 브라우저가 남는 폭을 재분배하므로 드래그 이동량과 화면 변화량이 비례하지 않는다. 컬럼 합을 컨테이너 이상으로 지정한다(여백 컬럼이 필요하면 AccordionTable을 쓴다 — Table에는 여백 컬럼 옵션이 없다).
+ */
+export declare const Table: <T>(props: TableProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.ReactElement;

package/dist/components/table/table.esm.js

@@ -1,19 +1,22 @@
-import { GripVertical as e } from "../../node_modules/lucide-react/dist/esm/icons/grip-vertical.esm.js";
-import { LoadingSpinner as t } from "../loading-spinner/LoadingSpinner.esm.js";
-import { TableCheckbox as n } from "../table-checkbox/TableCheckbox.esm.js";
-import { applyColumnState as r, buildColumnSlots as i, flattenLeafColumns as a, hasGroupSlot as o } from "./column-group-utils.esm.js";
+import { cn as e } from "../../lib/utils.esm.js";
+import { GripVertical as t } from "../../node_modules/lucide-react/dist/esm/icons/grip-vertical.esm.js";
+import { LoadingSpinner as n } from "../loading-spinner/LoadingSpinner.esm.js";
+import { TableCheckbox as r } from "../table-checkbox/TableCheckbox.esm.js";
+import { applyColumnState as i, buildColumnSlots as a, flattenLeafColumns as o, hasGroupSlot as ee } from "./column-group-utils.esm.js";
 import { SortableHeaderCell as s } from "./components/SortableHeaderCell.esm.js";
-import { useColumnResize as ee } from "./hooks/useColumnResize.esm.js";
-import { useFillEmptyRows as te } from "./hooks/useFillEmptyRows.esm.js";
-import { useTableDragSelection as ne } from "./hooks/useTableDragSelection.esm.js";
-import { useTableSort as re } from "./hooks/useTableSort.esm.js";
-import { getColumnAlignClasses as c, getHoverableRowClasses as ie, getSelectedRowClasses as ae, getStripedRowClasses as l, getTableBaseClasses as oe, getTableCellClasses as u, getTableHeaderCellClasses as d, getTableHeaderClasses as se, getTableSizeClasses as ce, getTableVariantClasses as le } from "./utils.esm.js";
+import { SortHeader as te } from "./components/SortHeader.esm.js";
+import { ariaSort as ne, nextSort as re, sortDirectionFor as ie } from "./hooks/sort-state.esm.js";
+import { useColumnResize as ae } from "./hooks/useColumnResize.esm.js";
+import { useFillEmptyRows as oe } from "../../hooks/useFillEmptyRows.esm.js";
+import { useTableDragSelection as se } from "../../hooks/useTableDragSelection.esm.js";
+import { useTableSort as ce } from "./hooks/useTableSort.esm.js";
+import { getColumnAlignClasses as c, getHoverableRowClasses as le, getSelectedRowClasses as ue, getStripedRowClasses as l, getTableBaseClasses as de, getTableCellClasses as u, getTableHeaderCellClasses as d, getTableHeaderClasses as fe, getTableSizeClasses as pe, getTableVariantClasses as me } from "./utils.esm.js";
 import { forwardRef as f, useMemo as p, useRef as m } from "react";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { DndContext as ue, KeyboardSensor as de, PointerSensor as fe, closestCenter as pe, useSensor as me, useSensors as he } from "@dnd-kit/core";
-import { SortableContext as ge, arrayMove as _e, horizontalListSortingStrategy as ve, sortableKeyboardCoordinates as ye } from "@dnd-kit/sortable";
+import { DndContext as he, KeyboardSensor as ge, PointerSensor as _e, closestCenter as ve, useSensor as ye, useSensors as be } from "@dnd-kit/core";
+import { SortableContext as xe, arrayMove as Se, horizontalListSortingStrategy as Ce, sortableKeyboardCoordinates as we } from "@dnd-kit/sortable";
 //#region src/components/table/table.tsx
-var be = ({ transform: e, draggingNodeRect: t, containerNodeRect: n }) => {
+var Te = ({ transform: e, draggingNodeRect: t, containerNodeRect: n }) => {
 	let r = {
 		...e,
 		y: 0
@@ -22,11 +25,21 @@ var be = ({ transform: e, draggingNodeRect: t, containerNodeRect: n }) => {
 	let i = n.left - t.left, a = n.right - t.right;
 	return r.x = Math.min(Math.max(r.x, i), a), r;
 }, _ = f((f, _) => {
-	let { data: v, columns: y, columnGroups: b, rowHeight: x, loading: xe = !1, isFetching: S = !1, emptyMessage: Se = "데이터가 없어요", onRowClick: C, selectedRows: w = [], onRowSelect: T, enableRowSelection: E = !1, enableSelectAll: D = !1, rowCompare: O, getRowId: k, enableSorting: A = !1, serverSideSorting: j = !1, onSortChange: Ce, initialSort: we, variant: Te = "default", size: Ee = "medium", stickyHeader: M = !0, height: N, maxHeight: P, storageKey: De, columnState: F, fillEmptyRows: I = !0, totalElements: L, footerSlot: Oe, className: R = "", "data-testid": z, ...B } = f, { sort: ke, sortedData: V } = re({
-		initialSort: we,
-		serverSide: j,
-		onSort: Ce || void 0
-	}), H = p(() => !A || j ? v : V(v, (e, t) => {
+	let { data: v, columns: y, columnGroups: b, rowHeight: x, loading: Ee = !1, isFetching: S = !1, emptyMessage: De = "데이터가 없어요", onRowClick: C, selectedRows: w = [], onRowSelect: T, enableRowSelection: E = !1, enableSelectAll: D = !1, rowCompare: O, getRowId: k, enableSorting: A = !1, sortCycle: j = "tri", formatSortLabel: Oe, serverSideSorting: M = !1, onSortChange: ke, initialSort: Ae, variant: je = "default", size: Me = "medium", stickyHeader: N = !0, height: P, maxHeight: F, storageKey: Ne, columnState: I, fillEmptyRows: L = !0, totalElements: R, footerSlot: Pe, className: z = "", "data-testid": Fe, ...Ie } = f, { sort: B, sortedData: Le, handleSort: Re } = ce({
+		initialSort: Ae,
+		cycle: j,
+		serverSide: M,
+		onSort: ke || void 0
+	}), V = (e) => !!(e.sortable && (A || M)), ze = (e) => V(e) ? ne(ie(B, e.key)) : void 0, Be = (e) => {
+		if (!V(e)) return /* @__PURE__ */ h("span", { children: e.header });
+		let t = ie(B, e.key), n = re(B, e.key, j)?.direction ?? null;
+		return /* @__PURE__ */ h(te, {
+			current: t,
+			label: Oe?.(e, t, n),
+			onSort: () => Re(e.key),
+			children: e.header
+		});
+	}, H = p(() => !A || M ? v : Le(v, (e, t) => {
 		let n = y.find((e) => e.key === t);
 		if (n?.accessor) {
 			let r = n.accessor(e);
@@ -36,91 +49,91 @@ var be = ({ transform: e, draggingNodeRect: t, containerNodeRect: n }) => {
 	}), [
 		v,
 		A,
-		j,
-		ke,
-		V,
+		M,
+		B,
+		Le,
 		y
-	]), U = m(null), W = m(null), G = m(null), Ae = m(null), K = !!F, je = he(me(fe, { activationConstraint: { distance: 5 } }), me(de, { coordinateGetter: ye })), q = p(() => i(y, b), [y, b]), J = p(() => {
-		if (!F) return q.filter((e) => !(e.kind === "column" && e.leafColumns[0].hidden));
-		let e = new Set(F.hiddenColumns);
-		return r(q, F.columnOrder, e);
-	}, [q, F]), Y = p(() => a(J), [J]), X = p(() => o(J), [J]), Me = p(() => new Map(q.map((e) => [e.key, e])), [q]), Ne = (e) => {
+	]), Ve = m(null), U = m(null), He = m(null), Ue = m(null), W = !!I, We = be(ye(_e, { activationConstraint: { distance: 5 } }), ye(ge, { coordinateGetter: we })), G = p(() => a(y, b), [y, b]), K = p(() => {
+		if (!I) return G.filter((e) => !(e.kind === "column" && e.leafColumns[0].hidden));
+		let e = new Set(I.hiddenColumns);
+		return i(G, I.columnOrder, e);
+	}, [G, I]), q = p(() => o(K), [K]), J = p(() => ee(K), [K]), Ge = p(() => new Map(G.map((e) => [e.key, e])), [G]), Ke = (e) => {
 		let { active: t, over: n } = e;
-		if (!F || !n || t.id === n.id) return;
-		let r = Me.get(String(n.id));
+		if (!I || !n || t.id === n.id) return;
+		let r = Ge.get(String(n.id));
 		if (r?.kind === "column" && r.leafColumns[0].excludeFromPreset) return;
-		let i = F.columnOrder, a = i.indexOf(String(t.id)), o = i.indexOf(String(n.id));
-		a === -1 || o === -1 || F.onColumnOrderChange(_e(i, a, o));
-	}, { handleMouseDown: Pe, handleDoubleClick: Fe, getColumnWidth: Z, measureRef: Ie } = ee({
-		columns: Y,
+		let i = I.columnOrder, a = i.indexOf(String(t.id)), o = i.indexOf(String(n.id));
+		a === -1 || o === -1 || I.onColumnOrderChange(Se(i, a, o));
+	}, { handleMouseDown: qe, handleDoubleClick: Je, getColumnWidth: Y, measureRef: Ye } = ae({
+		columns: q,
 		data: H,
 		getCellContent: (e, t) => {
-			let n = Y.find((e) => e.key === t);
+			let n = q.find((e) => e.key === t);
 			return n?.accessor ? n.accessor(e) : e[t];
 		},
-		tableRef: U,
-		...F ? {
-			controlledWidths: F.columnWidths,
-			onColumnWidthsChange: F.onColumnWidthsChange
-		} : { storageKey: De }
-	}), Le = oe(), Re = le(Te), ze = ce(Ee), Be = E && D ? 48 : 0, Ve = p(() => Y.reduce((e, t) => {
-		let n = Z(t.key, t.width), r = parseFloat(n);
+		tableRef: Ve,
+		...I ? {
+			controlledWidths: I.columnWidths,
+			onColumnWidthsChange: I.onColumnWidthsChange
+		} : { storageKey: Ne }
+	}), Xe = de(), Ze = me(je), Qe = pe(Me), $e = E && D ? 48 : 0, et = p(() => q.reduce((e, t) => {
+		let n = Y(t.key, t.width), r = parseFloat(n);
 		return e + (Number.isFinite(r) ? r : 0);
-	}, 0) + Be, [
+	}, 0) + $e, [
+		q,
 		Y,
-		Z,
-		Be
-	]), He = p(() => {
+		$e
+	]), X = p(() => {
 		let e = {};
-		return N && (e.height = typeof N == "number" ? `${N}px` : N), P && (e.maxHeight = typeof P == "number" ? `${P}px` : P), e;
-	}, [N, P]), { emptyRowCount: Ue, measuredRowHeight: We } = te({
-		enabled: I,
-		containerRef: W,
-		theadRef: G,
-		tbodyRef: Ae,
+		return P && (e.height = typeof P == "number" ? `${P}px` : P), F && (e.maxHeight = typeof F == "number" ? `${F}px` : F), e;
+	}, [P, F]), { emptyRowCount: tt, measuredRowHeight: nt } = oe({
+		enabled: L,
+		containerRef: U,
+		theadRef: He,
+		tbodyRef: Ue,
 		excludeRowsSelector: "tr:not([data-empty-row])",
 		remainingMode: "sum-real-rows",
-		deps: [H, Y]
-	}), Q = (e) => !E || w.length === 0 ? !1 : O ? w.some((t) => O(t, e)) : w.some((t) => t === e), Ge = p(() => !E || !D || H.length === 0 ? !1 : H.every((e) => Q(e)), [
+		deps: [H, q]
+	}), Z = (e) => !E || w.length === 0 ? !1 : O ? w.some((t) => O(t, e)) : w.some((t) => t === e), rt = p(() => !E || !D || H.length === 0 ? !1 : H.every((e) => Z(e)), [
 		E,
 		D,
 		H,
-		Q
-	]), Ke = () => {
-		!E || !T || (Ge ? H.forEach((e) => {
-			Q(e) && T(e, !1);
+		Z
+	]), it = () => {
+		!E || !T || (rt ? H.forEach((e) => {
+			Z(e) && T(e, !1);
 		}) : H.forEach((e) => {
-			Q(e) || T(e, !0);
+			Z(e) || T(e, !0);
 		}));
-	}, $ = E && !!T && !!k, qe = ne({
+	}, Q = E && !!T && !!k, $ = se({
 		rows: H,
 		getRowId: k ?? (() => -1),
-		isSelected: (e) => Q(e),
+		isSelected: (e) => Z(e),
 		setSelected: (e, t) => T?.(e, t),
-		enabled: $,
-		scrollContainerRef: W
-	}), Je = (e, t) => {
-		let n = [l(t)];
-		return Q(e) && n.push(ae()), C && n.push(ie()), n.join(" ");
+		enabled: Q,
+		scrollContainerRef: U
+	}), at = (t, n) => {
+		let r = [l(n)];
+		return Z(t) && r.push(ue()), C && r.push(le()), e(r);
 	};
-	return xe ? /* @__PURE__ */ h("div", {
+	return Ee ? /* @__PURE__ */ h("div", {
 		ref: _,
-		className: `flex items-center justify-center p-8 flex-1 ${R}`,
-		style: He,
-		"data-testid": z,
-		...B,
-		children: /* @__PURE__ */ h(t, {
+		className: e("flex items-center justify-center p-8 flex-1", z),
+		style: X,
+		"data-testid": Fe,
+		...Ie,
+		children: /* @__PURE__ */ h(n, {
 			message: "데이터를 불러오는 중이에요...",
 			className: "min-h-0"
 		})
 	}) : /* @__PURE__ */ g("div", {
 		ref: _,
-		className: `relative flex flex-col min-h-0 gap-4 md:gap-5 xl:gap-6 ${R}`,
-		style: He,
-		"data-testid": z,
-		...B,
+		className: e("isolate relative flex flex-col min-h-0 gap-4 md:gap-5 xl:gap-6", z),
+		style: X,
+		"data-testid": Fe,
+		...Ie,
 		children: [/* @__PURE__ */ h("div", {
-			ref: Ie,
+			ref: Ye,
 			className: "absolute invisible whitespace-nowrap",
 			style: {
 				top: "-9999px",
@@ -131,109 +144,111 @@ var be = ({ transform: e, draggingNodeRect: t, containerNodeRect: n }) => {
 			children: [/* @__PURE__ */ g("div", {
 				className: "relative flex flex-1 flex-col min-h-0",
 				children: [/* @__PURE__ */ h("div", {
-					className: `pointer-events-none absolute inset-0 z-30 flex items-center justify-center bg-white/50 backdrop-blur-[2px] transition-opacity duration-150 dark:bg-neutral-900/50 ${S ? "opacity-100" : "opacity-0"}`,
+					className: e("pointer-events-none absolute inset-0 z-30 flex items-center justify-center bg-bg-surface/60 backdrop-blur-[2px] transition-opacity duration-150", S ? "opacity-100" : "opacity-0"),
 					...S ? {
 						role: "status",
 						"aria-live": "polite"
 					} : { "aria-hidden": !0 },
-					children: /* @__PURE__ */ h(t, {
+					children: /* @__PURE__ */ h(n, {
 						message: "",
 						className: "min-h-0"
 					})
 				}), /* @__PURE__ */ h("div", {
-					ref: W,
-					className: "scrollbar-table overflow-auto flex-1 bg-[#f9fafb] dark:bg-slate-900/50",
+					ref: U,
+					className: "scrollbar-table overflow-auto flex-1 bg-bg-page",
 					children: H.length === 0 ? /* @__PURE__ */ h("div", {
 						className: "flex items-center justify-center p-8 h-full",
 						children: /* @__PURE__ */ h("p", {
-							className: "text-neutral-600 dark:text-neutral-400",
-							children: Se
+							className: "text-fg-muted",
+							children: De
 						})
-					}) : /* @__PURE__ */ h(ue, {
-						sensors: je,
-						collisionDetection: pe,
-						onDragEnd: Ne,
-						modifiers: [be],
+					}) : /* @__PURE__ */ h(he, {
+						sensors: We,
+						collisionDetection: ve,
+						onDragEnd: Ke,
+						modifiers: [Te],
 						children: /* @__PURE__ */ g("table", {
-							ref: U,
-							className: `${Le} ${Re} ${ze}`,
+							ref: Ve,
+							className: e(Xe, Ze, Qe),
 							style: {
 								tableLayout: "fixed",
 								minWidth: "100%",
-								width: `${Ve}px`
+								width: `${et}px`
 							},
 							children: [
-								/* @__PURE__ */ g("colgroup", { children: [E && D && /* @__PURE__ */ h("col", { style: { width: "48px" } }), Y.map((e) => /* @__PURE__ */ h("col", {
+								/* @__PURE__ */ g("colgroup", { children: [E && D && /* @__PURE__ */ h("col", { style: { width: "48px" } }), q.map((e) => /* @__PURE__ */ h("col", {
 									"data-col-key": e.key,
-									style: { width: Z(e.key, e.width) }
+									style: { width: Y(e.key, e.width) }
 								}, e.key))] }),
 								/* @__PURE__ */ g("thead", {
-									ref: G,
-									className: se(),
+									ref: He,
+									className: fe(),
 									style: {
-										position: M ? "sticky" : "relative",
-										top: M ? 0 : void 0,
-										zIndex: M ? 10 : void 0
+										position: N ? "sticky" : "relative",
+										top: N ? 0 : void 0,
+										zIndex: N ? 20 : void 0
 									},
 									children: [/* @__PURE__ */ g("tr", { children: [E && D && /* @__PURE__ */ h("th", {
-										rowSpan: X ? 2 : 1,
-										className: `${d()} ${c("center")} w-12 px-0`,
+										rowSpan: J ? 2 : 1,
+										className: e(d(), c("center"), "w-12 px-0"),
 										children: /* @__PURE__ */ h("div", {
 											className: "flex items-center justify-center",
-											children: /* @__PURE__ */ h(n, {
-												checked: Ge,
-												onChange: () => Ke(),
+											children: /* @__PURE__ */ h(r, {
+												checked: rt,
+												onChange: () => it(),
 												ariaLabel: "전체 선택"
 											})
 										})
-									}), /* @__PURE__ */ h(ge, {
-										items: J.map((e) => e.key),
-										strategy: ve,
-										children: J.map((t) => {
-											if (t.kind === "group") return /* @__PURE__ */ g(s, {
-												id: t.key,
-												disabled: !K,
+									}), /* @__PURE__ */ h(xe, {
+										items: K.map((e) => e.key),
+										strategy: Ce,
+										children: K.map((n) => {
+											if (n.kind === "group") return /* @__PURE__ */ g(s, {
+												id: n.key,
+												disabled: !W,
 												as: "th",
-												colSpan: t.leafColumns.length,
-												className: `${d()} ${c("center")} group/header-cell ${t.hideOnMobile ? "hidden md:table-cell" : ""} relative`,
-												children: [K && /* @__PURE__ */ h("span", {
-													className: "absolute left-0.5 top-1/2 -translate-y-1/2 text-text-tertiary opacity-0 transition-opacity group-hover/header-cell:opacity-100",
+												colSpan: n.leafColumns.length,
+												className: e(d(), c("center"), "group/header-cell relative", n.hideOnMobile && "hidden md:table-cell"),
+												children: [W && /* @__PURE__ */ h("span", {
+													className: "absolute left-0.5 top-1/2 -translate-y-1/2 text-fg-subtle opacity-0 transition-opacity group-hover/header-cell:opacity-100",
 													"aria-hidden": "true",
-													children: /* @__PURE__ */ h(e, { className: "h-3.5 w-3.5" })
+													children: /* @__PURE__ */ h(t, { className: "h-3.5 w-3.5" })
 												}), /* @__PURE__ */ h("div", {
 													className: "flex items-center justify-center w-full pr-1 pl-3 select-none",
-													children: /* @__PURE__ */ h("span", { children: t.header })
+													children: /* @__PURE__ */ h("span", { children: n.header })
 												})]
-											}, t.key);
-											let n = t.leafColumns[0], r = !K || n.excludeFromPreset === !0;
+											}, n.key);
+											let r = n.leafColumns[0], i = !W || r.excludeFromPreset === !0;
 											return /* @__PURE__ */ g(s, {
-												id: n.key,
-												disabled: r,
+												id: r.key,
+												disabled: i,
 												as: "th",
-												rowSpan: X ? 2 : 1,
-												className: `${d()} ${c("center")} group/header-cell ${n.sticky ? "sticky left-0 z-20 bg-bg-base-secondary" : ""} ${n.hideOnMobile ? "hidden md:table-cell" : ""} relative`,
+												"aria-sort": ze(r),
+												hasSortButton: V(r),
+												rowSpan: J ? 2 : 1,
+												className: e(d(), c("center"), "group/header-cell relative", r.sticky && "sticky left-0 z-20 bg-bg-table-header", r.hideOnMobile && "hidden md:table-cell"),
 												style: {
-													width: Z(n.key, n.width),
-													minWidth: n.minWidth || 50
+													width: Y(r.key, r.width),
+													minWidth: r.minWidth || 50
 												},
 												children: [
-													!r && /* @__PURE__ */ h("span", {
-														className: "absolute left-0.5 top-1/2 -translate-y-1/2 text-text-tertiary opacity-0 transition-opacity group-hover/header-cell:opacity-100",
+													!i && /* @__PURE__ */ h("span", {
+														className: "absolute left-0.5 top-1/2 -translate-y-1/2 text-fg-subtle opacity-0 transition-opacity group-hover/header-cell:opacity-100",
 														"aria-hidden": "true",
-														children: /* @__PURE__ */ h(e, { className: "h-3.5 w-3.5" })
+														children: /* @__PURE__ */ h(t, { className: "h-3.5 w-3.5" })
 													}),
 													/* @__PURE__ */ h("div", {
 														className: "flex items-center justify-center w-full pr-1 pl-3 select-none",
-														children: /* @__PURE__ */ h("span", { children: n.header })
+														children: Be(r)
 													}),
-													n.excludeFromPreset !== !0 && /* @__PURE__ */ h("div", {
+													r.excludeFromPreset !== !0 && /* @__PURE__ */ h("div", {
 														className: "group/resize absolute right-0 top-0 h-full w-3 cursor-col-resize z-50 flex items-center justify-center",
 														onPointerDown: (e) => e.stopPropagation(),
 														onMouseDown: (e) => {
-															e.preventDefault(), e.stopPropagation(), Pe(n.key, e);
+															e.preventDefault(), e.stopPropagation(), qe(r.key, e);
 														},
 														onDoubleClick: (e) => {
-															e.preventDefault(), e.stopPropagation(), Fe(n.key, e);
+															e.preventDefault(), e.stopPropagation(), Je(r.key, e);
 														},
 														onClick: (e) => {
 															e.preventDefault(), e.stopPropagation();
@@ -242,95 +257,96 @@ var be = ({ transform: e, draggingNodeRect: t, containerNodeRect: n }) => {
 														title: "드래그하여 너비 조절, 더블 클릭하여 자동 조절",
 														children: /* @__PURE__ */ h("span", {
 															"aria-hidden": "true",
-															className: "h-1/2 w-0.5 rounded-full bg-transparent transition-colors group-hover/header-cell:bg-text-tertiary group-hover/resize:!bg-primary-500 group-active/resize:!bg-primary-600"
+															className: "h-1/2 w-0.5 rounded-full bg-transparent transition-colors group-hover/header-cell:bg-border-default group-hover/resize:!bg-primary group-active/resize:!bg-primary-hover"
 														})
 													})
 												]
-											}, n.key);
+											}, r.key);
 										})
-									})] }), X && /* @__PURE__ */ h("tr", { children: J.filter((e) => e.kind === "group").flatMap((e) => e.leafColumns).map((e) => /* @__PURE__ */ h("th", {
-										className: `${d()} ${c(e.align ?? "center")} ${e.hideOnMobile ? "hidden md:table-cell" : ""}`,
+									})] }), J && /* @__PURE__ */ h("tr", { children: K.filter((e) => e.kind === "group").flatMap((e) => e.leafColumns).map((t) => /* @__PURE__ */ h("th", {
+										"aria-sort": ze(t),
+										className: e(d(), c(t.align ?? "center"), t.hideOnMobile && "hidden md:table-cell"),
 										style: {
-											width: Z(e.key, e.width),
-											minWidth: e.minWidth || 50
+											width: Y(t.key, t.width),
+											minWidth: t.minWidth || 50
 										},
 										children: /* @__PURE__ */ h("div", {
 											className: "flex items-center justify-center w-full pr-1 pl-3 select-none",
-											children: /* @__PURE__ */ h("span", { children: e.header })
+											children: Be(t)
 										})
-									}, e.key)) })]
+									}, t.key)) })]
 								}),
 								/* @__PURE__ */ g("tbody", {
-									ref: Ae,
-									children: [H.map((e, t) => {
-										let r = Q(e);
+									ref: Ue,
+									children: [H.map((t, n) => {
+										let i = Z(t);
 										return /* @__PURE__ */ g("tr", {
-											className: Je(e, t),
-											onClick: () => C?.(e, t),
+											className: at(t, n),
+											onClick: () => C?.(t, n),
 											style: x ? { height: `${x}px` } : void 0,
 											children: [E && D && /* @__PURE__ */ h("td", {
-												className: `${u()} ${c("center")} w-12 select-none`,
+												className: e(u(), c("center"), "w-12 select-none"),
 												onClick: (e) => e.stopPropagation(),
-												onMouseDown: $ ? (e) => {
-													e.preventDefault(), qe.onRowMouseDown(t);
+												onMouseDown: Q ? (e) => {
+													e.preventDefault(), $.onRowMouseDown(n);
 												} : void 0,
-												onMouseEnter: $ ? () => qe.onRowMouseEnter(t) : void 0,
+												onMouseEnter: Q ? () => $.onRowMouseEnter(n) : void 0,
 												children: /* @__PURE__ */ h("div", {
 													className: "flex items-center justify-center",
-													children: /* @__PURE__ */ h(n, {
-														checked: r,
-														onChange: (t) => T?.(e, t),
-														pointerEventsNone: $,
+													children: /* @__PURE__ */ h(r, {
+														checked: i,
+														onChange: (e) => T?.(t, e),
+														pointerEventsNone: Q,
 														ariaLabel: "행 선택"
 													})
 												})
-											}), Y.map((t) => {
-												let n = t.accessor ? t.accessor(e) : e[t.key];
+											}), q.map((n) => {
+												let r = n.accessor ? n.accessor(t) : t[n.key];
 												return /* @__PURE__ */ h("td", {
-													className: `${u()} ${c(t.align)} ${t.sticky ? "sticky left-0 z-10 bg-inherit" : ""} ${t.hideOnMobile ? "hidden md:table-cell" : ""}`,
+													className: e(u(), c(n.align), n.sticky && "sticky left-0 z-10 bg-inherit", n.hideOnMobile && "hidden md:table-cell"),
 													style: {
-														width: Z(t.key, t.width),
-														minWidth: t.minWidth || 50,
+														width: Y(n.key, n.width),
+														minWidth: n.minWidth || 50,
 														...x ? {
 															height: `${x}px`,
 															maxHeight: `${x}px`,
 															overflow: "hidden"
 														} : {}
 													},
-													children: n
-												}, t.key);
+													children: r
+												}, n.key);
 											})]
-										}, t);
-									}), I && Array.from({ length: Ue }).map((e, t) => {
-										let n = H.length + t, r = x ?? We ?? void 0;
+										}, n);
+									}), L && Array.from({ length: tt }).map((t, n) => {
+										let r = H.length + n, i = x ?? nt ?? void 0;
 										return /* @__PURE__ */ g("tr", {
 											"data-empty-row": !0,
 											"aria-hidden": "true",
-											className: l(n),
-											style: r ? { height: `${r}px` } : void 0,
+											className: l(r),
+											style: i ? { height: `${i}px` } : void 0,
 											children: [E && D && /* @__PURE__ */ h("td", {
-												className: `${u()} w-12`,
-												style: r ? { height: `${r}px` } : void 0
-											}), Y.map((e) => /* @__PURE__ */ h("td", {
-												className: `${u()} ${e.hideOnMobile ? "hidden md:table-cell" : ""}`,
+												className: e(u(), "w-12"),
+												style: i ? { height: `${i}px` } : void 0
+											}), q.map((t) => /* @__PURE__ */ h("td", {
+												className: e(u(), t.hideOnMobile && "hidden md:table-cell"),
 												style: {
-													width: Z(e.key, e.width),
-													minWidth: e.minWidth || 50,
-													...r ? { height: `${r}px` } : {}
+													width: Y(t.key, t.width),
+													minWidth: t.minWidth || 50,
+													...i ? { height: `${i}px` } : {}
 												}
-											}, e.key))]
-										}, `empty-${t}`);
+											}, t.key))]
+										}, `empty-${n}`);
 									})]
 								})
 							]
 						})
 					})
 				})]
-			}), Oe ?? (L === void 0 ? null : /* @__PURE__ */ h("div", {
-				className: "flex justify-end shrink-0 text-sm text-neutral-600 dark:text-neutral-300",
+			}), Pe ?? (R === void 0 ? null : /* @__PURE__ */ h("div", {
+				className: "flex justify-end shrink-0 text-sm text-fg-muted",
 				children: /* @__PURE__ */ g("span", { children: [
 					"총 ",
-					L.toLocaleString(),
+					R.toLocaleString(),
 					"건"
 				] })
 			}))]

package/dist/{src/components → components}/table/types.d.ts

@@ -60,12 +60,11 @@ export interface TableColumn<T> {
      */
     sortable?: boolean;
     /**
-     * 컬럼 정렬 방향
-     * @default null
+     * @deprecated 무시됨. 정렬은 Table의 enableSorting/serverSideSorting과 useTableSort로 설정한다.
      */
     sortDirection?: SortDirection;
     /**
-     * 컬럼 정렬 변경 콜백
+     * @deprecated 무시됨. 정렬은 Table의 enableSorting/serverSideSorting과 useTableSort로 설정한다.
      */
     onSort?: (direction: SortDirection) => void;
     /**
@@ -206,10 +205,18 @@ export interface TableCommonProps<T> {
      */
     getRowId?: (row: T) => string | number;
     /**
-     * 정렬 사용 여부 (클라이언트 사이드 정렬)
+     * 정렬 사용 여부 (클라이언트 사이드 정렬). 전달된 현재 페이지 데이터만 정렬한다.
+     * 서버 페이지네이션이면 serverSideSorting을 사용하고, 정렬 변경 시 페이지 초기화는 호출부에서 처리한다.
      * @default false
      */
     enableSorting?: boolean;
+    /** 정렬 순서. 기본 tri(오름차순 → 내림차순 → 해제), toggle은 두 방향만 순환한다. */
+    sortCycle?: "tri" | "toggle";
+    /**
+     * 정렬 버튼 이름을 지정한다. 기본값은 헤더 텍스트이며 정렬 상태는 헤더의 aria-sort로 전달한다.
+     * 보이는 헤더 텍스트가 있으면 반환하는 이름에 그 텍스트를 포함한다(WCAG 2.5.3).
+     */
+    formatSortLabel?: (column: TableColumn<T>, current: SortDirection, next: SortDirection) => string;
     /**
      * 서버 사이드 정렬 사용 여부
      * @default false