@ncds/ui-admin 1.8.17 → 1.8.19-alpha.0

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

@@ -107,3 +107,326 @@ describe('#3 onValidationError.previousDate', () => {
         expect(arg.previousDate?.getTime()).not.toBe(arg.date.getTime());
     });
 });
+describe('#5 blur 동기화 — flatpickr가 통지하지 않은 값 보정 (#410)', () => {
+    const getInstance = (container) => {
+        const input = container.querySelector('input');
+        expect(input._flatpickr).toBeTruthy();
+        return { input, instance: input._flatpickr };
+    };
+    /** blur 동기화는 한 틱 뒤에 실행되므로 매크로태스크를 한 번 흘려보낸다 */
+    const flushBlurSync = async () => {
+        await act(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 0));
+        });
+    };
+    it('onChange 없이 값만 반영된 채 blur 되면 onChangeDate 로 통지한다', async () => {
+        const onChangeDate = vi.fn();
+        const container = mount({
+            currentDate: '2024-03-01',
+            onChangeDate,
+            datePickerOptions: { allowInput: true },
+        });
+        const { input, instance } = getInstance(container);
+        // flatpickr documentClick 이 하는 것과 동일하게, onChange 를 발화시키지 않고 값만 반영한다
+        act(() => {
+            instance.setDate('2024-03-20', false);
+        });
+        onChangeDate.mockClear();
+        act(() => {
+            input.dispatchEvent(new Event('blur'));
+        });
+        await flushBlurSync();
+        expect(onChangeDate).toHaveBeenCalledWith('2024-03-20');
+    });
+    it('flatpickr가 이미 onChange 로 통지했으면 blur 가 중복 통지하지 않는다', async () => {
+        const onChangeDate = vi.fn();
+        const container = mount({
+            currentDate: '2024-03-01',
+            onChangeDate,
+            datePickerOptions: { allowInput: true },
+        });
+        const { input, instance } = getInstance(container);
+        act(() => {
+            instance.setDate('2024-03-20', true);
+        });
+        expect(onChangeDate).toHaveBeenCalledTimes(1);
+        act(() => {
+            input.dispatchEvent(new Event('blur'));
+        });
+        await flushBlurSync();
+        expect(onChangeDate).toHaveBeenCalledTimes(1);
+    });
+    it('min/max 위반 값은 blur 로도 통지하지 않고 onValidationError 로 보고한다', async () => {
+        const onChangeDate = vi.fn();
+        const onValidationError = vi.fn();
+        const container = mount({
+            currentDate: '2024-03-15',
+            onChangeDate,
+            onValidationError,
+            datePickerOptions: { minDate: '2024-03-10', maxDate: '2024-03-25', allowInput: true },
+        });
+        const { input, instance } = getInstance(container);
+        // 범위 밖 날짜가 onChange 없이 값만 반영된 상태 (마우스로 캘린더 밖 클릭 시 flatpickr 동작)
+        act(() => {
+            instance.setDate('2024-04-30', false);
+        });
+        onChangeDate.mockClear();
+        onValidationError.mockClear();
+        act(() => {
+            input.dispatchEvent(new Event('blur'));
+        });
+        await flushBlurSync();
+        expect(onChangeDate).not.toHaveBeenCalled();
+        expect(onValidationError).toHaveBeenCalledTimes(1);
+        expect(onValidationError.mock.calls[0][0].violations).toContain('maxDate');
+    });
+    it('enableTime 모드에서 값 변경 없이 blur 해도 통지하지 않는다', async () => {
+        const onChangeDate = vi.fn();
+        const container = mount({
+            currentDate: '2024-03-20',
+            onChangeDate,
+            datePickerOptions: { enableTime: true, dateFormat: 'Y-m-d H:i', allowInput: true },
+        });
+        const { input } = getInstance(container);
+        onChangeDate.mockClear();
+        act(() => {
+            input.dispatchEvent(new Event('blur'));
+        });
+        await flushBlurSync();
+        expect(onChangeDate).not.toHaveBeenCalled();
+    });
+    it('noCalendar(시간 전용) 모드에서 값 변경 없이 blur 해도 통지하지 않는다', async () => {
+        const onChangeDate = vi.fn();
+        const container = mount({
+            currentDate: '',
+            onChangeDate,
+            datePickerOptions: { enableTime: true, noCalendar: true, dateFormat: 'H:i', allowInput: true },
+        });
+        const { input } = getInstance(container);
+        onChangeDate.mockClear();
+        act(() => {
+            input.dispatchEvent(new Event('blur'));
+        });
+        await flushBlurSync();
+        expect(onChangeDate).not.toHaveBeenCalled();
+    });
+    it('noCalendar(시간 전용) 모드에서 통지 없이 시간만 바뀐 채 blur 되면 통지한다', async () => {
+        const onChangeDate = vi.fn();
+        const container = mount({
+            currentDate: '',
+            onChangeDate,
+            datePickerOptions: { enableTime: true, noCalendar: true, dateFormat: 'H:i', allowInput: true },
+        });
+        const { input, instance } = getInstance(container);
+        act(() => {
+            instance.setDate('14:30', false);
+        });
+        onChangeDate.mockClear();
+        act(() => {
+            input.dispatchEvent(new Event('blur'));
+        });
+        await flushBlurSync();
+        expect(onChangeDate).toHaveBeenCalledWith('14:30');
+    });
+    it('portal 모드에서도 통지 없이 값만 반영된 채 blur 되면 통지한다', async () => {
+        const onChangeDate = vi.fn();
+        const container = mount({
+            currentDate: '2024-03-01',
+            onChangeDate,
+            portal: true,
+            datePickerOptions: { allowInput: true },
+        });
+        const { input, instance } = getInstance(container);
+        act(() => {
+            instance.setDate('2024-03-20', false);
+        });
+        onChangeDate.mockClear();
+        act(() => {
+            input.dispatchEvent(new Event('blur'));
+        });
+        await flushBlurSync();
+        expect(onChangeDate).toHaveBeenCalledWith('2024-03-20');
+    });
+    it('값이 바뀌지 않았으면 blur 만으로는 통지하지 않는다', async () => {
+        const onChangeDate = vi.fn();
+        const container = mount({
+            currentDate: '2024-03-01',
+            onChangeDate,
+            datePickerOptions: { allowInput: true },
+        });
+        const { input } = getInstance(container);
+        onChangeDate.mockClear();
+        act(() => {
+            input.dispatchEvent(new Event('blur'));
+        });
+        await flushBlurSync();
+        expect(onChangeDate).not.toHaveBeenCalled();
+    });
+});
+describe('#7 타이핑 즉시 통지 — blur 를 기다리지 않는다 (#410)', () => {
+    const getInput = (container) => container.querySelector('input.flatpickr-input');
+    /** 사용자가 한 글자씩 타이핑하는 것과 동일하게 input 이벤트를 발생시킨다 */
+    const typeInto = (input, text) => {
+        input.value = '';
+        for (const char of text) {
+            act(() => {
+                input.value = `${input.value}${char}`;
+                input.dispatchEvent(new Event('input', { bubbles: true }));
+            });
+        }
+    };
+    const flushBlurSync = async () => {
+        await act(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 0));
+        });
+    };
+    it('완성된 유효 날짜를 타이핑하면 blur 전에 통지한다', () => {
+        const onChangeDate = vi.fn();
+        const container = mount({
+            currentDate: '2024-03-01',
+            onChangeDate,
+            datePickerOptions: { allowInput: true },
+        });
+        typeInto(getInput(container), '2024-03-20');
+        expect(onChangeDate).toHaveBeenCalledWith('2024-03-20');
+    });
+    it('구분자 없이 8자리 숫자만 타이핑해도 통지한다', () => {
+        const onChangeDate = vi.fn();
+        const container = mount({
+            currentDate: '2024-03-01',
+            onChangeDate,
+            datePickerOptions: { allowInput: true },
+        });
+        // 8자리를 다 치는 순간 핸들러가 값을 '2024-03-20' 으로 다시 쓴다.
+        // 그 뒤로는 브라우저가 input 이벤트를 더 주지 않으므로 이 시점에 통지해야 한다.
+        typeInto(getInput(container), '20240320');
+        expect(onChangeDate).toHaveBeenCalledWith('2024-03-20');
+    });
+    it('아직 완성되지 않은 입력은 통지하지 않는다', () => {
+        const onChangeDate = vi.fn();
+        const container = mount({
+            currentDate: '2024-03-01',
+            onChangeDate,
+            datePickerOptions: { allowInput: true },
+        });
+        typeInto(getInput(container), '2024-03-');
+        expect(onChangeDate).not.toHaveBeenCalled();
+    });
+    it('타이핑으로 이미 통지했으면 blur 가 중복 통지하지 않는다', async () => {
+        const onChangeDate = vi.fn();
+        const container = mount({
+            currentDate: '2024-03-01',
+            onChangeDate,
+            datePickerOptions: { allowInput: true },
+        });
+        const input = getInput(container);
+        typeInto(input, '2024-03-20');
+        expect(onChangeDate).toHaveBeenCalledTimes(1);
+        act(() => {
+            input.dispatchEvent(new Event('blur'));
+        });
+        await flushBlurSync();
+        expect(onChangeDate).toHaveBeenCalledTimes(1);
+    });
+    it('min/max 범위 밖 날짜는 타이핑 중에 통지하지 않는다 (blur 시점에 한 번만 보고)', () => {
+        const onChangeDate = vi.fn();
+        const onValidationError = vi.fn();
+        const container = mount({
+            currentDate: '2024-03-15',
+            onChangeDate,
+            onValidationError,
+            datePickerOptions: { minDate: '2024-03-10', maxDate: '2024-03-25', allowInput: true },
+        });
+        typeInto(getInput(container), '2024-04-30');
+        expect(onChangeDate).not.toHaveBeenCalled();
+        expect(onValidationError).not.toHaveBeenCalled();
+    });
+    it('같은 값은 경로가 달라도 두 번 통지하지 않는다', () => {
+        const onChangeDate = vi.fn();
+        const container = mount({
+            currentDate: '2024-03-01',
+            onChangeDate,
+            datePickerOptions: { allowInput: true },
+        });
+        const input = getInput(container);
+        // 타이핑으로 통지한 뒤, 캘린더가 같은 날짜로 onChange 를 다시 발화시키는 상황
+        typeInto(input, '2024-03-20');
+        act(() => {
+            input._flatpickr.setDate('2024-03-20', true);
+        });
+        expect(onChangeDate).toHaveBeenCalledTimes(1);
+    });
+    it('enableTime 모드에서 날짜만 입력한 상태는 타이핑 중에 통지하지 않는다', () => {
+        const onChangeDate = vi.fn();
+        const container = mount({
+            currentDate: '2024-03-01 00:00',
+            onChangeDate,
+            datePickerOptions: { enableTime: true, dateFormat: 'Y-m-d H:i', allowInput: true },
+        });
+        // '2024-03-20' 은 최종 표기('2024-03-20 00:00')와 다르다.
+        // 여기서 통지하면 setDate 가 input 을 다시 써서 타이핑 중 커서가 튄다.
+        typeInto(getInput(container), '2024-03-20');
+        expect(onChangeDate).not.toHaveBeenCalled();
+    });
+});
+describe('#8 완성 판정·파싱을 dateFormat 기준으로 한다', () => {
+    const getInput = (container) => container.querySelector('input.flatpickr-input');
+    const typeInto = (input, text) => {
+        input.value = '';
+        for (const char of text) {
+            act(() => {
+                input.value = `${input.value}${char}`;
+                input.dispatchEvent(new Event('input', { bubbles: true }));
+            });
+        }
+    };
+    it('enableTime 에서 한 글자씩 쳐도 입력이 유지되고 통지된다', () => {
+        const onChangeDate = vi.fn();
+        const container = mount({
+            currentDate: '2026-03-20 23:59',
+            onChangeDate,
+            datePickerOptions: { allowInput: true, enableTime: true, dateFormat: 'Y-m-d H:i' },
+        });
+        const input = getInput(container);
+        // 완성 길이를 10 으로 고정하면 '2026-03-01 0' 을 완성으로 오판해
+        // moment 검증에 걸리고, 입력이 이전 값('2026-03-20 23:59')으로 되돌아갔다
+        typeInto(input, '2026-03-01 00:00');
+        expect(input.value).toBe('2026-03-01 00:00');
+        expect(onChangeDate).toHaveBeenCalledWith('2026-03-01 00:00');
+    });
+    it('enableTime 에서 시간을 아직 안 친 중간 상태는 통지하지 않는다', () => {
+        const onChangeDate = vi.fn();
+        const container = mount({
+            currentDate: '2026-03-20 23:59',
+            onChangeDate,
+            datePickerOptions: { allowInput: true, enableTime: true, dateFormat: 'Y-m-d H:i' },
+        });
+        typeInto(getInput(container), '2026-03-01 00');
+        expect(onChangeDate).not.toHaveBeenCalled();
+    });
+    it('시간 전용(noCalendar) 모드에서 타이핑한 값이 되돌려지지 않는다', () => {
+        const onChangeDate = vi.fn();
+        const container = mount({
+            currentDate: '23:59',
+            onChangeDate,
+            datePickerOptions: { allowInput: true, enableTime: true, noCalendar: true, dateFormat: 'H:i' },
+        });
+        const input = getInput(container);
+        // 포맷 없이 moment('14:30') 으로 파싱하면 invalid 라 이전 값으로 복원됐다
+        typeInto(input, '14:30');
+        expect(input.value).toBe('14:30');
+        expect(onChangeDate).toHaveBeenCalledWith('14:30');
+    });
+    it('완성 길이에 도달했지만 실재하지 않는 날짜는 이전 값으로 복원한다', () => {
+        const onChangeDate = vi.fn();
+        const container = mount({
+            currentDate: '2026-03-20',
+            onChangeDate,
+            datePickerOptions: { allowInput: true },
+        });
+        const input = getInput(container);
+        typeInto(input, '2026-13-45');
+        expect(input.value).not.toBe('2026-13-45');
+        expect(onChangeDate).not.toHaveBeenCalledWith('2026-13-45');
+    });
+});

package/dist/temp/src/components/forms-and-input/input-base/InputBase.js

@@ -13,7 +13,7 @@ const generalSvgSize = {
     xs: 14,
     sm: 20,
 };
-const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled, fullWidth = false, validation, destructive, leadingElement, trailingElement, showHelpIcon, maxLength, showTextCount, className, ...props }, ref) => {
+const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled, fullWidth = false, validation, destructive, leadingElement, trailingElement, showHelpIcon, maxLength, showTextCount, clearText, onClearText, className, ...props }, ref) => {
     const inputRef = useRef(null);
     const [textCount, setTextCount] = useState(0);
     useEffect(() => {
@@ -59,9 +59,9 @@ const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled
         }
     };
     const renderClearButton = () => {
-        if (!props.clearText)
+        if (!clearText)
             return null;
-        return (_jsx("button", { type: "button", className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'), onClick: props.onClearText, children: _jsx(X, { className: "ncua-input__clear-icon", width: validationSvgSize[size], height: validationSvgSize[size] }) }));
+        return (_jsx("button", { type: "button", className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'), onClick: onClearText, children: _jsx(X, { className: "ncua-input__clear-icon", width: validationSvgSize[size], height: validationSvgSize[size] }) }));
     };
     const renderStatusIcon = () => {
         if (destructive) {

package/dist/temp/src/components/forms-and-input/input-base/__tests__/InputBase.test.d.ts

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

package/dist/temp/src/components/forms-and-input/input-base/__tests__/InputBase.test.js

@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import { InputBase } from '../InputBase';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+function mountInputBase(props = {}) {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+        root.render(createElement(InputBase, props));
+    });
+    const unmount = () => {
+        act(() => {
+            root.unmount();
+        });
+        container.remove();
+    };
+    return { container, unmount };
+}
+describe('InputBase — clearText prop DOM 누출', () => {
+    it('clearText/onClearText가 DOM input 속성으로 전달되지 않는다', () => {
+        // Given: console.error를 감시하는 상태에서
+        const consoleErrorSpy = vi.spyOn(console, 'error');
+        // When: clearText, onClearText를 전달해 렌더하면
+        const view = mountInputBase({ clearText: true, onClearText: vi.fn() });
+        // Then: 렌더된 <input>에 cleartext 속성이 없고, unknown prop 경고도 발생하지 않는다
+        const input = view.container.querySelector('input');
+        expect(input).not.toBeNull();
+        expect(input?.hasAttribute('cleartext')).toBe(false);
+        expect(consoleErrorSpy).not.toHaveBeenCalled();
+        consoleErrorSpy.mockRestore();
+        view.unmount();
+    });
+    it('clearText가 true면 clear 버튼이 렌더되고 클릭 시 onClearText가 호출된다', () => {
+        // Given: clearText와 onClearText를 전달해 렌더한 상태에서
+        const onClearText = vi.fn();
+        const view = mountInputBase({ clearText: true, onClearText });
+        // When: clear 버튼을 찾아 클릭하면
+        const clearButton = view.container.querySelector('.ncua-input__clear');
+        expect(clearButton).not.toBeNull();
+        act(() => {
+            clearButton?.click();
+        });
+        // Then: onClearText가 호출된다
+        expect(onClearText).toHaveBeenCalledTimes(1);
+        view.unmount();
+    });
+    it('clearText를 전달하지 않으면 clear 버튼이 렌더되지 않는다', () => {
+        // Given/When: clearText 없이 렌더하면
+        const view = mountInputBase();
+        // Then: clear 버튼이 존재하지 않는다
+        expect(view.container.querySelector('.ncua-input__clear')).toBeNull();
+        view.unmount();
+    });
+});

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

@@ -13,6 +13,15 @@ type RangeDatePickerProps = {
             period: number;
         };
     };
+    /**
+     * 검증 결과 통지. 시작일·종료일 effect 가 각자 자기 쪽 변경만 검증하므로,
+     * 사용자가 한쪽 날짜를 바꾸면 그 한쪽(`type`)만 통지된다.
+     *
+     * 단 **마운트 시점에 이미 역전된 범위**가 들어오면 두 effect 가 함께 돌아
+     * `type:'start'` 과 `type:'end'` 가 각각 통지된다. 이때 `newDate` 는 서로 반대편 날짜이므로
+     * 양쪽을 모두 반영하면 시작일·종료일이 뒤바뀐다. 한쪽만 처리해야 한다.
+     * (validationOption.setting 을 넘기는 사용처에서는 종전부터 동일하게 동작했다.)
+     */
     onDateValidation?: (params: {
         type: 'start' | 'end';
         errorType: 'reset' | 'period' | 'overlap' | null;

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

@@ -90,17 +90,20 @@ const RangeDatePicker = forwardRef(({ startDateOptions, endDateOptions, validati
         if (!areBothDatesValid(startDateOptions.currentDate, endDateOptions.currentDate)) {
             return;
         }
-        // 종료일이 '오늘'이면 종료측 검증을 건너뛴다: shopby 는 종료일=오늘이 정상 기본값이라
-        // (고도몰=어제) 이 상태를 에러로 잡지 않기 위함. (도입 d1bd8751)
-        const isNotTodayEndDate = !moment(endDateOptions.currentDate).isSame(moment(), 'day');
-        if (!validationOption?.setting || !isNotTodayEndDate) {
-            return;
-        }
+        // overlap(종료일 < 시작일)은 시작일 effect 와 동일하게 setting 유무보다 먼저 검증한다.
+        // 과거에는 아래 setting 가드 뒤에 있어서, setting 을 넘기지 않는 사용처가 종료일을 시작일보다
+        // 앞으로 두어도 onDateValidation 이 호출되지 않았다. (#410)
         const isOverDate = moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate);
         if (isOverDate) {
             changeSettingDateAndAlert('end');
             return;
         }
+        // 종료일이 '오늘'이면 기간(period) 검증은 건너뛴다: shopby 는 종료일=오늘이 정상 기본값이라
+        // (고도몰=어제) 이 상태를 에러로 잡지 않기 위함. (도입 d1bd8751)
+        const isNotTodayEndDate = !moment(endDateOptions.currentDate).isSame(moment(), 'day');
+        if (!validationOption?.setting || !isNotTodayEndDate) {
+            return;
+        }
         const { unit, period } = validationOption.setting;
         const isValidPeriod = moment(endDateOptions.currentDate).isSameOrBefore(moment(startDateOptions.currentDate).add(period, unit));
         if (isValidPeriod) {

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

@@ -58,3 +58,43 @@ describe('#1 빈/무효 날짜 검증 가드', () => {
         expect(onDateValidation).toHaveBeenCalled();
     });
 });
+describe('#2 validationOption.setting 없이도 overlap 을 검증한다 (#410)', () => {
+    it('종료일이 시작일보다 이전이면 type:end / errorType:overlap 으로 통지한다', () => {
+        const onDateValidation = vi.fn();
+        mount({
+            startDateOptions: { currentDate: '2024-03-10', onChangeDate: () => undefined },
+            endDateOptions: { currentDate: '2024-03-05', onChangeDate: () => undefined },
+            onDateValidation,
+        });
+        expect(onDateValidation).toHaveBeenCalledWith({
+            type: 'end',
+            errorType: 'overlap',
+            newDate: '2024-03-10',
+            currentDate: '2024-03-05',
+        });
+    });
+    it('시작일이 종료일보다 이후이면 type:start / errorType:overlap 으로 통지한다', () => {
+        const onDateValidation = vi.fn();
+        mount({
+            startDateOptions: { currentDate: '2024-03-10', onChangeDate: () => undefined },
+            endDateOptions: { currentDate: '2024-03-05', onChangeDate: () => undefined },
+            onDateValidation,
+        });
+        expect(onDateValidation).toHaveBeenCalledWith({
+            type: 'start',
+            errorType: 'overlap',
+            newDate: '2024-03-05',
+            currentDate: '2024-03-10',
+        });
+    });
+    it('정상 범위(시작일 <= 종료일)면 setting 없이 overlap 을 통지하지 않는다', () => {
+        const onDateValidation = vi.fn();
+        mount({
+            startDateOptions: { currentDate: '2024-03-01', onChangeDate: () => undefined },
+            endDateOptions: { currentDate: '2024-03-05', onChangeDate: () => undefined },
+            onDateValidation,
+        });
+        const overlapCalls = onDateValidation.mock.calls.filter(([arg]) => arg?.errorType === 'overlap');
+        expect(overlapCalls).toHaveLength(0);
+    });
+});