@ncds/ui-admin 1.7.0 → 1.8.1

package/dist/cjs/src/components/tooltip/Tooltip.js

@@ -10,63 +10,52 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _ButtonCloseX = require("../button/ButtonCloseX");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 ICON_SIZE_SM = 14;
-var ICON_SIZE_DEFAULT = 16;
-var MARGIN = 10;
-var DEFAULT_TOOLTIP_WIDTH = 200;
-var DEFAULT_TOOLTIP_HEIGHT = 60;
-var POSITION_PRIORITY = ['bottom', 'top', 'right', 'left'];
+const ICON_SIZE_SM = 14;
+const ICON_SIZE_DEFAULT = 16;
+const MARGIN = 10;
+const DEFAULT_TOOLTIP_WIDTH = 200;
+const DEFAULT_TOOLTIP_HEIGHT = 60;
+const POSITION_PRIORITY = ['bottom', 'top', 'right', 'left'];
 // 수직 위치(top/bottom)일 때 수평 정렬 보정
-var resolveVerticalAlignment = function (position, triggerRect, tooltipWidth, viewportWidth) {
-  var centerX = triggerRect.left + triggerRect.width / 2;
-  var tooltipHalfWidth = tooltipWidth / 2;
+const resolveVerticalAlignment = (position, triggerRect, tooltipWidth, viewportWidth) => {
+  const centerX = triggerRect.left + triggerRect.width / 2;
+  const tooltipHalfWidth = tooltipWidth / 2;
   if (centerX - tooltipHalfWidth < MARGIN) {
-    return "".concat(position, "-left");
+    return `${position}-left`;
   }
   if (centerX + tooltipHalfWidth > viewportWidth - MARGIN) {
-    return "".concat(position, "-right");
+    return `${position}-right`;
   }
   return position;
 };
 // 해당 위치에 툴팁을 배치할 충분한 공간이 있는지 확인
-var hasEnoughSpace = function (position, spaces, tooltipWidth, tooltipHeight) {
-  var isVertical = position === 'bottom' || position === 'top';
-  var requiredSpace = isVertical ? tooltipHeight : tooltipWidth;
+const hasEnoughSpace = (position, spaces, tooltipWidth, tooltipHeight) => {
+  const isVertical = position === 'bottom' || position === 'top';
+  const requiredSpace = isVertical ? tooltipHeight : tooltipWidth;
   return spaces[position] >= requiredSpace + MARGIN;
 };
 // 위치 계산 position='auto' 일 때 사용
-var calculateOptimalPosition = function (triggerElement, tooltipElement, preferredPosition) {
-  if (preferredPosition === void 0) {
-    preferredPosition = 'bottom';
-  }
-  var triggerRect = triggerElement.getBoundingClientRect();
-  var tooltipRect = tooltipElement.getBoundingClientRect();
-  var viewportWidth = window.innerWidth,
-    viewportHeight = window.innerHeight;
-  var spaces = {
+const calculateOptimalPosition = function (triggerElement, tooltipElement) {
+  let preferredPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'bottom';
+  const triggerRect = triggerElement.getBoundingClientRect();
+  const tooltipRect = tooltipElement.getBoundingClientRect();
+  const {
+    innerWidth: viewportWidth,
+    innerHeight: viewportHeight
+  } = window;
+  const spaces = {
     top: triggerRect.top,
     bottom: viewportHeight - triggerRect.bottom,
     left: triggerRect.left,
     right: viewportWidth - triggerRect.right
   };
-  var tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
-  var tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
-  for (var _i = 0, POSITION_PRIORITY_1 = POSITION_PRIORITY; _i < POSITION_PRIORITY_1.length; _i++) {
-    var position = POSITION_PRIORITY_1[_i];
+  const tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
+  const tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
+  for (const position of POSITION_PRIORITY) {
     if (!hasEnoughSpace(position, spaces, tooltipWidth, tooltipHeight)) {
       continue;
     }
-    var isVertical = position === 'bottom' || position === 'top';
+    const isVertical = position === 'bottom' || position === 'top';
     if (isVertical) {
       return resolveVerticalAlignment(position, triggerRect, tooltipWidth, viewportWidth);
     }
@@ -74,88 +63,69 @@ var calculateOptimalPosition = function (triggerElement, tooltipElement, preferr
   }
   return preferredPosition;
 };
-var Tooltip = function (_a) {
-  var _b = _a.tooltipType,
-    tooltipType = _b === void 0 ? 'black' : _b,
-    _c = _a.iconType,
-    iconType = _c === void 0 ? 'stroke' : _c,
-    _d = _a.position,
-    position = _d === void 0 ? 'auto' : _d,
-    _e = _a.size,
-    size = _e === void 0 ? 'sm' : _e,
-    title = _a.title,
-    content = _a.content,
-    _f = _a.hideArrow,
-    hideArrow = _f === void 0 ? false : _f,
-    _g = _a.type,
-    type = _g === void 0 ? 'short' : _g,
-    _h = _a.iconColor,
-    iconColor = _h === void 0 ? 'var(--gray-300)' : _h,
-    _j = _a.iconStyle,
-    iconStyle = _j === void 0 ? 'help-circle' : _j,
-    className = _a.className;
-  var iconSize = size === 'sm' ? ICON_SIZE_SM : ICON_SIZE_DEFAULT;
-  var tooltipRef = (0, _react.useRef)(null);
-  var tooltipBgRef = (0, _react.useRef)(null);
-  var _k = (0, _react.useState)(position === 'auto' ? 'bottom' : position),
-    calculatedPosition = _k[0],
-    setCalculatedPosition = _k[1];
-  var _l = (0, _react.useState)(false),
-    isVisible = _l[0],
-    setIsVisible = _l[1];
-  var _m = (0, _react.useState)(false),
-    isManuallyClose = _m[0],
-    setIsManuallyClose = _m[1];
-  var _o = (0, _react.useState)(false),
-    isMeasuring = _o[0],
-    setIsMeasuring = _o[1];
-  var handleMouseEnter = (0, _react.useCallback)(function () {
+const Tooltip = _ref => {
+  let {
+    tooltipType = 'white',
+    iconType = 'stroke',
+    position = 'auto',
+    size = 'sm',
+    title,
+    content,
+    hideArrow = false,
+    type = 'short',
+    iconColor = 'var(--gray-300)',
+    iconStyle = 'help-circle',
+    className
+  } = _ref;
+  const iconSize = size === 'sm' ? ICON_SIZE_SM : ICON_SIZE_DEFAULT;
+  const tooltipRef = (0, _react.useRef)(null);
+  const tooltipBgRef = (0, _react.useRef)(null);
+  const [calculatedPosition, setCalculatedPosition] = (0, _react.useState)(position === 'auto' ? 'bottom' : position);
+  const [isVisible, setIsVisible] = (0, _react.useState)(false);
+  const [isManuallyClose, setIsManuallyClose] = (0, _react.useState)(false);
+  const [isMeasuring, setIsMeasuring] = (0, _react.useState)(false);
+  const handleMouseEnter = (0, _react.useCallback)(() => {
     if (isManuallyClose) return;
     setIsVisible(true);
     if (position === 'auto' && tooltipRef.current && tooltipBgRef.current) {
       // 크기 측정을 위해 임시로 measuring 클래스 추가
       setIsMeasuring(true);
       // 다음 렌더링 사이클에서 크기 측정
-      setTimeout(function () {
+      setTimeout(() => {
         if (tooltipRef.current && tooltipBgRef.current) {
-          var optimalPosition = calculateOptimalPosition(tooltipRef.current, tooltipBgRef.current, 'bottom');
+          const optimalPosition = calculateOptimalPosition(tooltipRef.current, tooltipBgRef.current, 'bottom');
           setCalculatedPosition(optimalPosition);
           setIsMeasuring(false);
         }
       }, 0);
     }
   }, [position, isManuallyClose]);
-  var handleMouseLeave = (0, _react.useCallback)(function () {
+  const handleMouseLeave = (0, _react.useCallback)(() => {
     if (type === 'short') {
       setIsVisible(false);
     }
     setIsManuallyClose(false);
   }, [type]);
-  var handleCloseClick = (0, _react.useCallback)(function () {
+  const handleCloseClick = (0, _react.useCallback)(() => {
     setIsVisible(false);
     setIsManuallyClose(true);
   }, []);
-  var finalPosition = position === 'auto' ? calculatedPosition : position;
-  var tooltipClassName = (0, _react.useMemo)(function () {
-    return (0, _classnames.default)('ncua-tooltip', "ncua-tooltip--".concat(size), "ncua-tooltip--".concat(type), {
-      'ncua-tooltip--hidden-arrow': hideArrow,
-      'ncua-tooltip--stroke': iconType === 'stroke',
-      'ncua-tooltip--auto': position === 'auto'
-    }, className);
-  }, [size, type, hideArrow, iconType, position, className]);
-  var tooltipBgClassName = (0, _react.useMemo)(function () {
-    return (0, _classnames.default)('ncua-tooltip__bg', "ncua-tooltip__bg--".concat(tooltipType), "ncua-tooltip__bg--".concat(finalPosition), {
-      'ncua-tooltip__bg--visible': isVisible,
-      'ncua-tooltip__bg--measuring': isMeasuring,
-      'ncua-tooltip__bg--force-hidden': isManuallyClose
-    });
-  }, [tooltipType, finalPosition, isVisible, isMeasuring, isManuallyClose]);
-  return (0, _jsxRuntime.jsxs)("span", __assign({
+  const finalPosition = position === 'auto' ? calculatedPosition : position;
+  const tooltipClassName = (0, _react.useMemo)(() => (0, _classnames.default)('ncua-tooltip', `ncua-tooltip--${size}`, `ncua-tooltip--${type}`, {
+    'ncua-tooltip--hidden-arrow': hideArrow,
+    'ncua-tooltip--stroke': iconType === 'stroke',
+    'ncua-tooltip--auto': position === 'auto'
+  }, className), [size, type, hideArrow, iconType, position, className]);
+  const tooltipBgClassName = (0, _react.useMemo)(() => (0, _classnames.default)('ncua-tooltip__bg', `ncua-tooltip__bg--${tooltipType}`, `ncua-tooltip__bg--${finalPosition}`, {
+    'ncua-tooltip__bg--visible': isVisible,
+    'ncua-tooltip__bg--measuring': isMeasuring,
+    'ncua-tooltip__bg--force-hidden': isManuallyClose
+  }), [tooltipType, finalPosition, isVisible, isMeasuring, isManuallyClose]);
+  return (0, _jsxRuntime.jsxs)("span", {
     ref: tooltipRef,
     className: tooltipClassName,
     onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
-  }, {
+    onMouseLeave: handleMouseLeave,
     children: [iconStyle === 'help-circle' && (iconType === 'stroke' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
       width: iconSize,
       height: iconSize,
@@ -172,26 +142,23 @@ var Tooltip = function (_a) {
       width: iconSize,
       height: iconSize,
       color: iconColor
-    })), (0, _jsxRuntime.jsxs)("span", __assign({
+    })), (0, _jsxRuntime.jsxs)("span", {
       ref: tooltipBgRef,
-      className: tooltipBgClassName
-    }, {
-      children: [title && (0, _jsxRuntime.jsx)("span", __assign({
-        className: "ncua-tooltip__title"
-      }, {
+      className: tooltipBgClassName,
+      children: [title && (0, _jsxRuntime.jsx)("span", {
+        className: "ncua-tooltip__title",
         children: title
-      })), content && (0, _jsxRuntime.jsx)("span", __assign({
-        className: "ncua-tooltip__content"
-      }, {
+      }), content && (0, _jsxRuntime.jsx)("span", {
+        className: "ncua-tooltip__content",
         children: content
-      })), type === 'long' && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
+      }), type === 'long' && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
         className: "ncua-tooltip__close-button",
         size: "xs",
         theme: tooltipType === 'white' ? 'dark' : 'light',
         onClick: handleCloseClick,
         "aria-label": "\uD234\uD301 \uB2EB\uAE30"
       })]
-    }))]
-  }));
+    })]
+  });
 };
 exports.Tooltip = Tooltip;

package/dist/cjs/src/components/vertical-tab/VerticalTab.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VerticalTab = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Select = require("../select/Select");
+var _TabButton = require("../tab/TabButton");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const VerticalTab = _ref => {
+  let {
+    type = 'button-primary',
+    breakPoint = 'pc',
+    activeTab,
+    menus,
+    onSelect
+  } = _ref;
+  const handleSelectChange = e => {
+    onSelect?.(e.target.value);
+  };
+  const optionItems = menus?.map(menu => ({
+    id: menu.id || '',
+    label: menu.label || ''
+  })) || [];
+  if (breakPoint === 'mobile') {
+    return (0, _jsxRuntime.jsx)(_Select.Select, {
+      value: activeTab,
+      onChange: handleSelectChange,
+      optionItems: optionItems,
+      size: "md"
+    });
+  }
+  return (0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('ncua-vertical-tab', `ncua-vertical-tab--${type}`),
+    children: menus?.map(menu => {
+      const isActive = 'href' in menu && menu.href ? menu.href === activeTab : menu.id === activeTab;
+      return (0, _jsxRuntime.jsx)(_TabButton.TabButton, {
+        ...menu,
+        isActive: isActive,
+        tabButtonType: type,
+        size: "md"
+      }, menu.id);
+    })
+  });
+};
+exports.VerticalTab = VerticalTab;

package/dist/cjs/src/components/vertical-tab/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _VerticalTab = require("./VerticalTab");
+Object.keys(_VerticalTab).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _VerticalTab[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _VerticalTab[key];
+    }
+  });
+});

package/dist/cjs/src/constant/breakpoint.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MEDIA_QUERY = exports.BREAKPOINT = void 0;
-var BREAKPOINT = exports.BREAKPOINT = {
+const BREAKPOINT = exports.BREAKPOINT = {
   mobile: '768px'
 };
-var MEDIA_QUERY = exports.MEDIA_QUERY = {
-  mobile: "(max-width: ".concat(BREAKPOINT.mobile, ")")
+const MEDIA_QUERY = exports.MEDIA_QUERY = {
+  mobile: `(max-width: ${BREAKPOINT.mobile})`
 };

package/dist/cjs/src/constant/date-picker.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PERIOD_ITEM = void 0;
-var PERIOD_ITEM = exports.PERIOD_ITEM = {
+const PERIOD_ITEM = exports.PERIOD_ITEM = {
   TODAY: {
     text: '오늘',
     period: 0,

package/dist/cjs/src/constant/size.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MINIMUM_PC_SIZE = void 0;
-var MINIMUM_PC_SIZE = exports.MINIMUM_PC_SIZE = 768;
+const MINIMUM_PC_SIZE = exports.MINIMUM_PC_SIZE = 768;

package/dist/cjs/src/hooks/dropdown/useDropdown.js

@@ -12,51 +12,48 @@ var _useWindowResize = require("./useWindowResize");
 /**
  * 드롭다운 기능을 통합한 커스텀 훅
  */
-var useDropdown = function (config) {
-  var triggerRef = config.triggerRef,
-    dropdownRef = config.dropdownRef,
-    maxHeight = config.maxHeight,
-    itemCount = config.itemCount,
-    optionItems = config.optionItems,
-    _a = config.disabled,
-    disabled = _a === void 0 ? false : _a,
-    _b = config.multiple,
-    multiple = _b === void 0 ? false : _b,
-    onSelect = config.onSelect,
-    onChange = config.onChange;
-  var _c = (0, _react.useState)(false),
-    isOpen = _c[0],
-    setIsOpen = _c[1];
-  var _d = (0, _react.useState)(-1),
-    focusedIndex = _d[0],
-    setFocusedIndex = _d[1];
+const useDropdown = config => {
+  const {
+    triggerRef,
+    dropdownRef,
+    maxHeight,
+    itemCount,
+    optionItems,
+    disabled = false,
+    multiple = false,
+    onSelect,
+    onChange
+  } = config;
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(-1);
   // 드롭다운 위치 계산
-  var _e = (0, _useDropdownPosition.useDropdownPosition)({
-      triggerRef: triggerRef,
-      maxHeight: maxHeight,
-      itemCount: itemCount
-    }),
-    direction = _e.direction,
-    updatePosition = _e.updatePosition;
+  const {
+    direction,
+    updatePosition
+  } = (0, _useDropdownPosition.useDropdownPosition)({
+    triggerRef,
+    maxHeight,
+    itemCount
+  });
   // 드롭다운 토글
-  var toggleDropdown = (0, _react.useCallback)(function () {
+  const toggleDropdown = (0, _react.useCallback)(() => {
     if (disabled) return;
-    var newIsOpen = !isOpen;
+    const newIsOpen = !isOpen;
     if (newIsOpen) {
       updatePosition();
       setFocusedIndex(-1);
     }
     setIsOpen(newIsOpen);
-    onChange === null || onChange === void 0 ? void 0 : onChange(newIsOpen);
+    onChange?.(newIsOpen);
   }, [disabled, isOpen, updatePosition, onChange]);
   // 드롭다운 닫기
-  var closeDropdown = (0, _react.useCallback)(function () {
+  const closeDropdown = (0, _react.useCallback)(() => {
     setIsOpen(false);
     setFocusedIndex(-1);
-    onChange === null || onChange === void 0 ? void 0 : onChange(false);
+    onChange?.(false);
   }, [onChange]);
   // 옵션 선택 처리
-  var handleOptionSelect = (0, _react.useCallback)(function (option) {
+  const handleOptionSelect = (0, _react.useCallback)(option => {
     onSelect(option);
     // multiple 모드가 아니어야 드롭다운을 닫음
     if (!multiple) {
@@ -64,46 +61,47 @@ var useDropdown = function (config) {
     }
   }, [onSelect, closeDropdown, multiple]);
   // 키보드 이벤트 처리
-  var _f = (0, _useDropdownKeyboard.useDropdownKeyboard)({
-      isOpen: isOpen,
-      disabled: disabled,
-      focusedIndex: focusedIndex,
-      optionItems: optionItems,
-      onToggle: toggleDropdown,
-      onSelect: handleOptionSelect,
-      onClose: closeDropdown,
-      onFocusChange: setFocusedIndex,
-      triggerRef: triggerRef,
-      dropdownRef: dropdownRef
-    }),
-    handleKeyDown = _f.handleKeyDown,
-    handleMouseMove = _f.handleMouseMove,
-    isKeyboardNavigation = _f.isKeyboardNavigation;
+  const {
+    handleKeyDown,
+    handleMouseMove,
+    isKeyboardNavigation
+  } = (0, _useDropdownKeyboard.useDropdownKeyboard)({
+    isOpen,
+    disabled,
+    focusedIndex,
+    optionItems,
+    onToggle: toggleDropdown,
+    onSelect: handleOptionSelect,
+    onClose: closeDropdown,
+    onFocusChange: setFocusedIndex,
+    triggerRef,
+    dropdownRef
+  });
   // 외부 클릭 감지
-  var refs = dropdownRef ? [triggerRef, dropdownRef] : [triggerRef];
+  const refs = dropdownRef ? [triggerRef, dropdownRef] : [triggerRef];
   (0, _useOutsideClick.useOutsideClick)({
-    isOpen: isOpen,
-    refs: refs,
+    isOpen,
+    refs,
     onClose: closeDropdown
   });
   // 윈도우 리사이즈 시 위치 재계산
   (0, _useWindowResize.useWindowResize)(updatePosition, isOpen, triggerRef.current);
   return {
     // 상태
-    isOpen: isOpen,
-    direction: direction,
-    focusedIndex: focusedIndex,
+    isOpen,
+    direction,
+    focusedIndex,
     // 액션
-    toggleDropdown: toggleDropdown,
-    closeDropdown: closeDropdown,
-    handleOptionSelect: handleOptionSelect,
-    handleKeyDown: handleKeyDown,
-    setFocusedIndex: setFocusedIndex,
+    toggleDropdown,
+    closeDropdown,
+    handleOptionSelect,
+    handleKeyDown,
+    setFocusedIndex,
     // 키보드 네비게이션
-    handleMouseMove: handleMouseMove,
-    isKeyboardNavigation: isKeyboardNavigation,
+    handleMouseMove,
+    isKeyboardNavigation,
     // 유틸리티
-    updatePosition: updatePosition
+    updatePosition
   };
 };
 exports.useDropdown = useDropdown;

package/dist/cjs/src/hooks/dropdown/useDropdownKeyboard.js

@@ -6,33 +6,35 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDropdownKeyboard = void 0;
 var _react = require("react");
 var _dropdown = require("../../utils/dropdown");
-var SCROLL_DELAY_MS = 100;
+const SCROLL_DELAY_MS = 100;
 /**
  * 드롭다운 키보드 네비게이션을 위한 커스텀 훅
  */
-var useDropdownKeyboard = function (config) {
-  var isOpen = config.isOpen,
-    disabled = config.disabled,
-    focusedIndex = config.focusedIndex,
-    optionItems = config.optionItems,
-    onToggle = config.onToggle,
-    onSelect = config.onSelect,
-    onClose = config.onClose,
-    onFocusChange = config.onFocusChange,
-    triggerRef = config.triggerRef,
-    dropdownRef = config.dropdownRef;
+const useDropdownKeyboard = config => {
+  const {
+    isOpen,
+    disabled,
+    focusedIndex,
+    optionItems,
+    onToggle,
+    onSelect,
+    onClose,
+    onFocusChange,
+    triggerRef,
+    dropdownRef
+  } = config;
   // 키보드 네비게이션 플래그
-  var isKeyboardNavigationRef = (0, _react.useRef)(false);
+  const isKeyboardNavigationRef = (0, _react.useRef)(false);
   // 포커스된 옵션이 보이도록 스크롤 조정
-  var scrollToFocusedOption = (0, _react.useCallback)(function (index) {
-    if (!(dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) || index < 0) return;
-    var optionsList = dropdownRef.current.querySelector('.ncua-select-dropdown__options');
+  const scrollToFocusedOption = (0, _react.useCallback)(index => {
+    if (!dropdownRef?.current || index < 0) return;
+    const optionsList = dropdownRef.current.querySelector('.ncua-select-dropdown__options');
     if (!optionsList) return;
-    var options = optionsList.querySelectorAll('.ncua-select-dropdown__option');
-    var focusedOption = options[index];
+    const options = optionsList.querySelectorAll('.ncua-select-dropdown__option');
+    const focusedOption = options[index];
     if (!focusedOption) return;
-    var optionsListRect = optionsList.getBoundingClientRect();
-    var focusedOptionRect = focusedOption.getBoundingClientRect();
+    const optionsListRect = optionsList.getBoundingClientRect();
+    const focusedOptionRect = focusedOption.getBoundingClientRect();
     // 옵션이 위쪽으로 벗어났을 때
     if (focusedOptionRect.top < optionsListRect.top) {
       optionsList.scrollTop = focusedOption.offsetTop;
@@ -42,7 +44,7 @@ var useDropdownKeyboard = function (config) {
       optionsList.scrollTop = focusedOption.offsetTop + focusedOption.offsetHeight - optionsList.clientHeight;
     }
   }, [dropdownRef]);
-  var handleEnterOrSpace = (0, _react.useCallback)(function (e) {
+  const handleEnterOrSpace = (0, _react.useCallback)(e => {
     e.preventDefault();
     if (!isOpen) {
       onToggle();
@@ -50,38 +52,33 @@ var useDropdownKeyboard = function (config) {
       onSelect(optionItems[focusedIndex]);
     }
   }, [isOpen, focusedIndex, optionItems, onToggle, onSelect]);
-  var handleEscape = (0, _react.useCallback)(function (e) {
-    var _a;
+  const handleEscape = (0, _react.useCallback)(e => {
     if (isOpen) {
       e.preventDefault();
       onClose();
-      (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      triggerRef?.current?.focus();
     }
   }, [isOpen, onClose, triggerRef]);
-  var handleArrowNavigation = (0, _react.useCallback)(function (e, direction) {
+  const handleArrowNavigation = (0, _react.useCallback)((e, direction) => {
     e.preventDefault();
     isKeyboardNavigationRef.current = true;
     if (isOpen) {
-      var nextIndex_1 = (0, _dropdown.calculateNextFocusIndex)(focusedIndex, direction, optionItems.length);
-      onFocusChange(nextIndex_1);
-      setTimeout(function () {
-        return scrollToFocusedOption(nextIndex_1);
-      }, SCROLL_DELAY_MS);
+      const nextIndex = (0, _dropdown.calculateNextFocusIndex)(focusedIndex, direction, optionItems.length);
+      onFocusChange(nextIndex);
+      setTimeout(() => scrollToFocusedOption(nextIndex), SCROLL_DELAY_MS);
     } else {
       onToggle();
     }
   }, [isOpen, focusedIndex, optionItems.length, onFocusChange, onToggle, scrollToFocusedOption]);
-  var handleHomeEnd = (0, _react.useCallback)(function (e, targetIndex) {
+  const handleHomeEnd = (0, _react.useCallback)((e, targetIndex) => {
     if (isOpen) {
       e.preventDefault();
       isKeyboardNavigationRef.current = true;
       onFocusChange(targetIndex);
-      setTimeout(function () {
-        return scrollToFocusedOption(targetIndex);
-      }, 0);
+      setTimeout(() => scrollToFocusedOption(targetIndex), 0);
     }
   }, [isOpen, onFocusChange, scrollToFocusedOption]);
-  var handleKeyDown = (0, _react.useCallback)(function (e) {
+  const handleKeyDown = (0, _react.useCallback)(e => {
     if (disabled) return;
     switch (e.key) {
       case 'Enter':
@@ -106,17 +103,17 @@ var useDropdownKeyboard = function (config) {
     }
   }, [disabled, optionItems.length, handleEnterOrSpace, handleEscape, handleArrowNavigation, handleHomeEnd]);
   // 마우스 움직임 감지 함수
-  var handleMouseMove = (0, _react.useCallback)(function () {
+  const handleMouseMove = (0, _react.useCallback)(() => {
     isKeyboardNavigationRef.current = false;
   }, []);
   // 키보드 네비게이션 상태 확인 함수
-  var isKeyboardNavigation = (0, _react.useCallback)(function () {
+  const isKeyboardNavigation = (0, _react.useCallback)(() => {
     return isKeyboardNavigationRef.current;
   }, []);
   return {
-    handleKeyDown: handleKeyDown,
-    handleMouseMove: handleMouseMove,
-    isKeyboardNavigation: isKeyboardNavigation
+    handleKeyDown,
+    handleMouseMove,
+    isKeyboardNavigation
   };
 };
 exports.useDropdownKeyboard = useDropdownKeyboard;