@ncds/ui-admin 1.3.0 → 1.4.1

package/dist/esm/assets/scripts/imageFileInput/ImageFileInputModel.js

@@ -0,0 +1,263 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { ImageFileInputErrorType } from './const/types';
+var ImageFileInputModel = /** @class */function () {
+  function ImageFileInputModel(options) {
+    this.internalFiles = [];
+    this.initialFiles = []; // 초기 파일 목록 (렌더링 시점의 파일)
+    this.newlyAddedFiles = new Set(); // 새로 추가된 파일 추적
+    this.deletedInitialFiles = new Set(); // 삭제 표시된 초기 파일들 (파일명으로 추적)
+    this.options = __assign({
+      size: 'sm',
+      multiple: false,
+      buttonLabel: '파일 찾기',
+      imagePreviewTooltipLabel: '이미지 업로드',
+      disabled: false
+    }, options);
+    // 초기 파일 설정
+    if (this.options.value && this.options.value.length > 0) {
+      this.internalFiles = __spreadArray([], this.options.value, true);
+      // value로 들어온 File[]은 새로 추가된 파일로 처리 (initialFiles는 별도로 setFiles(UploadedFile[])로 설정)
+    }
+  }
+  /**
+   * 옵션 반환
+   */
+  ImageFileInputModel.prototype.getOptions = function () {
+    return this.options;
+  };
+  /**
+   * 현재 파일 목록 반환 (초기 파일 + 새로 추가된 파일, 삭제 표시된 파일 제외)
+   */
+  ImageFileInputModel.prototype.getFiles = function () {
+    var _this = this;
+    var newFiles = this.options.value !== undefined ? this.options.value : this.internalFiles;
+    // UploadedFile을 File 객체로 변환 (삭제 표시되지 않은 것만)
+    var initialFilesAsFiles = this.initialFiles.filter(function (uploadedFile) {
+      return !_this.deletedInitialFiles.has(uploadedFile.fileName);
+    }).map(function (uploadedFile) {
+      // UploadedFile을 File 객체로 변환 (빈 데이터지만 이름과 타입 정보 유지)
+      var mimeType = _this.getMimeTypeFromFileName(uploadedFile.fileName);
+      return new File([], uploadedFile.fileName, {
+        type: mimeType
+      });
+    });
+    // 초기 파일 + 새로 추가된 파일 합치기
+    return __spreadArray(__spreadArray([], initialFilesAsFiles, true), newFiles, true);
+  };
+  /**
+   * 파일명에서 MIME 타입 추론
+   */
+  ImageFileInputModel.prototype.getMimeTypeFromFileName = function (fileName) {
+    var _a;
+    var extension = (_a = fileName.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    var mimeTypes = {
+      jpg: 'image/jpeg',
+      jpeg: 'image/jpeg',
+      png: 'image/png',
+      gif: 'image/gif',
+      webp: 'image/webp',
+      svg: 'image/svg+xml',
+      bmp: 'image/bmp'
+    };
+    return mimeTypes[extension || ''] || 'application/octet-stream';
+  };
+  /**
+   * 초기 업로드된 파일 목록 설정 (UploadedFile[] 타입만 허용)
+   */
+  ImageFileInputModel.prototype.setFiles = function (uploadedFiles) {
+    this.initialFiles = __spreadArray([], uploadedFiles, true);
+  };
+  /**
+   * 파일 추가
+   */
+  ImageFileInputModel.prototype.addFiles = function (files) {
+    var _this = this;
+    // maxFileCount가 1이면 기존 파일 교체
+    if (this.options.maxFileCount === 1) {
+      // 기존 초기 파일들을 삭제 표시
+      this.initialFiles.forEach(function (uploadedFile) {
+        _this.deletedInitialFiles.add(uploadedFile.fileName);
+      });
+      // 새로 추가된 파일로 표시
+      files.forEach(function (file) {
+        return _this.newlyAddedFiles.add(file);
+      });
+      var isControlled_1 = this.options.value !== undefined;
+      if (isControlled_1) {
+        this.options.value = files;
+      } else {
+        this.internalFiles = files;
+      }
+      return;
+    }
+    // getFiles()를 사용하지 않고 새로 추가된 파일만 관리
+    var currentNewFiles = this.options.value !== undefined ? this.options.value : this.internalFiles;
+    var newFiles = __spreadArray(__spreadArray([], currentNewFiles, true), files, true);
+    // 새로 추가된 파일로 표시
+    files.forEach(function (file) {
+      return _this.newlyAddedFiles.add(file);
+    });
+    var isControlled = this.options.value !== undefined;
+    if (isControlled) {
+      this.options.value = newFiles;
+    } else {
+      this.internalFiles = newFiles;
+    }
+  };
+  /**
+   * 특정 인덱스의 파일 제거
+   */
+  ImageFileInputModel.prototype.removeFile = function (index) {
+    var visibleFiles = this.getFiles(); // 현재 보이는 파일들
+    var fileToRemove = visibleFiles[index];
+    if (!fileToRemove) return;
+    // 초기 파일인지 확인
+    var isInitialFile = this.isInitialFile(fileToRemove);
+    if (isInitialFile) {
+      // 초기 파일: 삭제 표시만 함 (실제 제거하지 않음)
+      this.deletedInitialFiles.add(fileToRemove.name);
+    } else {
+      // 새로 추가된 파일: 실제 제거
+      var currentFiles = this.options.value !== undefined ? this.options.value : this.internalFiles;
+      var newFiles = currentFiles.filter(function (file) {
+        return file !== fileToRemove;
+      });
+      // newlyAddedFiles Set에서도 제거
+      this.newlyAddedFiles.delete(fileToRemove);
+      var isControlled = this.options.value !== undefined;
+      if (isControlled) {
+        this.options.value = newFiles;
+      } else {
+        this.internalFiles = newFiles;
+      }
+    }
+  };
+  /**
+   * 모든 파일 제거
+   */
+  ImageFileInputModel.prototype.clearFiles = function () {
+    var _this = this;
+    // 초기 파일들은 모두 삭제 표시
+    this.initialFiles.forEach(function (uploadedFile) {
+      _this.deletedInitialFiles.add(uploadedFile.fileName);
+    });
+    this.newlyAddedFiles.clear();
+    var isControlled = this.options.value !== undefined;
+    if (isControlled) {
+      this.options.value = [];
+    } else {
+      this.internalFiles = [];
+    }
+  };
+  /**
+   * 파일 유효성 검사
+   */
+  ImageFileInputModel.prototype.validateFiles = function (fileList) {
+    var validFiles = [];
+    var invalidFiles = [];
+    var currentFiles = this.getFiles();
+    var _loop_1 = function (file) {
+      // 중복 체크
+      if (currentFiles.some(function (f) {
+        return f.name === file.name && f.size === file.size;
+      })) {
+        invalidFiles.push(__assign(__assign({}, file), {
+          errorType: ImageFileInputErrorType.ALREADY_UPLOADED
+        }));
+        return "continue";
+      }
+      // 파일 크기 체크
+      if (this_1.options.maxFileSize && file.size > this_1.options.maxFileSize) {
+        invalidFiles.push(__assign(__assign({}, file), {
+          errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE
+        }));
+        return "continue";
+      }
+      // 파일 개수 체크 (maxFileCount가 1이면 교체 가능하므로 체크하지 않음)
+      if (this_1.options.maxFileCount && this_1.options.maxFileCount !== 1 && currentFiles.length + validFiles.length >= this_1.options.maxFileCount) {
+        invalidFiles.push(__assign(__assign({}, file), {
+          errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT
+        }));
+        return "continue";
+      }
+      validFiles.push(file);
+    };
+    var this_1 = this;
+    for (var _i = 0, fileList_1 = fileList; _i < fileList_1.length; _i++) {
+      var file = fileList_1[_i];
+      _loop_1(file);
+    }
+    return {
+      validFiles: validFiles,
+      invalidFiles: invalidFiles
+    };
+  };
+  /**
+   * disabled 상태 설정
+   */
+  ImageFileInputModel.prototype.setDisabled = function (disabled) {
+    this.options.disabled = disabled;
+  };
+  /**
+   * disabled 상태 반환
+   */
+  ImageFileInputModel.prototype.isDisabled = function () {
+    return this.options.disabled;
+  };
+  /**
+   * Controlled mode 여부 확인
+   * onChange가 있으면 Controlled mode로 판단
+   */
+  ImageFileInputModel.prototype.isControlled = function () {
+    return this.options.onChange !== undefined;
+  };
+  /**
+   * 파일이 초기 파일인지 확인 (UploadedFile로 설정된 기존 파일)
+   */
+  ImageFileInputModel.prototype.isInitialFile = function (file) {
+    return this.initialFiles.some(function (uploadedFile) {
+      return uploadedFile.fileName === file.name;
+    });
+  };
+  /**
+   * 파일이 새로 추가된 파일인지 확인
+   */
+  ImageFileInputModel.prototype.isNewlyAddedFile = function (file) {
+    return this.newlyAddedFiles.has(file);
+  };
+  /**
+   * 파일이 삭제 표시된 초기 파일인지 확인
+   */
+  ImageFileInputModel.prototype.isDeletedInitialFile = function (file) {
+    return this.deletedInitialFiles.has(file.name);
+  };
+  /**
+   * 초기 파일의 이미지 URL 반환
+   */
+  ImageFileInputModel.prototype.getInitialFileImageUrl = function (file) {
+    var uploadedFile = this.initialFiles.find(function (f) {
+      return f.fileName === file.name;
+    });
+    return uploadedFile === null || uploadedFile === void 0 ? void 0 : uploadedFile.fileImageUrl;
+  };
+  return ImageFileInputModel;
+}();
+export { ImageFileInputModel };

package/dist/esm/assets/scripts/imageFileInput/ImageFileInputView.js

@@ -0,0 +1,349 @@
+import { IMAGE_FILE_INPUT_CLASS_NAMES, getImageFileInputSizeClassName, getFileInputSizeClassName, getHintTextClassName, getLabelClassName } from './const/classNames';
+var ImageFileInputView = /** @class */function () {
+  function ImageFileInputView(options, model) {
+    this.renderedFiles = []; // 이미 렌더링된 파일들 추적
+    this.previewUrls = new Map(); // 파일 URL 추적
+    this.options = options;
+    this.model = model;
+    this.element = this.createElement();
+    this.previewsContainer = this.element.querySelector(".".concat(IMAGE_FILE_INPUT_CLASS_NAMES.previews));
+    this.fileInputElement = this.element.querySelector('input[type="file"]');
+    this.buttonElement = this.element.querySelector('button.ncua-btn');
+  }
+  /**
+   * 메인 DOM 요소 생성
+   */
+  ImageFileInputView.prototype.createElement = function () {
+    var mainContainer = document.createElement('div');
+    var baseClasses = "".concat(IMAGE_FILE_INPUT_CLASS_NAMES.imageFileInput, " ").concat(getImageFileInputSizeClassName(this.options.size));
+    var customClasses = this.options.className ? " ".concat(this.options.className) : '';
+    mainContainer.className = baseClasses + customClasses;
+    // Image previews container
+    var previewsContainer = document.createElement('div');
+    previewsContainer.className = IMAGE_FILE_INPUT_CLASS_NAMES.previews;
+    mainContainer.appendChild(previewsContainer);
+    // File input container
+    var fileInputContainer = document.createElement('div');
+    var fileInputClasses = "".concat(IMAGE_FILE_INPUT_CLASS_NAMES.fileInput, " ").concat(getFileInputSizeClassName(this.options.size));
+    fileInputContainer.className = fileInputClasses;
+    // Hidden file input
+    fileInputContainer.appendChild(this.createFileInput());
+    // Input container
+    fileInputContainer.appendChild(this.createInputContainer());
+    // Hint list
+    if (this.options.hintItems && this.options.hintItems.length > 0) {
+      fileInputContainer.appendChild(this.createHintList());
+    }
+    mainContainer.appendChild(fileInputContainer);
+    return mainContainer;
+  };
+  /**
+   * Hidden file input 생성
+   */
+  ImageFileInputView.prototype.createFileInput = function () {
+    var input = document.createElement('input');
+    input.type = 'file';
+    input.hidden = true;
+    input.tabIndex = -1;
+    input.setAttribute('aria-hidden', 'true');
+    input.classList.add('no-filestyle');
+    if (this.options.accept) {
+      input.accept = this.options.accept;
+    }
+    if (this.options.multiple) {
+      input.multiple = true;
+    }
+    if (this.options.fileInputName) {
+      input.name = this.options.fileInputName;
+    }
+    return input;
+  };
+  /**
+   * Input container 생성
+   */
+  ImageFileInputView.prototype.createInputContainer = function () {
+    var container = document.createElement('div');
+    container.className = IMAGE_FILE_INPUT_CLASS_NAMES.inputContainer;
+    // Label
+    if (this.options.label) {
+      container.appendChild(this.createLabelContainer());
+    }
+    // Button
+    container.appendChild(this.createButton());
+    // Hint text
+    if (this.options.hintText) {
+      container.appendChild(this.createHintText());
+    }
+    return container;
+  };
+  /**
+   * Label container 생성
+   */
+  ImageFileInputView.prototype.createLabelContainer = function () {
+    var container = document.createElement('div');
+    container.className = IMAGE_FILE_INPUT_CLASS_NAMES.label;
+    var label = document.createElement('label');
+    label.className = getLabelClassName(this.options.isRequired);
+    label.textContent = this.options.label;
+    container.appendChild(label);
+    if (this.options.showHelpIcon) {
+      container.appendChild(this.createHelpIcon());
+    }
+    return container;
+  };
+  /**
+   * Help icon 생성
+   */
+  ImageFileInputView.prototype.createHelpIcon = function () {
+    var iconContainer = document.createElement('span');
+    iconContainer.className = IMAGE_FILE_INPUT_CLASS_NAMES.helpIcon;
+    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('width', '16');
+    svg.setAttribute('height', '16');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('fill', 'none');
+    svg.setAttribute('stroke', 'currentColor');
+    var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    circle.setAttribute('cx', '12');
+    circle.setAttribute('cy', '12');
+    circle.setAttribute('r', '10');
+    circle.setAttribute('stroke-width', '2');
+    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', 'M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3');
+    path.setAttribute('stroke-width', '2');
+    path.setAttribute('stroke-linecap', 'round');
+    path.setAttribute('stroke-linejoin', 'round');
+    var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    line.setAttribute('x1', '12');
+    line.setAttribute('y1', '17');
+    line.setAttribute('x2', '12.01');
+    line.setAttribute('y2', '17');
+    line.setAttribute('stroke-width', '2');
+    line.setAttribute('stroke-linecap', 'round');
+    svg.appendChild(circle);
+    svg.appendChild(path);
+    svg.appendChild(line);
+    iconContainer.appendChild(svg);
+    return iconContainer;
+  };
+  /**
+   * Button 생성 (파일 찾기)
+   */
+  ImageFileInputView.prototype.createButton = function () {
+    var button = document.createElement('button');
+    button.type = 'button';
+    button.className = "ncua-btn ncua-btn--xs ncua-btn--secondary-gray";
+    button.disabled = this.options.disabled;
+    var iconSvg = this.createShareIcon();
+    button.appendChild(iconSvg);
+    var label = document.createElement('span');
+    label.className = 'ncua-btn__label';
+    label.textContent = this.options.buttonLabel;
+    button.appendChild(label);
+    return button;
+  };
+  /**
+   * Share icon (업로드 아이콘) 생성
+   */
+  ImageFileInputView.prototype.createShareIcon = function () {
+    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    svg.setAttribute('width', '14');
+    svg.setAttribute('height', '14');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('fill', 'none');
+    svg.setAttribute('stroke', 'none');
+    svg.classList.add('ncua-btn__icon');
+    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('stroke', 'currentColor');
+    path.setAttribute('stroke-linecap', 'round');
+    path.setAttribute('stroke-linejoin', 'round');
+    path.setAttribute('stroke-width', '2');
+    path.setAttribute('d', 'M21 12v4.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V12m13-5-4-4m0 0L8 7m4-4v12');
+    svg.appendChild(path);
+    return svg;
+  };
+  /**
+   * Trash icon (삭제 아이콘) 생성
+   */
+  ImageFileInputView.prototype.createTrashIcon = function () {
+    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    svg.setAttribute('width', '20');
+    svg.setAttribute('height', '20');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('fill', 'none');
+    svg.setAttribute('stroke', 'currentColor');
+    svg.classList.add('ncua-btn__icon');
+    var path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path1.setAttribute('stroke', 'currentColor');
+    path1.setAttribute('stroke-linecap', 'round');
+    path1.setAttribute('stroke-linejoin', 'round');
+    path1.setAttribute('stroke-width', '2');
+    path1.setAttribute('d', 'M16 6v-.8c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 2 13.92 2 12.8 2h-1.6c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C8 3.52 8 4.08 8 5.2V6m2 5.5v5m4-5v5M3 6h18m-2 0v11.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C16.72 22 15.88 22 14.2 22H9.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C5 19.72 5 18.88 5 17.2V6');
+    svg.appendChild(path1);
+    return svg;
+  };
+  /**
+   * Hint text 생성
+   */
+  ImageFileInputView.prototype.createHintText = function () {
+    var hintText = document.createElement('div');
+    hintText.className = getHintTextClassName(this.options.destructive);
+    hintText.textContent = this.options.hintText;
+    return hintText;
+  };
+  /**
+   * Hint list 생성
+   * Note: 힌트 리스트는 컴포넌트 size와 관계없이 항상 xs 사이즈로 고정됨
+   */
+  ImageFileInputView.prototype.createHintList = function () {
+    var _a;
+    var ul = document.createElement('ul');
+    ul.className = IMAGE_FILE_INPUT_CLASS_NAMES.hintList;
+    (_a = this.options.hintItems) === null || _a === void 0 ? void 0 : _a.forEach(function (hint) {
+      var li = document.createElement('li');
+      li.className = IMAGE_FILE_INPUT_CLASS_NAMES.hintItem;
+      li.textContent = hint;
+      ul.appendChild(li);
+    });
+    return ul;
+  };
+  /**
+   * 이미지 프리뷰 렌더링
+   */
+  ImageFileInputView.prototype.renderImagePreviews = function (files, onRemove, onBrowseClick) {
+    var _this = this;
+    // 기존 프리뷰 정리
+    this.cleanupPreviews();
+    // 새로운 프리뷰 렌더링
+    files.forEach(function (file, index) {
+      var previewContainer = _this.createImagePreview(file, index, onRemove);
+      _this.previewsContainer.appendChild(previewContainer);
+      _this.renderedFiles.push(file);
+    });
+    // 빈 슬롯 표시 여부 확인
+    var showEmptySlot = this.options.maxFileCount ? files.length < this.options.maxFileCount : files.length === 0;
+    if (showEmptySlot) {
+      var emptySlot = this.createEmptySlot(onBrowseClick);
+      this.previewsContainer.appendChild(emptySlot);
+    }
+  };
+  /**
+   * 이미지 프리뷰 생성
+   */
+  ImageFileInputView.prototype.createImagePreview = function (file, index, onRemove) {
+    var container = document.createElement('div');
+    container.className = IMAGE_FILE_INPUT_CLASS_NAMES.previewContainer;
+    // 이미지 요소 생성
+    var img = document.createElement('img');
+    img.className = IMAGE_FILE_INPUT_CLASS_NAMES.previewImage;
+    img.alt = file.name;
+    // 이미지 URL 생성
+    var isInitialFile = this.model.isInitialFile(file);
+    if (isInitialFile) {
+      // 초기 파일: fileImageUrl 사용
+      var imageUrl = this.model.getInitialFileImageUrl(file);
+      if (imageUrl) {
+        img.src = imageUrl;
+      }
+    } else {
+      // 새로 추가된 파일: createObjectURL 사용
+      var url = URL.createObjectURL(file);
+      img.src = url;
+      this.previewUrls.set(file, url);
+    }
+    container.appendChild(img);
+    // 삭제 버튼 생성
+    var removeButton = document.createElement('button');
+    removeButton.type = 'button';
+    removeButton.className = "ncua-btn ncua-btn--sm ncua-btn--text ".concat(IMAGE_FILE_INPUT_CLASS_NAMES.previewRemoveButton);
+    removeButton.setAttribute('aria-label', 'Remove image');
+    var trashIcon = this.createTrashIcon();
+    removeButton.appendChild(trashIcon);
+    removeButton.addEventListener('click', function () {
+      return onRemove(index);
+    });
+    container.appendChild(removeButton);
+    return container;
+  };
+  /**
+   * 빈 슬롯 생성 (파일 찾기 버튼)
+   */
+  ImageFileInputView.prototype.createEmptySlot = function (onBrowseClick) {
+    var _this = this;
+    var wrapper = document.createElement('div');
+    wrapper.className = 'ncua-image-file-input__empty-slot-wrapper';
+    var button = document.createElement('button');
+    button.type = 'button';
+    button.className = "ncua-btn ncua-btn--".concat(this.options.size, " ncua-btn--secondary-gray ").concat(IMAGE_FILE_INPUT_CLASS_NAMES.previewContainer);
+    button.disabled = this.options.disabled;
+    button.setAttribute('aria-label', this.options.imagePreviewTooltipLabel);
+    button.addEventListener('click', onBrowseClick);
+    wrapper.addEventListener('click', onBrowseClick);
+    wrapper.appendChild(button);
+    // Tooltip 생성 및 추가
+    var tooltip = this.createTooltip();
+    wrapper.appendChild(tooltip);
+    // Hover 이벤트로 tooltip 표시/숨김
+    wrapper.addEventListener('mouseenter', function () {
+      if (!_this.options.disabled) {
+        tooltip.style.display = 'block';
+      }
+    });
+    wrapper.addEventListener('mouseleave', function () {
+      tooltip.style.display = 'none';
+    });
+    return wrapper;
+  };
+  /**
+   * Tooltip 생성
+   */
+  ImageFileInputView.prototype.createTooltip = function () {
+    var iconSize = this.options.size === 'xs' ? '48' : '80';
+    var tooltipHTML = "\n      <svg width=\"".concat(iconSize, "\" height=\"").concat(iconSize, "\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" style=\"opacity: 0; cursor: pointer;\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\" stroke-width=\"2\"></circle>\n      </svg>\n      <span class=\"ncua-tooltip__bg ncua-tooltip__bg--black ncua-tooltip__bg--bottom ncua-tooltip__bg--visible\">\n        <span class=\"ncua-tooltip__content\">").concat(this.options.imagePreviewTooltipLabel, "</span>\n      </span>\n    ");
+    var tooltip = document.createElement('span');
+    tooltip.className = 'ncua-tooltip ncua-tooltip--sm ncua-tooltip--short';
+    tooltip.style.display = 'none';
+    tooltip.innerHTML = tooltipHTML;
+    return tooltip;
+  };
+  /**
+   * 기존 프리뷰 정리
+   */
+  ImageFileInputView.prototype.cleanupPreviews = function () {
+    // Blob URL 정리
+    this.previewUrls.forEach(function (url) {
+      URL.revokeObjectURL(url);
+    });
+    this.previewUrls.clear();
+    // DOM 정리
+    this.previewsContainer.innerHTML = '';
+    this.renderedFiles = [];
+  };
+  ImageFileInputView.prototype.setButtonDisabled = function (disabled) {
+    this.buttonElement.disabled = disabled;
+    // 빈 슬롯 wrapper 내부의 버튼도 disabled 설정
+    var emptySlotWrapper = this.previewsContainer.querySelector('.ncua-image-file-input__empty-slot-wrapper');
+    if (emptySlotWrapper) {
+      var emptySlotButton = emptySlotWrapper.querySelector(".".concat(IMAGE_FILE_INPUT_CLASS_NAMES.previewContainer, ".ncua-btn"));
+      if (emptySlotButton) {
+        emptySlotButton.disabled = disabled;
+      }
+    }
+  };
+  ImageFileInputView.prototype.getElement = function () {
+    return this.element;
+  };
+  ImageFileInputView.prototype.getFileInputElement = function () {
+    return this.fileInputElement;
+  };
+  ImageFileInputView.prototype.getButtonElement = function () {
+    return this.buttonElement;
+  };
+  ImageFileInputView.prototype.destroy = function () {
+    this.cleanupPreviews();
+  };
+  return ImageFileInputView;
+}();
+export { ImageFileInputView };

package/dist/esm/assets/scripts/imageFileInput/const/classNames.js

@@ -0,0 +1,30 @@
+// ImageFileInput 관련 CSS 클래스명 상수
+export var IMAGE_FILE_INPUT_CLASS_NAMES = {
+  imageFileInput: 'ncua-image-file-input',
+  previews: 'ncua-image-file-input__previews',
+  previewContainer: 'ncua-image-file-input__preview-container',
+  previewImage: 'ncua-image-file-input__preview-image',
+  previewRemoveButton: 'ncua-image-file-input__preview-remove-button',
+  fileInput: 'ncua-file-input',
+  inputContainer: 'ncua-file-input__input-container',
+  label: 'ncua-file-input__label',
+  helpIcon: 'ncua-input__help-icon',
+  hintText: 'ncua-input__hint-text',
+  hintList: 'ncua-file-input__hint-list',
+  hintItem: 'ncua-file-input__hint-item'
+};
+export var getImageFileInputSizeClassName = function (size) {
+  return "ncua-image-file-input--".concat(size);
+};
+export var getFileInputSizeClassName = function (size) {
+  return "ncua-file-input--".concat(size);
+};
+export var getButtonSizeClassName = function (size) {
+  return "ncua-button--".concat(size);
+};
+export var getLabelClassName = function (isRequired) {
+  return isRequired ? 'ncua-label ncua-label--required' : 'ncua-label';
+};
+export var getHintTextClassName = function (destructive) {
+  return destructive ? 'ncua-input__hint-text ncua-input__hint-text--destructive' : 'ncua-input__hint-text';
+};

package/dist/esm/assets/scripts/imageFileInput/const/index.js

@@ -0,0 +1,2 @@
+export * from './classNames';
+export * from './types';

package/dist/esm/assets/scripts/imageFileInput/const/types.js

@@ -0,0 +1,7 @@
+// ImageFileInput 관련 타입 정의 (React ImageFileInput.tsx와 동일)
+export var ImageFileInputErrorType;
+(function (ImageFileInputErrorType) {
+  ImageFileInputErrorType["ALREADY_UPLOADED"] = "ALREADY_UPLOADED";
+  ImageFileInputErrorType["EXCEED_MAX_FILE_SIZE"] = "EXCEED_MAX_FILE_SIZE";
+  ImageFileInputErrorType["EXCEED_MAX_FILE_COUNT"] = "EXCEED_MAX_FILE_COUNT";
+})(ImageFileInputErrorType || (ImageFileInputErrorType = {}));

package/dist/esm/assets/scripts/imageFileInput/index.js

@@ -0,0 +1,9 @@
+import { ImageFileInput } from './ImageFileInput';
+export * from './const/classNames';
+export * from './const/types';
+export { ImageFileInput } from './ImageFileInput';
+// 전역 등록 (추후 index.ts와 개별동작 할 수 있게끔 대비)
+if (typeof window !== 'undefined') {
+  window.ncua = window.ncua || {};
+  window.ncua.ImageFileInput = ImageFileInput;
+}