@ncds/ui-admin 1.8.28-alpha.0 → 1.8.28-alpha.1

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

@@ -0,0 +1,295 @@
+// @vitest-environment jsdom
+//
+// Table (React) 위험 경로 중 DnD mock 이 필요 없는 경로 — 위험 목록표 TB-xx.
+// 행 드래그앤드롭 경로는 vi.mock 이 파일 전체에 걸리므로 Table.dnd.test.ts 로 분리했다.
+import { createElement, createRef } from 'react';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Table } from '../Table';
+import { TABLE_HEADER_HEIGHT } from '../useTableScrollbars';
+import { cleanupRender, render } from './tableTestUtils';
+const COL_WIDTH = 120;
+const MIN_COL_WIDTH = 80;
+const WIDTH_COUNT = 4;
+const HEADER_WIDTH = 160;
+const STYLE_WIDTH = 999;
+const DEFAULT_MIN_WIDTH = 1140;
+const SORT_DIRECTION_COUNT = 3;
+const EMPTY_COL_SPAN = 3;
+afterEach(() => {
+    cleanupRender();
+    vi.restoreAllMocks();
+});
+/** 헤더 셀 하나짜리 테이블 */
+const tableWithHeaderCell = (props, label = '주문일') => createElement(Table, null, createElement(Table.Header, null, createElement('tr', null, createElement(Table.HeaderCell, props, label))));
+const headerCellOf = (element) => element.querySelector('th.ncua-table__header-cell');
+const click = (element) => {
+    act(() => {
+        element.click();
+    });
+};
+describe('Table.HeaderCell — 정렬 (TB-02)', () => {
+    it('TB-02 sortDirection 과 onSort 가 모두 있으면 헤더 셀 click 마다 onSort 를 호출한다', () => {
+        const onSort = vi.fn();
+        const view = render(tableWithHeaderCell({ sortDirection: 'none', onSort }));
+        const th = headerCellOf(view);
+        click(th);
+        expect(onSort).toHaveBeenCalledTimes(1);
+        click(th);
+        expect(onSort).toHaveBeenCalledTimes(2);
+        expect(th.classList.contains('ncua-table__header-cell--sortable')).toBe(true);
+    });
+    it('TB-02 헤더 셀 안의 텍스트·아이콘을 눌러도 onSort 가 호출된다', () => {
+        const onSort = vi.fn();
+        const view = render(tableWithHeaderCell({ sortDirection: 'asc', onSort }));
+        click(view.querySelector('.ncua-table__header-cell-text'));
+        view.querySelector('.ncua-table__sort-icon svg')?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        expect(onSort).toHaveBeenCalledTimes(2);
+    });
+    it('TB-02 onSort 만 있고 sortDirection 이 없으면 정렬 가능 셀이 아니어서 click 해도 호출하지 않는다', () => {
+        const onSort = vi.fn();
+        const view = render(tableWithHeaderCell({ onSort }));
+        const th = headerCellOf(view);
+        click(th);
+        expect(onSort).not.toHaveBeenCalled();
+        expect(th.classList.contains('ncua-table__header-cell--sortable')).toBe(false);
+        expect(th.hasAttribute('aria-sort')).toBe(false);
+    });
+    it('TB-02 sortDirection 만 있고 onSort 가 없으면 정렬 아이콘 없이 텍스트만 렌더한다', () => {
+        const view = render(tableWithHeaderCell({ sortDirection: 'desc' }));
+        const th = headerCellOf(view);
+        click(th);
+        expect(th.querySelector('.ncua-table__sort-icon')).toBeNull();
+        expect(th.textContent).toBe('주문일');
+    });
+    it('TB-02 onClick 을 함께 넘기면 onClick 이 onSort 를 덮어써 정렬 콜백이 호출되지 않는다', () => {
+        // 현재 동작 고정 — 결함 후보: #588 (...rest 가 onClick={onSort} 뒤에 펼쳐져 덮어씀)
+        const onSort = vi.fn();
+        const onClick = vi.fn();
+        const view = render(tableWithHeaderCell({ sortDirection: 'none', onSort, onClick }));
+        click(headerCellOf(view));
+        expect(onClick).toHaveBeenCalledTimes(1);
+        expect(onSort).not.toHaveBeenCalled();
+    });
+    it.todo('TB-02 onClick 을 함께 넘겨도 정렬 가능 셀이면 onSort 가 호출된다 (둘 다 호출 또는 onClick 금지)');
+});
+// ── 표현 경로 공통 헬퍼 ──────────────────────────────────────
+const tableEl = (element) => element.querySelector('.ncua-table');
+const hasClass = (element, className) => element?.classList.contains(className) ?? false;
+const bodyRow = (props = {}, ref) => createElement(Table, null, createElement(Table.Body, null, createElement(Table.Row, { ...props, ref }, createElement(Table.Cell, null, '셀'))));
+describe('Table.HeaderCell — aria-sort·아이콘 (TB-12)', () => {
+    it.each([
+        ['asc', 'ascending'],
+        ['desc', 'descending'],
+        ['none', 'none'],
+    ])('TB-12 sortDirection=%s 이면 aria-sort=%s, 정렬 아이콘(svg)·sortable 클래스를 렌더한다', (direction, ariaSort) => {
+        const view = render(tableWithHeaderCell({ sortDirection: direction, onSort: vi.fn() }));
+        const th = headerCellOf(view);
+        expect(th.getAttribute('aria-sort')).toBe(ariaSort);
+        expect(th.querySelector('.ncua-table__sort-icon svg')).not.toBeNull();
+        expect(th.querySelector('.ncua-table__header-cell-text')?.textContent).toBe('주문일');
+        expect(hasClass(th, 'ncua-table__header-cell--sortable')).toBe(true);
+    });
+    it('TB-12 sortDirection 별로 서로 다른 아이콘을 쓴다', () => {
+        const markupOf = (direction) => {
+            const view = render(tableWithHeaderCell({ sortDirection: direction, onSort: vi.fn() }));
+            return view.querySelector('.ncua-table__sort-icon')?.innerHTML ?? '';
+        };
+        const icons = new Set([markupOf('asc'), markupOf('desc'), markupOf('none')]);
+        expect(icons.size).toBe(SORT_DIRECTION_COUNT);
+    });
+    it('TB-12 타입 밖의 sortDirection 이면 aria-sort 없이 children 만 렌더한다 (SortIcon 미해결 분기)', () => {
+        const view = render(tableWithHeaderCell({ sortDirection: 'unknown', onSort: vi.fn() }));
+        const th = headerCellOf(view);
+        expect(th.hasAttribute('aria-sort')).toBe(false);
+        expect(th.querySelector('.ncua-table__sort-icon')).toBeNull();
+        expect(th.textContent).toBe('주문일');
+        expect(hasClass(th, 'ncua-table__header-cell--sortable')).toBe(true);
+    });
+});
+describe('Table children 분류 (TB-13)', () => {
+    it('TB-13 Header·ColGroup·기타는 table 안, Footer 는 .ncua-table 안 table 뒤, Pagination 은 .ncua-table 밖 wrapper 안', () => {
+        const view = render(createElement(Table, null, createElement(Table.Footer, null, '푸터'), createElement(Table.Pagination, null, '페이지'), createElement(Table.Body, null, createElement(Table.Row, null, createElement(Table.Cell, null, '셀'))), createElement(Table.Header, null, createElement('tr', null, createElement(Table.HeaderCell, null, '헤더'))), createElement(Table.ColGroup, { widths: [COL_WIDTH] })));
+        const wrapper = view.querySelector('.ncua-table-wrapper');
+        const table = view.querySelector('table.ncua-table__table');
+        const footer = view.querySelector('.ncua-table__footer');
+        const pagination = view.querySelector('.ncua-table__pagination');
+        expect(Array.from(table.children).map((child) => child.tagName)).toEqual(['COLGROUP', 'THEAD', 'TBODY']);
+        expect(table.getAttribute('role')).toBe('table');
+        expect(footer.parentElement).toBe(tableEl(view));
+        expect(table.compareDocumentPosition(footer) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+        expect(pagination.parentElement).toBe(wrapper);
+        expect(tableEl(view).contains(pagination)).toBe(false);
+    });
+    it('TB-13 문자열·null children 도 table 안 콘텐츠로 분류한다', () => {
+        const view = render(createElement(Table, null, null, '텍스트', false));
+        const table = view.querySelector('table.ncua-table__table');
+        expect(table.textContent).toBe('텍스트');
+    });
+    it('TB-13 Header·Footer 의 className 을 함께 붙인다', () => {
+        const view = render(createElement(Table, null, createElement(Table.Header, { className: 'h-extra' }, null), createElement(Table.Body, { className: 'b-extra' }, null), createElement(Table.Footer, { className: 'f-extra' }, null), createElement(Table.Pagination, { className: 'p-extra' }, null)));
+        expect(hasClass(view.querySelector('thead'), 'h-extra')).toBe(true);
+        expect(hasClass(view.querySelector('tbody'), 'ncua-table__body')).toBe(true);
+        expect(hasClass(view.querySelector('tbody'), 'b-extra')).toBe(true);
+        expect(hasClass(view.querySelector('.ncua-table__footer'), 'f-extra')).toBe(true);
+        expect(hasClass(view.querySelector('.ncua-table__pagination'), 'p-extra')).toBe(true);
+    });
+});
+describe('Table 루트 클래스 (TB-17)', () => {
+    it('TB-17 기본값은 horizontal + hoverable 이고 fixed-header·selectable·draggable 은 없다', () => {
+        const view = render(createElement(Table, null, null));
+        const table = tableEl(view);
+        expect(hasClass(table, 'ncua-table--horizontal')).toBe(true);
+        expect(hasClass(table, 'ncua-table--hoverable')).toBe(true);
+        expect(hasClass(table, 'ncua-table--vertical')).toBe(false);
+        expect(hasClass(table, 'ncua-table--fixed-header')).toBe(false);
+        expect(hasClass(table, 'ncua-table--selectable')).toBe(false);
+        expect(hasClass(table, 'ncua-table--draggable')).toBe(false);
+    });
+    it('TB-17 type=vertical 이면 hoverable=true 여도 hoverable 클래스를 붙이지 않는다', () => {
+        const view = render(createElement(Table, { type: 'vertical', hoverable: true }, null));
+        const table = tableEl(view);
+        expect(hasClass(table, 'ncua-table--vertical')).toBe(true);
+        expect(hasClass(table, 'ncua-table--horizontal')).toBe(false);
+        expect(hasClass(table, 'ncua-table--hoverable')).toBe(false);
+    });
+    it('TB-17 fixedHeader·selectable·draggable·className 을 클래스로 반영하고 hoverable=false 면 뺀다', () => {
+        const view = render(createElement(Table, { fixedHeader: true, selectable: true, draggable: true, hoverable: false, className: 'extra' }, null));
+        const table = tableEl(view);
+        expect(hasClass(table, 'ncua-table--fixed-header')).toBe(true);
+        expect(hasClass(table, 'ncua-table--selectable')).toBe(true);
+        expect(hasClass(table, 'ncua-table--draggable')).toBe(true);
+        expect(hasClass(table, 'ncua-table--hoverable')).toBe(false);
+        expect(hasClass(table, 'extra')).toBe(true);
+    });
+});
+describe('Table.Row 클래스·ref·rest (TB-18)', () => {
+    it('TB-18 selected·status 에 따라 modifier 클래스를 붙인다', () => {
+        const rowOf = (props) => render(bodyRow(props)).querySelector('tr');
+        expect(hasClass(rowOf({ selected: true }), 'ncua-table__row--selected')).toBe(true);
+        expect(hasClass(rowOf({ status: 'warning' }), 'ncua-table__row--warning')).toBe(true);
+        expect(hasClass(rowOf({ status: 'error' }), 'ncua-table__row--error')).toBe(true);
+        const plain = rowOf({});
+        expect(plain.className).toBe('ncua-table__row');
+        expect(plain.hasAttribute('data-draggable-id')).toBe(false);
+    });
+    it('TB-18 함수 ref 에 tr 요소를 넘기고 언마운트 시 null 을 넘긴다', () => {
+        const ref = vi.fn();
+        const view = render(bodyRow({}, ref));
+        const row = view.querySelector('tr');
+        expect(ref).toHaveBeenCalledWith(row);
+        render(createElement(Table, null, null));
+        expect(ref).toHaveBeenLastCalledWith(null);
+    });
+    it('TB-18 객체 ref 의 current 에 tr 요소를 넣는다', () => {
+        const ref = createRef();
+        const view = render(bodyRow({}, ref));
+        expect(ref.current).toBe(view.querySelector('tr'));
+    });
+    it('TB-18 className·dragId·나머지 props 를 tr 에 그대로 전달한다', () => {
+        const onClick = vi.fn();
+        const view = render(bodyRow({ className: 'row-extra', dragId: 'r1', 'aria-rowindex': 2, onClick }));
+        const row = view.querySelector('tr');
+        click(row);
+        expect(hasClass(row, 'row-extra')).toBe(true);
+        expect(row.dataset.draggableId).toBe('r1');
+        expect(row.getAttribute('aria-rowindex')).toBe('2');
+        expect(onClick).toHaveBeenCalledTimes(1);
+    });
+});
+describe('Table.Cell (TB-19)', () => {
+    it('TB-19 isHeader 이면 th[scope=row], 아니면 td 로 렌더하고 ref·className·rest 를 전달한다', () => {
+        const headerRef = createRef();
+        const cellRef = createRef();
+        const view = render(createElement(Table, null, createElement(Table.Body, null, createElement(Table.Row, null, createElement(Table.Cell, { isHeader: true, ref: headerRef, className: 'th-extra' }, '항목'), createElement(Table.Cell, { ref: cellRef, className: 'td-extra', colSpan: 2 }, '값')))));
+        const th = view.querySelector('tbody th');
+        const td = view.querySelector('tbody td');
+        expect(th.getAttribute('scope')).toBe('row');
+        expect(th.className).toBe('ncua-table__cell th-extra');
+        expect(headerRef.current).toBe(th);
+        expect(td.className).toBe('ncua-table__cell td-extra');
+        expect(td.colSpan).toBe(2);
+        expect(cellRef.current).toBe(td);
+    });
+});
+describe('Table.HeaderCell 스타일·rest (TB-20)', () => {
+    it('TB-20 width·minWidth 를 style 과 병합하고 같은 키는 width·minWidth 가 이긴다', () => {
+        const view = render(tableWithHeaderCell({
+            width: HEADER_WIDTH,
+            minWidth: '5rem',
+            style: { color: 'red', width: STYLE_WIDTH },
+            className: 'hc-extra',
+            id: 'hc',
+        }));
+        const th = headerCellOf(view);
+        expect(th.style.width).toBe(`${HEADER_WIDTH}px`);
+        expect(th.style.minWidth).toBe('5rem');
+        expect(th.style.color).toBe('red');
+        expect(hasClass(th, 'hc-extra')).toBe(true);
+        expect(th.id).toBe('hc');
+    });
+    it('TB-20 ref 를 th 에 연결하고 width·style 이 없으면 style 속성을 렌더하지 않는다', () => {
+        const ref = createRef();
+        const view = render(createElement(Table, null, createElement(Table.Header, null, createElement('tr', null, createElement(Table.HeaderCell, { ref }, '이름')))));
+        expect(ref.current).toBe(headerCellOf(view));
+        expect(ref.current?.getAttribute('style')).toBeNull();
+    });
+});
+describe('Table.ColGroup (TB-21)', () => {
+    it('TB-21 숫자는 px, "auto"·undefined 는 미지정, 문자열은 그대로 쓰고 minWidths 도 같은 규칙을 따른다', () => {
+        const view = render(createElement(Table, null, createElement(Table.ColGroup, {
+            widths: [COL_WIDTH, 'auto', '20%', undefined],
+            minWidths: [MIN_COL_WIDTH, undefined, '4rem'],
+        })));
+        const cols = Array.from(view.querySelectorAll('col'));
+        expect(cols).toHaveLength(WIDTH_COUNT);
+        expect(cols.map((col) => col.style.width)).toEqual([`${COL_WIDTH}px`, '', '20%', '']);
+        expect(cols.map((col) => col.style.minWidth)).toEqual([`${MIN_COL_WIDTH}px`, '', '4rem', '']);
+    });
+    it('TB-21 minWidths 가 없으면 min-width 를 지정하지 않는다', () => {
+        const view = render(createElement(Table, null, createElement(Table.ColGroup, { widths: [COL_WIDTH] })));
+        expect(view.querySelector('col').style.minWidth).toBe('');
+    });
+});
+describe('Table.Empty (TB-22)', () => {
+    const emptyCell = (children) => {
+        const view = render(createElement(Table, null, createElement(Table.Body, null, createElement(Table.Empty, { colSpan: EMPTY_COL_SPAN }, children))));
+        return view.querySelector('.ncua-table__empty');
+    };
+    it('TB-22 children 이 없으면 기본 문구를, 있으면 children 을 렌더한다', () => {
+        expect(emptyCell().textContent).toBe('등록된 게시물이 없습니다.');
+        expect(emptyCell('검색 결과 없음').textContent).toBe('검색 결과 없음');
+    });
+    it('TB-22 colSpan·role=status·aria-live=polite 를 가진 td 로 렌더한다', () => {
+        const cell = emptyCell();
+        expect(cell.tagName).toBe('TD');
+        expect(cell.colSpan).toBe(EMPTY_COL_SPAN);
+        expect(cell.getAttribute('role')).toBe('status');
+        expect(cell.getAttribute('aria-live')).toBe('polite');
+    });
+});
+describe('Table.DragHeaderCell (TB-23)', () => {
+    it('TB-23 aria-hidden 아이콘과 children 을 inner span 안에 렌더한다', () => {
+        const view = render(createElement(Table, null, createElement(Table.Header, null, createElement('tr', null, createElement(Table.DragHeaderCell, { className: 'dh-extra' }, '전체')))));
+        const th = view.querySelector('th');
+        const inner = th.querySelector('.ncua-table__drag-cell-inner');
+        const icon = inner.querySelector('.ncua-table__drag-header-icon');
+        expect(th.className).toBe('ncua-table__header-cell ncua-table__drag-header-cell dh-extra');
+        expect(icon.getAttribute('aria-hidden')).toBe('true');
+        expect(icon.querySelector('svg')).not.toBeNull();
+        expect(inner.textContent).toBe('전체');
+    });
+});
+describe('Table 루트 ref·rest·CSS 변수 (TB-24)', () => {
+    it('TB-24 ref 는 wrapper div, rest 는 .ncua-table div 로 가고 wrapper 에 CSS 변수를 주입한다', () => {
+        const ref = createRef();
+        const view = render(createElement(Table, { ref, id: 't1', 'aria-label': '주문 목록' }, null));
+        const wrapper = view.querySelector('.ncua-table-wrapper');
+        expect(ref.current).toBe(wrapper);
+        expect(tableEl(view).id).toBe('t1');
+        expect(tableEl(view).getAttribute('aria-label')).toBe('주문 목록');
+        expect(wrapper.hasAttribute('id')).toBe(false);
+        expect(wrapper.style.getPropertyValue('--ncua-table-header-height')).toBe(`${TABLE_HEADER_HEIGHT}px`);
+        expect(wrapper.style.getPropertyValue('--ncua-table-default-min-width')).toBe(`${DEFAULT_MIN_WIDTH}px`);
+    });
+});

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

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

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

@@ -0,0 +1,42 @@
+// @vitest-environment jsdom
+import { createElement, useContext } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { RowDndContext, TableDndContext } from '../dnd-context';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const mounted = [];
+afterEach(() => {
+    for (const { root, container } of mounted.splice(0)) {
+        act(() => root.unmount());
+        container.remove();
+    }
+});
+/** Provider 밖에서 컨텍스트 기본값을 읽어 기록하는 소비자 */
+const readDefaults = () => {
+    const seen = {};
+    const Consumer = () => {
+        seen.row = useContext(RowDndContext);
+        seen.table = useContext(TableDndContext);
+        return null;
+    };
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    mounted.push({ root, container });
+    act(() => root.render(createElement(Consumer)));
+    return seen;
+};
+describe('dnd-context — Provider 밖 기본값 (RSD-05)', () => {
+    // 공개 경로 미사용 — Table 행은 항상 Provider 안에서 소비한다. 기본값 계약만 직접 소비로 고정한다.
+    it('RSD-05 RowDndContext 기본값은 dragId undefined 이고 setIsDragging 은 호출해도 오류가 없다', () => {
+        const { row } = readDefaults();
+        expect(row).toEqual({ dragId: undefined, setIsDragging: expect.any(Function) });
+        expect(() => row?.setIsDragging(true)).not.toThrow();
+    });
+    it('RSD-05 TableDndContext 기본값은 드래그 비활성 · 빈 tableId 다', () => {
+        const { table } = readDefaults();
+        expect(table).toEqual({ isDraggable: false, tableId: '' });
+    });
+});

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

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

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

@@ -0,0 +1,226 @@
+// @vitest-environment jsdom
+//
+// Table 드래그 미리보기 DOM 빌더(dnd-preview.ts) 위험 경로 — 위험 목록표 DP-xx.
+// 형제 PR #586 의 Table.dnd.test.ts(TB-10) 가 확인하는 것(오버레이 body 부착·좌표, 배지 '2', 카드 개수 1·2)은
+// 다시 단언하지 않는다. 여기서는 buildDragPreview 를 직접 호출해 치수·적층 순서·배경·복제 상태·요약 카드를 본다.
+// 드래그 미리보기의 시각 결과는 TB-27(단위 불가, E2E 후보)이 다룬다.
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { buildDragPreview, PREVIEW_BADGE_SIZE } from '../dnd-preview';
+const BADGE_HALF = PREVIEW_BADGE_SIZE / 2;
+// 소스 비공개 상수(PREVIEW_STACK_OFFSET·PREVIEW_MAX_ROWS)의 스펙 값 — 소스가 바뀌면 함께 갱신한다.
+const STACK_OFFSET = 5;
+const MAX_ROWS = 3;
+const MAX_STACK_OFFSET = STACK_OFFSET * MAX_ROWS;
+const ROW_WIDTH = 300.4;
+const ROW_HEIGHT = 47.6;
+const ROUNDED_WIDTH = 300;
+const ROUNDED_HEIGHT = 48;
+const ROW_RECT = { width: ROW_WIDTH, height: ROW_HEIGHT };
+const STACKED_ROW_COUNT = 2;
+const MAX_STACKED_ROW_COUNT = MAX_ROWS;
+const OVER_MAX_ROW_COUNT = 5;
+const CELL_WIDTH_FRACTION = 40.2;
+const CELL_WIDTH_CEILED = 41;
+const CELL_WIDTH_INTEGER = 99;
+const TABLE_CLASS = 'ncua-table__table order-table';
+/** CSS 변수 → 계산값. 앞뒤 공백이 섞인 값도 배경으로 그대로 쓸 수 있는지 본다. */
+const CSS_VARS = {
+    '--primary-red-50': ' rgb(254, 243, 242) ',
+    '--orange-50': ' rgb(255, 250, 235) ',
+    '--gray-50': ' rgb(249, 250, 251) ',
+    '--base-white': ' rgb(255, 255, 255) ',
+};
+const RED_50 = 'rgb(254, 243, 242)';
+const ORANGE_50 = 'rgb(255, 250, 235)';
+const GRAY_50 = 'rgb(249, 250, 251)';
+const BASE_WHITE = 'rgb(255, 255, 255)';
+let getComputedStyleSpy;
+beforeEach(() => {
+    getComputedStyleSpy = vi.spyOn(window, 'getComputedStyle').mockImplementation(() => ({
+        getPropertyValue: (name) => CSS_VARS[name] ?? '',
+    }));
+});
+afterEach(() => {
+    document.body.innerHTML = '';
+    vi.restoreAllMocks();
+});
+/** 원본 테이블에 행 count 개를 그리고 행 목록을 돌려준다. 각 행은 data-row 로 식별한다. */
+const mountRows = (count, rowClasses = []) => {
+    const table = document.createElement('table');
+    table.className = TABLE_CLASS;
+    const tbody = document.createElement('tbody');
+    table.appendChild(tbody);
+    document.body.appendChild(table);
+    return Array.from({ length: count }, (_, index) => {
+        const row = document.createElement('tr');
+        row.className = ['ncua-table__row', ...rowClasses].join(' ');
+        row.dataset.row = String(index);
+        const cell = document.createElement('td');
+        cell.textContent = `행 ${index}`;
+        row.appendChild(cell);
+        tbody.appendChild(row);
+        return row;
+    });
+};
+const cardsOf = (preview) => Array.from(preview.querySelectorAll(':scope > .ncua-table-dnd-preview__card'));
+const clonedRowOf = (card) => card.querySelector('tbody > tr');
+const px = (value) => `${value}px`;
+describe('buildDragPreview — 행 1개 (DP-01)', () => {
+    it('DP-01 배지·요약 없이 카드 1장을 zIndex 1, 배지 절반 오프셋, 반올림한 행 크기로 만든다', () => {
+        const [row] = mountRows(1);
+        const preview = buildDragPreview([row], ROW_RECT);
+        const [card] = cardsOf(preview);
+        expect(preview.classList.contains('ncua-table-dnd-preview')).toBe(true);
+        expect(preview.querySelector('.ncua-table-dnd-preview__badge')).toBeNull();
+        expect(preview.querySelector('.ncua-table-dnd-preview__summary')).toBeNull();
+        expect(card.style.zIndex).toBe('1');
+        expect(card.style.top).toBe(px(BADGE_HALF));
+        expect(card.style.left).toBe(px(BADGE_HALF));
+        expect(card.style.width).toBe(px(ROUNDED_WIDTH));
+        expect(card.style.height).toBe(px(ROUNDED_HEIGHT));
+    });
+    it('DP-01 컨테이너는 (배지 절반 + 행 폭) × (배지 절반 + 행 높이) 다', () => {
+        const [row] = mountRows(1);
+        const preview = buildDragPreview([row], ROW_RECT);
+        expect(preview.style.width).toBe(px(BADGE_HALF + ROUNDED_WIDTH));
+        expect(preview.style.height).toBe(px(BADGE_HALF + ROUNDED_HEIGHT));
+    });
+    it('DP-01 카드 table 은 원본 closest(table) 의 className 과 카드 폭을, tbody 는 ncua-table__body 를 갖고 행 복제본을 담는다', () => {
+        const [row] = mountRows(1);
+        const [card] = cardsOf(buildDragPreview([row], ROW_RECT));
+        const table = card.querySelector('table');
+        const clone = clonedRowOf(card);
+        expect(table.className).toBe(TABLE_CLASS);
+        expect(table.style.width).toBe(px(ROUNDED_WIDTH));
+        expect(table.querySelector('tbody')?.className).toBe('ncua-table__body');
+        expect(clone).not.toBe(row);
+        expect(clone.dataset.row).toBe('0');
+        expect(clone.textContent).toBe('행 0');
+    });
+});
+describe('buildDragPreview — 행 2~3개 적층 (DP-02)', () => {
+    it('DP-02 배지를 먼저 붙이고 카드는 뒤 행부터(rows[n−1] … rows[0]) 붙인다', () => {
+        const rows = mountRows(MAX_STACKED_ROW_COUNT);
+        const preview = buildDragPreview(rows, ROW_RECT);
+        expect(preview.firstElementChild?.classList.contains('ncua-table-dnd-preview__badge')).toBe(true);
+        expect(cardsOf(preview).map((card) => clonedRowOf(card).dataset.row)).toEqual(['2', '1', '0']);
+    });
+    it('DP-02 i 번째 행 카드는 zIndex n−i, 오프셋 배지 절반 + 5i, 폭 행 폭 − 5i 다', () => {
+        const rows = mountRows(MAX_STACKED_ROW_COUNT);
+        const cards = cardsOf(buildDragPreview(rows, ROW_RECT));
+        const cardOfRow = (index) => cards.find((card) => clonedRowOf(card).dataset.row === String(index));
+        const expectCardGeometry = (index) => {
+            const card = cardOfRow(index);
+            const shift = index * STACK_OFFSET;
+            expect(card.style.zIndex).toBe(String(MAX_STACKED_ROW_COUNT - index));
+            expect(card.style.top).toBe(px(BADGE_HALF + shift));
+            expect(card.style.left).toBe(px(BADGE_HALF + shift));
+            expect(card.style.width).toBe(px(ROUNDED_WIDTH - shift));
+            expect(card.style.height).toBe(px(ROUNDED_HEIGHT));
+            expect(card.querySelector('table').style.width).toBe(px(ROUNDED_WIDTH - shift));
+        };
+        expectCardGeometry(0);
+        expectCardGeometry(1);
+        expectCardGeometry(2);
+    });
+    it('DP-02 컨테이너 높이는 배지 절반 + 행 높이 + 5 × (n − 1) 이다', () => {
+        expect(buildDragPreview(mountRows(STACKED_ROW_COUNT), ROW_RECT).style.height).toBe(px(BADGE_HALF + ROUNDED_HEIGHT + STACK_OFFSET));
+        expect(buildDragPreview(mountRows(MAX_STACKED_ROW_COUNT), ROW_RECT).style.height).toBe(px(BADGE_HALF + ROUNDED_HEIGHT + STACK_OFFSET * (MAX_STACKED_ROW_COUNT - 1)));
+    });
+});
+describe('buildDragPreview — 행 4개 이상 요약 카드 (DP-03)', () => {
+    it('DP-03 요약 카드를 배지 다음에 붙이고 위치·크기는 최대 적층 오프셋(15) 기준이다', () => {
+        const preview = buildDragPreview(mountRows(OVER_MAX_ROW_COUNT), ROW_RECT);
+        const summary = preview.children[1];
+        expect(summary.classList.contains('ncua-table-dnd-preview__summary')).toBe(true);
+        expect(summary.style.top).toBe(px(BADGE_HALF + MAX_STACK_OFFSET));
+        expect(summary.style.left).toBe(px(BADGE_HALF + MAX_STACK_OFFSET));
+        expect(summary.style.width).toBe(px(ROUNDED_WIDTH - MAX_STACK_OFFSET));
+        expect(summary.style.height).toBe(px(ROUNDED_HEIGHT));
+    });
+    it('DP-03 배지는 전체 행 수를 보이고 카드는 앞 3행만 만든다', () => {
+        const preview = buildDragPreview(mountRows(OVER_MAX_ROW_COUNT), ROW_RECT);
+        expect(preview.querySelector('.ncua-table-dnd-preview__badge')?.textContent).toBe(String(OVER_MAX_ROW_COUNT));
+        expect(cardsOf(preview).map((card) => clonedRowOf(card).dataset.row)).toEqual(['2', '1', '0']);
+    });
+    it('DP-03 컨테이너 높이는 배지 절반 + 행 높이 + 15 다', () => {
+        const preview = buildDragPreview(mountRows(OVER_MAX_ROW_COUNT), ROW_RECT);
+        expect(preview.style.height).toBe(px(BADGE_HALF + ROUNDED_HEIGHT + MAX_STACK_OFFSET));
+        expect(preview.style.width).toBe(px(BADGE_HALF + ROUNDED_WIDTH));
+    });
+});
+describe('buildDragPreview — 행 상태별 배경 (DP-04)', () => {
+    it.each([
+        ['selected + error', ['ncua-table__row--selected', 'ncua-table__row--error'], RED_50],
+        ['selected + warning', ['ncua-table__row--selected', 'ncua-table__row--warning'], ORANGE_50],
+        ['selected', ['ncua-table__row--selected'], GRAY_50],
+        ['선택 안 된 error', ['ncua-table__row--error'], BASE_WHITE],
+        ['상태 없음', [], BASE_WHITE],
+    ])('DP-04 %s 행은 카드와 복제 행 배경이 해당 CSS 변수 값이다', (_label, rowClasses, expected) => {
+        const [row] = mountRows(1, rowClasses);
+        const [card] = cardsOf(buildDragPreview([row], ROW_RECT));
+        expect(card.style.backgroundColor).toBe(expected);
+        expect(clonedRowOf(card).style.backgroundColor).toBe(expected);
+    });
+    it('DP-04 CSS 변수는 documentElement 의 계산 스타일에서 읽는다', () => {
+        const [row] = mountRows(1);
+        buildDragPreview([row], ROW_RECT);
+        expect(getComputedStyleSpy).toHaveBeenCalledWith(document.documentElement);
+    });
+});
+describe('buildDragPreview — 복제 행 상태 (DP-05)', () => {
+    const addCheckboxes = (row) => [0, 1].map(() => {
+        const cell = document.createElement('td');
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        cell.appendChild(input);
+        row.appendChild(cell);
+        return input;
+    });
+    it('DP-05 복제 행 체크박스는 원본 checked 프로퍼티를 유지한다 (속성과 달라도)', () => {
+        const [row] = mountRows(1);
+        const [first, second] = addCheckboxes(row);
+        first.checked = true; // 프로퍼티만 true (속성 없음)
+        second.setAttribute('checked', ''); // 속성은 있지만
+        second.checked = false; // 프로퍼티는 false
+        const [card] = cardsOf(buildDragPreview([row], ROW_RECT));
+        const clones = Array.from(clonedRowOf(card).querySelectorAll('input[type="checkbox"]'));
+        expect(clones.map((input) => input.checked)).toEqual([true, false]);
+    });
+    it('DP-05 셀 폭은 원본 getBoundingClientRect 폭을 올림해 width·minWidth·maxWidth 로 고정한다', () => {
+        const [row] = mountRows(1);
+        const extraCell = document.createElement('td');
+        row.appendChild(extraCell);
+        const [firstCell, secondCell] = Array.from(row.cells);
+        vi.spyOn(firstCell, 'getBoundingClientRect').mockReturnValue({ width: CELL_WIDTH_FRACTION });
+        vi.spyOn(secondCell, 'getBoundingClientRect').mockReturnValue({ width: CELL_WIDTH_INTEGER });
+        const [card] = cardsOf(buildDragPreview([row], ROW_RECT));
+        const cloneCells = Array.from(clonedRowOf(card).cells);
+        expect(cloneCells.map((cell) => [cell.style.width, cell.style.minWidth, cell.style.maxWidth])).toEqual([
+            [px(CELL_WIDTH_CEILED), px(CELL_WIDTH_CEILED), px(CELL_WIDTH_CEILED)],
+            [px(CELL_WIDTH_INTEGER), px(CELL_WIDTH_INTEGER), px(CELL_WIDTH_INTEGER)],
+        ]);
+    });
+    it('DP-05 원본 행은 제자리에 남고 배경·셀 폭이 바뀌지 않는다', () => {
+        const rows = mountRows(STACKED_ROW_COUNT, ['ncua-table__row--selected']);
+        const originalParent = rows[0].parentElement;
+        buildDragPreview(rows, ROW_RECT);
+        expect(rows.map((row) => row.parentElement)).toEqual([originalParent, originalParent]);
+        expect(originalParent?.children).toHaveLength(STACKED_ROW_COUNT);
+        expect(rows[0].style.backgroundColor).toBe('');
+        expect(rows[0].cells[0].style.width).toBe('');
+    });
+});
+describe('buildDragPreview — 코너 (DP-06)', () => {
+    it('DP-06 table 밖의 행이면 카드 table 에 className 을 두지 않는다', () => {
+        const row = document.createElement('tr');
+        row.appendChild(document.createElement('td'));
+        const [card] = cardsOf(buildDragPreview([row], ROW_RECT));
+        expect(card.querySelector('table')?.className).toBe('');
+    });
+    it('DP-06 rows 가 비어 있으면 자식 없는 컨테이너를 예외 없이 돌려준다', () => {
+        const preview = buildDragPreview([], ROW_RECT);
+        expect(preview.classList.contains('ncua-table-dnd-preview')).toBe(true);
+        expect(preview.children).toHaveLength(0);
+    });
+});

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

@@ -0,0 +1,76 @@
+import { dropTargetForElements, draggable as makeDraggable, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import type { TableBodyProps, TableProps } from '../types';
+type DraggableArgs = Parameters<typeof makeDraggable>[0];
+type DropTargetArgs = Parameters<typeof dropTargetForElements>[0];
+type MonitorArgs = Parameters<typeof monitorForElements>[0];
+type MonitorCanPayload = Parameters<NonNullable<MonitorArgs['canMonitor']>>[0];
+type GetInitialDataPayload = Parameters<NonNullable<DraggableArgs['getInitialData']>>[0];
+type DragData = Record<string | symbol, unknown>;
+/** cleanup 이 아직 불리지 않은 registration 만 등록 순서대로 돌려준다 */
+declare const draggables: () => DraggableArgs[];
+declare const dropTargets: () => DropTargetArgs[];
+declare const monitors: () => MonitorArgs[];
+declare const stubRect: (element: Element, rect: Partial<DOMRect>) => void;
+declare const ROW_HEIGHT = 40;
+declare const UPPER_HALF_Y = 10;
+declare const LOWER_HALF_Y = 30;
+declare const rowOf: (dragId: string, scope?: ParentNode) => HTMLTableRowElement;
+/** 드래그 핸들(button)이 scope 안의 dragId 행에 속한 draggable registration */
+declare const draggableArgsOf: (dragId: string, scope?: ParentNode) => DraggableArgs;
+declare const dropTargetArgsOf: (dragId: string) => DropTargetArgs;
+declare const sourceDataOf: (dragId: string, scope?: ParentNode) => DragData;
+/** 행 dropTarget 의 getData 를 실제 closest-edge 로 실행해 target data 를 만든다. */
+declare const targetDataOf: (dragId: string, clientY: number, source: DragData) => DragData;
+/** 등록된 모든 monitor 에 drop 을 흘린다 (canMonitor 통과한 것만). */
+declare const dropOnMonitors: (source: DragData, targets: DragData[]) => void;
+type RowDragEvent = 'onDragEnter' | 'onDrag' | 'onDragLeave' | 'onDrop';
+/** 행 dropTarget 콜백에 self(=closest-edge 가 붙은 target data)·source 를 넘긴다. */
+declare const fireRowEvent: (event: RowDragEvent, targetId: string, sourceId: string, clientY: number) => void;
+declare const ROW_LEFT = 20;
+declare const ROW_TOP = 100;
+declare const ROW_WIDTH = 600;
+declare const START_X = 50;
+declare const START_Y = 110;
+declare const MOVE_X = 200;
+declare const MOVE_Y = 300;
+declare const OFFSET_X: number;
+declare const OFFSET_Y: number;
+declare const generatePreview: (args: DraggableArgs, nativeSetDragImage?: DataTransfer['setDragImage']) => void;
+declare const startDrag: (args: DraggableArgs) => void;
+declare const endDrag: (args: DraggableArgs) => void;
+declare const previewOverlays: () => HTMLElement[];
+declare const fireDragOver: (clientX: number, clientY: number) => void;
+/** beforeEach 에서 부른다 */
+declare const trackDragOverListeners: () => void;
+/** afterEach 에서 부른다 — 남은 오버레이·dragover 리스너를 정리하고 spy 를 되돌린다 */
+declare const cleanupDragPreview: () => void;
+declare const ROW_IDS: string[];
+declare const draggableTable: (onRowDrop: TableBodyProps['onRowDrop']) => import("react").FunctionComponentElement<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "draggable" | "ref"> & {
+    type?: import("../types").TableType | undefined;
+    fixedHeader?: boolean | undefined;
+    maxHeight?: string | number | undefined;
+    hoverable?: boolean | undefined;
+    selectable?: boolean | undefined;
+    horizontalScroll?: boolean | undefined;
+    minWidth?: string | number | undefined;
+    draggable?: boolean | undefined;
+    children: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+type RowSpec = {
+    id: string;
+    selected?: boolean;
+    disabled?: boolean;
+    withDragCell?: boolean;
+};
+declare const customTable: (rows: RowSpec[], tableProps?: Partial<TableProps>, bodyProps?: Partial<TableBodyProps>) => import("react").FunctionComponentElement<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "draggable" | "ref"> & {
+    type?: import("../types").TableType | undefined;
+    fixedHeader?: boolean | undefined;
+    maxHeight?: string | number | undefined;
+    hoverable?: boolean | undefined;
+    selectable?: boolean | undefined;
+    horizontalScroll?: boolean | undefined;
+    minWidth?: string | number | undefined;
+    draggable?: boolean | undefined;
+    children: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export { type DraggableArgs, type DropTargetArgs, type MonitorCanPayload, type GetInitialDataPayload, type DragData, draggables, dropTargets, monitors, stubRect, ROW_HEIGHT, UPPER_HALF_Y, LOWER_HALF_Y, rowOf, draggableArgsOf, dropTargetArgsOf, sourceDataOf, targetDataOf, dropOnMonitors, fireRowEvent, ROW_LEFT, ROW_TOP, ROW_WIDTH, START_X, START_Y, MOVE_X, MOVE_Y, OFFSET_X, OFFSET_Y, generatePreview, startDrag, endDrag, previewOverlays, fireDragOver, trackDragOverListeners, cleanupDragPreview, ROW_IDS, draggableTable, customTable, };