@ncds/ui-admin 1.8.11 → 1.8.12

package/dist/esm/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;
@@ -43,35 +49,254 @@ Header.displayName = 'Table.Header';
 const Body = _ref2 => {
   let {
     children,
-    className
+    className,
+    onRowDrop
   } = _ref2;
+  const {
+    tableId
+  } = useContext(TableDndContext);
+  // onRowDrop 참조를 ref로 유지 — 콜백이 매 렌더마다 재생성되어도 effect가 재구독하지 않도록
+  const onRowDropRef = useRef(onRowDrop);
+  onRowDropRef.current = onRowDrop;
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor: _ref3 => {
+        let {
+          source
+        } = _ref3;
+        return source.data.tableId === tableId;
+      },
+      onDrop: _ref4 => {
+        let {
+          source,
+          location
+        } = _ref4;
+        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 = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const Row = /*#__PURE__*/forwardRef((_ref5, forwardedRef) => {
   let {
     children,
     className,
     selected,
     status,
+    dragId,
     ...rest
-  } = _ref3;
-  return _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
+  } = _ref5;
+  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: _ref6 => {
+        let {
+          input,
+          element
+        } = _ref6;
+        return attachClosestEdge({
+          id: dragId,
+          tableId
+        }, {
+          input,
+          element,
+          allowedEdges: ['top', 'bottom']
+        });
+      },
+      onDragEnter: _ref7 => {
+        let {
+          self,
+          source
+        } = _ref7;
+        if (source.data.id === dragId) return;
+        const edge = extractClosestEdge(self.data);
+        setClosestEdge(edge === 'bottom' && internalRef.current?.nextElementSibling ? null : edge);
+      },
+      onDrag: _ref8 => {
+        let {
+          self,
+          source
+        } = _ref8;
+        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 HeaderCell = /*#__PURE__*/forwardRef((_ref4, ref) => {
+const DragHeaderCell = _ref9 => {
+  let {
+    className,
+    children
+  } = _ref9;
+  return _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 = _ref0 => {
+  let {
+    disabled,
+    className,
+    children
+  } = _ref0;
+  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: _ref1 => {
+        let {
+          nativeSetDragImage,
+          location
+        } = _ref1;
+        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: _ref10 => {
+        let {
+          location
+        } = _ref10;
+        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 = /*#__PURE__*/forwardRef((_ref11, ref) => {
   let {
     children,
     className,
@@ -81,7 +306,7 @@ const HeaderCell = /*#__PURE__*/forwardRef((_ref4, ref) => {
     minWidth,
     style,
     ...rest
-  } = _ref4;
+  } = _ref11;
   const isSortable = sortDirection !== undefined && onSort !== undefined;
   const SortIcon = isSortable ? SORT_ICONS[sortDirection] : undefined;
   return _jsx("th", {
@@ -113,13 +338,13 @@ const HeaderCell = /*#__PURE__*/forwardRef((_ref4, ref) => {
   });
 });
 HeaderCell.displayName = 'Table.HeaderCell';
-const Cell = /*#__PURE__*/forwardRef((_ref5, ref) => {
+const Cell = /*#__PURE__*/forwardRef((_ref12, ref) => {
   let {
     children,
     className,
     isHeader,
     ...rest
-  } = _ref5;
+  } = _ref12;
   if (isHeader) {
     return _jsx("th", {
       ref: ref,
@@ -137,55 +362,57 @@ const Cell = /*#__PURE__*/forwardRef((_ref5, ref) => {
   });
 });
 Cell.displayName = 'Table.Cell';
-const Footer = _ref6 => {
+const Footer = _ref13 => {
   let {
     children,
     className
-  } = _ref6;
+  } = _ref13;
   return _jsx("div", {
     className: classNames('ncua-table__footer', className),
     children: children
   });
 };
 Footer.displayName = 'Table.Footer';
-const Pagination = _ref7 => {
+const Pagination = _ref14 => {
   let {
     children,
     className
-  } = _ref7;
+  } = _ref14;
   return _jsx("div", {
     className: classNames('ncua-table__pagination', className),
     children: children
   });
 };
 Pagination.displayName = 'Table.Pagination';
-const ColGroup = _ref8 => {
+const ColGroup = _ref15 => {
   let {
     widths,
     minWidths
-  } = _ref8;
+  } = _ref15;
   const resolveColWidth = width => {
     if (width === undefined || width === 'auto') return undefined;
     if (typeof width === 'number') 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: {
+    children: widths.map((width, index) => {
+      const colStyle = {
         width: resolveColWidth(width),
         minWidth: resolveColWidth(minWidths?.[index])
-      }
-    }, index))
+      };
+      // biome-ignore lint/suspicious/noArrayIndexKey: colgroup columns never reorder or change
+      return _jsx("col", {
+        style: colStyle
+      }, index);
+    })
   });
 };
 ColGroup.displayName = 'Table.ColGroup';
-const Empty = _ref9 => {
+const Empty = _ref16 => {
   let {
     colSpan,
     children
-  } = _ref9;
+  } = _ref16;
   return _jsx("tr", {
     children: _jsx("td", {
       colSpan: colSpan,
@@ -230,7 +457,7 @@ const sortChildren = children => {
 // ──────────────────────────────────────────────
 // Main Table component
 // ──────────────────────────────────────────────
-const TableComponent = /*#__PURE__*/forwardRef((_ref0, ref) => {
+const TableComponent = /*#__PURE__*/forwardRef((_ref17, ref) => {
   let {
     type = 'horizontal',
     fixedHeader = false,
@@ -239,16 +466,21 @@ const TableComponent = /*#__PURE__*/forwardRef((_ref0, ref) => {
     selectable = false,
     horizontalScroll = false,
     minWidth,
+    draggable = false,
     children,
     className,
     ...rest
-  } = _ref0;
+  } = _ref17;
+  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--selectable': selectable,
+    'ncua-table--draggable': effectiveDraggable
   });
   const {
     headerContent,
@@ -288,6 +520,13 @@ const TableComponent = /*#__PURE__*/forwardRef((_ref0, ref) => {
     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",
@@ -319,6 +558,10 @@ const TableComponent = /*#__PURE__*/forwardRef((_ref0, ref) => {
       })]
     }) : renderTable();
   };
+  const dndContextValue = {
+    isDraggable: effectiveDraggable,
+    tableId
+  };
   // horizontalScroll=true 시 외곽 wrapper + FloatingProvider 부착.
   // 핵심 — __h-scroll-container 는 <table>(또는 scroll-area) 만 감싸고, footer/pagination 은
   // 그 바깥에서 항상 고정 위치. 세로 스크롤바는 h-scroll-container 형제로 배치되어
@@ -330,55 +573,61 @@ const TableComponent = /*#__PURE__*/forwardRef((_ref0, ref) => {
     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,
+    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", {
-            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",
+            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: hThumbRef,
-                className: "ncua-table__h-scrollbar-thumb",
-                onMouseDown: handleHThumbMouseDown
+                ref: thumbRef,
+                className: "ncua-table__scrollbar-thumb",
+                onMouseDown: handleThumbMouseDown
               })
-            })]
-          }), 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]
+            }), 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';
@@ -389,6 +638,8 @@ export const Table = Object.assign(TableComponent, {
   Header,
   Body,
   Row,
+  DragHeaderCell,
+  DragCell,
   HeaderCell,
   Cell,
   Footer,

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

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

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

@@ -0,0 +1,121 @@
+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 = _ref => {
+  let {
+    row,
+    cardLeft,
+    cardTop,
+    cardWidth,
+    rowHeight,
+    zIndex,
+    parentTable
+  } = _ref;
+  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 };