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

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

@@ -0,0 +1,230 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _dndPreview = require("../dnd-preview");
+// @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 후보)이 다룬다.
+
+const BADGE_HALF = _dndPreview.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;
+(0, _vitest.beforeEach)(() => {
+  getComputedStyleSpy = _vitest.vi.spyOn(window, 'getComputedStyle').mockImplementation(() => ({
+    getPropertyValue: name => CSS_VARS[name] ?? ''
+  }));
+});
+(0, _vitest.afterEach)(() => {
+  document.body.innerHTML = '';
+  _vitest.vi.restoreAllMocks();
+});
+/** 원본 테이블에 행 count 개를 그리고 행 목록을 돌려준다. 각 행은 data-row 로 식별한다. */
+const mountRows = function (count) {
+  let rowClasses = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  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`;
+(0, _vitest.describe)('buildDragPreview — 행 1개 (DP-01)', () => {
+  (0, _vitest.it)('DP-01 배지·요약 없이 카드 1장을 zIndex 1, 배지 절반 오프셋, 반올림한 행 크기로 만든다', () => {
+    const [row] = mountRows(1);
+    const preview = (0, _dndPreview.buildDragPreview)([row], ROW_RECT);
+    const [card] = cardsOf(preview);
+    (0, _vitest.expect)(preview.classList.contains('ncua-table-dnd-preview')).toBe(true);
+    (0, _vitest.expect)(preview.querySelector('.ncua-table-dnd-preview__badge')).toBeNull();
+    (0, _vitest.expect)(preview.querySelector('.ncua-table-dnd-preview__summary')).toBeNull();
+    (0, _vitest.expect)(card.style.zIndex).toBe('1');
+    (0, _vitest.expect)(card.style.top).toBe(px(BADGE_HALF));
+    (0, _vitest.expect)(card.style.left).toBe(px(BADGE_HALF));
+    (0, _vitest.expect)(card.style.width).toBe(px(ROUNDED_WIDTH));
+    (0, _vitest.expect)(card.style.height).toBe(px(ROUNDED_HEIGHT));
+  });
+  (0, _vitest.it)('DP-01 컨테이너는 (배지 절반 + 행 폭) × (배지 절반 + 행 높이) 다', () => {
+    const [row] = mountRows(1);
+    const preview = (0, _dndPreview.buildDragPreview)([row], ROW_RECT);
+    (0, _vitest.expect)(preview.style.width).toBe(px(BADGE_HALF + ROUNDED_WIDTH));
+    (0, _vitest.expect)(preview.style.height).toBe(px(BADGE_HALF + ROUNDED_HEIGHT));
+  });
+  (0, _vitest.it)('DP-01 카드 table 은 원본 closest(table) 의 className 과 카드 폭을, tbody 는 ncua-table__body 를 갖고 행 복제본을 담는다', () => {
+    const [row] = mountRows(1);
+    const [card] = cardsOf((0, _dndPreview.buildDragPreview)([row], ROW_RECT));
+    const table = card.querySelector('table');
+    const clone = clonedRowOf(card);
+    (0, _vitest.expect)(table.className).toBe(TABLE_CLASS);
+    (0, _vitest.expect)(table.style.width).toBe(px(ROUNDED_WIDTH));
+    (0, _vitest.expect)(table.querySelector('tbody')?.className).toBe('ncua-table__body');
+    (0, _vitest.expect)(clone).not.toBe(row);
+    (0, _vitest.expect)(clone.dataset.row).toBe('0');
+    (0, _vitest.expect)(clone.textContent).toBe('행 0');
+  });
+});
+(0, _vitest.describe)('buildDragPreview — 행 2~3개 적층 (DP-02)', () => {
+  (0, _vitest.it)('DP-02 배지를 먼저 붙이고 카드는 뒤 행부터(rows[n−1] … rows[0]) 붙인다', () => {
+    const rows = mountRows(MAX_STACKED_ROW_COUNT);
+    const preview = (0, _dndPreview.buildDragPreview)(rows, ROW_RECT);
+    (0, _vitest.expect)(preview.firstElementChild?.classList.contains('ncua-table-dnd-preview__badge')).toBe(true);
+    (0, _vitest.expect)(cardsOf(preview).map(card => clonedRowOf(card).dataset.row)).toEqual(['2', '1', '0']);
+  });
+  (0, _vitest.it)('DP-02 i 번째 행 카드는 zIndex n−i, 오프셋 배지 절반 + 5i, 폭 행 폭 − 5i 다', () => {
+    const rows = mountRows(MAX_STACKED_ROW_COUNT);
+    const cards = cardsOf((0, _dndPreview.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;
+      (0, _vitest.expect)(card.style.zIndex).toBe(String(MAX_STACKED_ROW_COUNT - index));
+      (0, _vitest.expect)(card.style.top).toBe(px(BADGE_HALF + shift));
+      (0, _vitest.expect)(card.style.left).toBe(px(BADGE_HALF + shift));
+      (0, _vitest.expect)(card.style.width).toBe(px(ROUNDED_WIDTH - shift));
+      (0, _vitest.expect)(card.style.height).toBe(px(ROUNDED_HEIGHT));
+      (0, _vitest.expect)(card.querySelector('table').style.width).toBe(px(ROUNDED_WIDTH - shift));
+    };
+    expectCardGeometry(0);
+    expectCardGeometry(1);
+    expectCardGeometry(2);
+  });
+  (0, _vitest.it)('DP-02 컨테이너 높이는 배지 절반 + 행 높이 + 5 × (n − 1) 이다', () => {
+    (0, _vitest.expect)((0, _dndPreview.buildDragPreview)(mountRows(STACKED_ROW_COUNT), ROW_RECT).style.height).toBe(px(BADGE_HALF + ROUNDED_HEIGHT + STACK_OFFSET));
+    (0, _vitest.expect)((0, _dndPreview.buildDragPreview)(mountRows(MAX_STACKED_ROW_COUNT), ROW_RECT).style.height).toBe(px(BADGE_HALF + ROUNDED_HEIGHT + STACK_OFFSET * (MAX_STACKED_ROW_COUNT - 1)));
+  });
+});
+(0, _vitest.describe)('buildDragPreview — 행 4개 이상 요약 카드 (DP-03)', () => {
+  (0, _vitest.it)('DP-03 요약 카드를 배지 다음에 붙이고 위치·크기는 최대 적층 오프셋(15) 기준이다', () => {
+    const preview = (0, _dndPreview.buildDragPreview)(mountRows(OVER_MAX_ROW_COUNT), ROW_RECT);
+    const summary = preview.children[1];
+    (0, _vitest.expect)(summary.classList.contains('ncua-table-dnd-preview__summary')).toBe(true);
+    (0, _vitest.expect)(summary.style.top).toBe(px(BADGE_HALF + MAX_STACK_OFFSET));
+    (0, _vitest.expect)(summary.style.left).toBe(px(BADGE_HALF + MAX_STACK_OFFSET));
+    (0, _vitest.expect)(summary.style.width).toBe(px(ROUNDED_WIDTH - MAX_STACK_OFFSET));
+    (0, _vitest.expect)(summary.style.height).toBe(px(ROUNDED_HEIGHT));
+  });
+  (0, _vitest.it)('DP-03 배지는 전체 행 수를 보이고 카드는 앞 3행만 만든다', () => {
+    const preview = (0, _dndPreview.buildDragPreview)(mountRows(OVER_MAX_ROW_COUNT), ROW_RECT);
+    (0, _vitest.expect)(preview.querySelector('.ncua-table-dnd-preview__badge')?.textContent).toBe(String(OVER_MAX_ROW_COUNT));
+    (0, _vitest.expect)(cardsOf(preview).map(card => clonedRowOf(card).dataset.row)).toEqual(['2', '1', '0']);
+  });
+  (0, _vitest.it)('DP-03 컨테이너 높이는 배지 절반 + 행 높이 + 15 다', () => {
+    const preview = (0, _dndPreview.buildDragPreview)(mountRows(OVER_MAX_ROW_COUNT), ROW_RECT);
+    (0, _vitest.expect)(preview.style.height).toBe(px(BADGE_HALF + ROUNDED_HEIGHT + MAX_STACK_OFFSET));
+    (0, _vitest.expect)(preview.style.width).toBe(px(BADGE_HALF + ROUNDED_WIDTH));
+  });
+});
+(0, _vitest.describe)('buildDragPreview — 행 상태별 배경 (DP-04)', () => {
+  _vitest.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((0, _dndPreview.buildDragPreview)([row], ROW_RECT));
+    (0, _vitest.expect)(card.style.backgroundColor).toBe(expected);
+    (0, _vitest.expect)(clonedRowOf(card).style.backgroundColor).toBe(expected);
+  });
+  (0, _vitest.it)('DP-04 CSS 변수는 documentElement 의 계산 스타일에서 읽는다', () => {
+    const [row] = mountRows(1);
+    (0, _dndPreview.buildDragPreview)([row], ROW_RECT);
+    (0, _vitest.expect)(getComputedStyleSpy).toHaveBeenCalledWith(document.documentElement);
+  });
+});
+(0, _vitest.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;
+  });
+  (0, _vitest.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((0, _dndPreview.buildDragPreview)([row], ROW_RECT));
+    const clones = Array.from(clonedRowOf(card).querySelectorAll('input[type="checkbox"]'));
+    (0, _vitest.expect)(clones.map(input => input.checked)).toEqual([true, false]);
+  });
+  (0, _vitest.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);
+    _vitest.vi.spyOn(firstCell, 'getBoundingClientRect').mockReturnValue({
+      width: CELL_WIDTH_FRACTION
+    });
+    _vitest.vi.spyOn(secondCell, 'getBoundingClientRect').mockReturnValue({
+      width: CELL_WIDTH_INTEGER
+    });
+    const [card] = cardsOf((0, _dndPreview.buildDragPreview)([row], ROW_RECT));
+    const cloneCells = Array.from(clonedRowOf(card).cells);
+    (0, _vitest.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)]]);
+  });
+  (0, _vitest.it)('DP-05 원본 행은 제자리에 남고 배경·셀 폭이 바뀌지 않는다', () => {
+    const rows = mountRows(STACKED_ROW_COUNT, ['ncua-table__row--selected']);
+    const originalParent = rows[0].parentElement;
+    (0, _dndPreview.buildDragPreview)(rows, ROW_RECT);
+    (0, _vitest.expect)(rows.map(row => row.parentElement)).toEqual([originalParent, originalParent]);
+    (0, _vitest.expect)(originalParent?.children).toHaveLength(STACKED_ROW_COUNT);
+    (0, _vitest.expect)(rows[0].style.backgroundColor).toBe('');
+    (0, _vitest.expect)(rows[0].cells[0].style.width).toBe('');
+  });
+});
+(0, _vitest.describe)('buildDragPreview — 코너 (DP-06)', () => {
+  (0, _vitest.it)('DP-06 table 밖의 행이면 카드 table 에 className 을 두지 않는다', () => {
+    const row = document.createElement('tr');
+    row.appendChild(document.createElement('td'));
+    const [card] = cardsOf((0, _dndPreview.buildDragPreview)([row], ROW_RECT));
+    (0, _vitest.expect)(card.querySelector('table')?.className).toBe('');
+  });
+  (0, _vitest.it)('DP-06 rows 가 비어 있으면 자식 없는 컨테이너를 예외 없이 돌려준다', () => {
+    const preview = (0, _dndPreview.buildDragPreview)([], ROW_RECT);
+    (0, _vitest.expect)(preview.classList.contains('ncua-table-dnd-preview')).toBe(true);
+    (0, _vitest.expect)(preview.children).toHaveLength(0);
+  });
+});

package/dist/cjs/src/components/data-display/table/__tests__/tableDndTestUtils.js

@@ -0,0 +1,266 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.trackDragOverListeners = exports.targetDataOf = exports.stubRect = exports.startDrag = exports.sourceDataOf = exports.rowOf = exports.previewOverlays = exports.monitors = exports.generatePreview = exports.fireRowEvent = exports.fireDragOver = exports.endDrag = exports.dropTargets = exports.dropTargetArgsOf = exports.dropOnMonitors = exports.draggables = exports.draggableTable = exports.draggableArgsOf = exports.customTable = exports.cleanupDragPreview = exports.UPPER_HALF_Y = exports.START_Y = exports.START_X = exports.ROW_WIDTH = exports.ROW_TOP = exports.ROW_LEFT = exports.ROW_IDS = exports.ROW_HEIGHT = exports.OFFSET_Y = exports.OFFSET_X = exports.MOVE_Y = exports.MOVE_X = exports.LOWER_HALF_Y = void 0;
+var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var _react = require("react");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _dndPreview = require("../dnd-preview");
+var _Table = require("../Table");
+// React Table 행 드래그앤드롭 테스트(Table.dnd·Table.dnd.dragCell) 공용 조회·조작 헬퍼.
+// vitest include 가 *.test.ts 만 수집하므로 이 파일은 테스트로 실행되지 않는다.
+
+/**
+ * 각 테스트 파일이 이 형태로 adapter 를 mock 해야 아래 조회가 동작한다.
+ * (팩토리를 여기서 export 해 import 하면 이 파일 → Table → adapter 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()),
+ * }));
+ */
+const activeRegistrations = register => {
+  const {
+    calls,
+    results
+  } = _vitest.vi.mocked(register).mock;
+  return calls.filter((_, index) => _vitest.vi.mocked(results[index].value).mock.calls.length === 0).map(_ref => {
+    let [args] = _ref;
+    return args;
+  });
+};
+/** cleanup 이 아직 불리지 않은 registration 만 등록 순서대로 돌려준다 */
+const draggables = () => activeRegistrations(_adapter.draggable);
+exports.draggables = draggables;
+const dropTargets = () => activeRegistrations(_adapter.dropTargetForElements);
+exports.dropTargets = dropTargets;
+const monitors = () => activeRegistrations(_adapter.monitorForElements);
+// ── 조회 ────────────────────────────────────────────────────
+exports.monitors = monitors;
+const stubRect = (element, rect) => {
+  const resolved = {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+    ...rect
+  };
+  element.getBoundingClientRect = () => ({
+    ...resolved,
+    toJSON: () => resolved
+  });
+};
+exports.stubRect = stubRect;
+const ROW_HEIGHT = exports.ROW_HEIGHT = 40;
+const UPPER_HALF_Y = exports.UPPER_HALF_Y = 10;
+const LOWER_HALF_Y = exports.LOWER_HALF_Y = 30;
+const rowOf = function (dragId) {
+  let scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
+  return scope.querySelector(`tr[data-draggable-id="${dragId}"]`);
+};
+/** 드래그 핸들(button)이 scope 안의 dragId 행에 속한 draggable registration */
+exports.rowOf = rowOf;
+const draggableArgsOf = function (dragId) {
+  let scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
+  const row = rowOf(dragId, scope);
+  const args = draggables().find(entry => row?.contains(entry.element));
+  if (!args) throw new Error(`draggable not registered: ${dragId}`);
+  return args;
+};
+exports.draggableArgsOf = draggableArgsOf;
+const dropTargetArgsOf = dragId => {
+  const args = dropTargets().find(entry => entry.element.dataset.draggableId === dragId);
+  if (!args) throw new Error(`drop target not registered: ${dragId}`);
+  return args;
+};
+exports.dropTargetArgsOf = dropTargetArgsOf;
+const sourceDataOf = function (dragId) {
+  let scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
+  const args = draggableArgsOf(dragId, scope);
+  if (!args.getInitialData) throw new Error(`getInitialData missing: ${dragId}`);
+  return args.getInitialData({});
+};
+/** 행 dropTarget 의 getData 를 실제 closest-edge 로 실행해 target data 를 만든다. */
+exports.sourceDataOf = sourceDataOf;
+const targetDataOf = (dragId, clientY, source) => {
+  const args = dropTargetArgsOf(dragId);
+  if (!args.getData) throw new Error(`getData missing: ${dragId}`);
+  stubRect(args.element, {
+    top: 0,
+    bottom: ROW_HEIGHT,
+    height: ROW_HEIGHT
+  });
+  return args.getData({
+    input: {
+      clientX: 0,
+      clientY
+    },
+    element: args.element,
+    source: {
+      element: args.element,
+      dragHandle: null,
+      data: source
+    }
+  });
+};
+/** 등록된 모든 monitor 에 drop 을 흘린다 (canMonitor 통과한 것만). */
+exports.targetDataOf = targetDataOf;
+const dropOnMonitors = (source, targets) => {
+  const sourcePayload = {
+    element: document.body,
+    dragHandle: null,
+    data: source
+  };
+  (0, _testUtils.act)(() => {
+    for (const monitor of monitors()) {
+      if (monitor.canMonitor && !monitor.canMonitor({
+        source: sourcePayload
+      })) {
+        continue;
+      }
+      monitor.onDrop?.({
+        source: sourcePayload,
+        location: {
+          current: {
+            dropTargets: targets.map(data => ({
+              data
+            }))
+          }
+        }
+      });
+    }
+  });
+};
+/** 행 dropTarget 콜백에 self(=closest-edge 가 붙은 target data)·source 를 넘긴다. */
+exports.dropOnMonitors = dropOnMonitors;
+const fireRowEvent = (event, targetId, sourceId, clientY) => {
+  const source = sourceDataOf(sourceId);
+  const self = {
+    data: targetDataOf(targetId, clientY, source),
+    element: rowOf(targetId)
+  };
+  (0, _testUtils.act)(() => {
+    dropTargetArgsOf(targetId)[event]?.({
+      self,
+      source: {
+        data: source
+      }
+    });
+  });
+};
+exports.fireRowEvent = fireRowEvent;
+const ROW_LEFT = exports.ROW_LEFT = 20;
+const ROW_TOP = exports.ROW_TOP = 100;
+const ROW_WIDTH = exports.ROW_WIDTH = 600;
+const START_X = exports.START_X = 50;
+const START_Y = exports.START_Y = 110;
+const MOVE_X = exports.MOVE_X = 200;
+const MOVE_Y = exports.MOVE_Y = 300;
+const OFFSET_X = exports.OFFSET_X = START_X - ROW_LEFT + _dndPreview.PREVIEW_BADGE_SIZE / 2;
+const OFFSET_Y = exports.OFFSET_Y = START_Y - ROW_TOP + _dndPreview.PREVIEW_BADGE_SIZE / 2;
+const dragLocation = {
+  initial: {
+    input: {
+      clientX: START_X,
+      clientY: START_Y
+    }
+  }
+};
+// 인자 타입을 적지 않으면 NPM 빌드(declaration: true)가 vi.fn 의 타입을 이름 붙이지 못해 TS2742 로 실패한다
+const generatePreview = function (args) {
+  let nativeSetDragImage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _vitest.vi.fn();
+  (0, _testUtils.act)(() => {
+    args.onGenerateDragPreview?.({
+      nativeSetDragImage,
+      location: dragLocation
+    });
+  });
+};
+exports.generatePreview = generatePreview;
+const startDrag = args => {
+  (0, _testUtils.act)(() => {
+    args.onDragStart?.({
+      location: dragLocation
+    });
+  });
+};
+exports.startDrag = startDrag;
+const endDrag = args => {
+  (0, _testUtils.act)(() => {
+    args.onDrop?.({});
+  });
+};
+exports.endDrag = endDrag;
+const previewOverlays = () => Array.from(document.querySelectorAll('body > .ncua-table-dnd-preview'));
+exports.previewOverlays = previewOverlays;
+const fireDragOver = (clientX, clientY) => {
+  document.dispatchEvent(new MouseEvent('dragover', {
+    clientX,
+    clientY
+  }));
+};
+/** DragCell 이 document 에 붙인 dragover 리스너 — 드래그가 끝나지 않은 채 끝난 테스트의 잔여를 afterEach 에서 뗀다. */
+exports.fireDragOver = fireDragOver;
+const dragOverListeners = [];
+const addDocumentListener = document.addEventListener.bind(document);
+/** beforeEach 에서 부른다 */
+const trackDragOverListeners = () => {
+  _vitest.vi.spyOn(document, 'addEventListener').mockImplementation((type, listener, options) => {
+    if (type === 'dragover' && listener) dragOverListeners.push(listener);
+    addDocumentListener(type, listener, options);
+  });
+};
+/** afterEach 에서 부른다 — 남은 오버레이·dragover 리스너를 정리하고 spy 를 되돌린다 */
+exports.trackDragOverListeners = trackDragOverListeners;
+const cleanupDragPreview = () => {
+  for (const overlay of Array.from(document.querySelectorAll('.ncua-table-dnd-preview'))) overlay.remove();
+  for (const listener of dragOverListeners.splice(0)) document.removeEventListener('dragover', listener);
+  _vitest.vi.mocked(document.addEventListener).mockRestore();
+};
+// ── 테이블 ──────────────────────────────────────────────────
+exports.cleanupDragPreview = cleanupDragPreview;
+const ROW_IDS = exports.ROW_IDS = ['a', 'b', 'c'];
+const draggableTable = onRowDrop => {
+  const rows = ROW_IDS.map(id => /*#__PURE__*/(0, _react.createElement)(_Table.Table.Row, {
+    key: id,
+    dragId: id
+  }, /*#__PURE__*/(0, _react.createElement)(_Table.Table.DragCell, null), /*#__PURE__*/(0, _react.createElement)(_Table.Table.Cell, null, `행 ${id}`)));
+  const body = /*#__PURE__*/(0, _react.createElement)(_Table.Table.Body, {
+    onRowDrop
+  }, rows);
+  return /*#__PURE__*/(0, _react.createElement)(_Table.Table, {
+    draggable: true
+  }, body);
+};
+exports.draggableTable = draggableTable;
+const customTable = function (rows) {
+  let tableProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let bodyProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return /*#__PURE__*/(0, _react.createElement)(_Table.Table, {
+    draggable: true,
+    ...tableProps
+  }, /*#__PURE__*/(0, _react.createElement)(_Table.Table.Body, bodyProps, rows.map(_ref2 => {
+    let {
+      id,
+      selected,
+      disabled,
+      withDragCell = true
+    } = _ref2;
+    return /*#__PURE__*/(0, _react.createElement)(_Table.Table.Row, {
+      key: id,
+      dragId: id || undefined,
+      selected
+    }, withDragCell ? /*#__PURE__*/(0, _react.createElement)(_Table.Table.DragCell, {
+      disabled
+    }) : null, /*#__PURE__*/(0, _react.createElement)(_Table.Table.Cell, null, `행 ${id}`));
+  })));
+};
+exports.customTable = customTable;

package/dist/cjs/src/components/data-display/table/__tests__/tableTestUtils.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.render = exports.cleanupRender = exports.ResizeObserverStub = void 0;
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let root = null;
+let container = null;
+/** 한 테스트 안에서 다시 부르면 같은 root 에 리렌더한다 */
+const render = element => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = (0, _client.createRoot)(container);
+  }
+  (0, _testUtils.act)(() => {
+    root?.render(element);
+  });
+  return container;
+};
+/** 각 테스트 파일의 afterEach 에서 부른다 */
+exports.render = render;
+const cleanupRender = () => {
+  if (root) {
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+  }
+  container?.remove();
+  root = null;
+  container = null;
+};
+exports.cleanupRender = cleanupRender;
+class ResizeObserverStub {
+  observe() {
+    // 스크롤바 훅이 생성만 한다. 레이아웃 통지 계산은 useTableScrollbars.*.test.ts 가 맡는다.
+  }
+  unobserve() {
+    // 위와 같음
+  }
+  disconnect() {
+    // 위와 같음
+  }
+}
+exports.ResizeObserverStub = ResizeObserverStub;