@ncds/ui-admin 1.6.4 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.6.4",
+  "version": "1.7.0",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -10,14 +10,14 @@
     "build:playground:css": "sass assets/styles/style.scss dist/style.css --style=compressed",
     "watch:playground:css": "sass assets/styles/style.scss dist/style.css --style=compressed --watch",
     "dev": "webpack serve --node-env development --open --hot",
-    "dev:html": "yarn build:playground:css && webpack serve --node-env development --open --config webpack.html.config.js",
+    "dev:html": "pnpm run build:playground:css && webpack serve --node-env development --open --config webpack.html.config.js",
     "lint": "eslint src/**/*.tsx src/**/*.ts",
-    "major": "yarn version --major",
-    "minor": "yarn version --minor",
-    "patch": "yarn version --patch",
-    "prestart": "cross-env NODE_ENV=production yarn run build",
-    "publish:npm": "yarn build:npm && npm publish --access=public",
-    "publish:cdn": "yarn build:cdn && node scripts/publish-cdn.js",
+    "major": "pnpm version major",
+    "minor": "pnpm version minor",
+    "patch": "pnpm version patch",
+    "prestart": "cross-env NODE_ENV=production pnpm run build",
+    "publish:npm": "pnpm run build:npm && npm publish --access=public",
+    "publish:cdn": "pnpm run build:cdn && node scripts/publish-cdn.js",
     "start": "webpack --node-env development",
     "tsc": "tsc --pretty --listFiles"
   },
@@ -63,57 +63,53 @@
   },
   "private": false,
   "dependencies": {
-    "@ncds/types-common": "^1.0.0",
-    "@ncds/types-layout": "^1.0.0",
     "@ncds/ui-admin-icon": "0.1.6",
-    "classnames": "^2.3.2",
+    "classnames": "2.5.1",
     "flatpickr": "4.6.13",
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
-    "moment": "^2.30.1",
-    "react-flatpickr": "^4.0.10",
-    "swiper": "^11.1.1"
+    "lodash": "4.17.23",
+    "lodash-es": "4.17.23",
+    "moment": "2.30.1",
+    "react-flatpickr": "4.0.11",
+    "swiper": "11.2.10"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.9",
-    "@babel/core": "^7.22.9",
-    "@babel/preset-env": "^7.22.9",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@ncds/cdn-manager": "*",
-    "@types/node": "^20.4.5",
-    "@types/react": "^18.2.18",
-    "@types/react-dom": "^18.2.7",
-    "@types/react-flatpickr": "^3.8.11",
-    "babel-loader": "^9.1.3",
-    "babel-plugin-named-exports-order": "^0.0.2",
-    "const": "*",
-    "copy-webpack-plugin": "^11.0.0",
-    "cross-env": "^7.0.3",
-    "css-loader": "^6.8.1",
-    "css-minimizer-webpack-plugin": "^7.0.2",
-    "dotenv-webpack": "^8.0.1",
-    "esbuild-loader": "^3.1.0",
-    "eslint": "^7.32.0",
-    "eslint-config-custom": "*",
-    "eslint-config-react-app": "^7.0.1",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.5.3",
-    "mini-css-extract-plugin": "^2.7.6",
-    "prop-types": "^15.8.1",
+    "@babel/cli": "7.28.6",
+    "@babel/core": "7.29.0",
+    "@babel/preset-env": "7.29.2",
+    "@babel/preset-react": "7.28.5",
+    "@babel/preset-typescript": "7.28.5",
+    "@ncds/cdn-manager": "workspace:*",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "20.15.0",
+    "@types/react": "18.3.28",
+    "@types/react-dom": "18.3.7",
+    "@types/react-flatpickr": "3.8.11",
+    "babel-loader": "9.2.1",
+    "babel-plugin-named-exports-order": "0.0.2",
+    "copy-webpack-plugin": "11.0.0",
+    "cross-env": "7.0.3",
+    "css-loader": "6.11.0",
+    "css-minimizer-webpack-plugin": "7.0.4",
+    "dotenv-webpack": "8.1.1",
+    "esbuild-loader": "3.2.0",
+    "eslint": "7.32.0",
+    "eslint-config-react-app": "7.0.1",
+    "file-loader": "6.2.0",
+    "html-webpack-plugin": "5.6.6",
+    "mini-css-extract-plugin": "2.10.1",
+    "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.46.2",
-    "react-scripts": "^5.0.1",
-    "sass": "^1.86.3",
-    "sass-loader": "^13.3.2",
-    "style-loader": "^3.3.3",
-    "ts-loader": "^9.4.4",
-    "ts-node": "^10.9.2",
-    "tsconfig": "*",
+    "react-hook-form": "7.72.0",
+    "react-scripts": "5.0.1",
+    "sass": "1.98.0",
+    "sass-loader": "13.3.3",
+    "style-loader": "3.3.4",
+    "ts-loader": "9.5.4",
+    "ts-node": "10.9.2",
     "typescript": "5.0.4",
-    "webpack": "^5.88.2",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack": "5.105.4",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "4.15.2"
   }
 }

package/dist/cjs/assets/scripts/fileInput/FileInput.js

@@ -1,183 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FileInput = void 0;
-var _FileInputModel = require("./FileInputModel");
-var _FileInputView = require("./FileInputView");
-var FileInput = exports.FileInput = /** @class */function () {
-  function FileInput(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) {
-        // 콜백을 통해 선택된 파일 정보 전달
-        if (_this.model.isControlled()) {
-          (_a = options.onChange) === null || _a === void 0 ? void 0 : _a.call(options, validFiles);
-        } else {
-          (_b = options.onFileSelect) === null || _b === void 0 ? void 0 : _b.call(options, validFiles);
-        }
-      }
-      // 유효하지 않은 파일 처리
-      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 = '';
-    };
-    /**
-     * 파일 제거 핸들러
-     * 주의: 이 메서드는 renderFileTags에서 사용되지만,
-     * 파일 선택 시 자동 렌더링이 비활성화되어 있으므로 수동으로 호출해야 함
-     */
-    this.handleRemoveFile = function (index) {
-      _this.model.removeFile(index);
-      _this.notifyChange();
-    };
-    this.model = new _FileInputModel.FileInputModel(options);
-    this.view = new _FileInputView.FileInputView(this.model.getOptions(), this.model);
-    this.setupEventListeners();
-    // 파일 선택 시 자동 렌더링은 제거됨 - 사용자가 콜백에서 직접 처리
-    // 컨테이너가 지정되면 자동으로 추가
-    if (options.container) {
-      this.appendToContainer(options.container);
-    }
-  }
-  /**
-   * 컨테이너에 요소 추가
-   */
-  FileInput.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("FileInput: Container not found:", container);
-    }
-  };
-  /**
-   * 이벤트 리스너 설정
-   */
-  FileInput.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 호출)
-   * 주의: 이 메서드는 setFiles 등 내부적으로 파일 목록이 변경될 때만 사용됨
-   */
-  FileInput.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);
-    } else {
-      // Uncontrolled mode: onFileSelect 호출 및 렌더링
-      (_b = options.onFileSelect) === null || _b === void 0 ? void 0 : _b.call(options, files);
-      this.render();
-    }
-  };
-  /**
-   * 뷰 렌더링 (내부용)
-   */
-  FileInput.prototype.render = function () {
-    var files = this.model.getFiles();
-    this.view.renderFileTags(files, this.handleRemoveFile);
-  };
-  // Public API
-  /**
-   * 파일 태그를 수동으로 렌더링
-   * 사용자가 콜백에서 직접 호출하여 태그를 렌더링할 수 있음
-   */
-  FileInput.prototype.renderFileTags = function () {
-    this.render();
-  };
-  /**
-   * DOM 요소 반환
-   */
-  FileInput.prototype.getElement = function () {
-    return this.view.getElement();
-  };
-  /**
-   * 현재 파일 목록 반환
-   */
-  FileInput.prototype.getFiles = function () {
-    return this.model.getFiles();
-  };
-  /**
-   * 초기 업로드된 파일 목록 설정
-   */
-  FileInput.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();
-    }
-  };
-  /**
-   * 모든 파일 제거
-   */
-  FileInput.prototype.clearFiles = function () {
-    this.model.clearFiles();
-    this.notifyChange();
-  };
-  /**
-   * disabled 상태 설정
-   */
-  FileInput.prototype.setDisabled = function (disabled) {
-    this.model.setDisabled(disabled);
-    this.view.setButtonDisabled(disabled);
-  };
-  /**
-   * 리소스 정리
-   */
-  FileInput.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 FileInput;
-}();

package/dist/cjs/assets/scripts/fileInput/FileInputModel.js

@@ -1,246 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FileInputModel = void 0;
-var _types = require("./const/types");
-var __assign = void 0 && (void 0).__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 = void 0 && (void 0).__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));
-};
-var FileInputModel = exports.FileInputModel = /** @class */function () {
-  function FileInputModel(options) {
-    this.internalFiles = [];
-    this.initialFiles = []; // 초기 파일 목록 (렌더링 시점의 파일)
-    this.newlyAddedFiles = new Set(); // 새로 추가된 파일 추적
-    this.deletedInitialFiles = new Set(); // 삭제 표시된 초기 파일들 (파일명으로 추적)
-    this.options = __assign({
-      size: 'xs',
-      multiple: false,
-      buttonLabel: '파일 찾기',
-      disabled: false,
-      showImagePreview: false
-    }, options);
-    // 초기 파일 설정
-    if (this.options.value && this.options.value.length > 0) {
-      this.internalFiles = __spreadArray([], this.options.value, true);
-      // value로 들어온 File[]은 새로 추가된 파일로 처리 (initialFiles는 별도로 setFiles(UploadedFile[])로 설정)
-    }
-  }
-  /**
-   * 옵션 반환
-   */
-  FileInputModel.prototype.getOptions = function () {
-    return this.options;
-  };
-  /**
-   * 현재 파일 목록 반환 (초기 파일 + 새로 추가된 파일, 삭제 표시된 파일 제외)
-   */
-  FileInputModel.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 타입 추론
-   */
-  FileInputModel.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',
-      pdf: 'application/pdf',
-      txt: 'text/plain',
-      doc: 'application/msword',
-      docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-      xls: 'application/vnd.ms-excel',
-      xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-    };
-    return mimeTypes[extension || ''] || 'application/octet-stream';
-  };
-  /**
-   * 초기 업로드된 파일 목록 설정 (UploadedFile[] 타입만 허용)
-   */
-  FileInputModel.prototype.setFiles = function (uploadedFiles) {
-    this.initialFiles = __spreadArray([], uploadedFiles, true);
-  };
-  /**
-   * 파일 추가
-   */
-  FileInputModel.prototype.addFiles = function (files) {
-    var _this = this;
-    // 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);
-    });
-    // addFiles에서는 initialFiles 로직을 건드리지 않고 직접 설정
-    var isControlled = this.options.value !== undefined;
-    if (isControlled) {
-      this.options.value = newFiles;
-    } else {
-      this.internalFiles = newFiles;
-    }
-  };
-  /**
-   * 특정 인덱스의 파일 제거
-   */
-  FileInputModel.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;
-      }
-    }
-  };
-  /**
-   * 모든 파일 제거
-   */
-  FileInputModel.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 = [];
-    }
-  };
-  /**
-   * 파일 유효성 검사
-   */
-  FileInputModel.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: _types.FileInputErrorType.ALREADY_UPLOADED
-        }));
-        return "continue";
-      }
-      // 파일 크기 체크
-      if (this_1.options.maxFileSize && file.size > this_1.options.maxFileSize) {
-        invalidFiles.push(__assign(__assign({}, file), {
-          errorType: _types.FileInputErrorType.EXCEED_MAX_FILE_SIZE
-        }));
-        return "continue";
-      }
-      // 파일 개수 체크
-      if (this_1.options.maxFileCount && currentFiles.length + validFiles.length >= this_1.options.maxFileCount) {
-        invalidFiles.push(__assign(__assign({}, file), {
-          errorType: _types.FileInputErrorType.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 상태 설정
-   */
-  FileInputModel.prototype.setDisabled = function (disabled) {
-    this.options.disabled = disabled;
-  };
-  /**
-   * disabled 상태 반환
-   */
-  FileInputModel.prototype.isDisabled = function () {
-    return this.options.disabled;
-  };
-  /**
-   * Controlled mode 여부 확인
-   * onChange가 있으면 Controlled mode로 판단
-   */
-  FileInputModel.prototype.isControlled = function () {
-    return this.options.onChange !== undefined;
-  };
-  /**
-   * 파일이 초기 파일인지 확인 (UploadedFile로 설정된 기존 파일)
-   */
-  FileInputModel.prototype.isInitialFile = function (file) {
-    return this.initialFiles.some(function (uploadedFile) {
-      return uploadedFile.fileName === file.name;
-    });
-  };
-  /**
-   * 파일이 새로 추가된 파일인지 확인
-   */
-  FileInputModel.prototype.isNewlyAddedFile = function (file) {
-    return this.newlyAddedFiles.has(file);
-  };
-  /**
-   * 파일이 삭제 표시된 초기 파일인지 확인
-   */
-  FileInputModel.prototype.isDeletedInitialFile = function (file) {
-    return this.deletedInitialFiles.has(file.name);
-  };
-  return FileInputModel;
-}();