@ncds/ui-admin 1.7.0 → 1.8.0

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

@@ -13,141 +13,275 @@ var _reactFlatpickr = _interopRequireDefault(require("react-flatpickr"));
 var _datePicker = require("../../utils/date-picker");
 var _CustomInput = require("./CustomInput");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var __assign = void 0 && (void 0).__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];
+// ══════════════════════════════════════════
+// 유틸리티 함수
+// ══════════════════════════════════════════
+const isValidDate = dateString => {
+  const date = new Date(dateString);
+  return date instanceof Date && !isNaN(date.getTime());
+};
+/** 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);
     }
-    return t;
-  };
-  return __assign.apply(this, arguments);
+    parentEl = parentEl.parentElement;
+  }
+  return parents;
 };
-var __rest = void 0 && (void 0).__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]];
+/** 현재 열려있는 flatpickr 캘린더 요소를 반환 */
+const getOpenCalendar = (instance, input, isPortal) => {
+  if (isPortal) {
+    return instance.calendarContainer?.classList.contains('open') ? instance.calendarContainer : null;
   }
-  return t;
+  return input.parentElement?.querySelector('.flatpickr-calendar.open') ?? null;
 };
-
-/** biome-ignore-all lint/correctness/noUnusedVariables: <explanation> */
-
-var isValidDate = function (dateString) {
-  var date = new Date(dateString);
-  return date instanceof Date && !isNaN(date.getTime());
+/** 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;
 };
-var getTimeOnlyValue = function (hasSeconds, isEndDate) {
-  var endTime = hasSeconds ? '23:59:59' : '23:59';
-  var startTime = hasSeconds ? '00:00:00' : '00:00';
+/** 시간 전용 모드의 기본값 반환 */
+const getTimeOnlyDefault = (hasSeconds, isEndDate) => {
+  const endTime = hasSeconds ? '23:59:59' : '23:59';
+  const startTime = hasSeconds ? '00:00:00' : '00:00';
   return isEndDate ? endTime : startTime;
 };
-var getDateTimeValue = function (currentDate, hasSeconds, isEndDate) {
-  var format = hasSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
-  var momentDate = (0, _moment.default)(currentDate);
+/** 날짜+시간 모드에서 시간이 없는 경우 기본값 부여 */
+const getDateTimeDefault = (currentDate, hasSeconds, isEndDate) => {
+  if (!currentDate) return '';
+  const format = hasSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
+  const momentDate = (0, _moment.default)(currentDate);
   return isEndDate ? momentDate.endOf('day').format(format) : momentDate.startOf('day').format(format);
 };
-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);
+// ══════════════════════════════════════════
+// 캘린더 위치 조정 (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);
   }
-  if (!currentDate) return '';
-  return getDateTimeValue(currentDate, enableSeconds, isEndDate);
 };
-var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.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 = (0, _react.useRef)(null);
-  var dateFormatRef = (0, _react.useRef)('Y-m-d');
-  var minMaxDateRef = (0, _react.useRef)({});
-  var checkDateViolations = function (date, minDate, maxDate) {
-    var violations = [];
-    var inputDate = (0, _moment.default)(date);
+// ══════════════════════════════════════════
+// 시간 입력 필드 (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 컴포넌트
+// ══════════════════════════════════════════
+const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    shouldFocus = true,
+    currentDate,
+    size = 'xs',
+    onChangeDate,
+    datePickerOptions,
+    isEndDate = false,
+    onValidationError,
+    className,
+    portal = false,
+    ...attrs
+  } = _ref;
+  const flatpickrInstanceRef = (0, _react.useRef)(null);
+  const dateFormatRef = (0, _react.useRef)('Y-m-d');
+  const minMaxDateRef = (0, _react.useRef)({});
+  /** portal 모드: 캘린더를 담을 persistent 컨테이너 (한 번 생성, 언마운트 시 제거) */
+  const portalContainerRef = (0, _react.useRef)(null);
+  const hasTimeOption = datePickerOptions && Object.hasOwn(datePickerOptions, 'enableTime');
+  // 콜백 props를 ref에 저장하여 memoized options에서 최신값 참조
+  const onChangeDateRef = (0, _react.useRef)(onChangeDate);
+  onChangeDateRef.current = onChangeDate;
+  const onValidationErrorRef = (0, _react.useRef)(onValidationError);
+  onValidationErrorRef.current = onValidationError;
+  /** portal 컨테이너를 lazily 생성 (이미 있으면 재사용), className은 매번 갱신 */
+  const getPortalContainer = () => {
+    if (!portal || typeof document === 'undefined') return undefined;
+    const portalClassName = (0, _classnames.default)('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;
+  };
+  /** 컴포넌트 언마운트 시 포탈 컨테이너 및 스크롤 리스너 정리 */
+  (0, _react.useEffect)(() => {
+    return () => {
+      portalContainerRef.current?.remove();
+      portalContainerRef.current = null;
+    };
+  }, []);
+  // ──────────────────────────────────────────────
+  // 날짜 유효성 검사
+  // ──────────────────────────────────────────────
+  /** minDate/maxDate 범위를 벗어났는지 확인 */
+  const checkDateViolations = (date, minDate, maxDate) => {
+    const violations = [];
+    const inputDate = (0, _moment.default)(date);
     if (!inputDate.isValid()) return violations;
     if (minDate) {
-      var min = (0, _moment.default)(minDate);
+      const min = (0, _moment.default)(minDate);
       if (min.isValid() && inputDate.isBefore(min, 'day')) {
         violations.push('minDate');
       }
     }
     if (maxDate) {
-      var max = (0, _moment.default)(maxDate);
+      const max = (0, _moment.default)(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 = (0, _datePicker.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 = (0, _moment.default)(prevDate).format(momentFormat);
         instance.setDate(prevDate, false);
         return;
@@ -156,214 +290,240 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
     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 = (0, _moment.default)(formattedInput);
-    if (!parsedDate.isValid()) {
-      restorePreviousDate(target, instance);
-      return false;
+  /** flatpickr에서 날짜가 변경되었을 때 호출 */
+  const onChangeDateHandler = (0, _react.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 = (0, _datePicker.formatDateInput)(dateStr);
+    isValidDate(formattedDate) ? onChangeDateRef.current(formattedDate) : onChangeDateRef.current(dateStr);
+  }, []);
+  /** input에 직접 타이핑할 때 날짜 형식 자동 변환 및 유효성 검사 */
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const onInputHandler = (0, _react.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 = (0, _datePicker.formatDateInput)(input);
+    const formattedInput = (0, _datePicker.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 = (0, _moment.default)(formattedInput);
+    if (!parsedDate.isValid()) {
+      restorePreviousDate(target, instance);
       return;
     }
-  };
-  var onHourInputHandler = function (e) {
-    var target = e.target;
-    var input = target.value;
-    var formattedInput = (0, _datePicker.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 = (0, _react.useCallback)(e => {
+    const target = e.target;
+    const input = target.value;
+    const formattedInput = (0, _datePicker.formatHourInput)(input);
     if (formattedInput === input) return;
     target.value = formattedInput;
-  };
-  var onMinuteInputHandler = function (e) {
-    var target = e.target;
-    var input = target.value;
-    var formattedInput = (0, _datePicker.formatMinuteInput)(input);
+  }, []);
+  /** 시간 입력 필드 - 분(minute) 값 포맷팅 (0~59) */
+  const onMinuteInputHandler = (0, _react.useCallback)(e => {
+    const target = e.target;
+    const input = target.value;
+    const formattedInput = (0, _datePicker.formatMinuteInput)(input);
     if (formattedInput === input) return;
     target.value = formattedInput;
-  };
-  var inputId = (0, _react.useId)();
-  var options = __assign({
+  }, []);
+  const inputId = (0, _react.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 = (0, _react.useMemo)(() => ({
     mode: 'single',
-    static: true,
+    static: !portal,
+    ...(portal && {
+      appendTo: getPortalContainer()
+    }),
     locale: _ko.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 = (0, _moment.default)(date);
+        const momentDate = (0, _moment.default)(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 ? Object.hasOwn(datePickerOptions, 'enableTime') : false;
-  var iconName = hasTimeOption && datePickerOptions && Object.hasOwn(datePickerOptions, 'noCalendar') ? 'clock' : 'calendar';
-  var processedCurrentDate = (0, _react.useMemo)(function () {
-    return processDate(currentDate, isEndDate, options.enableTime, options.noCalendar, 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 = (0, _react.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]);
-  return (0, _jsxRuntime.jsxs)("div", __assign({
-    className: (0, _classnames.default)('ncua-date-picker', "ncua-date-picker--".concat(size), {
+  // ──────────────────────────────────────────────
+  // 렌더링
+  // ──────────────────────────────────────────────
+  const flatpickrElement = (0, _jsxRuntime.jsx)(_reactFlatpickr.default, {
+    ...attrs,
+    ref: ref || undefined,
+    className: (0, _classnames.default)('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 (0, _jsxRuntime.jsx)(_CustomInput.CustomInput, {
+        ...inputProps,
+        id: inputId,
+        iconSize: size,
+        disabled: !!attrs.disabled,
+        defaultValue: defaultValue,
+        iconName: iconName,
+        ref: ref,
+        onInput: onInputHandler,
+        placeholder: attrs.placeholder
+      });
+    }
+  });
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('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: [(0, _jsxRuntime.jsx)(_reactFlatpickr.default, __assign({}, attrs, {
-      ref: ref || undefined,
-      className: (0, _classnames.default)('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 (0, _jsxRuntime.jsx)(_CustomInput.CustomInput, __assign({}, inputProps, {
-          id: inputId,
-          iconSize: size,
-          disabled: !!attrs.disabled,
-          defaultValue: defaultValue,
-          iconName: iconName,
-          ref: ref,
-          onInput: onInputHandler,
-          placeholder: attrs.placeholder
-        }));
-      }
-    })), attrs.destructive && (0, _jsxRuntime.jsx)("p", __assign({
-      className: "ncua-date-picker__destructive"
-    }, {
+    }, className),
+    children: [flatpickrElement, attrs.destructive && (0, _jsxRuntime.jsx)("p", {
+      className: "ncua-date-picker__destructive",
       children: attrs.destructive
-    }))]
-  }));
+    })]
+  });
 });
 DatePicker.displayName = 'DatePicker';