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

package/dist/temp/src/components/forms-and-input/range-date-picker/__tests__/RangeDatePicker.test.js

@@ -3,6 +3,7 @@ import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
 import { afterEach, describe, expect, it, vi } from 'vitest';
+import { useFixedToday } from '../../../../__tests__/helpers/fixedToday';
 import { RangeDatePicker } from '../RangeDatePicker';
 const mounted = [];
 function mount(props) {
@@ -98,3 +99,139 @@ describe('#2 validationOption.setting 없이도 overlap 을 검증한다 (#410)'
         expect(overlapCalls).toHaveLength(0);
     });
 });
+// ── 위험 경로 RG-xx (PR-7a) ───────────────────────────────────────────────
+/** FIXED_TODAY 의 날짜 — 종료일=오늘 판정(RG-03)을 결정적으로 만든다 */
+const TODAY = '2026-10-21';
+const PERIOD_DAYS = 7;
+const WEEK_SETTING = { setting: { unit: 'days', period: PERIOD_DAYS } };
+/** 같은 root 에 다시 render 해 한쪽 날짜만 바꾸는 상황을 만든다 */
+function mountRerenderable(props) {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const render = (next) => {
+        act(() => {
+            root.render(createElement(RangeDatePicker, next));
+        });
+    };
+    render(props);
+    mounted.push({ root, container });
+    return { container, render };
+}
+const rangeProps = ({ start, end, onDateValidation, validationOption }) => ({
+    startDateOptions: { currentDate: start, onChangeDate: () => undefined },
+    endDateOptions: { currentDate: end, onChangeDate: () => undefined },
+    onDateValidation,
+    validationOption,
+});
+describe('RG-01 setting 기간 초과', () => {
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    it('RG-01 종료일을 시작일+period 뒤로 바꾸면 type:end · errorType:period · newDate 시작일+period 로 통지한다', () => {
+        useFixedToday();
+        const onDateValidation = vi.fn();
+        const { render } = mountRerenderable(rangeProps({ start: '2026-10-10', end: '2026-10-15', onDateValidation, validationOption: WEEK_SETTING }));
+        onDateValidation.mockClear();
+        render(rangeProps({ start: '2026-10-10', end: '2026-10-25', onDateValidation, validationOption: WEEK_SETTING }));
+        expect(onDateValidation).toHaveBeenCalledWith({
+            type: 'end',
+            errorType: 'period',
+            newDate: '2026-10-17',
+            currentDate: '2026-10-25',
+        });
+    });
+    it('RG-01 시작일을 종료일−period 앞으로 바꾸면 type:start · errorType:period · newDate 종료일−period 로 통지한다', () => {
+        useFixedToday();
+        const onDateValidation = vi.fn();
+        const { render } = mountRerenderable(rangeProps({ start: '2026-10-10', end: '2026-10-15', onDateValidation, validationOption: WEEK_SETTING }));
+        onDateValidation.mockClear();
+        render(rangeProps({ start: '2026-09-30', end: '2026-10-15', onDateValidation, validationOption: WEEK_SETTING }));
+        expect(onDateValidation).toHaveBeenCalledWith({
+            type: 'start',
+            errorType: 'period',
+            newDate: '2026-10-08',
+            currentDate: '2026-09-30',
+        });
+    });
+    it('RG-01 unit 이 months 여도 같은 규칙으로 newDate 를 계산한다', () => {
+        useFixedToday();
+        const onDateValidation = vi.fn();
+        const monthSetting = { setting: { unit: 'months', period: 1 } };
+        const { render } = mountRerenderable(rangeProps({ start: '2026-08-01', end: '2026-08-20', onDateValidation, validationOption: monthSetting }));
+        onDateValidation.mockClear();
+        render(rangeProps({ start: '2026-08-01', end: '2026-09-15', onDateValidation, validationOption: monthSetting }));
+        expect(onDateValidation).toHaveBeenCalledWith({
+            type: 'end',
+            errorType: 'period',
+            newDate: '2026-09-01',
+            currentDate: '2026-09-15',
+        });
+    });
+});
+describe('RG-02~04 setting 역전 · 종료일=오늘 · 전달 props', () => {
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    it('RG-02 setting 이 있을 때 시작일을 종료일 뒤로 바꾸면 newDate 종료일 · currentDate 바뀐 시작일로 overlap 통지', () => {
+        useFixedToday();
+        const onDateValidation = vi.fn();
+        const { render } = mountRerenderable(rangeProps({ start: '2026-10-12', end: '2026-10-15', onDateValidation, validationOption: WEEK_SETTING }));
+        onDateValidation.mockClear();
+        render(rangeProps({ start: '2026-10-18', end: '2026-10-15', onDateValidation, validationOption: WEEK_SETTING }));
+        expect(onDateValidation).toHaveBeenCalledWith({
+            type: 'start',
+            errorType: 'overlap',
+            newDate: '2026-10-15',
+            currentDate: '2026-10-18',
+        });
+    });
+    it('RG-02 setting 이 있을 때 종료일을 시작일 앞으로 바꾸면 newDate 시작일 · currentDate 바뀐 종료일로 overlap 통지', () => {
+        useFixedToday();
+        const onDateValidation = vi.fn();
+        const { render } = mountRerenderable(rangeProps({ start: '2026-10-12', end: '2026-10-15', onDateValidation, validationOption: WEEK_SETTING }));
+        onDateValidation.mockClear();
+        render(rangeProps({ start: '2026-10-12', end: '2026-10-08', onDateValidation, validationOption: WEEK_SETTING }));
+        expect(onDateValidation).toHaveBeenCalledWith({
+            type: 'end',
+            errorType: 'overlap',
+            newDate: '2026-10-12',
+            currentDate: '2026-10-08',
+        });
+    });
+    it('RG-03 종료일이 오늘이면 기간을 넘어도 종료측 기간 검증을 건너뛴다', () => {
+        useFixedToday();
+        const onDateValidation = vi.fn();
+        const { render } = mountRerenderable(rangeProps({ start: '2026-10-01', end: '2026-10-05', onDateValidation, validationOption: WEEK_SETTING }));
+        onDateValidation.mockClear();
+        render(rangeProps({ start: '2026-10-01', end: TODAY, onDateValidation, validationOption: WEEK_SETTING }));
+        expect(onDateValidation).not.toHaveBeenCalled();
+    });
+    it.each([
+        { type: 'start', currentDate: '2026-10-10' },
+        { type: 'end', currentDate: '2026-10-15' },
+    ])('RG-03 정상 기간이면 $type 쪽을 errorType:null 로 통지한다', ({ type, currentDate }) => {
+        useFixedToday();
+        const onDateValidation = vi.fn();
+        mountRerenderable(rangeProps({ start: '2026-10-10', end: '2026-10-15', onDateValidation, validationOption: WEEK_SETTING }));
+        expect(onDateValidation).toHaveBeenCalledWith({ type, errorType: null, newDate: currentDate, currentDate });
+    });
+    it('RG-04 size 를 두 DatePicker 에 전달한다', () => {
+        const { container } = mountRerenderable({
+            ...rangeProps({ start: '2026-10-10', end: '2026-10-15', onDateValidation: vi.fn() }),
+            size: 'sm',
+        });
+        const pickers = Array.from(container.querySelectorAll('.ncua-date-picker'));
+        expect(pickers).toHaveLength(2);
+        expect(pickers.every((picker) => picker.classList.contains('ncua-date-picker--sm'))).toBe(true);
+    });
+    it('RG-04 종료측은 isEndDate 라 enableTime 에서 시간 없는 날짜를 23:59 로 채운다', () => {
+        const TIME_OPTIONS = { enableTime: true, dateFormat: 'Y-m-d H:i' };
+        const { container } = mountRerenderable({
+            startDateOptions: { currentDate: '2026-10-10', onChangeDate: () => undefined, datePickerOptions: TIME_OPTIONS },
+            endDateOptions: { currentDate: '2026-10-15', onChangeDate: () => undefined, datePickerOptions: TIME_OPTIONS },
+        });
+        const values = Array.from(container.querySelectorAll('input.flatpickr-input')).map((input) => input.value);
+        expect(values).toEqual(['2026-10-10 00:00', '2026-10-15 23:59']);
+    });
+});

package/dist/temp/src/components/forms-and-input/range-date-picker-with-buttons/__tests__/RangeDatePickerWithButtons.test.js

@@ -1,8 +1,8 @@
-// @vitest-environment jsdom
 import { createElement, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
 import { afterEach, describe, expect, it, vi } from 'vitest';
+import { useFixedToday } from '../../../../__tests__/helpers/fixedToday';
 import { RangeDatePickerWithButtons } from '../RangeDatePickerWithButtons';
 const mounted = [];
 function mount(props) {
@@ -229,3 +229,203 @@ describe('#11 통지 후 사용처가 날짜를 되돌려도 입력 칸의 포
         expect(document.activeElement).toBe(endInput);
     });
 });
+// ── 위험 경로 RGB-xx (PR-7a) ──────────────────────────────────────────────
+// "오늘" 기준 계산은 Date 만 가짜로 고정한다. flatpickr 내부 타이머는 실제로 흐르게 둔다.
+/** FIXED_TODAY 기준 파생 날짜 */
+const TODAY = '2026-10-21';
+const YESTERDAY = '2026-10-20';
+const THREE_DAYS_AGO = '2026-10-18';
+const TEN_DAYS_AGO = '2026-10-11';
+const WEEK_AGO = '2026-10-14';
+const MONTH_AGO = '2026-09-21';
+const THREE_MONTHS_AGO = '2026-07-21';
+const YEAR_AGO = '2025-10-21';
+const periodButtonOf = (container, label) => {
+    const button = Array.from(container.querySelectorAll('.ncua-button-group button')).find((element) => element.textContent === label);
+    if (!button)
+        throw new Error(`기간 버튼을 찾을 수 없습니다: ${label}`);
+    return button;
+};
+const dateOptions = (currentDate, onChangeDate) => ({ currentDate, onChangeDate });
+describe('RGB-01·02 기간 버튼 → 시작일·종료일 계산', () => {
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    it('RGB-01 기간 버튼 click 은 그 버튼 key 로 setCurrentButtonId 를 호출한다', () => {
+        const setCurrentButtonId = vi.fn();
+        const container = mount({
+            currentButtonId: 'NONE',
+            setCurrentButtonId,
+            periodKeys: ['TODAY', '7DAYS'],
+            startDateOptions: dateOptions('', vi.fn()),
+            endDateOptions: dateOptions('', vi.fn()),
+        });
+        act(() => {
+            periodButtonOf(container, '7일').click();
+        });
+        expect(setCurrentButtonId).toHaveBeenCalledWith('7DAYS');
+    });
+    it.each([
+        { key: 'TODAY', start: TODAY },
+        { key: 'YESTERDAY', start: YESTERDAY },
+        { key: '7DAYS', start: WEEK_AGO },
+        { key: '1WEEK', start: WEEK_AGO },
+        { key: '1MONTHS', start: MONTH_AGO },
+        { key: '3MONTHS', start: THREE_MONTHS_AGO },
+        { key: '1YEAR', start: YEAR_AGO },
+    ])('RGB-01 currentButtonId $key → 시작일 $start · 종료일 오늘로 양쪽 onChangeDate', ({ key, start }) => {
+        useFixedToday();
+        const onStart = vi.fn();
+        const onEnd = vi.fn();
+        mount({
+            currentButtonId: key,
+            setCurrentButtonId: vi.fn(),
+            periodKeys: [key],
+            startDateOptions: dateOptions('', onStart),
+            endDateOptions: dateOptions('', onEnd),
+        });
+        expect(onStart).toHaveBeenCalledWith(start);
+        expect(onEnd).toHaveBeenCalledWith(TODAY);
+    });
+    it('RGB-01 useYesterdayAsEndDate 면 종료일만 어제로 두고 시작일은 오늘 기준 그대로 계산한다', () => {
+        useFixedToday();
+        const onStart = vi.fn();
+        const onEnd = vi.fn();
+        mount({
+            useYesterdayAsEndDate: true,
+            currentButtonId: '7DAYS',
+            setCurrentButtonId: vi.fn(),
+            periodKeys: ['7DAYS'],
+            startDateOptions: dateOptions('', onStart),
+            endDateOptions: dateOptions('', onEnd),
+        });
+        expect(onStart).toHaveBeenCalledWith(WEEK_AGO);
+        expect(onEnd).toHaveBeenCalledWith(YESTERDAY);
+    });
+    it('RGB-01 부모 state 로 연결하면 버튼 click 이 is-current 표시와 날짜 갱신까지 이어진다', () => {
+        useFixedToday();
+        const onStart = vi.fn();
+        const onEnd = vi.fn();
+        const Harness = () => {
+            const [buttonId, setButtonId] = useState('NONE');
+            return createElement(RangeDatePickerWithButtons, {
+                currentButtonId: buttonId,
+                setCurrentButtonId: setButtonId,
+                periodKeys: ['TODAY', '3DAYS'],
+                startDateOptions: dateOptions('', onStart),
+                endDateOptions: dateOptions('', onEnd),
+            });
+        };
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = createRoot(container);
+        act(() => {
+            root.render(createElement(Harness));
+        });
+        mounted.push({ root, container });
+        act(() => {
+            periodButtonOf(container, '3일').click();
+        });
+        expect(periodButtonOf(container, '3일').classList.contains('is-current')).toBe(true);
+        expect(periodButtonOf(container, '오늘').classList.contains('is-current')).toBe(false);
+        expect(onStart).toHaveBeenCalledWith(THREE_DAYS_AGO);
+        expect(onEnd).toHaveBeenCalledWith(TODAY);
+    });
+    it('RGB-02 ENTIRE 는 양쪽에 빈 문자열을 통지한다', () => {
+        useFixedToday();
+        const onStart = vi.fn();
+        const onEnd = vi.fn();
+        mount({
+            currentButtonId: 'ENTIRE',
+            setCurrentButtonId: vi.fn(),
+            periodKeys: ['ENTIRE'],
+            startDateOptions: dateOptions('2026-10-01', onStart),
+            endDateOptions: dateOptions('2026-10-10', onEnd),
+        });
+        expect(onStart).toHaveBeenCalledWith('');
+        expect(onEnd).toHaveBeenCalledWith('');
+    });
+});
+describe('RGB-03·04 날짜 직접 변경 · 커스텀 기간 · size', () => {
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    const flatpickrInputsOf = (container) => Array.from(container.querySelectorAll('input.flatpickr-input'));
+    it.each([
+        { side: 'START', index: 0 },
+        { side: 'END', index: 1 },
+    ])('RGB-03 $side 날짜를 직접 바꾸면 그쪽 onChangeDate 와 setCurrentButtonId("NONE") 을 호출한다', ({ index }) => {
+        const onStart = vi.fn();
+        const onEnd = vi.fn();
+        const setCurrentButtonId = vi.fn();
+        const container = mount({
+            currentButtonId: '7DAYS',
+            setCurrentButtonId,
+            periodKeys: ['7DAYS'],
+            startDateOptions: dateOptions('2026-10-01', onStart),
+            endDateOptions: dateOptions('2026-10-10', onEnd),
+        });
+        onStart.mockClear();
+        onEnd.mockClear();
+        act(() => {
+            flatpickrInputsOf(container)[index]._flatpickr.setDate('2026-10-05', true);
+        });
+        expect([onStart, onEnd][index]).toHaveBeenCalledWith('2026-10-05');
+        expect(setCurrentButtonId).toHaveBeenCalledWith('NONE');
+    });
+    it('RGB-03 currentButtonId 가 빈 문자열이면 날짜를 바꿔도 setCurrentButtonId 를 호출하지 않는다', () => {
+        const setCurrentButtonId = vi.fn();
+        const container = mount({
+            currentButtonId: '',
+            setCurrentButtonId,
+            periodKeys: ['7DAYS'],
+            startDateOptions: dateOptions('2026-10-01', vi.fn()),
+            endDateOptions: dateOptions('2026-10-10', vi.fn()),
+        });
+        act(() => {
+            flatpickrInputsOf(container)[0]._flatpickr.setDate('2026-10-05', true);
+        });
+        expect(setCurrentButtonId).not.toHaveBeenCalled();
+    });
+    it.each(['NONE', 'UNKNOWN_KEY'])('RGB-03 currentButtonId 가 %s 면 날짜를 다시 계산하지 않는다', (currentButtonId) => {
+        useFixedToday();
+        const onStart = vi.fn();
+        const onEnd = vi.fn();
+        mount({
+            currentButtonId,
+            setCurrentButtonId: vi.fn(),
+            periodKeys: ['7DAYS'],
+            startDateOptions: dateOptions('', onStart),
+            endDateOptions: dateOptions('', onEnd),
+        });
+        expect(onStart).not.toHaveBeenCalled();
+        expect(onEnd).not.toHaveBeenCalled();
+    });
+    it('RGB-04 periodItems 를 주면 그 항목으로 버튼을 그리고 기간을 계산한다', () => {
+        useFixedToday();
+        const TEN_DAYS = 10;
+        const onStart = vi.fn();
+        const container = mount({
+            currentButtonId: 'LAST_10',
+            setCurrentButtonId: vi.fn(),
+            periodKeys: ['LAST_10'],
+            periodItems: { LAST_10: { text: '최근 10일', period: TEN_DAYS, unit: 'days' } },
+            startDateOptions: dateOptions('', onStart),
+            endDateOptions: dateOptions('', vi.fn()),
+        });
+        expect(periodButtonOf(container, '최근 10일').classList.contains('is-current')).toBe(true);
+        expect(onStart).toHaveBeenCalledWith(TEN_DAYS_AGO);
+    });
+    it('RGB-04 size 를 ButtonGroup 과 RangeDatePicker 에 전달한다', () => {
+        const container = mount({
+            size: 'sm',
+            currentButtonId: 'NONE',
+            setCurrentButtonId: vi.fn(),
+            periodKeys: ['TODAY'],
+            startDateOptions: dateOptions('', vi.fn()),
+            endDateOptions: dateOptions('', vi.fn()),
+        });
+        expect(container.querySelector('.ncua-button-group')?.classList.contains('ncua-button-group--sm')).toBe(true);
+        expect(container.querySelector('.ncua-date-picker')?.classList.contains('ncua-date-picker--sm')).toBe(true);
+    });
+});

package/dist/temp/src/components/forms-and-input/select/__tests__/Select.test.d.ts

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

package/dist/temp/src/components/forms-and-input/select/__tests__/Select.test.js

@@ -0,0 +1,214 @@
+// @vitest-environment jsdom
+//
+// Select (React, native select) 위험 경로 — 위험 목록표 SE-xx.
+// 값 변경은 React 가 감지하도록 네이티브 value setter 로 값을 넣은 뒤 bubbling change 를 보낸다.
+// react-hook-form 은 타입만 쓰이므로 UseFormRegisterReturn 모양의 가짜 객체로 대체한다.
+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 { Select } from '../Select';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const OPTIONS = [
+    { id: 'a', label: 'A' },
+    { id: 'b', label: 'B' },
+];
+const createRegister = (name = 'category') => ({ name, onChange: vi.fn(), onBlur: vi.fn(), ref: vi.fn() });
+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 render = (props = {}) => renderElement(createElement(Select, { optionItems: OPTIONS, ...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 selectOf = (view) => requireElement(view, 'select');
+const optionsOf = (view) => Array.from(selectOf(view).options).map((option) => [option.value, option.textContent ?? '']);
+const nativeValueSetter = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'value')?.set;
+const changeTo = (select, value) => {
+    act(() => {
+        nativeValueSetter?.call(select, value);
+        select.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+};
+const keyDown = (element, key) => {
+    const event = new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true });
+    act(() => {
+        element.dispatchEvent(event);
+    });
+    return event;
+};
+/** onChange 의 첫 인자(change 이벤트)에서 선택 값을 꺼낸다 — 이벤트 풀링 없음(React 17+) */
+const changedValueOf = (handler) => handler.mock.calls[0][0].target.value;
+// ── P0 ─────────────────────────────────────────────────
+describe('Select — 옵션 렌더·선택 (SE-01)', () => {
+    it('SE-01 placeholder(value "") → optionItems → children 순서로 옵션을 렌더한다', () => {
+        const view = render({ placeholder: '선택', children: createElement('option', { value: 'c' }, 'C') });
+        expect(optionsOf(view)).toEqual([
+            ['', '선택'],
+            ['a', 'A'],
+            ['b', 'B'],
+            ['c', 'C'],
+        ]);
+    });
+    it('SE-01 옵션을 고르면 onChange 가 change 이벤트를 받고 select 값이 바뀐다', () => {
+        const onChange = vi.fn();
+        const view = render({ onChange });
+        changeTo(selectOf(view), 'b');
+        expect(changedValueOf(onChange)).toBe('b');
+        expect(selectOf(view).value).toBe('b');
+    });
+});
+describe('Select — register (SE-02·SE-03)', () => {
+    it('SE-02 register 의 name·ref 가 select 에 붙고 change·blur 가 register 핸들러로 간다', () => {
+        const register = createRegister();
+        const view = render({ register });
+        const select = selectOf(view);
+        changeTo(select, 'a');
+        act(() => {
+            select.focus();
+            select.blur();
+        });
+        expect(select.name).toBe('category');
+        expect(register.ref).toHaveBeenCalledWith(select);
+        expect(changedValueOf(register.onChange)).toBe('a');
+        expect(register.onBlur).toHaveBeenCalled();
+    });
+    it('SE-03 register 와 onChange 를 함께 넘기면 props.onChange 만 호출되고 register.onChange 는 호출되지 않는다', () => {
+        // 현재 동작 고정 — 결함 후보: #596 ({...register}{...props} 순서라 props.onChange 가 덮음 — react-hook-form 값 유실, SB-07 과 같은 증상)
+        const register = createRegister();
+        const onChange = vi.fn();
+        const view = render({ register, onChange });
+        changeTo(selectOf(view), 'b');
+        expect(changedValueOf(onChange)).toBe('b');
+        expect(register.onChange).not.toHaveBeenCalled();
+    });
+    it.todo('SE-03 register 와 onChange 를 함께 넘기면 register.onChange 와 props.onChange 를 모두 호출한다 (기대, #596)');
+});
+describe('Select — readOnly 키 차단 (SE-04)', () => {
+    it('SE-04 readOnly 면 aria-readonly true 이고 Tab 외 키는 preventDefault, onKeyDown 은 먼저 호출된다', () => {
+        /** onKeyDown 호출 시점에 이미 막혔는지 — 먼저 호출되면 false */
+        const preventedAtCall = [];
+        const onKeyDown = vi.fn((event) => {
+            preventedAtCall.push(event.nativeEvent.defaultPrevented);
+        });
+        const view = render({ readOnly: true, onKeyDown });
+        const arrow = keyDown(selectOf(view), 'ArrowDown');
+        const tab = keyDown(selectOf(view), 'Tab');
+        expect(selectOf(view).getAttribute('aria-readonly')).toBe('true');
+        expect([arrow.defaultPrevented, tab.defaultPrevented]).toEqual([true, false]);
+        expect(onKeyDown.mock.calls.map(([event]) => event.key)).toEqual(['ArrowDown', 'Tab']);
+        expect(preventedAtCall).toEqual([false, false]);
+    });
+    it('SE-04 readOnly 가 아니면 키를 막지 않는다', () => {
+        const view = render();
+        const arrow = keyDown(selectOf(view), 'ArrowDown');
+        expect(arrow.defaultPrevented).toBe(false);
+        expect(selectOf(view).getAttribute('aria-readonly')).toBe('false');
+    });
+});
+// ── P1 ~ P3 ────────────────────────────────────────────
+describe('Select — controlled value (SE-10)', () => {
+    it('SE-10 value prop 으로 선택을 표시하고 부모가 바꾸면 따라간다', () => {
+        const onChange = vi.fn();
+        const view = render({ value: 'b', onChange });
+        expect(selectOf(view).value).toBe('b');
+        render({ value: 'a', onChange });
+        expect(selectOf(view).value).toBe('a');
+    });
+});
+describe('Select — readOnly 마우스 선택 (SE-05)', () => {
+    it('SE-05 readOnly 여도 change(마우스 선택)로 값이 바뀌고 onChange 가 호출된다', () => {
+        // 현재 동작 고정 — 결함 후보: #597 (readOnly 가 keydown 만 막아 마우스 선택으로 값이 바뀜 — 공개 프롭 계약 위반)
+        const onChange = vi.fn();
+        const view = render({ readOnly: true, onChange });
+        changeTo(selectOf(view), 'b');
+        expect(changedValueOf(onChange)).toBe('b');
+        expect(selectOf(view).value).toBe('b');
+    });
+    it.todo('SE-05 readOnly 면 마우스 선택도 막혀 값이 바뀌지 않고 onChange 가 호출되지 않는다 (기대, #597)');
+});
+describe('Select — ref (SE-06)', () => {
+    it('SE-06 forwarded ref 는 select 를 가리킨다', () => {
+        const ref = createRef();
+        const view = render({ ref });
+        expect(ref.current).toBe(selectOf(view));
+    });
+    it('SE-06 register 와 forwarded ref 를 함께 주면 register.ref 만 select 를 받고 forwarded ref 는 null 이다', () => {
+        // 현재 동작 고정 — 결함 후보: #597 ({...register} 의 ref 가 forwarded ref 를 덮음)
+        const ref = createRef();
+        const register = createRegister();
+        const view = render({ ref, register });
+        expect(register.ref).toHaveBeenCalledWith(selectOf(view));
+        expect(ref.current).toBeNull();
+    });
+    it.todo('SE-06 register 와 forwarded ref 를 함께 주면 두 ref 모두 select 를 받는다 (기대, #597)');
+});
+describe('Select — disabled (SE-07)', () => {
+    it('SE-07 disabled 면 select 가 disabled 다', () => {
+        const view = render({ disabled: true });
+        expect(selectOf(view).disabled).toBe(true);
+    });
+    it.each([
+        ['disabledPlaceholder true', true, true],
+        ['기본값(false)', undefined, false],
+    ])('SE-07 %s → placeholder 옵션 disabled %s', (_label, disabledPlaceholder, expected) => {
+        const view = render({ placeholder: '선택', disabledPlaceholder });
+        expect(selectOf(view).options[0].disabled).toBe(expected);
+    });
+});
+describe('Select — 클래스·hintText (SE-08)', () => {
+    const rootOf = (view) => requireElement(view, '.ncua-select');
+    it('SE-08 기본값은 size xs 이고 simple·readonly·destructive 클래스가 없다', () => {
+        const view = render();
+        expect(['ncua-select--xs', 'ncua-select--simple', 'ncua-select--readonly', 'destructive'].map((name) => rootOf(view).classList.contains(name))).toEqual([true, false, false, false]);
+    });
+    it('SE-08 type simple·readOnly·destructive·size sm 을 루트 클래스로 반영한다', () => {
+        const view = render({ type: 'simple', readOnly: true, destructive: true, size: 'sm' });
+        expect(['ncua-select--sm', 'ncua-select--simple', 'ncua-select--readonly', 'destructive'].map((name) => rootOf(view).classList.contains(name))).toEqual([true, true, true, true]);
+    });
+    it('SE-08 hintText 가 있으면 HintText 를 렌더하고 destructive 를 전달한다', () => {
+        const view = render({ hintText: '필수 항목입니다', destructive: true });
+        const hint = requireElement(view, '.ncua-hint-text');
+        expect([hint.textContent, hint.classList.contains('destructive')]).toEqual(['필수 항목입니다', true]);
+    });
+    it('SE-08 hintText 가 없으면 HintText 를 렌더하지 않는다', () => {
+        const view = render();
+        expect(view.querySelector('.ncua-hint-text')).toBeNull();
+    });
+});
+describe('Select — className (SE-09)', () => {
+    it('SE-09 className 이 바깥 span 과 select 양쪽에 붙는다', () => {
+        // 현재 동작 고정 — 결함 후보: #597 (같은 className 이 두 요소에 중복 적용)
+        const view = render({ className: 'my-select' });
+        expect([
+            requireElement(view, '.ncua-select').classList.contains('my-select'),
+            selectOf(view).classList.contains('my-select'),
+        ]).toEqual([true, true]);
+    });
+    it.todo('SE-09 className 은 바깥 span 한 곳에만 붙는다 (기대, #597)');
+});

package/dist/temp/src/components/forms-and-input/select-box/SelectBox.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 DEFAULT_MAX_HEIGHT = 275;
 type SelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> & {
     children?: ReactNode;
     placeholder?: string;
@@ -42,4 +41,4 @@ type SelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> &
 };
 declare const SelectBox: import("react").ForwardRefExoticComponent<Omit<SelectBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export type { SelectBoxProps };
-export { DEFAULT_MAX_HEIGHT, SelectBox };
+export { SelectBox };

package/dist/temp/src/components/forms-and-input/select-box/SelectBox.js

@@ -156,4 +156,4 @@ const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceho
                                         }) })] }), !shouldPortal && selectDropdownNode] }), hintText && (_jsx(HintText, { destructive: destructive, className: "ncua-hint-text", children: hintText })), register && (_jsx("input", { type: "hidden", ...register, value: multiple ? JSON.stringify(value || []) : String(value || '') }))] }), selectedTags.length > 0 && (_jsx("div", { className: "ncua-selectbox__tags", children: selectedTags.map((tag) => (_jsx(Tag, { text: tag.label, size: "sm", close: true, onButtonClick: () => handleRemoveTag(tag.id) }, tag.id))) })), portaledDropdown] }));
 });
 SelectBox.displayName = 'SelectBox';
-export { DEFAULT_MAX_HEIGHT, SelectBox };
+export { SelectBox };

package/dist/temp/src/components/forms-and-input/select-box/__tests__/SelectBox.portal.test.d.ts

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