@ncds/ui-admin 1.8.16 → 1.8.17

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();
+  });
+});

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

@@ -6,19 +6,26 @@ Object.defineProperty(exports, "__esModule", {
 exports.ImagePreview = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _useObjectUrl = require("../../../../hooks/useObjectUrl");
 var _button = require("../../../action/button");
 const ImagePreview = _ref => {
   let {
     file,
+    imageUrl,
+    alt,
+    disabled,
     onRemove
   } = _ref;
+  const objectUrl = (0, _useObjectUrl.useObjectUrl)(file);
+  const src = file ? objectUrl : imageUrl;
+  if (!src) return null;
   return (0, _jsxRuntime.jsxs)("div", {
     className: "ncua-image-file-input__preview-container",
     children: [(0, _jsxRuntime.jsx)("img", {
       className: "ncua-image-file-input__preview-image",
-      src: URL.createObjectURL(file),
-      alt: file.name
-    }), (0, _jsxRuntime.jsx)(_button.Button, {
+      src: src,
+      alt: alt ?? file?.name ?? ''
+    }), !disabled && (0, _jsxRuntime.jsx)(_button.Button, {
       size: "sm",
       hierarchy: "text",
       onlyIcon: true,

package/dist/cjs/src/hooks/__tests__/useObjectUrl.test.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _useObjectUrl = require("../useObjectUrl");
+// @vitest-environment jsdom
+
+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;
+});
+const mounted = [];
+(0, _vitest.afterEach)(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    container.remove();
+  }
+  URL.createObjectURL = originalCreateObjectURL;
+  URL.revokeObjectURL = originalRevokeObjectURL;
+});
+/** 내용은 검증 대상이 아니므로 최소 크기만 채운다 */
+const DUMMY_FILE_BYTES = 4;
+const makeFile = name => new File([new Uint8Array(DUMMY_FILE_BYTES)], name, {
+  type: 'image/jpeg'
+});
+/** 훅 결과를 data-url 속성으로 노출하는 관찰용 컴포넌트 */
+const Probe = _ref => {
+  let {
+    file
+  } = _ref;
+  return /*#__PURE__*/(0, _react.createElement)('span', {
+    'data-url': (0, _useObjectUrl.useObjectUrl)(file) ?? ''
+  });
+};
+function renderProbe(file) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  const render = nextFile => {
+    (0, _testUtils.act)(() => {
+      root.render(/*#__PURE__*/(0, _react.createElement)(Probe, {
+        file: nextFile
+      }));
+    });
+  };
+  render(file);
+  mounted.push({
+    root,
+    container
+  });
+  const currentUrl = () => container.querySelector('span')?.getAttribute('data-url');
+  const unmount = () => {
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    const index = mounted.findIndex(entry => entry.root === root);
+    mounted.splice(index, 1);
+    container.remove();
+  };
+  return {
+    render,
+    currentUrl,
+    unmount
+  };
+}
+(0, _vitest.describe)('useObjectUrl', () => {
+  (0, _vitest.it)('파일을 주면 object URL을 만들어 반환한다', () => {
+    const probe = renderProbe(makeFile('a.jpg'));
+    (0, _vitest.expect)(createObjectURL).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(probe.currentUrl()).toBe('blob:mock/1');
+  });
+  (0, _vitest.it)('같은 파일로 여러 번 리렌더해도 URL을 한 번만 만든다', () => {
+    const file = makeFile('a.jpg');
+    const probe = renderProbe(file);
+    probe.render(file);
+    probe.render(file);
+    probe.render(file);
+    (0, _vitest.expect)(createObjectURL).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(revokeObjectURL).not.toHaveBeenCalled();
+  });
+  (0, _vitest.it)('언마운트하면 만들었던 URL을 해제한다', () => {
+    const probe = renderProbe(makeFile('a.jpg'));
+    (0, _vitest.expect)(revokeObjectURL).not.toHaveBeenCalled();
+    probe.unmount();
+    (0, _vitest.expect)(revokeObjectURL).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(revokeObjectURL).toHaveBeenCalledWith('blob:mock/1');
+  });
+  (0, _vitest.it)('파일이 바뀌면 이전 URL을 해제하고 새로 만든다', () => {
+    const probe = renderProbe(makeFile('a.jpg'));
+    probe.render(makeFile('b.jpg'));
+    (0, _vitest.expect)(createObjectURL).toHaveBeenCalledTimes(2);
+    (0, _vitest.expect)(revokeObjectURL).toHaveBeenCalledWith('blob:mock/1');
+    (0, _vitest.expect)(probe.currentUrl()).toBe('blob:mock/2');
+  });
+  (0, _vitest.it)('파일이 없으면 URL을 만들지 않는다', () => {
+    const probe = renderProbe(undefined);
+    (0, _vitest.expect)(createObjectURL).not.toHaveBeenCalled();
+    (0, _vitest.expect)(probe.currentUrl()).toBe('');
+  });
+  (0, _vitest.it)('파일을 없애면 이전 URL을 해제한다', () => {
+    const probe = renderProbe(makeFile('a.jpg'));
+    probe.render(undefined);
+    (0, _vitest.expect)(revokeObjectURL).toHaveBeenCalledWith('blob:mock/1');
+    (0, _vitest.expect)(probe.currentUrl()).toBe('');
+  });
+});