@ncds/ui-admin 1.8.16 → 1.8.18

package/dist/cjs/src/components/forms-and-input/image-file-input/ImageFileInput.js

@@ -4,6 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ImageFileInput = void 0;
+Object.defineProperty(exports, "ImageFileInputErrorType", {
+  enumerable: true,
+  get: function () {
+    return _FileInput.FileInputErrorType;
+  }
+});
 var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -37,6 +43,8 @@ const ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardR
     maxFileCount,
     value,
     onChange,
+    uploadedFiles = [],
+    onUploadedFilesChange,
     onFileSelect,
     onFail,
     buttonLabel = '파일 찾기',
@@ -61,6 +69,9 @@ const ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardR
   // Determine if component is controlled or uncontrolled
   const isControlled = value !== undefined;
   const files = isControlled ? value : internalFiles;
+  // An entry without a URL has nothing to render, so it must not occupy a slot either.
+  // TypeScript requires fileImageUrl, but CDN/vanilla consumers are untyped.
+  const visibleUploadedFiles = uploadedFiles.filter(uploadedFile => Boolean(uploadedFile.fileImageUrl));
   // Sync internal state with controlled value
   (0, _react.useEffect)(() => {
     if (isControlled && value) {
@@ -82,32 +93,57 @@ const ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardR
       validFiles,
       invalidFiles
     } = validateFiles(Array.from(selectedFiles));
-    // Replace existing file if maxFileCount is 1
-    const nextFiles = maxFileCount === 1 ? validFiles : [...files, ...validFiles];
-    updateFiles(nextFiles);
+    // Nothing passed validation — keep what the caller already had.
+    // Without this, a single slot would be overwritten with an empty list.
+    if (validFiles.length > 0) {
+      // Replace existing file if maxFileCount is 1
+      const nextFiles = maxFileCount === 1 ? validFiles : [...files, ...validFiles];
+      updateFiles(nextFiles);
+      // A single slot holds one image, so a new selection also clears the stored one.
+      // Entries we never rendered occupy no slot, so they are left in the caller's list.
+      if (maxFileCount === 1 && visibleUploadedFiles.length > 0) {
+        onUploadedFilesChange?.(uploadedFiles.filter(uploadedFile => !uploadedFile.fileImageUrl));
+      }
+    }
     if (onFail && invalidFiles.length > 0) {
       onFail(invalidFiles);
     }
     event.target.value = '';
   };
+  /**
+   * Returns why a file must be rejected, or null when it is acceptable.
+   * `acceptedCount` is how many files of the same selection already passed.
+   */
+  const findRejectionReason = (file, acceptedCount) => {
+    if (files.some(f => f.name === file.name && f.size === file.size)) {
+      return _FileInput.FileInputErrorType.ALREADY_UPLOADED;
+    }
+    // Stored images carry no size, so they can only be matched by name.
+    // A single slot is meant to be replaced, so re-picking the same name is allowed there.
+    if (maxFileCount !== 1 && visibleUploadedFiles.some(uploadedFile => uploadedFile.fileName === file.name)) {
+      return _FileInput.FileInputErrorType.ALREADY_UPLOADED;
+    }
+    if (!!maxFileSize && file.size > maxFileSize) {
+      return _FileInput.FileInputErrorType.EXCEED_MAX_FILE_SIZE;
+    }
+    // Skip max count check if maxFileCount is 1 (allow replacement).
+    // Stored images occupy slots too, so they count toward the limit.
+    const usedSlots = visibleUploadedFiles.length + files.length + acceptedCount;
+    if (!!maxFileCount && maxFileCount !== 1 && usedSlots >= maxFileCount) {
+      return _FileInput.FileInputErrorType.EXCEED_MAX_FILE_COUNT;
+    }
+    return null;
+  };
   const validateFiles = fileList => {
     const validFiles = [];
     const invalidFiles = [];
     for (const file of fileList) {
-      if (files.some(f => f.name === file.name && f.size === file.size)) {
-        invalidFiles.push(toInvalidFile(file, _FileInput.FileInputErrorType.ALREADY_UPLOADED));
-        continue;
-      }
-      if (!!maxFileSize && file.size > maxFileSize) {
-        invalidFiles.push(toInvalidFile(file, _FileInput.FileInputErrorType.EXCEED_MAX_FILE_SIZE));
-        continue;
+      const rejectionReason = findRejectionReason(file, validFiles.length);
+      if (rejectionReason) {
+        invalidFiles.push(toInvalidFile(file, rejectionReason));
+      } else {
+        validFiles.push(file);
       }
-      // Skip max count check if maxFileCount is 1 (allow replacement)
-      if (!!maxFileCount && maxFileCount !== 1 && files.length + validFiles.length >= maxFileCount) {
-        invalidFiles.push(toInvalidFile(file, _FileInput.FileInputErrorType.EXCEED_MAX_FILE_COUNT));
-        continue;
-      }
-      validFiles.push(file);
     }
     return {
       validFiles,
@@ -124,13 +160,28 @@ const ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardR
     newFiles.splice(index, 1);
     updateFiles(newFiles);
   };
+  // Removed by identity, not index, so keys stay stable and the caller's
+  // untouched entries (including ones we skip rendering) are preserved
+  const handleRemoveUploadedFile = target => {
+    onUploadedFilesChange?.(uploadedFiles.filter(uploadedFile => uploadedFile !== target));
+  };
   const renderImagePreview = function () {
     let files = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    const showEmptySlot = maxFileCount ? files.length < maxFileCount : files.length === 0;
+    const totalCount = visibleUploadedFiles.length + files.length;
+    const showEmptySlot = maxFileCount ? totalCount < maxFileCount : totalCount === 0;
     return (0, _jsxRuntime.jsxs)("div", {
       className: "ncua-image-file-input__previews",
-      children: [files.map((file, index) => (0, _jsxRuntime.jsx)(_ImagePreview.ImagePreview, {
+      children: [visibleUploadedFiles.map((uploadedFile, index) => (0, _jsxRuntime.jsx)(_ImagePreview.ImagePreview
+      // Removal is by identity, so the index here only breaks ties between
+      // entries that share both URL and file name.
+      , {
+        imageUrl: uploadedFile.fileImageUrl,
+        alt: uploadedFile.fileName,
+        disabled: disabled,
+        onRemove: () => handleRemoveUploadedFile(uploadedFile)
+      }, `uploaded-${index}-${uploadedFile.fileImageUrl}-${uploadedFile.fileName}`)), files.map((file, index) => (0, _jsxRuntime.jsx)(_ImagePreview.ImagePreview, {
         file: file,
+        disabled: disabled,
         onRemove: () => handleRemoveFile(index)
       }, `${file.name}-${index}`)), showEmptySlot && (0, _jsxRuntime.jsxs)("div", {
         className: "ncua-image-file-input__empty-slot-wrapper",
@@ -206,4 +257,10 @@ const ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardR
       }), showHintText && renderHintList()]
     })]
   });
-});
+});
+/**
+ * Rejection reasons reported through `onFail`.
+ *
+ * Re-exported under the ImageFileInput name so callers do not have to reach
+ * into FileInput for it. Same enum, same values.
+ */

package/dist/cjs/src/components/forms-and-input/image-file-input/__tests__/ImageFileInput.test.js

@@ -0,0 +1,533 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _ImageFileInput = require("../ImageFileInput");
+// @vitest-environment jsdom
+
+const mounted = [];
+function mount(props) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  (0, _testUtils.act)(() => {
+    root.render(/*#__PURE__*/(0, _react.createElement)(_ImageFileInput.ImageFileInput, props));
+  });
+  mounted.push({
+    root,
+    container
+  });
+  return container;
+}
+const previewImages = container => Array.from(container.querySelectorAll('.ncua-image-file-input__preview-image'));
+const emptySlot = container => container.querySelector('.ncua-image-file-input__empty-slot-wrapper');
+const makeFile = function (name) {
+  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
+  return new File([new Uint8Array(size)], name, {
+    type: 'image/jpeg'
+  });
+};
+/**
+ * 숨겨진 file input에 파일을 실어 change 이벤트를 발생시킨다.
+ * jsdom에는 파일 선택 UI가 없어 files 프로퍼티를 직접 정의해야 한다.
+ */
+function selectFiles(container, filesToSelect) {
+  const input = container.querySelector('input[type="file"]');
+  if (!input) throw new Error('file input을 찾지 못했습니다');
+  Object.defineProperty(input, 'files', {
+    configurable: true,
+    value: {
+      ...filesToSelect,
+      length: filesToSelect.length,
+      item: index => filesToSelect[index] ?? null,
+      [Symbol.iterator]: function* () {
+        yield* filesToSelect;
+      }
+    }
+  });
+  (0, _testUtils.act)(() => {
+    input.dispatchEvent(new Event('change', {
+      bubbles: true
+    }));
+  });
+}
+(0, _vitest.afterEach)(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    container.remove();
+  }
+  _vitest.vi.restoreAllMocks();
+});
+(0, _vitest.describe)('ImageFileInput — 저장된 이미지 URL 미리보기', () => {
+  (0, _vitest.it)('uploadedFiles의 URL을 img src로 그대로 렌더한다 (fetch 없이)', () => {
+    const fetchSpy = _vitest.vi.spyOn(globalThis, 'fetch');
+    const container = mount({
+      uploadedFiles: [{
+        fileName: 'saved.jpg',
+        fileImageUrl: 'https://external.example.com/saved.jpg'
+      }]
+    });
+    const images = previewImages(container);
+    (0, _vitest.expect)(images).toHaveLength(1);
+    (0, _vitest.expect)(images[0].getAttribute('src')).toBe('https://external.example.com/saved.jpg');
+    (0, _vitest.expect)(fetchSpy).not.toHaveBeenCalled();
+  });
+  (0, _vitest.it)('fileName을 img alt로 사용한다', () => {
+    const container = mount({
+      uploadedFiles: [{
+        fileName: '상품이미지.jpg',
+        fileImageUrl: 'https://external.example.com/a.jpg'
+      }]
+    });
+    (0, _vitest.expect)(previewImages(container)[0].getAttribute('alt')).toBe('상품이미지.jpg');
+  });
+  (0, _vitest.it)('여러 장을 전달한 순서대로 렌더한다', () => {
+    const container = mount({
+      maxFileCount: 5,
+      uploadedFiles: [{
+        fileName: 'a.jpg',
+        fileImageUrl: 'https://external.example.com/a.jpg'
+      }, {
+        fileName: 'b.jpg',
+        fileImageUrl: 'https://external.example.com/b.jpg'
+      }]
+    });
+    (0, _vitest.expect)(previewImages(container).map(img => img.getAttribute('src'))).toEqual(['https://external.example.com/a.jpg', 'https://external.example.com/b.jpg']);
+  });
+  (0, _vitest.it)('저장된 이미지를 삭제하면 남은 목록으로 onUploadedFilesChange를 호출한다', () => {
+    const onUploadedFilesChange = _vitest.vi.fn();
+    const container = mount({
+      maxFileCount: 5,
+      uploadedFiles: [{
+        fileName: 'a.jpg',
+        fileImageUrl: 'https://external.example.com/a.jpg'
+      }, {
+        fileName: 'b.jpg',
+        fileImageUrl: 'https://external.example.com/b.jpg'
+      }],
+      onUploadedFilesChange
+    });
+    const removeButtons = container.querySelectorAll('.ncua-image-file-input__preview-remove-button');
+    (0, _vitest.expect)(removeButtons).toHaveLength(2);
+    (0, _testUtils.act)(() => {
+      removeButtons[0].click();
+    });
+    (0, _vitest.expect)(onUploadedFilesChange).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(onUploadedFilesChange).toHaveBeenCalledWith([{
+      fileName: 'b.jpg',
+      fileImageUrl: 'https://external.example.com/b.jpg'
+    }]);
+  });
+  // uploadedFiles는 value/onChange와 같은 controlled prop이다.
+  // 콜백을 넘기지 않으면 미리보기가 그대로 유지되는 것이 의도된 동작이며,
+  // 이 테스트는 "무반응이어도 괜찮다"가 아니라 그 계약을 고정하기 위한 것이다.
+  (0, _vitest.it)('콜백 없이 uploadedFiles만 넘기면 삭제해도 미리보기가 유지된다 (controlled 계약)', () => {
+    const container = mount({
+      uploadedFiles: [{
+        fileName: 'a.jpg',
+        fileImageUrl: 'https://external.example.com/a.jpg'
+      }]
+    });
+    const removeButton = container.querySelector('.ncua-image-file-input__preview-remove-button');
+    (0, _testUtils.act)(() => {
+      removeButton?.click();
+    });
+    (0, _vitest.expect)(previewImages(container)).toHaveLength(1);
+  });
+  (0, _vitest.it)('같은 URL에 이름만 다른 항목이 있어도 key가 겹치지 않는다', () => {
+    // React 는 key 가 겹쳐도 DOM 에는 그려주고 console.error 로만 경고한다.
+    // 따라서 렌더 결과가 아니라 경고 발생 여부로 판정해야 한다.
+    const consoleError = _vitest.vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    const sharedUrl = 'https://external.example.com/shared.jpg';
+    const container = mount({
+      maxFileCount: 5,
+      uploadedFiles: [{
+        fileName: 'first.jpg',
+        fileImageUrl: sharedUrl
+      }, {
+        fileName: 'second.jpg',
+        fileImageUrl: sharedUrl
+      }]
+    });
+    (0, _vitest.expect)(previewImages(container).map(img => img.getAttribute('alt'))).toEqual(['first.jpg', 'second.jpg']);
+    (0, _vitest.expect)(consoleError.mock.calls.flat(Number.POSITIVE_INFINITY).join(' ')).not.toContain('same key');
+  });
+  (0, _vitest.it)('URL과 파일명이 모두 같은 항목이 둘이어도 key가 겹치지 않는다', () => {
+    const consoleError = _vitest.vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    const same = {
+      fileName: 'same.jpg',
+      fileImageUrl: 'https://external.example.com/same.jpg'
+    };
+    const container = mount({
+      maxFileCount: 5,
+      uploadedFiles: [same, {
+        ...same
+      }]
+    });
+    (0, _vitest.expect)(previewImages(container)).toHaveLength(2);
+    (0, _vitest.expect)(consoleError.mock.calls.flat(Number.POSITIVE_INFINITY).join(' ')).not.toContain('same key');
+  });
+  (0, _vitest.it)('같은 파일명이 여러 개여도 클릭한 항목만 정확히 제거한다 (순번 아닌 항목 기준 삭제)', () => {
+    const onUploadedFilesChange = _vitest.vi.fn();
+    const duplicated = [{
+      fileName: '같은이름.jpg',
+      fileImageUrl: 'https://external.example.com/first.jpg'
+    }, {
+      fileName: '같은이름.jpg',
+      fileImageUrl: 'https://external.example.com/second.jpg'
+    }];
+    const container = mount({
+      maxFileCount: 5,
+      uploadedFiles: duplicated,
+      onUploadedFilesChange
+    });
+    (0, _testUtils.act)(() => {
+      container.querySelectorAll('.ncua-image-file-input__preview-remove-button')[1].click();
+    });
+    (0, _vitest.expect)(onUploadedFilesChange).toHaveBeenCalledWith([duplicated[0]]);
+  });
+});
+(0, _vitest.describe)('ImageFileInput — URL 없는 항목 방어 (CDN/바닐라 등 타입 검사 밖 사용)', () => {
+  (0, _vitest.it)('fileImageUrl이 비어 있으면 렌더하지 않는다', () => {
+    const container = mount({
+      maxFileCount: 3,
+      uploadedFiles: [{
+        fileName: 'a.jpg',
+        fileImageUrl: 'https://external.example.com/a.jpg'
+      }, {
+        fileName: 'broken.jpg',
+        fileImageUrl: ''
+      }]
+    });
+    (0, _vitest.expect)(previewImages(container).map(img => img.getAttribute('src'))).toEqual(['https://external.example.com/a.jpg']);
+  });
+  (0, _vitest.it)('fileImageUrl이 비어 있는 항목은 슬롯을 차지하지 않는다', () => {
+    const container = mount({
+      maxFileCount: 2,
+      uploadedFiles: [{
+        fileName: 'a.jpg',
+        fileImageUrl: 'https://external.example.com/a.jpg'
+      }, {
+        fileName: 'broken.jpg',
+        fileImageUrl: ''
+      }]
+    });
+    // 유효한 1장 < maxFileCount 2 → 빈 슬롯이 남아야 한다
+    (0, _vitest.expect)(emptySlot(container)).not.toBeNull();
+  });
+  (0, _vitest.it)('삭제 시 렌더되지 않은 항목도 호출자 목록에 그대로 남긴다', () => {
+    const onUploadedFilesChange = _vitest.vi.fn();
+    const broken = {
+      fileName: 'broken.jpg',
+      fileImageUrl: ''
+    };
+    const container = mount({
+      maxFileCount: 3,
+      uploadedFiles: [{
+        fileName: 'a.jpg',
+        fileImageUrl: 'https://external.example.com/a.jpg'
+      }, broken],
+      onUploadedFilesChange
+    });
+    (0, _testUtils.act)(() => {
+      container.querySelector('.ncua-image-file-input__preview-remove-button')?.click();
+    });
+    (0, _vitest.expect)(onUploadedFilesChange).toHaveBeenCalledWith([broken]);
+  });
+});
+(0, _vitest.describe)('ImageFileInput — object URL 해제', () => {
+  /** 리렌더를 반복해도 URL이 늘지 않는지 보기 위한 횟수 */
+  const REPEATED_RENDERS = 3;
+  const originalCreateObjectURL = URL.createObjectURL;
+  const originalRevokeObjectURL = URL.revokeObjectURL;
+  let createObjectURL;
+  let revokeObjectURL;
+  (0, _vitest.beforeEach)(() => {
+    let issued = 0;
+    createObjectURL = _vitest.vi.fn(() => `blob:mock/${++issued}`);
+    revokeObjectURL = _vitest.vi.fn();
+    URL.createObjectURL = createObjectURL;
+    URL.revokeObjectURL = revokeObjectURL;
+  });
+  (0, _vitest.afterEach)(() => {
+    URL.createObjectURL = originalCreateObjectURL;
+    URL.revokeObjectURL = originalRevokeObjectURL;
+  });
+  (0, _vitest.it)('리렌더를 반복해도 파일당 object URL을 한 번만 만든다', () => {
+    const file = makeFile('a.jpg');
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = (0, _client.createRoot)(container);
+    for (let renderCount = 0; renderCount < REPEATED_RENDERS; renderCount++) {
+      (0, _testUtils.act)(() => {
+        root.render(/*#__PURE__*/(0, _react.createElement)(_ImageFileInput.ImageFileInput, {
+          value: [file],
+          onChange: () => undefined
+        }));
+      });
+    }
+    (0, _vitest.expect)(createObjectURL).toHaveBeenCalledTimes(1);
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    container.remove();
+  });
+  (0, _vitest.it)('언마운트하면 만들었던 object URL을 해제한다', () => {
+    const container = mount({
+      value: [makeFile('a.jpg')],
+      onChange: () => undefined
+    });
+    (0, _vitest.expect)(createObjectURL).toHaveBeenCalledTimes(1);
+    for (const entry of mounted.splice(0)) {
+      (0, _testUtils.act)(() => {
+        entry.root.unmount();
+      });
+      entry.container.remove();
+    }
+    (0, _vitest.expect)(revokeObjectURL).toHaveBeenCalledWith('blob:mock/1');
+    (0, _vitest.expect)(container.isConnected).toBe(false);
+  });
+});
+(0, _vitest.describe)('ImageFileInput — 파일 선택 시 저장된 이미지 반영', () => {
+  (0, _vitest.it)('저장된 이미지를 포함해 maxFileCount를 초과하면 EXCEED_MAX_FILE_COUNT로 거른다', () => {
+    const onFail = _vitest.vi.fn();
+    const onChange = _vitest.vi.fn();
+    const container = mount({
+      maxFileCount: 2,
+      value: [],
+      onChange,
+      onFail,
+      uploadedFiles: [{
+        fileName: 'a.jpg',
+        fileImageUrl: 'https://external.example.com/a.jpg'
+      }, {
+        fileName: 'b.jpg',
+        fileImageUrl: 'https://external.example.com/b.jpg'
+      }]
+    });
+    selectFiles(container, [makeFile('new.jpg')]);
+    (0, _vitest.expect)(onFail).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(onFail.mock.calls[0][0][0].errorType).toBe(_ImageFileInput.ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT);
+    // 전량 반려이므로 목록을 건드리지 않는다
+    (0, _vitest.expect)(onChange).not.toHaveBeenCalled();
+  });
+  (0, _vitest.it)('저장된 이미지와 파일명이 같으면 ALREADY_UPLOADED로 거른다', () => {
+    const onFail = _vitest.vi.fn();
+    const container = mount({
+      maxFileCount: 5,
+      value: [],
+      onChange: () => undefined,
+      onFail,
+      uploadedFiles: [{
+        fileName: 'same.jpg',
+        fileImageUrl: 'https://external.example.com/same.jpg'
+      }]
+    });
+    selectFiles(container, [makeFile('same.jpg')]);
+    (0, _vitest.expect)(onFail).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(onFail.mock.calls[0][0][0].errorType).toBe(_ImageFileInput.ImageFileInputErrorType.ALREADY_UPLOADED);
+  });
+  (0, _vitest.it)('maxFileCount가 1이면 새 파일 선택 시 저장된 이미지도 비운다', () => {
+    const onUploadedFilesChange = _vitest.vi.fn();
+    const onChange = _vitest.vi.fn();
+    const container = mount({
+      maxFileCount: 1,
+      value: [],
+      onChange,
+      uploadedFiles: [{
+        fileName: 'old.jpg',
+        fileImageUrl: 'https://external.example.com/old.jpg'
+      }],
+      onUploadedFilesChange
+    });
+    const picked = makeFile('new.jpg');
+    selectFiles(container, [picked]);
+    (0, _vitest.expect)(onChange).toHaveBeenCalledWith([picked]);
+    (0, _vitest.expect)(onUploadedFilesChange).toHaveBeenCalledWith([]);
+  });
+  (0, _vitest.it)('maxFileCount가 1이면 저장된 이미지와 이름이 같아도 교체를 허용한다', () => {
+    const onFail = _vitest.vi.fn();
+    const onChange = _vitest.vi.fn();
+    const onUploadedFilesChange = _vitest.vi.fn();
+    const container = mount({
+      maxFileCount: 1,
+      value: [],
+      onChange,
+      onFail,
+      uploadedFiles: [{
+        fileName: 'photo.jpg',
+        fileImageUrl: 'https://external.example.com/photo.jpg'
+      }],
+      onUploadedFilesChange
+    });
+    const picked = makeFile('photo.jpg');
+    selectFiles(container, [picked]);
+    (0, _vitest.expect)(onFail).not.toHaveBeenCalled();
+    (0, _vitest.expect)(onChange).toHaveBeenCalledWith([picked]);
+    (0, _vitest.expect)(onUploadedFilesChange).toHaveBeenCalledWith([]);
+  });
+  (0, _vitest.it)('한 장짜리 교체 시 렌더되지 않은 항목은 호출자 목록에 남긴다', () => {
+    const onUploadedFilesChange = _vitest.vi.fn();
+    const broken = {
+      fileName: 'broken.jpg',
+      fileImageUrl: ''
+    };
+    const container = mount({
+      maxFileCount: 1,
+      value: [],
+      onChange: () => undefined,
+      uploadedFiles: [{
+        fileName: 'old.jpg',
+        fileImageUrl: 'https://external.example.com/old.jpg'
+      }, broken],
+      onUploadedFilesChange
+    });
+    selectFiles(container, [makeFile('new.jpg')]);
+    (0, _vitest.expect)(onUploadedFilesChange).toHaveBeenCalledWith([broken]);
+  });
+  (0, _vitest.it)('저장된 이미지가 없으면 maxFileCount 1이어도 불필요하게 콜백을 호출하지 않는다', () => {
+    const onUploadedFilesChange = _vitest.vi.fn();
+    const container = mount({
+      maxFileCount: 1,
+      value: [],
+      onChange: () => undefined,
+      uploadedFiles: [],
+      onUploadedFilesChange
+    });
+    selectFiles(container, [makeFile('new.jpg')]);
+    (0, _vitest.expect)(onUploadedFilesChange).not.toHaveBeenCalled();
+  });
+});
+(0, _vitest.describe)('ImageFileInput — disabled 읽기 전용', () => {
+  const removeButtons = container => container.querySelectorAll('.ncua-image-file-input__preview-remove-button');
+  (0, _vitest.it)('disabled면 저장된 이미지의 삭제 버튼을 렌더하지 않는다', () => {
+    const container = mount({
+      disabled: true,
+      maxFileCount: 3,
+      uploadedFiles: [{
+        fileName: 'a.jpg',
+        fileImageUrl: 'https://external.example.com/a.jpg'
+      }]
+    });
+    (0, _vitest.expect)(previewImages(container)).toHaveLength(1); // 썸네일은 보인다
+    (0, _vitest.expect)(removeButtons(container)).toHaveLength(0); // 삭제 아이콘은 미노출
+  });
+  (0, _vitest.it)('disabled면 새로 고른 파일의 삭제 버튼도 렌더하지 않는다', () => {
+    const container = mount({
+      disabled: true,
+      maxFileCount: 3,
+      value: [makeFile('new.jpg')],
+      onChange: () => undefined
+    });
+    (0, _vitest.expect)(removeButtons(container)).toHaveLength(0);
+  });
+  (0, _vitest.it)('disabled가 아니면 삭제 버튼을 렌더한다', () => {
+    const container = mount({
+      maxFileCount: 3,
+      uploadedFiles: [{
+        fileName: 'a.jpg',
+        fileImageUrl: 'https://external.example.com/a.jpg'
+      }]
+    });
+    (0, _vitest.expect)(removeButtons(container)).toHaveLength(1);
+  });
+});
+(0, _vitest.describe)('ImageFileInput — 전량 반려 시 기존 선택 보존', () => {
+  (0, _vitest.it)('maxFileCount가 1일 때 모두 반려되면 이미 고른 파일을 유지한다', () => {
+    const already = makeFile('picked.jpg');
+    const onChange = _vitest.vi.fn();
+    const onFail = _vitest.vi.fn();
+    const container = mount({
+      maxFileCount: 1,
+      value: [already],
+      onChange,
+      onFail
+    });
+    // 같은 파일을 다시 고르면 ALREADY_UPLOADED 로 전량 반려된다
+    selectFiles(container, [makeFile('picked.jpg')]);
+    (0, _vitest.expect)(onFail).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(onFail.mock.calls[0][0][0].errorType).toBe(_ImageFileInput.ImageFileInputErrorType.ALREADY_UPLOADED);
+    (0, _vitest.expect)(onChange).not.toHaveBeenCalled(); // 빈 배열로 덮어쓰지 않는다
+  });
+  (0, _vitest.it)('전량 반려되면 저장된 이미지도 비우지 않는다', () => {
+    const saved = {
+      fileName: 'saved.jpg',
+      fileImageUrl: 'https://external.example.com/saved.jpg'
+    };
+    const onUploadedFilesChange = _vitest.vi.fn();
+    const container = mount({
+      maxFileCount: 3,
+      value: [makeFile('picked.jpg')],
+      onChange: () => undefined,
+      uploadedFiles: [saved],
+      onUploadedFilesChange,
+      onFail: () => undefined
+    });
+    selectFiles(container, [makeFile('picked.jpg')]);
+    (0, _vitest.expect)(onUploadedFilesChange).not.toHaveBeenCalled();
+  });
+  (0, _vitest.it)('일부만 통과하면 통과분만 반영한다', () => {
+    const already = makeFile('dup.jpg');
+    const onChange = _vitest.vi.fn();
+    const container = mount({
+      maxFileCount: 5,
+      value: [already],
+      onChange,
+      onFail: () => undefined
+    });
+    const fresh = makeFile('fresh.jpg');
+    selectFiles(container, [makeFile('dup.jpg'), fresh]);
+    (0, _vitest.expect)(onChange).toHaveBeenCalledWith([already, fresh]);
+  });
+});
+(0, _vitest.describe)('ImageFileInput — 저장된 이미지의 슬롯 수 합산', () => {
+  (0, _vitest.it)('uploadedFiles가 maxFileCount를 채우면 빈 슬롯을 감춘다', () => {
+    const container = mount({
+      maxFileCount: 2,
+      uploadedFiles: [{
+        fileName: 'a.jpg',
+        fileImageUrl: 'https://external.example.com/a.jpg'
+      }, {
+        fileName: 'b.jpg',
+        fileImageUrl: 'https://external.example.com/b.jpg'
+      }]
+    });
+    (0, _vitest.expect)(emptySlot(container)).toBeNull();
+  });
+  (0, _vitest.it)('maxFileCount에 여유가 있으면 빈 슬롯을 노출한다', () => {
+    const container = mount({
+      maxFileCount: 3,
+      uploadedFiles: [{
+        fileName: 'a.jpg',
+        fileImageUrl: 'https://external.example.com/a.jpg'
+      }, {
+        fileName: 'b.jpg',
+        fileImageUrl: 'https://external.example.com/b.jpg'
+      }]
+    });
+    (0, _vitest.expect)(emptySlot(container)).not.toBeNull();
+  });
+  (0, _vitest.it)('maxFileCount가 없을 때 저장된 이미지가 있으면 빈 슬롯을 감춘다', () => {
+    const container = mount({
+      uploadedFiles: [{
+        fileName: 'a.jpg',
+        fileImageUrl: 'https://external.example.com/a.jpg'
+      }]
+    });
+    (0, _vitest.expect)(emptySlot(container)).toBeNull();
+  });
+});
+(0, _vitest.describe)('ImageFileInput — 기존 File 동작 회귀', () => {
+  (0, _vitest.it)('uploadedFiles를 넘기지 않으면 빈 슬롯만 렌더한다', () => {
+    const container = mount({});
+    (0, _vitest.expect)(previewImages(container)).toHaveLength(0);
+    (0, _vitest.expect)(emptySlot(container)).not.toBeNull();
+  });
+});