@ncds/ui-admin 1.6.4 → 1.8.0

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

@@ -1,31 +1,34 @@
 import { useCallback, useRef } from 'react';
 import { calculateNextFocusIndex } from '../../utils/dropdown';
+const SCROLL_DELAY_MS = 100;
 /**
  * 드롭다운 키보드 네비게이션을 위한 커스텀 훅
  */
-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;
+export const useDropdownKeyboard = config => {
+  const {
+    isOpen,
+    disabled,
+    focusedIndex,
+    optionItems,
+    onToggle,
+    onSelect,
+    onClose,
+    onFocusChange,
+    triggerRef,
+    dropdownRef
+  } = config;
   // 키보드 네비게이션 플래그
-  var isKeyboardNavigationRef = useRef(false);
+  const 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');
+  const scrollToFocusedOption = useCallback(index => {
+    if (!dropdownRef?.current || index < 0) return;
+    const optionsList = dropdownRef.current.querySelector('.ncua-select-dropdown__options');
     if (!optionsList) return;
-    var options = optionsList.querySelectorAll('.ncua-select-dropdown__option');
-    var focusedOption = options[index];
+    const options = optionsList.querySelectorAll('.ncua-select-dropdown__option');
+    const focusedOption = options[index];
     if (!focusedOption) return;
-    var optionsListRect = optionsList.getBoundingClientRect();
-    var focusedOptionRect = focusedOption.getBoundingClientRect();
+    const optionsListRect = optionsList.getBoundingClientRect();
+    const focusedOptionRect = focusedOption.getBoundingClientRect();
     // 옵션이 위쪽으로 벗어났을 때
     if (focusedOptionRect.top < optionsListRect.top) {
       optionsList.scrollTop = focusedOption.offsetTop;
@@ -35,90 +38,75 @@ export var useDropdownKeyboard = function (config) {
       optionsList.scrollTop = focusedOption.offsetTop + focusedOption.offsetHeight - optionsList.clientHeight;
     }
   }, [dropdownRef]);
-  var handleKeyDown = useCallback(function (e) {
-    var _a;
+  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 ' ':
-        e.preventDefault();
-        if (!isOpen) {
-          onToggle();
-        } else if (focusedIndex >= 0 && optionItems[focusedIndex]) {
-          onSelect(optionItems[focusedIndex]);
-        }
+        handleEnterOrSpace(e);
         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();
-        }
+        handleEscape(e);
         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);
-        }
+        handleArrowNavigation(e, 'down');
         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);
-        }
+        handleArrowNavigation(e, 'up');
         break;
       case 'Home':
-        if (isOpen) {
-          e.preventDefault();
-          isKeyboardNavigationRef.current = true; // 키보드 네비게이션 시작
-          onFocusChange(0);
-          // 포커스 변경 후 스크롤 조정
-          setTimeout(function () {
-            return scrollToFocusedOption(0);
-          }, 0);
-        }
+        handleHomeEnd(e, 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);
-        }
+        handleHomeEnd(e, optionItems.length - 1);
         break;
     }
-  }, [disabled, isOpen, focusedIndex, optionItems, onToggle, onSelect, onClose, onFocusChange, triggerRef, scrollToFocusedOption]);
+  }, [disabled, optionItems.length, handleEnterOrSpace, handleEscape, handleArrowNavigation, handleHomeEnd]);
   // 마우스 움직임 감지 함수
-  var handleMouseMove = useCallback(function () {
+  const handleMouseMove = useCallback(() => {
     isKeyboardNavigationRef.current = false;
   }, []);
   // 키보드 네비게이션 상태 확인 함수
-  var isKeyboardNavigation = useCallback(function () {
+  const isKeyboardNavigation = useCallback(() => {
     return isKeyboardNavigationRef.current;
   }, []);
   return {
-    handleKeyDown: handleKeyDown,
-    handleMouseMove: handleMouseMove,
-    isKeyboardNavigation: isKeyboardNavigation
+    handleKeyDown,
+    handleMouseMove,
+    isKeyboardNavigation
   };
 };

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

@@ -3,18 +3,16 @@ 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);
+export const useDropdownPosition = config => {
+  const [direction, setDirection] = useState('down');
+  const updatePosition = useCallback(() => {
+    const result = calculateDropdownPosition(config);
     setDirection(result.direction);
     return result;
   }, [config]);
   return {
-    direction: direction,
-    updatePosition: updatePosition,
-    setDirection: setDirection
+    direction,
+    updatePosition,
+    setDirection
   };
 };

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

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

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

@@ -1,38 +1,51 @@
 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 var useScrollLock = function (isLocked, dropdownRef) {
-  var scrollPosition = useRef(0);
-  useEffect(function () {
+export const useScrollLock = (isLocked, dropdownRef) => {
+  const scrollPosition = useRef(0);
+  useEffect(() => {
     if (isLocked) {
       // 현재 스크롤 위치 저장
       scrollPosition.current = window.pageYOffset;
       // 스크롤 방지 함수 (드롭다운 내부는 스크롤 체이닝 방지)
-      var preventScroll_1 = function (e) {
+      const preventScroll = e => {
         // 드롭다운 내부에서 발생하지 않은 이벤트는 차단
-        if (!(dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) || !dropdownRef.current.contains(e.target)) {
+        if (!isInsideDropdown(e.target, dropdownRef)) {
           e.preventDefault();
           return;
         }
         // 드롭다운 내부의 스크롤 가능한 요소 찾기
-        var scrollableElement = findScrollableParent(e.target, dropdownRef.current);
+        const 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;
-          }
+          preventScrollBeyondBounds(e, scrollableElement);
+          return;
         }
         // 드롭다운 내부에 스크롤 가능한 요소가 없으면 차단
         if (!scrollableElement) {
@@ -40,29 +53,27 @@ export var useScrollLock = function (isLocked, dropdownRef) {
         }
       };
       // 키보드 스크롤 방지 함수 (드롭다운 내부는 제외)
-      var preventKeyboardScroll_1 = function (e) {
-        // 드롭다운 내부에서 발생한 이벤트는 허용
-        if ((dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) && dropdownRef.current.contains(e.target)) {
+      const preventKeyboardScroll = e => {
+        if (isInsideDropdown(e.target, dropdownRef)) {
           return;
         }
-        var scrollKeys = ['PageUp', 'PageDown', 'Home', 'End', ' '];
-        if (scrollKeys.includes(e.key)) {
+        if (SCROLL_KEYS.includes(e.key)) {
           e.preventDefault();
         }
       };
       // 이벤트 리스너 추가
-      document.addEventListener('wheel', preventScroll_1, {
+      document.addEventListener('wheel', preventScroll, {
         passive: false
       });
-      document.addEventListener('touchmove', preventScroll_1, {
+      document.addEventListener('touchmove', preventScroll, {
         passive: false
       });
-      document.addEventListener('keydown', preventKeyboardScroll_1);
-      return function () {
+      document.addEventListener('keydown', preventKeyboardScroll);
+      return () => {
         // 이벤트 리스너 제거
-        document.removeEventListener('wheel', preventScroll_1);
-        document.removeEventListener('touchmove', preventScroll_1);
-        document.removeEventListener('keydown', preventKeyboardScroll_1);
+        document.removeEventListener('wheel', preventScroll);
+        document.removeEventListener('touchmove', preventScroll);
+        document.removeEventListener('keydown', preventKeyboardScroll);
         // 스크롤 위치 복원
         window.scrollTo(0, scrollPosition.current);
       };

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

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

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

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

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

@@ -26,8 +26,8 @@ import { useCallback, useRef } from 'react';
  * ```
  */
 export function useCallbackRef(callback) {
-  var cleanupRef = useRef();
-  return useCallback(function (node) {
+  const cleanupRef = useRef();
+  return useCallback(node => {
     // Cleanup previous ref
     if (cleanupRef.current) {
       cleanupRef.current();

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

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

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

@@ -16,8 +16,8 @@
  * ```
  */
 export function useMergeRefs(refs) {
-  return function (node) {
-    refs.forEach(function (ref) {
+  return node => {
+    refs.forEach(ref => {
       if (ref) {
         if (typeof ref === 'function') {
           ref(node);

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

@@ -1,48 +1,54 @@
 import moment from 'moment';
-export function getDateFormat(date) {
-  if (date === void 0) {
-    date = getToday();
-  }
+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() {
+  let date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getToday();
   return moment(date).format('YYYY-MM-DD');
 }
 export function getToday() {
   return moment().toDate();
 }
-export function getSubtractDate(_a) {
-  var _b = _a.date,
-    date = _b === void 0 ? getToday() : _b,
-    period = _a.period,
-    unit = _a.unit;
+export function getSubtractDate(_ref) {
+  let {
+    date = getToday(),
+    period,
+    unit
+  } = _ref;
   return moment(date).subtract(period, unit).toDate();
 }
-export var formatDateInput = function (input) {
-  var dateRegex = /^(19|20)\d{2}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[0-1])$/;
+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 형식으로 변환
-    var year = input.substring(0, 4);
-    var month = input.substring(4, 6);
-    var day = input.substring(6, 8);
-    return "".concat(year, "-").concat(month, "-").concat(day);
+    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 var formatHourInput = function (input) {
-  var numbers = input.replace(/\D/g, '');
-  var hourStr = numbers.substring(0, 2);
-  var hourNum = parseInt(hourStr, 10);
-  if (hourNum >= 0 && hourNum <= 23) {
+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 var formatMinuteInput = function (input) {
+export const formatMinuteInput = input => {
   // 숫자만 추출
-  var numbers = input.replace(/\D/g, '');
+  const numbers = input.replace(/\D/g, '');
   // 2자리 숫자로 제한
-  var minuteStr = numbers.substring(0, 2);
-  var minuteNum = parseInt(minuteStr, 10);
+  const minuteStr = numbers.substring(0, 2);
+  const minuteNum = Number.parseInt(minuteStr, 10);
   // 00-59 범위 체크
-  if (minuteNum >= 0 && minuteNum <= 59) {
+  if (minuteNum >= 0 && minuteNum <= MAX_MINUTE) {
     return minuteStr; // 2자리로 패딩
   }
   return input;