@ncds/ui-admin 1.7.0 → 1.8.0

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

@@ -1,141 +1,266 @@
-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());
 };
-var getTimeOnlyValue = function (hasSeconds, isEndDate) {
-    var endTime = hasSeconds ? '23:59:59' : '23:59';
-    var startTime = hasSeconds ? '00:00:00' : '00:00';
-    return isEndDate ? endTime : startTime;
+/** 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;
 };
-var getDateTimeValue = function (currentDate, hasSeconds, isEndDate) {
-    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);
+/** 현재 열려있는 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;
 };
-var processDate = function (currentDate, isEndDate, enableTime, noCalendar, enableSeconds) {
-    if (!enableTime && !noCalendar)
-        return currentDate;
-    if (currentDate === null || currentDate === void 0 ? void 0 : currentDate.includes(':'))
-        return currentDate;
-    if (noCalendar) {
-        return getTimeOnlyValue(enableSeconds, isEndDate);
+/** 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 '';
-    return getDateTimeValue(currentDate, enableSeconds, isEndDate);
+    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);
+    });
 };
-var DatePicker = 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);
+/** 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 = forwardRef(({ 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 isValidDateInstance = function (date) {
-        return date instanceof Date && !isNaN(date.getTime());
-    };
-    var handleInvalidSelectedDate = function (instance) {
-        var previousDate = instance === null || instance === void 0 ? void 0 : instance._previousDateBeforeInput;
-        if (isValidDateInstance(previousDate)) {
-            // 이전 값이 있으면 이전 값으로 복원
-            instance.selectedDates = [previousDate];
-            instance.setDate(previousDate, false);
-        }
-        else {
-            // 이전 값이 없으면 빈 값으로 처리
-            restorePreviousDate(instance.input, instance);
-        }
-        return true;
-    };
-    var handleDateViolations = function (selectedDate, instance) {
-        var _a;
-        var minDate = options.minDate, maxDate = options.maxDate;
-        var violations = checkDateViolations(selectedDate, minDate, maxDate);
-        if (violations.length > 0 && onValidationError) {
-            var prevDate = (_a = instance === null || instance === void 0 ? void 0 : instance.selectedDates) === null || _a === void 0 ? void 0 : _a[0];
-            onValidationError({
-                date: selectedDate,
-                minDate: minDate,
-                maxDate: maxDate,
-                violations: violations,
-                previousDate: isValidDateInstance(prevDate) ? prevDate : undefined,
-            });
-            return true; // onValidationError가 있으면 날짜 변경 안 함
-        }
-        return false;
-    };
-    var onChangeDateHandler = function (dateTimeStamp, dateStr, instance) {
-        if (!dateTimeStamp || dateTimeStamp.length === 0) {
-            restorePreviousDate(instance.input, instance);
-            return;
-        }
-        var selectedDate = dateTimeStamp[0];
-        if (!isValidDateInstance(selectedDate)) {
-            // 유효하지 않은 날짜 - 이전 값으로 복원하거나 빈 값으로 처리
-            handleInvalidSelectedDate(instance);
-            return;
-        }
-        if (handleDateViolations(selectedDate, instance)) {
-            return;
-        }
-        // 유효한 날짜인 경우 이전 날짜로 저장
-        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;
@@ -144,78 +269,120 @@ var DatePicker = forwardRef(function (_a, ref) {
         target.value = '';
         instance.setDate('', false);
     };
-    var handleEmptyInput = function (target, instance) {
-        target.value = '';
-        instance.setDate('', false);
-        onChangeDate('');
-        return true;
-    };
-    var validateFormattedDate = function (formattedInput, target, instance) {
-        var parsedDate = moment(formattedInput);
-        if (!parsedDate.isValid()) {
-            restorePreviousDate(target, instance);
-            return false;
+    /** flatpickr에서 날짜가 변경되었을 때 호출 */
+    const onChangeDateHandler = useCallback((dateTimeStamp, dateStr, fpInstance) => {
+        const instance = fpInstance;
+        if (!dateTimeStamp || dateTimeStamp.length === 0) {
+            restorePreviousDate(instance.input, instance);
+            return;
         }
-        var parsedDateObj = parsedDate.toDate();
-        var violations = checkDateViolations(parsedDateObj, minMaxDateRef.current.minDate, minMaxDateRef.current.maxDate);
-        // onInputHandler에서는 onValidationError를 호출하지 않음
-        // validation은 onChangeDateHandler에서만 처리
-        return violations.length === 0;
-    };
-    var onInputHandler = function (e) {
-        var target = e.target;
-        var input = target.value;
-        var instance = flatpickrInstanceRef.current;
+        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() === '') {
-            handleEmptyInput(target, instance);
+        if (!input?.trim()) {
+            target.value = '';
+            instance.setDate('', false);
+            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 && !validateFormattedDate(formattedInput, target, instance)) {
+        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({ mode: 'single', static: true, locale: Korean, dateFormat: 'Y-m-d', clickOpens: true, time_24hr: true, formatDate: function (date, format, _locale) {
+    }, []);
+    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: !portal,
+        ...(portal && {
+            appendTo: getPortalContainer(),
+        }),
+        locale: Korean,
+        dateFormat: 'Y-m-d',
+        clickOpens: true,
+        time_24hr: true,
+        /** 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
+                const momentFormat = format
                     .replace(/Y/g, 'YYYY')
                     .replace(/y/g, 'YY')
                     .replace(/m/g, 'MM')
@@ -225,102 +392,108 @@ var DatePicker = forwardRef(function (_a, ref) {
                     .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;
+        },
+        onChange: onChangeDateHandler,
+        allowInvalidPreload: true,
+        // ──────────────────────────────────────────────
+        // 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;
-        }, onDestroy: function (_selectedDates, _dateStr, instance) {
-            var _a;
-            var input = instance.input;
+            // 캘린더 위치 조정 및 스크롤/리사이즈 이벤트 연결
+            if (portal) {
+                setupPortalPositioning(instance, input);
+            }
+            else {
+                setupStaticPositioning(instance, input);
+            }
+            // 시간 입력 필드 이벤트 설정
+            setupTimeInputHandlers(instance, input, portal, onHourInputHandler, onMinuteInputHandler);
+        },
+        // ──────────────────────────────────────────────
+        // 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 ? Object.hasOwn(datePickerOptions, 'enableTime') : false;
-    var iconName = hasTimeOption && datePickerOptions && Object.hasOwn(datePickerOptions, 'noCalendar') ? 'clock' : 'calendar';
-    var processedCurrentDate = useMemo(function () { return processDate(currentDate, isEndDate, options.enableTime, options.noCalendar, options.enableSeconds); }, [currentDate, isEndDate, options.enableSeconds, options.enableTime, options.noCalendar]);
-    return (_jsxs("div", __assign({ className: classNames('ncua-date-picker', "ncua-date-picker--".concat(size), {
+            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?.includes(':'))
+            return currentDate;
+        if (isTimeOnly)
+            return getTimeOnlyDefault(hasSeconds, isEndDate);
+        return getDateTimeDefault(currentDate, hasSeconds, isEndDate);
+    }, [currentDate, isEndDate, options.enableSeconds, options.enableTime, options.noCalendar]);
+    // ──────────────────────────────────────────────
+    // 렌더링
+    // ──────────────────────────────────────────────
+    const flatpickrElement = (_jsx(Flatpickr, { ...attrs, ref: ref || undefined, className: classNames('ncua-date-picker__input'), options: options, value: processedCurrentDate, render: ({ defaultValue, value, ...props }, ref) => {
+            // 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" }, { children: attrs.destructive }))] })));
+        }, className), children: [flatpickrElement, attrs.destructive && _jsx("p", { className: "ncua-date-picker__destructive", children: attrs.destructive })] }));
 });
 DatePicker.displayName = 'DatePicker';
-export { DatePicker };