@ncds/ui-admin 1.4.1 → 1.5.0

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

@@ -245,6 +245,19 @@ export var DatePicker = /** @class */function () {
       if (formattedInput === input) return;
       target.value = formattedInput;
     };
+    // 외부 클릭 시 시간 입력 강제 blur 처리
+    var handleMouseDown = function (e) {
+      var flatpickrCalendar = wrapper.querySelector('.flatpickr-calendar.open');
+      if (flatpickrCalendar && !flatpickrCalendar.contains(e.target)) {
+        var timeInputs = flatpickrCalendar.querySelectorAll('.flatpickr-time input');
+        timeInputs.forEach(function (input) {
+          if (document.activeElement === input) {
+            input.blur();
+          }
+        });
+      }
+    };
+    document.addEventListener('mousedown', handleMouseDown, true);
     return flatpickr(input, __assign(__assign({}, options), {
       allowInput: (_b = options.allowInput) !== null && _b !== void 0 ? _b : true,
       appendTo: wrapper,
@@ -271,6 +284,7 @@ export var DatePicker = /** @class */function () {
         input.removeEventListener('input', onInputHandler);
         input.removeEventListener('input', onHourInputHandler);
         input.removeEventListener('input', onMinuteInputHandler);
+        document.removeEventListener('mousedown', handleMouseDown, true);
       }
     }));
   };
@@ -329,19 +343,58 @@ export var DatePicker = /** @class */function () {
     var startDate = dates[0],
       endDate = dates[1];
     var datesToSet = this.datePickerOptions.map(function (option, index) {
-      var _a;
+      var _a, _b;
       var date = index === 0 ? startDate : endDate;
-      if (!date) return '';
+      if (!date || date === '0000-00-00') return '';
       var hasTime = (_a = option.options) === null || _a === void 0 ? void 0 : _a.enableTime;
-      if (!hasTime) return date;
-      if (date.includes(':')) return date;
-      var momentDate = moment(date);
-      return index === 0 ? momentDate.startOf('day').format(_this.dateFormat) : momentDate.endOf('day').format(_this.dateFormat);
+      var flatpickrFormat = ((_b = option.options) === null || _b === void 0 ? void 0 : _b.dateFormat) || (hasTime ? 'Y-m-d H:i' : 'Y-m-d');
+      // dateFormat이 설정되어 있지 않을 때만 hasTime에 따라 기본값 설정
+      // dateFormat이 설정되어 있으면 그 형식을 그대로 사용 (enableTime과 무관하게)
+      var momentFormat = _this.convertFlatpickrFormatToMoment(flatpickrFormat);
+      var momentDate;
+      if (hasTime && !date.includes(':')) {
+        // 시간이 없는 날짜 형식으로 파싱
+        momentDate = moment(date);
+        if (!momentDate.isValid()) return '';
+        return index === 0 ? momentDate.startOf('day').format(momentFormat) : momentDate.endOf('day').format(momentFormat);
+      }
+      if (hasTime && date.includes(':')) {
+        momentDate = moment(date);
+        if (!momentDate.isValid()) return '';
+        return momentDate.format(momentFormat);
+      }
+      // 시간이 없는 경우 (hasTime이 false이거나 date에 시간이 없는 경우)
+      momentDate = moment(date);
+      if (!momentDate.isValid()) {
+        momentDate = moment(date, momentFormat, true);
+      }
+      // 둘 다 실패하면 다른 일반적인 형식들로 시도
+      if (!momentDate.isValid()) {
+        momentDate = moment(date, [momentFormat, 'YYYY-MM-DD', 'YYYY/MM/DD', 'MM/DD/YYYY'], true);
+      }
+      if (!momentDate.isValid()) return '';
+      // dateFormat 형식으로 포맷팅하여 반환 (flatpickr가 표시하는 형식과 일치)
+      return momentDate.format(momentFormat);
     });
-    var period = moment(endDate).diff(moment(startDate), 'days');
+    var period = datesToSet[0] && datesToSet[1] ? moment(datesToSet[1]).diff(moment(datesToSet[0]), 'days') : null;
     this.updateButtonsByPeriod(period);
     this.setMultipleDates(datesToSet);
   };
+  // flatpickr 형식을 moment 형식으로 변환하는 헬퍼 메서드
+  DatePicker.prototype.convertFlatpickrFormatToMoment = function (flatpickrFormat) {
+    var map = {
+      Y: 'YYYY',
+      y: 'YY',
+      m: 'MM',
+      d: 'DD',
+      H: 'HH',
+      i: 'mm',
+      S: 'ss'
+    };
+    return flatpickrFormat.replace(/[YymdHiS]/g, function (matched) {
+      return map[matched] || matched;
+    });
+  };
   DatePicker.prototype.getDates = function () {
     var _this = this;
     return this.flatpickrInstances.map(function (instance) {

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

@@ -174,36 +174,23 @@ var ImageFileInputModel = /** @class */function () {
     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";
-      }
+    for (var _i = 0, fileList_1 = fileList; _i < fileList_1.length; _i++) {
+      var file = fileList_1[_i];
       // 파일 크기 체크
-      if (this_1.options.maxFileSize && file.size > this_1.options.maxFileSize) {
+      if (this.options.maxFileSize && file.size > this.options.maxFileSize) {
         invalidFiles.push(__assign(__assign({}, file), {
           errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE
         }));
-        return "continue";
+        continue;
       }
       // 파일 개수 체크 (maxFileCount가 1이면 교체 가능하므로 체크하지 않음)
-      if (this_1.options.maxFileCount && this_1.options.maxFileCount !== 1 && currentFiles.length + validFiles.length >= this_1.options.maxFileCount) {
+      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
         }));
-        return "continue";
+        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,

package/dist/esm/assets/scripts/notification/MessageNotification.js

@@ -0,0 +1,141 @@
+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);
+};
+import { SVG_ICONS, CLASS_NAMES, FLOATING_ICON_MAP, MESSAGE_SIZES } from './const';
+import { FeaturedIcon } from '../featuredIcon';
+import { createWrapperElement, renderSupportingText, renderActions, bindNotificationEvents, setupAutoClose } from './utils';
+var MessageNotification = /** @class */function () {
+  function MessageNotification(options) {
+    this.options = __assign({
+      color: 'neutral',
+      className: '',
+      actions: [],
+      autoClose: 0,
+      supportingText: undefined
+    }, options);
+    this.element = this.createElement();
+    this.bindEvents();
+    this.setupAutoClose();
+  }
+  MessageNotification.prototype.createElement = function () {
+    var _a = this.options,
+      title = _a.title,
+      supportingText = _a.supportingText,
+      color = _a.color,
+      className = _a.className,
+      actions = _a.actions,
+      onClose = _a.onClose,
+      onHidePermanently = _a.onHidePermanently;
+    // message 타입은 neutral, error, warning, success 4가지 색상만 지원
+    var actualColor = color;
+    if (color === 'info') {
+      console.warn('Message notification does not support "info" color. Using "neutral" instead.');
+      actualColor = 'neutral';
+    }
+    var wrapper = createWrapperElement(CLASS_NAMES.MESSAGE.BASE, actualColor, className);
+    var iconFunction = FLOATING_ICON_MAP[actualColor];
+    // FeaturedIcon 생성
+    var featuredIconElement = null;
+    if (iconFunction) {
+      var iconSvg = iconFunction(MESSAGE_SIZES.ICON_PIXEL);
+      this.featuredIcon = FeaturedIcon.create({
+        svgString: iconSvg,
+        theme: 'light-circle',
+        color: actualColor,
+        size: MESSAGE_SIZES.FEATURED_ICON
+      });
+      featuredIconElement = this.featuredIcon.getElement();
+    }
+    wrapper.innerHTML = this.buildTemplate({
+      title: title,
+      supportingText: supportingText,
+      actions: actions,
+      onClose: onClose,
+      onHidePermanently: onHidePermanently
+    });
+    // FeaturedIcon을 content-wrapper에 추가
+    if (featuredIconElement) {
+      var contentWrapper = wrapper.querySelector(".".concat(CLASS_NAMES.MESSAGE.CONTENT_WRAPPER));
+      if (contentWrapper) {
+        contentWrapper.insertBefore(featuredIconElement, contentWrapper.firstChild);
+      }
+    }
+    return wrapper;
+  };
+  MessageNotification.prototype.buildTemplate = function (params) {
+    var title = params.title,
+      supportingText = params.supportingText,
+      actions = params.actions,
+      onClose = params.onClose,
+      onHidePermanently = params.onHidePermanently;
+    return "\n      <div class=\"".concat(CLASS_NAMES.MESSAGE.CONTAINER, "\">\n        <div class=\"").concat(CLASS_NAMES.MESSAGE.CONTENT, "\">\n          <div class=\"").concat(CLASS_NAMES.MESSAGE.CONTENT_WRAPPER, "\">\n            <div class=\"").concat(CLASS_NAMES.MESSAGE.TEXT_CONTAINER, "\">\n              <span class=\"").concat(CLASS_NAMES.MESSAGE.TITLE, "\">").concat(title, "</span>\n              ").concat(renderSupportingText(supportingText, CLASS_NAMES.MESSAGE.SUPPORTING_TEXT), "\n            </div>\n          </div>\n          <div class=\"").concat(CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER, "\">\n            ").concat(actions && actions.length > 0 ? renderActions(actions, CLASS_NAMES.MESSAGE.ACTIONS) : '', "\n          </div>\n          <div class=\"").concat(CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER, "\">\n            ").concat(this.renderHidePermanentlyButton(onHidePermanently), "\n            ").concat(this.renderCloseButton(onClose), "\n          </div>\n        </div>\n      </div>\n    ");
+  };
+  MessageNotification.prototype.renderHidePermanentlyButton = function (onHidePermanently) {
+    if (!onHidePermanently) return '';
+    return "\n      <button type=\"button\" class=\"".concat(CLASS_NAMES.COMMON.ACTION_BUTTON, " ").concat(CLASS_NAMES.COMMON.ACTION_BUTTON, "--text ").concat(CLASS_NAMES.MESSAGE.HIDE_LINK, "\" data-hide-permanently=\"true\">\n        \uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30\n      </button>\n    ");
+  };
+  MessageNotification.prototype.renderCloseButton = function (onClose) {
+    if (!onClose) return '';
+    return "\n      <button type=\"button\" class=\"".concat(CLASS_NAMES.MESSAGE.CLOSE_BUTTON, "\" aria-label=\"\uC54C\uB9BC \uB2EB\uAE30\">\n        ").concat(SVG_ICONS['x-close'](MESSAGE_SIZES.CLOSE_BUTTON).replace('stroke="currentColor"', "stroke=\"#2F2F30\""), "\n      </button>\n    ");
+  };
+  MessageNotification.prototype.bindEvents = function () {
+    var _this = this;
+    bindNotificationEvents(this.element, this.options.actions, this.options.onClose, function () {
+      return _this.remove();
+    });
+    // 다시보지 않기 버튼 이벤트 바인딩
+    if (this.options.onHidePermanently) {
+      var hidePermanentlyButton = this.element.querySelector('[data-hide-permanently="true"]');
+      if (hidePermanentlyButton) {
+        hidePermanentlyButton.addEventListener('click', function () {
+          var _a, _b;
+          (_b = (_a = _this.options).onHidePermanently) === null || _b === void 0 ? void 0 : _b.call(_a);
+          _this.remove();
+        });
+      }
+    }
+  };
+  MessageNotification.prototype.setupAutoClose = function () {
+    var _this = this;
+    this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, function () {
+      return _this.remove();
+    });
+  };
+  // Public methods
+  MessageNotification.prototype.getElement = function () {
+    return this.element;
+  };
+  MessageNotification.prototype.appendTo = function (parent) {
+    parent.appendChild(this.element);
+  };
+  MessageNotification.prototype.remove = function () {
+    if (this.autoCloseTimer) {
+      clearTimeout(this.autoCloseTimer);
+      this.autoCloseTimer = undefined;
+    }
+    if (this.element && this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+  };
+  MessageNotification.prototype.destroy = function () {
+    // FeaturedIcon 정리
+    if (this.featuredIcon) {
+      this.featuredIcon.destroy();
+      this.featuredIcon = undefined;
+    }
+    this.remove();
+  };
+  // Static factory methods
+  MessageNotification.create = function (options) {
+    return new MessageNotification(options);
+  };
+  return MessageNotification;
+}();
+export { MessageNotification };

package/dist/esm/assets/scripts/notification/Notification.js

@@ -18,16 +18,19 @@ var __rest = this && this.__rest || function (s, e) {
 };
 import { FullWidthNotification } from './FullWidthNotification';
 import { FloatingNotification } from './FloatingNotification';
+import { MessageNotification } from './MessageNotification';
 // 통합 Notification 클래스
 var Notification = /** @class */function () {
   function Notification(options) {
     var _a = options.type,
       type = _a === void 0 ? 'floating' : _a,
       baseOptions = __rest(options, ["type"]);
-    if (type === 'floating') {
-      this.instance = new FloatingNotification(baseOptions);
-    } else {
+    if (type === 'message') {
+      this.instance = new MessageNotification(baseOptions);
+    } else if (type === 'full-width') {
       this.instance = new FullWidthNotification(baseOptions);
+    } else {
+      this.instance = new FloatingNotification(baseOptions);
     }
   }
   // 모든 메서드를 instance에 위임

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

@@ -24,6 +24,20 @@ export var CLASS_NAMES = {
     ACTIONS: 'ncua-floating-notification__actions',
     CLOSE_BUTTON: 'ncua-floating-notification__close-button'
   },
+  MESSAGE: {
+    BASE: 'ncua-message-notification',
+    CONTAINER: 'ncua-message-notification__container',
+    CONTENT: 'ncua-message-notification__content',
+    CONTENT_WRAPPER: 'ncua-message-notification__content-wrapper',
+    ICON: 'ncua-message-notification__icon',
+    TEXT_CONTAINER: 'ncua-message-notification__text-container',
+    TITLE: 'ncua-message-notification__title',
+    SUPPORTING_TEXT: 'ncua-message-notification__supporting-text',
+    ACTIONS_CONTAINER: 'ncua-message-notification__actions-container',
+    ACTIONS: 'ncua-message-notification__actions',
+    HIDE_LINK: 'ncua-message-notification__hide-link',
+    CLOSE_BUTTON: 'ncua-message-notification__close-button'
+  },
   COMMON: {
     ACTION_BUTTON: 'ncua-notification__action-button'
   }

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

@@ -1,3 +1,4 @@
 export { SVG_ICONS, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP } from './icons';
 export { CLASS_NAMES } from './classNames';
-export { FEATURED_ICON_SIZES, ICON_PIXEL_SIZES, CLOSE_BUTTON_SIZES, CLOSE_BUTTON_SVG_SIZES, FULL_WIDTH_SIZES, getSizes } from './sizes';
+export { FEATURED_ICON_SIZES, ICON_PIXEL_SIZES, CLOSE_BUTTON_SIZES, CLOSE_BUTTON_SVG_SIZES, FULL_WIDTH_SIZES, MESSAGE_SIZES, getSizes } from './sizes';
+export { MESSAGE_CLOSE_ICON_COLORS } from './types';

package/dist/esm/assets/scripts/notification/const/sizes.js

@@ -25,6 +25,12 @@ export var FULL_WIDTH_SIZES = {
   ICON: '16',
   CLOSE_BUTTON: '20'
 };
+// Message 알림 고정 사이즈
+export var MESSAGE_SIZES = {
+  FEATURED_ICON: 'lg',
+  ICON_PIXEL: '24',
+  CLOSE_BUTTON: '20'
+};
 // 사이즈 유틸리티 함수들
 export var getSizes = {
   featuredIcon: function (isMobile) {

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

@@ -1 +1,8 @@
-export {};
+// Message Notification 닫기 버튼 아이콘 색상 맵
+export var MESSAGE_CLOSE_ICON_COLORS = {
+  neutral: '#6B7280',
+  error: '#EF4444',
+  warning: '#F97316',
+  success: '#16A34A',
+  info: '#6B7280' // info는 message 타입에서 지원하지 않지만 fallback용
+};

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

@@ -1,6 +1,7 @@
 export { Notification } from './Notification';
 export { FullWidthNotification } from './FullWidthNotification';
 export { FloatingNotification } from './FloatingNotification';
+export { MessageNotification } from './MessageNotification';
 export * from './utils';
 export { SVG_ICONS, CLASS_NAMES, ICON_MAP, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP } from './const';
 // 전역 등록 ( 추후 index.ts와 개별동작 할 수 있게끔 대비 )

package/dist/esm/assets/scripts/notification/utils.js

@@ -27,7 +27,7 @@ export function renderActions(actions, wrapperClass) {
     return '';
   }
   var buttonsHtml = actions.map(function (action) {
-    var buttonHtml = "\n      <button \n        class=\"ncua-notification__action-button ncua-notification__action-button--".concat(action.hierarchy || 'link', "\"\n        data-action=\"").concat(action.label, "-").concat(action.hierarchy, "\"\n      >\n        ").concat(action.label, "\n      </button>");
+    var buttonHtml = "\n      <button \n        class=\"ncua-btn ncua-btn--sm ncua-btn--".concat(action.hierarchy || 'text', "\"\n        data-action=\"").concat(action.label, "-").concat(action.hierarchy, "\"\n      >\n        ").concat(action.label, "\n      </button>");
     return buttonHtml;
   }).join('');
   return "<div class=\"".concat(wrapperClass, "\">").concat(buttonsHtml, "</div>");
@@ -37,13 +37,13 @@ export function bindNotificationEvents(element, actions, onClose, onRemove) {
   element.addEventListener('click', function (event) {
     var target = event.target;
     // 닫기 버튼 클릭 처리
-    if (target.matches(".".concat(CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, ", .").concat(CLASS_NAMES.FLOATING.CLOSE_BUTTON)) || target.closest(".".concat(CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, ", .").concat(CLASS_NAMES.FLOATING.CLOSE_BUTTON))) {
+    if (target.matches(".".concat(CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, ", .").concat(CLASS_NAMES.FLOATING.CLOSE_BUTTON)) || target.closest(".".concat(CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, ", .").concat(CLASS_NAMES.FLOATING.CLOSE_BUTTON)) || target.closest(".".concat(CLASS_NAMES.MESSAGE.CLOSE_BUTTON))) {
       onClose === null || onClose === void 0 ? void 0 : onClose();
       onRemove === null || onRemove === void 0 ? void 0 : onRemove();
       return;
     }
     // 액션 버튼 클릭 처리
-    var actionButton = target.closest('.ncua-notification__action-button[data-action]');
+    var actionButton = target.closest('.ncua-btn[data-action]');
     if (actionButton && actions) {
       var actionData = actionButton.getAttribute('data-action');
       if (actionData) {

package/dist/esm/assets/scripts/utils/selectbox/DropdownModel.js

@@ -284,6 +284,13 @@ var DropdownModel = /** @class */function () {
     this.updateFilteredOptions();
     this.notifyListeners(['searchValue', 'filteredOptions', 'showAllItems']);
   };
+  /**
+   * 검색어만 업데이트 (필터링 없이, API 모드용)
+   */
+  DropdownModel.prototype.updateSearchValue = function (searchValue) {
+    this.state.searchValue = searchValue;
+    this.notifyListeners(['searchValue']);
+  };
   /**
    * 드롭다운이 열릴 수 있는지 확인 (ComboBox용)
    */

package/dist/esm/assets/scripts/utils/selectbox/UnifiedSelectBox.js

@@ -336,30 +336,27 @@ var UnifiedSelectBox = /** @class */function () {
     };
     this.controller = new SelectBoxController(controllerConfig);
   };
-  // 이벤트 핸들러들
-  UnifiedSelectBox.prototype.handleInput = function (value) {
-    var _this = this;
-    var _a, _b;
-    // 기존 디바운스 타이머 제거
+  /**
+   * 디바운싱 타이머 취소
+   */
+  UnifiedSelectBox.prototype.cancelDebounceTimer = function () {
     if (this.searchDebounceTimer) {
       clearTimeout(this.searchDebounceTimer);
       this.searchDebounceTimer = undefined;
+      this.currentDebounceTimerId = undefined;
     }
+  };
+  // 이벤트 핸들러들
+  UnifiedSelectBox.prototype.handleInput = function (value) {
+    var _this = this;
+    var _a, _b;
+    this.cancelDebounceTimer();
     // 필터링은 즉시 업데이트 (사용자가 입력하는 동안 필터링 결과를 즉시 보여줌)
     // 하지만 onSearch 콜백은 디바운싱 적용
     var isApiMode = this.config.type === 'combobox' && !this.hasInitialOptions;
-    if (isApiMode) {
-      // 텍스트가 변경되었거나 비워졌으면 즉시 옵션 완전히 제거
-      if (this.lastSearchValue !== value) {
-        if (!value.trim()) {
-          // 검색어가 비워졌으면 옵션 완전히 비우기
-          this.model.updateOptions([]);
-        } else {
-          // 검색어가 변경되었으면 이전 옵션 즉시 제거
-          this.model.updateOptions([]);
-        }
-        this.lastSearchValue = value;
-      }
+    // API 모드에서는 검색어 변경 추적만 하고, 옵션은 디바운싱 후 비우기
+    if (isApiMode && this.lastSearchValue !== value) {
+      this.lastSearchValue = value;
     }
     // 디바운싱이 설정되어 있으면 입력이 멈춘 후 onSearch 콜백만 실행
     if (this.config.searchDebounceMs > 0) {
@@ -367,26 +364,40 @@ var UnifiedSelectBox = /** @class */function () {
       var timerId_1 = Date.now() + Math.random();
       this.currentDebounceTimerId = timerId_1;
       this.searchDebounceTimer = window.setTimeout(function () {
-        var _a, _b;
-        // 타이머가 취소되었는지 확인 (다른 타이머가 시작되었으면 현재 타이머는 무시)
-        if (_this.currentDebounceTimerId !== timerId_1) {
-          return; // 이 타이머는 취소되었으므로 실행하지 않음
-        }
-        // 타이머가 여전히 유효하면 실행
-        _this.searchDebounceTimer = undefined;
-        _this.currentDebounceTimerId = undefined;
-        // API 모드인 경우 필터링 업데이트 (디바운싱 후 실행)
-        if (isApiMode) {
-          _this.model.updateSearchAndFilter(value);
-        }
-        // 텍스트가 있을 때만 드롭다운 열기
-        if (value.trim()) {
-          _this.controller.open();
-        } else if (!_this.model.getState().showAllItems) {
-          _this.controller.close();
-        }
-        // onSearch 콜백 호출 (디바운싱 적용, 최종 타이머만 실행)
-        (_b = (_a = _this.config).onSearch) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+        return __awaiter(_this, void 0, void 0, function () {
+          var _a, _b;
+          return __generator(this, function (_c) {
+            switch (_c.label) {
+              case 0:
+                // 타이머가 취소되었는지 확인 (다른 타이머가 시작되었으면 현재 타이머는 무시)
+                if (this.currentDebounceTimerId !== timerId_1) {
+                  return [2 /*return*/]; // 이 타이머는 취소되었으므로 실행하지 않음
+                }
+                // 타이머가 여전히 유효하면 실행
+                this.searchDebounceTimer = undefined;
+                this.currentDebounceTimerId = undefined;
+                // API 모드: 검색어만 업데이트 (필터링은 하지 않음, 서버에서 필터링된 결과를 받음)
+                // 일반 모드: 검색어 업데이트 + 로컬 필터링
+                if (isApiMode) {
+                  this.model.updateSearchValue(value);
+                } else {
+                  this.model.updateSearchAndFilter(value);
+                }
+                // onSearch 콜백 호출 및 완료 대기 (디바운싱 적용, 최종 타이머만 실행)
+                return [4 /*yield*/, (_b = (_a = this.config).onSearch) === null || _b === void 0 ? void 0 : _b.call(_a, value)];
+              case 1:
+                // onSearch 콜백 호출 및 완료 대기 (디바운싱 적용, 최종 타이머만 실행)
+                _c.sent();
+                // 텍스트가 있을 때만 드롭다운 열기
+                if (value.trim()) {
+                  this.controller.open();
+                } else if (!this.model.getState().showAllItems) {
+                  this.controller.close();
+                }
+                return [2 /*return*/];
+            }
+          });
+        });
       }, this.config.searchDebounceMs);
     } else {
       // 디바운싱이 0으로 명시적으로 설정되었으면 즉시 실행
@@ -415,6 +426,7 @@ var UnifiedSelectBox = /** @class */function () {
     }
   };
   UnifiedSelectBox.prototype.handleClearInput = function () {
+    this.cancelDebounceTimer();
     // input 필드 텍스트 지우기
     if (this.inputField) {
       this.inputField.setValue('');
@@ -459,6 +471,7 @@ var UnifiedSelectBox = /** @class */function () {
   };
   UnifiedSelectBox.prototype.handleSelectionChange = function (selectedValues) {
     var _a, _b;
+    this.cancelDebounceTimer();
     var result = this.config.multiple ? selectedValues : selectedValues[0] || '';
     (_b = (_a = this.config).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, result);
     // UI 업데이트
@@ -616,12 +629,7 @@ var UnifiedSelectBox = /** @class */function () {
     }
   };
   UnifiedSelectBox.prototype.destroy = function () {
-    // 디바운스 타이머 정리
-    if (this.searchDebounceTimer) {
-      clearTimeout(this.searchDebounceTimer);
-      this.searchDebounceTimer = undefined;
-    }
-    this.currentDebounceTimerId = undefined;
+    this.cancelDebounceTimer();
     this.controller.destroy();
     this.renderer.clearCache();
     this.inputField = undefined;
@@ -667,6 +675,32 @@ var UnifiedSelectBox = /** @class */function () {
       isOpen: this.model.getState().isOpen
     };
   };
+  /**
+   * 드롭다운을 스크롤의 바닥으로 이동
+   * 전체 선택 시 추가 데이터 로드를 트리거하기 위해 사용
+   */
+  UnifiedSelectBox.prototype.scrollToBottom = function () {
+    if (!this.dropdownElement) return;
+    var optionsList = this.dropdownElement.querySelector('.ncua-select-dropdown__options');
+    if (!optionsList) return;
+    // 스크롤을 바닥으로 이동
+    optionsList.scrollTop = optionsList.scrollHeight;
+  };
+  /**
+   * 전체 선택 버튼의 텍스트를 외부에서 변경
+   * @param text 버튼에 표시할 텍스트
+   */
+  UnifiedSelectBox.prototype.setSelectAllButtonText = function (text) {
+    if (!this.config.multiple || !this.footerElement) return;
+    this.renderer.updateSelectAllButtonText(this.footerElement, text);
+  };
+  /**
+   * 특정 인덱스의 옵션으로 포커스 이동
+   * @param index 포커스를 이동할 옵션의 인덱스
+   */
+  UnifiedSelectBox.prototype.setFocusIndex = function (index) {
+    this.controller.setFocus(index);
+  };
   return UnifiedSelectBox;
 }();
 export { UnifiedSelectBox };

package/dist/esm/src/components/button/ButtonStepper.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classnames from 'classnames';
+export var ButtonStepper = function (_a) {
+  var size = _a.size,
+    direction = _a.direction,
+    disabled = _a.disabled,
+    onClick = _a.onClick,
+    className = _a.className;
+  return _jsx("button", {
+    className: classnames('ncua-button-stepper', "ncua-button-stepper--".concat(size), "ncua-button-stepper--".concat(direction), className),
+    disabled: disabled,
+    onClick: onClick
+  });
+};

package/dist/esm/src/components/button/index.js

@@ -1,2 +1,4 @@
 export * from './Button';
-export * from './ButtonGroup';
+export * from './ButtonCloseX';
+export * from './ButtonGroup';
+export * from './ButtonStepper';