@ncds/ui-admin 1.3.0 → 1.5.0

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,118 @@ 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 = (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 () {
+    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, {
+    children: [iconStyle === 'help-circle' && (iconType === 'stroke' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
       width: iconSize,
       height: iconSize,
-      color: "var(--gray-300"
+      color: iconColor
     }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.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' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.AlertCircle, {
+      width: iconSize,
+      height: iconSize,
+      color: iconColor
+    }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.AlertCircleFill, {
+      width: iconSize,
+      height: iconSize,
+      color: iconColor
+    })), (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", __assign({
+        className: "ncua-tooltip__content"
+      }, {
+        children: 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;

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

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useScrollLock = void 0;
+var _react = require("react");
+var _utils = require("../../utils");
+/**
+ * 페이지 스크롤을 잠그는 커스텀 훅 (드롭다운 내부 스크롤은 허용)
+ */
+var useScrollLock = function (isLocked, dropdownRef) {
+  var scrollPosition = (0, _react.useRef)(0);
+  (0, _react.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 = (0, _utils.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]);
+};
+exports.useScrollLock = useScrollLock;

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

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWindowResize = void 0;
+var _react = require("react");
+/**
+ * Resize Observer를 사용하여 요소의 크기 변화를 감지하는 커스텀 훅
+ * @param callback 크기 변화 시 실행될 콜백 함수
+ * @param isActive 옵저버 활성화 여부
+ * @param target 관찰할 대상 요소 (기본값: document.body)
+ */
+var useWindowResize = function (callback, isActive, target) {
+  if (isActive === void 0) {
+    isActive = true;
+  }
+  var resizeObserverRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (!isActive) return;
+    // Resize Observer 지원 여부 확인
+    if (!window.ResizeObserver) {
+      // Resize Observer를 지원하지 않는 브라우저의 경우 기존 방식 사용
+      var handleResize_1 = function () {
+        callback();
+      };
+      window.addEventListener('resize', handleResize_1);
+      return function () {
+        window.removeEventListener('resize', handleResize_1);
+      };
+    }
+    // Resize Observer 생성
+    resizeObserverRef.current = new ResizeObserver(function (entries) {
+      // entries가 비어있지 않을 때만 콜백 실행
+      if (entries.length > 0) {
+        callback();
+      }
+    });
+    // 관찰할 대상 요소 결정
+    var targetElement = target || document.body;
+    if (targetElement) {
+      resizeObserverRef.current.observe(targetElement);
+    }
+    return function () {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+    };
+  }, [callback, isActive, target]);
+};
+exports.useWindowResize = useWindowResize;