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

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

@@ -0,0 +1,361 @@
+// @vitest-environment jsdom
+//
+// React DatePicker 위치·리스너·portal 컨테이너·정리·표현 위험 경로 — 위험 목록표 RDP-06~10 · CI-01 (PR-7a).
+// jsdom 은 레이아웃을 계산하지 않으므로 getBoundingClientRect·innerHeight·offsetHeight 를 stub 하고
+// afterEach 에서 원복한다. flatpickr 는 실구현을 쓴다.
+import { Calendar, Clock } from '@ncds/ui-admin-icon';
+import flatpickr from 'flatpickr';
+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 { DatePicker } from '../DatePicker';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const LOADED_DATE = '2024-03-15';
+const SELECTED_DATE = '2024-03-18';
+const VIEWPORT_HEIGHT = 800;
+const CALENDAR_HEIGHT = 300;
+/** DatePicker.tsx 의 CALENDAR_GAP 과 같은 값 — 캘린더와 입력 사이 간격 */
+const CALENDAR_GAP = 6;
+/** 아래 공간 100px — 캘린더(300 + 6)가 들어가지 않는다 */
+const BOTTOM_NEAR_EDGE = 700;
+/** 아래 공간 700px — 캘린더가 들어간다 */
+const BOTTOM_WITH_ROOM = 100;
+const FLIPPED_TOP = `${-(CALENDAR_HEIGHT + CALENDAR_GAP)}px`;
+const ICON_SIZE_XS = '14';
+const ICON_SIZE_SM = '16';
+const PORTAL_SELECTOR = ':scope > .ncua-date-picker--portal';
+const mounted = [];
+/** overflow 부모(기본 auto) 안에 마운트한다 — auto 면 collectScrollParents 가 이 부모를 스크롤 대상으로 잡는다 */
+const mount = (props, overflow = 'auto') => {
+    const scrollParent = document.createElement('div');
+    scrollParent.style.overflow = overflow;
+    const container = document.createElement('div');
+    scrollParent.appendChild(container);
+    document.body.appendChild(scrollParent);
+    const root = createRoot(container);
+    const render = (next) => {
+        act(() => {
+            root.render(createElement(DatePicker, { currentDate: LOADED_DATE, onChangeDate: () => undefined, ...next }));
+        });
+    };
+    render(props);
+    const entry = { root, container, scrollParent };
+    mounted.push(entry);
+    const unmount = () => {
+        act(() => {
+            root.unmount();
+        });
+        mounted.splice(mounted.indexOf(entry), 1);
+    };
+    return { container, scrollParent, render, unmount };
+};
+afterEach(() => {
+    for (const { root, scrollParent } of mounted.splice(0)) {
+        act(() => {
+            root.unmount();
+        });
+        scrollParent.remove();
+    }
+    document.body.innerHTML = '';
+    vi.restoreAllMocks();
+});
+const inputOf = (container) => {
+    const input = container.querySelector('input.flatpickr-input');
+    if (!input)
+        throw new Error('flatpickr 입력 칸을 찾을 수 없습니다');
+    return input;
+};
+const calendarOf = (input) => input._flatpickr.calendarContainer;
+const open = (input) => {
+    act(() => {
+        input._flatpickr.open();
+    });
+};
+const close = (input) => {
+    act(() => {
+        input._flatpickr.close();
+    });
+};
+/** 입력 wrapper 의 아래 끝(bottom)·뷰포트 높이·캘린더 높이를 고정한다 */
+const stubLayout = (bottom) => {
+    const rect = vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({ bottom });
+    vi.spyOn(window, 'innerHeight', 'get').mockReturnValue(VIEWPORT_HEIGHT);
+    vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(CALENDAR_HEIGHT);
+    return { setBottom: (next) => rect.mockReturnValue({ bottom: next }) };
+};
+describe('RDP-06 열린 캘린더 밖 mousedown 시 시간 입력 blur', () => {
+    const TIME_OPTIONS = { enableTime: true, dateFormat: 'Y-m-d H:i' };
+    const hourOf = (input) => {
+        const hour = calendarOf(input).querySelector('.flatpickr-hour');
+        if (!hour)
+            throw new Error('시 입력 칸이 없습니다');
+        return hour;
+    };
+    it.each([
+        { mode: 'static', portal: false },
+        { mode: 'portal', portal: true },
+    ])('RDP-06 $mode: 바깥 mousedown 은 포커스된 시 입력을 blur 한다', ({ portal }) => {
+        const { container } = mount({ portal, currentDate: `${LOADED_DATE} 10:00`, datePickerOptions: TIME_OPTIONS });
+        const input = inputOf(container);
+        open(input);
+        const hour = hourOf(input);
+        hour.focus();
+        document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+        expect(document.activeElement).not.toBe(hour);
+    });
+    it.each([
+        { mode: 'static', portal: false },
+        { mode: 'portal', portal: true },
+    ])('RDP-06 $mode: 캘린더 안 mousedown 은 시 입력 포커스를 유지한다', ({ portal }) => {
+        const { container } = mount({ portal, currentDate: `${LOADED_DATE} 10:00`, datePickerOptions: TIME_OPTIONS });
+        const input = inputOf(container);
+        open(input);
+        const hour = hourOf(input);
+        hour.focus();
+        hour.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+        expect(document.activeElement).toBe(hour);
+    });
+    it.each([
+        { mode: 'static', portal: false },
+        { mode: 'portal', portal: true },
+    ])('RDP-06 $mode: 캘린더가 닫혀 있으면 바깥 mousedown 이 포커스를 건드리지 않는다', ({ portal }) => {
+        const { container } = mount({ portal, currentDate: `${LOADED_DATE} 10:00`, datePickerOptions: TIME_OPTIONS });
+        const hour = hourOf(inputOf(container));
+        hour.focus();
+        document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+        expect(document.activeElement).toBe(hour);
+    });
+});
+describe('RDP-07 static 위치 조정', () => {
+    it.each([
+        { label: '아래 공간이 부족하면 위로 뒤집는다', bottom: BOTTOM_NEAR_EDGE, expected: FLIPPED_TOP },
+        { label: '아래 공간이 충분하면 top 을 비운다', bottom: BOTTOM_WITH_ROOM, expected: '' },
+    ])('RDP-07 open 시 $label', ({ bottom, expected }) => {
+        stubLayout(bottom);
+        const { container } = mount({});
+        const input = inputOf(container);
+        open(input);
+        expect(calendarOf(input).style.top).toBe(expected);
+    });
+    it.each([
+        {
+            label: 'scroll 부모 scroll',
+            fire: (scrollParent) => scrollParent.dispatchEvent(new Event('scroll')),
+        },
+        { label: 'window scroll', fire: () => window.dispatchEvent(new Event('scroll')) },
+        { label: 'window resize', fire: () => window.dispatchEvent(new Event('resize')) },
+    ])('RDP-07 열린 동안 $label 이 오면 위치를 다시 계산한다', ({ fire }) => {
+        const layout = stubLayout(BOTTOM_WITH_ROOM);
+        const { container, scrollParent } = mount({});
+        const input = inputOf(container);
+        open(input);
+        layout.setBottom(BOTTOM_NEAR_EDGE);
+        fire(scrollParent);
+        expect(calendarOf(input).style.top).toBe(FLIPPED_TOP);
+    });
+    it('RDP-07 overflow 가 visible 인 부모는 scroll 대상으로 잡지 않는다', () => {
+        // jsdom 은 overflow 단축 속성을 overflowY 로 펼치지 않으므로 inline overflow:visible 부모만 두 값을 visible 로 돌려준다
+        const originalGetComputedStyle = window.getComputedStyle.bind(window);
+        vi.spyOn(window, 'getComputedStyle').mockImplementation((element, pseudo) => element instanceof HTMLElement && element.style.overflow === 'visible'
+            ? { overflow: 'visible', overflowY: 'visible' }
+            : originalGetComputedStyle(element, pseudo));
+        const layout = stubLayout(BOTTOM_WITH_ROOM);
+        const { container, scrollParent } = mount({}, 'visible');
+        const input = inputOf(container);
+        open(input);
+        layout.setBottom(BOTTOM_NEAR_EDGE);
+        scrollParent.dispatchEvent(new Event('scroll'));
+        expect(calendarOf(input).style.top).toBe('');
+    });
+    it('RDP-13 static: close 뒤에도 scroll·resize 리스너가 남아 닫힌 캘린더 위치를 계속 고친다', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (react-flatpickr 4.0.11 이 렌더 effect 에서 set('onClose', [blur]) 로 덮어써 onReady 에서 push 한 해제 훅이 사라짐)
+        const layout = stubLayout(BOTTOM_WITH_ROOM);
+        const { container, scrollParent } = mount({});
+        const input = inputOf(container);
+        open(input);
+        close(input);
+        layout.setBottom(BOTTOM_NEAR_EDGE);
+        scrollParent.dispatchEvent(new Event('scroll'));
+        window.dispatchEvent(new Event('scroll'));
+        window.dispatchEvent(new Event('resize'));
+        expect(calendarOf(input).style.top).toBe(FLIPPED_TOP);
+    });
+    it.todo('RDP-13 static: close 하면 scroll 부모·window 의 위치 조정 리스너를 해제한다 (기대 동작)');
+});
+describe('RDP-08 portal 컨테이너', () => {
+    const portalContainers = () => Array.from(document.body.querySelectorAll(PORTAL_SELECTOR));
+    it('RDP-08 body 직속에 컨테이너 1개를 만들고 캘린더를 그 안에 둔다', () => {
+        const { container } = mount({ portal: true });
+        const containers = portalContainers();
+        expect(containers).toHaveLength(1);
+        expect(containers[0].contains(calendarOf(inputOf(container)))).toBe(true);
+        expect(containers[0].classList.contains('ncua-date-picker--xs')).toBe(true);
+    });
+    it('RDP-08 재렌더 시 컨테이너를 재사용하며 size·has-time 변경을 className 에 반영한다', () => {
+        const { render } = mount({ portal: true });
+        const [first] = portalContainers();
+        render({ portal: true, size: 'sm', datePickerOptions: { enableTime: true, dateFormat: 'Y-m-d H:i' } });
+        expect(portalContainers()).toEqual([first]);
+        expect(first.classList.contains('ncua-date-picker--sm')).toBe(true);
+        expect(first.classList.contains('ncua-date-picker--xs')).toBe(false);
+        expect(first.classList.contains('ncua-date-picker--has-time')).toBe(true);
+    });
+    it.each([
+        { label: 'window scroll', fire: () => window.dispatchEvent(new Event('scroll')) },
+        {
+            label: 'scroll 부모 scroll',
+            fire: (scrollParent) => scrollParent.dispatchEvent(new Event('scroll')),
+        },
+    ])('RDP-08 열린 동안 $label 이 오면 캘린더 위치를 다시 잡는다', ({ fire }) => {
+        const { container, scrollParent } = mount({ portal: true });
+        const input = inputOf(container);
+        open(input);
+        const position = vi.spyOn(input._flatpickr, '_positionCalendar');
+        fire(scrollParent);
+        expect(position).toHaveBeenCalled();
+    });
+    it('RDP-13 portal: close 뒤에도 scroll 리스너가 남아 닫힌 캘린더 위치를 계속 계산한다', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (static 과 같은 원인 — onClose 해제 훅이 react-flatpickr 에 덮어써짐)
+        const { container, scrollParent } = mount({ portal: true });
+        const input = inputOf(container);
+        open(input);
+        close(input);
+        const position = vi.spyOn(input._flatpickr, '_positionCalendar');
+        window.dispatchEvent(new Event('scroll'));
+        scrollParent.dispatchEvent(new Event('scroll'));
+        expect(position).toHaveBeenCalled();
+    });
+    it.todo('RDP-13 portal: close 하면 scroll 부모·window 의 재배치 리스너를 해제한다 (기대 동작)');
+    it('RDP-08 언마운트하면 portal 컨테이너를 body 에서 제거한다', () => {
+        const { unmount } = mount({ portal: true });
+        unmount();
+        expect(portalContainers()).toEqual([]);
+    });
+    it('RDP-08 언마운트하면 대기 중인 blur 동기화를 취소해 통지하지 않는다', async () => {
+        const onChangeDate = vi.fn();
+        const { container, unmount } = mount({ portal: true, onChangeDate });
+        const input = inputOf(container);
+        act(() => {
+            input._flatpickr.setDate(SELECTED_DATE, false);
+            input.dispatchEvent(new Event('blur'));
+        });
+        unmount();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(onChangeDate).not.toHaveBeenCalled();
+    });
+});
+describe('RDP-09 파괴 시 리스너 정리', () => {
+    it('RDP-09 static: 열린 채 언마운트해도 scroll 부모·window 의 위치 조정 리스너를 제거한다', () => {
+        stubLayout(BOTTOM_WITH_ROOM);
+        const { container, scrollParent, unmount } = mount({});
+        const input = inputOf(container);
+        open(input);
+        const adjust = input._flatpickr._adjustPosition;
+        const windowRemove = vi.spyOn(window, 'removeEventListener');
+        const parentRemove = vi.spyOn(scrollParent, 'removeEventListener');
+        unmount();
+        expect(adjust).toEqual(expect.any(Function));
+        expect(windowRemove).toHaveBeenCalledWith('resize', adjust);
+        expect(windowRemove).toHaveBeenCalledWith('scroll', adjust);
+        expect(parentRemove).toHaveBeenCalledWith('scroll', adjust);
+    });
+    it('RDP-09 portal: 열린 채 언마운트해도 scroll 부모·window 의 재배치 리스너를 제거한다', () => {
+        const { container, scrollParent, unmount } = mount({ portal: true });
+        const input = inputOf(container);
+        open(input);
+        const reposition = input._flatpickr._reposition;
+        const windowRemove = vi.spyOn(window, 'removeEventListener');
+        const parentRemove = vi.spyOn(scrollParent, 'removeEventListener');
+        unmount();
+        expect(reposition).toEqual(expect.any(Function));
+        expect(windowRemove).toHaveBeenCalledWith('scroll', reposition);
+        expect(parentRemove).toHaveBeenCalledWith('scroll', reposition);
+    });
+});
+describe('RDP-14 · RDP-16 파기·재생성 경계', () => {
+    it('RDP-14 static: 파기된 인스턴스에 늦게 도착한 위치 조정은 아무것도 하지 않는다', () => {
+        const { container, unmount } = mount({});
+        const adjustPosition = inputOf(container)._flatpickr._adjustPosition;
+        unmount();
+        expect(adjustPosition).toEqual(expect.any(Function));
+        expect(() => adjustPosition?.()).not.toThrow();
+    });
+    it('RDP-14 portal: 파기된 인스턴스에 늦게 도착한 재배치는 _positionCalendar 를 부르지 않는다', () => {
+        const { container, unmount } = mount({ portal: true });
+        const instance = inputOf(container)._flatpickr;
+        const reposition = instance._reposition;
+        const positionCalendar = vi.spyOn(instance, '_positionCalendar');
+        unmount();
+        expect(reposition).toEqual(expect.any(Function));
+        reposition?.();
+        expect(positionCalendar).not.toHaveBeenCalled();
+    });
+    it('RDP-16 portal: 재생성 뒤에도 입력이 포커스를 쥐고 있으면 focus 를 다시 걸지 않는다', () => {
+        const { container, render } = mount({ portal: true });
+        const input = inputOf(container);
+        act(() => {
+            input.focus();
+        });
+        const focus = vi.spyOn(HTMLElement.prototype, 'focus');
+        render({ portal: true, size: 'sm' });
+        expect(document.activeElement).toBe(inputOf(container));
+        expect(focus).not.toHaveBeenCalled();
+    });
+});
+describe('RDP-10 · CI-01 표현', () => {
+    const iconOf = (container) => {
+        const icon = container.querySelector('.ncua-date-picker__ico svg');
+        if (!icon)
+            throw new Error('아이콘이 없습니다');
+        return icon;
+    };
+    /** 같은 크기(xs)로 아이콘 컴포넌트를 단독 렌더한 svg 내부 마크업 — 어떤 아이콘이 그려졌는지 판별용 */
+    const iconMarkupOf = (Icon) => {
+        const host = document.createElement('div');
+        const root = createRoot(host);
+        act(() => {
+            root.render(createElement(Icon, { width: Number(ICON_SIZE_XS), height: Number(ICON_SIZE_XS) }));
+        });
+        const markup = host.querySelector('svg')?.innerHTML ?? '';
+        act(() => {
+            root.unmount();
+        });
+        return markup;
+    };
+    it('RDP-10 formatDate 는 무효 Date 에 "" 를, 포맷 변환 예외에도 "" 를 돌려준다', () => {
+        const { container } = mount({});
+        const { formatDate } = inputOf(container)._flatpickr.config;
+        const locale = flatpickr.l10ns.default;
+        expect(formatDate?.(new Date(Number.NaN), 'Y-m-d', locale)).toBe('');
+        expect(formatDate?.(new Date(), undefined, locale)).toBe('');
+    });
+    it('RDP-10 noCalendar 시간 전용이면 달력 아이콘 대신 시계 아이콘을 그린다', () => {
+        const calendar = mount({});
+        const clock = mount({
+            currentDate: '10:00',
+            datePickerOptions: { enableTime: true, noCalendar: true, dateFormat: 'H:i' },
+        });
+        expect(iconOf(clock.container).innerHTML).toBe(iconMarkupOf(Clock));
+        expect(iconOf(calendar.container).innerHTML).toBe(iconMarkupOf(Calendar));
+    });
+    it.each([
+        { size: 'xs', expected: ICON_SIZE_XS },
+        { size: 'sm', expected: ICON_SIZE_SM },
+    ])('CI-01 size $size 면 아이콘 크기는 $expected 다', ({ size, expected }) => {
+        const { container } = mount({ size });
+        expect(iconOf(container).getAttribute('width')).toBe(expected);
+    });
+    it('RDP-10 destructive 메시지를 표시하고 루트에 destructive 클래스를 붙인다', () => {
+        const MESSAGE = '날짜를 확인해 주세요';
+        const { container } = mount({ destructive: MESSAGE });
+        const root = container.querySelector('.ncua-date-picker');
+        expect(root?.classList.contains('ncua-date-picker--destructive')).toBe(true);
+        expect(container.querySelector('.ncua-date-picker__destructive')?.textContent).toBe(MESSAGE);
+    });
+    it('RDP-10 disabled 면 루트에 disabled 클래스를 붙이고 입력을 비활성화한다', () => {
+        const { container } = mount({ disabled: true });
+        expect(container.querySelector('.ncua-date-picker')?.classList.contains('ncua-date-picker--disabled')).toBe(true);
+        expect(inputOf(container).disabled).toBe(true);
+    });
+});

package/dist/temp/src/components/forms-and-input/date-picker/__tests__/utils.test.d.ts

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

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

@@ -0,0 +1,34 @@
+// date-picker utils 위험 경로 — 위험 목록표 DU-xx. 오늘 날짜는 fake timers 로 고정한다.
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { getDateFormat, getToday } from '../utils';
+/** 로컬 시각(오프셋 없는 ISO 는 로컬로 해석) — 월·일 한 자리 0 채움 확인용 */
+const NOW = new Date('2026-03-05T10:00:00');
+const NOW_TEXT = '2026-03-05';
+/** 연말 늦은 시각 — 로컬 기준으로 날짜가 넘어가지 않는다 */
+const OTHER_DATE = new Date('2025-12-31T23:00:00');
+const OTHER_TEXT = '2025-12-31';
+beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(NOW);
+});
+afterEach(() => {
+    vi.useRealTimers();
+});
+describe('date-picker utils — getDateFormat (DU-01)', () => {
+    it.each([
+        ['Date', OTHER_DATE, OTHER_TEXT],
+        ['ISO 날짜 문자열', '2024-07-09', '2024-07-09'],
+    ])('DU-01 %s 를 YYYY-MM-DD 로 만든다', (_label, input, expected) => {
+        expect(getDateFormat(input)).toBe(expected);
+    });
+    it('DU-01 인자를 생략하면 오늘 날짜를 쓴다', () => {
+        expect(getDateFormat()).toBe(NOW_TEXT);
+    });
+});
+describe('date-picker utils — getToday (DU-02)', () => {
+    it('DU-02 호출 시점의 Date 를 돌려준다', () => {
+        const today = getToday();
+        expect(today).toBeInstanceOf(Date);
+        expect(today.getTime()).toBe(NOW.getTime());
+    });
+});

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

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

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

@@ -0,0 +1,206 @@
+// @vitest-environment jsdom
+//
+// React FileInput 선택 · 태그 삭제 · 검증 · 찾기 · ref · 표시 — 위험 목록표 RFL-xx (PR-7d).
+// object URL 해제 · showFileTags 는 FileInput.test.ts 가 덮는다. 하위 컴포넌트(Button · Tag)는 실구현을 쓴다.
+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 { browseButton, createFileFactory, fileInputOf, indexesIn, lastFilesOf, mockObjectUrls, selectFiles as selectFilesIn, } from '../../../../__tests__/helpers/fileInput';
+import { FileInput, FileInputErrorType } from '../FileInput';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const MAX_FILE_SIZE = 8;
+const OVER_SIZE = 16;
+mockObjectUrls();
+const mounted = [];
+afterEach(() => {
+    for (const { root, container } of mounted.splice(0)) {
+        act(() => {
+            root.unmount();
+        });
+        container.remove();
+    }
+    vi.restoreAllMocks();
+});
+/* ========== 공통 헬퍼 ========== */
+const mount = (props) => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+        root.render(createElement(FileInput, props));
+    });
+    mounted.push({ root, container });
+    return container;
+};
+const makeFile = createFileFactory({ type: 'application/pdf' });
+const selectFiles = (container, filesToSelect) => selectFilesIn(container, filesToSelect, act);
+const tagTexts = (container) => Array.from(container.querySelectorAll('.ncua-tag__text')).map((tag) => tag.textContent);
+const closeButtons = (container) => Array.from(container.querySelectorAll('.ncua-tag__close'));
+/** 요소가 없으면 throw 한다 — 선택적 체이닝은 요소 부재에도 이후 단언이 통과해 버린다 */
+const clickElement = (element) => {
+    if (!element)
+        throw new Error('클릭할 요소를 찾지 못했습니다');
+    act(() => {
+        element.click();
+    });
+};
+const errorTypesOf = (onFail) => onFail.mock.calls[0][0].map((item) => item.errorType);
+/* ========== P0 — uncontrolled · 태그 삭제 · 검증 · 찾기 · onFail 항목 ========== */
+describe('RFL-01 uncontrolled(value 없음)', () => {
+    it('RFL-01 선택하면 내부 목록으로 onFileSelect 를 부르고 태그를 표시한다', () => {
+        const onFileSelect = vi.fn();
+        const container = mount({ onFileSelect });
+        const picked = makeFile('a.pdf');
+        selectFiles(container, [picked]);
+        expect(indexesIn([picked], lastFilesOf(onFileSelect))).toEqual([0]);
+        expect(tagTexts(container)).toEqual(['a.pdf']);
+    });
+    it('RFL-01 태그 닫기는 그 파일을 빼고 나머지로 onFileSelect 를 부른다', () => {
+        const onFileSelect = vi.fn();
+        const container = mount({ onFileSelect, multiple: true });
+        const first = makeFile('first.pdf');
+        const second = makeFile('second.pdf');
+        selectFiles(container, [first, second]);
+        clickElement(closeButtons(container)[0]);
+        expect(indexesIn([second], lastFilesOf(onFileSelect))).toEqual([0]);
+        expect(tagTexts(container)).toEqual(['second.pdf']);
+    });
+});
+describe('RFL-02 controlled 태그 삭제', () => {
+    it('RFL-02 태그 닫기는 나머지 목록으로 onChange 를 부른다', () => {
+        const onChange = vi.fn();
+        const first = makeFile('first.pdf');
+        const second = makeFile('second.pdf');
+        const container = mount({ value: [first, second], onChange });
+        clickElement(closeButtons(container)[0]);
+        expect(indexesIn([second], lastFilesOf(onChange))).toEqual([0]);
+    });
+});
+describe('RFL-03 크기 · 개수 검증', () => {
+    it('RFL-03 maxFileSize 를 넘으면 EXCEED_MAX_FILE_SIZE 로 onFail 을 부른다', () => {
+        const onFail = vi.fn();
+        const container = mount({ onFail, maxFileSize: MAX_FILE_SIZE });
+        selectFiles(container, [makeFile('big.pdf', OVER_SIZE)]);
+        expect(errorTypesOf(onFail)).toEqual([FileInputErrorType.EXCEED_MAX_FILE_SIZE]);
+    });
+    it('RFL-03 기존 + 이번 통과분이 maxFileCount 에 닿으면 나머지를 EXCEED_MAX_FILE_COUNT 로 반려한다', () => {
+        const onChange = vi.fn();
+        const onFail = vi.fn();
+        const existing = makeFile('existing.pdf');
+        const container = mount({ value: [existing], onChange, onFail, multiple: true, maxFileCount: 2 });
+        const next = makeFile('next.pdf');
+        selectFiles(container, [next, makeFile('overflow.pdf')]);
+        expect(indexesIn([existing, next], lastFilesOf(onChange))).toEqual([0, 1]);
+        expect(errorTypesOf(onFail)).toEqual([FileInputErrorType.EXCEED_MAX_FILE_COUNT]);
+    });
+    it('RFL-03 크기 반려와 통과분이 섞이면 통과분을 반영하고 반려분만 onFail 로 알린다', () => {
+        const onFileSelect = vi.fn();
+        const onFail = vi.fn();
+        const container = mount({ onFileSelect, onFail, multiple: true, maxFileSize: MAX_FILE_SIZE });
+        const ok = makeFile('ok.pdf');
+        selectFiles(container, [makeFile('big.pdf', OVER_SIZE), ok]);
+        expect(indexesIn([ok], lastFilesOf(onFileSelect))).toEqual([0]);
+        expect(errorTypesOf(onFail)).toEqual([FileInputErrorType.EXCEED_MAX_FILE_SIZE]);
+    });
+});
+describe('RFL-04 찾기 버튼', () => {
+    it('RFL-04 찾기 버튼 click 은 숨은 input.click() 을 부른다', () => {
+        const container = mount({});
+        const clickSpy = vi.spyOn(fileInputOf(container), 'click');
+        clickElement(browseButton(container));
+        expect(clickSpy).toHaveBeenCalled();
+    });
+    it('RFL-04 disabled 면 찾기 버튼이 disabled 라 click 해도 input.click() 이 불리지 않는다', () => {
+        const container = mount({ disabled: true });
+        const clickSpy = vi.spyOn(fileInputOf(container), 'click');
+        clickElement(browseButton(container));
+        expect(browseButton(container).disabled).toBe(true);
+        expect(clickSpy).not.toHaveBeenCalled();
+    });
+});
+describe('RFL-08 onFail 항목의 파일 정보', () => {
+    it('RFL-08 크기 초과 항목에 errorType 만 남고 name · size 가 사라진다', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (#592 FI-03 과 같은 뿌리 — { ...file } 스프레드는 File 의 getter 를 복사하지 못함)
+        const onFail = vi.fn();
+        const container = mount({ onFail, maxFileSize: MAX_FILE_SIZE });
+        selectFiles(container, [makeFile('big.pdf', OVER_SIZE)]);
+        const [item] = onFail.mock.calls[0][0];
+        expect(item.errorType).toBe(FileInputErrorType.EXCEED_MAX_FILE_SIZE);
+        expect(item.name).toBeUndefined();
+        expect(item.size).toBeUndefined();
+    });
+    it('RFL-08 중복(ALREADY_UPLOADED) 항목도 name 이 사라진다', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (#592 FI-03 과 같은 뿌리 — 문서 onFail 예제의 file.name 이 undefined)
+        const onFail = vi.fn();
+        const existing = makeFile('a.pdf');
+        const container = mount({ value: [existing], onChange: vi.fn(), onFail });
+        selectFiles(container, [makeFile('a.pdf')]);
+        const [item] = onFail.mock.calls[0][0];
+        expect(item.errorType).toBe(FileInputErrorType.ALREADY_UPLOADED);
+        expect(item.name).toBeUndefined();
+    });
+    it.todo('RFL-08 onFail 항목이 ImageFileInput 처럼 원본 파일의 name · size · type 을 유지한다 (기대 동작, #592)');
+});
+/* ========== 나머지 분기 — 표시 · 방어 분기 · 결함 후보 ========== */
+describe('RFL-05 표시 옵션', () => {
+    it.each([
+        ['기본 xs 면 Tag sm', undefined, 'ncua-tag--sm'],
+        ['sm 이면 Tag md', 'sm', 'ncua-tag--md'],
+    ])('RFL-05 size %s 로 렌더한다', (_label, size, tagClass) => {
+        const container = mount({ value: [makeFile('a.pdf')], onChange: vi.fn(), size });
+        expect(container.querySelector('.ncua-tag')?.classList.contains(tagClass)).toBe(true);
+    });
+    it('RFL-05 showHelpIcon 이면 label 옆에 help icon 을 렌더한다', () => {
+        const container = mount({ label: '첨부 파일', showHelpIcon: true });
+        expect(container.querySelector('.ncua-file-input__label .ncua-input__help-icon')).not.toBeNull();
+    });
+    it('RFL-05 hintText 를 렌더하고 destructive 면 destructive 클래스를 붙인다', () => {
+        const container = mount({ hintText: '5MB 이하', destructive: true });
+        const hint = container.querySelector('.ncua-hint-text');
+        expect(hint?.textContent).toBe('5MB 이하');
+        expect(hint?.classList.contains('destructive')).toBe(true);
+    });
+});
+describe('RFL-06 방어 분기', () => {
+    it.each([
+        ['files 가 null', null],
+        ['빈 목록', []],
+    ])('RFL-06 %s 인 change 는 무시한다', (_label, files) => {
+        const onFileSelect = vi.fn();
+        const container = mount({ onFileSelect });
+        selectFiles(container, files);
+        expect(onFileSelect).not.toHaveBeenCalled();
+    });
+});
+describe('RFL-07 forwardRef', () => {
+    it('RFL-07 ref 를 넘겨도 어디에도 연결하지 않아 ref.current 가 null 이다', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (forwardRef<HTMLInputElement> 인데 ref 미연결 — ImageFileInput 은 숨은 input 연결)
+        const ref = createRef();
+        mount({ ref });
+        expect(ref.current).toBeNull();
+    });
+    it.todo('RFL-07 ref 가 ImageFileInput 처럼 숨은 file input 을 가리킨다 (기대 동작)');
+});
+describe('RFL-09 change 뒤 input.value', () => {
+    it('RFL-09 change 처리 뒤 input.value 를 비우지 않는다', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (태그를 지운 뒤 같은 파일을 다시 고르면 브라우저가 change 를 보내지 않음)
+        const container = mount({ onFileSelect: vi.fn() });
+        const setValue = vi.fn();
+        Object.defineProperty(fileInputOf(container), 'value', { configurable: true, get: () => '', set: setValue });
+        selectFiles(container, [makeFile('a.pdf')]);
+        expect(setValue).not.toHaveBeenCalled();
+    });
+    it.todo('RFL-09 change 처리 뒤 input.value 를 비워 같은 파일을 다시 고를 수 있다 (기대 동작)');
+});
+describe('RFL-10 전량 반려 시 통지', () => {
+    it('RFL-10 모두 반려돼도 같은 목록으로 onChange 를 다시 부른다', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (변화 없는 재통지 — ImageFileInput 은 전량 반려 시 통지하지 않음)
+        const onChange = vi.fn();
+        const existing = makeFile('a.pdf');
+        const container = mount({ value: [existing], onChange, onFail: vi.fn(), maxFileSize: MAX_FILE_SIZE });
+        selectFiles(container, [makeFile('big.pdf', OVER_SIZE)]);
+        expect(indexesIn([existing], lastFilesOf(onChange))).toEqual([0]);
+    });
+    it.todo('RFL-10 모두 반려되면 onChange · onFileSelect 를 부르지 않는다 (기대 동작)');
+});

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

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