@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/esm/assets/scripts/featuredIcon.js

@@ -1,90 +1,80 @@
-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);
-};
 // React 컴포넌트와 동일하게 구성
-var iconSizeMap = {
+const iconSizeMap = {
   sm: 16,
   md: 20,
   lg: 24,
   xl: 28
 };
-var FeaturedIcon = /** @class */function () {
-  function FeaturedIcon(options) {
-    this.options = __assign({
+export class FeaturedIcon {
+  constructor(options) {
+    this.options = {
       theme: 'light-circle',
       color: 'neutral',
-      size: 'md',
-      className: ''
-    }, options);
+      size: 'sm',
+      className: '',
+      ...options
+    };
     this.element = this.createElement();
   }
   // svgString ( ICON SVG ) 을 받아서 요소를 생성
-  FeaturedIcon.prototype.createElement = function () {
-    var _a = this.options,
-      theme = _a.theme,
-      color = _a.color,
-      size = _a.size,
-      className = _a.className,
-      svgString = _a.svgString;
+  createElement() {
+    const {
+      theme,
+      color,
+      size,
+      className,
+      svgString
+    } = this.options;
     // React FeaturedIcon과 동일한 클래스 구조
-    var classes = ['ncua-featured-icon', "ncua-featured-icon--".concat(theme), "ncua-featured-icon--".concat(color), "ncua-featured-icon--".concat(size)];
+    const classes = ['ncua-featured-icon', `ncua-featured-icon--${theme}`, `ncua-featured-icon--${color}`, `ncua-featured-icon--${size}`];
     if (className) {
       classes.push(className);
     }
-    var div = document.createElement('div');
+    const div = document.createElement('div');
     div.className = classes.join(' ');
     // outline-circle 테마일 때 추가 요소들 (React 컴포넌트와 동일)
     if (theme === 'outline-circle') {
-      var innerOutline = document.createElement('div');
+      const innerOutline = document.createElement('div');
       innerOutline.className = 'ncua-featured-icon__outline ncua-featured-icon__outline--inner';
       div.appendChild(innerOutline);
-      var outerOutline = document.createElement('div');
+      const outerOutline = document.createElement('div');
       outerOutline.className = 'ncua-featured-icon__outline ncua-featured-icon__outline--outer';
       div.appendChild(outerOutline);
     }
     // SVG 아이콘 추가
-    var iconSize = iconSizeMap[size];
-    var svgWithSize = this.addSizeToSvg(svgString, iconSize);
+    const iconSize = iconSizeMap[size];
+    const svgWithSize = this.addSizeToSvg(svgString, iconSize);
     div.innerHTML += svgWithSize;
     return div;
-  };
-  FeaturedIcon.prototype.addSizeToSvg = function (svgString, size) {
-    return svgString.replace(/<svg([^>]*)>/, "<svg$1 width=\"".concat(size, "\" height=\"").concat(size, "\">"));
-  };
+  }
+  addSizeToSvg(svgString, size) {
+    return svgString.replace(/<svg([^>]*)>/, `<svg$1 width="${size}" height="${size}">`);
+  }
   // Public methods
-  FeaturedIcon.prototype.getElement = function () {
+  getElement() {
     return this.element;
-  };
-  FeaturedIcon.prototype.updateColor = function (color) {
-    this.element.className = this.element.className.replace(/ncua-featured-icon--(neutral|error|warning|success)/, "ncua-featured-icon--".concat(color));
+  }
+  updateColor(color) {
+    this.element.className = this.element.className.replace(/ncua-featured-icon--(neutral|error|warning|success)/, `ncua-featured-icon--${color}`);
     this.options.color = color;
-  };
-  FeaturedIcon.prototype.updateSize = function (size) {
-    var iconSize = iconSizeMap[size];
-    this.element.className = this.element.className.replace(/ncua-featured-icon--(sm|md|lg|xl)/, "ncua-featured-icon--".concat(size));
-    var svgIcon = this.element.querySelector('svg');
+  }
+  updateSize(size) {
+    const iconSize = iconSizeMap[size];
+    this.element.className = this.element.className.replace(/ncua-featured-icon--(sm|md|lg|xl)/, `ncua-featured-icon--${size}`);
+    const svgIcon = this.element.querySelector('svg');
     if (svgIcon) {
       svgIcon.setAttribute('width', String(iconSize));
       svgIcon.setAttribute('height', String(iconSize));
     }
     this.options.size = size;
-  };
-  FeaturedIcon.prototype.destroy = function () {
+  }
+  destroy() {
     if (this.element.parentNode) {
       this.element.parentNode.removeChild(this.element);
     }
-  };
+  }
   // Static factory method
-  FeaturedIcon.create = function (options) {
+  static create(options) {
     return new FeaturedIcon(options);
-  };
-  return FeaturedIcon;
-}();
-export { FeaturedIcon };
+  }
+}

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

@@ -1,5 +1,5 @@
 // FileInput 관련 CSS 클래스명 상수
-export var FILE_INPUT_CLASS_NAMES = {
+export const FILE_INPUT_CLASS_NAMES = {
   fileInput: 'ncua-file-input',
   inputContainer: 'ncua-file-input__input-container',
   label: 'ncua-file-input__label',
@@ -11,15 +11,6 @@ export var FILE_INPUT_CLASS_NAMES = {
   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';
-};
+export const getFileInputSizeClassName = size => `ncua-file-input--${size}`;
+export const getLabelClassName = isRequired => isRequired ? 'ncua-label ncua-label--required' : 'ncua-label';
+export const getHintTextClassName = destructive => destructive ? 'ncua-input__hint-text ncua-input__hint-text--destructive' : 'ncua-input__hint-text';

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

@@ -0,0 +1,71 @@
+import { FileInputModel } from './fileInputModel';
+import { FileInputView } from './fileInputView';
+export class FileInput {
+  constructor(options) {
+    this.handleBrowseClick = () => {
+      if (!this.model.isDisabled()) {
+        this.view.getFileInputElement().click();
+      }
+    };
+    this.handleFileChange = event => {
+      const target = event.target;
+      const selectedFiles = target.files;
+      if (!selectedFiles || selectedFiles.length === 0) return;
+      const {
+        validFiles,
+        invalidFiles
+      } = this.model.validateFiles(Array.from(selectedFiles));
+      const options = this.model.getOptions();
+      if (validFiles.length > 0) {
+        options.onChange?.(validFiles);
+      }
+      if (invalidFiles.length > 0) {
+        options.onFail?.(invalidFiles);
+      }
+      target.value = '';
+    };
+    this.model = new FileInputModel(options);
+    this.view = new FileInputView(this.model.getOptions());
+    this.setupEventListeners();
+    if (options.container) {
+      this.appendToContainer(options.container);
+    }
+  }
+  appendToContainer(container) {
+    let containerElement = null;
+    if (typeof container === 'string') {
+      containerElement = document.getElementById(container);
+      if (!containerElement) {
+        containerElement = document.querySelector(container);
+      }
+    } else {
+      containerElement = container;
+    }
+    if (containerElement) {
+      containerElement.appendChild(this.getElement());
+    } else {
+      console.warn(`FileInput: Container not found:`, container);
+    }
+  }
+  setupEventListeners() {
+    const fileInput = this.view.getFileInputElement();
+    const button = this.view.getButtonElement();
+    fileInput.addEventListener('change', this.handleFileChange);
+    button.addEventListener('click', this.handleBrowseClick);
+  }
+  // Public API
+  getElement() {
+    return this.view.getElement();
+  }
+  setDisabled(disabled) {
+    this.model.setDisabled(disabled);
+    this.view.setButtonDisabled(disabled);
+  }
+  destroy() {
+    const fileInput = this.view.getFileInputElement();
+    const button = this.view.getButtonElement();
+    fileInput.removeEventListener('change', this.handleFileChange);
+    button.removeEventListener('click', this.handleBrowseClick);
+    this.view.destroy();
+  }
+}

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

@@ -0,0 +1,46 @@
+import { FileInputErrorType } from './const/types';
+export class FileInputModel {
+  constructor(options) {
+    this.options = {
+      size: 'xs',
+      multiple: false,
+      buttonLabel: '파일 찾기',
+      disabled: false,
+      ...options
+    };
+  }
+  getOptions() {
+    return this.options;
+  }
+  validateFiles(fileList) {
+    const validFiles = [];
+    const invalidFiles = [];
+    for (const file of fileList) {
+      if (this.options.maxFileSize && file.size > this.options.maxFileSize) {
+        invalidFiles.push({
+          ...file,
+          errorType: FileInputErrorType.EXCEED_MAX_FILE_SIZE
+        });
+        continue;
+      }
+      if (this.options.maxFileCount && validFiles.length >= this.options.maxFileCount) {
+        invalidFiles.push({
+          ...file,
+          errorType: FileInputErrorType.EXCEED_MAX_FILE_COUNT
+        });
+        continue;
+      }
+      validFiles.push(file);
+    }
+    return {
+      validFiles,
+      invalidFiles
+    };
+  }
+  setDisabled(disabled) {
+    this.options.disabled = disabled;
+  }
+  isDisabled() {
+    return this.options.disabled;
+  }
+}

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

@@ -0,0 +1,145 @@
+import { FILE_INPUT_CLASS_NAMES, getFileInputSizeClassName, getHintTextClassName, getLabelClassName } from './const/classNames';
+const HELP_ICON_SVG = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+  <circle cx="12" cy="12" r="10" stroke-width="2"/>
+  <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <line x1="12" y1="17" x2="12.01" y2="17" stroke-width="2" stroke-linecap="round"/>
+</svg>`;
+const SHARE_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="none" class="ncua-btn__icon">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>`;
+export class FileInputView {
+  constructor(options) {
+    this.options = options;
+    this.element = this.createElement();
+    this.fileInputElement = this.element.querySelector('input[type="file"]');
+    this.buttonElement = this.element.querySelector('button');
+  }
+  /**
+   * 메인 DOM 요소 생성
+   */
+  createElement() {
+    const container = document.createElement('div');
+    const baseClasses = `${FILE_INPUT_CLASS_NAMES.fileInput} ${getFileInputSizeClassName(this.options.size)}`;
+    const customClasses = this.options.className ? ` ${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());
+    }
+    return container;
+  }
+  /**
+   * Hidden file input 생성
+   */
+  createFileInput() {
+    const 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;
+    }
+    return input;
+  }
+  /**
+   * Input container 생성
+   */
+  createInputContainer() {
+    const 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 생성
+   */
+  createLabelContainer() {
+    const container = document.createElement('div');
+    container.className = FILE_INPUT_CLASS_NAMES.label;
+    const 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 생성
+   */
+  createHelpIcon() {
+    const iconContainer = document.createElement('span');
+    iconContainer.className = FILE_INPUT_CLASS_NAMES.helpIcon;
+    iconContainer.innerHTML = HELP_ICON_SVG;
+    return iconContainer;
+  }
+  createButton() {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = `ncua-btn ncua-btn--${this.options.size} ncua-btn--secondary-gray`;
+    button.disabled = this.options.disabled;
+    button.insertAdjacentHTML('beforeend', SHARE_ICON_SVG);
+    const label = document.createElement('span');
+    label.className = 'ncua-btn__label';
+    label.textContent = this.options.buttonLabel;
+    button.appendChild(label);
+    return button;
+  }
+  /**
+   * Hint text 생성
+   */
+  createHintText() {
+    const hintText = document.createElement('div');
+    hintText.className = getHintTextClassName(this.options.destructive);
+    hintText.textContent = this.options.hintText;
+    return hintText;
+  }
+  /**
+   * Hint list 생성
+   */
+  createHintList() {
+    const ul = document.createElement('ul');
+    ul.className = FILE_INPUT_CLASS_NAMES.hintList;
+    this.options.hintItems?.forEach(hint => {
+      const li = document.createElement('li');
+      li.className = FILE_INPUT_CLASS_NAMES.hintItem;
+      li.textContent = hint;
+      ul.appendChild(li);
+    });
+    return ul;
+  }
+  setButtonDisabled(disabled) {
+    this.buttonElement.disabled = disabled;
+  }
+  getElement() {
+    return this.element;
+  }
+  getFileInputElement() {
+    return this.fileInputElement;
+  }
+  getButtonElement() {
+    return this.buttonElement;
+  }
+  destroy() {
+    // View 리소스 정리 - 이벤트 리스너는 FileInput에서 관리
+  }
+}

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

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

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

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