@ncds/ui-admin 1.6.4 → 1.8.0

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

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

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

@@ -0,0 +1,7 @@
+/**
+ * Resize Observer를 사용하여 요소의 크기 변화를 감지하는 커스텀 훅
+ * @param callback 크기 변화 시 실행될 콜백 함수
+ * @param isActive 옵저버 활성화 여부
+ * @param target 관찰할 대상 요소 (기본값: document.body)
+ */
+export declare const useWindowResize: (callback: () => void, isActive?: boolean, target?: HTMLElement | null) => void;

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

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

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

@@ -0,0 +1,4 @@
+export * from './dropdown';
+export { useCallbackRef } from './useCallbackRef';
+export { useMediaQuery } from './useMediaQuery';
+export { useMergeRefs } from './useMergeRefs';

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

@@ -0,0 +1,6 @@
+// 기존 공통 hooks
+// 드롭다운 관련 hooks
+export * from './dropdown';
+export { useCallbackRef } from './useCallbackRef';
+export { useMediaQuery } from './useMediaQuery';
+export { useMergeRefs } from './useMergeRefs';

package/dist/temp/src/hooks/useCallbackRef.d.ts

@@ -0,0 +1,27 @@
+/**
+ * A callback ref hook that supports cleanup functions.
+ * This is useful when you need to perform setup/cleanup operations when the ref changes.
+ *
+ * @param callback - Function that receives the node and optionally returns a cleanup function
+ * @returns A callback ref
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *   const ref = useCallbackRef<HTMLInputElement>((node) => {
+ *     if (node) {
+ *       const handleInput = () => console.log('input changed');
+ *       node.addEventListener('input', handleInput);
+ *
+ *       // Return cleanup function
+ *       return () => {
+ *         node.removeEventListener('input', handleInput);
+ *       };
+ *     }
+ *   });
+ *
+ *   return <input ref={ref} />;
+ * };
+ * ```
+ */
+export declare function useCallbackRef<T>(callback: (node: T | null) => (() => void) | void): React.RefCallback<T>;

package/dist/temp/src/hooks/useCallbackRef.js

@@ -0,0 +1,44 @@
+import { useCallback, useRef } from 'react';
+/**
+ * A callback ref hook that supports cleanup functions.
+ * This is useful when you need to perform setup/cleanup operations when the ref changes.
+ *
+ * @param callback - Function that receives the node and optionally returns a cleanup function
+ * @returns A callback ref
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *   const ref = useCallbackRef<HTMLInputElement>((node) => {
+ *     if (node) {
+ *       const handleInput = () => console.log('input changed');
+ *       node.addEventListener('input', handleInput);
+ *
+ *       // Return cleanup function
+ *       return () => {
+ *         node.removeEventListener('input', handleInput);
+ *       };
+ *     }
+ *   });
+ *
+ *   return <input ref={ref} />;
+ * };
+ * ```
+ */
+export function useCallbackRef(callback) {
+    const cleanupRef = useRef();
+    return useCallback((node) => {
+        // Cleanup previous ref
+        if (cleanupRef.current) {
+            cleanupRef.current();
+            cleanupRef.current = undefined;
+        }
+        // Set up new ref
+        if (node) {
+            cleanupRef.current = callback(node);
+        }
+        else {
+            callback(null);
+        }
+    }, [callback]);
+}

package/dist/temp/src/hooks/useMediaQuery.d.ts

@@ -0,0 +1,5 @@
+interface UseMediaQueryOptions {
+    onMatched?: () => void;
+}
+export declare const useMediaQuery: (query: string, options?: UseMediaQueryOptions) => boolean;
+export {};

package/dist/temp/src/hooks/useMediaQuery.js

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+export const useMediaQuery = (query, options) => {
+    const [matches, setMatches] = useState(false);
+    useEffect(() => {
+        const mediaQuery = window.matchMedia(query);
+        setMatches(mediaQuery.matches);
+        const handleChange = (e) => {
+            setMatches(e.matches);
+            if (e.matches) {
+                options?.onMatched?.();
+            }
+        };
+        mediaQuery.addEventListener('change', handleChange);
+        return () => {
+            mediaQuery.removeEventListener('change', handleChange);
+        };
+    }, [query, options?.onMatched]);
+    return matches;
+};

package/dist/temp/src/hooks/useMergeRefs.d.ts

@@ -0,0 +1,20 @@
+type Ref<T> = React.RefCallback<T> | React.MutableRefObject<T | null> | null | undefined;
+/**
+ * Merges multiple refs into a single callback ref.
+ * This is useful when you need to forward a ref while also keeping an internal ref.
+ *
+ * @param refs - Array of refs to merge
+ * @returns A callback ref that will update all provided refs
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = forwardRef<HTMLInputElement, Props>((props, ref) => {
+ *   const internalRef = useRef<HTMLInputElement>(null);
+ *   const mergedRef = useMergeRefs([ref, internalRef]);
+ *
+ *   return <input ref={mergedRef} />;
+ * });
+ * ```
+ */
+export declare function useMergeRefs<T>(refs: Ref<T>[]): React.RefCallback<T>;
+export {};

package/dist/temp/src/hooks/useMergeRefs.js

@@ -0,0 +1,31 @@
+/**
+ * Merges multiple refs into a single callback ref.
+ * This is useful when you need to forward a ref while also keeping an internal ref.
+ *
+ * @param refs - Array of refs to merge
+ * @returns A callback ref that will update all provided refs
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = forwardRef<HTMLInputElement, Props>((props, ref) => {
+ *   const internalRef = useRef<HTMLInputElement>(null);
+ *   const mergedRef = useMergeRefs([ref, internalRef]);
+ *
+ *   return <input ref={mergedRef} />;
+ * });
+ * ```
+ */
+export function useMergeRefs(refs) {
+    return (node) => {
+        refs.forEach((ref) => {
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(node);
+                }
+                else {
+                    ref.current = node;
+                }
+            }
+        });
+    };
+}

package/dist/temp/src/types/dropdown/dropdown.d.ts

@@ -0,0 +1,39 @@
+import type { RefObject } from 'react';
+export type DropdownDirection = 'up' | 'down';
+export type DropdownPositionConfig = {
+    triggerRef: RefObject<HTMLElement>;
+    maxHeight: number;
+    itemCount: number;
+    itemHeight?: number;
+    offset?: number;
+};
+export type DropdownPositionResult = {
+    direction: DropdownDirection;
+    maxHeight: number;
+};
+export type DropdownKeyboardConfig<T> = {
+    isOpen: boolean;
+    disabled: boolean;
+    focusedIndex: number;
+    optionItems: T[];
+    onToggle: () => void;
+    onSelect: (option: T) => void;
+    onClose: () => void;
+    onFocusChange: (index: number) => void;
+    triggerRef?: RefObject<HTMLElement>;
+    dropdownRef?: RefObject<HTMLElement>;
+};
+export type DropdownOutsideClickConfig = {
+    isOpen: boolean;
+    refs: RefObject<HTMLElement>[];
+    onClose: () => void;
+};
+export type MultiSelectOption = {
+    id: string | number;
+    label?: string;
+    disabled?: boolean;
+};
+export type SelectedTag = {
+    id: string | number;
+    label: string;
+};

package/dist/temp/src/types/dropdown/dropdown.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export * from './dropdown';
+export * from './option';

package/dist/temp/src/types/dropdown/index.js

@@ -0,0 +1,2 @@
+export * from './dropdown';
+export * from './option';

package/dist/temp/src/types/dropdown/option.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 기본 옵션 타입
+ */
+export type OptionType = {
+    id: string | number;
+    label: string;
+    icon?: React.ComponentType<{
+        width?: number;
+        height?: number;
+    }>;
+};
+/**
+ * 옵션 값 타입 (단일 또는 다중 선택)
+ */
+export type OptionValue = string | number | (string | number)[];
+/**
+ * 옵션 변경 핸들러 타입
+ */
+export type OptionChangeHandler = (value: OptionValue) => void;
+/**
+ * 옵션 선택 핸들러 타입
+ */
+export type OptionSelectHandler<T extends OptionType = OptionType> = (option: T) => void;

package/dist/temp/src/types/dropdown/option.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export * from './dropdown';
+export type * from './side-slot';

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

@@ -0,0 +1,2 @@
+// 드롭다운 관련 types
+export * from './dropdown';

package/dist/temp/src/types/side-slot.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { COLOR } from '../../constant/color';
+import type { DotProps } from '../components';
+export type SlotIconComponent = ComponentType<{
+    height?: number;
+    width?: number;
+    color?: string;
+    className?: string;
+}>;
+export type IconSlotType = {
+    type: 'icon';
+    icon: SlotIconComponent;
+    color?: keyof typeof COLOR;
+    size?: number;
+};
+export type DotSlotType = {
+    type: 'dot';
+    color: DotProps['color'];
+    size: DotProps['size'];
+};
+export type CustomSlotType = {
+    type: 'custom';
+    children: ReactNode;
+};
+export type SideSlotType = IconSlotType | DotSlotType | CustomSlotType;

package/dist/temp/src/types/side-slot.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,11 @@
+import { type DurationInputArg1, type DurationInputArg2 } from 'moment';
+export declare function getDateFormat(date?: Date | string): string;
+export declare function getToday(): Date;
+export declare function getSubtractDate({ date, period, unit, }: {
+    date?: string | Date;
+    period: DurationInputArg1;
+    unit: DurationInputArg2;
+}): Date;
+export declare const formatDateInput: (input: string) => string;
+export declare const formatHourInput: (input: string) => string;
+export declare const formatMinuteInput: (input: string) => string;

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

@@ -0,0 +1,49 @@
+import moment from 'moment';
+const YEAR_LENGTH = 4;
+const MONTH_START = 4;
+const MONTH_END = 6;
+const DAY_START = 6;
+const DAY_END = 8;
+const MAX_HOUR = 23;
+const MAX_MINUTE = 59;
+export function getDateFormat(date = getToday()) {
+    return moment(date).format('YYYY-MM-DD');
+}
+export function getToday() {
+    return moment().toDate();
+}
+export function getSubtractDate({ date = getToday(), period, unit, }) {
+    return moment(date).subtract(period, unit).toDate();
+}
+export const formatDateInput = (input) => {
+    const dateRegex = /^(19|20)\d{2}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[0-1])$/;
+    if (dateRegex.test(input)) {
+        // 20231112 -> 2023-11-12 형식으로 변환
+        const year = input.substring(0, YEAR_LENGTH);
+        const month = input.substring(MONTH_START, MONTH_END);
+        const day = input.substring(DAY_START, DAY_END);
+        return `${year}-${month}-${day}`;
+    }
+    return input;
+};
+export const formatHourInput = (input) => {
+    const numbers = input.replace(/\D/g, '');
+    const hourStr = numbers.substring(0, 2);
+    const hourNum = Number.parseInt(hourStr, 10);
+    if (hourNum >= 0 && hourNum <= MAX_HOUR) {
+        return hourStr;
+    }
+    return input;
+};
+export const formatMinuteInput = (input) => {
+    // 숫자만 추출
+    const numbers = input.replace(/\D/g, '');
+    // 2자리 숫자로 제한
+    const minuteStr = numbers.substring(0, 2);
+    const minuteNum = Number.parseInt(minuteStr, 10);
+    // 00-59 범위 체크
+    if (minuteNum >= 0 && minuteNum <= MAX_MINUTE) {
+        return minuteStr; // 2자리로 패딩
+    }
+    return input;
+};

package/dist/temp/src/utils/dropdown/dropdownUtils.d.ts

@@ -0,0 +1,17 @@
+import type { DropdownPositionConfig, DropdownPositionResult } from '../../types/dropdown';
+/**
+ * 드롭다운 위치를 계산하는 유틸리티 함수
+ */
+export declare const calculateDropdownPosition: ({ triggerRef, maxHeight, itemCount, itemHeight, offset, }: DropdownPositionConfig) => DropdownPositionResult;
+/**
+ * 키보드 네비게이션을 위한 포커스 인덱스 계산
+ */
+export declare const calculateNextFocusIndex: (currentIndex: number, direction: 'up' | 'down', validOptionsLength: number) => number;
+/**
+ * 드롭다운이 뷰포트를 벗어나지 않도록 위치 조정
+ */
+export declare const adjustDropdownPosition: (dropdownElement: HTMLElement) => void;
+/**
+ * 스크롤 가능한 부모 요소를 찾는 유틸리티 함수
+ */
+export declare const findScrollableParent: (element: Element, boundary: Element) => Element | null;

package/dist/temp/src/utils/dropdown/dropdownUtils.js

@@ -0,0 +1,78 @@
+/**
+ * 드롭다운 위치를 계산하는 유틸리티 함수
+ */
+export const calculateDropdownPosition = ({ triggerRef, maxHeight, itemCount, itemHeight = 40, offset = 20, }) => {
+    if (!triggerRef?.current) {
+        return { direction: 'down', maxHeight };
+    }
+    const rect = triggerRef?.current.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const dropdownHeight = Math.min(maxHeight, itemCount * itemHeight);
+    // 아래쪽 공간이 충분한지 확인
+    const spaceBelow = viewportHeight - rect.bottom;
+    if (spaceBelow < dropdownHeight + offset) {
+        return { direction: 'up', maxHeight };
+    }
+    return { direction: 'down', maxHeight };
+};
+/**
+ * 키보드 네비게이션을 위한 포커스 인덱스 계산
+ */
+export const calculateNextFocusIndex = (currentIndex, direction, validOptionsLength) => {
+    if (validOptionsLength === 0)
+        return -1;
+    if (direction === 'down') {
+        return currentIndex < validOptionsLength - 1 ? currentIndex + 1 : 0;
+    }
+    return currentIndex > 0 ? currentIndex - 1 : validOptionsLength - 1;
+};
+/**
+ * 드롭다운이 뷰포트를 벗어나지 않도록 위치 조정
+ */
+export const adjustDropdownPosition = (dropdownElement) => {
+    const dropdownRect = dropdownElement.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    // 좌우 위치 조정
+    if (dropdownRect.right > viewportWidth) {
+        const overflow = dropdownRect.right - viewportWidth;
+        dropdownElement.style.left = `${-overflow - 10}px`;
+    }
+    if (dropdownRect.left < 0) {
+        dropdownElement.style.left = '10px';
+    }
+    // 상하 위치 조정 (이미 up/down 방향이 결정된 후 미세 조정)
+    if (dropdownRect.bottom > viewportHeight) {
+        const overflow = dropdownRect.bottom - viewportHeight;
+        dropdownElement.style.maxHeight = `${dropdownRect.height - overflow - 10}px`;
+    }
+};
+/**
+ * 스크롤 가능한 부모 요소를 찾는 유틸리티 함수
+ */
+export const findScrollableParent = (element, boundary) => {
+    let current = element;
+    while (current && current !== boundary && current !== document.body) {
+        const style = window.getComputedStyle(current);
+        const overflowY = style.overflowY;
+        if (overflowY === 'scroll' || overflowY === 'auto') {
+            const { scrollHeight, clientHeight } = current;
+            if (scrollHeight > clientHeight) {
+                return current;
+            }
+        }
+        current = current.parentElement;
+    }
+    // boundary 자체가 스크롤 가능한지 확인
+    if (current === boundary) {
+        const style = window.getComputedStyle(boundary);
+        const overflowY = style.overflowY;
+        if (overflowY === 'scroll' || overflowY === 'auto') {
+            const { scrollHeight, clientHeight } = boundary;
+            if (scrollHeight > clientHeight) {
+                return boundary;
+            }
+        }
+    }
+    return null;
+};

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

@@ -0,0 +1,2 @@
+export * from './dropdownUtils';
+export * from './multiSelect';

package/dist/temp/src/utils/dropdown/index.js

@@ -0,0 +1,2 @@
+export * from './dropdownUtils';
+export * from './multiSelect';

package/dist/temp/src/utils/dropdown/multiSelect.d.ts

@@ -0,0 +1,31 @@
+import type { MultiSelectOption, SelectedTag } from '../../types';
+/**
+ * 전체 선택 상태를 확인하는 유틸 함수
+ */
+export declare const isAllItemsSelected: (selectedValues: (string | number)[], options: MultiSelectOption[]) => boolean;
+/**
+ * 전체 선택 버튼 텍스트를 반환하는 유틸 함수
+ */
+export declare const getSelectAllButtonText: (selectedValues: (string | number)[], options: MultiSelectOption[], selectText?: string, deselectText?: string) => string;
+/**
+ * 전체 선택/해제를 처리하는 유틸 함수
+ */
+export declare const handleSelectAllItems: (selectedValues: (string | number)[], options: MultiSelectOption[]) => (string | number)[];
+/**
+ * 선택된 항목들을 태그 데이터로 변환하는 유틸 함수
+ */
+export declare const getSelectedTags: (selectedValues: (string | number)[], options: MultiSelectOption[]) => SelectedTag[];
+/**
+ * 태그 제거 시 선택값에서 해당 ID를 제거하는 유틸 함수
+ */
+export declare const removeTagFromSelected: (selectedValues: (string | number)[], tagIdToRemove: string | number) => (string | number)[];
+/**
+ * 전체 선택 관련 로직을 한 번에 처리하는 커스텀 훅
+ */
+export declare const useMultiSelect: (selectedValues: (string | number)[], options: MultiSelectOption[], selectText?: string, deselectText?: string) => {
+    isAllSelected: boolean;
+    buttonText: string;
+    toggleSelectAll: () => (string | number)[];
+    getSelectedTagsData: () => SelectedTag[];
+    removeTag: (tagId: string | number) => (string | number)[];
+};