@ncds/ui-admin 1.2.2 → 1.4.1

package/dist/cjs/src/components/tag/Tag.js

@@ -7,6 +7,7 @@ exports.Tag = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 var _color = require("../../../constant/color");
 var _dot = require("../dot");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -20,6 +21,42 @@ var __assign = void 0 && (void 0).__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
+var MARGIN = 10;
+var DEFAULT_TOOLTIP_WIDTH = 200;
+var DEFAULT_TOOLTIP_HEIGHT = 60;
+// 위치 계산 로직
+var calculateOptimalPosition = function (triggerElement, tooltipElement) {
+  var triggerRect = triggerElement.getBoundingClientRect();
+  var tooltipRect = tooltipElement.getBoundingClientRect();
+  var viewportWidth = window.innerWidth,
+    viewportHeight = window.innerHeight;
+  var tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
+  var tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
+  var spaces = {
+    top: triggerRect.top,
+    bottom: viewportHeight - triggerRect.bottom,
+    left: triggerRect.left,
+    right: viewportWidth - triggerRect.right
+  };
+  // 위/아래 공간을 먼저 확인하고 우선순위 결정
+  var hasTopSpace = spaces.top >= tooltipHeight + MARGIN;
+  // 위쪽 공간이 있으면 top 우선, 없으면 bottom 우선
+  var positions = hasTopSpace ? ['top-right', 'top-left', 'bottom-right', 'bottom-left'] : ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
+  for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
+    var position = positions_1[_i];
+    var isTop = position.includes('top');
+    var isRight = position.includes('right');
+    var hasVerticalSpace = isTop ? spaces.top >= tooltipHeight + MARGIN : spaces.bottom >= tooltipHeight + MARGIN;
+    var hasHorizontalSpace = isRight ? spaces.right >= tooltipWidth + MARGIN // right 정렬: 툴팁이 오른쪽으로 펼쳐짐
+    : spaces.left >= tooltipWidth + MARGIN; // left 정렬: 툴팁이 왼쪽으로 펼쳐짐
+    if (hasVerticalSpace && hasHorizontalSpace) {
+      return position;
+    }
+  }
+  // 모든 조건이 맞지 않으면 공간이 더 많은 쪽으로
+  var fallbackPosition = hasTopSpace ? 'top-right' : 'bottom-right';
+  return fallbackPosition;
+};
 var Tag = function (_a) {
   var _b = _a.size,
     size = _b === void 0 ? 'sm' : _b,
@@ -27,11 +64,49 @@ var Tag = function (_a) {
     text = _a.text,
     count = _a.count,
     close = _a.close,
-    onButtonClick = _a.onButtonClick;
+    onButtonClick = _a.onButtonClick,
+    _c = _a.maxLength,
+    maxLength = _c === void 0 ? 20 : _c;
+  var _d = (0, _react.useState)(false),
+    isTooltipVisible = _d[0],
+    setIsTooltipVisible = _d[1];
+  var _e = (0, _react.useState)('top-right'),
+    calculatedPosition = _e[0],
+    setCalculatedPosition = _e[1];
+  var tagRef = (0, _react.useRef)(null);
+  var tooltipRef = (0, _react.useRef)(null);
   var iconSize = {
     sm: 14,
     md: 16
   };
+  // 텍스트 길이 체크 및 말줄임 처리
+  var shouldTruncate = text.length > maxLength;
+  var displayText = shouldTruncate ? "".concat(text.slice(0, maxLength - 2), "...") : text;
+  var handleMouseEnter = (0, _react.useCallback)(function () {
+    if (shouldTruncate) {
+      setIsTooltipVisible(true);
+      // 간단한 위치 계산 - 기본값 사용
+      if (tagRef.current && tooltipRef.current) {
+        var optimalPosition = calculateOptimalPosition(tagRef.current, tooltipRef.current);
+        setCalculatedPosition(optimalPosition);
+      } else {
+        // ref가 없으면 다음 렌더링 사이클에서 시도
+        setTimeout(function () {
+          if (tagRef.current) {
+            // tooltipRef가 없어도 tagRef만으로 계산
+            var dummyTooltipElement = document.createElement('div');
+            dummyTooltipElement.style.width = "".concat(DEFAULT_TOOLTIP_WIDTH, "px");
+            dummyTooltipElement.style.height = "".concat(DEFAULT_TOOLTIP_HEIGHT, "px");
+            var optimalPosition = calculateOptimalPosition(tagRef.current, dummyTooltipElement);
+            setCalculatedPosition(optimalPosition);
+          }
+        }, 0);
+      }
+    }
+  }, [shouldTruncate]);
+  var handleMouseLeave = (0, _react.useCallback)(function () {
+    setIsTooltipVisible(false);
+  }, []);
   var sideSlotRender = function (slot) {
     var _a;
     if (slot.type === 'icon') {
@@ -51,12 +126,17 @@ var Tag = function (_a) {
     return slot.children;
   };
   return (0, _jsxRuntime.jsxs)("span", __assign({
-    className: (0, _classnames.default)('ncua-tag', "ncua-tag--".concat(size))
+    ref: tagRef,
+    className: (0, _classnames.default)('ncua-tag', "ncua-tag--".concat(size), {
+      'ncua-tag--truncated': shouldTruncate
+    }),
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
   }, {
     children: [icon && sideSlotRender(icon), (0, _jsxRuntime.jsx)("span", __assign({
       className: "ncua-tag__text"
     }, {
-      children: text
+      children: displayText
     })), count && (0, _jsxRuntime.jsx)("span", __assign({
       className: "ncua-tag__count"
     }, {
@@ -72,6 +152,15 @@ var Tag = function (_a) {
         width: iconSize[size],
         height: iconSize[size]
       })
+    })), shouldTruncate && isTooltipVisible && (0, _jsxRuntime.jsx)("span", __assign({
+      ref: tooltipRef,
+      className: (0, _classnames.default)('ncua-tag__tooltip', "ncua-tag__tooltip--".concat(calculatedPosition))
+    }, {
+      children: (0, _jsxRuntime.jsx)("span", __assign({
+        className: "ncua-tag__tooltip-content"
+      }, {
+        children: text
+      }))
     }))]
   }));
 };

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

@@ -7,6 +7,8 @@ exports.Tooltip = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 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) {
@@ -18,25 +20,44 @@ var __assign = void 0 && (void 0).__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
-var tooltipContent = function (_a) {
-  var title = _a.title,
-    content = _a.content,
-    tooltipType = _a.tooltipType,
-    position = _a.position;
-  return (0, _jsxRuntime.jsxs)("span", __assign({
-    className: (0, _classnames.default)("ncua-tooltip__bg", "ncua-tooltip__bg--".concat(tooltipType), "ncua-tooltip__bg--".concat(position))
-  }, {
-    children: [title && (0, _jsxRuntime.jsx)("span", __assign({
-      className: "ncua-tooltip__title"
-    }, {
-      children: title
-    })), content && (0, _jsxRuntime.jsx)("span", {
-      className: "ncua-tooltip__content",
-      dangerouslySetInnerHTML: {
-        __html: content
+var MARGIN = 10;
+var DEFAULT_TOOLTIP_WIDTH = 200;
+var DEFAULT_TOOLTIP_HEIGHT = 60;
+var POSITION_PRIORITY = ['bottom', 'top', 'right', 'left'];
+// 위치 계산 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 = {
+    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];
+    var hasSpace = position === 'bottom' || position === 'top' ? spaces[position] >= tooltipHeight + MARGIN : spaces[position] >= tooltipWidth + MARGIN;
+    if (hasSpace) {
+      if (position === 'bottom' || position === 'top') {
+        var centerX = triggerRect.left + triggerRect.width / 2;
+        var tooltipHalfWidth = tooltipWidth / 2;
+        if (centerX - tooltipHalfWidth < MARGIN) {
+          return "".concat(position, "-left");
+        } else if (centerX + tooltipHalfWidth > viewportWidth - MARGIN) {
+          return "".concat(position, "-right");
+        }
       }
-    })]
-  }));
+      return position;
+    }
+  }
+  return preferredPosition;
 };
 var Tooltip = function (_a) {
   var _b = _a.tooltipType,
@@ -44,31 +65,107 @@ var Tooltip = function (_a) {
     _c = _a.iconType,
     iconType = _c === void 0 ? 'stroke' : _c,
     _d = _a.position,
-    position = _d === void 0 ? 'top' : _d,
+    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;
+    hideArrow = _f === void 0 ? false : _f,
+    _g = _a.type,
+    type = _g === void 0 ? 'short' : _g,
+    className = _a.className;
   var iconSize = size === 'sm' ? 14 : 16;
+  var tooltipRef = (0, _react.useRef)(null);
+  var tooltipBgRef = (0, _react.useRef)(null);
+  var _h = (0, _react.useState)(position === 'auto' ? 'bottom' : position),
+    calculatedPosition = _h[0],
+    setCalculatedPosition = _h[1];
+  var _j = (0, _react.useState)(false),
+    isVisible = _j[0],
+    setIsVisible = _j[1];
+  var _k = (0, _react.useState)(false),
+    isManuallyClose = _k[0],
+    setIsManuallyClose = _k[1];
+  var _l = (0, _react.useState)(false),
+    isMeasuring = _l[0],
+    setIsMeasuring = _l[1];
+  var handleMouseEnter = (0, _react.useCallback)(function () {
+    if (isManuallyClose) return;
+    setIsVisible(true);
+    if (position === 'auto' && tooltipRef.current && tooltipBgRef.current) {
+      // 크기 측정을 위해 임시로 measuring 클래스 추가
+      setIsMeasuring(true);
+      // 다음 렌더링 사이클에서 크기 측정
+      setTimeout(function () {
+        if (tooltipRef.current && tooltipBgRef.current) {
+          var optimalPosition = calculateOptimalPosition(tooltipRef.current, tooltipBgRef.current, 'bottom');
+          setCalculatedPosition(optimalPosition);
+          setIsMeasuring(false);
+        }
+      }, 0);
+    }
+  }, [position, isManuallyClose]);
+  var handleMouseLeave = (0, _react.useCallback)(function () {
+    if (type === 'short') {
+      setIsVisible(false);
+    }
+    setIsManuallyClose(false);
+  }, [type]);
+  var handleCloseClick = (0, _react.useCallback)(function () {
+    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({
-    className: (0, _classnames.default)('ncua-tooltip', "ncua-tooltip--".concat(size), "".concat(hideArrow ? 'ncua-tooltip--hidden-arrow' : ''), "".concat(iconType === 'stroke' ? 'ncua-tooltip--stroke' : ''))
+    ref: tooltipRef,
+    className: tooltipClassName,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
   }, {
     children: [iconType === 'stroke' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
       width: iconSize,
       height: iconSize,
-      color: "var(--gray-300"
+      color: "var(--gray-300)"
     }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircleFill, {
       width: iconSize,
       height: iconSize,
       color: "var(--gray-300)"
-    }), tooltipContent({
-      tooltipType: tooltipType,
-      position: position,
-      title: title,
-      content: content
-    })]
+    }), (0, _jsxRuntime.jsxs)("span", __assign({
+      ref: tooltipBgRef,
+      className: tooltipBgClassName
+    }, {
+      children: [title && (0, _jsxRuntime.jsx)("span", __assign({
+        className: "ncua-tooltip__title"
+      }, {
+        children: title
+      })), content && (0, _jsxRuntime.jsx)("span", {
+        className: "ncua-tooltip__content",
+        dangerouslySetInnerHTML: {
+          __html: content
+        }
+      }), 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/hooks/dropdown/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useDropdown", {
+  enumerable: true,
+  get: function () {
+    return _useDropdown.useDropdown;
+  }
+});
+Object.defineProperty(exports, "useDropdownKeyboard", {
+  enumerable: true,
+  get: function () {
+    return _useDropdownKeyboard.useDropdownKeyboard;
+  }
+});
+Object.defineProperty(exports, "useDropdownPosition", {
+  enumerable: true,
+  get: function () {
+    return _useDropdownPosition.useDropdownPosition;
+  }
+});
+Object.defineProperty(exports, "useOutsideClick", {
+  enumerable: true,
+  get: function () {
+    return _useOutsideClick.useOutsideClick;
+  }
+});
+Object.defineProperty(exports, "useScrollLock", {
+  enumerable: true,
+  get: function () {
+    return _useScrollLock.useScrollLock;
+  }
+});
+Object.defineProperty(exports, "useWindowResize", {
+  enumerable: true,
+  get: function () {
+    return _useWindowResize.useWindowResize;
+  }
+});
+var _useDropdown = require("./useDropdown");
+var _useDropdownKeyboard = require("./useDropdownKeyboard");
+var _useDropdownPosition = require("./useDropdownPosition");
+var _useOutsideClick = require("./useOutsideClick");
+var _useScrollLock = require("./useScrollLock");
+var _useWindowResize = require("./useWindowResize");

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

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDropdown = void 0;
+var _react = require("react");
+var _useDropdownKeyboard = require("./useDropdownKeyboard");
+var _useDropdownPosition = require("./useDropdownPosition");
+var _useOutsideClick = require("./useOutsideClick");
+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];
+  // 드롭다운 위치 계산
+  var _e = (0, _useDropdownPosition.useDropdownPosition)({
+      triggerRef: triggerRef,
+      maxHeight: maxHeight,
+      itemCount: itemCount
+    }),
+    direction = _e.direction,
+    updatePosition = _e.updatePosition;
+  // 드롭다운 토글
+  var toggleDropdown = (0, _react.useCallback)(function () {
+    if (disabled) return;
+    var newIsOpen = !isOpen;
+    if (newIsOpen) {
+      updatePosition();
+      setFocusedIndex(-1);
+    }
+    setIsOpen(newIsOpen);
+    onChange === null || onChange === void 0 ? void 0 : onChange(newIsOpen);
+  }, [disabled, isOpen, updatePosition, onChange]);
+  // 드롭다운 닫기
+  var closeDropdown = (0, _react.useCallback)(function () {
+    setIsOpen(false);
+    setFocusedIndex(-1);
+    onChange === null || onChange === void 0 ? void 0 : onChange(false);
+  }, [onChange]);
+  // 옵션 선택 처리
+  var handleOptionSelect = (0, _react.useCallback)(function (option) {
+    onSelect(option);
+    // multiple 모드가 아니어야 드롭다운을 닫음
+    if (!multiple) {
+      closeDropdown();
+    }
+  }, [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;
+  // 외부 클릭 감지
+  var refs = dropdownRef ? [triggerRef, dropdownRef] : [triggerRef];
+  (0, _useOutsideClick.useOutsideClick)({
+    isOpen: isOpen,
+    refs: refs,
+    onClose: closeDropdown
+  });
+  // 윈도우 리사이즈 시 위치 재계산
+  (0, _useWindowResize.useWindowResize)(updatePosition, isOpen, triggerRef.current);
+  return {
+    // 상태
+    isOpen: isOpen,
+    direction: direction,
+    focusedIndex: focusedIndex,
+    // 액션
+    toggleDropdown: toggleDropdown,
+    closeDropdown: closeDropdown,
+    handleOptionSelect: handleOptionSelect,
+    handleKeyDown: handleKeyDown,
+    setFocusedIndex: setFocusedIndex,
+    // 키보드 네비게이션
+    handleMouseMove: handleMouseMove,
+    isKeyboardNavigation: isKeyboardNavigation,
+    // 유틸리티
+    updatePosition: updatePosition
+  };
+};
+exports.useDropdown = useDropdown;

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

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDropdownKeyboard = void 0;
+var _react = require("react");
+var _dropdown = require("../../utils/dropdown");
+/**
+ * 드롭다운 키보드 네비게이션을 위한 커스텀 훅
+ */
+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;
+  // 키보드 네비게이션 플래그
+  var 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');
+    if (!optionsList) return;
+    var options = optionsList.querySelectorAll('.ncua-select-dropdown__option');
+    var focusedOption = options[index];
+    if (!focusedOption) return;
+    var optionsListRect = optionsList.getBoundingClientRect();
+    var focusedOptionRect = focusedOption.getBoundingClientRect();
+    // 옵션이 위쪽으로 벗어났을 때
+    if (focusedOptionRect.top < optionsListRect.top) {
+      optionsList.scrollTop = focusedOption.offsetTop;
+    }
+    // 옵션이 아래쪽으로 벗어났을 때
+    else if (focusedOptionRect.bottom > optionsListRect.bottom) {
+      optionsList.scrollTop = focusedOption.offsetTop + focusedOption.offsetHeight - optionsList.clientHeight;
+    }
+  }, [dropdownRef]);
+  var handleKeyDown = (0, _react.useCallback)(function (e) {
+    var _a;
+    if (disabled) return;
+    switch (e.key) {
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        if (!isOpen) {
+          onToggle();
+        } else if (focusedIndex >= 0 && optionItems[focusedIndex]) {
+          onSelect(optionItems[focusedIndex]);
+        }
+        break;
+      case 'Escape':
+        if (isOpen) {
+          e.preventDefault();
+          onClose();
+          (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        isKeyboardNavigationRef.current = true; // 키보드 네비게이션 시작
+        if (!isOpen) {
+          onToggle();
+        } else {
+          var nextIndex_1 = (0, _dropdown.calculateNextFocusIndex)(focusedIndex, 'down', optionItems.length);
+          onFocusChange(nextIndex_1);
+          // 포커스 변경 후 스크롤 조정
+          setTimeout(function () {
+            return scrollToFocusedOption(nextIndex_1);
+          }, 100);
+        }
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        isKeyboardNavigationRef.current = true; // 키보드 네비게이션 시작
+        if (!isOpen) {
+          onToggle();
+        } else {
+          var nextIndex_2 = (0, _dropdown.calculateNextFocusIndex)(focusedIndex, 'up', optionItems.length);
+          onFocusChange(nextIndex_2);
+          // 포커스 변경 후 스크롤 조정
+          setTimeout(function () {
+            return scrollToFocusedOption(nextIndex_2);
+          }, 100);
+        }
+        break;
+      case 'Home':
+        if (isOpen) {
+          e.preventDefault();
+          isKeyboardNavigationRef.current = true; // 키보드 네비게이션 시작
+          onFocusChange(0);
+          // 포커스 변경 후 스크롤 조정
+          setTimeout(function () {
+            return scrollToFocusedOption(0);
+          }, 0);
+        }
+        break;
+      case 'End':
+        if (isOpen) {
+          e.preventDefault();
+          isKeyboardNavigationRef.current = true; // 키보드 네비게이션 시작
+          var lastIndex_1 = optionItems.length - 1;
+          onFocusChange(lastIndex_1);
+          // 포커스 변경 후 스크롤 조정
+          setTimeout(function () {
+            return scrollToFocusedOption(lastIndex_1);
+          }, 0);
+        }
+        break;
+    }
+  }, [disabled, isOpen, focusedIndex, optionItems, onToggle, onSelect, onClose, onFocusChange, triggerRef, scrollToFocusedOption]);
+  // 마우스 움직임 감지 함수
+  var handleMouseMove = (0, _react.useCallback)(function () {
+    isKeyboardNavigationRef.current = false;
+  }, []);
+  // 키보드 네비게이션 상태 확인 함수
+  var isKeyboardNavigation = (0, _react.useCallback)(function () {
+    return isKeyboardNavigationRef.current;
+  }, []);
+  return {
+    handleKeyDown: handleKeyDown,
+    handleMouseMove: handleMouseMove,
+    isKeyboardNavigation: isKeyboardNavigation
+  };
+};
+exports.useDropdownKeyboard = useDropdownKeyboard;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDropdownPosition = void 0;
+var _react = require("react");
+var _dropdown = require("../../utils/dropdown");
+/**
+ * 드롭다운 위치 계산을 위한 커스텀 훅
+ */
+var useDropdownPosition = function (config) {
+  var _a = (0, _react.useState)('down'),
+    direction = _a[0],
+    setDirection = _a[1];
+  var updatePosition = (0, _react.useCallback)(function () {
+    var result = (0, _dropdown.calculateDropdownPosition)(config);
+    setDirection(result.direction);
+    return result;
+  }, [config]);
+  return {
+    direction: direction,
+    updatePosition: updatePosition,
+    setDirection: setDirection
+  };
+};
+exports.useDropdownPosition = useDropdownPosition;

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

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOutsideClick = void 0;
+var _react = require("react");
+/**
+ * 외부 클릭 감지를 위한 커스텀 훅
+ */
+var useOutsideClick = function (config) {
+  var isOpen = config.isOpen,
+    refs = config.refs,
+    onClose = config.onClose;
+  (0, _react.useEffect)(function () {
+    if (!isOpen) return;
+    var handleClickOutside = function (event) {
+      var target = event.target;
+      // 모든 ref들에 대해 클릭이 외부에서 발생했는지 확인
+      var isOutside = refs.every(function (ref) {
+        return !ref.current || !ref.current.contains(target);
+      });
+      if (isOutside) {
+        onClose();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, refs, onClose]);
+};
+exports.useOutsideClick = useOutsideClick;