@ncds/ui-admin 1.8.11 → 1.8.12

package/dist/temp/src/components/data-display/data-grid/DataGrid.js

@@ -19,7 +19,7 @@ const ActionBar = ({ children, className, position = 'top', align = 'space-betwe
         'ncua-data-grid__action-bar--space-between': align === 'space-between',
     }), ...rest, children: children }));
 ActionBar.displayName = 'DataGrid.ActionBar';
-const DataGridTable = forwardRef(({ children, className, type = 'horizontal', fixedHeader, maxHeight, hoverable, selectable, horizontalScroll, minWidth, }, ref) => (_jsx("div", { ref: ref, className: classNames('ncua-data-grid__table', className), children: _jsx(NcuaTable, { className: "ncua-table--in-data-grid", type: type, fixedHeader: fixedHeader, maxHeight: maxHeight, hoverable: hoverable, selectable: selectable, horizontalScroll: horizontalScroll, minWidth: minWidth, children: children }) })));
+const DataGridTable = forwardRef(({ children, className, type = 'horizontal', fixedHeader, maxHeight, hoverable, selectable, horizontalScroll, minWidth, draggable, }, ref) => (_jsx("div", { ref: ref, className: classNames('ncua-data-grid__table', className), children: _jsx(NcuaTable, { className: "ncua-table--in-data-grid", type: type, fixedHeader: fixedHeader, maxHeight: maxHeight, hoverable: hoverable, selectable: selectable, horizontalScroll: horizontalScroll, minWidth: minWidth, draggable: draggable, children: children }) })));
 DataGridTable.displayName = 'DataGrid.Table';
 const Pagination = ({ children, className, ...rest }) => (_jsx("div", { className: classNames('ncua-data-grid__pagination', className), ...rest, children: children }));
 Pagination.displayName = 'DataGrid.Pagination';

package/dist/temp/src/components/data-display/data-grid/DataGrid.types.d.ts

@@ -36,6 +36,11 @@ export type DataGridTableProps = {
     horizontalScroll?: boolean;
     /** 가로 스크롤 트리거 임계 너비. horizontalScroll=true 일 때만 의미가 있다. */
     minWidth?: string | number;
+    /**
+     * 행 드래그앤드롭 활성화. Table.Row에 dragId, Table.Body에 onRowDrop,
+     * 헤더에 Table.DragHeaderCell, 각 행에 Table.DragCell을 함께 사용한다.
+     */
+    draggable?: boolean;
 };
 export type DataGridPaginationProps = ComponentProps<'div'> & {
     children: ReactNode;

package/dist/temp/src/components/data-display/table/Table.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
-import type { SortDirection, TableBodyProps, TableColGroupProps, TableEmptyProps, TableFooterProps, TableHeaderProps, TablePaginationProps } from './types';
-export declare const Table: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+import type { SortDirection, TableBodyProps, TableColGroupProps, TableDragCellProps, TableDragHeaderCellProps, TableEmptyProps, TableFooterProps, TableHeaderProps, TablePaginationProps } from './types';
+export declare const Table: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "draggable" | "ref"> & {
     type?: import("./types").TableType | undefined;
     fixedHeader?: boolean | undefined;
     maxHeight?: string | number | undefined;
@@ -8,6 +8,7 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<impor
     selectable?: boolean | undefined;
     horizontalScroll?: boolean | undefined;
     minWidth?: string | number | undefined;
+    draggable?: boolean | undefined;
     children: ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>> & {
     Header: {
@@ -15,13 +16,22 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<impor
         displayName: string;
     };
     Body: {
-        ({ children, className }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, onRowDrop }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Row: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
         selected?: boolean | undefined;
         status?: import("./types").RowStatus | undefined;
+        dragId?: string | undefined;
     } & import("react").RefAttributes<HTMLTableRowElement>>;
+    DragHeaderCell: {
+        ({ className, children }: TableDragHeaderCellProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    DragCell: {
+        ({ disabled, className, children }: TableDragCellProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
     HeaderCell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & {
         sortDirection?: SortDirection | undefined;
         onSort?: (() => void) | undefined;
@@ -48,4 +58,4 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<impor
         displayName: string;
     };
 };
-export type { RowStatus, SortDirection, TableBodyProps, TableCellProps, TableColGroupProps, TableEmptyProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TablePaginationProps, TableProps, TableRowProps, TableType, } from './types';
+export type { RowStatus, SortDirection, TableBodyProps, TableCellProps, TableColGroupProps, TableDragCellProps, TableDragHeaderCellProps, TableEmptyProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TablePaginationProps, TableProps, TableRowProps, TableType, } from './types';

package/dist/temp/src/components/data-display/table/Table.js

@@ -1,8 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown, ChevronSelectorVertical, ChevronUp } from '@ncds/ui-admin-icon';
+import { dropTargetForElements, draggable as makeDraggable, monitorForElements, } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import { attachClosestEdge, extractClosestEdge, } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { ChevronDown, ChevronSelectorVertical, ChevronUp, DotsGrid02 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
-import { Children, forwardRef, useRef, } from 'react';
+import { Children, forwardRef, useCallback, useContext, useEffect, useRef, useState, } from 'react';
 import { FloatingProvider } from '../../../contexts/FloatingContext';
+import { RowDndContext, TableDndContext } from './dnd-context';
+import { buildDragPreview, PREVIEW_BADGE_SIZE, TABLE_DND_ID_RADIX, TABLE_DND_ID_SLICE_END, TABLE_DND_ID_SLICE_START, } from './dnd-preview';
 import { TABLE_HEADER_HEIGHT, useTableHorizontalScrollbar, useTableVerticalScrollbar } from './useTableScrollbars';
 // 가로 스크롤 디자인 기준 폭 — 14인치 모니터 + LNB 고려한 디자인 권장 너비
 const DEFAULT_HORIZONTAL_SCROLL_MIN_WIDTH = 1140;
@@ -29,14 +35,145 @@ const ARIA_SORT_MAP = {
 // ──────────────────────────────────────────────
 const Header = ({ children, className }) => (_jsx("thead", { className: classNames('ncua-table__header', className), children: children }));
 Header.displayName = 'Table.Header';
-const Body = ({ children, className }) => (_jsx("tbody", { className: classNames('ncua-table__body', className), children: children }));
+const Body = ({ children, className, onRowDrop }) => {
+    const { tableId } = useContext(TableDndContext);
+    // onRowDrop 참조를 ref로 유지 — 콜백이 매 렌더마다 재생성되어도 effect가 재구독하지 않도록
+    const onRowDropRef = useRef(onRowDrop);
+    onRowDropRef.current = onRowDrop;
+    useEffect(() => {
+        return monitorForElements({
+            canMonitor: ({ source }) => source.data.tableId === tableId,
+            onDrop: ({ source, location }) => {
+                if (!onRowDropRef.current)
+                    return;
+                const target = location.current.dropTargets[0];
+                if (!target)
+                    return;
+                const fromId = source.data.id;
+                const toId = target.data.id;
+                if (typeof fromId !== 'string' || typeof toId !== 'string' || fromId === toId)
+                    return;
+                const edge = extractClosestEdge(target.data);
+                onRowDropRef.current(fromId, toId, edge === 'bottom' ? 'bottom' : 'top');
+            },
+        });
+    }, [tableId]);
+    return _jsx("tbody", { className: classNames('ncua-table__body', className), children: children });
+};
 Body.displayName = 'Table.Body';
-const Row = forwardRef(({ children, className, selected, status, ...rest }, ref) => (_jsx("tr", { ref: ref, className: classNames('ncua-table__row', className, {
-        'ncua-table__row--selected': selected,
-        'ncua-table__row--warning': status === 'warning',
-        'ncua-table__row--error': status === 'error',
-    }), ...rest, children: children })));
+const Row = forwardRef(({ children, className, selected, status, dragId, ...rest }, forwardedRef) => {
+    const { isDraggable, tableId } = useContext(TableDndContext);
+    const internalRef = useRef(null);
+    const [closestEdge, setClosestEdge] = useState(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const setRef = useCallback((el) => {
+        internalRef.current = el;
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(el);
+        }
+        else if (forwardedRef) {
+            forwardedRef.current = el;
+        }
+    }, [forwardedRef]);
+    useEffect(() => {
+        if (!isDraggable || !dragId || !internalRef.current)
+            return;
+        return dropTargetForElements({
+            element: internalRef.current,
+            getData: ({ input, element }) => attachClosestEdge({ id: dragId, tableId }, { input, element, allowedEdges: ['top', 'bottom'] }),
+            onDragEnter: ({ self, source }) => {
+                if (source.data.id === dragId)
+                    return;
+                const edge = extractClosestEdge(self.data);
+                setClosestEdge(edge === 'bottom' && internalRef.current?.nextElementSibling ? null : edge);
+            },
+            onDrag: ({ self, source }) => {
+                if (source.data.id === dragId)
+                    return;
+                const edge = extractClosestEdge(self.data);
+                setClosestEdge(edge === 'bottom' && internalRef.current?.nextElementSibling ? null : edge);
+            },
+            onDragLeave: () => setClosestEdge(null),
+            onDrop: () => setClosestEdge(null),
+        });
+    }, [isDraggable, dragId, tableId]);
+    return (_jsx(RowDndContext.Provider, { value: { dragId, setIsDragging }, children: _jsx("tr", { ref: setRef, "data-draggable-id": dragId, className: classNames('ncua-table__row', className, {
+                'ncua-table__row--selected': selected,
+                'ncua-table__row--warning': status === 'warning',
+                'ncua-table__row--error': status === 'error',
+                'ncua-table__row--drag-over-top': closestEdge === 'top',
+                'ncua-table__row--drag-over-bottom': closestEdge === 'bottom',
+                'is-dragging': isDragging,
+            }), ...rest, children: children }) }));
+});
 Row.displayName = 'Table.Row';
+const DragHeaderCell = ({ className, children }) => (_jsx("th", { className: classNames('ncua-table__header-cell', 'ncua-table__drag-header-cell', className), children: _jsxs("span", { className: "ncua-table__drag-cell-inner", children: [_jsx("span", { className: "ncua-table__drag-header-icon", "aria-hidden": "true", children: _jsx(DotsGrid02, { width: 16, height: 16 }) }), children] }) }));
+DragHeaderCell.displayName = 'Table.DragHeaderCell';
+const DragCell = ({ disabled, className, children }) => {
+    const { isDraggable, tableId } = useContext(TableDndContext);
+    const { dragId, setIsDragging } = useContext(RowDndContext);
+    const handleRef = useRef(null);
+    useEffect(() => {
+        if (!isDraggable || !dragId || !handleRef.current || disabled)
+            return;
+        let overlay = null;
+        let removePointerMove = null;
+        let pendingPreview = null;
+        return makeDraggable({
+            element: handleRef.current,
+            getInitialData: () => ({ id: dragId, tableId }),
+            onGenerateDragPreview: ({ nativeSetDragImage, location }) => {
+                if (!handleRef.current)
+                    return;
+                const rowEl = handleRef.current.closest('tr');
+                if (!rowEl)
+                    return;
+                disableNativeDragPreview({ nativeSetDragImage });
+                const rowRect = rowEl.getBoundingClientRect();
+                const badgeHalf = PREVIEW_BADGE_SIZE / 2;
+                const offsetX = Math.round(location.initial.input.clientX - rowRect.left) + badgeHalf;
+                const offsetY = Math.round(location.initial.input.clientY - rowRect.top) + badgeHalf;
+                const isSelected = rowEl.classList.contains('ncua-table__row--selected');
+                const bodyEl = rowEl.closest('.ncua-table__body');
+                const selectedRows = isSelected && bodyEl ? Array.from(bodyEl.querySelectorAll('.ncua-table__row--selected')) : [];
+                pendingPreview = {
+                    rows: selectedRows.length > 1 ? selectedRows : [rowEl],
+                    rowRect,
+                    offsetX,
+                    offsetY,
+                };
+            },
+            onDragStart: ({ location }) => {
+                setIsDragging(true);
+                if (!pendingPreview)
+                    return;
+                const { rows, rowRect, offsetX, offsetY } = pendingPreview;
+                overlay = buildDragPreview(rows, rowRect);
+                overlay.style.left = `${Math.round(location.initial.input.clientX) - offsetX}px`;
+                overlay.style.top = `${Math.round(location.initial.input.clientY) - offsetY}px`;
+                document.body.appendChild(overlay);
+                const onDragOver = (e) => {
+                    if (!overlay)
+                        return;
+                    overlay.style.left = `${e.clientX - offsetX}px`;
+                    overlay.style.top = `${e.clientY - offsetY}px`;
+                };
+                document.addEventListener('dragover', onDragOver);
+                removePointerMove = () => document.removeEventListener('dragover', onDragOver);
+            },
+            onDrop: () => {
+                setIsDragging(false);
+                removePointerMove?.();
+                removePointerMove = null;
+                overlay?.remove();
+                overlay = null;
+                pendingPreview = null;
+            },
+        });
+    }, [isDraggable, dragId, tableId, disabled, setIsDragging]);
+    return (_jsx("td", { className: classNames('ncua-table__drag-cell', className), children: _jsxs("span", { className: "ncua-table__drag-cell-inner", children: [isDraggable && (_jsx("button", { ref: handleRef, type: "button", className: "ncua-table__drag-handle", "aria-label": "\uD589 \uC21C\uC11C \uBCC0\uACBD", disabled: disabled, children: _jsx(DotsGrid02, {}) })), children] }) }));
+};
+DragCell.displayName = 'Table.DragCell';
 const HeaderCell = forwardRef(({ children, className, sortDirection, onSort, width, minWidth, style, ...rest }, ref) => {
     const isSortable = sortDirection !== undefined && onSort !== undefined;
     const SortIcon = isSortable ? SORT_ICONS[sortDirection] : undefined;
@@ -64,9 +201,14 @@ const ColGroup = ({ widths, minWidths }) => {
             return `${width}px`;
         return width;
     };
-    return (_jsx("colgroup", { children: widths.map((width, index) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: colgroup columns never reorder or change
-        _jsx("col", { style: { width: resolveColWidth(width), minWidth: resolveColWidth(minWidths?.[index]) } }, index))) }));
+    return (_jsx("colgroup", { children: widths.map((width, index) => {
+            const colStyle = {
+                width: resolveColWidth(width),
+                minWidth: resolveColWidth(minWidths?.[index]),
+            };
+            // biome-ignore lint/suspicious/noArrayIndexKey: colgroup columns never reorder or change
+            return _jsx("col", { style: colStyle }, index);
+        }) }));
 };
 ColGroup.displayName = 'Table.ColGroup';
 const Empty = ({ colSpan, children }) => (_jsx("tr", { children: _jsx("td", { colSpan: colSpan, className: "ncua-table__empty", role: "status", "aria-live": "polite", children: children || '등록된 게시물이 없습니다.' }) }));
@@ -108,13 +250,17 @@ const sortChildren = (children) => {
 // ──────────────────────────────────────────────
 // Main Table component
 // ──────────────────────────────────────────────
-const TableComponent = forwardRef(({ type = 'horizontal', fixedHeader = false, maxHeight, hoverable = true, selectable = false, horizontalScroll = false, minWidth, children, className, ...rest }, ref) => {
+const TableComponent = forwardRef(({ type = 'horizontal', fixedHeader = false, maxHeight, hoverable = true, selectable = false, horizontalScroll = false, minWidth, draggable = false, children, className, ...rest }, ref) => {
+    const tableIdRef = useRef(`ncua-table-${Math.random().toString(TABLE_DND_ID_RADIX).slice(TABLE_DND_ID_SLICE_START, TABLE_DND_ID_SLICE_END)}`);
+    const tableId = tableIdRef.current;
+    const effectiveDraggable = draggable && type === 'horizontal';
     const tableClasses = classNames('ncua-table', className, {
         'ncua-table--horizontal': type === 'horizontal',
         'ncua-table--vertical': type === 'vertical',
         'ncua-table--fixed-header': fixedHeader,
         'ncua-table--hoverable': hoverable && type === 'horizontal',
         'ncua-table--selectable': selectable,
+        'ncua-table--draggable': effectiveDraggable,
     });
     const { headerContent, colGroupContent, tableContent, footerContent, paginationContent } = sortChildren(children);
     const scrollStyle = fixedHeader && maxHeight
@@ -148,12 +294,22 @@ const TableComponent = forwardRef(({ type = 'horizontal', fixedHeader = false, m
         hScrollbarRef,
         hThumbRef,
     });
+    // fixedHeader 모드에서 드래그 시 자동 스크롤
+    useEffect(() => {
+        if (!effectiveDraggable || !fixedScrollEnabled || !scrollContainerRef.current)
+            return;
+        return autoScrollForElements({ element: scrollContainerRef.current });
+    }, [effectiveDraggable, fixedScrollEnabled]);
     // <colgroup> + <thead> + <tbody> 묶음 — fixed-header 분기와 horizontalScroll 분기 모두에서 재사용
     const renderTable = () => (_jsxs("table", { className: "ncua-table__table", role: "table", children: [colGroupContent, headerContent, tableContent] }));
     // fixed-header 시 scroll-area + scrollbar 래핑, 아니면 <table> 그대로.
     // withScrollbar=false 이면 scrollbar를 제외 — horizontalScroll 분기에서 scrollbar를
     // h-scroll-container 형제 위치에 별도 렌더해 가로 스크롤 시 viewport 우측에 자연 고정.
     const renderScrollableArea = (includeVerticalScrollbar = true) => fixedScrollEnabled ? (_jsxs("div", { ref: scrollAreaRef, className: "ncua-table__scroll-area", children: [_jsx("div", { ref: scrollContainerRef, className: "ncua-table__scroll-container", style: scrollStyle, children: renderTable() }), includeVerticalScrollbar && (_jsx("div", { ref: scrollbarRef, className: "ncua-table__scrollbar", "aria-hidden": "true", children: _jsx("div", { ref: thumbRef, className: "ncua-table__scrollbar-thumb", onMouseDown: handleThumbMouseDown }) }))] })) : (renderTable());
+    const dndContextValue = {
+        isDraggable: effectiveDraggable,
+        tableId,
+    };
     // horizontalScroll=true 시 외곽 wrapper + FloatingProvider 부착.
     // 핵심 — __h-scroll-container 는 <table>(또는 scroll-area) 만 감싸고, footer/pagination 은
     // 그 바깥에서 항상 고정 위치. 세로 스크롤바는 h-scroll-container 형제로 배치되어
@@ -165,9 +321,9 @@ const TableComponent = forwardRef(({ type = 'horizontal', fixedHeader = false, m
         const innerStyle = {
             '--ncua-table-min-width': typeof resolvedMinWidth === 'number' ? `${resolvedMinWidth}px` : resolvedMinWidth,
         };
-        return (_jsx(FloatingProvider, { value: FLOATING_PORTAL_VALUE, children: _jsxs("div", { ref: ref, className: "ncua-table-wrapper", style: WRAPPER_STYLE, children: [_jsxs("div", { className: tableClasses, ...rest, children: [_jsxs("div", { ref: hScrollContainerRef, className: "ncua-table__h-scroll-container", children: [_jsx("div", { className: "ncua-table__h-scroll-inner", style: innerStyle, children: renderScrollableArea(false) }), _jsx("div", { ref: hScrollbarRef, className: "ncua-table__h-scrollbar", "aria-hidden": "true", children: _jsx("div", { ref: hThumbRef, className: "ncua-table__h-scrollbar-thumb", onMouseDown: handleHThumbMouseDown }) })] }), fixedScrollEnabled && (_jsx("div", { ref: scrollbarRef, className: "ncua-table__scrollbar", "aria-hidden": "true", children: _jsx("div", { ref: thumbRef, className: "ncua-table__scrollbar-thumb", onMouseDown: handleThumbMouseDown }) })), footerContent] }), paginationContent] }) }));
+        return (_jsx(TableDndContext.Provider, { value: dndContextValue, children: _jsx(FloatingProvider, { value: FLOATING_PORTAL_VALUE, children: _jsxs("div", { ref: ref, className: "ncua-table-wrapper", style: WRAPPER_STYLE, children: [_jsxs("div", { className: tableClasses, ...rest, children: [_jsxs("div", { ref: hScrollContainerRef, className: "ncua-table__h-scroll-container", children: [_jsx("div", { className: "ncua-table__h-scroll-inner", style: innerStyle, children: renderScrollableArea(false) }), _jsx("div", { ref: hScrollbarRef, className: "ncua-table__h-scrollbar", "aria-hidden": "true", children: _jsx("div", { ref: hThumbRef, className: "ncua-table__h-scrollbar-thumb", onMouseDown: handleHThumbMouseDown }) })] }), fixedScrollEnabled && (_jsx("div", { ref: scrollbarRef, className: "ncua-table__scrollbar", "aria-hidden": "true", children: _jsx("div", { ref: thumbRef, className: "ncua-table__scrollbar-thumb", onMouseDown: handleThumbMouseDown }) })), footerContent] }), paginationContent] }) }) }));
     }
-    return (_jsxs("div", { ref: ref, className: "ncua-table-wrapper", style: WRAPPER_STYLE, children: [_jsxs("div", { className: tableClasses, ...rest, children: [renderScrollableArea(), footerContent] }), paginationContent] }));
+    return (_jsx(TableDndContext.Provider, { value: dndContextValue, children: _jsxs("div", { ref: ref, className: "ncua-table-wrapper", style: WRAPPER_STYLE, children: [_jsxs("div", { className: tableClasses, ...rest, children: [renderScrollableArea(), footerContent] }), paginationContent] }) }));
 });
 TableComponent.displayName = 'Table';
 // ──────────────────────────────────────────────
@@ -177,6 +333,8 @@ export const Table = Object.assign(TableComponent, {
     Header,
     Body,
     Row,
+    DragHeaderCell,
+    DragCell,
     HeaderCell,
     Cell,
     Footer,

package/dist/temp/src/components/data-display/table/dnd-context.d.ts

@@ -0,0 +1,12 @@
+type TableDndContextValue = {
+    isDraggable: boolean;
+    tableId: string;
+};
+declare const TableDndContext: import("react").Context<TableDndContextValue>;
+type RowDndContextValue = {
+    dragId: string | undefined;
+    setIsDragging: (v: boolean) => void;
+};
+declare const RowDndContext: import("react").Context<RowDndContextValue>;
+export type { TableDndContextValue, RowDndContextValue };
+export { TableDndContext, RowDndContext };

package/dist/temp/src/components/data-display/table/dnd-context.js

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+const TableDndContext = createContext({
+    isDraggable: false,
+    tableId: '',
+});
+const RowDndContext = createContext({
+    dragId: undefined,
+    setIsDragging: (_v) => undefined,
+});
+export { TableDndContext, RowDndContext };

package/dist/temp/src/components/data-display/table/dnd-preview.d.ts

@@ -0,0 +1,6 @@
+declare const TABLE_DND_ID_RADIX = 36;
+declare const TABLE_DND_ID_SLICE_START = 2;
+declare const TABLE_DND_ID_SLICE_END = 9;
+declare const PREVIEW_BADGE_SIZE = 24;
+declare const buildDragPreview: (rows: HTMLElement[], rowRect: DOMRect) => HTMLDivElement;
+export { TABLE_DND_ID_RADIX, TABLE_DND_ID_SLICE_START, TABLE_DND_ID_SLICE_END, PREVIEW_BADGE_SIZE, buildDragPreview };

package/dist/temp/src/components/data-display/table/dnd-preview.js

@@ -0,0 +1,120 @@
+const TABLE_DND_ID_RADIX = 36;
+const TABLE_DND_ID_SLICE_START = 2;
+const TABLE_DND_ID_SLICE_END = 9;
+const PREVIEW_MAX_ROWS = 3;
+const PREVIEW_STACK_OFFSET = 5;
+const PREVIEW_MAX_STACK_OFFSET = PREVIEW_STACK_OFFSET * PREVIEW_MAX_ROWS;
+const PREVIEW_BADGE_SIZE = 24;
+const PREVIEW_BADGE_HALF = PREVIEW_BADGE_SIZE / 2;
+// hover의 color-mix 반투명 배경을 우회해 불투명 RGB 배경색을 클래스 기반으로 직접 결정
+const getRowBackground = (rowEl) => {
+    const resolveCssVar = (name) => getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+    const isSelected = rowEl.classList.contains('ncua-table__row--selected');
+    const isError = rowEl.classList.contains('ncua-table__row--error');
+    const isWarning = rowEl.classList.contains('ncua-table__row--warning');
+    if (isSelected && isError)
+        return resolveCssVar('--primary-red-50');
+    if (isSelected && isWarning)
+        return resolveCssVar('--orange-50');
+    if (isSelected)
+        return resolveCssVar('--gray-50');
+    return resolveCssVar('--base-white');
+};
+// cloneNode는 HTML attribute만 복사하므로 checkbox.checked를 직접 동기화
+const cloneRowWithState = (sourceRow) => {
+    const clone = sourceRow.cloneNode(true);
+    const srcInputs = sourceRow.querySelectorAll('input[type="checkbox"]');
+    const clnInputs = clone.querySelectorAll('input[type="checkbox"]');
+    srcInputs.forEach((src, i) => {
+        const cln = clnInputs[i];
+        if (cln)
+            cln.checked = src.checked;
+    });
+    clone.style.backgroundColor = getRowBackground(sourceRow);
+    // 열 너비는 테이블 레이아웃 컨텍스트에서 결정되므로 직접 복사 — ceil로 올림해 프리뷰 셀이 실제보다 좁아지지 않게 함
+    const srcCells = Array.from(sourceRow.querySelectorAll('td, th'));
+    const clnCells = Array.from(clone.querySelectorAll('td, th'));
+    srcCells.forEach((src, i) => {
+        const cln = clnCells[i];
+        if (!cln)
+            return;
+        const w = `${Math.ceil(src.getBoundingClientRect().width)}px`;
+        cln.style.width = w;
+        cln.style.minWidth = w;
+        cln.style.maxWidth = w;
+    });
+    return clone;
+};
+const buildCountBadge = (count) => {
+    const badge = document.createElement('div');
+    badge.className = 'ncua-table-dnd-preview__badge';
+    badge.textContent = String(count);
+    return badge;
+};
+const buildSummaryCard = (rowRect) => {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'ncua-table-dnd-preview__summary';
+    Object.assign(wrapper.style, {
+        top: `${Math.round(PREVIEW_BADGE_HALF + PREVIEW_MAX_STACK_OFFSET)}px`,
+        left: `${Math.round(PREVIEW_BADGE_HALF + PREVIEW_MAX_STACK_OFFSET)}px`,
+        width: `${Math.round(rowRect.width) - PREVIEW_MAX_STACK_OFFSET}px`,
+        height: `${Math.round(rowRect.height)}px`,
+    });
+    return wrapper;
+};
+const buildRowCard = ({ row, cardLeft, cardTop, cardWidth, rowHeight, zIndex, parentTable, }) => {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'ncua-table-dnd-preview__card';
+    Object.assign(wrapper.style, {
+        zIndex: String(zIndex),
+        top: `${cardTop}px`,
+        left: `${cardLeft}px`,
+        width: `${cardWidth}px`,
+        height: `${rowHeight}px`,
+        backgroundColor: getRowBackground(row),
+    });
+    const table = document.createElement('table');
+    if (parentTable)
+        table.className = parentTable.className;
+    table.style.width = `${cardWidth}px`;
+    const tbody = document.createElement('tbody');
+    tbody.className = 'ncua-table__body';
+    tbody.appendChild(cloneRowWithState(row));
+    table.appendChild(tbody);
+    wrapper.appendChild(table);
+    return wrapper;
+};
+const buildDragPreview = (rows, rowRect) => {
+    const visibleCount = Math.min(rows.length, PREVIEW_MAX_ROWS);
+    const hasSummary = rows.length > visibleCount;
+    const totalCards = visibleCount + (hasSummary ? 1 : 0);
+    const isMulti = rows.length > 1;
+    const parentTable = rows[0]?.closest('table') ?? null;
+    const rowWidth = Math.round(rowRect.width);
+    const rowHeight = Math.round(rowRect.height);
+    const container = document.createElement('div');
+    container.className = 'ncua-table-dnd-preview';
+    Object.assign(container.style, {
+        width: `${PREVIEW_BADGE_HALF + rowWidth}px`,
+        height: `${PREVIEW_BADGE_HALF + rowHeight + PREVIEW_STACK_OFFSET * (totalCards - 1)}px`,
+    });
+    if (isMulti)
+        container.appendChild(buildCountBadge(rows.length));
+    if (hasSummary)
+        container.appendChild(buildSummaryCard(rowRect));
+    // 뒤쪽 행 카드부터 렌더해서 앞쪽이 위로 올라오게
+    for (let i = visibleCount - 1; i >= 0; i--) {
+        const stackShift = isMulti ? i * PREVIEW_STACK_OFFSET : 0;
+        container.appendChild(buildRowCard({
+            row: rows[i],
+            cardLeft: Math.round(PREVIEW_BADGE_HALF + stackShift),
+            cardTop: Math.round(PREVIEW_BADGE_HALF + stackShift),
+            cardWidth: rowWidth - stackShift,
+            rowHeight,
+            zIndex: visibleCount - i,
+            parentTable,
+        }));
+    }
+    return container;
+};
+export { TABLE_DND_ID_RADIX, TABLE_DND_ID_SLICE_START, TABLE_DND_ID_SLICE_END, PREVIEW_BADGE_SIZE, buildDragPreview };

package/dist/temp/src/components/data-display/table/types.d.ts

@@ -2,7 +2,7 @@ import type { ComponentProps, ReactNode } from 'react';
 export type TableType = 'horizontal' | 'vertical';
 export type SortDirection = 'asc' | 'desc' | 'none';
 export type RowStatus = 'warning' | 'error';
-export type TableProps = Omit<ComponentProps<'div'>, 'ref'> & {
+export type TableProps = Omit<ComponentProps<'div'>, 'ref' | 'draggable'> & {
     type?: TableType;
     fixedHeader?: boolean;
     maxHeight?: string | number;
@@ -19,6 +19,11 @@ export type TableProps = Omit<ComponentProps<'div'>, 'ref'> & {
      * 기본값은 1140 (14인치 모니터 + LNB 기준 디자인 권장 너비).
      */
     minWidth?: string | number;
+    /**
+     * 행 드래그앤드롭 활성화. Table.Row에 dragId, Table.Body에 onRowDrop,
+     * 헤더에 Table.DragHeaderCell, 각 행에 Table.DragCell을 함께 사용한다.
+     */
+    draggable?: boolean;
     children: ReactNode;
 };
 export type TableHeaderProps = {
@@ -28,10 +33,28 @@ export type TableHeaderProps = {
 export type TableBodyProps = {
     children: ReactNode;
     className?: string;
+    /**
+     * draggable=true 테이블에서 행이 재정렬될 때 호출된다.
+     * fromId → toId 로 이동, edge는 toId 행의 위(top)/아래(bottom) 삽입 위치.
+     */
+    onRowDrop?: (fromId: string, toId: string, edge: 'top' | 'bottom') => void;
 };
 export type TableRowProps = Omit<ComponentProps<'tr'>, 'ref'> & {
     selected?: boolean;
     status?: RowStatus;
+    /** 드래그앤드롭 식별자. draggable 테이블에서 필수. */
+    dragId?: string;
+};
+export type TableDragCellProps = {
+    disabled?: boolean;
+    className?: string;
+    /** 드래그 셀에 함께 배치할 콘텐츠 (예: CheckboxInput). 아이콘 우측 8px gap으로 배치된다. */
+    children?: ReactNode;
+};
+export type TableDragHeaderCellProps = {
+    className?: string;
+    /** 헤더 드래그 셀에 함께 배치할 콘텐츠 (예: 전체선택 CheckboxInput). 아이콘 우측 8px gap으로 배치된다. */
+    children?: ReactNode;
 };
 export type TableHeaderCellProps = Omit<ComponentProps<'th'>, 'ref'> & {
     sortDirection?: SortDirection;

package/dist/types/src/components/data-display/data-grid/DataGrid.types.d.ts

@@ -36,6 +36,11 @@ export type DataGridTableProps = {
     horizontalScroll?: boolean;
     /** 가로 스크롤 트리거 임계 너비. horizontalScroll=true 일 때만 의미가 있다. */
     minWidth?: string | number;
+    /**
+     * 행 드래그앤드롭 활성화. Table.Row에 dragId, Table.Body에 onRowDrop,
+     * 헤더에 Table.DragHeaderCell, 각 행에 Table.DragCell을 함께 사용한다.
+     */
+    draggable?: boolean;
 };
 export type DataGridPaginationProps = ComponentProps<'div'> & {
     children: ReactNode;

package/dist/types/src/components/data-display/table/Table.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
-import type { SortDirection, TableBodyProps, TableColGroupProps, TableEmptyProps, TableFooterProps, TableHeaderProps, TablePaginationProps } from './types';
-export declare const Table: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+import type { SortDirection, TableBodyProps, TableColGroupProps, TableDragCellProps, TableDragHeaderCellProps, TableEmptyProps, TableFooterProps, TableHeaderProps, TablePaginationProps } from './types';
+export declare const Table: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "draggable" | "ref"> & {
     type?: import("./types").TableType | undefined;
     fixedHeader?: boolean | undefined;
     maxHeight?: string | number | undefined;
@@ -8,6 +8,7 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<impor
     selectable?: boolean | undefined;
     horizontalScroll?: boolean | undefined;
     minWidth?: string | number | undefined;
+    draggable?: boolean | undefined;
     children: ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>> & {
     Header: {
@@ -15,13 +16,22 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<impor
         displayName: string;
     };
     Body: {
-        ({ children, className }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, onRowDrop }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Row: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
         selected?: boolean | undefined;
         status?: import("./types").RowStatus | undefined;
+        dragId?: string | undefined;
     } & import("react").RefAttributes<HTMLTableRowElement>>;
+    DragHeaderCell: {
+        ({ className, children }: TableDragHeaderCellProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    DragCell: {
+        ({ disabled, className, children }: TableDragCellProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
     HeaderCell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & {
         sortDirection?: SortDirection | undefined;
         onSort?: (() => void) | undefined;
@@ -48,4 +58,4 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<impor
         displayName: string;
     };
 };
-export type { RowStatus, SortDirection, TableBodyProps, TableCellProps, TableColGroupProps, TableEmptyProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TablePaginationProps, TableProps, TableRowProps, TableType, } from './types';
+export type { RowStatus, SortDirection, TableBodyProps, TableCellProps, TableColGroupProps, TableDragCellProps, TableDragHeaderCellProps, TableEmptyProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TablePaginationProps, TableProps, TableRowProps, TableType, } from './types';

package/dist/types/src/components/data-display/table/dnd-context.d.ts

@@ -0,0 +1,12 @@
+type TableDndContextValue = {
+    isDraggable: boolean;
+    tableId: string;
+};
+declare const TableDndContext: import("react").Context<TableDndContextValue>;
+type RowDndContextValue = {
+    dragId: string | undefined;
+    setIsDragging: (v: boolean) => void;
+};
+declare const RowDndContext: import("react").Context<RowDndContextValue>;
+export type { TableDndContextValue, RowDndContextValue };
+export { TableDndContext, RowDndContext };

package/dist/types/src/components/data-display/table/dnd-preview.d.ts

@@ -0,0 +1,6 @@
+declare const TABLE_DND_ID_RADIX = 36;
+declare const TABLE_DND_ID_SLICE_START = 2;
+declare const TABLE_DND_ID_SLICE_END = 9;
+declare const PREVIEW_BADGE_SIZE = 24;
+declare const buildDragPreview: (rows: HTMLElement[], rowRect: DOMRect) => HTMLDivElement;
+export { TABLE_DND_ID_RADIX, TABLE_DND_ID_SLICE_START, TABLE_DND_ID_SLICE_END, PREVIEW_BADGE_SIZE, buildDragPreview };