@ncds/ui-admin 1.2.2 → 1.4.1

package/dist/esm/assets/scripts/fileInput/FileInputView.js

@@ -0,0 +1,450 @@
+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 { Tag } from '../tag/Tag';
+import { FILE_INPUT_CLASS_NAMES, getFileInputSizeClassName, getHintTextClassName, getLabelClassName } from './const/classNames';
+var FileInputView = /** @class */function () {
+  function FileInputView(options, model) {
+    this.tagInstances = [];
+    this.renderedFiles = []; // 이미 렌더링된 파일들 추적
+    this.options = options;
+    this.model = model;
+    this.element = this.createElement();
+    this.fileInputElement = this.element.querySelector('input[type="file"]');
+    this.buttonElement = this.element.querySelector('button');
+    this.fileTagsContainer = this.element.querySelector(".".concat(FILE_INPUT_CLASS_NAMES.fileTags));
+  }
+  /**
+   * 메인 DOM 요소 생성
+   */
+  FileInputView.prototype.createElement = function () {
+    var container = document.createElement('div');
+    var baseClasses = "".concat(FILE_INPUT_CLASS_NAMES.fileInput, " ").concat(getFileInputSizeClassName(this.options.size));
+    var customClasses = this.options.className ? " ".concat(this.options.className) : '';
+    container.className = baseClasses + customClasses;
+    // Hidden file input
+    container.appendChild(this.createFileInput());
+    // Input container
+    container.appendChild(this.createInputContainer());
+    // Hint list
+    if (this.options.hintItems && this.options.hintItems.length > 0) {
+      container.appendChild(this.createHintList());
+    }
+    // File tags container
+    var fileTagsContainer = document.createElement('div');
+    fileTagsContainer.className = FILE_INPUT_CLASS_NAMES.fileTags;
+    fileTagsContainer.style.display = 'none';
+    container.appendChild(fileTagsContainer);
+    return container;
+  };
+  /**
+   * Hidden file input 생성
+   */
+  FileInputView.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 생성
+   */
+  FileInputView.prototype.createInputContainer = function () {
+    var container = document.createElement('div');
+    container.className = 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 생성
+   */
+  FileInputView.prototype.createLabelContainer = function () {
+    var container = document.createElement('div');
+    container.className = 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 생성
+   */
+  FileInputView.prototype.createHelpIcon = function () {
+    var iconContainer = document.createElement('span');
+    iconContainer.className = 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;
+  };
+  FileInputView.prototype.createButton = function () {
+    var button = document.createElement('button');
+    button.type = 'button';
+    button.className = "ncua-btn ncua-btn--".concat(this.options.size, " 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;
+  };
+  FileInputView.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;
+  };
+  /**
+   * Hint text 생성
+   */
+  FileInputView.prototype.createHintText = function () {
+    var hintText = document.createElement('div');
+    hintText.className = getHintTextClassName(this.options.destructive);
+    hintText.textContent = this.options.hintText;
+    return hintText;
+  };
+  /**
+   * Hint list 생성
+   */
+  FileInputView.prototype.createHintList = function () {
+    var _a;
+    var ul = document.createElement('ul');
+    ul.className = 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 = FILE_INPUT_CLASS_NAMES.hintItem;
+      li.textContent = hint;
+      ul.appendChild(li);
+    });
+    return ul;
+  };
+  /**
+   * 파일 태그 렌더링 (삭제 표시된 초기 파일 포함)
+   */
+  FileInputView.prototype.renderFileTags = function (files, onRemove) {
+    var _this = this;
+    // 전체 파일 목록 (삭제 표시된 초기 파일 포함)을 가져와서 렌더링
+    var allFiles = this.getAllFilesIncludingDeleted();
+    if (allFiles.length === 0) {
+      // 모든 파일이 제거된 경우
+      this.tagInstances.forEach(function (tag) {
+        return tag.destroy();
+      });
+      this.tagInstances = [];
+      this.fileTagsContainer.innerHTML = '';
+      this.fileTagsContainer.style.display = 'none';
+      this.renderedFiles = [];
+      return;
+    }
+    this.fileTagsContainer.style.display = 'flex';
+    // 현재 렌더링된 파일과 새로운 전체 파일 목록 비교
+    var renderedFileCount = this.renderedFiles.length;
+    var _loop_1 = function (i) {
+      var renderedFile = this_1.renderedFiles[i];
+      var stillExists = allFiles.some(function (file) {
+        return _this.isSameFile(file, renderedFile);
+      });
+      if (!stillExists) {
+        // 파일이 완전히 제거됨
+        if (this_1.tagInstances[i]) {
+          this_1.tagInstances[i].destroy();
+        }
+        var tagContainer = this_1.fileTagsContainer.children[i];
+        if (tagContainer) {
+          // 이미지 URL 정리
+          var img = tagContainer.querySelector('img');
+          if (img && img.src.startsWith('blob:')) {
+            URL.revokeObjectURL(img.src);
+          }
+          tagContainer.remove();
+        }
+        this_1.tagInstances.splice(i, 1);
+        this_1.renderedFiles.splice(i, 1);
+      }
+    };
+    var this_1 = this;
+    // 제거된 파일들 처리 (뒤에서부터 제거하여 인덱스 변화 방지)
+    for (var i = renderedFileCount - 1; i >= 0; i--) {
+      _loop_1(i);
+    }
+    // 새로운 파일들과 상태 변경된 파일들 처리
+    allFiles.forEach(function (file, index) {
+      var isAlreadyRendered = _this.renderedFiles.some(function (renderedFile) {
+        return _this.isSameFile(file, renderedFile);
+      });
+      var isDeletedInitial = _this.model.isDeletedInitialFile(file);
+      if (!isAlreadyRendered) {
+        // 새로운 파일을 올바른 위치에 삽입
+        _this.insertFileTagAtIndex(file, index, onRemove);
+        _this.renderedFiles.splice(index, 0, file);
+      } else if (isDeletedInitial) {
+        // 기존 파일이 삭제 표시됨 - 해당 컨테이너를 숨김 처리하고 checkbox 체크
+        var existingIndex = _this.renderedFiles.findIndex(function (renderedFile) {
+          return _this.isSameFile(file, renderedFile);
+        });
+        if (existingIndex !== -1) {
+          var tagContainer = _this.fileTagsContainer.children[existingIndex];
+          if (tagContainer) {
+            tagContainer.style.display = 'none';
+            // checkbox를 체크된 상태로 변경
+            var checkbox = tagContainer.querySelector('input[type="checkbox"]');
+            if (checkbox) {
+              checkbox.checked = true;
+            }
+            // Tag 인스턴스 제거 (UI는 숨김)
+            if (_this.tagInstances[existingIndex]) {
+              _this.tagInstances[existingIndex].destroy();
+              _this.tagInstances.splice(existingIndex, 1);
+            }
+          }
+        }
+      }
+    });
+    // 인덱스 업데이트 (onRemove 콜백의 인덱스가 정확하도록)
+    this.updateFileIndices(onRemove);
+  };
+  /**
+   * 삭제 표시된 초기 파일을 포함한 전체 파일 목록 반환
+   */
+  FileInputView.prototype.getAllFilesIncludingDeleted = function () {
+    var _this = this;
+    var newFiles = this.model.getOptions().value !== undefined ? this.model.getOptions().value : this.model.internalFiles;
+    // 모든 초기 파일을 File 객체로 변환 (삭제 표시된 것도 포함)
+    var allInitialFiles = this.model.initialFiles.map(function (uploadedFile) {
+      var mimeType = _this.model.getMimeTypeFromFileName(uploadedFile.fileName);
+      return new File([], uploadedFile.fileName, {
+        type: mimeType
+      });
+    });
+    return __spreadArray(__spreadArray([], allInitialFiles, true), newFiles, true);
+  };
+  /**
+   * 두 파일이 같은 파일인지 확인
+   */
+  FileInputView.prototype.isSameFile = function (file1, file2) {
+    return file1.name === file2.name && file1.size === file2.size && file1.lastModified === file2.lastModified;
+  };
+  /**
+   * 특정 인덱스에 파일 태그 삽입
+   */
+  FileInputView.prototype.insertFileTagAtIndex = function (file, index, onRemove) {
+    var tagContainer = this.createFileTagContainer(file, index, onRemove);
+    // 올바른 위치에 삽입
+    var existingChildren = this.fileTagsContainer.children;
+    if (index >= existingChildren.length) {
+      // 마지막에 추가
+      this.fileTagsContainer.appendChild(tagContainer);
+    } else {
+      // 특정 위치에 삽입
+      this.fileTagsContainer.insertBefore(tagContainer, existingChildren[index]);
+    }
+  };
+  /**
+   * 파일 태그 생성 (마지막에 추가)
+   */
+  FileInputView.prototype.createFileTag = function (file, index, onRemove) {
+    var tagContainer = this.createFileTagContainer(file, index, onRemove);
+    this.fileTagsContainer.appendChild(tagContainer);
+  };
+  /**
+   * 파일 태그 컨테이너 생성
+   */
+  FileInputView.prototype.createFileTagContainer = function (file, index, onRemove) {
+    var tagContainer = document.createElement('div');
+    tagContainer.className = FILE_INPUT_CLASS_NAMES.fileTagContainer;
+    // 파일이 초기 파일인지 새로 추가된 파일인지 확인
+    var isInitialFile = this.model.isInitialFile(file);
+    var isNewlyAdded = this.model.isNewlyAddedFile(file);
+    var isDeletedInitial = this.model.isDeletedInitialFile(file);
+    // 삭제 표시된 초기 파일인 경우 숨김 처리하지만 checkbox는 유지
+    if (isDeletedInitial) {
+      tagContainer.style.display = 'none';
+      // checkbox만 생성 (체크된 상태로)
+      if (this.options.checkboxName) {
+        var checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.name = this.options.checkboxName;
+        checkbox.value = file.name;
+        checkbox.hidden = true;
+        checkbox.checked = true; // 삭제 표시됨
+        checkbox.setAttribute('data-file-index', String(index));
+        tagContainer.appendChild(checkbox);
+      }
+      return tagContainer;
+    }
+    // Tag 인스턴스 생성 (삭제되지 않은 파일만)
+    var tagSize = this.options.size === 'xs' ? 'sm' : 'md';
+    var tag = new Tag({
+      text: file.name,
+      size: tagSize,
+      close: true,
+      onButtonClick: function () {
+        return onRemove(index);
+      }
+    });
+    this.tagInstances.splice(index, 0, tag);
+    tagContainer.appendChild(tag.getElement());
+    // PHP form submission을 위한 hidden input 생성
+    if (isInitialFile && this.options.checkboxName) {
+      // 기존 파일: checkbox (삭제 표시용)
+      var checkbox = document.createElement('input');
+      checkbox.type = 'checkbox';
+      checkbox.name = this.options.checkboxName;
+      checkbox.value = file.name;
+      checkbox.hidden = true;
+      checkbox.checked = false; // 기본적으로 삭제 안함
+      checkbox.setAttribute('data-file-index', String(index));
+      tagContainer.appendChild(checkbox);
+    } else if (isNewlyAdded && this.options.fileInputName) {
+      // 새로 추가된 파일: file input (업로드용)
+      var hiddenFileInput = document.createElement('input');
+      hiddenFileInput.type = 'file';
+      hiddenFileInput.name = this.options.fileInputName;
+      hiddenFileInput.hidden = true;
+      hiddenFileInput.classList.add('no-filestyle');
+      hiddenFileInput.setAttribute('data-file-index', String(index));
+      // File 객체를 DataTransfer를 통해 설정
+      var dataTransfer = new DataTransfer();
+      dataTransfer.items.add(file);
+      hiddenFileInput.files = dataTransfer.files;
+      tagContainer.appendChild(hiddenFileInput);
+    }
+    if (this.options.showImagePreview && file.type.startsWith('image/')) {
+      var img = document.createElement('img');
+      img.className = FILE_INPUT_CLASS_NAMES.fileImage;
+      img.src = URL.createObjectURL(file);
+      img.alt = file.name;
+      tagContainer.appendChild(img);
+    }
+    return tagContainer;
+  };
+  /**
+   * 파일 인덱스 업데이트
+   */
+  FileInputView.prototype.updateFileIndices = function (onRemove) {
+    var _a;
+    var tagContainers = this.fileTagsContainer.children;
+    var _loop_2 = function (i) {
+      var tagContainer = tagContainers[i];
+      // data-file-index 업데이트
+      var inputs = tagContainer.querySelectorAll('input[data-file-index]');
+      inputs.forEach(function (input) {
+        input.setAttribute('data-file-index', String(i));
+      });
+      // Tag 인스턴스의 onButtonClick 업데이트
+      if (this_2.tagInstances[i]) {
+        // Tag 인스턴스의 콜백을 직접 업데이트할 수 없으므로
+        // 버튼 이벤트 리스너를 다시 설정
+        var closeButton = tagContainer.querySelector('.ncua-tag__close');
+        if (closeButton) {
+          // 기존 이벤트 리스너를 제거하고 새로운 것으로 교체
+          var newCloseButton = closeButton.cloneNode(true);
+          (_a = closeButton.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newCloseButton, closeButton);
+          newCloseButton.addEventListener('click', function () {
+            return onRemove(i);
+          });
+        }
+      }
+    };
+    var this_2 = this;
+    for (var i = 0; i < tagContainers.length; i++) {
+      _loop_2(i);
+    }
+  };
+  FileInputView.prototype.setButtonDisabled = function (disabled) {
+    this.buttonElement.disabled = disabled;
+  };
+  FileInputView.prototype.getElement = function () {
+    return this.element;
+  };
+  FileInputView.prototype.getFileInputElement = function () {
+    return this.fileInputElement;
+  };
+  FileInputView.prototype.getButtonElement = function () {
+    return this.buttonElement;
+  };
+  FileInputView.prototype.destroy = function () {
+    this.tagInstances.forEach(function (tag) {
+      return tag.destroy();
+    });
+    this.tagInstances = [];
+    this.renderedFiles = [];
+    var images = this.fileTagsContainer.querySelectorAll('img');
+    images.forEach(function (img) {
+      if (img.src.startsWith('blob:')) {
+        URL.revokeObjectURL(img.src);
+      }
+    });
+  };
+  return FileInputView;
+}();
+export { FileInputView };

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

@@ -0,0 +1,25 @@
+// FileInput 관련 CSS 클래스명 상수
+export var FILE_INPUT_CLASS_NAMES = {
+  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',
+  fileTags: 'ncua-file-input__file-tags',
+  fileTagContainer: 'ncua-file-input__file-tag-container',
+  fileImage: 'ncua-file-input__file-image'
+};
+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/fileInput/const/index.js

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

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

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

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

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

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

@@ -0,0 +1,182 @@
+import { ImageFileInputModel } from './ImageFileInputModel';
+import { ImageFileInputView } from './ImageFileInputView';
+var ImageFileInput = /** @class */function () {
+  function ImageFileInput(options) {
+    var _this = this;
+    /**
+     * 파일 선택 버튼 클릭 핸들러
+     */
+    this.handleBrowseClick = function () {
+      if (!_this.model.isDisabled()) {
+        _this.view.getFileInputElement().click();
+      }
+    };
+    /**
+     * 파일 변경 핸들러
+     */
+    this.handleFileChange = function (event) {
+      var _a, _b, _c;
+      var target = event.target;
+      var selectedFiles = target.files;
+      if (!selectedFiles || selectedFiles.length === 0) return;
+      var _d = _this.model.validateFiles(Array.from(selectedFiles)),
+        validFiles = _d.validFiles,
+        invalidFiles = _d.invalidFiles;
+      var options = _this.model.getOptions();
+      // 유효한 파일에 대한 콜백 호출
+      if (validFiles.length > 0) {
+        // 파일 추가 (maxFileCount가 1이면 교체)
+        _this.model.addFiles(validFiles);
+        // 콜백을 통해 선택된 파일 정보 전달
+        if (_this.model.isControlled()) {
+          (_a = options.onChange) === null || _a === void 0 ? void 0 : _a.call(options, _this.model.getFiles());
+        } else {
+          (_b = options.onFileSelect) === null || _b === void 0 ? void 0 : _b.call(options, _this.model.getFiles());
+        }
+        // 자동 렌더링 (uncontrolled mode)
+        if (!_this.model.isControlled()) {
+          _this.render();
+        }
+      }
+      // 유효하지 않은 파일 처리
+      if (invalidFiles.length > 0) {
+        (_c = options.onFail) === null || _c === void 0 ? void 0 : _c.call(options, invalidFiles);
+      }
+      // Reset input value to allow re-selecting the same file
+      target.value = '';
+    };
+    /**
+     * 파일 제거 핸들러
+     */
+    this.handleRemoveFile = function (index) {
+      _this.model.removeFile(index);
+      _this.notifyChange();
+    };
+    this.model = new ImageFileInputModel(options);
+    this.view = new ImageFileInputView(this.model.getOptions(), this.model);
+    this.setupEventListeners();
+    // 초기 렌더링 (빈 슬롯 버튼 생성)
+    this.render();
+    // 컨테이너가 지정되면 자동으로 추가
+    if (options.container) {
+      this.appendToContainer(options.container);
+    }
+  }
+  /**
+   * 컨테이너에 요소 추가
+   */
+  ImageFileInput.prototype.appendToContainer = function (container) {
+    var containerElement = null;
+    if (typeof container === 'string') {
+      // ID로 찾기 (# 없이)
+      containerElement = document.getElementById(container);
+      // ID로 못 찾으면 CSS 셀렉터로 찾기
+      if (!containerElement) {
+        containerElement = document.querySelector(container);
+      }
+    } else {
+      containerElement = container;
+    }
+    if (containerElement) {
+      containerElement.appendChild(this.getElement());
+    } else {
+      console.warn("ImageFileInput: Container not found:", container);
+    }
+  };
+  /**
+   * 이벤트 리스너 설정
+   */
+  ImageFileInput.prototype.setupEventListeners = function () {
+    var fileInput = this.view.getFileInputElement();
+    var button = this.view.getButtonElement();
+    // 파일 선택 이벤트
+    fileInput.addEventListener('change', this.handleFileChange);
+    // 버튼 클릭 이벤트
+    button.addEventListener('click', this.handleBrowseClick);
+  };
+  /**
+   * 변경 알림 (onChange/onFileSelect 호출)
+   */
+  ImageFileInput.prototype.notifyChange = function () {
+    var _a, _b;
+    var options = this.model.getOptions();
+    var files = this.model.getFiles();
+    if (this.model.isControlled()) {
+      // Controlled mode: onChange 호출
+      (_a = options.onChange) === null || _a === void 0 ? void 0 : _a.call(options, files);
+      this.render();
+    } else {
+      // Uncontrolled mode: onFileSelect 호출 및 렌더링
+      (_b = options.onFileSelect) === null || _b === void 0 ? void 0 : _b.call(options, files);
+      this.render();
+    }
+  };
+  /**
+   * 뷰 렌더링 (내부용)
+   */
+  ImageFileInput.prototype.render = function () {
+    var files = this.model.getFiles();
+    this.view.renderImagePreviews(files, this.handleRemoveFile, this.handleBrowseClick);
+  };
+  /**
+   * 이미지 프리뷰를 수동으로 렌더링
+   * 사용자가 콜백에서 직접 호출하여 프리뷰를 렌더링할 수 있음
+   */
+  ImageFileInput.prototype.renderImagePreviews = function () {
+    this.render();
+  };
+  /**
+   * DOM 요소 반환
+   */
+  ImageFileInput.prototype.getElement = function () {
+    return this.view.getElement();
+  };
+  /**
+   * 현재 파일 목록 반환
+   */
+  ImageFileInput.prototype.getFiles = function () {
+    return this.model.getFiles();
+  };
+  /**
+   * 초기 업로드된 파일 목록 설정
+   */
+  ImageFileInput.prototype.setFiles = function (uploadedFiles) {
+    var _a;
+    this.model.setFiles(uploadedFiles);
+    var options = this.model.getOptions();
+    if (this.model.isControlled()) {
+      var allFiles = this.model.getFiles();
+      (_a = options.onChange) === null || _a === void 0 ? void 0 : _a.call(options, allFiles);
+    } else {
+      this.render();
+    }
+  };
+  /**
+   * 모든 파일 제거
+   */
+  ImageFileInput.prototype.clearFiles = function () {
+    this.model.clearFiles();
+    this.notifyChange();
+  };
+  /**
+   * disabled 상태 설정
+   */
+  ImageFileInput.prototype.setDisabled = function (disabled) {
+    this.model.setDisabled(disabled);
+    this.view.setButtonDisabled(disabled);
+  };
+  /**
+   * 리소스 정리
+   */
+  ImageFileInput.prototype.destroy = function () {
+    // 이벤트 리스너 제거
+    var fileInput = this.view.getFileInputElement();
+    var button = this.view.getButtonElement();
+    fileInput.removeEventListener('change', this.handleFileChange);
+    button.removeEventListener('click', this.handleBrowseClick);
+    // View 리소스 정리
+    this.view.destroy();
+  };
+  return ImageFileInput;
+}();
+export { ImageFileInput };