@ncds/ui-admin 1.8.16 → 1.8.18

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

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

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { createElement } from 'react';
+import { createElement, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
 import { afterEach, describe, expect, it, vi } from 'vitest';
@@ -51,4 +51,253 @@ describe('#6 periodItems 에 없는 periodKey 방어', () => {
     // 유효한 키(TODAY='오늘')는 렌더되고, 정의에 없는 키는 건너뛴다(크래시 없음)
     expect(container.textContent).toContain('오늘');
   });
+});
+describe('#9 allowInput 타이핑 → onDateValidation (#410)', () => {
+  const START_DATE = '2026-03-10';
+  const END_DATE = '2026-03-20';
+  /** 시작일보다 이전 — 종료일에 넣으면 overlap */
+  const TYPED_END_DATE = '2026-03-01';
+  /** 실제 사용처처럼 부모가 state 를 들고 controlled 로 쓰는 래퍼.
+   *  bump() 로 날짜와 무관한 리렌더를 임의 시점에 끼워 넣을 수 있다. */
+  function mountHarness(onDateValidation) {
+    let bump;
+    const Harness = () => {
+      const [start, setStart] = useState(START_DATE);
+      const [end, setEnd] = useState(END_DATE);
+      const [, setTick] = useState(0);
+      const [buttonId, setButtonId] = useState('NONE');
+      bump = () => setTick(tick => tick + 1);
+      return /*#__PURE__*/createElement(RangeDatePickerWithButtons, {
+        currentButtonId: buttonId,
+        setCurrentButtonId: setButtonId,
+        periodKeys: ['ENTIRE', 'TODAY'],
+        startDateOptions: {
+          currentDate: start,
+          onChangeDate: setStart,
+          datePickerOptions: {
+            allowInput: true
+          }
+        },
+        endDateOptions: {
+          currentDate: end,
+          onChangeDate: setEnd,
+          datePickerOptions: {
+            allowInput: true
+          }
+        },
+        onDateValidation
+      });
+    };
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+      root.render(/*#__PURE__*/createElement(Harness));
+    });
+    mounted.push({
+      root,
+      container
+    });
+    const inputs = Array.from(container.querySelectorAll('input.flatpickr-input'));
+    return {
+      endInput: inputs[1],
+      bump: () => bump?.()
+    };
+  }
+  const typeChar = (input, char) => {
+    act(() => {
+      input.value = `${input.value}${char}`;
+      input.dispatchEvent(new Event('input', {
+        bubbles: true
+      }));
+    });
+  };
+  it('종료일에 시작일 이전 날짜를 타이핑하면 overlap 을 통지한다', () => {
+    const onDateValidation = vi.fn();
+    const {
+      endInput
+    } = mountHarness(onDateValidation);
+    onDateValidation.mockClear();
+    endInput.value = '';
+    for (const char of TYPED_END_DATE) {
+      typeChar(endInput, char);
+    }
+    expect(onDateValidation).toHaveBeenCalledWith({
+      type: 'end',
+      errorType: 'overlap',
+      newDate: START_DATE,
+      currentDate: TYPED_END_DATE
+    });
+  });
+  it('blur 없이 통지하므로, 통지 이후 부모가 리렌더돼도 결과가 뒤집히지 않는다', () => {
+    const onDateValidation = vi.fn();
+    const {
+      endInput,
+      bump
+    } = mountHarness(onDateValidation);
+    onDateValidation.mockClear();
+    endInput.value = '';
+    for (const char of TYPED_END_DATE) {
+      typeChar(endInput, char);
+    }
+    onDateValidation.mockClear();
+    // 날짜와 무관한 리렌더가 뒤따라도 통지된 값이 유지된다
+    act(() => {
+      bump();
+    });
+    expect(endInput.value).toBe(TYPED_END_DATE);
+  });
+  /**
+   * 알려진 한계: 날짜를 다 치기 전에 리렌더가 끼면 react-flatpickr 가 input 을 부모 값으로 덮는다.
+   * (static:true 라 wrapper 를 헐고 다시 만들면서 input DOM 이 이동해 포커스까지 빠진다.)
+   * 통지 자체는 blur 를 안 기다리므로 위 케이스와 무관하지만, 이 구간은 여전히 취약하다.
+   */
+  it('입력이 완성되기 전 리렌더가 끼면 입력값이 부모 값으로 되돌아간다 (알려진 한계)', () => {
+    const onDateValidation = vi.fn();
+    const {
+      endInput,
+      bump
+    } = mountHarness(onDateValidation);
+    endInput.value = '';
+    for (const char of TYPED_END_DATE.slice(0, -1)) {
+      typeChar(endInput, char);
+    }
+    act(() => {
+      bump();
+    });
+    expect(endInput.value).toBe(END_DATE);
+  });
+});
+describe('#10 같은 날짜를 다시 입력해도 통지된다 (#410 재보고)', () => {
+  const START_DATE = '2026-08-10';
+  const END_DATE = '2026-08-20';
+  /** 시작일 이전 — overlap */
+  const TYPED_END_DATE = '2026-08-06';
+  const typeChars = (input, text) => {
+    input.value = '';
+    for (const char of text) {
+      act(() => {
+        input.value = `${input.value}${char}`;
+        input.dispatchEvent(new Event('input', {
+          bubbles: true
+        }));
+      });
+    }
+  };
+  it('overlap 통지를 받고 종료일을 되돌린 뒤 같은 날짜를 다시 쳐도 매번 통지한다', () => {
+    const onDateValidation = vi.fn();
+    // 실제 사용처 패턴: overlap 을 받으면 알럿 대신 종료일을 원래대로 되돌린다
+    const Harness = () => {
+      const [start, setStart] = useState(START_DATE);
+      const [end, setEnd] = useState(END_DATE);
+      const [buttonId, setButtonId] = useState('NONE');
+      return /*#__PURE__*/createElement(RangeDatePickerWithButtons, {
+        currentButtonId: buttonId,
+        setCurrentButtonId: setButtonId,
+        periodKeys: ['ENTIRE', 'TODAY'],
+        startDateOptions: {
+          currentDate: start,
+          onChangeDate: setStart,
+          datePickerOptions: {
+            allowInput: true
+          }
+        },
+        endDateOptions: {
+          currentDate: end,
+          onChangeDate: setEnd,
+          datePickerOptions: {
+            allowInput: true
+          }
+        },
+        onDateValidation: params => {
+          onDateValidation(params);
+          if (params.type === 'end' && params.errorType === 'overlap') setEnd(END_DATE);
+        }
+      });
+    };
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+      root.render(/*#__PURE__*/createElement(Harness));
+    });
+    mounted.push({
+      root,
+      container
+    });
+    const endInput = Array.from(container.querySelectorAll('input.flatpickr-input'))[1];
+    onDateValidation.mockClear();
+    // 종전에는 lastNotifiedDate 가 부모 갱신 후에도 남아 있어 2회차부터 통지가 끊겼다
+    const ATTEMPT_COUNT = 3;
+    const firedPerAttempt = [];
+    for (let attempt = 0; attempt < ATTEMPT_COUNT; attempt++) {
+      const before = onDateValidation.mock.calls.length;
+      typeChars(endInput, TYPED_END_DATE);
+      firedPerAttempt.push(onDateValidation.mock.calls.length - before);
+    }
+    expect(firedPerAttempt).toEqual([1, 1, 1]);
+  });
+});
+describe('#11 통지 후 사용처가 날짜를 되돌려도 입력 칸의 포커스가 유지된다 (#416)', () => {
+  const START_DATE = '2026-08-10';
+  const END_DATE = '2026-08-20';
+  /** 시작일 이전 — overlap */
+  const TYPED_END_DATE = '2026-08-06';
+  it('overlap 통지 → 되돌리기 후에도 input 이 포커스를 잃지 않는다', () => {
+    const Harness = () => {
+      const [start, setStart] = useState(START_DATE);
+      const [end, setEnd] = useState(END_DATE);
+      const [buttonId, setButtonId] = useState('NONE');
+      return /*#__PURE__*/createElement(RangeDatePickerWithButtons, {
+        currentButtonId: buttonId,
+        setCurrentButtonId: setButtonId,
+        periodKeys: ['ENTIRE', 'TODAY'],
+        startDateOptions: {
+          currentDate: start,
+          onChangeDate: setStart,
+          datePickerOptions: {
+            allowInput: true
+          }
+        },
+        endDateOptions: {
+          currentDate: end,
+          onChangeDate: setEnd,
+          datePickerOptions: {
+            allowInput: true
+          }
+        },
+        onDateValidation: params => {
+          // 알럿 후 날짜를 되돌리는 사용처 패턴
+          if (params.type === 'end' && params.errorType === 'overlap') setEnd(END_DATE);
+        }
+      });
+    };
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+      root.render(/*#__PURE__*/createElement(Harness));
+    });
+    mounted.push({
+      root,
+      container
+    });
+    const endInput = Array.from(container.querySelectorAll('input.flatpickr-input'))[1];
+    // 사용자가 칸을 클릭해 포커스를 쥔 상태로 입력한다
+    endInput.focus();
+    expect(document.activeElement).toBe(endInput);
+    endInput.value = '';
+    for (const char of TYPED_END_DATE) {
+      act(() => {
+        endInput.value = `${endInput.value}${char}`;
+        endInput.dispatchEvent(new Event('input', {
+          bubbles: true
+        }));
+      });
+    }
+    // 되돌리기 리렌더에서 flatpickr 가 wrapper 를 재생성하며 input 노드를 옮겨 포커스가 빠졌다.
+    // 사용자는 알럿을 닫고 이어서 타이핑하는데 입력이 들어가지 않아 콜백이 끊긴 것처럼 보였다.
+    expect(endInput.value).toBe(END_DATE);
+    expect(document.activeElement).toBe(endInput);
+  });
 });

package/dist/esm/src/hooks/__tests__/useObjectUrl.test.js

@@ -0,0 +1,117 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useObjectUrl } from '../useObjectUrl';
+const originalCreateObjectURL = URL.createObjectURL;
+const originalRevokeObjectURL = URL.revokeObjectURL;
+let createObjectURL;
+let revokeObjectURL;
+beforeEach(() => {
+  let issued = 0;
+  createObjectURL = vi.fn(() => `blob:mock/${++issued}`);
+  revokeObjectURL = vi.fn();
+  URL.createObjectURL = createObjectURL;
+  URL.revokeObjectURL = revokeObjectURL;
+});
+const mounted = [];
+afterEach(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  }
+  URL.createObjectURL = originalCreateObjectURL;
+  URL.revokeObjectURL = originalRevokeObjectURL;
+});
+/** 내용은 검증 대상이 아니므로 최소 크기만 채운다 */
+const DUMMY_FILE_BYTES = 4;
+const makeFile = name => new File([new Uint8Array(DUMMY_FILE_BYTES)], name, {
+  type: 'image/jpeg'
+});
+/** 훅 결과를 data-url 속성으로 노출하는 관찰용 컴포넌트 */
+const Probe = _ref => {
+  let {
+    file
+  } = _ref;
+  return /*#__PURE__*/createElement('span', {
+    'data-url': useObjectUrl(file) ?? ''
+  });
+};
+function renderProbe(file) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  const render = nextFile => {
+    act(() => {
+      root.render(/*#__PURE__*/createElement(Probe, {
+        file: nextFile
+      }));
+    });
+  };
+  render(file);
+  mounted.push({
+    root,
+    container
+  });
+  const currentUrl = () => container.querySelector('span')?.getAttribute('data-url');
+  const unmount = () => {
+    act(() => {
+      root.unmount();
+    });
+    const index = mounted.findIndex(entry => entry.root === root);
+    mounted.splice(index, 1);
+    container.remove();
+  };
+  return {
+    render,
+    currentUrl,
+    unmount
+  };
+}
+describe('useObjectUrl', () => {
+  it('파일을 주면 object URL을 만들어 반환한다', () => {
+    const probe = renderProbe(makeFile('a.jpg'));
+    expect(createObjectURL).toHaveBeenCalledTimes(1);
+    expect(probe.currentUrl()).toBe('blob:mock/1');
+  });
+  it('같은 파일로 여러 번 리렌더해도 URL을 한 번만 만든다', () => {
+    const file = makeFile('a.jpg');
+    const probe = renderProbe(file);
+    probe.render(file);
+    probe.render(file);
+    probe.render(file);
+    expect(createObjectURL).toHaveBeenCalledTimes(1);
+    expect(revokeObjectURL).not.toHaveBeenCalled();
+  });
+  it('언마운트하면 만들었던 URL을 해제한다', () => {
+    const probe = renderProbe(makeFile('a.jpg'));
+    expect(revokeObjectURL).not.toHaveBeenCalled();
+    probe.unmount();
+    expect(revokeObjectURL).toHaveBeenCalledTimes(1);
+    expect(revokeObjectURL).toHaveBeenCalledWith('blob:mock/1');
+  });
+  it('파일이 바뀌면 이전 URL을 해제하고 새로 만든다', () => {
+    const probe = renderProbe(makeFile('a.jpg'));
+    probe.render(makeFile('b.jpg'));
+    expect(createObjectURL).toHaveBeenCalledTimes(2);
+    expect(revokeObjectURL).toHaveBeenCalledWith('blob:mock/1');
+    expect(probe.currentUrl()).toBe('blob:mock/2');
+  });
+  it('파일이 없으면 URL을 만들지 않는다', () => {
+    const probe = renderProbe(undefined);
+    expect(createObjectURL).not.toHaveBeenCalled();
+    expect(probe.currentUrl()).toBe('');
+  });
+  it('파일을 없애면 이전 URL을 해제한다', () => {
+    const probe = renderProbe(makeFile('a.jpg'));
+    probe.render(undefined);
+    expect(revokeObjectURL).toHaveBeenCalledWith('blob:mock/1');
+    expect(probe.currentUrl()).toBe('');
+  });
+});

package/dist/esm/src/hooks/index.js

@@ -5,4 +5,5 @@ export * from './useCallbackRef';
 export * from './useFloatingPosition';
 export * from './useIsomorphicLayoutEffect';
 export * from './useMediaQuery';
-export * from './useMergeRefs';
+export * from './useMergeRefs';
+export * from './useObjectUrl';

package/dist/esm/src/hooks/useObjectUrl.js

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+/**
+ * Creates an object URL for a file and revokes it when the file changes
+ * or the component unmounts.
+ *
+ * Calling `URL.createObjectURL` inline while rendering mints a new blob URL on
+ * every re-render and never releases it, so the browser holds every one of them
+ * for the lifetime of the document. Creating it in an effect gives us a cleanup
+ * hook to revoke on.
+ *
+ * A layout effect is used so the URL is in place before the browser paints —
+ * with a plain effect the image would blink out for a frame whenever the
+ * component remounts (for example when a sibling is removed and keys shift).
+ *
+ * Returns `null` while no file is given.
+ */
+export const useObjectUrl = file => {
+  const [objectUrl, setObjectUrl] = useState(null);
+  useIsomorphicLayoutEffect(() => {
+    if (!file) {
+      setObjectUrl(null);
+      return;
+    }
+    const createdUrl = URL.createObjectURL(file);
+    setObjectUrl(createdUrl);
+    return () => {
+      URL.revokeObjectURL(createdUrl);
+    };
+  }, [file]);
+  return objectUrl;
+};

package/dist/esm/vitest.config.js

@@ -1,7 +1,28 @@
+import path from 'node:path';
 import { defineConfig } from 'vitest/config';
+// lcov 의 SF 경로를 레포 루트 기준으로 기록한다. sonar-scanner 는 레포 루트를 단일
+// projectBaseDir 로 잡으므로, 패키지 루트 기준 상대경로(SF:src/foo.ts)로 두면 경로가
+// 해석되지 않아 커버리지가 통째로 무시된다.
+const REPO_ROOT = path.resolve(__dirname, '../..');
 export default defineConfig({
   test: {
     include: ['scripts/**/__tests__/**/*.test.ts', 'src/**/__tests__/**/*.test.ts', 'assets/scripts/**/__tests__/**/*.test.ts'],
-    environment: 'node'
+    environment: 'node',
+    coverage: {
+      provider: 'v8',
+      // 테스트가 존재하는 3개 루트를 분모로 잡는다 (test.include 와 동일 범위).
+      include: ['src/**/*.{ts,tsx}', 'scripts/**/*.ts', 'assets/scripts/**/*.ts'],
+      exclude: ['**/__tests__/**', '**/*.d.ts',
+      // ui-admin 의 index.ts 81개는 전부 `export * from ...` barrel 이라 측정 의미가 없다.
+      // (step-guide 의 src/index.ts 는 824줄 본체 구현이므로 그쪽에서는 제외하지 않는다.)
+      '**/index.ts',
+      // MCP 가 읽는 컴포넌트 메타데이터 선언 45개 — 실행 분기 없는 순수 데이터.
+      '**/*.meta.ts', 'src/types/**', 'src/constant/**'],
+      // 'text' 미포함 — 미커버 파일이 수백 개라 파일별 상세 출력이 CI 로그를 덮는다.
+      // 'lcov' 대신 'lcovonly' — 'lcov' 는 HTML 리포트까지 생성한다.
+      reporter: ['text-summary', ['lcovonly', {
+        projectRoot: REPO_ROOT
+      }]]
+    }
   }
 });