@ncds/ui-admin 1.3.0 → 1.5.0

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

@@ -11,8 +11,45 @@ var __assign = this && this.__assign || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Icon from '@ncds/ui-admin-icon/dynamic';
 import classNames from 'classnames';
+import { useState, useCallback, useRef } from 'react';
 import { COLOR } from '../../../constant/color';
 import { Dot } from '../dot';
+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;
+};
 export var Tag = function (_a) {
   var _b = _a.size,
     size = _b === void 0 ? 'sm' : _b,
@@ -20,11 +57,49 @@ export 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 = useState(false),
+    isTooltipVisible = _d[0],
+    setIsTooltipVisible = _d[1];
+  var _e = useState('top-right'),
+    calculatedPosition = _e[0],
+    setCalculatedPosition = _e[1];
+  var tagRef = useRef(null);
+  var tooltipRef = 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 = 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 = useCallback(function () {
+    setIsTooltipVisible(false);
+  }, []);
   var sideSlotRender = function (slot) {
     var _a;
     if (slot.type === 'icon') {
@@ -44,12 +119,17 @@ export var Tag = function (_a) {
     return slot.children;
   };
   return _jsxs("span", __assign({
-    className: classNames('ncua-tag', "ncua-tag--".concat(size))
+    ref: tagRef,
+    className: classNames('ncua-tag', "ncua-tag--".concat(size), {
+      'ncua-tag--truncated': shouldTruncate
+    }),
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
   }, {
     children: [icon && sideSlotRender(icon), _jsx("span", __assign({
       className: "ncua-tag__text"
     }, {
-      children: text
+      children: displayText
     })), count && _jsx("span", __assign({
       className: "ncua-tag__count"
     }, {
@@ -65,6 +145,15 @@ export var Tag = function (_a) {
         width: iconSize[size],
         height: iconSize[size]
       })
+    })), shouldTruncate && isTooltipVisible && _jsx("span", __assign({
+      ref: tooltipRef,
+      className: classNames('ncua-tag__tooltip', "ncua-tag__tooltip--".concat(calculatedPosition))
+    }, {
+      children: _jsx("span", __assign({
+        className: "ncua-tag__tooltip-content"
+      }, {
+        children: text
+      }))
     }))]
   }));
 };

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

@@ -9,27 +9,48 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HelpCircle, HelpCircleFill } from '@ncds/ui-admin-icon';
+import { AlertCircle, AlertCircleFill, HelpCircle, HelpCircleFill } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
-var tooltipContent = function (_a) {
-  var title = _a.title,
-    content = _a.content,
-    tooltipType = _a.tooltipType,
-    position = _a.position;
-  return _jsxs("span", __assign({
-    className: classNames("ncua-tooltip__bg", "ncua-tooltip__bg--".concat(tooltipType), "ncua-tooltip__bg--".concat(position))
-  }, {
-    children: [title && _jsx("span", __assign({
-      className: "ncua-tooltip__title"
-    }, {
-      children: title
-    })), content && _jsx("span", {
-      className: "ncua-tooltip__content",
-      dangerouslySetInnerHTML: {
-        __html: content
+import { useRef, useState, useCallback, useMemo } from 'react';
+import { ButtonCloseX } from '../button/ButtonCloseX';
+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;
 };
 export var Tooltip = function (_a) {
   var _b = _a.tooltipType,
@@ -37,30 +58,117 @@ export 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,
+    _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' ? 14 : 16;
+  var tooltipRef = useRef(null);
+  var tooltipBgRef = useRef(null);
+  var _k = useState(position === 'auto' ? 'bottom' : position),
+    calculatedPosition = _k[0],
+    setCalculatedPosition = _k[1];
+  var _l = useState(false),
+    isVisible = _l[0],
+    setIsVisible = _l[1];
+  var _m = useState(false),
+    isManuallyClose = _m[0],
+    setIsManuallyClose = _m[1];
+  var _o = useState(false),
+    isMeasuring = _o[0],
+    setIsMeasuring = _o[1];
+  var handleMouseEnter = 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 = useCallback(function () {
+    if (type === 'short') {
+      setIsVisible(false);
+    }
+    setIsManuallyClose(false);
+  }, [type]);
+  var handleCloseClick = useCallback(function () {
+    setIsVisible(false);
+    setIsManuallyClose(true);
+  }, []);
+  var finalPosition = position === 'auto' ? calculatedPosition : position;
+  var tooltipClassName = useMemo(function () {
+    return classNames('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 = useMemo(function () {
+    return classNames('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 _jsxs("span", __assign({
-    className: classNames('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' ? _jsx(HelpCircle, {
+    children: [iconStyle === 'help-circle' && (iconType === 'stroke' ? _jsx(HelpCircle, {
       width: iconSize,
       height: iconSize,
-      color: "var(--gray-300"
+      color: iconColor
     }) : _jsx(HelpCircleFill, {
       width: iconSize,
       height: iconSize,
-      color: "var(--gray-300)"
-    }), tooltipContent({
-      tooltipType: tooltipType,
-      position: position,
-      title: title,
-      content: content
-    })]
+      color: iconColor
+    })), iconStyle === 'alert-circle' && (iconType === 'stroke' ? _jsx(AlertCircle, {
+      width: iconSize,
+      height: iconSize,
+      color: iconColor
+    }) : _jsx(AlertCircleFill, {
+      width: iconSize,
+      height: iconSize,
+      color: iconColor
+    })), _jsxs("span", __assign({
+      ref: tooltipBgRef,
+      className: tooltipBgClassName
+    }, {
+      children: [title && _jsx("span", __assign({
+        className: "ncua-tooltip__title"
+      }, {
+        children: title
+      })), content && _jsx("span", __assign({
+        className: "ncua-tooltip__content"
+      }, {
+        children: content
+      })), type === 'long' && _jsx(ButtonCloseX, {
+        className: "ncua-tooltip__close-button",
+        size: "xs",
+        theme: tooltipType === 'white' ? 'dark' : 'light',
+        onClick: handleCloseClick,
+        "aria-label": "\uD234\uD301 \uB2EB\uAE30"
+      })]
+    }))]
   }));
 };

package/dist/esm/src/hooks/dropdown/index.js

@@ -0,0 +1,6 @@
+export { useDropdown } from './useDropdown';
+export { useDropdownKeyboard } from './useDropdownKeyboard';
+export { useDropdownPosition } from './useDropdownPosition';
+export { useOutsideClick } from './useOutsideClick';
+export { useScrollLock } from './useScrollLock';
+export { useWindowResize } from './useWindowResize';

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

@@ -0,0 +1,102 @@
+import { useCallback, useState } from 'react';
+import { useDropdownKeyboard } from './useDropdownKeyboard';
+import { useDropdownPosition } from './useDropdownPosition';
+import { useOutsideClick } from './useOutsideClick';
+import { useWindowResize } from './useWindowResize';
+/**
+ * 드롭다운 기능을 통합한 커스텀 훅
+ */
+export 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 = useState(false),
+    isOpen = _c[0],
+    setIsOpen = _c[1];
+  var _d = useState(-1),
+    focusedIndex = _d[0],
+    setFocusedIndex = _d[1];
+  // 드롭다운 위치 계산
+  var _e = useDropdownPosition({
+      triggerRef: triggerRef,
+      maxHeight: maxHeight,
+      itemCount: itemCount
+    }),
+    direction = _e.direction,
+    updatePosition = _e.updatePosition;
+  // 드롭다운 토글
+  var toggleDropdown = 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 = useCallback(function () {
+    setIsOpen(false);
+    setFocusedIndex(-1);
+    onChange === null || onChange === void 0 ? void 0 : onChange(false);
+  }, [onChange]);
+  // 옵션 선택 처리
+  var handleOptionSelect = useCallback(function (option) {
+    onSelect(option);
+    // multiple 모드가 아니어야 드롭다운을 닫음
+    if (!multiple) {
+      closeDropdown();
+    }
+  }, [onSelect, closeDropdown, multiple]);
+  // 키보드 이벤트 처리
+  var _f = 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];
+  useOutsideClick({
+    isOpen: isOpen,
+    refs: refs,
+    onClose: closeDropdown
+  });
+  // 윈도우 리사이즈 시 위치 재계산
+  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
+  };
+};

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

@@ -0,0 +1,124 @@
+import { useCallback, useRef } from 'react';
+import { calculateNextFocusIndex } from '../../utils/dropdown';
+/**
+ * 드롭다운 키보드 네비게이션을 위한 커스텀 훅
+ */
+export 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 = useRef(false);
+  // 포커스된 옵션이 보이도록 스크롤 조정
+  var scrollToFocusedOption = 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 = 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 = 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 = 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 = useCallback(function () {
+    isKeyboardNavigationRef.current = false;
+  }, []);
+  // 키보드 네비게이션 상태 확인 함수
+  var isKeyboardNavigation = useCallback(function () {
+    return isKeyboardNavigationRef.current;
+  }, []);
+  return {
+    handleKeyDown: handleKeyDown,
+    handleMouseMove: handleMouseMove,
+    isKeyboardNavigation: isKeyboardNavigation
+  };
+};

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

@@ -0,0 +1,20 @@
+import { useCallback, useState } from 'react';
+import { calculateDropdownPosition } from '../../utils/dropdown';
+/**
+ * 드롭다운 위치 계산을 위한 커스텀 훅
+ */
+export var useDropdownPosition = function (config) {
+  var _a = useState('down'),
+    direction = _a[0],
+    setDirection = _a[1];
+  var updatePosition = useCallback(function () {
+    var result = calculateDropdownPosition(config);
+    setDirection(result.direction);
+    return result;
+  }, [config]);
+  return {
+    direction: direction,
+    updatePosition: updatePosition,
+    setDirection: setDirection
+  };
+};

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

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+/**
+ * 외부 클릭 감지를 위한 커스텀 훅
+ */
+export var useOutsideClick = function (config) {
+  var isOpen = config.isOpen,
+    refs = config.refs,
+    onClose = config.onClose;
+  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]);
+};

package/dist/esm/src/hooks/dropdown/useScrollLock.js

@@ -0,0 +1,71 @@
+import { useEffect, useRef } from 'react';
+import { findScrollableParent } from '../../utils';
+/**
+ * 페이지 스크롤을 잠그는 커스텀 훅 (드롭다운 내부 스크롤은 허용)
+ */
+export var useScrollLock = function (isLocked, dropdownRef) {
+  var scrollPosition = useRef(0);
+  useEffect(function () {
+    if (isLocked) {
+      // 현재 스크롤 위치 저장
+      scrollPosition.current = window.pageYOffset;
+      // 스크롤 방지 함수 (드롭다운 내부는 스크롤 체이닝 방지)
+      var preventScroll_1 = function (e) {
+        // 드롭다운 내부에서 발생하지 않은 이벤트는 차단
+        if (!(dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) || !dropdownRef.current.contains(e.target)) {
+          e.preventDefault();
+          return;
+        }
+        // 드롭다운 내부의 스크롤 가능한 요소 찾기
+        var scrollableElement = findScrollableParent(e.target, dropdownRef.current);
+        if (scrollableElement && e instanceof WheelEvent) {
+          var deltaY = e.deltaY;
+          var scrollTop = scrollableElement.scrollTop,
+            scrollHeight = scrollableElement.scrollHeight,
+            clientHeight = scrollableElement.clientHeight;
+          // 스크롤이 위쪽 끝에 도달했고 위로 스크롤하려는 경우
+          if (scrollTop === 0 && deltaY < 0) {
+            e.preventDefault();
+            return;
+          }
+          // 스크롤이 아래쪽 끝에 도달했고 아래로 스크롤하려는 경우
+          if (scrollTop + clientHeight >= scrollHeight && deltaY > 0) {
+            e.preventDefault();
+            return;
+          }
+        }
+        // 드롭다운 내부에 스크롤 가능한 요소가 없으면 차단
+        if (!scrollableElement) {
+          e.preventDefault();
+        }
+      };
+      // 키보드 스크롤 방지 함수 (드롭다운 내부는 제외)
+      var preventKeyboardScroll_1 = function (e) {
+        // 드롭다운 내부에서 발생한 이벤트는 허용
+        if ((dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) && dropdownRef.current.contains(e.target)) {
+          return;
+        }
+        var scrollKeys = ['PageUp', 'PageDown', 'Home', 'End', ' '];
+        if (scrollKeys.includes(e.key)) {
+          e.preventDefault();
+        }
+      };
+      // 이벤트 리스너 추가
+      document.addEventListener('wheel', preventScroll_1, {
+        passive: false
+      });
+      document.addEventListener('touchmove', preventScroll_1, {
+        passive: false
+      });
+      document.addEventListener('keydown', preventKeyboardScroll_1);
+      return function () {
+        // 이벤트 리스너 제거
+        document.removeEventListener('wheel', preventScroll_1);
+        document.removeEventListener('touchmove', preventScroll_1);
+        document.removeEventListener('keydown', preventKeyboardScroll_1);
+        // 스크롤 위치 복원
+        window.scrollTo(0, scrollPosition.current);
+      };
+    }
+  }, [isLocked, dropdownRef]);
+};