@ncds/ui-admin 1.8.17 → 1.8.18

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

@@ -123,4 +123,414 @@ describe('#3 onValidationError.previousDate', () => {
     expect(arg.previousDate?.getDate()).toBe(LAST_VALID_DAY); // 직전 유효 날짜 (≠ 위반 날짜)
     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/esm/src/components/forms-and-input/range-date-picker/RangeDatePicker.js

@@ -112,17 +112,20 @@ const RangeDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     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

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

@@ -89,4 +89,65 @@ 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(_ref2 => {
+      let [arg] = _ref2;
+      return arg?.errorType === 'overlap';
+    });
+    expect(overlapCalls).toHaveLength(0);
+  });
 });