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

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

@@ -0,0 +1,153 @@
+// 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(([args]) => 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 = (dragId, scope = document) => scope.querySelector(`tr[data-draggable-id="${dragId}"]`);
+/** 드래그 핸들(button)이 scope 안의 dragId 행에 속한 draggable registration */
+const draggableArgsOf = (dragId, scope = 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 = (dragId, scope = 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 = (args, nativeSetDragImage = 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) => createElement(Table.Row, { key: id, dragId: id }, createElement(Table.DragCell, null), createElement(Table.Cell, null, `행 ${id}`)));
+    const body = createElement(Table.Body, { onRowDrop }, rows);
+    return createElement(Table, { draggable: true }, body);
+};
+const customTable = (rows, tableProps = {}, bodyProps = {}) => createElement(Table, { draggable: true, ...tableProps }, createElement(Table.Body, bodyProps, rows.map(({ id, selected, disabled, withDragCell = true }) => createElement(Table.Row, { key: id, dragId: id || undefined, selected }, withDragCell ? createElement(Table.DragCell, { disabled }) : null, 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/temp/src/components/data-display/table/__tests__/tableTestUtils.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement } from 'react';
+/** 한 테스트 안에서 다시 부르면 같은 root 에 리렌더한다 */
+declare const render: (element: ReactElement) => HTMLElement;
+/** 각 테스트 파일의 afterEach 에서 부른다 */
+declare const cleanupRender: () => void;
+declare class ResizeObserverStub {
+    observe(): void;
+    unobserve(): void;
+    disconnect(): void;
+}
+export { render, cleanupRender, ResizeObserverStub };

package/dist/temp/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/temp/src/components/data-display/table/__tests__/useTableScrollbars.ownership.test.d.ts

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

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

@@ -0,0 +1,269 @@
+// @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 = ({ enabled = true, refless = [], withTable = true }) => {
+    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 createElement('div', { className: 'ncua-table ncua-table--fixed-header' }, createElement('div', { ref: refUnless(refless.includes('area'), scrollAreaRef), className: 'ncua-table__scroll-area' }, createElement('div', { ref: refUnless(refless.includes('scroll'), scrollContainerRef), className: 'ncua-table__scroll-container' }, withTable ? createElement('table', { className: 'ncua-table__table' }, createElement('tbody', null)) : null), createElement('div', { ref: refUnless(refless.includes('track'), scrollbarRef), className: 'ncua-table__scrollbar' }, createElement('div', {
+        ref: refUnless(refless.includes('thumb'), thumbRef),
+        className: 'ncua-table__scrollbar-thumb',
+        onMouseDown: handleThumbMouseDown,
+    }))));
+};
+const HorizontalHarness = ({ enabled = true, refless = [], withInner = true, withTable = true, }) => {
+    const hScrollContainerRef = useRef(null);
+    const hScrollbarRef = useRef(null);
+    const hThumbRef = useRef(null);
+    const { handleHThumbMouseDown } = useTableHorizontalScrollbar({
+        enabled,
+        hScrollContainerRef,
+        hScrollbarRef,
+        hThumbRef,
+    });
+    const table = withTable ? createElement('table', { className: 'ncua-table__table' }) : null;
+    return createElement('div', { className: 'ncua-table' }, createElement('div', {
+        ref: refUnless(refless.includes('hScroll'), hScrollContainerRef),
+        className: 'ncua-table__h-scroll-container',
+    }, withInner ? createElement('div', { className: 'ncua-table__h-scroll-inner' }, table) : table, createElement('div', { ref: refUnless(refless.includes('hTrack'), hScrollbarRef), className: 'ncua-table__h-scrollbar' }, 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: () => createElement(VerticalHarness),
+            selector: '.ncua-table__scroll-container',
+        },
+        {
+            label: '가로',
+            element: () => createElement(HorizontalHarness),
+            selector: '.ncua-table__h-scroll-container',
+        },
+    ])('UTS-01 $label — 마운트 뒤 다른 주체가 owner 를 바꾸면 언마운트해도 ready · owner 를 떼지 않는다', ({ element, selector }) => {
+        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(createElement(VerticalHarness));
+        const scrollEl = query('.ncua-table__scroll-container');
+        scrollEl.setAttribute(SCROLLBAR_ATTRS.owner, SCROLLBAR_OWNERS.cdn);
+        render(createElement(VerticalHarness, { enabled: false }));
+        expect(markers(scrollEl)).toEqual([true, SCROLLBAR_OWNERS.cdn]);
+    });
+});
+describe('UTS-02 가로 컨테이너 선점', () => {
+    it('UTS-02 다른 주체가 선점한 가로 컨테이너에는 표식을 덮지 않고 옵저버도 붙이지 않는다', () => {
+        render(createElement(HorizontalHarness, { enabled: false }));
+        const hScrollEl = query('.ncua-table__h-scroll-container');
+        preoccupy(hScrollEl, SCROLLBAR_OWNERS.cdn);
+        render(createElement(HorizontalHarness));
+        expect(markers(hScrollEl)).toEqual([true, SCROLLBAR_OWNERS.cdn]);
+        expect(observers).toEqual([]);
+    });
+    it('UTS-02 선점된 가로 컨테이너는 scroll 에 썸이 반응하지 않는다', () => {
+        render(createElement(HorizontalHarness, { enabled: false }));
+        const hScrollEl = query('.ncua-table__h-scroll-container');
+        preoccupy(hScrollEl, SCROLLBAR_OWNERS.cdn);
+        render(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 가 없으면 표식 · 옵저버를 붙이지 않는다', ({ part }) => {
+        render(createElement(VerticalHarness, { refless: [part] }));
+        expect(markers(query('.ncua-table__scroll-container'))).toEqual([false, null]);
+        expect(observers).toEqual([]);
+    });
+    it('UTS-03 세로 스크롤 컨테이너 ref 가 없으면 썸 mousedown 이 드래그를 시작하지 않는다', () => {
+        render(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(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(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(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 가 없으면 표식 · 옵저버를 붙이지 않는다', ({ part }) => {
+        render(createElement(HorizontalHarness, { refless: [part] }));
+        expect(markers(query('.ncua-table__h-scroll-container'))).toEqual([false, null]);
+        expect(observers).toEqual([]);
+    });
+    it('UTS-03 가로 inner · 콘텐츠 table 이 없으면 가로 스크롤 컨테이너만 관찰한다', () => {
+        render(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(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(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(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/temp/src/components/data-display/table/dnd-context.d.ts

@@ -8,5 +8,5 @@ type RowDndContextValue = {
     setIsDragging: (v: boolean) => void;
 };
 declare const RowDndContext: import("react").Context<RowDndContextValue>;
-export type { TableDndContextValue, RowDndContextValue };
+export type { TableDndContextValue };
 export { TableDndContext, RowDndContext };

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

@@ -1,6 +1,6 @@
 import { type MouseEvent, type RefObject } from 'react';
-import { H_SCROLLBAR_SIDE_GAP, H_SCROLLBAR_THUMB_MIN_WIDTH, SCROLLBAR_THUMB_MIN_HEIGHT, SCROLLBAR_TRACK_OFFSET, TABLE_HEADER_HEIGHT } from '../../../../assets/scripts/table/scrollbar/const';
-export { H_SCROLLBAR_SIDE_GAP, H_SCROLLBAR_THUMB_MIN_WIDTH, SCROLLBAR_THUMB_MIN_HEIGHT, SCROLLBAR_TRACK_OFFSET, TABLE_HEADER_HEIGHT, };
+import { TABLE_HEADER_HEIGHT } from '../../../../assets/scripts/table/scrollbar/const';
+export { TABLE_HEADER_HEIGHT };
 type VerticalScrollbarOptions = {
     enabled: boolean;
     layoutKey: unknown;

package/dist/temp/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/temp/src/components/feedback-and-status/badge/__tests__/Badge.test.d.ts

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

package/dist/temp/src/components/feedback-and-status/badge/__tests__/Badge.test.js

@@ -0,0 +1,136 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { COLOR } from '../../../../../constant/color';
+import { Badge } from '../Badge';
+import { sideSlotRender } from '../utils';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const LABEL = '진행중';
+/** 뱃지 아이콘 기본 크기 */
+const BADGE_ICON_SIZE = 12;
+/** 기본 크기(12)와 겹치지 않는 지정 크기 */
+const CUSTOM_ICON_SIZE = 18;
+/** new-badge 'N' 아이콘 크기 — sm 12 · md 14 */
+const NEW_BADGE_ICON_SM = 12;
+const NEW_BADGE_ICON_MD = 14;
+/** leading · label · trailing */
+const EXPECTED_SLOT_CHILDREN = 3;
+/** afterEach 에서 unmount 할 루트 */
+const mounted = [];
+afterEach(() => {
+    for (const { root, container } of mounted.splice(0)) {
+        act(() => root.unmount());
+        container.remove();
+    }
+});
+const mountBadge = (props = {}) => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    mounted.push({ root, container });
+    act(() => root.render(createElement(Badge, { label: LABEL, ...props })));
+    const badge = container.querySelector('.ncua-badge');
+    if (!badge)
+        throw new Error('뱃지를 찾을 수 없습니다');
+    return badge;
+};
+const mustQuery = (root, selector) => {
+    const found = root.querySelector(selector);
+    if (!found)
+        throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+    return found;
+};
+const hasClasses = (element, names) => names.map((name) => element.classList.contains(name));
+/** 받은 width · height · color 를 속성으로 남기는 합성 아이콘 */
+const makeIcon = (name) => {
+    const Icon = ({ width, height, color }) => createElement('svg', { 'data-icon': name, width, height, color });
+    return Icon;
+};
+const SyntheticIcon = makeIcon('slot');
+describe('Badge — 기본 렌더와 new-badge (BDG-01)', () => {
+    it('BDG-01 기본값: pill-outline · neutral · xs 와 label', () => {
+        const badge = mountBadge();
+        expect(hasClasses(badge, ['ncua-badge--pill-outline', 'ncua-badge--neutral', 'ncua-badge--xs'])).toEqual([
+            true,
+            true,
+            true,
+        ]);
+        expect(mustQuery(badge, '.ncua-badge__label').textContent).toBe(LABEL);
+    });
+    it('BDG-01 type · color · size · className 을 클래스로 반영한다', () => {
+        const badge = mountBadge({ type: 'pill-dark-color', color: 'error', size: 'md', className: 'custom-badge' });
+        expect(hasClasses(badge, ['ncua-badge--pill-dark-color', 'ncua-badge--error', 'ncua-badge--md', 'custom-badge'])).toEqual([true, true, true, true]);
+    });
+    it.each([
+        ['md', 'md', 'ncua-badge--new-badge-md', NEW_BADGE_ICON_MD],
+        ['sm', 'sm', 'ncua-badge--new-badge-sm', NEW_BADGE_ICON_SM],
+        ['xs(→ sm)', 'xs', 'ncua-badge--new-badge-sm', NEW_BADGE_ICON_SM],
+    ])('BDG-01 new-badge size %s 는 %s 클래스와 아이콘 %s px', (_name, size, expectedClass, iconSize) => {
+        const badge = mountBadge({ type: 'new-badge', size });
+        expect(badge.classList.contains(expectedClass)).toBe(true);
+        expect(mustQuery(badge, 'svg').getAttribute('width')).toBe(String(iconSize));
+    });
+    it('BDG-01 new-badge 는 label · color · 아이콘 슬롯을 무시한다', () => {
+        const badge = mountBadge({
+            type: 'new-badge',
+            color: 'error',
+            leadingIcon: { type: 'icon', icon: SyntheticIcon },
+            className: 'custom-badge',
+        });
+        expect(badge.querySelector('.ncua-badge__label')).toBeNull();
+        expect(badge.querySelector('[data-icon]')).toBeNull();
+        expect(hasClasses(badge, ['ncua-badge--error', 'custom-badge'])).toEqual([false, true]);
+    });
+});
+describe('Badge — 슬롯 렌더 sideSlotRender (BDG-02)', () => {
+    it.each([
+        ['지정 size 가 우선', { size: CUSTOM_ICON_SIZE }, CUSTOM_ICON_SIZE],
+        ['생략 시 뱃지 기본 크기', {}, BADGE_ICON_SIZE],
+    ])('BDG-02 icon 슬롯 크기: %s', (_name, slotExtra, expected) => {
+        const badge = mountBadge({ leadingIcon: { type: 'icon', icon: SyntheticIcon, ...slotExtra } });
+        const icon = mustQuery(badge, '[data-icon]');
+        expect([icon.getAttribute('width'), icon.getAttribute('height')]).toEqual([String(expected), String(expected)]);
+    });
+    it.each([
+        ['color 지정 시 COLOR 값', 'gray700', COLOR.gray700],
+        ['color 생략 시 없음', undefined, null],
+    ])('BDG-02 icon 슬롯 색: %s', (_name, color, expected) => {
+        const badge = mountBadge({ leadingIcon: { type: 'icon', icon: SyntheticIcon, color } });
+        expect(mustQuery(badge, '[data-icon]').getAttribute('color')).toBe(expected);
+    });
+    it.each([
+        ['지정 color · size', { type: 'dot', color: 'error', size: 'lg' }, ['ncua-dot--error', 'ncua-dot--lg']],
+        ['생략 시 neutral · sm', { type: 'dot' }, ['ncua-dot--neutral', 'ncua-dot--sm']],
+    ])('BDG-02 dot 슬롯: %s', (_name, slot, expectedClasses) => {
+        // 생략은 타입 밖이라 캐스팅한다 — color · size 폴백 경로
+        const badge = mountBadge({ leadingIcon: slot });
+        expect(hasClasses(mustQuery(badge, '.ncua-dot'), [...expectedClasses])).toEqual([true, true]);
+    });
+    it('BDG-02 custom 슬롯은 children 을 그리고, leading 은 label 앞 · trailing 은 label 뒤에 놓인다', () => {
+        const badge = mountBadge({
+            leadingIcon: { type: 'custom', children: createElement('i', { className: 'lead' }) },
+            trailingIcon: { type: 'custom', children: createElement('i', { className: 'trail' }) },
+        });
+        const children = Array.from(badge.children);
+        expect([
+            children[0].classList.contains('lead'),
+            children[1].classList.contains('ncua-badge__label'),
+            children[2].classList.contains('trail'),
+            children.length,
+        ]).toEqual([true, true, true, EXPECTED_SLOT_CHILDREN]);
+    });
+    it('BDG-02 sideSlotRender 는 호출자가 준 defaultIconSize 를 기본 크기로 쓴다', () => {
+        // Given: 뱃지 기본(12)과 다른 기본 크기로 직접 렌더
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = createRoot(container);
+        mounted.push({ root, container });
+        // When
+        act(() => root.render(sideSlotRender({ slot: { type: 'icon', icon: SyntheticIcon }, defaultIconSize: CUSTOM_ICON_SIZE })));
+        // Then
+        expect(mustQuery(container, '[data-icon]').getAttribute('width')).toBe(String(CUSTOM_ICON_SIZE));
+    });
+});

package/dist/temp/src/components/feedback-and-status/badge-group/__tests__/BadgeGroup.test.d.ts

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