@ncds/ui-admin 1.8.13 → 1.8.15

package/dist/cjs/src/components/forms-and-input/checkbox/CheckboxInput.js

@@ -7,6 +7,7 @@ exports.CheckboxInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
+var _useIsomorphicLayoutEffect = require("../../../hooks/useIsomorphicLayoutEffect");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const CheckboxInput = exports.CheckboxInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
@@ -19,10 +20,10 @@ const CheckboxInput = exports.CheckboxInput = /*#__PURE__*/(0, _react.forwardRef
     ...props
   } = _ref;
   const inputRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
+  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
     const input = ref && typeof ref !== 'function' ? ref.current : inputRef.current;
     if (input) {
-      input.indeterminate = indeterminate; // 외부에서 받은 값을 그대로 사용
+      input.indeterminate = indeterminate;
     }
   }, [indeterminate, ref]);
   return (0, _jsxRuntime.jsx)("span", {

package/dist/cjs/src/components/forms-and-input/date-picker/DatePicker.js

@@ -183,6 +183,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) return;
@@ -194,10 +200,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 컴포넌트
@@ -227,7 +229,7 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
   const onValidationErrorRef = (0, _react.useRef)(onValidationError);
   onValidationErrorRef.current = onValidationError;
   /** portal 컨테이너를 lazily 생성 (이미 있으면 재사용), className은 매번 갱신 */
-  const getPortalContainer = () => {
+  const getPortalContainer = (0, _react.useCallback)(() => {
     if (!portal || typeof document === 'undefined') return undefined;
     const portalClassName = (0, _classnames.default)('ncua-date-picker', 'ncua-date-picker--portal', `ncua-date-picker--${size}`, {
       'ncua-date-picker--has-time': hasTimeOption
@@ -243,7 +245,7 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
     document.body.appendChild(el);
     portalContainerRef.current = el;
     return el;
-  };
+  }, [portal, size, hasTimeOption]);
   /** 컴포넌트 언마운트 시 포탈 컨테이너 및 스크롤 리스너 정리 */
   (0, _react.useEffect)(() => {
     return () => {
@@ -255,7 +257,7 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
   // 날짜 유효성 검사
   // ──────────────────────────────────────────────
   /** minDate/maxDate 범위를 벗어났는지 확인 */
-  const checkDateViolations = (date, minDate, maxDate) => {
+  const checkDateViolations = (0, _react.useCallback)((date, minDate, maxDate) => {
     const violations = [];
     const inputDate = (0, _moment.default)(date);
     if (!inputDate.isValid()) return violations;
@@ -272,16 +274,16 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
       }
     }
     return violations;
-  };
+  }, []);
   // ──────────────────────────────────────────────
   // 이벤트 핸들러
   // ──────────────────────────────────────────────
   /** 유효하지 않은 입력 시 이전 날짜로 복원 */
-  const restorePreviousDate = (target, instance) => {
+  const restorePreviousDate = (0, _react.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 = (0, _datePicker.convertToMomentFormat)(dateFormatRef.current);
         target.value = (0, _moment.default)(prevDate).format(momentFormat);
         instance.setDate(prevDate, false);
         return;
@@ -289,7 +291,7 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
     }
     target.value = '';
     instance.setDate('', false);
-  };
+  }, []);
   /** flatpickr에서 날짜가 변경되었을 때 호출 */
   const onChangeDateHandler = (0, _react.useCallback)((dateTimeStamp, dateStr, fpInstance) => {
     const instance = fpInstance;
@@ -303,7 +305,9 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
     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,
@@ -319,7 +323,6 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
     isValidDate(formattedDate) ? onChangeDateRef.current(formattedDate) : onChangeDateRef.current(dateStr);
   }, [checkDateViolations, restorePreviousDate]);
   /** input에 직접 타이핑할 때 날짜 형식 자동 변환 및 유효성 검사 */
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   const onInputHandler = (0, _react.useCallback)(e => {
     const target = e.target;
     const input = target.value;
@@ -372,12 +375,6 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
   // ──────────────────────────────────────────────
   // 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 = (0, _react.useMemo)(() => ({
     mode: 'single',
     static: !portal,
@@ -398,7 +395,7 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
         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 = (0, _datePicker.convertToMomentFormat)(format);
         return momentDate.format(momentFormat);
       } catch (_error) {
         return '';

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _DatePicker = require("../DatePicker");
+// @vitest-environment jsdom
+
+const {
+  captured
+} = _vitest.vi.hoisted(() => ({
+  captured: []
+}));
+// react-flatpickr를 mock하여 DatePicker가 넘기는 options 참조를 렌더마다 수집한다.
+// (vi.mock / vi.hoisted는 vitest가 import 위로 호이스팅하므로 DatePicker import보다 먼저 적용된다)
+_vitest.vi.mock('react-flatpickr', () => ({
+  default: props => {
+    captured.push(props.options);
+    return null;
+  }
+}));
+(0, _vitest.describe)('#1 options useMemo 안정성', () => {
+  (0, _vitest.it)('부모가 같은 props로 강제 리렌더해도 options 참조가 동일하게 유지된다(재생성 안 됨)', () => {
+    let bump = () => undefined;
+    const Harness = () => {
+      const [, setN] = (0, _react.useState)(0);
+      bump = () => setN(x => x + 1);
+      return /*#__PURE__*/(0, _react.createElement)(_DatePicker.DatePicker, {
+        currentDate: '2024-03-20',
+        onChangeDate: () => undefined
+      });
+    };
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = (0, _client.createRoot)(container);
+    (0, _testUtils.act)(() => {
+      root.render(/*#__PURE__*/(0, _react.createElement)(Harness));
+    });
+    const countAfterMount = captured.length;
+    const firstOptions = captured[captured.length - 1];
+    (0, _testUtils.act)(() => {
+      bump();
+    });
+    const lastOptions = captured[captured.length - 1];
+    (0, _vitest.expect)(captured.length).toBeGreaterThan(countAfterMount); // 리렌더가 실제로 일어났는지
+    (0, _vitest.expect)(Object.is(firstOptions, lastOptions)).toBe(true); // 동일 참조 = options 재생성 안 됨
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    container.remove();
+  });
+});

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

@@ -0,0 +1,129 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _DatePicker = require("../DatePicker");
+// @vitest-environment jsdom
+
+const mounted = [];
+function mount(props) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  (0, _testUtils.act)(() => {
+    root.render(/*#__PURE__*/(0, _react.createElement)(_DatePicker.DatePicker, props));
+  });
+  mounted.push({
+    root,
+    container
+  });
+  return container;
+}
+(0, _vitest.afterEach)(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    container.remove();
+  }
+  _vitest.vi.restoreAllMocks();
+});
+(0, _vitest.describe)('DatePicker 렌더 (스모크)', () => {
+  (0, _vitest.it)('기본 props로 input을 렌더하고 크래시하지 않는다', () => {
+    const container = mount({
+      currentDate: '2024-03-20',
+      onChangeDate: () => undefined
+    });
+    (0, _vitest.expect)(container.querySelector('input')).not.toBeNull();
+  });
+  (0, _vitest.it)('enableTime 옵션으로도 정상 렌더한다', () => {
+    const container = mount({
+      currentDate: '2024-03-20 14:30',
+      onChangeDate: () => undefined,
+      datePickerOptions: {
+        enableTime: true,
+        dateFormat: 'Y-m-d H:i'
+      }
+    });
+    (0, _vitest.expect)(container.querySelector('input')).not.toBeNull();
+  });
+});
+(0, _vitest.describe)('#4 document mousedown 리스너 정리', () => {
+  (0, _vitest.it)('enableTime 마운트 후 언마운트 시, 추가된 mousedown 리스너가 모두 제거된다(누수 없음)', () => {
+    const added = [];
+    const removed = [];
+    const origAdd = document.addEventListener.bind(document);
+    const origRemove = document.removeEventListener.bind(document);
+    _vitest.vi.spyOn(document, 'addEventListener').mockImplementation((type, fn, opts) => {
+      if (type === 'mousedown' && fn) added.push(fn);
+      return origAdd(type, fn, opts);
+    });
+    _vitest.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 = (0, _client.createRoot)(container);
+    (0, _testUtils.act)(() => {
+      root.render(/*#__PURE__*/(0, _react.createElement)(_DatePicker.DatePicker, {
+        currentDate: '2024-03-20 14:30',
+        onChangeDate: () => undefined,
+        datePickerOptions: {
+          enableTime: true,
+          dateFormat: 'Y-m-d H:i'
+        }
+      }));
+    });
+    (0, _vitest.expect)(added.length).toBeGreaterThanOrEqual(1);
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    container.remove();
+    for (const fn of added) {
+      (0, _vitest.expect)(removed).toContain(fn);
+    }
+  });
+});
+(0, _vitest.describe)('#3 onValidationError.previousDate', () => {
+  // 허용 범위(10~25일) 기준: 마지막 유효 선택일과 범위 밖 위반일
+  const LAST_VALID_DAY = 15;
+  const OUT_OF_RANGE_DAY = 30;
+  (0, _vitest.it)('min/max 위반 시 previousDate는 위반 날짜가 아니라 직전 유효 날짜다', () => {
+    const onValidationError = _vitest.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;
+    (0, _vitest.expect)(instance).toBeTruthy();
+    // 1) 유효 날짜를 먼저 선택 → 직전 유효값(_previousDateBeforeInput)이 확립됨
+    (0, _testUtils.act)(() => {
+      instance.setDate(`2024-03-${LAST_VALID_DAY}`, true);
+    });
+    (0, _vitest.expect)(onValidationError).not.toHaveBeenCalled();
+    // 2) 허용 범위 밖 날짜 선택 → 위반 분기 진입
+    (0, _testUtils.act)(() => {
+      instance.setDate(`2024-03-${OUT_OF_RANGE_DAY}`, true);
+    });
+    (0, _vitest.expect)(onValidationError).toHaveBeenCalledTimes(1);
+    const arg = onValidationError.mock.calls[0][0];
+    (0, _vitest.expect)(arg.violations).toContain('maxDate');
+    (0, _vitest.expect)(arg.date.getDate()).toBe(OUT_OF_RANGE_DAY); // 위반 날짜
+    (0, _vitest.expect)(arg.previousDate?.getDate()).toBe(LAST_VALID_DAY); // 직전 유효 날짜 (≠ 위반 날짜)
+    (0, _vitest.expect)(arg.previousDate?.getTime()).not.toBe(arg.date.getTime());
+  });
+});

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

@@ -10,6 +10,10 @@ var _react = require("react");
 var _DatePicker = require("../date-picker/DatePicker");
 var _utils = require("../date-picker/utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** 시작일·종료일이 모두 채워져 있고 유효한 날짜일 때만 범위 검증이 의미가 있다.
+ *  한쪽이라도 비어 있으면(예: ENTIRE 초기화로 양쪽이 '') moment 비교가 전부 무효가 되어
+ *  onDateValidation 에 "Invalid date" 같은 잘못된 newDate 가 전달되므로 검증을 건너뛴다. */
+const areBothDatesValid = (start, end) => Boolean(start) && Boolean(end) && (0, _moment.default)(start).isValid() && (0, _moment.default)(end).isValid();
 const RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     startDateOptions,
@@ -79,6 +83,9 @@ const RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwar
     }
   }, [startDateOptions, endDateOptions, validationOption, onDateValidation, getOverlapResult, getSettingNewDate]);
   (0, _react.useEffect)(() => {
+    if (!areBothDatesValid(startDateOptions.currentDate, endDateOptions.currentDate)) {
+      return;
+    }
     const isOverDate = (0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
     if (isOverDate) {
       changeSettingDateAndAlert('start');
@@ -102,8 +109,18 @@ const RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwar
     } 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]);
   (0, _react.useEffect)(() => {
+    if (!areBothDatesValid(startDateOptions.currentDate, endDateOptions.currentDate)) {
+      return;
+    }
+    // 종료일이 '오늘'이면 종료측 검증을 건너뛴다: shopby 는 종료일=오늘이 정상 기본값이라
+    // (고도몰=어제) 이 상태를 에러로 잡지 않기 위함. (도입 d1bd8751)
     const isNotTodayEndDate = !(0, _moment.default)(endDateOptions.currentDate).isSame((0, _moment.default)(), 'day');
     if (!validationOption?.setting || !isNotTodayEndDate) {
       return;
@@ -128,6 +145,11 @@ const RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwar
     } 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 (0, _jsxRuntime.jsxs)("div", {
     className: "ncua-range-date-picker",

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

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

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

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

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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _RangeDatePickerWithButtons = require("../RangeDatePickerWithButtons");
+// @vitest-environment jsdom
+
+const mounted = [];
+function mount(props) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  (0, _testUtils.act)(() => {
+    root.render(/*#__PURE__*/(0, _react.createElement)(_RangeDatePickerWithButtons.RangeDatePickerWithButtons, props));
+  });
+  mounted.push({
+    root,
+    container
+  });
+  return container;
+}
+(0, _vitest.afterEach)(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    container.remove();
+  }
+  _vitest.vi.restoreAllMocks();
+});
+(0, _vitest.describe)('#6 periodItems 에 없는 periodKey 방어', () => {
+  const baseProps = {
+    currentButtonId: 'NONE',
+    setCurrentButtonId: () => undefined,
+    startDateOptions: {
+      currentDate: '2024-03-01',
+      onChangeDate: () => undefined
+    },
+    endDateOptions: {
+      currentDate: '2024-03-05',
+      onChangeDate: () => undefined
+    }
+  };
+  (0, _vitest.it)('periodKeys 에 periodItems 에 없는 키가 있어도 크래시하지 않고 유효한 버튼만 렌더한다', () => {
+    const container = mount({
+      ...baseProps,
+      periodKeys: ['TODAY', 'UNKNOWN_KEY']
+    });
+    // 유효한 키(TODAY='오늘')는 렌더되고, 정의에 없는 키는 건너뛴다(크래시 없음)
+    (0, _vitest.expect)(container.textContent).toContain('오늘');
+  });
+});

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

@@ -24,12 +24,14 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref)
     optionItems,
     register,
     disabled = false,
+    readOnly = false,
     ...props
   } = _ref;
   return (0, _jsxRuntime.jsxs)("span", {
     className: (0, _classnames.default)('ncua-select', {
       destructive: destructive,
-      'ncua-select--simple': type === 'simple'
+      'ncua-select--simple': type === 'simple',
+      'ncua-select--readonly': readOnly
     }, className, `ncua-select--${size}`),
     children: [(0, _jsxRuntime.jsx)("span", {
       className: "ncua-select__content",
@@ -39,8 +41,17 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref)
         id: id,
         className: (0, _classnames.default)('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 && (0, _jsxRuntime.jsx)("option", {
           value: "",
           disabled: disabledPlaceholder,

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

@@ -78,6 +78,7 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
     value,
     optionItems = [],
     disabled = false,
+    readOnly = false,
     maxHeight = DEFAULT_MAX_HEIGHT,
     multiple = false,
     maxSelection,
@@ -110,7 +111,7 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
     return selectedOption ? selectedOption : placeholder;
   }, [multiple, selectedOption, placeholder]);
   const handleOptionSelect = option => {
-    if (disabled) return;
+    if (disabled || readOnly) return;
     if (multiple) {
       const newValue = tryToggle(option.id, Array.isArray(value) ? value : []);
       if (newValue === null) return;
@@ -139,7 +140,7 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
     maxHeight,
     itemCount: optionItems.length,
     optionItems,
-    disabled,
+    disabled: disabled || readOnly,
     multiple,
     onSelect: handleOptionSelect
   });
@@ -244,6 +245,7 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
       className: (0, _classnames.default)('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
@@ -259,6 +261,7 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
         "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: [(0, _jsxRuntime.jsxs)("div", {

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

@@ -20,6 +20,9 @@ const Slider = _ref => {
   } = _ref;
   const containerRef = (0, _react.useRef)(null);
   const sliderInstanceRef = (0, _react.useRef)(null);
+  // value 의 "타입"이 바뀔 때만(범위↔단일 등) 슬라이더를 재생성한다. valueType 으로 추출해
+  // 정적으로 드러낸다 — 96cf7b3a 에서 deps 를 [] → [typeof value, ...] 로 좁힌 의도.
+  const valueType = typeof value;
   (0, _react.useEffect)(() => {
     if (!containerRef.current) return;
     sliderInstanceRef.current = new _slider.Slider(containerRef.current, {
@@ -37,7 +40,10 @@ const Slider = _ref => {
         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]);
   (0, _react.useEffect)(() => {
     if (sliderInstanceRef.current) {
       sliderInstanceRef.current.setValue(value);