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

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

@@ -0,0 +1,255 @@
+// @vitest-environment jsdom
+//
+// Table 행 드래그앤드롭 위험 경로 중 drag 쪽(DragCell 핸들 · 드래그 상태 · 프리뷰 · 자동 스크롤) — 위험 목록표 TB-xx (DnD).
+// adapter mock 방식은 Table.dnd.test.ts 머리 주석과 같다. 프리뷰 오버레이 좌표는 행의 getBoundingClientRect stub 으로 만든다.
+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 { createElement } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Table } from '../Table';
+import { cleanupDragPreview, customTable, draggableArgsOf, draggables, draggableTable, endDrag, fireDragOver, generatePreview, MOVE_X, MOVE_Y, OFFSET_X, OFFSET_Y, previewOverlays, ROW_HEIGHT, ROW_IDS, ROW_LEFT, ROW_TOP, ROW_WIDTH, rowOf, START_X, START_Y, sourceDataOf, startDrag, stubRect, trackDragOverListeners, } from './tableDndTestUtils';
+import { cleanupRender, ResizeObserverStub, render } from './tableTestUtils';
+// 등록 기록은 tableDndTestUtils 의 draggables·dropTargets·monitors 가 mock 호출 이력에서 읽는다.
+vi.mock('@atlaskit/pragmatic-drag-and-drop/element/adapter', () => ({
+    draggable: vi.fn(() => vi.fn()),
+    dropTargetForElements: vi.fn(() => vi.fn()),
+    monitorForElements: vi.fn(() => vi.fn()),
+}));
+// 네이티브 프리뷰 비활성화·자동 스크롤은 브라우저 drag 세션이 있어야 의미가 있으므로 호출 여부만 본다.
+vi.mock('@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview', () => ({
+    disableNativeDragPreview: vi.fn(),
+}));
+const autoScrollCleanup = vi.hoisted(() => ({ calls: 0 }));
+vi.mock('@atlaskit/pragmatic-drag-and-drop-auto-scroll/element', () => ({
+    autoScrollForElements: vi.fn(() => () => {
+        autoScrollCleanup.calls += 1;
+    }),
+}));
+beforeEach(() => {
+    vi.stubGlobal('ResizeObserver', ResizeObserverStub);
+    autoScrollCleanup.calls = 0;
+    trackDragOverListeners();
+});
+afterEach(() => {
+    cleanupRender();
+    cleanupDragPreview();
+    vi.clearAllMocks();
+    vi.unstubAllGlobals();
+});
+describe('Table.DragCell 핸들 등록 (TB-08)', () => {
+    it('TB-08 draggable 테이블이면 핸들 button 을 렌더하고 draggable 로 등록한다', () => {
+        const view = render(draggableTable(vi.fn()));
+        const handle = rowOf('a').querySelector('button.ncua-table__drag-handle');
+        expect(handle.type).toBe('button');
+        expect(handle.getAttribute('aria-label')).toBe('행 순서 변경');
+        expect(handle.disabled).toBe(false);
+        expect(handle.querySelector('svg')).not.toBeNull();
+        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} 를 돌려준다', () => {
+        render(draggableTable(vi.fn()));
+        const tableId = sourceDataOf('b').tableId;
+        expect(draggableArgsOf('a').getInitialData?.({})).toEqual({ id: 'a', tableId });
+    });
+    it('TB-08 disabled 면 button 을 disabled 로 렌더하고 draggable 로 등록하지 않는다', () => {
+        render(customTable([{ id: 'a' }, { id: 'b', disabled: true }]));
+        const handle = rowOf('b').querySelector('button');
+        expect(handle.disabled).toBe(true);
+        expect(draggables().map((entry) => entry.element)).not.toContain(handle);
+        expect(draggables()).toHaveLength(1);
+    });
+    it('TB-08 draggable 이 아니면 핸들 없이 children 만 렌더한다', () => {
+        const view = render(createElement(Table, null, createElement(Table.Body, null, createElement(Table.Row, { dragId: 'a' }, createElement(Table.DragCell, { className: 'dc-extra' }, '체크')))));
+        const cell = view.querySelector('td.ncua-table__drag-cell');
+        expect(cell.classList.contains('dc-extra')).toBe(true);
+        expect(cell.querySelector('button')).toBeNull();
+        expect(cell.querySelector('.ncua-table__drag-cell-inner')?.textContent).toBe('체크');
+    });
+    it('TB-08 dragId 가 없는 행의 DragCell 은 핸들은 그리지만 draggable 로 등록하지 않는다', () => {
+        // 현재 동작 고정 — 결함 후보: #588 (끌 수 없는 핸들이 활성 상태로 보여 사용자가 조작 가능하다고 오인)
+        render(customTable([{ id: '' }]));
+        expect(document.querySelector('button.ncua-table__drag-handle')).not.toBeNull();
+        expect(draggables()).toHaveLength(0);
+    });
+    it.todo('TB-08 dragId 가 없는 행의 DragCell 은 핸들을 그리지 않거나 비활성(disabled)으로 표시한다');
+});
+describe('Table.DragCell 드래그 상태 (TB-09)', () => {
+    it('TB-09 onDragStart 이면 행에 is-dragging 을 붙이고 onDrop 이면 뗀다', () => {
+        render(draggableTable(vi.fn()));
+        const args = draggableArgsOf('b');
+        startDrag(args);
+        expect(rowOf('b').classList.contains('is-dragging')).toBe(true);
+        expect(rowOf('a').classList.contains('is-dragging')).toBe(false);
+        endDrag(args);
+        expect(rowOf('b').classList.contains('is-dragging')).toBe(false);
+    });
+});
+describe('Table.DragCell 드래그 프리뷰 (TB-10)', () => {
+    const stubRowRect = (dragId) => {
+        stubRect(rowOf(dragId), { left: ROW_LEFT, top: ROW_TOP, width: ROW_WIDTH, height: ROW_HEIGHT });
+    };
+    it('TB-10 onGenerateDragPreview 는 네이티브 프리뷰를 끄고 body 에는 아직 아무것도 붙이지 않는다', () => {
+        render(draggableTable(vi.fn()));
+        stubRowRect('a');
+        const nativeSetDragImage = vi.fn();
+        generatePreview(draggableArgsOf('a'), nativeSetDragImage);
+        expect(disableNativeDragPreview).toHaveBeenCalledWith({ nativeSetDragImage });
+        expect(previewOverlays()).toHaveLength(0);
+    });
+    it('TB-10 onDragStart 에 오버레이를 body 에 붙이고 포인터-행 오프셋(+배지 절반)만큼 당긴 좌표에 둔다', () => {
+        render(draggableTable(vi.fn()));
+        stubRowRect('a');
+        const args = draggableArgsOf('a');
+        generatePreview(args);
+        startDrag(args);
+        const [overlay] = previewOverlays();
+        expect(previewOverlays()).toHaveLength(1);
+        expect(overlay.style.left).toBe(`${START_X - OFFSET_X}px`);
+        expect(overlay.style.top).toBe(`${START_Y - OFFSET_Y}px`);
+        expect(overlay.querySelector('.ncua-table-dnd-preview__badge')).toBeNull();
+        expect(overlay.querySelectorAll('.ncua-table-dnd-preview__card')).toHaveLength(1);
+    });
+    it('TB-10 dragover 마다 오버레이가 포인터를 따라가고 onDrop 이면 제거·리스너 해제한다', () => {
+        render(draggableTable(vi.fn()));
+        stubRowRect('a');
+        const args = draggableArgsOf('a');
+        generatePreview(args);
+        startDrag(args);
+        const [overlay] = previewOverlays();
+        const dragOverHandler = vi
+            .mocked(document.addEventListener)
+            .mock.calls.filter(([type]) => type === 'dragover')
+            .pop()?.[1];
+        expect(dragOverHandler).toBeDefined();
+        fireDragOver(MOVE_X, MOVE_Y);
+        expect(overlay.style.left).toBe(`${MOVE_X - OFFSET_X}px`);
+        expect(overlay.style.top).toBe(`${MOVE_Y - OFFSET_Y}px`);
+        const removeSpy = vi.spyOn(document, 'removeEventListener');
+        try {
+            endDrag(args);
+            expect(previewOverlays()).toHaveLength(0);
+            expect(overlay.isConnected).toBe(false);
+            // onDrop 이 overlay 를 먼저 비워 onDragOver 가 일찍 빠지므로, 좌표 불변만으로는 리스너 해제를 증명할 수 없다
+            expect(removeSpy).toHaveBeenCalledWith('dragover', dragOverHandler);
+        }
+        finally {
+            removeSpy.mockRestore();
+        }
+    });
+    it('TB-10 onDrop 뒤 다음 드래그는 프리뷰 생성 없이 onDragStart 만 와도 오버레이를 만들지 않는다 (pendingPreview 초기화)', () => {
+        render(draggableTable(vi.fn()));
+        stubRowRect('a');
+        const args = draggableArgsOf('a');
+        generatePreview(args);
+        startDrag(args);
+        endDrag(args);
+        startDrag(args);
+        expect(previewOverlays()).toHaveLength(0);
+        endDrag(args);
+    });
+    it('TB-10 선택된 행을 끌면 같은 body 의 선택 행 전부로 프리뷰를 만들고 개수 배지를 붙인다', () => {
+        render(customTable([{ id: 'a', selected: true }, { id: 'b' }, { id: 'c', selected: true }]));
+        stubRowRect('a');
+        const args = draggableArgsOf('a');
+        generatePreview(args);
+        startDrag(args);
+        const [overlay] = previewOverlays();
+        expect(overlay.querySelector('.ncua-table-dnd-preview__badge')?.textContent).toBe('2');
+        expect(overlay.querySelectorAll('.ncua-table-dnd-preview__card')).toHaveLength(2);
+        endDrag(args);
+    });
+    it('TB-10 선택된 행이 하나뿐이면 단일 행 프리뷰다', () => {
+        render(customTable([{ id: 'a', selected: true }, { id: 'b' }]));
+        stubRowRect('a');
+        const args = draggableArgsOf('a');
+        generatePreview(args);
+        startDrag(args);
+        expect(previewOverlays()[0].querySelector('.ncua-table-dnd-preview__badge')).toBeNull();
+        endDrag(args);
+    });
+    it('TB-10 선택되지 않은 행을 끌면 다른 선택 행이 있어도 그 행만 프리뷰한다', () => {
+        render(customTable([{ id: 'a' }, { id: 'b', selected: true }, { id: 'c', selected: true }]));
+        stubRowRect('a');
+        const args = draggableArgsOf('a');
+        generatePreview(args);
+        startDrag(args);
+        expect(previewOverlays()[0].querySelectorAll('.ncua-table-dnd-preview__card')).toHaveLength(1);
+        endDrag(args);
+    });
+    it('TB-10 Table.Body 가 아닌 tbody 안의 선택 행이면 body 를 못 찾아 단일 행 프리뷰다', () => {
+        render(createElement(Table, { draggable: true }, createElement('tbody', null, ['a', 'b'].map((id) => createElement(Table.Row, { key: id, dragId: id, selected: true }, createElement(Table.DragCell, null))))));
+        stubRowRect('a');
+        const args = draggableArgsOf('a');
+        generatePreview(args);
+        startDrag(args);
+        expect(previewOverlays()[0].querySelector('.ncua-table-dnd-preview__badge')).toBeNull();
+        endDrag(args);
+    });
+    it('TB-10 drop 없이 onDragStart 가 두 번 오면 첫 오버레이가 body 에 남는다', () => {
+        // 현재 동작 고정 — 결함 후보: #588
+        // (onDragStart 가 drop 없이 다시 오면 이전 오버레이·dragover 리스너를 정리하지 않고 덮어써
+        //  첫 오버레이가 body 에 남는다. 라이브러리가 한 드래그에 onDragStart 를 두 번 부르지 않는 한 발생하지 않음)
+        render(draggableTable(vi.fn()));
+        stubRowRect('a');
+        const args = draggableArgsOf('a');
+        generatePreview(args);
+        startDrag(args);
+        startDrag(args);
+        const [stale, current] = previewOverlays();
+        endDrag(args);
+        fireDragOver(MOVE_X, MOVE_Y);
+        expect(previewOverlays()).toEqual([stale]);
+        expect(current.isConnected).toBe(false);
+        expect(stale.style.left).toBe(`${START_X - OFFSET_X}px`);
+    });
+    it.todo('TB-10 onDragStart 가 drop 없이 다시 와도 이전 오버레이·dragover 리스너를 정리한다');
+});
+describe('Table 자동 스크롤 (TB-16)', () => {
+    const MAX_HEIGHT = 300;
+    it('TB-16 draggable + fixedHeader + maxHeight 이면 scroll-container 에 autoScroll 을 등록하고 언마운트 시 해제한다', () => {
+        const view = render(customTable([{ id: 'a' }], { fixedHeader: true, maxHeight: MAX_HEIGHT }));
+        expect(autoScrollForElements).toHaveBeenCalledTimes(1);
+        expect(autoScrollForElements).toHaveBeenCalledWith({
+            element: view.querySelector('.ncua-table__scroll-container'),
+        });
+        render(createElement('div'));
+        expect(autoScrollCleanup.calls).toBe(1);
+    });
+    it.each([
+        ['fixedHeader 없음', { maxHeight: MAX_HEIGHT }],
+        ['maxHeight 없음', { fixedHeader: true }],
+        ['draggable=false', { draggable: false, fixedHeader: true, maxHeight: MAX_HEIGHT }],
+        ['type=vertical', { type: 'vertical', fixedHeader: true, maxHeight: MAX_HEIGHT }],
+    ])('TB-16 %s 이면 autoScroll 을 등록하지 않는다', (_label, props) => {
+        render(customTable([{ id: 'a' }], props));
+        expect(autoScrollForElements).not.toHaveBeenCalled();
+    });
+});
+describe('Table.DragCell 행 밖 핸들 (TB-26)', () => {
+    it('TB-26 핸들이 tr 밖에 있으면 프리뷰를 건너뛰고 onDragStart 는 is-dragging 만 붙인다', () => {
+        render(draggableTable(vi.fn()));
+        const args = draggableArgsOf('a');
+        const handle = args.element;
+        const homeRow = rowOf('a');
+        document.body.appendChild(handle);
+        try {
+            generatePreview(args);
+            startDrag(args);
+            expect(disableNativeDragPreview).not.toHaveBeenCalled();
+            expect(previewOverlays()).toHaveLength(0);
+            expect(homeRow.classList.contains('is-dragging')).toBe(true);
+            endDrag(args);
+        }
+        finally {
+            handle.remove();
+        }
+    });
+    it('TB-26 언마운트 뒤 늦게 온 onGenerateDragPreview 는 핸들 ref 가 비어 아무것도 하지 않는다', () => {
+        render(draggableTable(vi.fn()));
+        const args = draggableArgsOf('a');
+        render(createElement('div'));
+        generatePreview(args);
+        expect(disableNativeDragPreview).not.toHaveBeenCalled();
+    });
+});

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

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

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

@@ -0,0 +1,240 @@
+// @vitest-environment jsdom
+//
+// Table 행 드래그앤드롭 위험 경로 중 drop 쪽(Body monitor · Row dropTarget · tableId) — 위험 목록표 TB-xx (DnD).
+// jsdom 은 HTML5 drag 이벤트로 pragmatic-drag-and-drop 을 구동할 수 없어, adapter 의
+// draggable · dropTargetForElements · monitorForElements 를 mock 해 넘겨받은 옵션을 캡처하고
+// 콜백(getInitialData · getData · canMonitor · onDrop)을 직접 호출한다.
+// closest-edge(hitbox) 는 실제 구현을 써서 행의 getBoundingClientRect stub 으로 top/bottom 을 만든다.
+// 핸들·프리뷰·자동 스크롤(drag 쪽)은 Table.dnd.dragCell.test.ts 가 맡는다.
+import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { createElement } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { customTable, draggables, draggableTable, dropOnMonitors, dropTargets, fireRowEvent, LOWER_HALF_Y, monitors, rowOf, sourceDataOf, targetDataOf, UPPER_HALF_Y, } from './tableDndTestUtils';
+import { cleanupRender, render } from './tableTestUtils';
+// 등록 기록은 tableDndTestUtils 의 draggables·dropTargets·monitors 가 mock 호출 이력에서 읽는다.
+vi.mock('@atlaskit/pragmatic-drag-and-drop/element/adapter', () => ({
+    draggable: vi.fn(() => vi.fn()),
+    dropTargetForElements: vi.fn(() => vi.fn()),
+    monitorForElements: vi.fn(() => vi.fn()),
+}));
+afterEach(() => {
+    cleanupRender();
+    vi.clearAllMocks();
+});
+const DRAG_OVER_TOP = 'ncua-table__row--drag-over-top';
+const DRAG_OVER_BOTTOM = 'ncua-table__row--drag-over-bottom';
+describe('Table 행 드롭 → onRowDrop (TB-01)', () => {
+    it('TB-01 다른 행의 아래쪽 절반에 놓으면 onRowDrop(fromId, toId, "bottom") 을 1회 호출한다', () => {
+        const onRowDrop = vi.fn();
+        render(draggableTable(onRowDrop));
+        const source = sourceDataOf('a');
+        dropOnMonitors(source, [targetDataOf('b', LOWER_HALF_Y, source)]);
+        expect(onRowDrop).toHaveBeenCalledTimes(1);
+        expect(onRowDrop).toHaveBeenCalledWith('a', 'b', 'bottom');
+    });
+    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');
+    });
+    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');
+    });
+    it('TB-01 여러 drop target 이 겹치면 가장 안쪽(첫 번째) target 기준으로 전달한다', () => {
+        const onRowDrop = vi.fn();
+        render(draggableTable(onRowDrop));
+        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');
+    });
+    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(target.id).toBe('b');
+        expect(target.tableId).toBe(source.tableId);
+    });
+});
+describe('Table.Body drop 가드 (TB-03)', () => {
+    it('TB-03 onRowDrop 이 없으면 drop 이 와도 예외 없이 무시한다', () => {
+        render(customTable([{ id: 'a' }, { id: 'b' }]));
+        const source = sourceDataOf('a');
+        expect(() => dropOnMonitors(source, [targetDataOf('b', LOWER_HALF_Y, source)])).not.toThrow();
+    });
+    it('TB-03 drop target 이 없으면(테이블 밖에 놓음) onRowDrop 을 호출하지 않는다', () => {
+        const onRowDrop = vi.fn();
+        render(draggableTable(onRowDrop));
+        dropOnMonitors(sourceDataOf('a'), []);
+        expect(onRowDrop).not.toHaveBeenCalled();
+    });
+    it('TB-03 자기 자신 위에 놓으면(fromId === toId) onRowDrop 을 호출하지 않는다', () => {
+        const onRowDrop = vi.fn();
+        render(draggableTable(onRowDrop));
+        const source = sourceDataOf('a');
+        dropOnMonitors(source, [targetDataOf('a', LOWER_HALF_Y, source)]);
+        expect(onRowDrop).not.toHaveBeenCalled();
+    });
+    it.each([
+        ['source id 가 숫자', { id: 1 }, { id: 'b' }],
+        ['target id 가 숫자', { id: 'a' }, { id: 2 }],
+        ['target id 가 없음', { id: 'a' }, {}],
+    ])('TB-03 %s 이면 onRowDrop 을 호출하지 않는다', (_label, sourcePatch, targetPatch) => {
+        const onRowDrop = vi.fn();
+        render(draggableTable(onRowDrop));
+        const source = sourceDataOf('a');
+        dropOnMonitors({ ...source, ...sourcePatch }, [{ tableId: source.tableId, ...targetPatch }]);
+        expect(onRowDrop).not.toHaveBeenCalled();
+    });
+});
+describe('Table.Body canMonitor — 테이블 격리 (TB-04)', () => {
+    const twoTables = (first, second) => createElement('div', null, createElement('section', { key: 'first', id: 'first' }, draggableTable(first)), createElement('section', { key: 'second', id: 'second' }, draggableTable(second)));
+    const sectionOf = (sectionId) => document.getElementById(sectionId);
+    it('TB-04 다른 tableId 의 source 는 canMonitor 가 거부해 그 테이블의 onRowDrop 이 불리지 않는다', () => {
+        const first = vi.fn();
+        const second = vi.fn();
+        render(twoTables(first, second));
+        const source = sourceDataOf('a', sectionOf('first'));
+        dropOnMonitors(source, [{ id: 'b', tableId: source.tableId }]);
+        expect(first).toHaveBeenCalledWith('a', 'b', 'top');
+        expect(second).not.toHaveBeenCalled();
+        expect(sourceDataOf('a', sectionOf('second')).tableId).not.toBe(source.tableId);
+    });
+    it('TB-04 canMonitor 는 자기 tableId 의 source 만 통과시킨다', () => {
+        render(twoTables(vi.fn(), vi.fn()));
+        // monitor 는 Body effect 등록 순서(=DOM 순서)로 쌓이므로 첫 번째가 #first 테이블 것이다.
+        const [firstMonitor, secondMonitor] = monitors();
+        const source = sourceDataOf('a', sectionOf('second'));
+        const payload = { source: { data: source } };
+        expect(firstMonitor.canMonitor?.(payload)).toBe(false);
+        expect(secondMonitor.canMonitor?.(payload)).toBe(true);
+    });
+    it('TB-04 다른 테이블의 행 위에 놓으면 source 테이블의 onRowDrop 이 상대 테이블 행 id 로 호출된다', () => {
+        // 현재 동작 고정 — 결함 후보: #588
+        // (행 dropTarget 에 canDrop 이 없고 Body.onDrop 이 target.data.tableId 를 확인하지 않아,
+        //  A 테이블 행을 B 테이블 행 위에 놓으면 A 의 onRowDrop 이 B 의 행 id 로 호출된다)
+        const first = vi.fn();
+        const second = vi.fn();
+        render(twoTables(first, second));
+        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(second).not.toHaveBeenCalled();
+    });
+    it.todo('TB-04 다른 테이블의 행 위에 놓으면 어느 테이블의 onRowDrop 도 호출하지 않는다 (canDrop 또는 target tableId 검사)');
+});
+describe('Table.Body onRowDrop ref 갱신 (TB-05)', () => {
+    it('TB-05 onRowDrop 을 교체해도 monitor 를 재구독하지 않고 최신 콜백을 호출한다', () => {
+        const first = vi.fn();
+        const latest = vi.fn();
+        render(draggableTable(first));
+        const monitorBefore = monitors()[0];
+        render(draggableTable(latest));
+        const source = sourceDataOf('a');
+        dropOnMonitors(source, [targetDataOf('b', LOWER_HALF_Y, source)]);
+        expect(monitors()).toHaveLength(1);
+        expect(monitors()[0]).toBe(monitorBefore);
+        expect(first).not.toHaveBeenCalled();
+        expect(latest).toHaveBeenCalledWith('a', 'b', 'bottom');
+    });
+    it('TB-05 onRowDrop 을 undefined 로 바꾸면 이후 drop 은 무시된다', () => {
+        const first = vi.fn();
+        render(draggableTable(first));
+        render(draggableTable(undefined));
+        const source = sourceDataOf('a');
+        dropOnMonitors(source, [targetDataOf('b', LOWER_HALF_Y, source)]);
+        expect(first).not.toHaveBeenCalled();
+    });
+    it('TB-05 언마운트하면 monitor 구독을 해제한다', () => {
+        render(draggableTable(vi.fn()));
+        expect(monitors()).toHaveLength(1);
+        render(createElement('div'));
+        expect(monitors()).toHaveLength(0);
+    });
+});
+describe('Table.Row dropTarget 등록 (TB-06)', () => {
+    it('TB-06 draggable 테이블에서 dragId 가 있는 행만 dropTarget 으로 등록한다', () => {
+        render(customTable([{ id: 'a' }, { id: '', withDragCell: false }]));
+        expect(dropTargets().map((entry) => entry.element.dataset.draggableId)).toEqual(['a']);
+    });
+    it('TB-06 draggable 이 아니면 dragId 가 있어도 dropTarget·draggable 을 등록하지 않는다', () => {
+        render(customTable([{ id: 'a' }, { id: 'b' }], { draggable: false }));
+        expect(dropTargets()).toHaveLength(0);
+        expect(draggables()).toHaveLength(0);
+    });
+    it('TB-06 getData 는 {id, tableId} 에 top/bottom 만 허용한 closest edge 를 붙인다 (좌우 0px 이어도 left/right 아님)', () => {
+        render(draggableTable(vi.fn()));
+        const source = sourceDataOf('a');
+        const upper = targetDataOf('b', UPPER_HALF_Y, source);
+        const lower = targetDataOf('b', LOWER_HALF_Y, source);
+        expect(upper).toMatchObject({ id: 'b', tableId: source.tableId });
+        expect(extractClosestEdge(upper)).toBe('top');
+        expect(extractClosestEdge(lower)).toBe('bottom');
+    });
+    it('TB-06 행이 언마운트되면 dropTarget 등록을 해제한다', () => {
+        render(customTable([{ id: 'a' }, { id: 'b' }]));
+        render(customTable([{ id: 'a' }]));
+        expect(dropTargets().map((entry) => entry.element.dataset.draggableId)).toEqual(['a']);
+    });
+});
+describe('Table.Row drag-over 표시 (TB-07)', () => {
+    it.each(['onDragEnter', 'onDrag'])('TB-07 %s: 위쪽 절반이면 drag-over-top 클래스를 붙인다', (event) => {
+        render(draggableTable(vi.fn()));
+        fireRowEvent(event, 'b', 'c', UPPER_HALF_Y);
+        expect(rowOf('b').classList.contains(DRAG_OVER_TOP)).toBe(true);
+        expect(rowOf('b').classList.contains(DRAG_OVER_BOTTOM)).toBe(false);
+    });
+    it.each(['onDragEnter', 'onDrag'])('TB-07 %s: 아래쪽 절반이어도 다음 행이 있으면 표시하지 않는다 (다음 행의 top 과 중복 방지)', (event) => {
+        render(draggableTable(vi.fn()));
+        fireRowEvent(event, 'b', 'a', LOWER_HALF_Y);
+        expect(rowOf('b').classList.contains(DRAG_OVER_TOP)).toBe(false);
+        expect(rowOf('b').classList.contains(DRAG_OVER_BOTTOM)).toBe(false);
+    });
+    it.each(['onDragEnter', 'onDrag'])('TB-07 %s: 마지막 행의 아래쪽 절반이면 drag-over-bottom 을 붙인다', (event) => {
+        render(draggableTable(vi.fn()));
+        fireRowEvent(event, 'c', 'a', LOWER_HALF_Y);
+        expect(rowOf('c').classList.contains(DRAG_OVER_BOTTOM)).toBe(true);
+    });
+    it.each(['onDragEnter', 'onDrag'])('TB-07 %s: 자기 자신 위에서는 표시하지 않는다', (event) => {
+        render(draggableTable(vi.fn()));
+        fireRowEvent(event, 'a', 'a', UPPER_HALF_Y);
+        expect(rowOf('a').classList.contains(DRAG_OVER_TOP)).toBe(false);
+    });
+    it.each(['onDragLeave', 'onDrop'])('TB-07 %s 이면 표시를 지운다', (event) => {
+        render(draggableTable(vi.fn()));
+        fireRowEvent('onDragEnter', 'b', 'c', UPPER_HALF_Y);
+        expect(rowOf('b').classList.contains(DRAG_OVER_TOP)).toBe(true);
+        fireRowEvent(event, 'b', 'c', UPPER_HALF_Y);
+        expect(rowOf('b').classList.contains(DRAG_OVER_TOP)).toBe(false);
+    });
+});
+describe('Table type=vertical + draggable (TB-11)', () => {
+    it('TB-11 vertical 이면 draggable=true 여도 클래스·핸들·dropTarget·draggable 을 만들지 않는다', () => {
+        const view = render(customTable([{ id: 'a' }, { id: 'b' }], { type: 'vertical' }));
+        expect(view.querySelector('.ncua-table')?.classList.contains('ncua-table--draggable')).toBe(false);
+        expect(view.querySelector('button.ncua-table__drag-handle')).toBeNull();
+        expect(dropTargets()).toHaveLength(0);
+        expect(draggables()).toHaveLength(0);
+    });
+});
+describe('Table tableId (TB-25)', () => {
+    it('TB-25 인스턴스마다 다른 tableId 를 쓰고 리렌더해도 유지해 monitor 를 재구독하지 않는다', () => {
+        render(createElement('div', null, draggableTable(vi.fn()), createElement('div', { key: 'x' })));
+        const before = sourceDataOf('a').tableId;
+        const monitorBefore = monitors()[0];
+        render(createElement('div', null, draggableTable(vi.fn()), createElement('div', { key: 'x' }, '변경')));
+        expect(sourceDataOf('a').tableId).toBe(before);
+        expect(monitors()[0]).toBe(monitorBefore);
+        render(createElement('div', null, draggableTable(vi.fn()), createElement('section', { key: 'y' }, draggableTable(vi.fn()))));
+        const ids = new Set(draggables().map((entry) => (entry.getInitialData?.({})).tableId));
+        expect(ids.size).toBe(2);
+    });
+});

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

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

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

@@ -0,0 +1,145 @@
+// @vitest-environment jsdom
+//
+// Table 스크롤 레이아웃 분기 — 위험 목록표 TB-14(fixedHeader) · TB-15(horizontalScroll).
+// 스크롤바 훅이 ResizeObserver 를 쓰므로 jsdom 에 stub 을 깔고, 훅 자체의 계산은
+// useTableScrollbars.*.test.ts 가 맡는다. 여기서는 Table 이 만드는 DOM 구조·인라인 스타일만 본다.
+import { createElement, createRef } from 'react';
+import { act } from 'react-dom/test-utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useFloatingContext } from '../../../../contexts/FloatingContext';
+import { Table } from '../Table';
+import { TABLE_HEADER_HEIGHT } from '../useTableScrollbars';
+import { cleanupRender, ResizeObserverStub, render } from './tableTestUtils';
+const MAX_HEIGHT = 300;
+const MIN_WIDTH = 800;
+const DEFAULT_MIN_WIDTH = 1140;
+beforeEach(() => {
+    vi.stubGlobal('ResizeObserver', ResizeObserverStub);
+});
+afterEach(() => {
+    cleanupRender();
+    vi.unstubAllGlobals();
+});
+const tableWith = (props, ...extra) => createElement(Table, props, createElement(Table.Body, null, createElement(Table.Row, null, createElement(Table.Cell, null, '셀'))), ...extra);
+const queryIn = (view, selector) => view.querySelector(selector);
+describe('Table fixedHeader 스크롤 구조 (TB-14)', () => {
+    it('TB-14 fixedHeader + maxHeight(number) 이면 scroll-area > scroll-container(table) + scrollbar 를 만들고 헤더 높이를 px 로 가산한다', () => {
+        const view = render(tableWith({ fixedHeader: true, maxHeight: MAX_HEIGHT }));
+        const area = queryIn(view, '.ncua-table__scroll-area');
+        const scrollContainer = queryIn(view, '.ncua-table__scroll-container');
+        const scrollbar = queryIn(view, '.ncua-table__scrollbar');
+        expect(area.parentElement).toBe(queryIn(view, '.ncua-table'));
+        expect(scrollContainer.parentElement).toBe(area);
+        expect(scrollContainer.firstElementChild?.tagName).toBe('TABLE');
+        expect(scrollbar.parentElement).toBe(area);
+        expect(scrollbar.getAttribute('aria-hidden')).toBe('true');
+        expect(scrollbar.querySelector('.ncua-table__scrollbar-thumb')).not.toBeNull();
+        expect(scrollContainer.style.maxHeight).toBe(`${MAX_HEIGHT + TABLE_HEADER_HEIGHT}px`);
+    });
+    it('TB-14 maxHeight 가 문자열이면 calc(maxHeight + 헤더 높이px) 로 만든다', () => {
+        const view = render(tableWith({ fixedHeader: true, maxHeight: '50vh' }));
+        // jsdom 의 CSSOM 이 calc 를 보존하는지와 무관하게 style 속성 원문을 확인한다.
+        expect(queryIn(view, '.ncua-table__scroll-container')?.getAttribute('style')).toContain(`calc(50vh + ${TABLE_HEADER_HEIGHT}px)`);
+    });
+    it('TB-14 fixedHeader 만 있고 maxHeight 가 없으면 scroll-area 없이 table 을 바로 렌더한다', () => {
+        const view = render(tableWith({ fixedHeader: true }));
+        expect(queryIn(view, '.ncua-table__scroll-area')).toBeNull();
+        expect(queryIn(view, '.ncua-table__scrollbar')).toBeNull();
+        expect(queryIn(view, '.ncua-table > table.ncua-table__table')).not.toBeNull();
+    });
+    it('TB-14 maxHeight 만 있고 fixedHeader 가 없으면 스크롤 구조를 만들지 않는다', () => {
+        const view = render(tableWith({ maxHeight: MAX_HEIGHT }));
+        expect(queryIn(view, '.ncua-table__scroll-container')).toBeNull();
+        expect(queryIn(view, '.ncua-table > table.ncua-table__table')).not.toBeNull();
+    });
+    it('TB-14 maxHeight=0 은 falsy 라 스크롤 구조를 만들지 않는다', () => {
+        const view = render(tableWith({ fixedHeader: true, maxHeight: 0 }));
+        expect(queryIn(view, '.ncua-table__scroll-area')).toBeNull();
+    });
+});
+describe('Table horizontalScroll 구조 (TB-15)', () => {
+    it('TB-15 h-scroll-container > h-scroll-inner(table) + h-scrollbar 를 만들고 footer 는 .ncua-table, pagination 은 wrapper 에 둔다', () => {
+        const view = render(tableWith({ horizontalScroll: true }, createElement(Table.Footer, null, '푸터'), createElement(Table.Pagination, null, '페이지')));
+        const tableRoot = queryIn(view, '.ncua-table');
+        const horizontalScrollContainer = queryIn(view, '.ncua-table__h-scroll-container');
+        const inner = queryIn(view, '.ncua-table__h-scroll-inner');
+        const hScrollbar = queryIn(view, '.ncua-table__h-scrollbar');
+        expect(horizontalScrollContainer.parentElement).toBe(tableRoot);
+        expect(inner.parentElement).toBe(horizontalScrollContainer);
+        expect(inner.firstElementChild?.tagName).toBe('TABLE');
+        expect(hScrollbar.parentElement).toBe(horizontalScrollContainer);
+        expect(hScrollbar.getAttribute('aria-hidden')).toBe('true');
+        expect(hScrollbar.querySelector('.ncua-table__h-scrollbar-thumb')).not.toBeNull();
+        expect(queryIn(view, '.ncua-table__footer')?.parentElement).toBe(tableRoot);
+        expect(queryIn(view, '.ncua-table__pagination')?.parentElement).toBe(queryIn(view, '.ncua-table-wrapper'));
+        expect(queryIn(view, '.ncua-table__scrollbar')).toBeNull();
+    });
+    it.each([
+        ['기본값', undefined, `${DEFAULT_MIN_WIDTH}px`],
+        ['number', MIN_WIDTH, `${MIN_WIDTH}px`],
+        ['string', '60rem', '60rem'],
+    ])('TB-15 minWidth %s 이면 --ncua-table-min-width 가 %s → %s', (_label, minWidth, expected) => {
+        const view = render(tableWith({ horizontalScroll: true, minWidth }));
+        expect(queryIn(view, '.ncua-table__h-scroll-inner')?.style.getPropertyValue('--ncua-table-min-width')).toBe(expected);
+    });
+    const collectFloatingContext = () => {
+        const seen = [];
+        const Probe = () => {
+            seen.push(useFloatingContext());
+            return null;
+        };
+        return { seen, Probe };
+    };
+    it('TB-15 horizontalScroll 이면 하위 컴포넌트에 FloatingProvider(preferPortal=true) 를 제공한다', () => {
+        const { seen, Probe } = collectFloatingContext();
+        render(createElement(Table, { horizontalScroll: true }, createElement(Probe)));
+        expect(seen.at(-1)).toEqual({ preferPortal: true });
+    });
+    it('TB-15 일반 모드에서는 FloatingProvider 를 제공하지 않는다', () => {
+        const { seen, Probe } = collectFloatingContext();
+        render(createElement(Table, null, createElement(Probe)));
+        expect(seen.at(-1)).toBeNull();
+    });
+    it('TB-15 fixedHeader + maxHeight 와 함께 쓰면 세로 scrollbar 는 scroll-area 안이 아니라 h-scroll-container 의 형제다', () => {
+        const view = render(tableWith({ horizontalScroll: true, fixedHeader: true, maxHeight: MAX_HEIGHT }));
+        const tableRoot = queryIn(view, '.ncua-table');
+        const area = queryIn(view, '.ncua-table__scroll-area');
+        const scrollbars = view.querySelectorAll('.ncua-table__scrollbar');
+        expect(area.parentElement).toBe(queryIn(view, '.ncua-table__h-scroll-inner'));
+        expect(scrollbars).toHaveLength(1);
+        expect(scrollbars[0].parentElement).toBe(tableRoot);
+        expect(queryIn(view, '.ncua-table__h-scroll-container')?.nextElementSibling).toBe(scrollbars[0]);
+        expect(area.querySelector('.ncua-table__scrollbar')).toBeNull();
+    });
+    it('TB-15 horizontalScroll 에서도 ref 는 wrapper, rest 는 .ncua-table 에 가고 CSS 변수를 주입한다', () => {
+        const ref = createRef();
+        const view = render(createElement(Table, { horizontalScroll: true, ref, id: 'hs' }, null));
+        const wrapper = queryIn(view, '.ncua-table-wrapper');
+        expect(ref.current).toBe(wrapper);
+        expect(queryIn(view, '.ncua-table')?.id).toBe('hs');
+        expect(wrapper.style.getPropertyValue('--ncua-table-header-height')).toBe(`${TABLE_HEADER_HEIGHT}px`);
+    });
+    it('TB-15 세로·가로 thumb mousedown 이 각 스크롤바 드래그를 시작해 data-dragging 을 붙이고 mouseup 에 뗀다', () => {
+        const view = render(tableWith({ horizontalScroll: true, fixedHeader: true, maxHeight: MAX_HEIGHT }));
+        const press = (selector) => {
+            act(() => {
+                queryIn(view, selector)?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+            });
+        };
+        const release = () => {
+            act(() => {
+                document.dispatchEvent(new MouseEvent('mouseup'));
+            });
+        };
+        const area = queryIn(view, '.ncua-table__scroll-area');
+        const horizontalScrollContainer = queryIn(view, '.ncua-table__h-scroll-container');
+        press('.ncua-table__scrollbar-thumb');
+        expect(area.hasAttribute('data-dragging')).toBe(true);
+        release();
+        expect(area.hasAttribute('data-dragging')).toBe(false);
+        press('.ncua-table__h-scrollbar-thumb');
+        expect(horizontalScrollContainer.hasAttribute('data-dragging')).toBe(true);
+        release();
+        expect(horizontalScrollContainer.hasAttribute('data-dragging')).toBe(false);
+    });
+});

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

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