@ncds/ui-admin 1.8.28-alpha.0 → 1.8.28-alpha.2

package/dist/esm/src/components/forms-and-input/radio/__tests__/Radio.test.js

@@ -0,0 +1,54 @@
+// @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 } from 'vitest';
+import { Radio } from '../Radio';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const TEXT = '도로명 주소';
+const SUPPORT_TEXT = '건물번호까지 입력';
+const mounted = [];
+afterEach(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    act(() => root.unmount());
+    container.remove();
+  }
+});
+const mountRadio = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  mounted.push({
+    root,
+    container
+  });
+  act(() => root.render(/*#__PURE__*/createElement(Radio, {
+    readOnly: true,
+    ...props
+  })));
+  const field = container.querySelector('.ncua-radio-field');
+  if (!field) throw new Error('Radio 를 찾을 수 없습니다');
+  return field;
+};
+describe('Radio — 보조 문구 (RSD-06)', () => {
+  it('RSD-06 supportText 가 있으면 보조 문구를 text 뒤에 그린다', () => {
+    const field = mountRadio({
+      text: TEXT,
+      supportText: SUPPORT_TEXT
+    });
+    expect(field.querySelector('.ncua-radio-field__support-text')?.textContent).toBe(SUPPORT_TEXT);
+    expect(field.querySelector('.ncua-radio-field__text')?.textContent).toBe(TEXT);
+    expect(field.classList.contains('has-text')).toBe(true);
+  });
+  it('RSD-06 (대조) supportText 와 text 를 생략하면 보조 문구 · 텍스트 · has-text 가 없다', () => {
+    const field = mountRadio();
+    expect(field.querySelector('.ncua-radio-field__support-text')).toBeNull();
+    expect(field.querySelector('.ncua-radio-field__text')).toBeNull();
+    expect(field.classList.contains('has-text')).toBe(false);
+  });
+});

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

@@ -3,6 +3,7 @@ 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 { useFixedToday } from '../../../../__tests__/helpers/fixedToday';
 import { RangeDatePicker } from '../RangeDatePicker';
 const mounted = [];
 function mount(props) {
@@ -150,4 +151,278 @@ describe('#2 validationOption.setting 없이도 overlap 을 검증한다 (#410)'
     });
     expect(overlapCalls).toHaveLength(0);
   });
+});
+// ── 위험 경로 RG-xx (PR-7a) ───────────────────────────────────────────────
+/** FIXED_TODAY 의 날짜 — 종료일=오늘 판정(RG-03)을 결정적으로 만든다 */
+const TODAY = '2026-10-21';
+const PERIOD_DAYS = 7;
+const WEEK_SETTING = {
+  setting: {
+    unit: 'days',
+    period: PERIOD_DAYS
+  }
+};
+/** 같은 root 에 다시 render 해 한쪽 날짜만 바꾸는 상황을 만든다 */
+function mountRerenderable(props) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  const render = next => {
+    act(() => {
+      root.render(/*#__PURE__*/createElement(RangeDatePicker, next));
+    });
+  };
+  render(props);
+  mounted.push({
+    root,
+    container
+  });
+  return {
+    container,
+    render
+  };
+}
+const rangeProps = _ref3 => {
+  let {
+    start,
+    end,
+    onDateValidation,
+    validationOption
+  } = _ref3;
+  return {
+    startDateOptions: {
+      currentDate: start,
+      onChangeDate: () => undefined
+    },
+    endDateOptions: {
+      currentDate: end,
+      onChangeDate: () => undefined
+    },
+    onDateValidation,
+    validationOption
+  };
+};
+describe('RG-01 setting 기간 초과', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+  it('RG-01 종료일을 시작일+period 뒤로 바꾸면 type:end · errorType:period · newDate 시작일+period 로 통지한다', () => {
+    useFixedToday();
+    const onDateValidation = vi.fn();
+    const {
+      render
+    } = mountRerenderable(rangeProps({
+      start: '2026-10-10',
+      end: '2026-10-15',
+      onDateValidation,
+      validationOption: WEEK_SETTING
+    }));
+    onDateValidation.mockClear();
+    render(rangeProps({
+      start: '2026-10-10',
+      end: '2026-10-25',
+      onDateValidation,
+      validationOption: WEEK_SETTING
+    }));
+    expect(onDateValidation).toHaveBeenCalledWith({
+      type: 'end',
+      errorType: 'period',
+      newDate: '2026-10-17',
+      currentDate: '2026-10-25'
+    });
+  });
+  it('RG-01 시작일을 종료일−period 앞으로 바꾸면 type:start · errorType:period · newDate 종료일−period 로 통지한다', () => {
+    useFixedToday();
+    const onDateValidation = vi.fn();
+    const {
+      render
+    } = mountRerenderable(rangeProps({
+      start: '2026-10-10',
+      end: '2026-10-15',
+      onDateValidation,
+      validationOption: WEEK_SETTING
+    }));
+    onDateValidation.mockClear();
+    render(rangeProps({
+      start: '2026-09-30',
+      end: '2026-10-15',
+      onDateValidation,
+      validationOption: WEEK_SETTING
+    }));
+    expect(onDateValidation).toHaveBeenCalledWith({
+      type: 'start',
+      errorType: 'period',
+      newDate: '2026-10-08',
+      currentDate: '2026-09-30'
+    });
+  });
+  it('RG-01 unit 이 months 여도 같은 규칙으로 newDate 를 계산한다', () => {
+    useFixedToday();
+    const onDateValidation = vi.fn();
+    const monthSetting = {
+      setting: {
+        unit: 'months',
+        period: 1
+      }
+    };
+    const {
+      render
+    } = mountRerenderable(rangeProps({
+      start: '2026-08-01',
+      end: '2026-08-20',
+      onDateValidation,
+      validationOption: monthSetting
+    }));
+    onDateValidation.mockClear();
+    render(rangeProps({
+      start: '2026-08-01',
+      end: '2026-09-15',
+      onDateValidation,
+      validationOption: monthSetting
+    }));
+    expect(onDateValidation).toHaveBeenCalledWith({
+      type: 'end',
+      errorType: 'period',
+      newDate: '2026-09-01',
+      currentDate: '2026-09-15'
+    });
+  });
+});
+describe('RG-02~04 setting 역전 · 종료일=오늘 · 전달 props', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+  it('RG-02 setting 이 있을 때 시작일을 종료일 뒤로 바꾸면 newDate 종료일 · currentDate 바뀐 시작일로 overlap 통지', () => {
+    useFixedToday();
+    const onDateValidation = vi.fn();
+    const {
+      render
+    } = mountRerenderable(rangeProps({
+      start: '2026-10-12',
+      end: '2026-10-15',
+      onDateValidation,
+      validationOption: WEEK_SETTING
+    }));
+    onDateValidation.mockClear();
+    render(rangeProps({
+      start: '2026-10-18',
+      end: '2026-10-15',
+      onDateValidation,
+      validationOption: WEEK_SETTING
+    }));
+    expect(onDateValidation).toHaveBeenCalledWith({
+      type: 'start',
+      errorType: 'overlap',
+      newDate: '2026-10-15',
+      currentDate: '2026-10-18'
+    });
+  });
+  it('RG-02 setting 이 있을 때 종료일을 시작일 앞으로 바꾸면 newDate 시작일 · currentDate 바뀐 종료일로 overlap 통지', () => {
+    useFixedToday();
+    const onDateValidation = vi.fn();
+    const {
+      render
+    } = mountRerenderable(rangeProps({
+      start: '2026-10-12',
+      end: '2026-10-15',
+      onDateValidation,
+      validationOption: WEEK_SETTING
+    }));
+    onDateValidation.mockClear();
+    render(rangeProps({
+      start: '2026-10-12',
+      end: '2026-10-08',
+      onDateValidation,
+      validationOption: WEEK_SETTING
+    }));
+    expect(onDateValidation).toHaveBeenCalledWith({
+      type: 'end',
+      errorType: 'overlap',
+      newDate: '2026-10-12',
+      currentDate: '2026-10-08'
+    });
+  });
+  it('RG-03 종료일이 오늘이면 기간을 넘어도 종료측 기간 검증을 건너뛴다', () => {
+    useFixedToday();
+    const onDateValidation = vi.fn();
+    const {
+      render
+    } = mountRerenderable(rangeProps({
+      start: '2026-10-01',
+      end: '2026-10-05',
+      onDateValidation,
+      validationOption: WEEK_SETTING
+    }));
+    onDateValidation.mockClear();
+    render(rangeProps({
+      start: '2026-10-01',
+      end: TODAY,
+      onDateValidation,
+      validationOption: WEEK_SETTING
+    }));
+    expect(onDateValidation).not.toHaveBeenCalled();
+  });
+  it.each([{
+    type: 'start',
+    currentDate: '2026-10-10'
+  }, {
+    type: 'end',
+    currentDate: '2026-10-15'
+  }])('RG-03 정상 기간이면 $type 쪽을 errorType:null 로 통지한다', _ref4 => {
+    let {
+      type,
+      currentDate
+    } = _ref4;
+    useFixedToday();
+    const onDateValidation = vi.fn();
+    mountRerenderable(rangeProps({
+      start: '2026-10-10',
+      end: '2026-10-15',
+      onDateValidation,
+      validationOption: WEEK_SETTING
+    }));
+    expect(onDateValidation).toHaveBeenCalledWith({
+      type,
+      errorType: null,
+      newDate: currentDate,
+      currentDate
+    });
+  });
+  it('RG-04 size 를 두 DatePicker 에 전달한다', () => {
+    const {
+      container
+    } = mountRerenderable({
+      ...rangeProps({
+        start: '2026-10-10',
+        end: '2026-10-15',
+        onDateValidation: vi.fn()
+      }),
+      size: 'sm'
+    });
+    const pickers = Array.from(container.querySelectorAll('.ncua-date-picker'));
+    expect(pickers).toHaveLength(2);
+    expect(pickers.every(picker => picker.classList.contains('ncua-date-picker--sm'))).toBe(true);
+  });
+  it('RG-04 종료측은 isEndDate 라 enableTime 에서 시간 없는 날짜를 23:59 로 채운다', () => {
+    const TIME_OPTIONS = {
+      enableTime: true,
+      dateFormat: 'Y-m-d H:i'
+    };
+    const {
+      container
+    } = mountRerenderable({
+      startDateOptions: {
+        currentDate: '2026-10-10',
+        onChangeDate: () => undefined,
+        datePickerOptions: TIME_OPTIONS
+      },
+      endDateOptions: {
+        currentDate: '2026-10-15',
+        onChangeDate: () => undefined,
+        datePickerOptions: TIME_OPTIONS
+      }
+    });
+    const values = Array.from(container.querySelectorAll('input.flatpickr-input')).map(input => input.value);
+    expect(values).toEqual(['2026-10-10 00:00', '2026-10-15 23:59']);
+  });
 });

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

@@ -1,8 +1,8 @@
-// @vitest-environment jsdom
 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';
+import { useFixedToday } from '../../../../__tests__/helpers/fixedToday';
 import { RangeDatePickerWithButtons } from '../RangeDatePickerWithButtons';
 const mounted = [];
 function mount(props) {
@@ -300,4 +300,238 @@ describe('#11 통지 후 사용처가 날짜를 되돌려도 입력 칸의 포
     expect(endInput.value).toBe(END_DATE);
     expect(document.activeElement).toBe(endInput);
   });
+});
+// ── 위험 경로 RGB-xx (PR-7a) ──────────────────────────────────────────────
+// "오늘" 기준 계산은 Date 만 가짜로 고정한다. flatpickr 내부 타이머는 실제로 흐르게 둔다.
+/** FIXED_TODAY 기준 파생 날짜 */
+const TODAY = '2026-10-21';
+const YESTERDAY = '2026-10-20';
+const THREE_DAYS_AGO = '2026-10-18';
+const TEN_DAYS_AGO = '2026-10-11';
+const WEEK_AGO = '2026-10-14';
+const MONTH_AGO = '2026-09-21';
+const THREE_MONTHS_AGO = '2026-07-21';
+const YEAR_AGO = '2025-10-21';
+const periodButtonOf = (container, label) => {
+  const button = Array.from(container.querySelectorAll('.ncua-button-group button')).find(element => element.textContent === label);
+  if (!button) throw new Error(`기간 버튼을 찾을 수 없습니다: ${label}`);
+  return button;
+};
+const dateOptions = (currentDate, onChangeDate) => ({
+  currentDate,
+  onChangeDate
+});
+describe('RGB-01·02 기간 버튼 → 시작일·종료일 계산', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+  it('RGB-01 기간 버튼 click 은 그 버튼 key 로 setCurrentButtonId 를 호출한다', () => {
+    const setCurrentButtonId = vi.fn();
+    const container = mount({
+      currentButtonId: 'NONE',
+      setCurrentButtonId,
+      periodKeys: ['TODAY', '7DAYS'],
+      startDateOptions: dateOptions('', vi.fn()),
+      endDateOptions: dateOptions('', vi.fn())
+    });
+    act(() => {
+      periodButtonOf(container, '7일').click();
+    });
+    expect(setCurrentButtonId).toHaveBeenCalledWith('7DAYS');
+  });
+  it.each([{
+    key: 'TODAY',
+    start: TODAY
+  }, {
+    key: 'YESTERDAY',
+    start: YESTERDAY
+  }, {
+    key: '7DAYS',
+    start: WEEK_AGO
+  }, {
+    key: '1WEEK',
+    start: WEEK_AGO
+  }, {
+    key: '1MONTHS',
+    start: MONTH_AGO
+  }, {
+    key: '3MONTHS',
+    start: THREE_MONTHS_AGO
+  }, {
+    key: '1YEAR',
+    start: YEAR_AGO
+  }])('RGB-01 currentButtonId $key → 시작일 $start · 종료일 오늘로 양쪽 onChangeDate', _ref => {
+    let {
+      key,
+      start
+    } = _ref;
+    useFixedToday();
+    const onStart = vi.fn();
+    const onEnd = vi.fn();
+    mount({
+      currentButtonId: key,
+      setCurrentButtonId: vi.fn(),
+      periodKeys: [key],
+      startDateOptions: dateOptions('', onStart),
+      endDateOptions: dateOptions('', onEnd)
+    });
+    expect(onStart).toHaveBeenCalledWith(start);
+    expect(onEnd).toHaveBeenCalledWith(TODAY);
+  });
+  it('RGB-01 useYesterdayAsEndDate 면 종료일만 어제로 두고 시작일은 오늘 기준 그대로 계산한다', () => {
+    useFixedToday();
+    const onStart = vi.fn();
+    const onEnd = vi.fn();
+    mount({
+      useYesterdayAsEndDate: true,
+      currentButtonId: '7DAYS',
+      setCurrentButtonId: vi.fn(),
+      periodKeys: ['7DAYS'],
+      startDateOptions: dateOptions('', onStart),
+      endDateOptions: dateOptions('', onEnd)
+    });
+    expect(onStart).toHaveBeenCalledWith(WEEK_AGO);
+    expect(onEnd).toHaveBeenCalledWith(YESTERDAY);
+  });
+  it('RGB-01 부모 state 로 연결하면 버튼 click 이 is-current 표시와 날짜 갱신까지 이어진다', () => {
+    useFixedToday();
+    const onStart = vi.fn();
+    const onEnd = vi.fn();
+    const Harness = () => {
+      const [buttonId, setButtonId] = useState('NONE');
+      return /*#__PURE__*/createElement(RangeDatePickerWithButtons, {
+        currentButtonId: buttonId,
+        setCurrentButtonId: setButtonId,
+        periodKeys: ['TODAY', '3DAYS'],
+        startDateOptions: dateOptions('', onStart),
+        endDateOptions: dateOptions('', onEnd)
+      });
+    };
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+      root.render(/*#__PURE__*/createElement(Harness));
+    });
+    mounted.push({
+      root,
+      container
+    });
+    act(() => {
+      periodButtonOf(container, '3일').click();
+    });
+    expect(periodButtonOf(container, '3일').classList.contains('is-current')).toBe(true);
+    expect(periodButtonOf(container, '오늘').classList.contains('is-current')).toBe(false);
+    expect(onStart).toHaveBeenCalledWith(THREE_DAYS_AGO);
+    expect(onEnd).toHaveBeenCalledWith(TODAY);
+  });
+  it('RGB-02 ENTIRE 는 양쪽에 빈 문자열을 통지한다', () => {
+    useFixedToday();
+    const onStart = vi.fn();
+    const onEnd = vi.fn();
+    mount({
+      currentButtonId: 'ENTIRE',
+      setCurrentButtonId: vi.fn(),
+      periodKeys: ['ENTIRE'],
+      startDateOptions: dateOptions('2026-10-01', onStart),
+      endDateOptions: dateOptions('2026-10-10', onEnd)
+    });
+    expect(onStart).toHaveBeenCalledWith('');
+    expect(onEnd).toHaveBeenCalledWith('');
+  });
+});
+describe('RGB-03·04 날짜 직접 변경 · 커스텀 기간 · size', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+  const flatpickrInputsOf = container => Array.from(container.querySelectorAll('input.flatpickr-input'));
+  it.each([{
+    side: 'START',
+    index: 0
+  }, {
+    side: 'END',
+    index: 1
+  }])('RGB-03 $side 날짜를 직접 바꾸면 그쪽 onChangeDate 와 setCurrentButtonId("NONE") 을 호출한다', _ref2 => {
+    let {
+      index
+    } = _ref2;
+    const onStart = vi.fn();
+    const onEnd = vi.fn();
+    const setCurrentButtonId = vi.fn();
+    const container = mount({
+      currentButtonId: '7DAYS',
+      setCurrentButtonId,
+      periodKeys: ['7DAYS'],
+      startDateOptions: dateOptions('2026-10-01', onStart),
+      endDateOptions: dateOptions('2026-10-10', onEnd)
+    });
+    onStart.mockClear();
+    onEnd.mockClear();
+    act(() => {
+      flatpickrInputsOf(container)[index]._flatpickr.setDate('2026-10-05', true);
+    });
+    expect([onStart, onEnd][index]).toHaveBeenCalledWith('2026-10-05');
+    expect(setCurrentButtonId).toHaveBeenCalledWith('NONE');
+  });
+  it('RGB-03 currentButtonId 가 빈 문자열이면 날짜를 바꿔도 setCurrentButtonId 를 호출하지 않는다', () => {
+    const setCurrentButtonId = vi.fn();
+    const container = mount({
+      currentButtonId: '',
+      setCurrentButtonId,
+      periodKeys: ['7DAYS'],
+      startDateOptions: dateOptions('2026-10-01', vi.fn()),
+      endDateOptions: dateOptions('2026-10-10', vi.fn())
+    });
+    act(() => {
+      flatpickrInputsOf(container)[0]._flatpickr.setDate('2026-10-05', true);
+    });
+    expect(setCurrentButtonId).not.toHaveBeenCalled();
+  });
+  it.each(['NONE', 'UNKNOWN_KEY'])('RGB-03 currentButtonId 가 %s 면 날짜를 다시 계산하지 않는다', currentButtonId => {
+    useFixedToday();
+    const onStart = vi.fn();
+    const onEnd = vi.fn();
+    mount({
+      currentButtonId,
+      setCurrentButtonId: vi.fn(),
+      periodKeys: ['7DAYS'],
+      startDateOptions: dateOptions('', onStart),
+      endDateOptions: dateOptions('', onEnd)
+    });
+    expect(onStart).not.toHaveBeenCalled();
+    expect(onEnd).not.toHaveBeenCalled();
+  });
+  it('RGB-04 periodItems 를 주면 그 항목으로 버튼을 그리고 기간을 계산한다', () => {
+    useFixedToday();
+    const TEN_DAYS = 10;
+    const onStart = vi.fn();
+    const container = mount({
+      currentButtonId: 'LAST_10',
+      setCurrentButtonId: vi.fn(),
+      periodKeys: ['LAST_10'],
+      periodItems: {
+        LAST_10: {
+          text: '최근 10일',
+          period: TEN_DAYS,
+          unit: 'days'
+        }
+      },
+      startDateOptions: dateOptions('', onStart),
+      endDateOptions: dateOptions('', vi.fn())
+    });
+    expect(periodButtonOf(container, '최근 10일').classList.contains('is-current')).toBe(true);
+    expect(onStart).toHaveBeenCalledWith(TEN_DAYS_AGO);
+  });
+  it('RGB-04 size 를 ButtonGroup 과 RangeDatePicker 에 전달한다', () => {
+    const container = mount({
+      size: 'sm',
+      currentButtonId: 'NONE',
+      setCurrentButtonId: vi.fn(),
+      periodKeys: ['TODAY'],
+      startDateOptions: dateOptions('', vi.fn()),
+      endDateOptions: dateOptions('', vi.fn())
+    });
+    expect(container.querySelector('.ncua-button-group')?.classList.contains('ncua-button-group--sm')).toBe(true);
+    expect(container.querySelector('.ncua-date-picker')?.classList.contains('ncua-date-picker--sm')).toBe(true);
+  });
 });