@ncds/ui-admin 1.6.4 → 1.7.0

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

@@ -0,0 +1,186 @@
+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 };

package/dist/{types/assets/scripts/fileInput/FileInputModel.d.ts → temp/assets/scripts/imageFileInput/ImageFileInputModel.d.ts}

@@ -1,15 +1,15 @@
-import { BaseFileInputOptions, InvalidFile, RequiredFileInputProps, UploadedFile } from './const/types';
-export declare class FileInputModel {
+import { BaseImageFileInputOptions, InvalidFile, RequiredImageFileInputProps, UploadedFile } from './const/types';
+export declare class ImageFileInputModel {
     private options;
     private internalFiles;
     private initialFiles;
     private newlyAddedFiles;
     private deletedInitialFiles;
-    constructor(options: BaseFileInputOptions);
+    constructor(options: BaseImageFileInputOptions);
     /**
      * 옵션 반환
      */
-    getOptions(): RequiredFileInputProps;
+    getOptions(): RequiredImageFileInputProps;
     /**
      * 현재 파일 목록 반환 (초기 파일 + 새로 추가된 파일, 삭제 표시된 파일 제외)
      */
@@ -66,5 +66,8 @@ export declare class FileInputModel {
      * 파일이 삭제 표시된 초기 파일인지 확인
      */
     isDeletedInitialFile(file: File): boolean;
+    /**
+     * 초기 파일의 이미지 URL 반환
+     */
+    getInitialFileImageUrl(file: File): string | undefined;
 }
-//# sourceMappingURL=FileInputModel.d.ts.map

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

@@ -0,0 +1,234 @@
+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();
+        for (var _i = 0, fileList_1 = fileList; _i < fileList_1.length; _i++) {
+            var file = fileList_1[_i];
+            // 파일 크기 체크
+            if (this.options.maxFileSize && file.size > this.options.maxFileSize) {
+                invalidFiles.push(__assign(__assign({}, file), { errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE }));
+                continue;
+            }
+            // 파일 개수 체크 (maxFileCount가 1이면 교체 가능하므로 체크하지 않음)
+            if (this.options.maxFileCount &&
+                this.options.maxFileCount !== 1 &&
+                currentFiles.length + validFiles.length >= this.options.maxFileCount) {
+                invalidFiles.push(__assign(__assign({}, file), { errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT }));
+                continue;
+            }
+            validFiles.push(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/{types/assets/scripts/fileInput/FileInputView.d.ts → temp/assets/scripts/imageFileInput/ImageFileInputView.d.ts}

@@ -1,15 +1,15 @@
-import { RequiredFileInputProps } from './const/types';
-import { FileInputModel } from './FileInputModel';
-export declare class FileInputView {
+import { RequiredImageFileInputProps } from './const/types';
+import { ImageFileInputModel } from './ImageFileInputModel';
+export declare class ImageFileInputView {
     private element;
     private fileInputElement;
     private buttonElement;
-    private fileTagsContainer;
-    private tagInstances;
+    private previewsContainer;
     private options;
     private model;
     private renderedFiles;
-    constructor(options: RequiredFileInputProps, model: FileInputModel);
+    private previewUrls;
+    constructor(options: RequiredImageFileInputProps, model: ImageFileInputModel);
     /**
      * 메인 DOM 요소 생성
      */
@@ -30,48 +30,50 @@ export declare class FileInputView {
      * Help icon 생성
      */
     private createHelpIcon;
+    /**
+     * Button 생성 (파일 찾기)
+     */
     private createButton;
+    /**
+     * Share icon (업로드 아이콘) 생성
+     */
     private createShareIcon;
+    /**
+     * Trash icon (삭제 아이콘) 생성
+     */
+    private createTrashIcon;
     /**
      * Hint text 생성
      */
     private createHintText;
     /**
      * Hint list 생성
+     * Note: 힌트 리스트는 컴포넌트 size와 관계없이 항상 xs 사이즈로 고정됨
      */
     private createHintList;
     /**
-     * 파일 태그 렌더링 (삭제 표시된 초기 파일 포함)
-     */
-    renderFileTags(files: File[], onRemove: (index: number) => void): void;
-    /**
-     * 삭제 표시된 초기 파일을 포함한 전체 파일 목록 반환
-     */
-    private getAllFilesIncludingDeleted;
-    /**
-     * 두 파일이 같은 파일인지 확인
+     * 이미지 프리뷰 렌더링
      */
-    private isSameFile;
+    renderImagePreviews(files: File[], onRemove: (index: number) => void, onBrowseClick: () => void): void;
     /**
-     * 특정 인덱스에 파일 태그 삽입
+     * 이미지 프리뷰 생성
      */
-    private insertFileTagAtIndex;
+    private createImagePreview;
     /**
-     * 파일 태그 생성 (마지막에 추가)
+     * 빈 슬롯 생성 (파일 찾기 버튼)
      */
-    private createFileTag;
+    private createEmptySlot;
     /**
-     * 파일 태그 컨테이너 생성
+     * Tooltip 생성
      */
-    private createFileTagContainer;
+    private createTooltip;
     /**
-     * 파일 인덱스 업데이트
+     * 기존 프리뷰 정리
      */
-    private updateFileIndices;
+    private cleanupPreviews;
     setButtonDisabled(disabled: boolean): void;
     getElement(): HTMLDivElement;
     getFileInputElement(): HTMLInputElement;
     getButtonElement(): HTMLButtonElement;
     destroy(): void;
 }
-//# sourceMappingURL=FileInputView.d.ts.map