@ncds/ui-admin 1.8.28-alpha.3 → 1.8.28-alpha.4

package/dist/temp/assets/scripts/table/rowSpanBlock.d.ts

@@ -0,0 +1,29 @@
+type RowSpanEdge = 'top' | 'bottom';
+type RowSpanBlock = {
+    start: number;
+    end: number;
+};
+/**
+ * 병합을 쪼개지 않고 통째로 옮길 수 있는 최소 행 구간을 구한다.
+ * 범위가 겹치면 어느 쪽도 쪼갤 수 없으므로 연결된 범위를 모두 합친다.
+ *
+ * @param rowSpans 행별 셀 rowSpan 목록. 병합에 덮여 생략된 셀은 포함하지 않는다
+ * @param index 기준 행의 위치
+ */
+export declare const computeRowSpanBlock: (rowSpans: readonly (readonly number[])[], index: number) => RowSpanBlock;
+/**
+ * 드롭을 받을 수 있는 변. 블록 가운데에 떨어뜨리면 그 블록이 쪼개지므로 경계만 연다.
+ */
+export declare const computeOpenEdges: (rowSpans: readonly (readonly number[])[], index: number) => RowSpanEdge[];
+/** 고른 행들이 끌고 오는 행 전부. 병합 블록을 쪼개면 병합이 깨지므로 블록째 더한다. */
+export declare const collectBlockIndices: (rowSpans: number[][], indices: number[]) => number[];
+/** 행이 속한 `tbody` 와 그 안에서의 위치. 표 밖 요소면 `null`. */
+export declare const locateRow: (rowEl: HTMLTableRowElement) => {
+    body: HTMLTableSectionElement;
+    index: number;
+} | null;
+/** 표 본문의 행별 rowSpan 을 읽어 `computeRowSpanBlock` 에 넘길 형태로 만든다. */
+export declare const readRowSpans: (body: HTMLTableSectionElement) => number[][];
+export type { RowSpanBlock, RowSpanEdge };
+/** 다중 선택으로 고른 행들이 끌고 오는 행 전부. 행 순서는 표에 놓인 순서를 따른다. */
+export declare const expandRowsToBlocks: (rows: HTMLTableRowElement[]) => HTMLTableRowElement[];

package/dist/temp/assets/scripts/table/rowSpanBlock.js

@@ -0,0 +1,77 @@
+const SINGLE_ROW = 1;
+const collectRanges = (rowSpans) => rowSpans.flatMap((spans, index) => spans
+    .filter((span) => span > SINGLE_ROW)
+    .map((span) => ({ start: index, end: Math.min(index + span - SINGLE_ROW, rowSpans.length - 1) })));
+const overlaps = (a, b) => a.start <= b.end && b.start <= a.end;
+/**
+ * 병합을 쪼개지 않고 통째로 옮길 수 있는 최소 행 구간을 구한다.
+ * 범위가 겹치면 어느 쪽도 쪼갤 수 없으므로 연결된 범위를 모두 합친다.
+ *
+ * @param rowSpans 행별 셀 rowSpan 목록. 병합에 덮여 생략된 셀은 포함하지 않는다
+ * @param index 기준 행의 위치
+ */
+export const computeRowSpanBlock = (rowSpans, index) => {
+    const ranges = collectRanges(rowSpans);
+    let block = { start: index, end: index };
+    let expanded = true;
+    while (expanded) {
+        expanded = false;
+        for (const range of ranges) {
+            if (!overlaps(range, block))
+                continue;
+            const start = Math.min(block.start, range.start);
+            const end = Math.max(block.end, range.end);
+            if (start !== block.start || end !== block.end) {
+                block = { start, end };
+                expanded = true;
+            }
+        }
+    }
+    return block;
+};
+/**
+ * 드롭을 받을 수 있는 변. 블록 가운데에 떨어뜨리면 그 블록이 쪼개지므로 경계만 연다.
+ */
+export const computeOpenEdges = (rowSpans, index) => {
+    const block = computeRowSpanBlock(rowSpans, index);
+    const edges = [];
+    if (index === block.start)
+        edges.push('top');
+    if (index === block.end)
+        edges.push('bottom');
+    return edges;
+};
+/** 고른 행들이 끌고 오는 행 전부. 병합 블록을 쪼개면 병합이 깨지므로 블록째 더한다. */
+export const collectBlockIndices = (rowSpans, indices) => {
+    const picked = new Set();
+    for (const index of indices) {
+        const block = computeRowSpanBlock(rowSpans, index);
+        for (let row = block.start; row <= block.end; row++) {
+            picked.add(row);
+        }
+    }
+    return Array.from(picked).sort((a, b) => a - b);
+};
+/** 행이 속한 `tbody` 와 그 안에서의 위치. 표 밖 요소면 `null`. */
+export const locateRow = (rowEl) => {
+    const body = rowEl.closest('tbody');
+    if (!body)
+        return null;
+    const index = Array.from(body.rows).indexOf(rowEl);
+    return index < 0 ? null : { body, index };
+};
+/** 표 본문의 행별 rowSpan 을 읽어 `computeRowSpanBlock` 에 넘길 형태로 만든다. */
+export const readRowSpans = (body) => Array.from(body.rows).map((row) => Array.from(row.cells).map((cell) => cell.rowSpan));
+/** 다중 선택으로 고른 행들이 끌고 오는 행 전부. 행 순서는 표에 놓인 순서를 따른다. */
+export const expandRowsToBlocks = (rows) => {
+    const perBody = new Map();
+    for (const row of rows) {
+        const located = locateRow(row);
+        if (!located)
+            continue;
+        const picked = perBody.get(located.body) ?? [];
+        picked.push(located.index);
+        perBody.set(located.body, picked);
+    }
+    return Array.from(perBody).flatMap(([body, indices]) => collectBlockIndices(readRowSpans(body), indices).map((index) => body.rows[index]));
+};

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import type { SortDirection, TableBodyProps, TableColGroupProps, TableDragCellProps, TableDragHeaderCellProps, TableEmptyProps, TableFooterProps, TableHeaderProps, TablePaginationProps } from './types';
+import type { SortDirection, TableBodyProps, TableColGroupProps, TableDragCellProps, TableDragHeaderCellProps, TableEmptyProps, TableFooterProps, TableHeaderProps, TablePaginationProps, TableRowGroupProps } 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;
@@ -19,6 +19,10 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<impor
         ({ children, className, onRowDrop }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    RowGroup: {
+        ({ children, className, onRowDrop }: TableRowGroupProps): 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;
@@ -29,7 +33,7 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<impor
         displayName: string;
     };
     DragCell: {
-        ({ disabled, className, children }: TableDragCellProps): import("react/jsx-runtime").JSX.Element;
+        ({ disabled, className, rowSpan, children }: TableDragCellProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     HeaderCell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & {
@@ -58,4 +62,4 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<impor
         displayName: string;
     };
 };
-export type { RowStatus, SortDirection, TableBodyProps, TableCellProps, TableColGroupProps, TableDragCellProps, TableDragHeaderCellProps, 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, TableRowDropHandler, TableRowGroupProps, TableRowProps, TableType, } from './types';

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

@@ -6,8 +6,10 @@ import { attachClosestEdge, extractClosestEdge, } from '@atlaskit/pragmatic-drag
 import { ChevronDown, ChevronSelectorVertical, ChevronUp, DotsGrid02 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { Children, forwardRef, useCallback, useContext, useEffect, useRef, useState, } from 'react';
+import { computeOpenEdges, readRowSpans } from '../../../../assets/scripts/table/rowSpanBlock';
 import { FloatingProvider } from '../../../contexts/FloatingContext';
 import { RowDndContext, TableDndContext } from './dnd-context';
+import { DRAG_ID_ATTRIBUTE, findRowSpanBlock, locateRow, planMoveIds } from './dnd-move';
 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 고려한 디자인 권장 너비
@@ -35,32 +37,32 @@ 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, onRowDrop }) => {
-    const { tableId } = useContext(TableDndContext);
-    // onRowDrop 참조를 ref로 유지 — 콜백이 매 렌더마다 재생성되어도 effect가 재구독하지 않도록
-    const onRowDropRef = useRef(onRowDrop);
-    onRowDropRef.current = onRowDrop;
+// 묶음마다 호출되므로 핸들러 없는 묶음이 있는 묶음을 덮지 않게 둔다.
+// 거둘 때는 자기가 넣은 것만 비운다 — 조건부로 넘긴 핸들러를 끄면 드롭도 멈춰야 한다.
+const useRowDropHandler = (onRowDrop) => {
+    const { onRowDropRef } = useContext(TableDndContext);
     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]);
+        if (!onRowDrop) {
+            return;
+        }
+        onRowDropRef.current = onRowDrop;
+        return () => {
+            if (onRowDropRef.current === onRowDrop) {
+                onRowDropRef.current = undefined;
+            }
+        };
+    }, [onRowDrop, onRowDropRef]);
+};
+const Body = ({ children, className, onRowDrop }) => {
+    useRowDropHandler(onRowDrop);
     return _jsx("tbody", { className: classNames('ncua-table__body', className), children: children });
 };
 Body.displayName = 'Table.Body';
+const RowGroup = ({ children, className, onRowDrop }) => {
+    useRowDropHandler(onRowDrop);
+    return _jsx("tbody", { className: classNames('ncua-table__body', 'ncua-table__row-group', className), children: children });
+};
+RowGroup.displayName = 'Table.RowGroup';
 const Row = forwardRef(({ children, className, selected, status, dragId, ...rest }, forwardedRef) => {
     const { isDraggable, tableId } = useContext(TableDndContext);
     const internalRef = useRef(null);
@@ -78,9 +80,27 @@ const Row = forwardRef(({ children, className, selected, status, dragId, ...rest
     useEffect(() => {
         if (!isDraggable || !dragId || !internalRef.current)
             return;
+        // 끌고 있는 블록 안쪽은 드롭 대상이 아니다 — 거기 놓으면 병합이 쪼개진다
+        const isInsideDraggedBlock = (data) => {
+            const { blockBody, blockStart, blockEnd } = data;
+            if (typeof blockStart !== 'number' || typeof blockEnd !== 'number' || blockStart < 0)
+                return false;
+            const located = internalRef.current ? locateRow(internalRef.current) : null;
+            if (!located || located.bodyIndex !== blockBody)
+                return false;
+            return located.index >= blockStart && located.index <= blockEnd;
+        };
+        // 병합 블록 가운데에 놓으면 그 블록이 쪼개진다 — 받을 수 있는 변만 연다
+        const openEdges = () => {
+            const located = internalRef.current ? locateRow(internalRef.current) : null;
+            if (!located)
+                return ['top', 'bottom'];
+            return computeOpenEdges(readRowSpans(located.body), located.index);
+        };
         return dropTargetForElements({
             element: internalRef.current,
-            getData: ({ input, element }) => attachClosestEdge({ id: dragId, tableId }, { input, element, allowedEdges: ['top', 'bottom'] }),
+            canDrop: ({ source }) => !isInsideDraggedBlock(source.data) && openEdges().length > 0,
+            getData: ({ input, element }) => attachClosestEdge({ id: dragId, tableId }, { input, element, allowedEdges: openEdges() }),
             onDragEnter: ({ self, source }) => {
                 if (source.data.id === dragId)
                     return;
@@ -109,7 +129,26 @@ const Row = forwardRef(({ children, className, selected, status, dragId, ...rest
 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 planDragPreview = (rowEl, input) => {
+    const rowRect = rowEl.getBoundingClientRect();
+    const badgeHalf = PREVIEW_BADGE_SIZE / 2;
+    // 묶음마다 `tbody` 가 생기므로 표 전체에서 모은다 — 자기 `tbody` 기준이면 자기 묶음만 보인다.
+    // 대상은 `Table.Body` 가 그린 `tbody` 뿐이다 — 맨 `tbody` 의 행까지 세면 TB-10 의 단일 프리뷰가 깨진다
+    const tableEl = rowEl.classList.contains('ncua-table__row--selected') ? rowEl.closest('table') : null;
+    const selectedRows = tableEl
+        ? Array.from(tableEl.querySelectorAll('.ncua-table__body > .ncua-table__row--selected'))
+        : [];
+    const isMultiSelect = selectedRows.length > 1;
+    return {
+        rows: isMultiSelect ? selectedRows : (findRowSpanBlock(rowEl)?.rows ?? [rowEl]),
+        itemCount: isMultiSelect ? selectedRows.length : 1,
+        rowRect,
+        offsetX: Math.round(input.clientX - rowRect.left) + badgeHalf,
+        offsetY: Math.round(input.clientY - rowRect.top) + badgeHalf,
+    };
+};
+const DragCell = ({ disabled, className, rowSpan, children }) => {
     const { isDraggable, tableId } = useContext(TableDndContext);
     const { dragId, setIsDragging } = useContext(RowDndContext);
     const handleRef = useRef(null);
@@ -121,34 +160,33 @@ const DragCell = ({ disabled, className, children }) => {
         let pendingPreview = null;
         return makeDraggable({
             element: handleRef.current,
-            getInitialData: () => ({ id: dragId, tableId }),
+            getInitialData: () => {
+                const rowEl = handleRef.current?.closest('tr');
+                const block = rowEl ? findRowSpanBlock(rowEl) : null;
+                // 블록 전체가 움직이므로 소비자에게는 블록 첫 행을 출발점으로 알린다
+                const blockId = block?.rows[0]?.getAttribute(DRAG_ID_ATTRIBUTE) ?? dragId;
+                return {
+                    id: blockId,
+                    tableId,
+                    moveIds: rowEl ? planMoveIds(rowEl) : [],
+                    blockBody: block?.bodyIndex ?? -1,
+                    blockStart: block?.start ?? -1,
+                    blockEnd: block?.end ?? -1,
+                };
+            },
             onGenerateDragPreview: ({ nativeSetDragImage, location }) => {
-                if (!handleRef.current)
-                    return;
-                const rowEl = handleRef.current.closest('tr');
+                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,
-                };
+                pendingPreview = planDragPreview(rowEl, location.initial.input);
             },
             onDragStart: ({ location }) => {
                 setIsDragging(true);
                 if (!pendingPreview)
                     return;
-                const { rows, rowRect, offsetX, offsetY } = pendingPreview;
-                overlay = buildDragPreview(rows, rowRect);
+                const { rows, itemCount, rowRect, offsetX, offsetY } = pendingPreview;
+                overlay = buildDragPreview(rows, rowRect, itemCount);
                 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);
@@ -171,7 +209,7 @@ const DragCell = ({ disabled, className, children }) => {
             },
         });
     }, [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] }) }));
+    return (_jsx("td", { className: classNames('ncua-table__drag-cell', className), rowSpan: rowSpan, 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) => {
@@ -247,12 +285,32 @@ const sortChildren = (children) => {
     });
     return result;
 };
-// ──────────────────────────────────────────────
-// Main Table component
-// ──────────────────────────────────────────────
+const readRowDrop = (sourceData, target) => {
+    if (!target)
+        return null;
+    const fromId = sourceData.id;
+    const toId = target.data.id;
+    if (typeof fromId !== 'string' || typeof toId !== 'string' || fromId === toId)
+        return null;
+    const isStringArray = (v) => Array.isArray(v) && v.every((x) => typeof x === 'string');
+    const moveIds = isStringArray(sourceData.moveIds) ? sourceData.moveIds : [fromId];
+    const edge = extractClosestEdge(target.data) === 'bottom' ? 'bottom' : 'top';
+    return { fromId, toId, edge, moveIds };
+};
 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;
+    // 콜백이 매 렌더마다 재생성되어도 effect 가 재구독하지 않도록 ref 로 유지한다.
+    const onRowDropRef = useRef(undefined);
+    useEffect(() => monitorForElements({
+        canMonitor: ({ source }) => source.data.tableId === tableId,
+        onDrop: ({ source, location }) => {
+            const drop = readRowDrop(source.data, location.current.dropTargets[0]);
+            if (!drop)
+                return;
+            onRowDropRef.current?.(drop.fromId, drop.toId, drop.edge, drop.moveIds);
+        },
+    }), [tableId]);
     const effectiveDraggable = draggable && type === 'horizontal';
     const tableClasses = classNames('ncua-table', className, {
         'ncua-table--horizontal': type === 'horizontal',
@@ -310,6 +368,7 @@ const TableComponent = forwardRef(({ type = 'horizontal', fixedHeader = false, m
     const dndContextValue = {
         isDraggable: effectiveDraggable,
         tableId,
+        onRowDropRef,
     };
     // horizontalScroll=true 시 외곽 wrapper + FloatingProvider 부착.
     // 핵심 — __h-scroll-container 는 <table>(또는 scroll-area) 만 감싸고, footer/pagination 은
@@ -333,6 +392,7 @@ TableComponent.displayName = 'Table';
 export const Table = Object.assign(TableComponent, {
     Header,
     Body,
+    RowGroup,
     Row,
     DragHeaderCell,
     DragCell,

package/dist/temp/src/components/data-display/table/__tests__/Table.dnd.dragCell.test.js

@@ -47,10 +47,18 @@ describe('Table.DragCell 핸들 등록 (TB-08)', () => {
         expect(draggableArgsOf('a').element).toBe(handle);
         expect(view.querySelectorAll('button.ncua-table__drag-handle')).toHaveLength(ROW_IDS.length);
     });
-    it('TB-08 getInitialData 는 {id: dragId, tableId} 를 돌려준다', () => {
+    it('TB-08 getInitialData 는 {id: dragId, tableId} 와 옮길 행·블록 좌표를 돌려준다', () => {
         render(draggableTable(vi.fn()));
         const tableId = sourceDataOf('b').tableId;
-        expect(draggableArgsOf('a').getInitialData?.({})).toEqual({ id: 'a', tableId });
+        // 병합이 없으면 블록은 자기 행 한 칸이고 옮길 행도 자기 자신뿐이다
+        expect(draggableArgsOf('a').getInitialData?.({})).toEqual({
+            id: 'a',
+            tableId,
+            moveIds: ['a'],
+            blockBody: 0,
+            blockStart: 0,
+            blockEnd: 0,
+        });
     });
     it('TB-08 disabled 면 button 을 disabled 로 렌더하고 draggable 로 등록하지 않는다', () => {
         render(customTable([{ id: 'a' }, { id: 'b', disabled: true }]));

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

@@ -30,21 +30,21 @@ describe('Table 행 드롭 → onRowDrop (TB-01)', () => {
         const source = sourceDataOf('a');
         dropOnMonitors(source, [targetDataOf('b', LOWER_HALF_Y, source)]);
         expect(onRowDrop).toHaveBeenCalledTimes(1);
-        expect(onRowDrop).toHaveBeenCalledWith('a', 'b', 'bottom');
+        expect(onRowDrop).toHaveBeenCalledWith('a', 'b', 'bottom', ['a']);
     });
     it('TB-01 다른 행의 위쪽 절반에 놓으면 edge 는 "top" 이다', () => {
         const onRowDrop = vi.fn();
         render(draggableTable(onRowDrop));
         const source = sourceDataOf('c');
         dropOnMonitors(source, [targetDataOf('a', UPPER_HALF_Y, source)]);
-        expect(onRowDrop).toHaveBeenCalledWith('c', 'a', 'top');
+        expect(onRowDrop).toHaveBeenCalledWith('c', 'a', 'top', ['c']);
     });
     it('TB-01 target 에 closest edge 정보가 없으면 "top" 으로 전달한다', () => {
         const onRowDrop = vi.fn();
         render(draggableTable(onRowDrop));
         const source = sourceDataOf('a');
         dropOnMonitors(source, [{ id: 'b', tableId: source.tableId }]);
-        expect(onRowDrop).toHaveBeenCalledWith('a', 'b', 'top');
+        expect(onRowDrop).toHaveBeenCalledWith('a', 'b', 'top', ['a']);
     });
     it('TB-01 여러 drop target 이 겹치면 가장 안쪽(첫 번째) target 기준으로 전달한다', () => {
         const onRowDrop = vi.fn();
@@ -52,13 +52,21 @@ describe('Table 행 드롭 → onRowDrop (TB-01)', () => {
         const source = sourceDataOf('a');
         dropOnMonitors(source, [targetDataOf('c', LOWER_HALF_Y, source), targetDataOf('b', UPPER_HALF_Y, source)]);
         expect(onRowDrop).toHaveBeenCalledTimes(1);
-        expect(onRowDrop).toHaveBeenCalledWith('a', 'c', 'bottom');
+        expect(onRowDrop).toHaveBeenCalledWith('a', 'c', 'bottom', ['a']);
     });
     it('TB-01 행의 source·target data 에 이 테이블의 tableId 가 실린다', () => {
         render(draggableTable(vi.fn()));
         const source = sourceDataOf('a');
         const target = targetDataOf('b', LOWER_HALF_Y, source);
-        expect(source).toEqual({ id: 'a', tableId: expect.stringMatching(/^ncua-table-/) });
+        // 블록 좌표는 병합 블록 드롭 판정에 쓰인다. 병합이 없으면 자기 행 한 칸이다
+        expect(source).toEqual({
+            id: 'a',
+            tableId: expect.stringMatching(/^ncua-table-/),
+            moveIds: ['a'],
+            blockBody: 0,
+            blockStart: 0,
+            blockEnd: 0,
+        });
         expect(target.id).toBe('b');
         expect(target.tableId).toBe(source.tableId);
     });
@@ -103,7 +111,7 @@ describe('Table.Body canMonitor — 테이블 격리 (TB-04)', () => {
         render(twoTables(first, second));
         const source = sourceDataOf('a', sectionOf('first'));
         dropOnMonitors(source, [{ id: 'b', tableId: source.tableId }]);
-        expect(first).toHaveBeenCalledWith('a', 'b', 'top');
+        expect(first).toHaveBeenCalledWith('a', 'b', 'top', ['a']);
         expect(second).not.toHaveBeenCalled();
         expect(sourceDataOf('a', sectionOf('second')).tableId).not.toBe(source.tableId);
     });
@@ -126,7 +134,7 @@ describe('Table.Body canMonitor — 테이블 격리 (TB-04)', () => {
         const source = sourceDataOf('a', sectionOf('first'));
         const foreignTarget = sourceDataOf('c', sectionOf('second'));
         dropOnMonitors(source, [{ id: 'c', tableId: foreignTarget.tableId }]);
-        expect(first).toHaveBeenCalledWith('a', 'c', 'top');
+        expect(first).toHaveBeenCalledWith('a', 'c', 'top', ['a']);
         expect(second).not.toHaveBeenCalled();
     });
     it.todo('TB-04 다른 테이블의 행 위에 놓으면 어느 테이블의 onRowDrop 도 호출하지 않는다 (canDrop 또는 target tableId 검사)');
@@ -143,7 +151,7 @@ describe('Table.Body onRowDrop ref 갱신 (TB-05)', () => {
         expect(monitors()).toHaveLength(1);
         expect(monitors()[0]).toBe(monitorBefore);
         expect(first).not.toHaveBeenCalled();
-        expect(latest).toHaveBeenCalledWith('a', 'b', 'bottom');
+        expect(latest).toHaveBeenCalledWith('a', 'b', 'bottom', ['a']);
     });
     it('TB-05 onRowDrop 을 undefined 로 바꾸면 이후 drop 은 무시된다', () => {
         const first = vi.fn();

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,52 @@
+// @vitest-environment jsdom
+/**
+ * `Table.RowGroup` 의 DOM 계약만 다룬다.
+ * hover·selected 배경은 CSS 캐스케이드 결과이므로 jsdom 으로 판정할 수 없다 (브라우저에서 확인).
+ */
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { Table } from '../Table';
+let container;
+let root;
+beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    act(() => {
+        root = createRoot(container);
+    });
+});
+afterEach(() => {
+    act(() => {
+        root.unmount();
+    });
+    container.remove();
+});
+// `children` 은 TableRowGroupProps 의 필수 prop 이라 createElement 의 props 인자에 담는다.
+const rowGroupProps = (className) => ({
+    className,
+    children: createElement('tr', null, createElement('td', null, '셀')),
+});
+const renderRowGroup = (className) => {
+    act(() => {
+        root.render(createElement('table', null, createElement(Table.RowGroup, rowGroupProps(className))));
+    });
+    const tbody = container.querySelector('tbody');
+    if (!tbody)
+        throw new Error('tbody 가 렌더되지 않았다.');
+    return tbody;
+};
+describe('Table.RowGroup', () => {
+    it('ncua-table__body 와 ncua-table__row-group 을 가진 tbody 를 렌더한다', () => {
+        const tbody = renderRowGroup();
+        expect(tbody.classList.contains('ncua-table__body')).toBe(true);
+        expect(tbody.classList.contains('ncua-table__row-group')).toBe(true);
+    });
+    it('전달한 className 을 기본 클래스와 함께 붙인다', () => {
+        const tbody = renderRowGroup('custom-group');
+        expect(tbody.classList.contains('custom-group')).toBe(true);
+        expect(tbody.classList.contains('ncua-table__body')).toBe(true);
+        expect(tbody.classList.contains('ncua-table__row-group')).toBe(true);
+    });
+});

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

@@ -0,0 +1 @@
+export {};