@ncds/ui-admin 1.8.12 → 1.8.14

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();
+  });
+});

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

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

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

@@ -17,12 +17,14 @@ export const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
     optionItems,
     register,
     disabled = false,
+    readOnly = false,
     ...props
   } = _ref;
   return _jsxs("span", {
     className: classNames('ncua-select', {
       destructive: destructive,
-      'ncua-select--simple': type === 'simple'
+      'ncua-select--simple': type === 'simple',
+      'ncua-select--readonly': readOnly
     }, className, `ncua-select--${size}`),
     children: [_jsx("span", {
       className: "ncua-select__content",
@@ -32,8 +34,17 @@ export const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
         id: id,
         className: classNames('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 && _jsx("option", {
           value: "",
           disabled: disabledPlaceholder,

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

@@ -71,6 +71,7 @@ const SelectBox = /*#__PURE__*/forwardRef((_ref2, ref
     value,
     optionItems = [],
     disabled = false,
+    readOnly = false,
     maxHeight = DEFAULT_MAX_HEIGHT,
     multiple = false,
     maxSelection,
@@ -103,7 +104,7 @@ const SelectBox = /*#__PURE__*/forwardRef((_ref2, ref
     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;
@@ -132,7 +133,7 @@ const SelectBox = /*#__PURE__*/forwardRef((_ref2, ref
     maxHeight,
     itemCount: optionItems.length,
     optionItems,
-    disabled,
+    disabled: disabled || readOnly,
     multiple,
     onSelect: handleOptionSelect
   });
@@ -237,6 +238,7 @@ const SelectBox = /*#__PURE__*/forwardRef((_ref2, ref
       className: classNames('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
@@ -252,6 +254,7 @@ const SelectBox = /*#__PURE__*/forwardRef((_ref2, ref
         "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: [_jsxs("div", {

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

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

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

@@ -21,6 +21,19 @@ export function getSubtractDate(_ref) {
   } = _ref;
   return moment(date).subtract(period, unit).toDate();
 }
+/** flatpickr dateFormat 토큰을 moment 포맷 토큰으로 변환 (단일 패스 치환으로 토큰 간 간섭 방지) */
+export 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);
+};
 export const formatDateInput = input => {
   const dateRegex = /^(19|20)\d{2}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[0-1])$/;
   if (dateRegex.test(input)) {

package/dist/temp/src/components/data-display/data-grid/DataGrid.d.ts

@@ -3,6 +3,7 @@ import type { DataGridActionBarProps, DataGridFilterBarProps, DataGridPagination
 export declare const DataGrid: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     variant?: import("./DataGrid.types").DataGridVariant | undefined;
     children: ReactNode;
+    showActionBar?: boolean | undefined;
 } & import("react").RefAttributes<HTMLDivElement>> & {
     SearchFilter: {
         ({ children, className, ...rest }: DataGridSearchFilterProps): import("react/jsx-runtime").JSX.Element;

package/dist/temp/src/components/data-display/data-grid/DataGrid.js

@@ -61,18 +61,19 @@ const sortChildren = (children) => {
     });
     return result;
 };
-const hasTableWrapperContent = (sorted) => sorted.filterBar.length > 0 ||
-    sorted.topActionBar.length > 0 ||
+const hasTableWrapperContent = (sorted, actionBarVisible) => sorted.filterBar.length > 0 ||
+    (actionBarVisible && sorted.topActionBar.length > 0) ||
     sorted.dataTable.length > 0 ||
-    sorted.bottomActionBar.length > 0;
+    (actionBarVisible && sorted.bottomActionBar.length > 0);
 const isTableSelectable = (dataTable) => dataTable.some((child) => isValidElement(child) && child.props.selectable === true);
 // ──────────────────────────────────────────────
 // Main DataGrid component
 // ──────────────────────────────────────────────
-const DataGridComponent = forwardRef(({ variant = 'search-result', children, className, ...rest }, ref) => {
+const DataGridComponent = forwardRef(({ variant = 'search-result', children, className, showActionBar, ...rest }, ref) => {
     const sorted = sortChildren(children);
-    const needsEmptyBottomBar = sorted.bottomActionBar.length === 0 && isTableSelectable(sorted.dataTable);
-    return (_jsxs("div", { ref: ref, className: classNames('ncua-data-grid', className, `ncua-data-grid--${variant}`), ...rest, children: [sorted.searchFilter, sorted.summary, hasTableWrapperContent(sorted) && (_jsxs("div", { className: "ncua-data-grid__table-wrapper", children: [sorted.filterBar, sorted.topActionBar, sorted.dataTable, sorted.bottomActionBar, needsEmptyBottomBar && _jsx("div", { className: "ncua-data-grid__action-bar ncua-data-grid__action-bar--bottom" })] })), sorted.pagination] }));
+    const actionBarVisible = showActionBar !== false;
+    const needsEmptyBottomBar = actionBarVisible && sorted.bottomActionBar.length === 0 && isTableSelectable(sorted.dataTable);
+    return (_jsxs("div", { ref: ref, className: classNames('ncua-data-grid', className, `ncua-data-grid--${variant}`), ...rest, children: [sorted.searchFilter, sorted.summary, hasTableWrapperContent(sorted, actionBarVisible) && (_jsxs("div", { className: "ncua-data-grid__table-wrapper", children: [sorted.filterBar, actionBarVisible && sorted.topActionBar, sorted.dataTable, actionBarVisible && sorted.bottomActionBar, needsEmptyBottomBar && _jsx("div", { className: "ncua-data-grid__action-bar ncua-data-grid__action-bar--bottom" })] })), sorted.pagination] }));
 });
 DataGridComponent.displayName = 'DataGrid';
 // ──────────────────────────────────────────────

package/dist/temp/src/components/data-display/data-grid/DataGrid.types.d.ts

@@ -6,6 +6,7 @@ export type ActionBarAlign = 'left' | 'right' | 'space-between';
 export type DataGridProps = Omit<ComponentProps<'div'>, 'ref'> & {
     variant?: DataGridVariant;
     children: ReactNode;
+    showActionBar?: boolean;
 };
 export type DataGridSearchFilterProps = ComponentProps<'div'> & {
     children: ReactNode;

package/dist/temp/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';
 // ══════════════════════════════════════════
 // 유틸리티 함수
@@ -171,6 +171,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)
@@ -183,10 +189,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 컴포넌트
@@ -204,7 +206,7 @@ export const DatePicker = forwardRef(({ shouldFocus = true, currentDate, size =
     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}`, {
@@ -221,7 +223,7 @@ export const DatePicker = forwardRef(({ shouldFocus = true, currentDate, size =
         document.body.appendChild(el);
         portalContainerRef.current = el;
         return el;
-    };
+    }, [portal, size, hasTimeOption]);
     /** 컴포넌트 언마운트 시 포탈 컨테이너 및 스크롤 리스너 정리 */
     useEffect(() => {
         return () => {
@@ -233,7 +235,7 @@ export const DatePicker = forwardRef(({ shouldFocus = true, currentDate, size =
     // 날짜 유효성 검사
     // ──────────────────────────────────────────────
     /** minDate/maxDate 범위를 벗어났는지 확인 */
-    const checkDateViolations = (date, minDate, maxDate) => {
+    const checkDateViolations = useCallback((date, minDate, maxDate) => {
         const violations = [];
         const inputDate = moment(date);
         if (!inputDate.isValid())
@@ -251,16 +253,16 @@ export const DatePicker = forwardRef(({ shouldFocus = true, currentDate, size =
             }
         }
         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;
@@ -268,7 +270,7 @@ export const DatePicker = forwardRef(({ shouldFocus = true, currentDate, size =
         }
         target.value = '';
         instance.setDate('', false);
-    };
+    }, []);
     /** flatpickr에서 날짜가 변경되었을 때 호출 */
     const onChangeDateHandler = useCallback((dateTimeStamp, dateStr, fpInstance) => {
         const instance = fpInstance;
@@ -283,7 +285,9 @@ export const DatePicker = forwardRef(({ shouldFocus = true, currentDate, size =
         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,
@@ -299,7 +303,6 @@ export const DatePicker = forwardRef(({ shouldFocus = true, currentDate, size =
         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;
@@ -356,12 +359,6 @@ export const DatePicker = forwardRef(({ shouldFocus = true, currentDate, size =
     // ──────────────────────────────────────────────
     // 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,
@@ -382,14 +379,7 @@ export const DatePicker = forwardRef(({ shouldFocus = true, currentDate, size =
                 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) {

package/dist/temp/src/components/forms-and-input/date-picker/__tests__/DatePicker.memo.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,43 @@
+// @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 createElement(DatePicker, { currentDate: '2024-03-20', onChangeDate: () => undefined });
+        };
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = createRoot(container);
+        act(() => {
+            root.render(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();
+    });
+});

package/dist/temp/src/components/forms-and-input/date-picker/__tests__/DatePicker.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/temp/src/components/forms-and-input/select/Select.d.ts

@@ -7,6 +7,7 @@ export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, 'size
     disabledPlaceholder?: boolean;
     hintText?: string;
     destructive?: boolean;
+    readOnly?: boolean;
     size?: Extract<Size, 'xs' | 'sm' | 'md'>;
     optionItems?: OptionType[];
     register?: UseFormRegisterReturn;