@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/esm/src/components/date-picker/DatePicker.js

@@ -1,115 +1,280 @@
-var __assign = this && this.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** biome-ignore-all lint/correctness/noUnusedVariables: <explanation> */
 import classNames from 'classnames';
 import { Korean } from 'flatpickr/dist/l10n/ko';
 import moment from 'moment';
-import { forwardRef, useId, useMemo, useRef } from 'react';
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef } from 'react';
 import Flatpickr from 'react-flatpickr';
 import { formatDateInput, formatHourInput, formatMinuteInput } from '../../utils/date-picker';
 import { CustomInput } from './CustomInput';
-var isValidDate = function (dateString) {
-  var date = new Date(dateString);
+// ══════════════════════════════════════════
+// 유틸리티 함수
+// ══════════════════════════════════════════
+const isValidDate = dateString => {
+  const date = new Date(dateString);
   return date instanceof Date && !isNaN(date.getTime());
 };
-export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _b = _a.shouldFocus,
-    shouldFocus = _b === void 0 ? true : _b,
-    currentDate = _a.currentDate,
-    _c = _a.size,
-    size = _c === void 0 ? 'xs' : _c,
-    onChangeDate = _a.onChangeDate,
-    datePickerOptions = _a.datePickerOptions,
-    _d = _a.isEndDate,
-    isEndDate = _d === void 0 ? false : _d,
-    onValidationError = _a.onValidationError,
-    className = _a.className,
-    attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions", "isEndDate", "onValidationError", "className"]);
-  var flatpickrInstanceRef = useRef(null);
-  var dateFormatRef = useRef('Y-m-d');
-  var minMaxDateRef = useRef({});
-  var checkDateViolations = function (date, minDate, maxDate) {
-    var violations = [];
-    var inputDate = moment(date);
+/** input의 스크롤 가능한 부모 요소들을 수집 */
+const collectScrollParents = element => {
+  const parents = [];
+  let parentEl = element.parentElement;
+  while (parentEl) {
+    const {
+      overflow,
+      overflowY
+    } = getComputedStyle(parentEl);
+    if (overflow !== 'visible' || overflowY !== 'visible') {
+      parents.push(parentEl);
+    }
+    parentEl = parentEl.parentElement;
+  }
+  return parents;
+};
+/** 현재 열려있는 flatpickr 캘린더 요소를 반환 */
+const getOpenCalendar = (instance, input, isPortal) => {
+  if (isPortal) {
+    return instance.calendarContainer?.classList.contains('open') ? instance.calendarContainer : null;
+  }
+  return input.parentElement?.querySelector('.flatpickr-calendar.open') ?? null;
+};
+/** selectedDate가 유효하지 않으면 이전 날짜로 복원하고 true 반환 */
+const restoreIfInvalidDate = (date, instance) => {
+  if (date && date instanceof Date && !isNaN(date.getTime())) {
+    return false;
+  }
+  const previousDate = instance._previousDateBeforeInput;
+  if (previousDate && previousDate instanceof Date && !isNaN(previousDate.getTime())) {
+    instance.selectedDates = [previousDate];
+    instance.setDate(previousDate, false);
+  } else if (instance.input) {
+    instance.input.value = '';
+    instance.setDate('', false);
+  }
+  return true;
+};
+/** 시간 전용 모드의 기본값 반환 */
+const getTimeOnlyDefault = (hasSeconds, isEndDate) => {
+  const endTime = hasSeconds ? '23:59:59' : '23:59';
+  const startTime = hasSeconds ? '00:00:00' : '00:00';
+  return isEndDate ? endTime : startTime;
+};
+/** 날짜+시간 모드에서 시간이 없는 경우 기본값 부여 */
+const getDateTimeDefault = (currentDate, hasSeconds, isEndDate) => {
+  if (!currentDate) return '';
+  const format = hasSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
+  const momentDate = moment(currentDate);
+  return isEndDate ? momentDate.endOf('day').format(format) : momentDate.startOf('day').format(format);
+};
+// ══════════════════════════════════════════
+// 캘린더 위치 조정 (setup / cleanup)
+// ══════════════════════════════════════════
+/** portal 모드: 캘린더 위치 재조정 및 스크롤 이벤트 연결 */
+const setupPortalPositioning = (instance, input) => {
+  const reposition = () => {
+    if (instance.config) instance._positionCalendar();
+  };
+  instance._reposition = reposition;
+  const scrollParents = collectScrollParents(input);
+  instance._portalScrollParents = scrollParents;
+  instance.config.onOpen.push(() => {
+    scrollParents.forEach(target => {
+      target.addEventListener('scroll', reposition, {
+        passive: true
+      });
+    });
+    window.addEventListener('scroll', reposition, {
+      passive: true
+    });
+  });
+  instance.config.onClose.push(() => {
+    scrollParents.forEach(target => {
+      target.removeEventListener('scroll', reposition);
+    });
+    window.removeEventListener('scroll', reposition);
+  });
+};
+/** 일반 모드: 아래 공간 부족 시 캘린더를 위에 표시하고 스크롤/리사이즈 이벤트 연결 */
+const setupStaticPositioning = (instance, input) => {
+  const adjustPosition = () => {
+    const calendar = instance.calendarContainer;
+    if (!calendar) return;
+    const wrapperEl = input.closest('.ncua-date-picker');
+    const rect = wrapperEl ? wrapperEl.getBoundingClientRect() : input.getBoundingClientRect();
+    const calendarHeight = calendar.offsetHeight;
+    const CALENDAR_GAP = 6;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    calendar.style.top = spaceBelow < calendarHeight + CALENDAR_GAP ? `${-(calendarHeight + CALENDAR_GAP)}px` : '';
+  };
+  const scrollParents = collectScrollParents(input);
+  instance._adjustPosition = adjustPosition;
+  instance._scrollParents = scrollParents;
+  instance.config.onOpen.push(() => {
+    adjustPosition();
+    scrollParents.forEach(target => {
+      target.addEventListener('scroll', adjustPosition, {
+        passive: true
+      });
+    });
+    window.addEventListener('scroll', adjustPosition, {
+      passive: true
+    });
+    window.addEventListener('resize', adjustPosition);
+  });
+  instance.config.onClose.push(() => {
+    scrollParents.forEach(target => {
+      target.removeEventListener('scroll', adjustPosition);
+    });
+    window.removeEventListener('scroll', adjustPosition);
+    window.removeEventListener('resize', adjustPosition);
+  });
+};
+/** scroll/resize 리스너 정리 */
+const cleanupPositioning = instance => {
+  const reposition = instance._reposition;
+  if (reposition) {
+    const portalScrollParents = instance._portalScrollParents || [];
+    portalScrollParents.forEach(target => {
+      target.removeEventListener('scroll', reposition);
+    });
+    window.removeEventListener('scroll', reposition);
+  }
+  const adjustPosition = instance._adjustPosition;
+  if (adjustPosition) {
+    const scrollParents = instance._scrollParents || [];
+    scrollParents.forEach(target => {
+      target.removeEventListener('scroll', adjustPosition);
+    });
+    window.removeEventListener('scroll', adjustPosition);
+    window.removeEventListener('resize', adjustPosition);
+  }
+};
+// ══════════════════════════════════════════
+// 시간 입력 필드 (setup / cleanup)
+// ══════════════════════════════════════════
+/** enableTime 옵션 사용 시 시간 입력 필드 이벤트 설정 */
+const setupTimeInputHandlers = (instance, input, isPortal, onHourInput, onMinuteInput) => {
+  const timeContainer = isPortal ? instance.calendarContainer : input.parentElement;
+  const timeInputWrapper = timeContainer?.querySelector('.flatpickr-time');
+  if (!timeInputWrapper) return;
+  const hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
+  const minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
+  if (!hourInput || !minuteInput) return;
+  hourInput.addEventListener('input', onHourInput);
+  minuteInput.addEventListener('input', onMinuteInput);
+  const handleMouseDown = e => {
+    const flatpickrCalendar = getOpenCalendar(instance, input, isPortal);
+    if (flatpickrCalendar && !flatpickrCalendar.contains(e.target)) {
+      const timeInputs = flatpickrCalendar.querySelectorAll('.flatpickr-time input');
+      timeInputs.forEach(timeInput => {
+        if (document.activeElement === timeInput) {
+          timeInput.blur();
+        }
+      });
+    }
+  };
+  document.addEventListener('mousedown', handleMouseDown, true);
+  instance._handleMouseDown = handleMouseDown;
+};
+/** 시간 입력 필드 이벤트 리스너 정리 */
+const cleanupTimeInputHandlers = (instance, input, isPortal, onHourInput, onMinuteInput) => {
+  const timeContainer = isPortal ? instance.calendarContainer : input.parentElement;
+  const timeInputWrapper = timeContainer?.querySelector('.flatpickr-time');
+  if (!timeInputWrapper) return;
+  const hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
+  if (hourInput) {
+    hourInput.removeEventListener('input', onHourInput);
+  }
+  const minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
+  if (minuteInput) {
+    minuteInput.removeEventListener('input', onMinuteInput);
+  }
+  const handleMouseDown = instance._handleMouseDown;
+  if (handleMouseDown) {
+    document.removeEventListener('mousedown', handleMouseDown, true);
+  }
+};
+// ══════════════════════════════════════════
+// DatePicker 컴포넌트
+// ══════════════════════════════════════════
+export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    shouldFocus = true,
+    currentDate,
+    size = 'xs',
+    onChangeDate,
+    datePickerOptions,
+    isEndDate = false,
+    onValidationError,
+    className,
+    portal = false,
+    ...attrs
+  } = _ref;
+  const flatpickrInstanceRef = useRef(null);
+  const dateFormatRef = useRef('Y-m-d');
+  const minMaxDateRef = useRef({});
+  /** portal 모드: 캘린더를 담을 persistent 컨테이너 (한 번 생성, 언마운트 시 제거) */
+  const portalContainerRef = useRef(null);
+  const hasTimeOption = datePickerOptions && Object.hasOwn(datePickerOptions, 'enableTime');
+  // 콜백 props를 ref에 저장하여 memoized options에서 최신값 참조
+  const onChangeDateRef = useRef(onChangeDate);
+  onChangeDateRef.current = onChangeDate;
+  const onValidationErrorRef = useRef(onValidationError);
+  onValidationErrorRef.current = onValidationError;
+  /** portal 컨테이너를 lazily 생성 (이미 있으면 재사용), className은 매번 갱신 */
+  const getPortalContainer = () => {
+    if (!portal || typeof document === 'undefined') return undefined;
+    const portalClassName = classNames('ncua-date-picker', 'ncua-date-picker--portal', `ncua-date-picker--${size}`, {
+      'ncua-date-picker--has-time': hasTimeOption
+    });
+    if (portalContainerRef.current) {
+      portalContainerRef.current.className = portalClassName;
+      return portalContainerRef.current;
+    }
+    const el = document.createElement('div');
+    el.className = portalClassName;
+    // ncua-date-picker의 position/width/height가 캘린더 배치를 방해하지 않도록 무력화
+    el.style.cssText = 'position:static;width:auto;height:auto;overflow:visible;';
+    document.body.appendChild(el);
+    portalContainerRef.current = el;
+    return el;
+  };
+  /** 컴포넌트 언마운트 시 포탈 컨테이너 및 스크롤 리스너 정리 */
+  useEffect(() => {
+    return () => {
+      portalContainerRef.current?.remove();
+      portalContainerRef.current = null;
+    };
+  }, []);
+  // ──────────────────────────────────────────────
+  // 날짜 유효성 검사
+  // ──────────────────────────────────────────────
+  /** minDate/maxDate 범위를 벗어났는지 확인 */
+  const checkDateViolations = (date, minDate, maxDate) => {
+    const violations = [];
+    const inputDate = moment(date);
     if (!inputDate.isValid()) return violations;
     if (minDate) {
-      var min = moment(minDate);
+      const min = moment(minDate);
       if (min.isValid() && inputDate.isBefore(min, 'day')) {
         violations.push('minDate');
       }
     }
     if (maxDate) {
-      var max = moment(maxDate);
+      const max = moment(maxDate);
       if (max.isValid() && inputDate.isAfter(max, 'day')) {
         violations.push('maxDate');
       }
     }
     return violations;
   };
-  var onChangeDateHandler = function (dateTimeStamp, dateStr, instance) {
-    var _a;
-    if (!dateTimeStamp || dateTimeStamp.length === 0) {
-      restorePreviousDate(instance.input, instance);
-      return;
-    }
-    var selectedDate = dateTimeStamp[0];
-    if (!selectedDate || !(selectedDate instanceof Date) || isNaN(selectedDate.getTime())) {
-      // 유효하지 않은 날짜 - 이전 값으로 복원하거나 빈 값으로 처리
-      var previousDate = instance === null || instance === void 0 ? void 0 : instance._previousDateBeforeInput;
-      if (previousDate && previousDate instanceof Date && !isNaN(previousDate.getTime())) {
-        // 이전 값이 있으면 이전 값으로 복원
-        instance.selectedDates = [previousDate];
-        instance.setDate(previousDate, false);
-      } else {
-        // 이전 값이 없으면 빈 값으로 처리
-        restorePreviousDate(instance.input, instance);
-      }
-      return;
-    }
-    var minDate = options.minDate,
-      maxDate = options.maxDate;
-    var violations = checkDateViolations(selectedDate, minDate, maxDate);
-    if (violations.length > 0) {
-      var prevDate = (_a = instance === null || instance === void 0 ? void 0 : instance.selectedDates) === null || _a === void 0 ? void 0 : _a[0];
-      if (onValidationError) {
-        onValidationError({
-          date: selectedDate,
-          minDate: minDate,
-          maxDate: maxDate,
-          violations: violations,
-          previousDate: prevDate instanceof Date && !isNaN(prevDate.getTime()) ? prevDate : undefined
-        });
-        return; // onValidationError가 있으면 날짜 변경 안 함
-      }
-      // onValidationError가 없으면 범위를 벗어난 날짜도 허용 (계속 진행)
-    }
-    // 유효한 날짜인 경우 이전 날짜로 저장
-    instance._previousDateBeforeInput = selectedDate;
-    var formattedDate = formatDateInput(dateStr);
-    isValidDate(formattedDate) ? onChangeDate(formattedDate) : onChangeDate(dateStr);
-  };
-  var restorePreviousDate = function (target, instance) {
+  // ──────────────────────────────────────────────
+  // 이벤트 핸들러
+  // ──────────────────────────────────────────────
+  /** 유효하지 않은 입력 시 이전 날짜로 복원 */
+  const restorePreviousDate = (target, instance) => {
     if (instance.selectedDates.length > 0) {
-      var prevDate = instance.selectedDates[0];
+      const prevDate = instance.selectedDates[0];
       if (prevDate instanceof Date && !isNaN(prevDate.getTime())) {
-        var momentFormat = dateFormatRef.current.replace(/Y/g, 'YYYY').replace(/m/g, 'MM').replace(/d/g, 'DD');
+        const momentFormat = dateFormatRef.current.replace(/Y/g, 'YYYY').replace(/m/g, 'MM').replace(/d/g, 'DD');
         target.value = moment(prevDate).format(momentFormat);
         instance.setDate(prevDate, false);
         return;
@@ -118,223 +283,240 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     target.value = '';
     instance.setDate('', false);
   };
-  var onInputHandler = function (e) {
-    var target = e.target;
-    var input = target.value;
-    var instance = flatpickrInstanceRef.current;
+  /** flatpickr에서 날짜가 변경되었을 때 호출 */
+  const onChangeDateHandler = useCallback((dateTimeStamp, dateStr, fpInstance) => {
+    const instance = fpInstance;
+    if (!dateTimeStamp || dateTimeStamp.length === 0) {
+      restorePreviousDate(instance.input, instance);
+      return;
+    }
+    if (restoreIfInvalidDate(dateTimeStamp[0], instance)) return;
+    const selectedDate = dateTimeStamp[0];
+    const minDate = instance.config.minDate;
+    const maxDate = instance.config.maxDate;
+    const violations = checkDateViolations(selectedDate, minDate, maxDate);
+    if (violations.length > 0 && onValidationErrorRef.current) {
+      const prevDate = instance?.selectedDates?.[0];
+      const validPrevDate = prevDate instanceof Date && !isNaN(prevDate.getTime()) ? prevDate : undefined;
+      onValidationErrorRef.current({
+        date: selectedDate,
+        minDate,
+        maxDate,
+        violations,
+        previousDate: validPrevDate
+      });
+      return;
+    }
+    instance._previousDateBeforeInput = selectedDate;
+    const formattedDate = formatDateInput(dateStr);
+    isValidDate(formattedDate) ? onChangeDateRef.current(formattedDate) : onChangeDateRef.current(dateStr);
+  }, []);
+  /** input에 직접 타이핑할 때 날짜 형식 자동 변환 및 유효성 검사 */
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const onInputHandler = useCallback(e => {
+    const target = e.target;
+    const input = target.value;
+    const instance = flatpickrInstanceRef.current;
     if (!instance) return;
-    if (!input || input.trim() === '') {
+    if (!input?.trim()) {
       target.value = '';
       instance.setDate('', false);
-      onChangeDate('');
+      onChangeDateRef.current('');
       return;
     }
-    // 숫자가 최소 하나는 포함되어야 함 (하이픈만 있는 경우 방지)
     if (!/[0-9]/.test(input)) {
       restorePreviousDate(target, instance);
       return;
     }
-    var formattedInput = formatDateInput(input);
+    const formattedInput = formatDateInput(input);
     if (formattedInput !== input) {
       target.value = formattedInput;
       return;
     }
-    if (formattedInput && formattedInput.length >= 10) {
-      var parsedDate = moment(formattedInput);
-      if (!parsedDate.isValid()) {
-        restorePreviousDate(target, instance);
-        return;
-      }
-      var parsedDateObj = parsedDate.toDate();
-      var violations = checkDateViolations(parsedDateObj, minMaxDateRef.current.minDate, minMaxDateRef.current.maxDate);
-      if (violations.length > 0) {
-        // onInputHandler에서는 onValidationError를 호출하지 않음
-        // validation은 onChangeDateHandler에서만 처리
-        // onValidationError가 없으면 아무것도 하지 않음 (범위를 벗어난 날짜도 허용)
-        return;
-      }
+    if (!formattedInput || formattedInput.length < 10) return;
+    const parsedDate = moment(formattedInput);
+    if (!parsedDate.isValid()) {
+      restorePreviousDate(target, instance);
+      return;
     }
-  };
-  var onHourInputHandler = function (e) {
-    var target = e.target;
-    var input = target.value;
-    var formattedInput = formatHourInput(input);
+    const parsedDateObj = parsedDate.toDate();
+    const violations = checkDateViolations(parsedDateObj, minMaxDateRef.current.minDate, minMaxDateRef.current.maxDate);
+    if (violations.length > 0) {
+      return;
+    }
+  }, []);
+  /** 시간 입력 필드 - 시(hour) 값 포맷팅 (0~23) */
+  const onHourInputHandler = useCallback(e => {
+    const target = e.target;
+    const input = target.value;
+    const formattedInput = formatHourInput(input);
     if (formattedInput === input) return;
     target.value = formattedInput;
-  };
-  var onMinuteInputHandler = function (e) {
-    var target = e.target;
-    var input = target.value;
-    var formattedInput = formatMinuteInput(input);
+  }, []);
+  /** 시간 입력 필드 - 분(minute) 값 포맷팅 (0~59) */
+  const onMinuteInputHandler = useCallback(e => {
+    const target = e.target;
+    const input = target.value;
+    const formattedInput = formatMinuteInput(input);
     if (formattedInput === input) return;
     target.value = formattedInput;
-  };
-  var inputId = useId();
-  var options = __assign({
+  }, []);
+  const inputId = useId();
+  // ──────────────────────────────────────────────
+  // flatpickr 옵션
+  // ──────────────────────────────────────────────
+  // datePickerOptions는 부모에서 매 렌더 새 객체일 수 있으므로 값 기반 비교
+  // 주의: JSON.stringify는 함수를 무시하고 Date를 문자열로 변환하므로,
+  // datePickerOptions에 함수나 Date 객체를 넘기면 변경 감지가 누락될 수 있음
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const datePickerOptionsKey = JSON.stringify(datePickerOptions);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const options = useMemo(() => ({
     mode: 'single',
-    static: true,
+    static: !portal,
+    ...(portal && {
+      appendTo: getPortalContainer()
+    }),
     locale: Korean,
     dateFormat: 'Y-m-d',
     clickOpens: true,
     time_24hr: true,
-    formatDate: function (date, format, locale) {
+    /** flatpickr 기본 포맷 대신 moment를 사용하여 한국어 날짜 형식 지원 */
+    formatDate: (date, format, _locale) => {
       try {
-        // 유효한 날짜인지 확인
         if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
           return '';
         }
-        // moment로 포맷팅
-        var momentDate = moment(date);
+        const momentDate = moment(date);
         if (!momentDate.isValid()) {
           return '';
         }
-        // format을 moment 형식으로 변환
-        var momentFormat = format.replace(/Y/g, 'YYYY').replace(/y/g, 'YY').replace(/m/g, 'MM').replace(/d/g, 'DD').replace(/H/g, 'HH').replace(/i/g, 'mm').replace(/S/g, 'ss');
+        const momentFormat = format.replace(/Y/g, 'YYYY').replace(/y/g, 'YY').replace(/m/g, 'MM').replace(/d/g, 'DD').replace(/H/g, 'HH').replace(/i/g, 'mm').replace(/S/g, 'ss');
         return momentDate.format(momentFormat);
-      } catch (error) {
-        // 오류 발생 시 빈 문자열 반환 (232-23 같은 잘못된 날짜 처리)
+      } catch (_error) {
         return '';
       }
     },
     onChange: onChangeDateHandler,
     allowInvalidPreload: true,
-    onReady: function (selectedDates, dateStr, instance) {
-      var _a;
-      var input = instance.input;
+    // ──────────────────────────────────────────────
+    // onReady: flatpickr 인스턴스 초기화 후 실행
+    // ──────────────────────────────────────────────
+    onReady: (_selectedDates, _dateStr, fpInstance) => {
+      const instance = fpInstance;
+      const input = instance.input;
       if (!input) return;
       flatpickrInstanceRef.current = instance;
-      dateFormatRef.current = (datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.dateFormat) || options.dateFormat || 'Y-m-d';
+      dateFormatRef.current = instance.config.dateFormat || 'Y-m-d';
       minMaxDateRef.current = {
-        minDate: (datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.minDate) || options.minDate,
-        maxDate: (datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.maxDate) || options.maxDate
+        minDate: instance.config.minDate,
+        maxDate: instance.config.maxDate
       };
-      // blur 시점에 현재 selectedDates를 저장 (입력 전 상태)
-      var onBlurHandler = function (e) {
+      // blur 시 현재 날짜를 저장하여 잘못된 입력 시 복원에 사용
+      const onBlurHandler = _e => {
         if (instance && instance.selectedDates.length > 0) {
-          // 이전 날짜를 별도로 저장 (onChange에서 사용)
           instance._previousDateBeforeInput = instance.selectedDates[0];
         }
       };
       input.addEventListener('input', onInputHandler);
       input.addEventListener('blur', onBlurHandler);
-      // 초기 날짜가 있으면 저장
       if (instance.selectedDates.length > 0) {
         instance._previousDateBeforeInput = instance.selectedDates[0];
       }
-      var timeInputWrapper = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-time');
-      if (!timeInputWrapper) return;
-      var hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
-      var minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
-      if (!hourInput || !minuteInput) return;
-      hourInput.addEventListener('input', onHourInputHandler);
-      minuteInput.addEventListener('input', onMinuteInputHandler);
-      var handleMouseDown = function (e) {
-        var _a;
-        var flatpickrCalendar = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-calendar.open');
-        if (flatpickrCalendar && !flatpickrCalendar.contains(e.target)) {
-          var timeInputs = flatpickrCalendar.querySelectorAll('.flatpickr-time input');
-          timeInputs.forEach(function (timeInput) {
-            if (document.activeElement === timeInput) {
-              timeInput.blur();
-            }
-          });
-        }
-      };
-      document.addEventListener('mousedown', handleMouseDown, true);
-      instance._handleMouseDown = handleMouseDown;
       instance._onBlurHandler = onBlurHandler;
+      // 캘린더 위치 조정 및 스크롤/리사이즈 이벤트 연결
+      if (portal) {
+        setupPortalPositioning(instance, input);
+      } else {
+        setupStaticPositioning(instance, input);
+      }
+      // 시간 입력 필드 이벤트 설정
+      setupTimeInputHandlers(instance, input, portal, onHourInputHandler, onMinuteInputHandler);
     },
-    onDestroy: function (selectedDates, dateStr, instance) {
-      var _a;
-      var input = instance.input;
+    // ──────────────────────────────────────────────
+    // onDestroy: flatpickr 인스턴스 파괴 시 이벤트 리스너 정리
+    // ──────────────────────────────────────────────
+    onDestroy: (_selectedDates, _dateStr, fpInstance) => {
+      const instance = fpInstance;
+      const input = instance.input;
       if (!input) return;
       flatpickrInstanceRef.current = null;
-      // 메인 input 이벤트 리스너 제거
       input.removeEventListener('input', onInputHandler);
-      // blur 이벤트 리스너 제거
-      var onBlurHandler = instance === null || instance === void 0 ? void 0 : instance._onBlurHandler;
+      const onBlurHandler = instance._onBlurHandler;
       if (onBlurHandler) {
         input.removeEventListener('blur', onBlurHandler);
       }
-      var timeInputWrapper = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-time');
-      if (!timeInputWrapper) return;
-      // 시간 input 이벤트 리스너 제거
-      var hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
-      if (hourInput) {
-        hourInput.removeEventListener('input', onHourInputHandler);
-      }
-      // 분 input 이벤트 리스너 제거
-      var minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
-      if (minuteInput) {
-        minuteInput.removeEventListener('input', onMinuteInputHandler);
-      }
-      var handleMouseDown = instance._handleMouseDown;
-      if (handleMouseDown) {
-        document.removeEventListener('mousedown', handleMouseDown, true);
-      }
-    }
-  }, datePickerOptions);
-  var hasTimeOption = datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.hasOwnProperty('enableTime');
-  var iconName = hasTimeOption && (datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.hasOwnProperty('noCalendar')) ? 'clock' : 'calendar';
-  var processedCurrentDate = useMemo(function () {
-    var hasTime = options.enableTime;
-    var isTimeOnly = options.noCalendar;
-    var hasSeconds = options.enableSeconds;
+      cleanupTimeInputHandlers(instance, input, portal, onHourInputHandler, onMinuteInputHandler);
+      cleanupPositioning(instance);
+    },
+    ...datePickerOptions
+  }), [portal, size, hasTimeOption, datePickerOptionsKey, onChangeDateHandler, onInputHandler, onHourInputHandler, onMinuteInputHandler]);
+  const iconName = hasTimeOption && datePickerOptions && Object.hasOwn(datePickerOptions, 'noCalendar') ? 'clock' : 'calendar';
+  // ──────────────────────────────────────────────
+  // 시간 옵션에 따른 currentDate 전처리
+  // enableTime일 때 시간이 없으면 기본값(00:00 또는 23:59) 부여
+  // ──────────────────────────────────────────────
+  const processedCurrentDate = useMemo(() => {
+    const hasTime = options.enableTime;
+    const isTimeOnly = options.noCalendar;
+    const hasSeconds = options.enableSeconds;
     if (!hasTime && !isTimeOnly) return currentDate;
-    if (currentDate === null || currentDate === void 0 ? void 0 : currentDate.includes(':')) return currentDate;
-    if (isTimeOnly) {
-      var endTime = hasSeconds ? '23:59:59' : '23:59';
-      var startTime = hasSeconds ? '00:00:00' : '00:00';
-      return isEndDate ? endTime : startTime;
-    }
-    if (!currentDate) return '';
-    var format = hasSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
-    var momentDate = moment(currentDate);
-    return isEndDate ? momentDate.endOf('day').format(format) : momentDate.startOf('day').format(format);
+    if (currentDate?.includes(':')) return currentDate;
+    if (isTimeOnly) return getTimeOnlyDefault(hasSeconds, isEndDate);
+    return getDateTimeDefault(currentDate, hasSeconds, isEndDate);
   }, [currentDate, isEndDate, options.enableSeconds, options.enableTime, options.noCalendar]);
-  return _jsxs("div", __assign({
-    className: classNames('ncua-date-picker', "ncua-date-picker--".concat(size), {
+  // ──────────────────────────────────────────────
+  // 렌더링
+  // ──────────────────────────────────────────────
+  const flatpickrElement = _jsx(Flatpickr, {
+    ...attrs,
+    ref: ref || undefined,
+    className: classNames('ncua-date-picker__input'),
+    options: options,
+    value: processedCurrentDate,
+    render: (_ref2, ref) => {
+      let {
+        defaultValue,
+        value,
+        ...props
+      } = _ref2;
+      // flatpickr 전용 옵션이 input DOM에 전달되지 않도록 제거
+      const {
+        allowInput: _allowInput,
+        dateFormat: _dateFormat,
+        minDate: _minDate,
+        maxDate: _maxDate,
+        enableTime: _enableTime,
+        enableSeconds: _enableSeconds,
+        noCalendar: _noCalendar,
+        render: _render,
+        ...inputProps
+        // biome-ignore lint/suspicious/noExplicitAny: react-flatpickr render 콜백의 props 타입이 불완전하여 정확한 타이핑 불가
+      } = props;
+      return _jsx(CustomInput, {
+        ...inputProps,
+        id: inputId,
+        iconSize: size,
+        disabled: !!attrs.disabled,
+        defaultValue: defaultValue,
+        iconName: iconName,
+        ref: ref,
+        onInput: onInputHandler,
+        placeholder: attrs.placeholder
+      });
+    }
+  });
+  return _jsxs("div", {
+    className: classNames('ncua-date-picker', `ncua-date-picker--${size}`, {
+      'ncua-date-picker--portal': portal,
       'ncua-date-picker--disabled': attrs.disabled,
       'ncua-date-picker--has-time': hasTimeOption,
       'ncua-date-picker--destructive': attrs.destructive
-    }, className)
-  }, {
-    children: [_jsx(Flatpickr, __assign({}, attrs, {
-      ref: ref || undefined,
-      className: classNames('ncua-date-picker__input'),
-      options: options,
-      value: processedCurrentDate,
-      render: function (_a, ref) {
-        var defaultValue = _a.defaultValue,
-          value = _a.value,
-          props = __rest(_a, ["defaultValue", "value"]);
-        // input에 반영 되면 안되는 attribute 제외
-        var _b = props,
-          allowInput = _b.allowInput,
-          dateFormat = _b.dateFormat,
-          minDate = _b.minDate,
-          maxDate = _b.maxDate,
-          enableTime = _b.enableTime,
-          enableSeconds = _b.enableSeconds,
-          noCalendar = _b.noCalendar,
-          render = _b.render,
-          inputProps = __rest(_b, ["allowInput", "dateFormat", "minDate", "maxDate", "enableTime", "enableSeconds", "noCalendar", "render"]);
-        return _jsx(CustomInput, __assign({}, inputProps, {
-          id: inputId,
-          iconSize: size,
-          disabled: !!attrs.disabled,
-          defaultValue: defaultValue,
-          iconName: iconName,
-          ref: ref,
-          onInput: onInputHandler,
-          placeholder: attrs.placeholder
-        }));
-      }
-    })), attrs.destructive && _jsx("p", __assign({
-      className: "ncua-date-picker__destructive"
-    }, {
+    }, className),
+    children: [flatpickrElement, attrs.destructive && _jsx("p", {
+      className: "ncua-date-picker__destructive",
       children: attrs.destructive
-    }))]
-  }));
+    })]
+  });
 });
 DatePicker.displayName = 'DatePicker';