@ncds/ui-admin 1.8.13 → 1.8.15

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/range-date-picker/RangeDatePicker.js

@@ -3,6 +3,10 @@ import moment from 'moment';
 import { forwardRef, useCallback, useEffect } from 'react';
 import { DatePicker } from '../date-picker/DatePicker';
 import { getDateFormat } from '../date-picker/utils';
+/** 시작일·종료일이 모두 채워져 있고 유효한 날짜일 때만 범위 검증이 의미가 있다.
+ *  한쪽이라도 비어 있으면(예: ENTIRE 초기화로 양쪽이 '') moment 비교가 전부 무효가 되어
+ *  onDateValidation 에 "Invalid date" 같은 잘못된 newDate 가 전달되므로 검증을 건너뛴다. */
+const areBothDatesValid = (start, end) => Boolean(start) && Boolean(end) && moment(start).isValid() && moment(end).isValid();
 const RangeDatePicker = forwardRef(({ startDateOptions, endDateOptions, validationOption, onDateValidation, size = 'xs' }, ref) => {
     const getOverlapResult = useCallback((type) => {
         if (type === 'start' && moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate)) {
@@ -52,6 +56,9 @@ const RangeDatePicker = forwardRef(({ startDateOptions, endDateOptions, validati
         }
     }, [startDateOptions, endDateOptions, validationOption, onDateValidation, getOverlapResult, getSettingNewDate]);
     useEffect(() => {
+        if (!areBothDatesValid(startDateOptions.currentDate, endDateOptions.currentDate)) {
+            return;
+        }
         const isOverDate = moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
         if (isOverDate) {
             changeSettingDateAndAlert('start');
@@ -73,8 +80,18 @@ const RangeDatePicker = forwardRef(({ startDateOptions, endDateOptions, validati
         else {
             changeSettingDateAndAlert('start', true);
         }
+        // 시작일이 변경될 때만 검증한다. 반대편 날짜·콜백·setting 을 deps 에 넣으면, 부모가 매 렌더
+        // 새 options 객체와 onDateValidation 을 내려보내는 경우(예: RangeDatePickerWithButtons)
+        // effect 가 매 렌더 재실행되어 검증 루프가 발생하므로 의도적으로 deps 를 좁게 유지한다.
+        // (과거 무한 루프 수정 47f09427 + deps 축소 1c5ac7ad 의 결과 — deps 를 되돌리면 루프 재발)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [startDateOptions.currentDate]);
     useEffect(() => {
+        if (!areBothDatesValid(startDateOptions.currentDate, endDateOptions.currentDate)) {
+            return;
+        }
+        // 종료일이 '오늘'이면 종료측 검증을 건너뛴다: shopby 는 종료일=오늘이 정상 기본값이라
+        // (고도몰=어제) 이 상태를 에러로 잡지 않기 위함. (도입 d1bd8751)
         const isNotTodayEndDate = !moment(endDateOptions.currentDate).isSame(moment(), 'day');
         if (!validationOption?.setting || !isNotTodayEndDate) {
             return;
@@ -97,6 +114,11 @@ const RangeDatePicker = forwardRef(({ startDateOptions, endDateOptions, validati
         else {
             changeSettingDateAndAlert('end', true);
         }
+        // 종료일이 변경될 때만 검증한다(위 시작일 effect 와 동일 — 47f09427/1c5ac7ad).
+        // 본문이 startDateOptions.currentDate 도 참조하지만 시작일 변경 시 종료측 검증을 다시 돌리지
+        // 않는 건 의도된 것이다: 시작일 변경은 위 effect 가 type:'start' 로 처리하며, 여기에 start 를
+        // deps 로 넣으면 1c5ac7ad 가 제거한 그 루프가 재발한다.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [endDateOptions.currentDate]);
     return (_jsxs("div", { className: "ncua-range-date-picker", ref: ref || undefined, children: [_jsx(DatePicker, { ...startDateOptions, ref: undefined, size: size }), "~", _jsx(DatePicker, { isEndDate: true, ...endDateOptions, ref: undefined, size: size })] }));
 });

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

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

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

@@ -0,0 +1,60 @@
+// @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 { RangeDatePicker } from '../RangeDatePicker';
+const mounted = [];
+function mount(props) {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+        root.render(createElement(RangeDatePicker, props));
+    });
+    mounted.push({ root, container });
+    return container;
+}
+afterEach(() => {
+    for (const { root, container } of mounted.splice(0)) {
+        act(() => {
+            root.unmount();
+        });
+        container.remove();
+    }
+    vi.restoreAllMocks();
+});
+describe('#1 빈/무효 날짜 검증 가드', () => {
+    const validationOption = { setting: { unit: 'days', period: 7 } };
+    it('양쪽 날짜가 비어 있으면 onDateValidation 을 호출하지 않는다', () => {
+        const onDateValidation = vi.fn();
+        mount({
+            startDateOptions: { currentDate: '', onChangeDate: () => undefined },
+            endDateOptions: { currentDate: '', onChangeDate: () => undefined },
+            validationOption,
+            onDateValidation,
+        });
+        expect(onDateValidation).not.toHaveBeenCalled();
+    });
+    it('한쪽(종료일)만 비어 있어도 "Invalid date" 를 newDate 로 전달하지 않는다', () => {
+        const onDateValidation = vi.fn();
+        mount({
+            startDateOptions: { currentDate: '2024-03-01', onChangeDate: () => undefined },
+            endDateOptions: { currentDate: '', onChangeDate: () => undefined },
+            validationOption,
+            onDateValidation,
+        });
+        const leakedInvalidDate = onDateValidation.mock.calls.some(([arg]) => arg?.newDate === 'Invalid date');
+        expect(leakedInvalidDate).toBe(false);
+    });
+    it('양쪽 날짜가 유효하면 검증이 정상 동작한다(가드가 정상 입력을 막지 않음)', () => {
+        const onDateValidation = vi.fn();
+        mount({
+            startDateOptions: { currentDate: '2024-03-01', onChangeDate: () => undefined },
+            endDateOptions: { currentDate: '2024-03-05', onChangeDate: () => undefined },
+            validationOption,
+            onDateValidation,
+        });
+        expect(onDateValidation).toHaveBeenCalled();
+    });
+});

package/dist/temp/src/components/forms-and-input/range-date-picker-with-buttons/RangeDatePickerWithButtons.js

@@ -21,6 +21,9 @@ const RangeDatePickerWithButtons = ({ useYesterdayAsEndDate = false, size = 'xs'
             unit: currentPeriodItem.unit,
         }));
         startDateOptions.onChangeDate(startDate);
+        // 종료일 기준이 플랫폼마다 다르다: 고도몰=어제, shopby=오늘.
+        // useYesterdayAsEndDate=true 면 종료일을 어제로(고도몰), false 면 오늘로(shopby) 둔다.
+        // 종료일만 옮길 뿐 시작일을 종료일 기준으로 재계산하지는 않는다(abc16b3d).
         const endDate = useYesterdayAsEndDate
             ? getDateFormat(getSubtractDate({
                 period: 1,
@@ -37,7 +40,12 @@ const RangeDatePickerWithButtons = ({ useYesterdayAsEndDate = false, size = 'xs'
         if (currentButtonId !== 'NONE') {
             setCalculatedDate();
         }
+        // 선택된 기간 버튼(currentButtonId)이 바뀔 때만 날짜를 재계산한다. setCalculatedDate 는
+        // 매 렌더 새로 생성되므로 deps 에 넣으면 effect 가 매 렌더 실행된다 — 의도적으로 좁게 유지.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentButtonId]);
-    return (_jsxs("div", { className: "ncua-range-date-picker-with-buttons", children: [_jsx(ButtonGroup, { size: size, children: periodKeys.map((key) => (_jsx(ButtonGroup.Item, { isCurrent: currentButtonId === key, label: items[key].text, onClick: () => setCurrentButtonId(key) }, key))) }), _jsx(RangeDatePicker, { startDateOptions: { ...startDateOptions, onChangeDate: (date) => handleOnChangeDate(date, 'START') }, endDateOptions: { ...endDateOptions, onChangeDate: (date) => handleOnChangeDate(date, 'END') }, validationOption: validationOption, onDateValidation: onDateValidation, size: size })] }));
+    return (_jsxs("div", { className: "ncua-range-date-picker-with-buttons", children: [_jsx(ButtonGroup, { size: size, children: periodKeys
+                    .filter((key) => items[key])
+                    .map((key) => (_jsx(ButtonGroup.Item, { isCurrent: currentButtonId === key, label: items[key].text, onClick: () => setCurrentButtonId(key) }, key))) }), _jsx(RangeDatePicker, { startDateOptions: { ...startDateOptions, onChangeDate: (date) => handleOnChangeDate(date, 'START') }, endDateOptions: { ...endDateOptions, onChangeDate: (date) => handleOnChangeDate(date, 'END') }, validationOption: validationOption, onDateValidation: onDateValidation, size: size })] }));
 };
 export { RangeDatePickerWithButtons };

package/dist/temp/src/components/forms-and-input/range-date-picker-with-buttons/__tests__/RangeDatePickerWithButtons.test.d.ts

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

package/dist/temp/src/components/forms-and-input/range-date-picker-with-buttons/__tests__/RangeDatePickerWithButtons.test.js

@@ -0,0 +1,42 @@
+// @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 { RangeDatePickerWithButtons } from '../RangeDatePickerWithButtons';
+const mounted = [];
+function mount(props) {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+        root.render(createElement(RangeDatePickerWithButtons, props));
+    });
+    mounted.push({ root, container });
+    return container;
+}
+afterEach(() => {
+    for (const { root, container } of mounted.splice(0)) {
+        act(() => {
+            root.unmount();
+        });
+        container.remove();
+    }
+    vi.restoreAllMocks();
+});
+describe('#6 periodItems 에 없는 periodKey 방어', () => {
+    const baseProps = {
+        currentButtonId: 'NONE',
+        setCurrentButtonId: () => undefined,
+        startDateOptions: { currentDate: '2024-03-01', onChangeDate: () => undefined },
+        endDateOptions: { currentDate: '2024-03-05', onChangeDate: () => undefined },
+    };
+    it('periodKeys 에 periodItems 에 없는 키가 있어도 크래시하지 않고 유효한 버튼만 렌더한다', () => {
+        const container = mount({
+            ...baseProps,
+            periodKeys: ['TODAY', 'UNKNOWN_KEY'],
+        });
+        // 유효한 키(TODAY='오늘')는 렌더되고, 정의에 없는 키는 건너뛴다(크래시 없음)
+        expect(container.textContent).toContain('오늘');
+    });
+});

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;

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

@@ -2,9 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { HintText } from '../../shared/hintText/HintText';
-export const Select = forwardRef(({ placeholder, disabledPlaceholder = false, id, className, hintText, children, size = 'xs', type = 'default', destructive = false, value, optionItems, register, disabled = false, ...props }, ref) => {
+export const Select = forwardRef(({ placeholder, disabledPlaceholder = false, id, className, hintText, children, size = 'xs', type = 'default', destructive = false, value, optionItems, register, disabled = false, readOnly = false, ...props }, ref) => {
     return (_jsxs("span", { className: classNames('ncua-select', {
             destructive: destructive,
             'ncua-select--simple': type === 'simple',
-        }, className, `ncua-select--${size}`), children: [_jsx("span", { className: "ncua-select__content", children: _jsxs("select", { value: value, ref: ref, id: id, className: classNames('ncua-select__tag', className), disabled: disabled, ...register, ...props, children: [placeholder && (_jsx("option", { value: "", disabled: disabledPlaceholder, children: placeholder })), optionItems?.map((item) => (_jsx("option", { value: item.id, children: item.label }, item.id))), children] }) }), hintText && (_jsx(HintText, { destructive: destructive, className: "ncua-hint-text", children: hintText }))] }));
+            'ncua-select--readonly': readOnly,
+        }, className, `ncua-select--${size}`), children: [_jsx("span", { className: "ncua-select__content", children: _jsxs("select", { value: value, 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, children: placeholder })), optionItems?.map((item) => (_jsx("option", { value: item.id, children: item.label }, item.id))), children] }) }), hintText && (_jsx(HintText, { destructive: destructive, className: "ncua-hint-text", children: hintText }))] }));
 });

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

@@ -16,6 +16,7 @@ type SelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> &
     value?: OptionValue;
     onChange?: OptionChangeHandler;
     disabled?: boolean;
+    readOnly?: boolean;
     register?: UseFormRegisterReturn;
     maxHeight?: number;
     multiple?: boolean;

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

@@ -40,7 +40,7 @@ function DisplayValue({ displayValue }) {
     }
     return (_jsxs("div", { className: "ncua-selectbox__value-container", children: [displayValue.icon && (_jsx("span", { className: "ncua-selectbox__value-icon", children: _jsx(displayValue.icon, { width: 16, height: 16 }) })), _jsx("span", { className: "ncua-selectbox__value-text", children: displayValue.label })] }));
 }
-const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceholder = false, hintText, size = 'xs', type = 'default', autoWidth = true, destructive = false, value, optionItems = [], disabled = false, maxHeight = DEFAULT_MAX_HEIGHT, multiple = false, maxSelection, align = 'left', usePortal, id, className, children, register, onChange, onEdit, onComplete, ...props }, ref
+const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceholder = false, hintText, size = 'xs', type = 'default', autoWidth = true, destructive = false, value, optionItems = [], disabled = false, readOnly = false, maxHeight = DEFAULT_MAX_HEIGHT, multiple = false, maxSelection, align = 'left', usePortal, id, className, children, register, onChange, onEdit, onComplete, ...props }, ref
 // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 옵션/멀티/태그/포탈 등 필수 분기 통합
 ) => {
     const internalRef = useRef(null);
@@ -59,7 +59,7 @@ const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceho
         return selectedOption ? selectedOption : placeholder;
     }, [multiple, selectedOption, placeholder]);
     const handleOptionSelect = (option) => {
-        if (disabled)
+        if (disabled || readOnly)
             return;
         if (multiple) {
             const newValue = tryToggle(option.id, Array.isArray(value) ? value : []);
@@ -79,7 +79,7 @@ const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceho
         maxHeight,
         itemCount: optionItems.length,
         optionItems,
-        disabled,
+        disabled: disabled || readOnly,
         multiple,
         onSelect: handleOptionSelect,
     });
@@ -147,10 +147,11 @@ const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceho
     return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: internalRef, 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,
-                }, className), ...props, children: [_jsxs("div", { className: classNames('ncua-selectbox__content'), onClick: toggleDropdown, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": `selectbox-options-${id || 'default'}`, "aria-disabled": disabled, "aria-label": selectedOption ? selectedOption.label : placeholder, "aria-activedescendant": activeDescendantId, children: [_jsxs("div", { className: "ncua-selectbox__content-inner", children: [_jsx("div", { className: "ncua-selectbox__value", children: _jsx(DisplayValue, { displayValue: displayValue }) }), _jsx(ChevronDown, { width: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM, height: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM, color: disabled ? COLOR.gray300 : COLOR.gray500, className: classNames('ncua-selectbox__arrow', {
+                }, className), ...props, children: [_jsxs("div", { className: classNames('ncua-selectbox__content'), onClick: toggleDropdown, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, role: "combobox", "aria-expanded": isOpen, "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", { className: "ncua-selectbox__content-inner", children: [_jsx("div", { className: "ncua-selectbox__value", children: _jsx(DisplayValue, { displayValue: displayValue }) }), _jsx(ChevronDown, { width: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM, height: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM, color: disabled ? COLOR.gray300 : COLOR.gray500, className: classNames('ncua-selectbox__arrow', {
                                             'ncua-selectbox__arrow--up': isOpen,
                                         }) })] }), !shouldPortal && selectDropdownNode] }), hintText && (_jsx(HintText, { destructive: destructive, className: "ncua-hint-text", children: hintText })), register && (_jsx("input", { type: "hidden", ...register, value: multiple ? JSON.stringify(value || []) : String(value || '') }))] }), selectedTags.length > 0 && (_jsx("div", { className: "ncua-selectbox__tags", children: selectedTags.map((tag) => (_jsx(Tag, { text: tag.label, size: "sm", close: true, onButtonClick: () => handleRemoveTag(tag.id) }, tag.id))) })), portaledDropdown] }));
 });

package/dist/temp/src/components/forms-and-input/slider/Slider.js

@@ -4,6 +4,9 @@ import { Slider as NcuaSlider } from '../../../../assets/scripts/slider';
 export const Slider = ({ min = 0, max = 100, step = 1, value = 0, onChange, labelPosition, disabled = false, className, }) => {
     const containerRef = useRef(null);
     const sliderInstanceRef = useRef(null);
+    // value 의 "타입"이 바뀔 때만(범위↔단일 등) 슬라이더를 재생성한다. valueType 으로 추출해
+    // 정적으로 드러낸다 — 96cf7b3a 에서 deps 를 [] → [typeof value, ...] 로 좁힌 의도.
+    const valueType = typeof value;
     useEffect(() => {
         if (!containerRef.current)
             return;
@@ -22,7 +25,10 @@ export const Slider = ({ min = 0, max = 100, step = 1, value = 0, onChange, labe
                 sliderInstanceRef.current = null;
             }
         };
-    }, [typeof value, onChange, min, max, step, labelPosition]);
+        // value 변경은 아래 setValue effect, disabled 변경은 enable/disable effect 가 처리하므로
+        // 여기 deps 에 넣지 않는다(넣으면 매 렌더 인스턴스 재생성 → 상태 손실).
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [valueType, onChange, min, max, step, labelPosition]);
     useEffect(() => {
         if (sliderInstanceRef.current) {
             sliderInstanceRef.current.setValue(value);

package/dist/temp/src/components/navigation/pagination/Pagination.js

@@ -16,6 +16,13 @@ export const Pagination = ({ className = '', totalCount, itemCountPerPage = 10,
         }
     };
     useEffect(() => {
+        const lastGroupStart = Math.max(1, Math.floor((totalPage - 1) / pageCount) * pageCount + 1);
+        // totalPage/pageCount 가 줄어 start 가 마지막 그룹을 넘으면 마지막 그룹으로 보정한다.
+        // (예: 100→50 페이지로 축소 시 start 가 91 에 머물러 범위 밖 버튼을 표시하던 문제)
+        if (start > lastGroupStart) {
+            setStart(lastGroupStart);
+            return;
+        }
         if (currentPage === start + pageCount) {
             setStart(start + pageCount);
         }
@@ -30,10 +37,13 @@ export const Pagination = ({ className = '', totalCount, itemCountPerPage = 10,
             setStart(1);
         }
         if (currentPage === totalPage) {
-            const lastGroupStart = Math.floor((totalPage - 1) / pageCount) * pageCount + 1;
             setStart(lastGroupStart);
         }
-    }, [currentPage]);
+        // start 는 이 effect 가 setStart 로 갱신하는 대상이라 deps 에서 제외한다(넣으면 자기 갱신으로
+        // 재실행). currentPage 외에 totalPage/pageCount 도 추적해, 이들이 줄어 start 가 범위를 벗어나면
+        // 위에서 보정한다.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentPage, totalPage, pageCount]);
     return (_jsxs("div", { className: classNames('ncua-pagination', `ncua-pagination--${breakPoint}`, className), children: [showJumpPageButton && (_jsxs(_Fragment, { children: [NavButton({
                         type: 'first',
                         breakPoint,

package/dist/temp/src/components/navigation/pagination/__tests__/Pagination.test.d.ts

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