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

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

@@ -0,0 +1,240 @@
+// React Table 행 드래그앤드롭 테스트(Table.dnd·Table.dnd.dragCell) 공용 조회·조작 헬퍼.
+// vitest include 가 *.test.ts 만 수집하므로 이 파일은 테스트로 실행되지 않는다.
+import { dropTargetForElements, draggable as makeDraggable, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { createElement } from 'react';
+import { act } from 'react-dom/test-utils';
+import { vi } from 'vitest';
+import { PREVIEW_BADGE_SIZE } from '../dnd-preview';
+import { Table } from '../Table';
+/**
+ * 각 테스트 파일이 이 형태로 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
+  } = vi.mocked(register).mock;
+  return calls.filter((_, index) => vi.mocked(results[index].value).mock.calls.length === 0).map(_ref => {
+    let [args] = _ref;
+    return args;
+  });
+};
+/** cleanup 이 아직 불리지 않은 registration 만 등록 순서대로 돌려준다 */
+const draggables = () => activeRegistrations(makeDraggable);
+const dropTargets = () => activeRegistrations(dropTargetForElements);
+const monitors = () => activeRegistrations(monitorForElements);
+// ── 조회 ────────────────────────────────────────────────────
+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
+  });
+};
+const ROW_HEIGHT = 40;
+const UPPER_HALF_Y = 10;
+const 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 */
+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;
+};
+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;
+};
+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 를 만든다. */
+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 통과한 것만). */
+const dropOnMonitors = (source, targets) => {
+  const sourcePayload = {
+    element: document.body,
+    dragHandle: null,
+    data: source
+  };
+  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 를 넘긴다. */
+const fireRowEvent = (event, targetId, sourceId, clientY) => {
+  const source = sourceDataOf(sourceId);
+  const self = {
+    data: targetDataOf(targetId, clientY, source),
+    element: rowOf(targetId)
+  };
+  act(() => {
+    dropTargetArgsOf(targetId)[event]?.({
+      self,
+      source: {
+        data: source
+      }
+    });
+  });
+};
+const ROW_LEFT = 20;
+const ROW_TOP = 100;
+const ROW_WIDTH = 600;
+const START_X = 50;
+const START_Y = 110;
+const MOVE_X = 200;
+const MOVE_Y = 300;
+const OFFSET_X = START_X - ROW_LEFT + PREVIEW_BADGE_SIZE / 2;
+const OFFSET_Y = START_Y - ROW_TOP + 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] : vi.fn();
+  act(() => {
+    args.onGenerateDragPreview?.({
+      nativeSetDragImage,
+      location: dragLocation
+    });
+  });
+};
+const startDrag = args => {
+  act(() => {
+    args.onDragStart?.({
+      location: dragLocation
+    });
+  });
+};
+const endDrag = args => {
+  act(() => {
+    args.onDrop?.({});
+  });
+};
+const previewOverlays = () => Array.from(document.querySelectorAll('body > .ncua-table-dnd-preview'));
+const fireDragOver = (clientX, clientY) => {
+  document.dispatchEvent(new MouseEvent('dragover', {
+    clientX,
+    clientY
+  }));
+};
+/** DragCell 이 document 에 붙인 dragover 리스너 — 드래그가 끝나지 않은 채 끝난 테스트의 잔여를 afterEach 에서 뗀다. */
+const dragOverListeners = [];
+const addDocumentListener = document.addEventListener.bind(document);
+/** beforeEach 에서 부른다 */
+const trackDragOverListeners = () => {
+  vi.spyOn(document, 'addEventListener').mockImplementation((type, listener, options) => {
+    if (type === 'dragover' && listener) dragOverListeners.push(listener);
+    addDocumentListener(type, listener, options);
+  });
+};
+/** afterEach 에서 부른다 — 남은 오버레이·dragover 리스너를 정리하고 spy 를 되돌린다 */
+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);
+  vi.mocked(document.addEventListener).mockRestore();
+};
+// ── 테이블 ──────────────────────────────────────────────────
+const ROW_IDS = ['a', 'b', 'c'];
+const draggableTable = onRowDrop => {
+  const rows = ROW_IDS.map(id => /*#__PURE__*/createElement(Table.Row, {
+    key: id,
+    dragId: id
+  }, /*#__PURE__*/createElement(Table.DragCell, null), /*#__PURE__*/createElement(Table.Cell, null, `행 ${id}`)));
+  const body = /*#__PURE__*/createElement(Table.Body, {
+    onRowDrop
+  }, rows);
+  return /*#__PURE__*/createElement(Table, {
+    draggable: true
+  }, body);
+};
+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__*/createElement(Table, {
+    draggable: true,
+    ...tableProps
+  }, /*#__PURE__*/createElement(Table.Body, bodyProps, rows.map(_ref2 => {
+    let {
+      id,
+      selected,
+      disabled,
+      withDragCell = true
+    } = _ref2;
+    return /*#__PURE__*/createElement(Table.Row, {
+      key: id,
+      dragId: id || undefined,
+      selected
+    }, withDragCell ? /*#__PURE__*/createElement(Table.DragCell, {
+      disabled
+    }) : null, /*#__PURE__*/createElement(Table.Cell, null, `행 ${id}`));
+  })));
+};
+export { 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 };

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

@@ -0,0 +1,40 @@
+import { createRoot } from 'react-dom/client';
+import { act } from '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 = createRoot(container);
+  }
+  act(() => {
+    root?.render(element);
+  });
+  return container;
+};
+/** 각 테스트 파일의 afterEach 에서 부른다 */
+const cleanupRender = () => {
+  if (root) {
+    act(() => {
+      root?.unmount();
+    });
+  }
+  container?.remove();
+  root = null;
+  container = null;
+};
+class ResizeObserverStub {
+  observe() {
+    // 스크롤바 훅이 생성만 한다. 레이아웃 통지 계산은 useTableScrollbars.*.test.ts 가 맡는다.
+  }
+  unobserve() {
+    // 위와 같음
+  }
+  disconnect() {
+    // 위와 같음
+  }
+}
+export { render, cleanupRender, ResizeObserverStub };

package/dist/esm/src/components/data-display/table/__tests__/useTableScrollbars.ownership.test.js

@@ -0,0 +1,359 @@
+// @vitest-environment jsdom
+/**
+ * 소유권 충돌 · 가로 훅 비활성 · 방어 분기 (UTS-01~04).
+ * UTS-03 의 방어 분기는 공개 경로(Table.tsx)가 enabled 일 때 ref 를 항상 붙여 닿지 않는다.
+ * 공개 경로 미사용 — 훅을 직접 렌더하고 ref 를 일부러 빼서 구동한다.
+ */
+import { createElement, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { SCROLLBAR_ATTRS, SCROLLBAR_OWNERS, SCROLLBAR_TRACK_OFFSET, TABLE_HEADER_HEIGHT } from '../../../../../assets/scripts/table/scrollbar/const';
+import { useTableHorizontalScrollbar, useTableVerticalScrollbar } from '../useTableScrollbars';
+const observers = [];
+class ResizeObserverStub {
+  constructor() {
+    this.record = {
+      targets: []
+    };
+    observers.push(this.record);
+  }
+  observe(target) {
+    this.record.targets.push(target);
+  }
+  unobserve() {
+    // 관찰 대상 기록만 검증한다.
+  }
+  disconnect() {
+    // 관찰 대상 기록만 검증한다.
+  }
+}
+/** jsdom 은 레이아웃을 계산하지 않으므로 측정 속성을 직접 정의한다. */
+const defineMetrics = (element, metrics) => {
+  for (const [key, value] of Object.entries(metrics)) {
+    Object.defineProperty(element, key, {
+      configurable: true,
+      writable: true,
+      value
+    });
+  }
+};
+/**
+ * 세로 폴백 판별용 치수. 트랙 높이 0 이면 `scrollArea ?? 컨테이너` 높이에서 `TABLE_HEADER_HEIGHT` · `SCROLLBAR_TRACK_OFFSET` 을 뺀다.
+ * 컨테이너(200)와 scroll-area(240)를 다르게 두어 어느 쪽을 썼는지 썸 높이로 갈린다 — 최소 높이 40 보다 크게.
+ */
+const VIEWPORT_HEIGHT = 200;
+const CONTENT_HEIGHT = 400;
+const AREA_HEIGHT = 240;
+const HEADER_AND_OFFSET = TABLE_HEADER_HEIGHT + SCROLLBAR_TRACK_OFFSET;
+const thumbHeightFor = basisHeight => VIEWPORT_HEIGHT / CONTENT_HEIGHT * (basisHeight - HEADER_AND_OFFSET);
+const H_OVERFLOWING = {
+  scrollWidth: 1000,
+  clientWidth: 400,
+  scrollLeft: 100
+};
+const POINTER_Y = 30;
+const refUnless = (skip, ref) => skip ? undefined : ref;
+const VerticalHarness = _ref => {
+  let {
+    enabled = true,
+    refless = [],
+    withTable = true
+  } = _ref;
+  const scrollContainerRef = useRef(null);
+  const scrollAreaRef = useRef(null);
+  const scrollbarRef = useRef(null);
+  const thumbRef = useRef(null);
+  const {
+    handleThumbMouseDown
+  } = useTableVerticalScrollbar({
+    enabled,
+    layoutKey: false,
+    scrollContainerRef,
+    scrollAreaRef,
+    scrollbarRef,
+    thumbRef
+  });
+  return /*#__PURE__*/createElement('div', {
+    className: 'ncua-table ncua-table--fixed-header'
+  }, /*#__PURE__*/createElement('div', {
+    ref: refUnless(refless.includes('area'), scrollAreaRef),
+    className: 'ncua-table__scroll-area'
+  }, /*#__PURE__*/createElement('div', {
+    ref: refUnless(refless.includes('scroll'), scrollContainerRef),
+    className: 'ncua-table__scroll-container'
+  }, withTable ? /*#__PURE__*/createElement('table', {
+    className: 'ncua-table__table'
+  }, /*#__PURE__*/createElement('tbody', null)) : null), /*#__PURE__*/createElement('div', {
+    ref: refUnless(refless.includes('track'), scrollbarRef),
+    className: 'ncua-table__scrollbar'
+  }, /*#__PURE__*/createElement('div', {
+    ref: refUnless(refless.includes('thumb'), thumbRef),
+    className: 'ncua-table__scrollbar-thumb',
+    onMouseDown: handleThumbMouseDown
+  }))));
+};
+const HorizontalHarness = _ref2 => {
+  let {
+    enabled = true,
+    refless = [],
+    withInner = true,
+    withTable = true
+  } = _ref2;
+  const hScrollContainerRef = useRef(null);
+  const hScrollbarRef = useRef(null);
+  const hThumbRef = useRef(null);
+  const {
+    handleHThumbMouseDown
+  } = useTableHorizontalScrollbar({
+    enabled,
+    hScrollContainerRef,
+    hScrollbarRef,
+    hThumbRef
+  });
+  const table = withTable ? /*#__PURE__*/createElement('table', {
+    className: 'ncua-table__table'
+  }) : null;
+  return /*#__PURE__*/createElement('div', {
+    className: 'ncua-table'
+  }, /*#__PURE__*/createElement('div', {
+    ref: refUnless(refless.includes('hScroll'), hScrollContainerRef),
+    className: 'ncua-table__h-scroll-container'
+  }, withInner ? /*#__PURE__*/createElement('div', {
+    className: 'ncua-table__h-scroll-inner'
+  }, table) : table, /*#__PURE__*/createElement('div', {
+    ref: refUnless(refless.includes('hTrack'), hScrollbarRef),
+    className: 'ncua-table__h-scrollbar'
+  }, /*#__PURE__*/createElement('div', {
+    ref: refUnless(refless.includes('hThumb'), hThumbRef),
+    className: 'ncua-table__h-scrollbar-thumb',
+    onMouseDown: handleHThumbMouseDown
+  }))));
+};
+let container;
+let root;
+let mounted = false;
+const windowErrors = [];
+const collectError = event => {
+  windowErrors.push(event.error);
+};
+const cleanups = [];
+const render = element => {
+  act(() => {
+    root.render(element);
+  });
+  mounted = true;
+};
+const unmount = () => {
+  if (!mounted) return;
+  act(() => {
+    root.unmount();
+  });
+  mounted = false;
+};
+const query = selector => {
+  const found = container.querySelector(selector);
+  if (!found) throw new Error(`선택자에 해당하는 요소가 없습니다: ${selector}`);
+  return found;
+};
+const fire = (element, event) => {
+  act(() => {
+    element.dispatchEvent(event);
+  });
+};
+const pressThumb = thumb => {
+  fire(thumb, new MouseEvent('mousedown', {
+    bubbles: true,
+    cancelable: true,
+    clientY: POINTER_Y
+  }));
+  cleanups.push(() => document.dispatchEvent(new MouseEvent('mouseup')));
+};
+const markers = element => [element.hasAttribute(SCROLLBAR_ATTRS.ready), element.getAttribute(SCROLLBAR_ATTRS.owner)];
+const preoccupy = (element, owner) => {
+  element.setAttribute(SCROLLBAR_ATTRS.ready, '');
+  element.setAttribute(SCROLLBAR_ATTRS.owner, owner);
+};
+beforeEach(() => {
+  vi.stubGlobal('ResizeObserver', ResizeObserverStub);
+  observers.length = 0;
+  windowErrors.length = 0;
+  window.addEventListener('error', collectError);
+  globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  act(() => {
+    root = createRoot(container);
+  });
+});
+afterEach(() => {
+  while (cleanups.length > 0) cleanups.pop()?.();
+  unmount();
+  container.remove();
+  window.removeEventListener('error', collectError);
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+});
+describe('UTS-01 해제 시 다른 주체의 표식 보존', () => {
+  it.each([{
+    label: '세로',
+    element: () => /*#__PURE__*/createElement(VerticalHarness),
+    selector: '.ncua-table__scroll-container'
+  }, {
+    label: '가로',
+    element: () => /*#__PURE__*/createElement(HorizontalHarness),
+    selector: '.ncua-table__h-scroll-container'
+  }])('UTS-01 $label — 마운트 뒤 다른 주체가 owner 를 바꾸면 언마운트해도 ready · owner 를 떼지 않는다', _ref3 => {
+    let {
+      element,
+      selector
+    } = _ref3;
+    render(element());
+    const scrollEl = query(selector);
+    const claimedByReact = markers(scrollEl);
+    scrollEl.setAttribute(SCROLLBAR_ATTRS.owner, SCROLLBAR_OWNERS.cdn);
+    unmount();
+    expect(claimedByReact).toEqual([true, SCROLLBAR_OWNERS.react]);
+    expect(markers(scrollEl)).toEqual([true, SCROLLBAR_OWNERS.cdn]);
+  });
+  it('UTS-01 enabled 를 false 로 바꿔 해제해도 다른 주체 표식은 남는다', () => {
+    render(/*#__PURE__*/createElement(VerticalHarness));
+    const scrollEl = query('.ncua-table__scroll-container');
+    scrollEl.setAttribute(SCROLLBAR_ATTRS.owner, SCROLLBAR_OWNERS.cdn);
+    render(/*#__PURE__*/createElement(VerticalHarness, {
+      enabled: false
+    }));
+    expect(markers(scrollEl)).toEqual([true, SCROLLBAR_OWNERS.cdn]);
+  });
+});
+describe('UTS-02 가로 컨테이너 선점', () => {
+  it('UTS-02 다른 주체가 선점한 가로 컨테이너에는 표식을 덮지 않고 옵저버도 붙이지 않는다', () => {
+    render(/*#__PURE__*/createElement(HorizontalHarness, {
+      enabled: false
+    }));
+    const hScrollEl = query('.ncua-table__h-scroll-container');
+    preoccupy(hScrollEl, SCROLLBAR_OWNERS.cdn);
+    render(/*#__PURE__*/createElement(HorizontalHarness));
+    expect(markers(hScrollEl)).toEqual([true, SCROLLBAR_OWNERS.cdn]);
+    expect(observers).toEqual([]);
+  });
+  it('UTS-02 선점된 가로 컨테이너는 scroll 에 썸이 반응하지 않는다', () => {
+    render(/*#__PURE__*/createElement(HorizontalHarness, {
+      enabled: false
+    }));
+    const hScrollEl = query('.ncua-table__h-scroll-container');
+    preoccupy(hScrollEl, SCROLLBAR_OWNERS.cdn);
+    render(/*#__PURE__*/createElement(HorizontalHarness));
+    defineMetrics(hScrollEl, H_OVERFLOWING);
+    fire(hScrollEl, new Event('scroll'));
+    expect(query('.ncua-table__h-scrollbar-thumb').style.width).toBe('');
+  });
+});
+describe('UTS-03 방어 분기 (공개 경로 미사용, 직접 호출)', () => {
+  it.each([{
+    part: 'scroll'
+  }, {
+    part: 'thumb'
+  }])('UTS-03 세로 $part ref 가 없으면 표식 · 옵저버를 붙이지 않는다', _ref4 => {
+    let {
+      part
+    } = _ref4;
+    render(/*#__PURE__*/createElement(VerticalHarness, {
+      refless: [part]
+    }));
+    expect(markers(query('.ncua-table__scroll-container'))).toEqual([false, null]);
+    expect(observers).toEqual([]);
+  });
+  it('UTS-03 세로 스크롤 컨테이너 ref 가 없으면 썸 mousedown 이 드래그를 시작하지 않는다', () => {
+    render(/*#__PURE__*/createElement(VerticalHarness, {
+      refless: ['scroll']
+    }));
+    pressThumb(query('.ncua-table__scrollbar-thumb'));
+    expect([query('.ncua-table__scroll-area'), query('.ncua-table__scroll-container')].map(el => el.hasAttribute(SCROLLBAR_ATTRS.dragging))).toEqual([false, false]);
+    expect(windowErrors).toEqual([]);
+  });
+  it('UTS-03 트랙 높이가 0 이고 scroll-area ref 가 없으면 컨테이너 높이로 트랙 길이를 정한다', () => {
+    render(/*#__PURE__*/createElement(VerticalHarness, {
+      refless: ['area', 'track']
+    }));
+    defineMetrics(query('.ncua-table__scroll-area'), {
+      clientHeight: AREA_HEIGHT
+    });
+    defineMetrics(query('.ncua-table__scroll-container'), {
+      clientHeight: VIEWPORT_HEIGHT,
+      scrollHeight: CONTENT_HEIGHT,
+      scrollTop: 0
+    });
+    fire(query('.ncua-table__scroll-container'), new Event('scroll'));
+    const height = Number.parseFloat(query('.ncua-table__scrollbar-thumb').style.height);
+    expect(height).toBeCloseTo(thumbHeightFor(VIEWPORT_HEIGHT));
+    expect(height).not.toBeCloseTo(thumbHeightFor(AREA_HEIGHT));
+  });
+  it('UTS-03 scroll-area · 트랙 ref 와 콘텐츠 table 이 없으면 스크롤 컨테이너만 관찰한다', () => {
+    render(/*#__PURE__*/createElement(VerticalHarness, {
+      refless: ['area', 'track'],
+      withTable: false
+    }));
+    const scrollEl = query('.ncua-table__scroll-container');
+    expect(observers.map(record => record.targets.map(target => target === scrollEl))).toEqual([[true]]);
+  });
+  it('UTS-03 scroll-area ref 가 없으면 드래그 표식을 스크롤 컨테이너에 단다', () => {
+    render(/*#__PURE__*/createElement(VerticalHarness, {
+      refless: ['area']
+    }));
+    pressThumb(query('.ncua-table__scrollbar-thumb'));
+    expect([query('.ncua-table__scroll-area'), query('.ncua-table__scroll-container')].map(el => el.hasAttribute(SCROLLBAR_ATTRS.dragging))).toEqual([false, true]);
+  });
+  it.each([{
+    part: 'hScroll'
+  }, {
+    part: 'hTrack'
+  }, {
+    part: 'hThumb'
+  }])('UTS-03 가로 $part ref 가 없으면 표식 · 옵저버를 붙이지 않는다', _ref5 => {
+    let {
+      part
+    } = _ref5;
+    render(/*#__PURE__*/createElement(HorizontalHarness, {
+      refless: [part]
+    }));
+    expect(markers(query('.ncua-table__h-scroll-container'))).toEqual([false, null]);
+    expect(observers).toEqual([]);
+  });
+  it('UTS-03 가로 inner · 콘텐츠 table 이 없으면 가로 스크롤 컨테이너만 관찰한다', () => {
+    render(/*#__PURE__*/createElement(HorizontalHarness, {
+      withInner: false,
+      withTable: false
+    }));
+    const hScrollEl = query('.ncua-table__h-scroll-container');
+    expect(observers.map(record => record.targets.map(target => target === hScrollEl))).toEqual([[true]]);
+  });
+  it('UTS-03 가로 스크롤 컨테이너 ref 가 없으면 썸 mousedown 이 드래그를 시작하지 않는다', () => {
+    render(/*#__PURE__*/createElement(HorizontalHarness, {
+      refless: ['hScroll']
+    }));
+    pressThumb(query('.ncua-table__h-scrollbar-thumb'));
+    expect(query('.ncua-table__h-scroll-container').hasAttribute(SCROLLBAR_ATTRS.dragging)).toBe(false);
+    expect(windowErrors).toEqual([]);
+  });
+});
+describe('UTS-04 가로 훅 비활성', () => {
+  it('UTS-04 대조: enabled 면 같은 치수의 scroll 에 가로 썸 폭이 기록된다', () => {
+    render(/*#__PURE__*/createElement(HorizontalHarness));
+    const hScrollEl = query('.ncua-table__h-scroll-container');
+    defineMetrics(hScrollEl, H_OVERFLOWING);
+    fire(hScrollEl, new Event('scroll'));
+    expect(query('.ncua-table__h-scrollbar-thumb').style.width).not.toBe('');
+  });
+  it('UTS-04 enabled false 면 표식 · 옵저버를 붙이지 않고 scroll 에 가로 썸이 반응하지 않는다', () => {
+    render(/*#__PURE__*/createElement(HorizontalHarness, {
+      enabled: false
+    }));
+    const hScrollEl = query('.ncua-table__h-scroll-container');
+    defineMetrics(hScrollEl, H_OVERFLOWING);
+    fire(hScrollEl, new Event('scroll'));
+    expect(markers(hScrollEl)).toEqual([false, null]);
+    expect(observers).toEqual([]);
+    expect(query('.ncua-table__h-scrollbar-thumb').style.width).toBe('');
+  });
+});

package/dist/esm/src/components/data-display/table/useTableScrollbars.js

@@ -4,7 +4,7 @@ import { startThumbDrag } from '../../../../assets/scripts/table/scrollbar/drag'
 import { computeHorizontalTrackBox, computeThumbGeometry } from '../../../../assets/scripts/table/scrollbar/geometry';
 import { useIsomorphicLayoutEffect } from '../../../hooks/useIsomorphicLayoutEffect';
 // CDN 바인딩과 같은 값을 쓰기 위해 재노출한다. 정의는 scrollbar/const.ts 에 있다.
-export { H_SCROLLBAR_SIDE_GAP, H_SCROLLBAR_THUMB_MIN_WIDTH, SCROLLBAR_THUMB_MIN_HEIGHT, SCROLLBAR_TRACK_OFFSET, TABLE_HEADER_HEIGHT };
+export { TABLE_HEADER_HEIGHT };
 /** 타 소유자가 선점한 컨테이너는 덮어쓰지 않는다. CDN 생성자의 소유권 검사와 대칭이다 */
 const claimMarkers = el => {
   const owner = el.getAttribute(SCROLLBAR_ATTRS.owner);

package/dist/esm/src/components/feedback-and-status/badge/Badge.js

@@ -9,7 +9,7 @@ const BADGE_ICON_SIZE = 12;
 /** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
 const NEW_BADGE_ICON_SIZE = {
   sm: 12,
-  md: 16
+  md: 14
 };
 const Badge = _ref => {
   let {