@ncds/ui-admin 1.3.0 → 1.4.1

package/dist/esm/src/components/tab/TabButton.js

@@ -16,11 +16,13 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { Badge } from '../badge/Badge';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 export var TabButton = function (_a) {
-  var label = _a.label,
+  var id = _a.id,
+    label = _a.label,
     _b = _a.size,
     size = _b === void 0 ? 'sm' : _b,
     tabButtonType = _a.tabButtonType,
@@ -30,9 +32,8 @@ export var TabButton = function (_a) {
     badgeInfo = _a.badgeInfo,
     className = _a.className,
     children = _a.children,
-    props = __rest(_a, ["label", "size", "tabButtonType", "type", "isActive", "badgeInfo", "className", "children"]);
-  var tabType = tabButtonType || type;
-  var componentClassName = classNames('ncua-tab-button', "ncua-tab-button--".concat(size), "ncua-tab-button--".concat(tabType || 'button-primary'), {
+    props = __rest(_a, ["id", "label", "size", "tabButtonType", "type", "isActive", "badgeInfo", "className", "children"]);
+  var componentClassName = classNames('ncua-tab-button', {
     'is-active': isActive
   }, className);
   if ('href' in props && props.href) {
@@ -45,8 +46,7 @@ export var TabButton = function (_a) {
     return _jsxs("a", __assign({
       className: componentClassName,
       href: href,
-      target: target,
-      onClick: onClick_1
+      target: target
     }, anchorProps, {
       children: [label, badgeInfo && _jsx(Badge, __assign({}, badgeInfo, {
         size: "xs"
@@ -55,14 +55,31 @@ export var TabButton = function (_a) {
   }
   var _f = props,
     onClick = _f.onClick,
-    buttonProps = __rest(_f, ["onClick"]);
-  return _jsxs("button", __assign({
-    type: "button",
-    className: componentClassName,
-    onClick: onClick
-  }, buttonProps, {
-    children: [label, badgeInfo && _jsx(Badge, __assign({}, badgeInfo, {
-      size: "xs"
-    })), children]
-  }));
+    onClose = _f.onClose,
+    buttonProps = __rest(_f, ["onClick", "onClose"]);
+  return _jsxs(_Fragment, {
+    children: [_jsxs("button", __assign({
+      type: "button",
+      className: componentClassName,
+      onClick: function () {
+        return onClick === null || onClick === void 0 ? void 0 : onClick(id !== null && id !== void 0 ? id : '');
+      }
+    }, buttonProps, {
+      children: [label, badgeInfo && _jsx(Badge, __assign({}, badgeInfo, {
+        size: "xs"
+      })), children]
+    })), onClose && _jsx("button", __assign({
+      type: "button",
+      className: "ncua-tab-close",
+      onClick: function () {
+        return onClose === null || onClose === void 0 ? void 0 : onClose(id !== null && id !== void 0 ? id : '');
+      }
+    }, {
+      children: _jsx(Icon, {
+        name: "x-close",
+        width: 14,
+        height: 14
+      })
+    }))]
+  });
 };

package/dist/esm/src/components/tab/VerticalTab.js

@@ -10,7 +10,6 @@ var __assign = this && this.__assign || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { Fragment } from 'react';
 import { Select } from '../select/Select';
 import { TabButton } from './TabButton';
 export var VerticalTab = function (_a) {
@@ -20,9 +19,9 @@ export var VerticalTab = function (_a) {
     breakPoint = _c === void 0 ? 'pc' : _c,
     activeTab = _a.activeTab,
     menus = _a.menus,
-    onClick = _a.onClick;
+    onSelect = _a.onSelect;
   var handleSelectChange = function (e) {
-    onClick === null || onClick === void 0 ? void 0 : onClick(e.target.value);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(e.target.value);
   };
   var optionItems = (menus === null || menus === void 0 ? void 0 : menus.map(function (menu) {
     return {
@@ -30,38 +29,24 @@ export var VerticalTab = function (_a) {
       label: menu.label || ''
     };
   })) || [];
+  if (breakPoint === 'mobile') {
+    return _jsx(Select, {
+      value: activeTab,
+      onChange: handleSelectChange,
+      optionItems: optionItems,
+      size: "md"
+    });
+  }
   return _jsx("div", __assign({
     className: classNames('ncua-vertical-tab', "ncua-vertical-tab--".concat(type))
   }, {
-    children: breakPoint === 'mobile' ? _jsx("div", __assign({
-      className: "ncua-vertical-tab__select"
-    }, {
-      children: _jsx(Select, {
-        value: activeTab,
-        onChange: handleSelectChange,
-        optionItems: optionItems,
-        size: "md"
-      })
-    })) : menus === null || menus === void 0 ? void 0 : menus.map(function (menu) {
-      var isActive = menu.href ? menu.href.includes(activeTab) : menu.id === activeTab;
-      var commonProps = {
-        id: menu.id,
-        label: menu.label,
-        badgeInfo: menu.badgeInfo,
+    children: menus === null || menus === void 0 ? void 0 : menus.map(function (menu) {
+      var isActive = 'href' in menu && menu.href ? menu.href.includes(activeTab) : menu.id === activeTab;
+      return _jsx(TabButton, __assign({}, menu, {
         isActive: isActive,
         tabButtonType: type,
-        size: 'md',
-        onClick: function () {
-          var _a;
-          return onClick === null || onClick === void 0 ? void 0 : onClick((_a = menu.id) !== null && _a !== void 0 ? _a : '');
-        }
-      };
-      return _jsx(Fragment, {
-        children: menu.href ? _jsx(TabButton, __assign({}, commonProps, {
-          href: menu.href,
-          target: menu.target
-        })) : _jsx(TabButton, __assign({}, commonProps))
-      }, menu.id);
+        size: "md"
+      }), menu.id);
     })
   }));
 };

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

@@ -11,25 +11,46 @@ var __assign = this && this.__assign || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { 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,106 @@ 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,
+    className = _a.className;
   var iconSize = size === 'sm' ? 14 : 16;
+  var tooltipRef = useRef(null);
+  var tooltipBgRef = useRef(null);
+  var _h = useState(position === 'auto' ? 'bottom' : position),
+    calculatedPosition = _h[0],
+    setCalculatedPosition = _h[1];
+  var _j = useState(false),
+    isVisible = _j[0],
+    setIsVisible = _j[1];
+  var _k = useState(false),
+    isManuallyClose = _k[0],
+    setIsManuallyClose = _k[1];
+  var _l = useState(false),
+    isMeasuring = _l[0],
+    setIsMeasuring = _l[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, {
       width: iconSize,
       height: iconSize,
-      color: "var(--gray-300"
+      color: "var(--gray-300)"
     }) : _jsx(HelpCircleFill, {
       width: iconSize,
       height: iconSize,
       color: "var(--gray-300)"
-    }), tooltipContent({
-      tooltipType: tooltipType,
-      position: position,
-      title: title,
-      content: content
-    })]
+    }), _jsxs("span", __assign({
+      ref: tooltipBgRef,
+      className: tooltipBgClassName
+    }, {
+      children: [title && _jsx("span", __assign({
+        className: "ncua-tooltip__title"
+      }, {
+        children: title
+      })), content && _jsx("span", {
+        className: "ncua-tooltip__content",
+        dangerouslySetInnerHTML: {
+          __html: 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
+  };
+};