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

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

@@ -0,0 +1,263 @@
+// @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(/*#__PURE__*/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 = /*#__PURE__*/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/esm/src/components/forms-and-input/image-file-input/__tests__/ImageFileInput.select.test.js

@@ -0,0 +1,413 @@
+// @vitest-environment jsdom
+//
+// React ImageFileInput 선택 · 삭제 · 검증 · 찾기 · 표시 — 위험 목록표 RIF-xx (PR-7d).
+// 저장 이미지(uploadedFiles) 미리보기 · 슬롯 합산 · disabled 는 ImageFileInput.test.ts 가 덮는다.
+// 하위 컴포넌트(Button · Tooltip · ImagePreview · useObjectUrl)는 실구현을 쓴다.
+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 { browseButton, createFileFactory, fileInputOf, indexesIn, lastFilesOf, mockObjectUrls, selectFiles as selectFilesIn } from '../../../../__tests__/helpers/fileInput';
+import { ImageFileInput, ImageFileInputErrorType } from '../ImageFileInput';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const MAX_FILE_SIZE = 8;
+const OVER_SIZE = 16;
+const MAX_COUNT = 3;
+const LAST_MODIFIED = 1700000000000;
+mockObjectUrls();
+const mounted = [];
+afterEach(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  }
+  document.getElementById('tooltip-global-layer')?.remove();
+  vi.restoreAllMocks();
+});
+/* ========== 공통 헬퍼 ========== */
+const mount = props => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  const render = nextProps => {
+    act(() => {
+      root.render(/*#__PURE__*/createElement(ImageFileInput, nextProps));
+    });
+  };
+  render(props);
+  mounted.push({
+    root,
+    container
+  });
+  return {
+    container,
+    rerender: render
+  };
+};
+const makeFile = createFileFactory({
+  type: 'image/png',
+  lastModified: LAST_MODIFIED
+});
+const selectFiles = (container, filesToSelect) => selectFilesIn(container, filesToSelect, act);
+const previewImages = container => Array.from(container.querySelectorAll('.ncua-image-file-input__preview-image'));
+const removeButtons = container => Array.from(container.querySelectorAll('.ncua-image-file-input__preview-remove-button'));
+const emptySlotWrapper = container => container.querySelector('.ncua-image-file-input__empty-slot-wrapper');
+/** 요소가 없으면 throw 한다 — 선택적 체이닝은 요소 부재에도 이후 단언이 통과해 버린다 */
+const clickElement = element => {
+  if (!element) throw new Error('클릭할 요소를 찾지 못했습니다');
+  act(() => {
+    element.click();
+  });
+};
+/* ========== P0 — uncontrolled · 삭제 · 크기 검증 · 찾기 ========== */
+describe('RIF-01 uncontrolled(value 없음)', () => {
+  it('RIF-01 선택하면 내부 목록으로 onFileSelect 를 부르고 미리보기를 표시한다', () => {
+    const onFileSelect = vi.fn();
+    const {
+      container
+    } = mount({
+      onFileSelect,
+      maxFileCount: MAX_COUNT
+    });
+    const picked = makeFile('a.png');
+    selectFiles(container, [picked]);
+    expect(indexesIn([picked], lastFilesOf(onFileSelect))).toEqual([0]);
+    expect(previewImages(container).map(img => img.getAttribute('src'))).toEqual(['blob:mock/1']);
+  });
+  it('RIF-01 다시 고르면 내부 목록에 누적한다', () => {
+    const onFileSelect = vi.fn();
+    const {
+      container
+    } = mount({
+      onFileSelect,
+      maxFileCount: MAX_COUNT
+    });
+    const first = makeFile('first.png');
+    const second = makeFile('second.png');
+    selectFiles(container, [first]);
+    selectFiles(container, [second]);
+    expect(indexesIn([first, second], lastFilesOf(onFileSelect))).toEqual([0, 1]);
+    expect(previewImages(container)).toHaveLength(2);
+  });
+  it('RIF-01 새 파일을 삭제하면 나머지로 onFileSelect 를 부르고 미리보기가 줄어든다', () => {
+    const onFileSelect = vi.fn();
+    const {
+      container
+    } = mount({
+      onFileSelect,
+      multiple: true,
+      maxFileCount: MAX_COUNT
+    });
+    const first = makeFile('first.png');
+    const second = makeFile('second.png');
+    selectFiles(container, [first, second]);
+    clickElement(removeButtons(container)[0]);
+    expect(indexesIn([second], lastFilesOf(onFileSelect))).toEqual([0]);
+    expect(previewImages(container).map(img => img.alt)).toEqual(['second.png']);
+  });
+});
+describe('RIF-02 controlled 새 파일 삭제', () => {
+  it('RIF-02 미리보기 삭제는 그 index 를 뺀 목록으로 onChange 를 부른다', () => {
+    const onChange = vi.fn();
+    const first = makeFile('first.png');
+    const second = makeFile('second.png');
+    const {
+      container
+    } = mount({
+      value: [first, second],
+      onChange,
+      maxFileCount: MAX_COUNT
+    });
+    clickElement(removeButtons(container)[1]);
+    expect(indexesIn([first], lastFilesOf(onChange))).toEqual([0]);
+  });
+});
+describe('RIF-03 maxFileSize 초과', () => {
+  it('RIF-03 EXCEED_MAX_FILE_SIZE 로 onFail 을 부르고 항목이 파일 정보를 보존한다', () => {
+    const onFail = vi.fn();
+    const onFileSelect = vi.fn();
+    const {
+      container
+    } = mount({
+      onFail,
+      onFileSelect,
+      maxFileSize: MAX_FILE_SIZE
+    });
+    selectFiles(container, [makeFile('big.png', OVER_SIZE)]);
+    const [item] = onFail.mock.calls[0][0];
+    expect(item.errorType).toBe(ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE);
+    expect(item.name).toBe('big.png');
+    expect(item.size).toBe(OVER_SIZE);
+    expect(item.type).toBe('image/png');
+    expect(item.lastModified).toBe(LAST_MODIFIED);
+    expect(onFileSelect).not.toHaveBeenCalled();
+  });
+  it('RIF-03 항목의 arrayBuffer · stream · text · slice 는 원본 File 로 위임한다', () => {
+    const onFail = vi.fn();
+    const {
+      container
+    } = mount({
+      onFail,
+      maxFileSize: MAX_FILE_SIZE
+    });
+    const big = makeFile('big.png', OVER_SIZE);
+    const delegates = {
+      arrayBuffer: vi.fn(),
+      stream: vi.fn(),
+      text: vi.fn(),
+      slice: vi.fn()
+    };
+    for (const [key, fn] of Object.entries(delegates)) {
+      Object.defineProperty(big, key, {
+        configurable: true,
+        value: fn
+      });
+    }
+    selectFiles(container, [big]);
+    const [item] = onFail.mock.calls[0][0];
+    item.arrayBuffer();
+    item.stream();
+    item.text();
+    item.slice(0, 1);
+    expect(delegates.arrayBuffer).toHaveBeenCalled();
+    expect(delegates.stream).toHaveBeenCalled();
+    expect(delegates.text).toHaveBeenCalled();
+    expect(delegates.slice).toHaveBeenCalledWith(0, 1);
+  });
+});
+describe('RIF-04 찾기 버튼 · 빈 슬롯 click', () => {
+  it('RIF-04 찾기 버튼 click 은 숨은 input.click() 을 부른다', () => {
+    const {
+      container
+    } = mount({});
+    const clickSpy = vi.spyOn(fileInputOf(container), 'click');
+    clickElement(browseButton(container));
+    expect(clickSpy).toHaveBeenCalled();
+  });
+  it('RIF-04 빈 슬롯 wrapper click 도 input.click() 을 부른다', () => {
+    const {
+      container
+    } = mount({});
+    const clickSpy = vi.spyOn(fileInputOf(container), 'click');
+    clickElement(emptySlotWrapper(container));
+    expect(clickSpy).toHaveBeenCalled();
+  });
+  it('RIF-04 disabled 면 빈 슬롯 wrapper click 을 무시한다', () => {
+    const {
+      container
+    } = mount({
+      disabled: true
+    });
+    const clickSpy = vi.spyOn(fileInputOf(container), 'click');
+    clickElement(emptySlotWrapper(container));
+    expect(clickSpy).not.toHaveBeenCalled();
+  });
+});
+/* ========== 나머지 분기 — hover · 표시 옵션 · 방어 분기 · 결함 후보 ========== */
+const slotTooltipPanel = () => document.querySelector('.ncua-image-file-input__slot-tooltip');
+const isSlotTooltipVisible = () => slotTooltipPanel()?.classList.contains('ncua-tooltip__bg--visible') ?? false;
+/** React 의 onMouseEnter/onMouseLeave 는 relatedTarget 이 있는 mouseover/mouseout 으로 구동된다 */
+const hover = (element, type) => {
+  if (!element) throw new Error('hover 할 요소를 찾지 못했습니다');
+  act(() => {
+    element.dispatchEvent(new MouseEvent(type, {
+      bubbles: true,
+      relatedTarget: document.body
+    }));
+  });
+};
+describe('RIF-05 빈 슬롯 hover 툴팁', () => {
+  it('RIF-05 hover 하면 툴팁을 보이고 mouseleave 로 숨긴다', () => {
+    const {
+      container
+    } = mount({});
+    expect(isSlotTooltipVisible()).toBe(false);
+    hover(emptySlotWrapper(container), 'mouseover');
+    expect(isSlotTooltipVisible()).toBe(true);
+    hover(emptySlotWrapper(container), 'mouseout');
+    expect(isSlotTooltipVisible()).toBe(false);
+  });
+  it('RIF-05 disabled 면 hover 해도 툴팁을 보이지 않는다', () => {
+    const {
+      container
+    } = mount({
+      disabled: true
+    });
+    hover(emptySlotWrapper(container), 'mouseover');
+    expect(isSlotTooltipVisible()).toBe(false);
+  });
+  it('RIF-05 hover 중 disabled 로 바뀌면 툴팁을 숨긴다', () => {
+    const {
+      container,
+      rerender
+    } = mount({});
+    hover(emptySlotWrapper(container), 'mouseover');
+    expect(isSlotTooltipVisible()).toBe(true);
+    rerender({
+      disabled: true
+    });
+    expect(isSlotTooltipVisible()).toBe(false);
+  });
+});
+describe('RIF-06 표시 옵션', () => {
+  it('RIF-06 hintItems 를 ul/li 목록으로 렌더한다', () => {
+    const {
+      container
+    } = mount({
+      hintItems: ['첫째 안내', '둘째 안내']
+    });
+    expect(Array.from(container.querySelectorAll('.ncua-file-input__hint-item')).map(li => li.textContent)).toEqual(['첫째 안내', '둘째 안내']);
+  });
+  it('RIF-06 hintItems 가 빈 배열이면 목록을 렌더하지 않는다', () => {
+    const {
+      container
+    } = mount({
+      hintItems: []
+    });
+    expect(container.querySelector('.ncua-file-input__hint-list')).toBeNull();
+  });
+  it('RIF-06 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);
+  });
+  it('RIF-06 showHintText false 면 hintText 와 hintItems 를 모두 숨긴다', () => {
+    const {
+      container
+    } = mount({
+      hintText: '5MB 이하',
+      hintItems: ['안내'],
+      showHintText: false
+    });
+    expect(container.querySelector('.ncua-hint-text')).toBeNull();
+    expect(container.querySelector('.ncua-file-input__hint-list')).toBeNull();
+  });
+  it('RIF-06 showHelpIcon 이면 label 옆에 help icon 을 렌더한다', () => {
+    const {
+      container
+    } = mount({
+      label: '대표 이미지',
+      showHelpIcon: true
+    });
+    expect(container.querySelector('.ncua-file-input__label .ncua-input__help-icon')).not.toBeNull();
+  });
+  it('RIF-06 showFileInput false 면 찾기 버튼 영역을 렌더하지 않는다', () => {
+    const {
+      container
+    } = mount({
+      showFileInput: false
+    });
+    expect(container.querySelector('.ncua-file-input')).toBeNull();
+    expect(emptySlotWrapper(container)).not.toBeNull();
+  });
+});
+describe('RIF-07 방어 분기', () => {
+  it.each([['files 가 null', null], ['빈 목록', []]])('RIF-07 %s 인 change 는 무시한다', (_label, files) => {
+    const onFileSelect = vi.fn();
+    const onFail = vi.fn();
+    const {
+      container
+    } = mount({
+      onFileSelect,
+      onFail
+    });
+    selectFiles(container, files);
+    expect(onFileSelect).not.toHaveBeenCalled();
+    expect(onFail).not.toHaveBeenCalled();
+  });
+  it('RIF-07 fileName 이 없는 저장 항목(타입 밖 사용)은 alt 를 빈 문자열로 둔다', () => {
+    const {
+      container
+    } = mount({
+      uploadedFiles: [{
+        fileImageUrl: 'https://cdn.example/no-name.jpg'
+      }]
+    });
+    expect(previewImages(container)[0].getAttribute('alt')).toBe('');
+  });
+});
+describe('RIF-08 maxFileCount 1 + multiple', () => {
+  it('RIF-08 두 장을 한 번에 고르면 개수 검사 없이 두 장 모두 onChange 로 전달한다', () => {
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (교체 분기가 개수 검사를 건너뛰어 한 장 제한을 넘김 — vanilla IFM-09 와 같은 뿌리)
+    const onChange = vi.fn();
+    const {
+      container
+    } = mount({
+      value: [],
+      onChange,
+      multiple: true,
+      maxFileCount: 1
+    });
+    const first = makeFile('first.png');
+    const second = makeFile('second.png');
+    selectFiles(container, [first, second]);
+    expect(indexesIn([first, second], lastFilesOf(onChange))).toEqual([0, 1]);
+  });
+  it.todo('RIF-08 maxFileCount 1 이면 한 번에 여러 장을 골라도 한 장만 수용하고 나머지는 반려한다 (기대 동작)');
+});
+describe('RIF-09 빈 슬롯 버튼 click', () => {
+  it('RIF-09 빈 슬롯 버튼 click 한 번에 input.click() 이 두 번 불린다', () => {
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (Button onClick + wrapper onClick 버블링으로 중복 호출 — vanilla IFE-12 와 같은 뿌리)
+    const {
+      container
+    } = mount({});
+    const clickSpy = vi.spyOn(fileInputOf(container), 'click');
+    clickElement(emptySlotWrapper(container)?.querySelector('button'));
+    expect(clickSpy).toHaveBeenCalledTimes(2);
+  });
+  it.todo('RIF-09 빈 슬롯 버튼 click 한 번에 input.click() 은 한 번만 불린다 (기대 동작)');
+});
+describe('RIF-10 문서화된 validation · showFileTagList', () => {
+  it('RIF-10 validation · showFileTagList 를 바꿔도 렌더 결과가 달라지지 않는다', () => {
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (문서화된 prop 을 받기만 하고 쓰지 않음 — vanilla IFV-06 과 한 행으로 묶음)
+    const first = mount({
+      validation: true,
+      showFileTagList: true,
+      hintText: '안내'
+    });
+    const second = mount({
+      validation: false,
+      showFileTagList: false,
+      hintText: '안내'
+    });
+    expect(first.container.innerHTML).toBe(second.container.innerHTML);
+  });
+  it.todo('RIF-10 validation · showFileTagList 가 화면에 반영되거나, 쓰지 않는 prop 이면 타입·문서에서 빠진다 (기대 동작)');
+});
+describe('RIF-11 나머지 props 전달 위치', () => {
+  it('RIF-11 className · name 이 루트가 아닌 숨은 input 에 붙는다', () => {
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (나머지 props 를 숨은 input 에 펼쳐 className 이 루트 스타일링에 쓰이지 않음)
+    const {
+      container
+    } = mount({
+      className: 'custom-host',
+      name: 'images'
+    });
+    const root = container.querySelector('.ncua-image-file-input');
+    const input = fileInputOf(container);
+    expect(input.classList.contains('custom-host')).toBe(true);
+    expect(input.name).toBe('images');
+    expect(root?.classList.contains('custom-host')).toBe(false);
+  });
+  it('RIF-11 타입이 허용하는 InputBase 전용 prop(fullWidth)은 DOM 미인식 prop 경고를 낸다', () => {
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (InputBaseProps 를 그대로 받아 input 에 펼쳐 React 미인식 prop 경고)
+    // 경고는 prop 이름별로 모듈 수명 동안 한 번만 나고 boolean 값은 DOM 에 남지 않는다 — 이 파일에서 fullWidth 를 처음 렌더하는 테스트여야 한다
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    mount({
+      fullWidth: true
+    });
+    expect(consoleError.mock.calls.flat().some(arg => String(arg).includes('fullWidth'))).toBe(true);
+  });
+  it.todo('RIF-11 className 은 루트에 붙고, 숨은 input 에는 input 속성만 전달된다 (기대 동작)');
+});