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

package/dist/temp/src/components/feedback-and-status/tag/__tests__/Tag.test.js

@@ -0,0 +1,392 @@
+// @vitest-environment jsdom
+//
+// React Tag — 위험 목록표 RTAG-xx (PR-7e).
+// vanilla Tag(assets/scripts/tag, TG-xx)와 같은 기능의 독립 React 구현이다. 하위 구현(XClose · Dot)은 실구현을 쓴다.
+import { createElement } 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 { Tag } from '../Tag';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+/** Tag 의 기본 maxLength */
+const DEFAULT_MAX_LENGTH = 20;
+/** 말줄임 시 남기는 글자 수 = maxLength − 말줄임표 몫 */
+const ELLIPSIS_RESERVED = 2;
+const ICON_SIZE_SM = 14;
+const ICON_SIZE_MD = 16;
+const mounted = [];
+const cleanups = [];
+afterEach(() => {
+    for (const { root, container } of mounted.splice(0)) {
+        act(() => {
+            root.unmount();
+        });
+        container.remove();
+    }
+    for (const cleanup of cleanups.splice(0))
+        cleanup();
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+});
+/* ========== 공통 헬퍼 ========== */
+const mount = (props) => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+        root.render(createElement(Tag, props));
+    });
+    const entry = { root, container };
+    mounted.push(entry);
+    const unmount = () => {
+        act(() => {
+            root.unmount();
+        });
+        mounted.splice(mounted.indexOf(entry), 1);
+        container.remove();
+    };
+    return { container, unmount };
+};
+const outside = () => {
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    cleanups.push(() => element.remove());
+    return element;
+};
+const tagOf = (container) => {
+    const tag = container.querySelector('.ncua-tag');
+    if (!tag)
+        throw new Error('태그를 찾지 못했습니다');
+    return tag;
+};
+/** React 는 mouseover/mouseout 의 relatedTarget 으로 enter/leave 를 합성한다 */
+const hover = (container) => {
+    act(() => {
+        tagOf(container).dispatchEvent(new MouseEvent('mouseover', { bubbles: true, relatedTarget: outside() }));
+    });
+};
+const leave = (container) => {
+    act(() => {
+        tagOf(container).dispatchEvent(new MouseEvent('mouseout', { bubbles: true, relatedTarget: outside() }));
+    });
+};
+const textOf = (container) => container.querySelector('.ncua-tag__text')?.textContent ?? null;
+const tooltipOf = (container) => container.querySelector('.ncua-tag__tooltip');
+const closeButtonOf = (container) => {
+    const button = container.querySelector('.ncua-tag__close');
+    if (!button)
+        throw new Error('닫기 버튼을 찾지 못했습니다');
+    return button;
+};
+/** 같은 글자를 n 개 이어 붙인 합성 텍스트 */
+const textOfLength = (length) => '가'.repeat(length);
+/** jsdom 의 getBoundingClientRect 는 전부 0 이라 배치 판정용 rect 를 직접 만든다 */
+const toRect = ({ left, top, width, height }) => ({
+    left,
+    top,
+    width,
+    height,
+    right: left + width,
+    bottom: top + height,
+    x: left,
+    y: top,
+    toJSON: () => ({}),
+});
+/* ========== P0 ========== */
+describe('RTAG-01 기본 렌더', () => {
+    it('RTAG-01 기본 size 는 sm 이고 텍스트를 렌더한다', () => {
+        const { container } = mount({ text: '태그' });
+        const tag = tagOf(container);
+        expect(tag.classList.contains('ncua-tag--sm')).toBe(true);
+        expect(textOf(container)).toBe('태그');
+    });
+    it('RTAG-01 size md 면 md modifier 를 붙인다', () => {
+        const { container } = mount({ text: '태그', size: 'md' });
+        const tag = tagOf(container);
+        expect(tag.classList).toContain('ncua-tag--md');
+        expect(tag.classList).not.toContain('ncua-tag--sm');
+    });
+});
+describe('RTAG-02 maxLength 말줄임', () => {
+    it('RTAG-02 기본 maxLength 와 같은 길이는 그대로 둔다', () => {
+        const text = textOfLength(DEFAULT_MAX_LENGTH);
+        const { container } = mount({ text });
+        expect(textOf(container)).toBe(text);
+        expect(tagOf(container).classList.contains('ncua-tag--truncated')).toBe(false);
+    });
+    it('RTAG-02 기본 maxLength 를 넘으면 maxLength − 2 글자 + ... 로 줄이고 truncated 를 붙인다', () => {
+        const text = textOfLength(DEFAULT_MAX_LENGTH + 1);
+        const { container } = mount({ text });
+        expect(textOf(container)).toBe(`${textOfLength(DEFAULT_MAX_LENGTH - ELLIPSIS_RESERVED)}...`);
+        expect(tagOf(container).classList.contains('ncua-tag--truncated')).toBe(true);
+    });
+    it('RTAG-02 maxLength 옵션을 기준으로 줄인다', () => {
+        const maxLength = 5;
+        const { container } = mount({ text: 'abcdef', maxLength });
+        expect(textOf(container)).toBe('abc...');
+    });
+});
+describe('RTAG-03 말줄임 툴팁', () => {
+    it('RTAG-03 잘린 태그에 진입하면 전체 텍스트 툴팁을 보이고, 이탈하면 없앤다', () => {
+        vi.useFakeTimers({ toFake: ['setTimeout'] });
+        const text = textOfLength(DEFAULT_MAX_LENGTH + 1);
+        const { container } = mount({ text });
+        hover(container);
+        const contentOnHover = tooltipOf(container)?.querySelector('.ncua-tag__tooltip-content')?.textContent ?? null;
+        leave(container);
+        expect(contentOnHover).toBe(text);
+        expect(tooltipOf(container)).toBeNull();
+    });
+    it('RTAG-03 잘리지 않은 태그는 진입해도 툴팁이 없다', () => {
+        const { container } = mount({ text: '태그' });
+        hover(container);
+        expect(tooltipOf(container)).toBeNull();
+    });
+});
+describe('RTAG-04 닫기 버튼', () => {
+    it('RTAG-04 close 면 type=button 닫기 버튼을 두고, 클릭하면 onButtonClick 에 이벤트를 넘긴다', () => {
+        const onButtonClick = vi.fn();
+        const { container } = mount({ text: '태그', close: true, onButtonClick });
+        const button = closeButtonOf(container);
+        act(() => {
+            button.click();
+        });
+        expect(button.type).toBe('button');
+        expect(onButtonClick).toHaveBeenCalledWith(expect.objectContaining({ type: 'click' }));
+    });
+    it('RTAG-04 onButtonClick 이 없어도 클릭이 무해하다', () => {
+        const { container } = mount({ text: '태그', close: true });
+        const button = closeButtonOf(container);
+        expect(() => {
+            act(() => {
+                button.click();
+            });
+        }).not.toThrow();
+    });
+    it.each([
+        { size: 'sm', iconSize: ICON_SIZE_SM },
+        { size: 'md', iconSize: ICON_SIZE_MD },
+    ])('RTAG-04 size $size 면 닫기 아이콘 크기가 $iconSize 다', ({ size, iconSize }) => {
+        const { container } = mount({ text: '태그', close: true, size });
+        const svg = closeButtonOf(container).querySelector('svg');
+        expect([svg?.getAttribute('width'), svg?.getAttribute('height')]).toEqual([String(iconSize), String(iconSize)]);
+    });
+    it('RTAG-04 close 가 없으면 닫기 버튼이 없다', () => {
+        const { container } = mount({ text: '태그' });
+        expect(container.querySelector('.ncua-tag__close')).toBeNull();
+    });
+});
+/* ========== 나머지 분기 ========== */
+/** Tag 가 넘긴 props 를 그대로 속성에 기록하는 합성 아이콘 — 실제 아이콘의 color 처리는 아이콘 패키지 소관이다 */
+const RecordingIcon = ({ width, height, color }) => createElement('svg', { className: 'recording-icon', width, height, 'data-color': color });
+const recordedIconOf = (container) => {
+    const svg = container.querySelector('.recording-icon');
+    if (!svg)
+        throw new Error('슬롯 아이콘을 찾지 못했습니다');
+    return svg;
+};
+describe('RTAG-05 슬롯', () => {
+    it.each([
+        { size: 'sm', iconSize: ICON_SIZE_SM },
+        { size: 'md', iconSize: ICON_SIZE_MD },
+    ])('RTAG-05 icon 슬롯은 size $size 에 맞춰 $iconSize 크기로 렌더한다', ({ size, iconSize }) => {
+        const { container } = mount({ text: '태그', size, icon: { type: 'icon', icon: RecordingIcon } });
+        const svg = recordedIconOf(container);
+        expect([svg.getAttribute('width'), svg.getAttribute('height')]).toEqual([String(iconSize), String(iconSize)]);
+    });
+    it.each([
+        { slotSize: undefined, expected: 'sm' },
+        { slotSize: 'lg', expected: 'lg' },
+    ])('RTAG-05 dot 슬롯 size $slotSize → ncua-dot--$expected', ({ slotSize, expected }) => {
+        const icon = { type: 'dot', color: 'error', size: slotSize };
+        const { container } = mount({ text: '태그', icon });
+        const dot = container.querySelector('.ncua-dot');
+        if (!dot)
+            throw new Error('dot 슬롯을 찾지 못했습니다');
+        expect(Array.from(dot.classList)).toEqual(expect.arrayContaining(['ncua-dot--error', `ncua-dot--${expected}`]));
+    });
+    it('RTAG-05 custom 슬롯은 children 을 그대로 렌더한다', () => {
+        const { container } = mount({
+            text: '태그',
+            icon: { type: 'custom', children: createElement('i', { className: 'custom-slot' }, '커스텀') },
+        });
+        expect(container.querySelector('.custom-slot')?.textContent).toBe('커스텀');
+    });
+    it('RTAG-05 순서는 아이콘 → 텍스트 → count → 닫기 버튼이다', () => {
+        const { container } = mount({ text: '태그', count: '3', close: true, icon: { type: 'icon', icon: RecordingIcon } });
+        const children = Array.from(tagOf(container).children);
+        const expectedOrder = ['recording-icon', 'ncua-tag__text', 'ncua-tag__count', 'ncua-tag__close'];
+        const positions = expectedOrder.map((name) => children.findIndex((child) => child.classList.contains(name)));
+        expect(positions).toEqual(expectedOrder.map((_, index) => index));
+    });
+    it('RTAG-05 count 가 빈 문자열이면 count 를 표시하지 않는다', () => {
+        const { container } = mount({ text: '태그', count: '' });
+        expect(container.querySelector('.ncua-tag__count')).toBeNull();
+    });
+});
+describe('RTAG-06 · 07 말줄임 툴팁 위치', () => {
+    /** jsdom 기본 뷰포트(1024×768)에서 툴팁 기본 크기(200×60) + 여백 10 이 들어가는지를 가르는 태그 배치 */
+    const NEAR_LEFT = 100;
+    const FAR_LEFT = 900;
+    const ROOM_TOP = 300;
+    const CRAMPED_TOP = 20;
+    const TAG_WIDTH = 50;
+    const TAG_HEIGHT = 20;
+    /** 좌우 어느 쪽에도 툴팁 폭이 들어가지 않는 너비 */
+    const WIDE_TAG_WIDTH = 824;
+    /** 위아래 어느 쪽에도 툴팁 높이가 들어가지 않는 높이 */
+    const TALL_TAG_HEIGHT = 740;
+    /** 기본값(DEFAULT_TOOLTIP_WIDTH 200 · HEIGHT 60)과 다른 실측 rect — 실제 rect 사용과 기본값 폴백을 구분한다 */
+    const MEASURED_TOOLTIP_WIDTH = 60;
+    const MEASURED_TOOLTIP_HEIGHT = 400;
+    const truncatedText = textOfLength(DEFAULT_MAX_LENGTH + 1);
+    const stubTagRect = (container, left, top, width = TAG_WIDTH, height = TAG_HEIGHT) => {
+        tagOf(container).getBoundingClientRect = () => toRect({ left, top, width, height });
+    };
+    const positionOf = (container) => {
+        const tooltip = tooltipOf(container);
+        if (!tooltip)
+            throw new Error('툴팁을 찾지 못했습니다');
+        return Array.from(tooltip.classList).find((name) => name.startsWith('ncua-tag__tooltip--')) ?? null;
+    };
+    beforeEach(() => {
+        vi.useFakeTimers({ toFake: ['setTimeout'] });
+    });
+    it('RTAG-06 진입 직후에는 기본 top-right 이다', () => {
+        const { container } = mount({ text: truncatedText });
+        stubTagRect(container, FAR_LEFT, CRAMPED_TOP);
+        hover(container);
+        expect(positionOf(container)).toBe('ncua-tag__tooltip--top-right');
+    });
+    it.each([
+        {
+            name: '위 · 오른쪽 공간',
+            left: NEAR_LEFT,
+            top: ROOM_TOP,
+            width: TAG_WIDTH,
+            height: TAG_HEIGHT,
+            expected: 'top-right',
+        },
+        {
+            name: '위 공간 · 오른쪽 부족',
+            left: FAR_LEFT,
+            top: ROOM_TOP,
+            width: TAG_WIDTH,
+            height: TAG_HEIGHT,
+            expected: 'top-left',
+        },
+        {
+            name: '위 부족 · 오른쪽 공간',
+            left: NEAR_LEFT,
+            top: CRAMPED_TOP,
+            width: TAG_WIDTH,
+            height: TAG_HEIGHT,
+            expected: 'bottom-right',
+        },
+        {
+            name: '위 부족 · 오른쪽 부족',
+            left: FAR_LEFT,
+            top: CRAMPED_TOP,
+            width: TAG_WIDTH,
+            height: TAG_HEIGHT,
+            expected: 'bottom-left',
+        },
+        {
+            name: '좌우 모두 부족 · 위 공간',
+            left: NEAR_LEFT,
+            top: ROOM_TOP,
+            width: WIDE_TAG_WIDTH,
+            height: TAG_HEIGHT,
+            expected: 'top-right',
+        },
+        {
+            name: '좌우 모두 부족 · 위 부족',
+            left: NEAR_LEFT,
+            top: CRAMPED_TOP,
+            width: WIDE_TAG_WIDTH,
+            height: TAG_HEIGHT,
+            expected: 'bottom-right',
+        },
+        {
+            name: '위아래 모두 부족',
+            left: NEAR_LEFT,
+            top: CRAMPED_TOP,
+            width: TAG_WIDTH,
+            height: TALL_TAG_HEIGHT,
+            expected: 'bottom-right',
+        },
+    ])('RTAG-06 $name → 다음 틱에 $expected 로 재계산한다', ({ left, top, width, height, expected }) => {
+        const { container } = mount({ text: truncatedText });
+        stubTagRect(container, left, top, width, height);
+        hover(container);
+        act(() => {
+            vi.runAllTimers();
+        });
+        expect(positionOf(container)).toBe(`ncua-tag__tooltip--${expected}`);
+    });
+    it('RTAG-06 재계산 대기 중 unmount 해도 무해하다', () => {
+        const { container, unmount } = mount({ text: truncatedText });
+        hover(container);
+        unmount();
+        expect(() => {
+            act(() => {
+                vi.runAllTimers();
+            });
+        }).not.toThrow();
+    });
+    it('RTAG-07 툴팁이 떠 있는 채 진입이 다시 오면 실제 툴팁 rect 로 즉시 계산한다 (합성 이벤트 — 실사용 경로 아님)', () => {
+        const { container } = mount({ text: truncatedText });
+        stubTagRect(container, FAR_LEFT, ROOM_TOP);
+        hover(container);
+        const tooltip = tooltipOf(container);
+        if (!tooltip)
+            throw new Error('툴팁을 찾지 못했습니다');
+        tooltip.getBoundingClientRect = () => toRect({ left: 0, top: 0, width: MEASURED_TOOLTIP_WIDTH, height: MEASURED_TOOLTIP_HEIGHT });
+        hover(container);
+        expect(positionOf(container)).toBe('ncua-tag__tooltip--bottom-right');
+    });
+});
+/* ========== 결함 후보 ========== */
+describe('RTAG-08 icon 슬롯 color · size', () => {
+    it('RTAG-08 color 토큰 키를 COLOR 매핑 없이 넘기고 slot.size 는 무시한다', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (Badge · Button · InputBase 는 COLOR[slot.color] 로 매핑 — "gray700" 은 유효한 CSS 색이 아님, slot.size 미반영)
+        const slotSize = 24;
+        const { container } = mount({
+            text: '태그',
+            icon: { type: 'icon', icon: RecordingIcon, color: 'gray700', size: slotSize },
+        });
+        const svg = recordedIconOf(container);
+        expect(svg.getAttribute('data-color')).toBe('gray700');
+        expect(svg.getAttribute('width')).toBe(String(ICON_SIZE_SM));
+    });
+    it.todo('RTAG-08 icon 슬롯 color 는 COLOR[slot.color] 로 매핑하고 slot.size 가 있으면 그 크기로 렌더한다');
+});
+describe('RTAG-09 maxLength ≤ 2', () => {
+    it.each([
+        { maxLength: 1, text: 'ab', expected: 'a...' },
+        { maxLength: 2, text: 'abc', expected: '...' },
+    ])('RTAG-09 maxLength $maxLength · "$text" → "$expected"', ({ maxLength, text, expected }) => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (#588 TG-19 같은 뿌리 — maxLength − 2 가 0 이하면 slice 결과가 비거나 끝에서 자름)
+        const { container } = mount({ text, maxLength });
+        expect(textOf(container)).toBe(expected);
+    });
+    it.todo('RTAG-09 maxLength ≤ 2 에서도 원문 앞부분을 최소 1글자 남기고 말줄임한다');
+});
+describe('RTAG-10 닫기 버튼 접근 가능한 이름', () => {
+    it('RTAG-10 닫기 버튼에 aria-label 도 텍스트도 없다', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (#597 CA-02 같은 유형 — 접근 가능한 이름이 비어 있음, vanilla Tag 도 같은 마크업)
+        const { container } = mount({ text: '태그', close: true });
+        const button = closeButtonOf(container);
+        expect([button.getAttribute('aria-label'), button.textContent]).toEqual([null, '']);
+    });
+    it.todo('RTAG-10 닫기 버튼에 aria-label 로 접근 가능한 이름을 준다');
+});
+describe('RTAG-11 children', () => {
+    it('RTAG-11 children 을 받아도 렌더하지 않는다', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (타입에 선언됐으나 미사용 — 문서 소개문 "체크박스 … 기능을 포함할 수 있습니다" 에 해당 prop 없음)
+        const props = { text: '태그', children: createElement('input', { type: 'checkbox', className: 'tag-child' }) };
+        const { container } = mount(props);
+        expect(container.querySelector('.tag-child')).toBeNull();
+    });
+    it.todo('RTAG-11 children 을 렌더하거나, 쓰지 않는다면 타입 · 문서에서 뺀다');
+});

package/dist/temp/src/components/forms-and-input/checkbox/__tests__/Checkbox.test.d.ts

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

package/dist/temp/src/components/forms-and-input/checkbox/__tests__/Checkbox.test.js

@@ -0,0 +1,180 @@
+// @vitest-environment jsdom
+//
+// CheckboxInput · Checkbox (React) 위험 경로 — 위험 목록표 CB-xx.
+// indeterminate 는 HTML 속성이 아니라 DOM 프로퍼티라 layout effect 로 input.indeterminate 에 넣는다.
+import { createElement, createRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Checkbox } from '../Checkbox';
+import { CheckboxInput } from '../CheckboxInput';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let root = null;
+let container = null;
+const renderElement = (element) => {
+    if (!container) {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = createRoot(container);
+    }
+    act(() => {
+        root?.render(element);
+    });
+    return container;
+};
+/** 같은 root 에 다시 render 하면 props 변경(재렌더)이 된다 */
+const renderInput = (props = {}) => renderElement(createElement(CheckboxInput, props));
+const renderCheckbox = (props = {}) => renderElement(createElement(Checkbox, props));
+afterEach(() => {
+    if (root) {
+        act(() => {
+            root?.unmount();
+        });
+    }
+    container?.remove();
+    root = null;
+    container = null;
+    vi.restoreAllMocks();
+});
+const requireElement = (scope, selector) => {
+    const element = scope.querySelector(selector);
+    if (!element)
+        throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+    return element;
+};
+const inputOf = (view) => requireElement(view, 'input');
+const wrapperOf = (view) => requireElement(view, '.ncua-checkbox-input');
+const click = (element) => {
+    act(() => {
+        element.click();
+    });
+};
+// ── P0 ─────────────────────────────────────────────────
+describe('CheckboxInput — 체크 토글 (CB-01)', () => {
+    it('CB-01 uncontrolled: click 하면 onChange(event) 를 부르고 checked 가 토글된다', () => {
+        const onChange = vi.fn();
+        const view = renderInput({ onChange });
+        click(inputOf(view));
+        expect(onChange.mock.calls[0][0].target.checked).toBe(true);
+        expect(inputOf(view).checked).toBe(true);
+        click(inputOf(view));
+        expect(inputOf(view).checked).toBe(false);
+    });
+    it('CB-01 controlled: checked prop 을 반영하고 부모가 바꾸기 전에는 click 해도 되돌아간다', () => {
+        const onChange = vi.fn();
+        const view = renderInput({ checked: true, onChange });
+        click(inputOf(view));
+        expect(onChange).toHaveBeenCalled();
+        expect(inputOf(view).checked).toBe(true);
+        renderInput({ checked: false, onChange });
+        expect(inputOf(view).checked).toBe(false);
+    });
+});
+describe('CheckboxInput — indeterminate (CB-02)', () => {
+    it.each([
+        ['ref 없음', undefined],
+        ['객체 ref', createRef()],
+        ['함수 ref', vi.fn()],
+    ])('CB-02 %s: true 면 input.indeterminate·has-indeterminate, false 로 바꾸면 해제된다', (_label, ref) => {
+        const view = renderInput({ indeterminate: true, ref });
+        expect([inputOf(view).indeterminate, wrapperOf(view).classList.contains('has-indeterminate')]).toEqual([
+            true,
+            true,
+        ]);
+        renderInput({ indeterminate: false, ref });
+        expect([inputOf(view).indeterminate, wrapperOf(view).classList.contains('has-indeterminate')]).toEqual([
+            false,
+            false,
+        ]);
+    });
+});
+describe('CheckboxInput — disabled (CB-03)', () => {
+    it('CB-03 disabled 면 click 해도 onChange 가 없고 checked 도 그대로다', () => {
+        const onChange = vi.fn();
+        const view = renderInput({ disabled: true, onChange });
+        click(inputOf(view));
+        expect(inputOf(view).disabled).toBe(true);
+        expect(onChange).not.toHaveBeenCalled();
+        expect(inputOf(view).checked).toBe(false);
+    });
+});
+// ── P1 ~ P3 ────────────────────────────────────────────
+describe('CheckboxInput — ref (CB-04)', () => {
+    it('CB-04 객체 ref 에 input 노드를 넣는다', () => {
+        const ref = createRef();
+        const view = renderInput({ ref });
+        expect(ref.current).toBe(inputOf(view));
+    });
+    it('CB-04 함수 ref 를 input 노드로 호출한다', () => {
+        const ref = vi.fn();
+        const view = renderInput({ ref });
+        expect(ref).toHaveBeenCalledWith(inputOf(view));
+    });
+    it('CB-04 Checkbox 는 ref 를 안쪽 input 으로 전달하고 indeterminate 도 넘긴다', () => {
+        const ref = createRef();
+        const view = renderCheckbox({ ref, indeterminate: true });
+        expect(ref.current).toBe(inputOf(view));
+        expect(inputOf(view).indeterminate).toBe(true);
+    });
+});
+describe('Checkbox — label 구조 (CB-05)', () => {
+    const fieldOf = (view) => requireElement(view, '.ncua-checkbox-field');
+    const textsOf = (view) => [
+        view.querySelector('.ncua-checkbox-field__text')?.textContent ?? null,
+        view.querySelector('.ncua-checkbox-field__support-text')?.textContent ?? null,
+    ];
+    it('CB-05 text 를 click 하면 label 이 감싼 input 이 토글되고 onChange 가 호출된다', () => {
+        const onChange = vi.fn();
+        const view = renderCheckbox({ text: '동의', onChange });
+        click(requireElement(view, '.ncua-checkbox-field__text'));
+        expect(inputOf(view).checked).toBe(true);
+        expect(onChange).toHaveBeenCalled();
+    });
+    it.each([
+        ['text 만', { text: '동의' }, ['동의', null], true],
+        ['text + supportText', { text: '동의', supportText: '필수' }, ['동의', '필수'], true],
+        ['supportText 만', { supportText: '필수' }, ['', '필수'], false],
+        ['둘 다 없음', {}, [null, null], false],
+    ])('CB-05 %s → [text, supportText] 와 has-text', (_label, props, texts, hasText) => {
+        const view = renderCheckbox(props);
+        expect(textsOf(view)).toEqual(texts);
+        expect(fieldOf(view).classList.contains('has-text')).toBe(hasText);
+    });
+    it('CB-05 controlled checked·disabled 를 안쪽 input 에 전달한다', () => {
+        const view = renderCheckbox({ checked: true, disabled: true, onChange: vi.fn() });
+        expect([inputOf(view).checked, inputOf(view).disabled]).toEqual([true, true]);
+    });
+});
+describe('CheckboxInput · Checkbox — 클래스·rest (CB-06)', () => {
+    it('CB-06 CheckboxInput 기본 size 는 xs, destructive 가 아니고 className 이 없다', () => {
+        const view = renderInput();
+        expect(['ncua-checkbox-input--xs', 'destructive', 'has-indeterminate'].map((name) => wrapperOf(view).classList.contains(name))).toEqual([true, false, false]);
+    });
+    it('CB-06 CheckboxInput size sm·destructive·className 을 감싸는 span 에 반영한다', () => {
+        const view = renderInput({ size: 'sm', destructive: true, className: 'my-check' });
+        expect(['ncua-checkbox-input--sm', 'destructive', 'my-check'].map((name) => wrapperOf(view).classList.contains(name))).toEqual([true, true, true]);
+    });
+    it('CB-06 name·value·aria-label 등 나머지 props 를 input 에 전달한다', () => {
+        const view = renderInput({ name: 'agree', value: 'yes', 'aria-label': '동의' });
+        const input = inputOf(view);
+        expect([input.name, input.value, input.getAttribute('aria-label')]).toEqual(['agree', 'yes', '동의']);
+    });
+    it('CB-06 Checkbox size 는 label 과 안쪽 CheckboxInput 양쪽에 반영된다', () => {
+        const view = renderCheckbox({ size: 'sm', name: 'agree' });
+        expect([
+            requireElement(view, '.ncua-checkbox-field').classList.contains('ncua-checkbox-field--sm'),
+            wrapperOf(view).classList.contains('ncua-checkbox-input--sm'),
+            inputOf(view).name,
+        ]).toEqual([true, true, 'agree']);
+    });
+});
+describe('Checkbox — className 위치 (CB-07)', () => {
+    it('CB-07 소비자 className 은 label 에만 붙고 안쪽 CheckboxInput 은 ncua-checkbox-field__input 으로 고정된다', () => {
+        const view = renderCheckbox({ className: 'my-field' });
+        expect([
+            requireElement(view, '.ncua-checkbox-field').classList.contains('my-field'),
+            wrapperOf(view).classList.contains('my-field'),
+            wrapperOf(view).classList.contains('ncua-checkbox-field__input'),
+        ]).toEqual([true, false, true]);
+    });
+});

package/dist/temp/src/components/forms-and-input/combo-box/ComboBox.d.ts

@@ -2,7 +2,6 @@ import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import type { UseFormRegisterReturn } from 'react-hook-form';
 import type { Size } from '../../../../constant/size';
 import type { OptionChangeHandler, OptionType, OptionValue } from '../../../types/dropdown';
-declare const defaultMaxHeight = 275;
 interface ComboBoxProps extends Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> {
     children?: ReactNode;
     placeholder?: string;
@@ -42,5 +41,5 @@ interface ComboBoxProps extends Omit<ComponentPropsWithRef<'div'>, 'size' | 'onC
     usePortal?: boolean;
 }
 declare const ComboBox: import("react").ForwardRefExoticComponent<Omit<ComboBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export { defaultMaxHeight, ComboBox };
+export { ComboBox };
 export type { ComboBoxProps };

package/dist/temp/src/components/forms-and-input/combo-box/ComboBox.js

@@ -292,4 +292,4 @@ const ComboBox = forwardRef(({ placeholder = '검색하세요', id, className, h
                                 } }), inlineDropdown, portaledDropdown] }), register && _jsx("input", { type: "hidden", ...register, value: hiddenInputValue }), hintText && _jsx(HintText, { destructive: destructive, children: hintText })] }), hasTags && (_jsx("div", { className: "ncua-combobox__tags", children: tags.map((tag) => (_jsx(Tag, { text: tag.label, size: "sm", close: !disabled, onButtonClick: () => handleRemoveTag(tag.id) }, tag.id))) }))] }));
 });
 ComboBox.displayName = 'ComboBox';
-export { defaultMaxHeight, ComboBox };
+export { ComboBox };

package/dist/temp/src/components/forms-and-input/combo-box/__tests__/ComboBox.interaction.test.d.ts

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