@ncds/ui-admin 1.8.13 → 1.8.14

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

@@ -183,6 +183,12 @@ const setupTimeInputHandlers = (instance, input, isPortal, onHourInput, onMinute
 };
 /** 시간 입력 필드 이벤트 리스너 정리 */
 const cleanupTimeInputHandlers = (instance, input, isPortal, onHourInput, onMinuteInput) => {
+  // document 전역 리스너는 캘린더 DOM 조회 성공 여부와 무관하게 항상 먼저 제거한다 (누수 방지)
+  const handleMouseDown = instance._handleMouseDown;
+  if (handleMouseDown) {
+    document.removeEventListener('mousedown', handleMouseDown, true);
+    instance._handleMouseDown = undefined;
+  }
   const timeContainer = isPortal ? instance.calendarContainer : input.parentElement;
   const timeInputWrapper = timeContainer?.querySelector('.flatpickr-time');
   if (!timeInputWrapper) return;
@@ -194,10 +200,6 @@ const cleanupTimeInputHandlers = (instance, input, isPortal, onHourInput, onMinu
   if (minuteInput) {
     minuteInput.removeEventListener('input', onMinuteInput);
   }
-  const handleMouseDown = instance._handleMouseDown;
-  if (handleMouseDown) {
-    document.removeEventListener('mousedown', handleMouseDown, true);
-  }
 };
 // ══════════════════════════════════════════
 // DatePicker 컴포넌트
@@ -227,7 +229,7 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
   const onValidationErrorRef = (0, _react.useRef)(onValidationError);
   onValidationErrorRef.current = onValidationError;
   /** portal 컨테이너를 lazily 생성 (이미 있으면 재사용), className은 매번 갱신 */
-  const getPortalContainer = () => {
+  const getPortalContainer = (0, _react.useCallback)(() => {
     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
@@ -243,7 +245,7 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
     document.body.appendChild(el);
     portalContainerRef.current = el;
     return el;
-  };
+  }, [portal, size, hasTimeOption]);
   /** 컴포넌트 언마운트 시 포탈 컨테이너 및 스크롤 리스너 정리 */
   (0, _react.useEffect)(() => {
     return () => {
@@ -255,7 +257,7 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
   // 날짜 유효성 검사
   // ──────────────────────────────────────────────
   /** minDate/maxDate 범위를 벗어났는지 확인 */
-  const checkDateViolations = (date, minDate, maxDate) => {
+  const checkDateViolations = (0, _react.useCallback)((date, minDate, maxDate) => {
     const violations = [];
     const inputDate = (0, _moment.default)(date);
     if (!inputDate.isValid()) return violations;
@@ -272,16 +274,16 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
       }
     }
     return violations;
-  };
+  }, []);
   // ──────────────────────────────────────────────
   // 이벤트 핸들러
   // ──────────────────────────────────────────────
   /** 유효하지 않은 입력 시 이전 날짜로 복원 */
-  const restorePreviousDate = (target, instance) => {
+  const restorePreviousDate = (0, _react.useCallback)((target, instance) => {
     if (instance.selectedDates.length > 0) {
       const prevDate = instance.selectedDates[0];
       if (prevDate instanceof Date && !Number.isNaN(prevDate.getTime())) {
-        const momentFormat = dateFormatRef.current.replace(/Y/g, 'YYYY').replace(/m/g, 'MM').replace(/d/g, 'DD');
+        const momentFormat = (0, _datePicker.convertToMomentFormat)(dateFormatRef.current);
         target.value = (0, _moment.default)(prevDate).format(momentFormat);
         instance.setDate(prevDate, false);
         return;
@@ -289,7 +291,7 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
     }
     target.value = '';
     instance.setDate('', false);
-  };
+  }, []);
   /** flatpickr에서 날짜가 변경되었을 때 호출 */
   const onChangeDateHandler = (0, _react.useCallback)((dateTimeStamp, dateStr, fpInstance) => {
     const instance = fpInstance;
@@ -303,7 +305,9 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
     const maxDate = instance.config.maxDate;
     const violations = checkDateViolations(selectedDate, minDate, maxDate);
     if (violations.length > 0 && onValidationErrorRef.current) {
-      const prevDate = instance?.selectedDates?.[0];
+      // flatpickr는 onChange 발화 전에 selectedDates를 위반된 새 날짜로 갱신하므로,
+      // 직전 유효 날짜를 보관해 둔 _previousDateBeforeInput을 previousDate로 사용한다
+      const prevDate = instance._previousDateBeforeInput;
       const validPrevDate = prevDate instanceof Date && !Number.isNaN(prevDate.getTime()) ? prevDate : undefined;
       onValidationErrorRef.current({
         date: selectedDate,
@@ -319,7 +323,6 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
     isValidDate(formattedDate) ? onChangeDateRef.current(formattedDate) : onChangeDateRef.current(dateStr);
   }, [checkDateViolations, restorePreviousDate]);
   /** input에 직접 타이핑할 때 날짜 형식 자동 변환 및 유효성 검사 */
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   const onInputHandler = (0, _react.useCallback)(e => {
     const target = e.target;
     const input = target.value;
@@ -372,12 +375,6 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
   // ──────────────────────────────────────────────
   // 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: !portal,
@@ -398,7 +395,7 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
         if (!momentDate.isValid()) {
           return '';
         }
-        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');
+        const momentFormat = (0, _datePicker.convertToMomentFormat)(format);
         return momentDate.format(momentFormat);
       } catch (_error) {
         return '';

package/dist/cjs/src/components/forms-and-input/date-picker/__tests__/DatePicker.memo.test.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _DatePicker = require("../DatePicker");
+// @vitest-environment jsdom
+
+const {
+  captured
+} = _vitest.vi.hoisted(() => ({
+  captured: []
+}));
+// react-flatpickr를 mock하여 DatePicker가 넘기는 options 참조를 렌더마다 수집한다.
+// (vi.mock / vi.hoisted는 vitest가 import 위로 호이스팅하므로 DatePicker import보다 먼저 적용된다)
+_vitest.vi.mock('react-flatpickr', () => ({
+  default: props => {
+    captured.push(props.options);
+    return null;
+  }
+}));
+(0, _vitest.describe)('#1 options useMemo 안정성', () => {
+  (0, _vitest.it)('부모가 같은 props로 강제 리렌더해도 options 참조가 동일하게 유지된다(재생성 안 됨)', () => {
+    let bump = () => undefined;
+    const Harness = () => {
+      const [, setN] = (0, _react.useState)(0);
+      bump = () => setN(x => x + 1);
+      return /*#__PURE__*/(0, _react.createElement)(_DatePicker.DatePicker, {
+        currentDate: '2024-03-20',
+        onChangeDate: () => undefined
+      });
+    };
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = (0, _client.createRoot)(container);
+    (0, _testUtils.act)(() => {
+      root.render(/*#__PURE__*/(0, _react.createElement)(Harness));
+    });
+    const countAfterMount = captured.length;
+    const firstOptions = captured[captured.length - 1];
+    (0, _testUtils.act)(() => {
+      bump();
+    });
+    const lastOptions = captured[captured.length - 1];
+    (0, _vitest.expect)(captured.length).toBeGreaterThan(countAfterMount); // 리렌더가 실제로 일어났는지
+    (0, _vitest.expect)(Object.is(firstOptions, lastOptions)).toBe(true); // 동일 참조 = options 재생성 안 됨
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    container.remove();
+  });
+});

package/dist/cjs/src/components/forms-and-input/date-picker/__tests__/DatePicker.test.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _DatePicker = require("../DatePicker");
+// @vitest-environment jsdom
+
+const mounted = [];
+function mount(props) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  (0, _testUtils.act)(() => {
+    root.render(/*#__PURE__*/(0, _react.createElement)(_DatePicker.DatePicker, props));
+  });
+  mounted.push({
+    root,
+    container
+  });
+  return container;
+}
+(0, _vitest.afterEach)(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    container.remove();
+  }
+  _vitest.vi.restoreAllMocks();
+});
+(0, _vitest.describe)('DatePicker 렌더 (스모크)', () => {
+  (0, _vitest.it)('기본 props로 input을 렌더하고 크래시하지 않는다', () => {
+    const container = mount({
+      currentDate: '2024-03-20',
+      onChangeDate: () => undefined
+    });
+    (0, _vitest.expect)(container.querySelector('input')).not.toBeNull();
+  });
+  (0, _vitest.it)('enableTime 옵션으로도 정상 렌더한다', () => {
+    const container = mount({
+      currentDate: '2024-03-20 14:30',
+      onChangeDate: () => undefined,
+      datePickerOptions: {
+        enableTime: true,
+        dateFormat: 'Y-m-d H:i'
+      }
+    });
+    (0, _vitest.expect)(container.querySelector('input')).not.toBeNull();
+  });
+});
+(0, _vitest.describe)('#4 document mousedown 리스너 정리', () => {
+  (0, _vitest.it)('enableTime 마운트 후 언마운트 시, 추가된 mousedown 리스너가 모두 제거된다(누수 없음)', () => {
+    const added = [];
+    const removed = [];
+    const origAdd = document.addEventListener.bind(document);
+    const origRemove = document.removeEventListener.bind(document);
+    _vitest.vi.spyOn(document, 'addEventListener').mockImplementation((type, fn, opts) => {
+      if (type === 'mousedown' && fn) added.push(fn);
+      return origAdd(type, fn, opts);
+    });
+    _vitest.vi.spyOn(document, 'removeEventListener').mockImplementation((type, fn, opts) => {
+      if (type === 'mousedown' && fn) removed.push(fn);
+      return origRemove(type, fn, opts);
+    });
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = (0, _client.createRoot)(container);
+    (0, _testUtils.act)(() => {
+      root.render(/*#__PURE__*/(0, _react.createElement)(_DatePicker.DatePicker, {
+        currentDate: '2024-03-20 14:30',
+        onChangeDate: () => undefined,
+        datePickerOptions: {
+          enableTime: true,
+          dateFormat: 'Y-m-d H:i'
+        }
+      }));
+    });
+    (0, _vitest.expect)(added.length).toBeGreaterThanOrEqual(1);
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    container.remove();
+    for (const fn of added) {
+      (0, _vitest.expect)(removed).toContain(fn);
+    }
+  });
+});
+(0, _vitest.describe)('#3 onValidationError.previousDate', () => {
+  // 허용 범위(10~25일) 기준: 마지막 유효 선택일과 범위 밖 위반일
+  const LAST_VALID_DAY = 15;
+  const OUT_OF_RANGE_DAY = 30;
+  (0, _vitest.it)('min/max 위반 시 previousDate는 위반 날짜가 아니라 직전 유효 날짜다', () => {
+    const onValidationError = _vitest.vi.fn();
+    const container = mount({
+      currentDate: '2024-03-20',
+      onChangeDate: () => undefined,
+      datePickerOptions: {
+        minDate: '2024-03-10',
+        maxDate: '2024-03-25',
+        allowInput: true
+      },
+      onValidationError
+    });
+    // flatpickr 인스턴스는 초기화된 input 엘리먼트의 _flatpickr에 부착된다
+    const input = container.querySelector('input');
+    const instance = input?._flatpickr;
+    (0, _vitest.expect)(instance).toBeTruthy();
+    // 1) 유효 날짜를 먼저 선택 → 직전 유효값(_previousDateBeforeInput)이 확립됨
+    (0, _testUtils.act)(() => {
+      instance.setDate(`2024-03-${LAST_VALID_DAY}`, true);
+    });
+    (0, _vitest.expect)(onValidationError).not.toHaveBeenCalled();
+    // 2) 허용 범위 밖 날짜 선택 → 위반 분기 진입
+    (0, _testUtils.act)(() => {
+      instance.setDate(`2024-03-${OUT_OF_RANGE_DAY}`, true);
+    });
+    (0, _vitest.expect)(onValidationError).toHaveBeenCalledTimes(1);
+    const arg = onValidationError.mock.calls[0][0];
+    (0, _vitest.expect)(arg.violations).toContain('maxDate');
+    (0, _vitest.expect)(arg.date.getDate()).toBe(OUT_OF_RANGE_DAY); // 위반 날짜
+    (0, _vitest.expect)(arg.previousDate?.getDate()).toBe(LAST_VALID_DAY); // 직전 유효 날짜 (≠ 위반 날짜)
+    (0, _vitest.expect)(arg.previousDate?.getTime()).not.toBe(arg.date.getTime());
+  });
+});

package/dist/cjs/src/components/forms-and-input/select/Select.js

@@ -24,12 +24,14 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref)
     optionItems,
     register,
     disabled = false,
+    readOnly = false,
     ...props
   } = _ref;
   return (0, _jsxRuntime.jsxs)("span", {
     className: (0, _classnames.default)('ncua-select', {
       destructive: destructive,
-      'ncua-select--simple': type === 'simple'
+      'ncua-select--simple': type === 'simple',
+      'ncua-select--readonly': readOnly
     }, className, `ncua-select--${size}`),
     children: [(0, _jsxRuntime.jsx)("span", {
       className: "ncua-select__content",
@@ -39,8 +41,17 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref)
         id: id,
         className: (0, _classnames.default)('ncua-select__tag', className),
         disabled: disabled,
+        "aria-readonly": readOnly,
         ...register,
         ...props,
+        onKeyDown: e => {
+          props.onKeyDown?.(e);
+          // native select에는 readonly 속성이 없어 키보드로 값이 바뀐다.
+          // 값 변경 키는 막고, Tab/Shift+Tab(포커스 이동)은 허용한다.
+          if (readOnly && e.key !== 'Tab') {
+            e.preventDefault();
+          }
+        },
         children: [placeholder && (0, _jsxRuntime.jsx)("option", {
           value: "",
           disabled: disabledPlaceholder,

package/dist/cjs/src/components/forms-and-input/select-box/SelectBox.js

@@ -78,6 +78,7 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
     value,
     optionItems = [],
     disabled = false,
+    readOnly = false,
     maxHeight = DEFAULT_MAX_HEIGHT,
     multiple = false,
     maxSelection,
@@ -110,7 +111,7 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
     return selectedOption ? selectedOption : placeholder;
   }, [multiple, selectedOption, placeholder]);
   const handleOptionSelect = option => {
-    if (disabled) return;
+    if (disabled || readOnly) return;
     if (multiple) {
       const newValue = tryToggle(option.id, Array.isArray(value) ? value : []);
       if (newValue === null) return;
@@ -139,7 +140,7 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
     maxHeight,
     itemCount: optionItems.length,
     optionItems,
-    disabled,
+    disabled: disabled || readOnly,
     multiple,
     onSelect: handleOptionSelect
   });
@@ -244,6 +245,7 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
       className: (0, _classnames.default)('ncua-selectbox', `ncua-selectbox--${size}`, {
         'ncua-selectbox--open': isOpen,
         'ncua-selectbox--disabled': disabled,
+        'ncua-selectbox--readonly': readOnly,
         'ncua-selectbox--simple': type === 'simple',
         'ncua-selectbox--multiple': multiple,
         destructive: destructive
@@ -259,6 +261,7 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
         "aria-haspopup": "listbox",
         "aria-controls": `selectbox-options-${id || 'default'}`,
         "aria-disabled": disabled,
+        "aria-readonly": readOnly,
         "aria-label": selectedOption ? selectedOption.label : placeholder,
         "aria-activedescendant": activeDescendantId,
         children: [(0, _jsxRuntime.jsxs)("div", {

package/dist/cjs/src/utils/__tests__/date-picker.test.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _moment = _interopRequireDefault(require("moment"));
+var _vitest = require("vitest");
+var _datePicker = require("../date-picker");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+(0, _vitest.describe)('convertToMomentFormat', () => {
+  (0, _vitest.it)('날짜 전용 포맷을 moment 토큰으로 변환한다 (기존 동작 보존)', () => {
+    (0, _vitest.expect)((0, _datePicker.convertToMomentFormat)('Y-m-d')).toBe('YYYY-MM-DD');
+  });
+  (0, _vitest.it)('2자리 연도(y)를 YY로 변환한다', () => {
+    (0, _vitest.expect)((0, _datePicker.convertToMomentFormat)('y-m-d')).toBe('YY-MM-DD');
+  });
+  (0, _vitest.it)('시간 포함 포맷의 H/i/S를 모두 변환한다 (버그 수정 지점)', () => {
+    (0, _vitest.expect)((0, _datePicker.convertToMomentFormat)('Y-m-d H:i')).toBe('YYYY-MM-DD HH:mm');
+    (0, _vitest.expect)((0, _datePicker.convertToMomentFormat)('Y-m-d H:i:S')).toBe('YYYY-MM-DD HH:mm:ss');
+  });
+  (0, _vitest.it)('월(m)과 분(i)이 함께 있어도 서로 침범하지 않는다', () => {
+    // m -> MM(월) 먼저, i -> mm(분) 나중 순서가 지켜져야 함
+    (0, _vitest.expect)((0, _datePicker.convertToMomentFormat)('Y-m-d H:i')).not.toContain('i');
+    (0, _vitest.expect)((0, _datePicker.convertToMomentFormat)('Y-m-d H:i')).toBe('YYYY-MM-DD HH:mm');
+  });
+  (0, _vitest.it)('실제 moment 출력이 의도한 문자열과 일치한다 (회귀 핵심)', () => {
+    const date = (0, _moment.default)('2024-03-20 14:30:05', 'YYYY-MM-DD HH:mm:ss').toDate();
+    (0, _vitest.expect)((0, _moment.default)(date).format((0, _datePicker.convertToMomentFormat)('Y-m-d'))).toBe('2024-03-20');
+    (0, _vitest.expect)((0, _moment.default)(date).format((0, _datePicker.convertToMomentFormat)('Y-m-d H:i'))).toBe('2024-03-20 14:30');
+    (0, _vitest.expect)((0, _moment.default)(date).format((0, _datePicker.convertToMomentFormat)('Y-m-d H:i:S'))).toBe('2024-03-20 14:30:05');
+  });
+});

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.formatMinuteInput = exports.formatHourInput = exports.formatDateInput = void 0;
+exports.formatMinuteInput = exports.formatHourInput = exports.formatDateInput = exports.convertToMomentFormat = void 0;
 exports.getDateFormat = getDateFormat;
 exports.getSubtractDate = getSubtractDate;
 exports.getToday = getToday;
@@ -31,6 +31,20 @@ function getSubtractDate(_ref) {
   } = _ref;
   return (0, _moment.default)(date).subtract(period, unit).toDate();
 }
+/** flatpickr dateFormat 토큰을 moment 포맷 토큰으로 변환 (단일 패스 치환으로 토큰 간 간섭 방지) */
+const convertToMomentFormat = format => {
+  const tokenMap = {
+    Y: 'YYYY',
+    y: 'YY',
+    m: 'MM',
+    d: 'DD',
+    H: 'HH',
+    i: 'mm',
+    S: 'ss'
+  };
+  return format.replace(/[YymdHiS]/g, matched => tokenMap[matched] || matched);
+};
+exports.convertToMomentFormat = convertToMomentFormat;
 const formatDateInput = input => {
   const dateRegex = /^(19|20)\d{2}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[0-1])$/;
   if (dateRegex.test(input)) {

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

@@ -4,7 +4,7 @@ import { Korean } from 'flatpickr/dist/l10n/ko';
 import moment from 'moment';
 import { forwardRef, useCallback, useEffect, useId, useMemo, useRef } from 'react';
 import Flatpickr from 'react-flatpickr';
-import { formatDateInput, formatHourInput, formatMinuteInput } from '../../../utils/date-picker';
+import { convertToMomentFormat, formatDateInput, formatHourInput, formatMinuteInput } from '../../../utils/date-picker';
 import { CustomInput } from './CustomInput';
 // ══════════════════════════════════════════
 // 유틸리티 함수
@@ -176,6 +176,12 @@ const setupTimeInputHandlers = (instance, input, isPortal, onHourInput, onMinute
 };
 /** 시간 입력 필드 이벤트 리스너 정리 */
 const cleanupTimeInputHandlers = (instance, input, isPortal, onHourInput, onMinuteInput) => {
+  // document 전역 리스너는 캘린더 DOM 조회 성공 여부와 무관하게 항상 먼저 제거한다 (누수 방지)
+  const handleMouseDown = instance._handleMouseDown;
+  if (handleMouseDown) {
+    document.removeEventListener('mousedown', handleMouseDown, true);
+    instance._handleMouseDown = undefined;
+  }
   const timeContainer = isPortal ? instance.calendarContainer : input.parentElement;
   const timeInputWrapper = timeContainer?.querySelector('.flatpickr-time');
   if (!timeInputWrapper) return;
@@ -187,10 +193,6 @@ const cleanupTimeInputHandlers = (instance, input, isPortal, onHourInput, onMinu
   if (minuteInput) {
     minuteInput.removeEventListener('input', onMinuteInput);
   }
-  const handleMouseDown = instance._handleMouseDown;
-  if (handleMouseDown) {
-    document.removeEventListener('mousedown', handleMouseDown, true);
-  }
 };
 // ══════════════════════════════════════════
 // DatePicker 컴포넌트
@@ -220,7 +222,7 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   const onValidationErrorRef = useRef(onValidationError);
   onValidationErrorRef.current = onValidationError;
   /** portal 컨테이너를 lazily 생성 (이미 있으면 재사용), className은 매번 갱신 */
-  const getPortalContainer = () => {
+  const getPortalContainer = useCallback(() => {
     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
@@ -236,7 +238,7 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     document.body.appendChild(el);
     portalContainerRef.current = el;
     return el;
-  };
+  }, [portal, size, hasTimeOption]);
   /** 컴포넌트 언마운트 시 포탈 컨테이너 및 스크롤 리스너 정리 */
   useEffect(() => {
     return () => {
@@ -248,7 +250,7 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   // 날짜 유효성 검사
   // ──────────────────────────────────────────────
   /** minDate/maxDate 범위를 벗어났는지 확인 */
-  const checkDateViolations = (date, minDate, maxDate) => {
+  const checkDateViolations = useCallback((date, minDate, maxDate) => {
     const violations = [];
     const inputDate = moment(date);
     if (!inputDate.isValid()) return violations;
@@ -265,16 +267,16 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       }
     }
     return violations;
-  };
+  }, []);
   // ──────────────────────────────────────────────
   // 이벤트 핸들러
   // ──────────────────────────────────────────────
   /** 유효하지 않은 입력 시 이전 날짜로 복원 */
-  const restorePreviousDate = (target, instance) => {
+  const restorePreviousDate = useCallback((target, instance) => {
     if (instance.selectedDates.length > 0) {
       const prevDate = instance.selectedDates[0];
       if (prevDate instanceof Date && !Number.isNaN(prevDate.getTime())) {
-        const momentFormat = dateFormatRef.current.replace(/Y/g, 'YYYY').replace(/m/g, 'MM').replace(/d/g, 'DD');
+        const momentFormat = convertToMomentFormat(dateFormatRef.current);
         target.value = moment(prevDate).format(momentFormat);
         instance.setDate(prevDate, false);
         return;
@@ -282,7 +284,7 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
     target.value = '';
     instance.setDate('', false);
-  };
+  }, []);
   /** flatpickr에서 날짜가 변경되었을 때 호출 */
   const onChangeDateHandler = useCallback((dateTimeStamp, dateStr, fpInstance) => {
     const instance = fpInstance;
@@ -296,7 +298,9 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     const maxDate = instance.config.maxDate;
     const violations = checkDateViolations(selectedDate, minDate, maxDate);
     if (violations.length > 0 && onValidationErrorRef.current) {
-      const prevDate = instance?.selectedDates?.[0];
+      // flatpickr는 onChange 발화 전에 selectedDates를 위반된 새 날짜로 갱신하므로,
+      // 직전 유효 날짜를 보관해 둔 _previousDateBeforeInput을 previousDate로 사용한다
+      const prevDate = instance._previousDateBeforeInput;
       const validPrevDate = prevDate instanceof Date && !Number.isNaN(prevDate.getTime()) ? prevDate : undefined;
       onValidationErrorRef.current({
         date: selectedDate,
@@ -312,7 +316,6 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     isValidDate(formattedDate) ? onChangeDateRef.current(formattedDate) : onChangeDateRef.current(dateStr);
   }, [checkDateViolations, restorePreviousDate]);
   /** input에 직접 타이핑할 때 날짜 형식 자동 변환 및 유효성 검사 */
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   const onInputHandler = useCallback(e => {
     const target = e.target;
     const input = target.value;
@@ -365,12 +368,6 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   // ──────────────────────────────────────────────
   // 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,
@@ -391,7 +388,7 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
         if (!momentDate.isValid()) {
           return '';
         }
-        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');
+        const momentFormat = convertToMomentFormat(format);
         return momentDate.format(momentFormat);
       } catch (_error) {
         return '';

package/dist/esm/src/components/forms-and-input/date-picker/__tests__/DatePicker.memo.test.js

@@ -0,0 +1,50 @@
+// @vitest-environment jsdom
+import { createElement, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import { DatePicker } from '../DatePicker';
+const {
+  captured
+} = vi.hoisted(() => ({
+  captured: []
+}));
+// react-flatpickr를 mock하여 DatePicker가 넘기는 options 참조를 렌더마다 수집한다.
+// (vi.mock / vi.hoisted는 vitest가 import 위로 호이스팅하므로 DatePicker import보다 먼저 적용된다)
+vi.mock('react-flatpickr', () => ({
+  default: props => {
+    captured.push(props.options);
+    return null;
+  }
+}));
+describe('#1 options useMemo 안정성', () => {
+  it('부모가 같은 props로 강제 리렌더해도 options 참조가 동일하게 유지된다(재생성 안 됨)', () => {
+    let bump = () => undefined;
+    const Harness = () => {
+      const [, setN] = useState(0);
+      bump = () => setN(x => x + 1);
+      return /*#__PURE__*/createElement(DatePicker, {
+        currentDate: '2024-03-20',
+        onChangeDate: () => undefined
+      });
+    };
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+      root.render(/*#__PURE__*/createElement(Harness));
+    });
+    const countAfterMount = captured.length;
+    const firstOptions = captured[captured.length - 1];
+    act(() => {
+      bump();
+    });
+    const lastOptions = captured[captured.length - 1];
+    expect(captured.length).toBeGreaterThan(countAfterMount); // 리렌더가 실제로 일어났는지
+    expect(Object.is(firstOptions, lastOptions)).toBe(true); // 동일 참조 = options 재생성 안 됨
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  });
+});