@ncds/ui-admin 1.6.4 → 1.8.0

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

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, AlertCircleFill, HelpCircle, HelpCircleFill } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { ButtonCloseX } from '../button/ButtonCloseX';
+const ICON_SIZE_SM = 14;
+const ICON_SIZE_DEFAULT = 16;
+const MARGIN = 10;
+const DEFAULT_TOOLTIP_WIDTH = 200;
+const DEFAULT_TOOLTIP_HEIGHT = 60;
+const POSITION_PRIORITY = ['bottom', 'top', 'right', 'left'];
+// 수직 위치(top/bottom)일 때 수평 정렬 보정
+const resolveVerticalAlignment = (position, triggerRect, tooltipWidth, viewportWidth) => {
+    const centerX = triggerRect.left + triggerRect.width / 2;
+    const tooltipHalfWidth = tooltipWidth / 2;
+    if (centerX - tooltipHalfWidth < MARGIN) {
+        return `${position}-left`;
+    }
+    if (centerX + tooltipHalfWidth > viewportWidth - MARGIN) {
+        return `${position}-right`;
+    }
+    return position;
+};
+// 해당 위치에 툴팁을 배치할 충분한 공간이 있는지 확인
+const hasEnoughSpace = (position, spaces, tooltipWidth, tooltipHeight) => {
+    const isVertical = position === 'bottom' || position === 'top';
+    const requiredSpace = isVertical ? tooltipHeight : tooltipWidth;
+    return spaces[position] >= requiredSpace + MARGIN;
+};
+// 위치 계산 position='auto' 일 때 사용
+const calculateOptimalPosition = (triggerElement, tooltipElement, preferredPosition = 'bottom') => {
+    const triggerRect = triggerElement.getBoundingClientRect();
+    const tooltipRect = tooltipElement.getBoundingClientRect();
+    const { innerWidth: viewportWidth, innerHeight: viewportHeight } = window;
+    const spaces = {
+        top: triggerRect.top,
+        bottom: viewportHeight - triggerRect.bottom,
+        left: triggerRect.left,
+        right: viewportWidth - triggerRect.right,
+    };
+    const tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
+    const tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
+    for (const position of POSITION_PRIORITY) {
+        if (!hasEnoughSpace(position, spaces, tooltipWidth, tooltipHeight)) {
+            continue;
+        }
+        const isVertical = position === 'bottom' || position === 'top';
+        if (isVertical) {
+            return resolveVerticalAlignment(position, triggerRect, tooltipWidth, viewportWidth);
+        }
+        return position;
+    }
+    return preferredPosition;
+};
+export const Tooltip = ({ tooltipType = 'white', iconType = 'stroke', position = 'auto', size = 'sm', title, content, hideArrow = false, type = 'short', iconColor = 'var(--gray-300)', iconStyle = 'help-circle', className, }) => {
+    const iconSize = size === 'sm' ? ICON_SIZE_SM : ICON_SIZE_DEFAULT;
+    const tooltipRef = useRef(null);
+    const tooltipBgRef = useRef(null);
+    const [calculatedPosition, setCalculatedPosition] = useState(position === 'auto' ? 'bottom' : position);
+    const [isVisible, setIsVisible] = useState(false);
+    const [isManuallyClose, setIsManuallyClose] = useState(false);
+    const [isMeasuring, setIsMeasuring] = useState(false);
+    const handleMouseEnter = useCallback(() => {
+        if (isManuallyClose)
+            return;
+        setIsVisible(true);
+        if (position === 'auto' && tooltipRef.current && tooltipBgRef.current) {
+            // 크기 측정을 위해 임시로 measuring 클래스 추가
+            setIsMeasuring(true);
+            // 다음 렌더링 사이클에서 크기 측정
+            setTimeout(() => {
+                if (tooltipRef.current && tooltipBgRef.current) {
+                    const optimalPosition = calculateOptimalPosition(tooltipRef.current, tooltipBgRef.current, 'bottom');
+                    setCalculatedPosition(optimalPosition);
+                    setIsMeasuring(false);
+                }
+            }, 0);
+        }
+    }, [position, isManuallyClose]);
+    const handleMouseLeave = useCallback(() => {
+        if (type === 'short') {
+            setIsVisible(false);
+        }
+        setIsManuallyClose(false);
+    }, [type]);
+    const handleCloseClick = useCallback(() => {
+        setIsVisible(false);
+        setIsManuallyClose(true);
+    }, []);
+    const finalPosition = position === 'auto' ? calculatedPosition : position;
+    const tooltipClassName = useMemo(() => classNames('ncua-tooltip', `ncua-tooltip--${size}`, `ncua-tooltip--${type}`, {
+        'ncua-tooltip--hidden-arrow': hideArrow,
+        'ncua-tooltip--stroke': iconType === 'stroke',
+        'ncua-tooltip--auto': position === 'auto',
+    }, className), [size, type, hideArrow, iconType, position, className]);
+    const tooltipBgClassName = useMemo(() => classNames('ncua-tooltip__bg', `ncua-tooltip__bg--${tooltipType}`, `ncua-tooltip__bg--${finalPosition}`, {
+        'ncua-tooltip__bg--visible': isVisible,
+        'ncua-tooltip__bg--measuring': isMeasuring,
+        'ncua-tooltip__bg--force-hidden': isManuallyClose,
+    }), [tooltipType, finalPosition, isVisible, isMeasuring, isManuallyClose]);
+    return (_jsxs("span", { ref: tooltipRef, className: tooltipClassName, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [iconStyle === 'help-circle' &&
+                (iconType === 'stroke' ? (_jsx(HelpCircle, { width: iconSize, height: iconSize, color: iconColor })) : (_jsx(HelpCircleFill, { width: iconSize, height: iconSize, 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", { ref: tooltipBgRef, className: tooltipBgClassName, children: [title && _jsx("span", { className: "ncua-tooltip__title", children: title }), content && _jsx("span", { 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/temp/src/components/tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './Tooltip';

package/dist/temp/src/components/tooltip/index.js

@@ -0,0 +1 @@
+export * from './Tooltip';

package/dist/{types/src/components/tab → temp/src/components/vertical-tab}/VerticalTab.d.ts

@@ -1,10 +1,9 @@
-import { TabButtonProps } from './TabButton';
+import { type TabButtonProps } from '../tab/TabButton';
 export type VerticalTabProps = {
     type?: 'button-primary' | 'button-white' | 'line-vertical';
     breakPoint?: 'mobile' | 'pc';
     activeTab?: string;
-    menus?: Array<TabButtonProps>;
+    menus?: TabButtonProps[];
     onSelect?: (value: string) => void;
 };
 export declare const VerticalTab: ({ type, breakPoint, activeTab, menus, onSelect, }: VerticalTabProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=VerticalTab.d.ts.map

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Select } from '../select/Select';
+import { TabButton } from '../tab/TabButton';
+export const VerticalTab = ({ type = 'button-primary', breakPoint = 'pc', activeTab, menus, onSelect, }) => {
+    const handleSelectChange = (e) => {
+        onSelect?.(e.target.value);
+    };
+    const optionItems = menus?.map((menu) => ({
+        id: menu.id || '',
+        label: menu.label || '',
+    })) || [];
+    if (breakPoint === 'mobile') {
+        return _jsx(Select, { value: activeTab, onChange: handleSelectChange, optionItems: optionItems, size: "md" });
+    }
+    return (_jsx("div", { className: classNames('ncua-vertical-tab', `ncua-vertical-tab--${type}`), children: menus?.map((menu) => {
+            const isActive = 'href' in menu && menu.href ? menu.href === activeTab : menu.id === activeTab;
+            return _jsx(TabButton, { ...menu, isActive: isActive, tabButtonType: type, size: "md" }, menu.id);
+        }) }));
+};

package/dist/temp/src/components/vertical-tab/index.d.ts

@@ -0,0 +1 @@
+export * from './VerticalTab';

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

@@ -0,0 +1 @@
+export * from './VerticalTab';

package/dist/temp/src/constant/breakpoint.d.ts

@@ -0,0 +1,6 @@
+export declare const BREAKPOINT: {
+    readonly mobile: "768px";
+};
+export declare const MEDIA_QUERY: {
+    readonly mobile: "(max-width: 768px)";
+};

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

@@ -0,0 +1,6 @@
+export const BREAKPOINT = {
+    mobile: '768px',
+};
+export const MEDIA_QUERY = {
+    mobile: `(max-width: ${BREAKPOINT.mobile})`,
+};

package/dist/temp/src/constant/date-picker.d.ts

@@ -0,0 +1,63 @@
+export type PeriodItem = {
+    text: string;
+    period: number;
+    unit: string | null;
+};
+export type PeriodItemMap = Record<string, PeriodItem>;
+export declare const PERIOD_ITEM: {
+    TODAY: {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    YESTERDAY: {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '3DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '7DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1WEEK': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '15DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1MONTHS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '3MONTHS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1YEAR': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    ENTIRE: {
+        text: string;
+        period: number;
+        unit: null;
+    };
+    NONE: {
+        text: string;
+        period: number;
+        unit: null;
+    };
+};

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

@@ -0,0 +1,53 @@
+export const PERIOD_ITEM = {
+    TODAY: {
+        text: '오늘',
+        period: 0,
+        unit: 'days',
+    },
+    YESTERDAY: {
+        text: '어제',
+        period: 1,
+        unit: 'days',
+    },
+    '3DAYS': {
+        text: '3일',
+        period: 3,
+        unit: 'days',
+    },
+    '7DAYS': {
+        text: '7일',
+        period: 7,
+        unit: 'days',
+    },
+    '1WEEK': {
+        text: '1주일',
+        period: 1,
+        unit: 'week',
+    },
+    '15DAYS': {
+        text: '15일',
+        period: 15,
+        unit: 'days',
+    },
+    '1MONTHS': {
+        text: '1개월',
+        period: 1,
+        unit: 'months',
+    },
+    '3MONTHS': {
+        text: '3개월',
+        period: 3,
+        unit: 'months',
+    },
+    '1YEAR': {
+        text: '1년',
+        period: 1,
+        unit: 'years',
+    },
+    ENTIRE: {
+        text: '전체',
+        period: 0,
+        unit: null,
+    },
+    NONE: { text: '', period: 0, unit: null },
+};

package/dist/temp/src/constant/index.d.ts

@@ -0,0 +1,2 @@
+export * from './date-picker';
+export * from './size';

package/dist/temp/src/constant/index.js

@@ -0,0 +1,2 @@
+export * from './date-picker';
+export * from './size';

package/dist/temp/src/constant/size.d.ts

@@ -0,0 +1 @@
+export declare const MINIMUM_PC_SIZE = 768;

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

@@ -0,0 +1 @@
+export const MINIMUM_PC_SIZE = 768;

package/dist/temp/src/hooks/dropdown/index.d.ts

@@ -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/temp/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/temp/src/hooks/dropdown/useDropdown.d.ts

@@ -0,0 +1,29 @@
+import { type RefObject } from 'react';
+interface UseDropdownConfig<T = any> {
+    triggerRef: RefObject<HTMLElement>;
+    dropdownRef?: RefObject<HTMLElement>;
+    maxHeight: number;
+    itemCount: number;
+    optionItems: T[];
+    disabled?: boolean;
+    multiple?: boolean;
+    onSelect: (option: T) => void;
+    onChange?: (isOpen: boolean) => void;
+}
+/**
+ * 드롭다운 기능을 통합한 커스텀 훅
+ */
+export declare const useDropdown: <T = any>(config: UseDropdownConfig<T>) => {
+    isOpen: boolean;
+    direction: import("../../types").DropdownDirection;
+    focusedIndex: number;
+    toggleDropdown: () => void;
+    closeDropdown: () => void;
+    handleOptionSelect: (option: T) => void;
+    handleKeyDown: (e: import("react").KeyboardEvent<HTMLElement>) => void;
+    setFocusedIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    handleMouseMove: () => void;
+    isKeyboardNavigation: () => boolean;
+    updatePosition: () => import("../../types").DropdownPositionResult;
+};
+export {};

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

@@ -0,0 +1,84 @@
+import { useCallback, useState } from 'react';
+import { useDropdownKeyboard } from './useDropdownKeyboard';
+import { useDropdownPosition } from './useDropdownPosition';
+import { useOutsideClick } from './useOutsideClick';
+import { useWindowResize } from './useWindowResize';
+/**
+ * 드롭다운 기능을 통합한 커스텀 훅
+ */
+export const useDropdown = (config) => {
+    const { triggerRef, dropdownRef, maxHeight, itemCount, optionItems, disabled = false, multiple = false, onSelect, onChange, } = config;
+    const [isOpen, setIsOpen] = useState(false);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    // 드롭다운 위치 계산
+    const { direction, updatePosition } = useDropdownPosition({
+        triggerRef,
+        maxHeight,
+        itemCount,
+    });
+    // 드롭다운 토글
+    const toggleDropdown = useCallback(() => {
+        if (disabled)
+            return;
+        const newIsOpen = !isOpen;
+        if (newIsOpen) {
+            updatePosition();
+            setFocusedIndex(-1);
+        }
+        setIsOpen(newIsOpen);
+        onChange?.(newIsOpen);
+    }, [disabled, isOpen, updatePosition, onChange]);
+    // 드롭다운 닫기
+    const closeDropdown = useCallback(() => {
+        setIsOpen(false);
+        setFocusedIndex(-1);
+        onChange?.(false);
+    }, [onChange]);
+    // 옵션 선택 처리
+    const handleOptionSelect = useCallback((option) => {
+        onSelect(option);
+        // multiple 모드가 아니어야 드롭다운을 닫음
+        if (!multiple) {
+            closeDropdown();
+        }
+    }, [onSelect, closeDropdown, multiple]);
+    // 키보드 이벤트 처리
+    const { handleKeyDown, handleMouseMove, isKeyboardNavigation } = useDropdownKeyboard({
+        isOpen,
+        disabled,
+        focusedIndex,
+        optionItems,
+        onToggle: toggleDropdown,
+        onSelect: handleOptionSelect,
+        onClose: closeDropdown,
+        onFocusChange: setFocusedIndex,
+        triggerRef,
+        dropdownRef,
+    });
+    // 외부 클릭 감지
+    const refs = dropdownRef ? [triggerRef, dropdownRef] : [triggerRef];
+    useOutsideClick({
+        isOpen,
+        refs,
+        onClose: closeDropdown,
+    });
+    // 윈도우 리사이즈 시 위치 재계산
+    useWindowResize(updatePosition, isOpen, triggerRef.current);
+    return {
+        // 상태
+        isOpen,
+        direction,
+        focusedIndex,
+        // 액션
+        toggleDropdown,
+        closeDropdown,
+        handleOptionSelect,
+        handleKeyDown,
+        setFocusedIndex,
+        // 키보드 네비게이션
+        handleMouseMove,
+        isKeyboardNavigation,
+        // 유틸리티
+        updatePosition,
+    };
+};

package/dist/temp/src/hooks/dropdown/useDropdownKeyboard.d.ts

@@ -0,0 +1,10 @@
+import { type KeyboardEvent } from 'react';
+import type { DropdownKeyboardConfig } from '../../types/dropdown';
+/**
+ * 드롭다운 키보드 네비게이션을 위한 커스텀 훅
+ */
+export declare const useDropdownKeyboard: <T = any>(config: DropdownKeyboardConfig<T>) => {
+    handleKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
+    handleMouseMove: () => void;
+    isKeyboardNavigation: () => boolean;
+};

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

@@ -0,0 +1,107 @@
+import { useCallback, useRef } from 'react';
+import { calculateNextFocusIndex } from '../../utils/dropdown';
+const SCROLL_DELAY_MS = 100;
+/**
+ * 드롭다운 키보드 네비게이션을 위한 커스텀 훅
+ */
+export const useDropdownKeyboard = (config) => {
+    const { isOpen, disabled, focusedIndex, optionItems, onToggle, onSelect, onClose, onFocusChange, triggerRef, dropdownRef, } = config;
+    // 키보드 네비게이션 플래그
+    const isKeyboardNavigationRef = useRef(false);
+    // 포커스된 옵션이 보이도록 스크롤 조정
+    const scrollToFocusedOption = useCallback((index) => {
+        if (!dropdownRef?.current || index < 0)
+            return;
+        const optionsList = dropdownRef.current.querySelector('.ncua-select-dropdown__options');
+        if (!optionsList)
+            return;
+        const options = optionsList.querySelectorAll('.ncua-select-dropdown__option');
+        const focusedOption = options[index];
+        if (!focusedOption)
+            return;
+        const optionsListRect = optionsList.getBoundingClientRect();
+        const 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]);
+    const handleEnterOrSpace = useCallback((e) => {
+        e.preventDefault();
+        if (!isOpen) {
+            onToggle();
+        }
+        else if (focusedIndex >= 0 && optionItems[focusedIndex]) {
+            onSelect(optionItems[focusedIndex]);
+        }
+    }, [isOpen, focusedIndex, optionItems, onToggle, onSelect]);
+    const handleEscape = useCallback((e) => {
+        if (isOpen) {
+            e.preventDefault();
+            onClose();
+            triggerRef?.current?.focus();
+        }
+    }, [isOpen, onClose, triggerRef]);
+    const handleArrowNavigation = useCallback((e, direction) => {
+        e.preventDefault();
+        isKeyboardNavigationRef.current = true;
+        if (isOpen) {
+            const nextIndex = calculateNextFocusIndex(focusedIndex, direction, optionItems.length);
+            onFocusChange(nextIndex);
+            setTimeout(() => scrollToFocusedOption(nextIndex), SCROLL_DELAY_MS);
+        }
+        else {
+            onToggle();
+        }
+    }, [isOpen, focusedIndex, optionItems.length, onFocusChange, onToggle, scrollToFocusedOption]);
+    const handleHomeEnd = useCallback((e, targetIndex) => {
+        if (isOpen) {
+            e.preventDefault();
+            isKeyboardNavigationRef.current = true;
+            onFocusChange(targetIndex);
+            setTimeout(() => scrollToFocusedOption(targetIndex), 0);
+        }
+    }, [isOpen, onFocusChange, scrollToFocusedOption]);
+    const handleKeyDown = useCallback((e) => {
+        if (disabled)
+            return;
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+                handleEnterOrSpace(e);
+                break;
+            case 'Escape':
+                handleEscape(e);
+                break;
+            case 'ArrowDown':
+                handleArrowNavigation(e, 'down');
+                break;
+            case 'ArrowUp':
+                handleArrowNavigation(e, 'up');
+                break;
+            case 'Home':
+                handleHomeEnd(e, 0);
+                break;
+            case 'End':
+                handleHomeEnd(e, optionItems.length - 1);
+                break;
+        }
+    }, [disabled, optionItems.length, handleEnterOrSpace, handleEscape, handleArrowNavigation, handleHomeEnd]);
+    // 마우스 움직임 감지 함수
+    const handleMouseMove = useCallback(() => {
+        isKeyboardNavigationRef.current = false;
+    }, []);
+    // 키보드 네비게이션 상태 확인 함수
+    const isKeyboardNavigation = useCallback(() => {
+        return isKeyboardNavigationRef.current;
+    }, []);
+    return {
+        handleKeyDown,
+        handleMouseMove,
+        isKeyboardNavigation,
+    };
+};

package/dist/temp/src/hooks/dropdown/useDropdownPosition.d.ts

@@ -0,0 +1,9 @@
+import type { DropdownDirection, DropdownPositionConfig } from '../../types/dropdown';
+/**
+ * 드롭다운 위치 계산을 위한 커스텀 훅
+ */
+export declare const useDropdownPosition: (config: DropdownPositionConfig) => {
+    direction: DropdownDirection;
+    updatePosition: () => import("../../types/dropdown").DropdownPositionResult;
+    setDirection: import("react").Dispatch<import("react").SetStateAction<DropdownDirection>>;
+};

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

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

package/dist/temp/src/hooks/dropdown/useOutsideClick.d.ts

@@ -0,0 +1,5 @@
+import type { DropdownOutsideClickConfig } from '../../types/dropdown';
+/**
+ * 외부 클릭 감지를 위한 커스텀 훅
+ */
+export declare const useOutsideClick: (config: DropdownOutsideClickConfig) => void;

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

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+/**
+ * 외부 클릭 감지를 위한 커스텀 훅
+ */
+export const useOutsideClick = (config) => {
+    const { isOpen, refs, onClose } = config;
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            // 모든 ref들에 대해 클릭이 외부에서 발생했는지 확인
+            const isOutside = refs.every((ref) => !ref.current || !ref.current.contains(target));
+            if (isOutside) {
+                onClose();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen, refs, onClose]);
+};

package/dist/temp/src/hooks/dropdown/useScrollLock.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 페이지 스크롤을 잠그는 커스텀 훅 (드롭다운 내부 스크롤은 허용)
+ */
+export declare const useScrollLock: (isLocked: boolean, dropdownRef?: React.RefObject<HTMLElement>) => void;