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

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

@@ -0,0 +1,191 @@
+// @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 = function (props) {
+  for (var _len = arguments.length, extra = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    extra[_key - 1] = arguments[_key];
+  }
+  return /*#__PURE__*/createElement(Table, props, /*#__PURE__*/createElement(Table.Body, null, /*#__PURE__*/createElement(Table.Row, null, /*#__PURE__*/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
+    }, /*#__PURE__*/createElement(Table.Footer, null, '푸터'), /*#__PURE__*/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(/*#__PURE__*/createElement(Table, {
+      horizontalScroll: true
+    }, /*#__PURE__*/createElement(Probe)));
+    expect(seen.at(-1)).toEqual({
+      preferPortal: true
+    });
+  });
+  it('TB-15 일반 모드에서는 FloatingProvider 를 제공하지 않는다', () => {
+    const {
+      seen,
+      Probe
+    } = collectFloatingContext();
+    render(/*#__PURE__*/createElement(Table, null, /*#__PURE__*/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 = /*#__PURE__*/createRef();
+    const view = render(/*#__PURE__*/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/esm/src/components/data-display/table/__tests__/Table.test.js

@@ -0,0 +1,379 @@
+// @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 = function (props) {
+  let label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '주문일';
+  return /*#__PURE__*/createElement(Table, null, /*#__PURE__*/createElement(Table.Header, null, /*#__PURE__*/createElement('tr', null, /*#__PURE__*/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 = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let ref = arguments.length > 1 ? arguments[1] : undefined;
+  return /*#__PURE__*/createElement(Table, null, /*#__PURE__*/createElement(Table.Body, null, /*#__PURE__*/createElement(Table.Row, {
+    ...props,
+    ref
+  }, /*#__PURE__*/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(/*#__PURE__*/createElement(Table, null, /*#__PURE__*/createElement(Table.Footer, null, '푸터'), /*#__PURE__*/createElement(Table.Pagination, null, '페이지'), /*#__PURE__*/createElement(Table.Body, null, /*#__PURE__*/createElement(Table.Row, null, /*#__PURE__*/createElement(Table.Cell, null, '셀'))), /*#__PURE__*/createElement(Table.Header, null, /*#__PURE__*/createElement('tr', null, /*#__PURE__*/createElement(Table.HeaderCell, null, '헤더'))), /*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/createElement(Table, null, /*#__PURE__*/createElement(Table.Header, {
+      className: 'h-extra'
+    }, null), /*#__PURE__*/createElement(Table.Body, {
+      className: 'b-extra'
+    }, null), /*#__PURE__*/createElement(Table.Footer, {
+      className: 'f-extra'
+    }, null), /*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/createElement(Table, null, null));
+    expect(ref).toHaveBeenLastCalledWith(null);
+  });
+  it('TB-18 객체 ref 의 current 에 tr 요소를 넣는다', () => {
+    const ref = /*#__PURE__*/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 = /*#__PURE__*/createRef();
+    const cellRef = /*#__PURE__*/createRef();
+    const view = render(/*#__PURE__*/createElement(Table, null, /*#__PURE__*/createElement(Table.Body, null, /*#__PURE__*/createElement(Table.Row, null, /*#__PURE__*/createElement(Table.Cell, {
+      isHeader: true,
+      ref: headerRef,
+      className: 'th-extra'
+    }, '항목'), /*#__PURE__*/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 = /*#__PURE__*/createRef();
+    const view = render(/*#__PURE__*/createElement(Table, null, /*#__PURE__*/createElement(Table.Header, null, /*#__PURE__*/createElement('tr', null, /*#__PURE__*/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(/*#__PURE__*/createElement(Table, null, /*#__PURE__*/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(/*#__PURE__*/createElement(Table, null, /*#__PURE__*/createElement(Table.ColGroup, {
+      widths: [COL_WIDTH]
+    })));
+    expect(view.querySelector('col').style.minWidth).toBe('');
+  });
+});
+describe('Table.Empty (TB-22)', () => {
+  const emptyCell = children => {
+    const view = render(/*#__PURE__*/createElement(Table, null, /*#__PURE__*/createElement(Table.Body, null, /*#__PURE__*/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(/*#__PURE__*/createElement(Table, null, /*#__PURE__*/createElement(Table.Header, null, /*#__PURE__*/createElement('tr', null, /*#__PURE__*/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 = /*#__PURE__*/createRef();
+    const view = render(/*#__PURE__*/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/esm/src/components/data-display/table/__tests__/dnd-context.test.js

@@ -0,0 +1,58 @@
+// @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(/*#__PURE__*/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: ''
+    });
+  });
+});