@ncds/ui-admin 1.8.14 → 1.8.15

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

@@ -0,0 +1,92 @@
+// @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, vi } from 'vitest';
+import { RangeDatePicker } from '../RangeDatePicker';
+const mounted = [];
+function mount(props) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  act(() => {
+    root.render(/*#__PURE__*/createElement(RangeDatePicker, props));
+  });
+  mounted.push({
+    root,
+    container
+  });
+  return container;
+}
+afterEach(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  }
+  vi.restoreAllMocks();
+});
+describe('#1 빈/무효 날짜 검증 가드', () => {
+  const validationOption = {
+    setting: {
+      unit: 'days',
+      period: 7
+    }
+  };
+  it('양쪽 날짜가 비어 있으면 onDateValidation 을 호출하지 않는다', () => {
+    const onDateValidation = vi.fn();
+    mount({
+      startDateOptions: {
+        currentDate: '',
+        onChangeDate: () => undefined
+      },
+      endDateOptions: {
+        currentDate: '',
+        onChangeDate: () => undefined
+      },
+      validationOption,
+      onDateValidation
+    });
+    expect(onDateValidation).not.toHaveBeenCalled();
+  });
+  it('한쪽(종료일)만 비어 있어도 "Invalid date" 를 newDate 로 전달하지 않는다', () => {
+    const onDateValidation = 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';
+    });
+    expect(leakedInvalidDate).toBe(false);
+  });
+  it('양쪽 날짜가 유효하면 검증이 정상 동작한다(가드가 정상 입력을 막지 않음)', () => {
+    const onDateValidation = vi.fn();
+    mount({
+      startDateOptions: {
+        currentDate: '2024-03-01',
+        onChangeDate: () => undefined
+      },
+      endDateOptions: {
+        currentDate: '2024-03-05',
+        onChangeDate: () => undefined
+      },
+      validationOption,
+      onDateValidation
+    });
+    expect(onDateValidation).toHaveBeenCalled();
+  });
+});

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

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

package/dist/esm/src/components/forms-and-input/range-date-picker-with-buttons/__tests__/RangeDatePickerWithButtons.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, vi } from 'vitest';
+import { RangeDatePickerWithButtons } from '../RangeDatePickerWithButtons';
+const mounted = [];
+function mount(props) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  act(() => {
+    root.render(/*#__PURE__*/createElement(RangeDatePickerWithButtons, props));
+  });
+  mounted.push({
+    root,
+    container
+  });
+  return container;
+}
+afterEach(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  }
+  vi.restoreAllMocks();
+});
+describe('#6 periodItems 에 없는 periodKey 방어', () => {
+  const baseProps = {
+    currentButtonId: 'NONE',
+    setCurrentButtonId: () => undefined,
+    startDateOptions: {
+      currentDate: '2024-03-01',
+      onChangeDate: () => undefined
+    },
+    endDateOptions: {
+      currentDate: '2024-03-05',
+      onChangeDate: () => undefined
+    }
+  };
+  it('periodKeys 에 periodItems 에 없는 키가 있어도 크래시하지 않고 유효한 버튼만 렌더한다', () => {
+    const container = mount({
+      ...baseProps,
+      periodKeys: ['TODAY', 'UNKNOWN_KEY']
+    });
+    // 유효한 키(TODAY='오늘')는 렌더되고, 정의에 없는 키는 건너뛴다(크래시 없음)
+    expect(container.textContent).toContain('오늘');
+  });
+});

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

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

package/dist/esm/src/components/navigation/pagination/Pagination.js

@@ -26,6 +26,13 @@ export const Pagination = _ref => {
     }
   };
   useEffect(() => {
+    const lastGroupStart = Math.max(1, Math.floor((totalPage - 1) / pageCount) * pageCount + 1);
+    // totalPage/pageCount 가 줄어 start 가 마지막 그룹을 넘으면 마지막 그룹으로 보정한다.
+    // (예: 100→50 페이지로 축소 시 start 가 91 에 머물러 범위 밖 버튼을 표시하던 문제)
+    if (start > lastGroupStart) {
+      setStart(lastGroupStart);
+      return;
+    }
     if (currentPage === start + pageCount) {
       setStart(start + pageCount);
     }
@@ -40,10 +47,13 @@ export const Pagination = _ref => {
       setStart(1);
     }
     if (currentPage === totalPage) {
-      const lastGroupStart = Math.floor((totalPage - 1) / pageCount) * pageCount + 1;
       setStart(lastGroupStart);
     }
-  }, [currentPage]);
+    // start 는 이 effect 가 setStart 로 갱신하는 대상이라 deps 에서 제외한다(넣으면 자기 갱신으로
+    // 재실행). currentPage 외에 totalPage/pageCount 도 추적해, 이들이 줄어 start 가 범위를 벗어나면
+    // 위에서 보정한다.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentPage, totalPage, pageCount]);
   return _jsxs("div", {
     className: classNames('ncua-pagination', `ncua-pagination--${breakPoint}`, className),
     children: [showJumpPageButton && _jsxs(_Fragment, {

package/dist/esm/src/components/navigation/pagination/__tests__/Pagination.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 { afterEach, describe, expect, it } from 'vitest';
+import { Pagination } from '../Pagination';
+const ITEM_COUNT_PER_PAGE = 10;
+const PAGE_GROUP_SIZE = 10;
+const TOTAL_COUNT_100_PAGES = 1000;
+const TOTAL_COUNT_50_PAGES = 500;
+const CURRENT_PAGE = 91; // 100페이지 기준 마지막 그룹(91~100)을 보던 페이지
+const GROUP_START_100_PAGES = 91; // currentPage=91 일 때의 그룹 시작
+const GROUP_START_50_PAGES = 41; // totalPage=50 으로 줄었을 때의 마지막 그룹 시작
+const LAST_PAGE_50 = 50;
+let root = null;
+let container = null;
+function render(props) {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  }
+  act(() => {
+    root?.render(/*#__PURE__*/createElement(Pagination, props));
+  });
+  return container;
+}
+afterEach(() => {
+  if (root && container) {
+    act(() => root?.unmount());
+    container.remove();
+  }
+  root = null;
+  container = null;
+});
+const pageNums = el => Array.from(el.querySelectorAll('.ncua-pagination__page-num')).map(b => Number(b.textContent));
+describe('#332 Pagination — totalPage 축소 시 start 보정', () => {
+  it('totalPage 가 줄면 start 를 마지막 그룹으로 보정하고 범위 밖 페이지 버튼을 표시하지 않는다', () => {
+    // 1) 100 페이지에서 91 페이지 보는 중 → 91~100 그룹 표시
+    const el = render({
+      totalCount: TOTAL_COUNT_100_PAGES,
+      itemCountPerPage: ITEM_COUNT_PER_PAGE,
+      pageCount: PAGE_GROUP_SIZE,
+      currentPage: CURRENT_PAGE
+    });
+    expect(pageNums(el)[0]).toBe(GROUP_START_100_PAGES);
+    // 2) 데이터가 50 페이지로 줄어듦 (currentPage 는 그대로 — 부모가 clamp 안 한 상황)
+    render({
+      totalCount: TOTAL_COUNT_50_PAGES,
+      itemCountPerPage: ITEM_COUNT_PER_PAGE,
+      pageCount: PAGE_GROUP_SIZE,
+      currentPage: CURRENT_PAGE
+    });
+    const nums = pageNums(el);
+    // 마지막 그룹(41~50)으로 보정되고, totalPage(50)를 넘는 버튼은 없어야 한다
+    expect(nums[0]).toBe(GROUP_START_50_PAGES);
+    expect(Math.max(...nums)).toBeLessThanOrEqual(LAST_PAGE_50);
+  });
+});

package/dist/esm/src/components/overlays/tooltip/Tooltip.js

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { ButtonCloseX } from '../../action/button/ButtonCloseX';
+import { calculateArrowOffsetX } from './utils';
 const ICON_SIZE_SM = 14;
 const ICON_SIZE_DEFAULT = 16;
 // HTML 구현체(assets/scripts/tooltip)와 동일한 상수
@@ -64,9 +65,16 @@ const computePanelCoords = (prefer, anchor, panel) => {
   }
   left = Math.max(VIEWPORT_MARGIN, Math.min(left, window.innerWidth - panel.width - VIEWPORT_MARGIN));
   top = Math.max(VIEWPORT_MARGIN, Math.min(top, window.innerHeight - panel.height - VIEWPORT_MARGIN));
+  // 경계 보정으로 패널이 앵커 중심에서 밀렸을 때도 화살표(::after)가 앵커를 가리키도록
+  // 패널 내 X 오프셋 계산 (top/bottom 계열만 — SCSS의 --top/--bottom 규칙이 소비)
+  let arrowX = null;
+  if (calculatedPosition === 'top' || calculatedPosition === 'bottom') {
+    arrowX = calculateArrowOffsetX(anchor.left + anchor.width / 2, left, panel.width);
+  }
   return {
     top: Math.round(top),
     left: Math.round(left),
+    arrowX,
     calculatedPosition
   };
 };
@@ -79,6 +87,9 @@ const buildPanelStyle = (disablePortal, coords, visible, zIndex) => {
     top: `${coords.top}px`,
     left: `${coords.left}px`,
     opacity,
+    ...(coords.arrowX !== null && {
+      '--ncua-tooltip-arrow-x': `${coords.arrowX}px`
+    }),
     ...(zIndex && {
       zIndex
     })
@@ -131,7 +142,8 @@ export const Tooltip = _ref => {
   const [mounted, setMounted] = useState(false);
   const [coords, setCoords] = useState({
     top: OFFSCREEN,
-    left: OFFSCREEN
+    left: OFFSCREEN,
+    arrowX: null
   });
   const [calculatedPosition, setCalculatedPosition] = useState(position === 'auto' ? 'bottom' : position);
   const [isVisible, setIsVisible] = useState(false);
@@ -153,7 +165,8 @@ export const Tooltip = _ref => {
     const next = computePanelCoords(position, anchor, panel);
     setCoords({
       top: next.top,
-      left: next.left
+      left: next.left,
+      arrowX: next.arrowX
     });
     setCalculatedPosition(next.calculatedPosition);
   }, [position, disablePortal]);

package/dist/esm/src/components/overlays/tooltip/__tests__/utils.test.js

@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest';
+import { ARROW_EDGE_MARGIN, calculateArrowOffsetX } from '../utils';
+// 공통 픽스처 — 너비 300px 패널이 viewport 왼쪽 여백(8px)에 클램핑된 상태를 가정
+const PANEL_WIDTH = 300;
+const CLAMPED_LEFT = 8;
+describe('calculateArrowOffsetX — 화살표가 앵커 중심을 가리키도록 패널 내 X 오프셋 계산', () => {
+  it('패널이 클램핑되지 않으면(앵커 중심 = 패널 중심) 패널 너비의 절반을 반환한다', () => {
+    const anchorCenterX = 200;
+    const centeredPanelLeft = 50;
+    const panelHalfWidth = 150;
+    expect(calculateArrowOffsetX(anchorCenterX, centeredPanelLeft, PANEL_WIDTH)).toBe(panelHalfWidth);
+  });
+  it('패널이 오른쪽으로 밀린 경우(왼쪽 경계 클램핑) 화살표는 왼쪽으로 이동해 앵커를 가리킨다', () => {
+    const anchorCenterX = 60;
+    const expectedOffset = 52; // 60 - 8
+    expect(calculateArrowOffsetX(anchorCenterX, CLAMPED_LEFT, PANEL_WIDTH)).toBe(expectedOffset);
+  });
+  it('패널이 왼쪽으로 밀린 경우(오른쪽 경계 클램핑) 화살표는 오른쪽으로 이동해 앵커를 가리킨다', () => {
+    const anchorCenterX = 950;
+    const clampedRightPanelLeft = 692;
+    const expectedOffset = 258; // 950 - 692
+    expect(calculateArrowOffsetX(anchorCenterX, clampedRightPanelLeft, PANEL_WIDTH)).toBe(expectedOffset);
+  });
+  it('앵커가 패널 왼쪽 모서리보다 바깥이면 최소 여백(모서리 radius + 화살표)으로 클램핑한다', () => {
+    const outsideLeftAnchorX = 10;
+    expect(calculateArrowOffsetX(outsideLeftAnchorX, CLAMPED_LEFT, PANEL_WIDTH)).toBe(ARROW_EDGE_MARGIN);
+  });
+  it('앵커가 패널 오른쪽 모서리보다 바깥이면 최대 여백으로 클램핑한다', () => {
+    const outsideRightAnchorX = 999;
+    expect(calculateArrowOffsetX(outsideRightAnchorX, CLAMPED_LEFT, PANEL_WIDTH)).toBe(PANEL_WIDTH - ARROW_EDGE_MARGIN);
+  });
+  it('소수 좌표는 반올림한다', () => {
+    const fractionalAnchorX = 100.4;
+    const panelLeft = 50;
+    const expectedRounded = 50; // 100.4 - 50 = 50.4 → 50
+    expect(calculateArrowOffsetX(fractionalAnchorX, panelLeft, PANEL_WIDTH)).toBe(expectedRounded);
+  });
+});

package/dist/esm/src/components/overlays/tooltip/utils.js

@@ -0,0 +1,13 @@
+// 화살표가 패널 모서리(border-radius 6px + 화살표 반너비 6px) 안쪽으로 파고들지 않기 위한 최소 여백
+export const ARROW_EDGE_MARGIN = 12;
+/**
+ * top/bottom 툴팁 화살표(::after)의 패널 내 X 오프셋.
+ * 패널이 viewport 경계 보정으로 앵커 중심에서 밀려도 화살표는 앵커를 가리키도록,
+ * 클램핑된 패널 left 기준으로 앵커 중심까지의 거리를 계산한다.
+ * 앵커가 패널 밖에 있으면 패널 모서리 여백까지만 이동한다.
+ * React(Tooltip.tsx)와 HTML 구현체(assets/scripts/tooltip)가 공유한다.
+ */
+export function calculateArrowOffsetX(anchorCenterX, panelLeft, panelWidth) {
+  const raw = anchorCenterX - panelLeft;
+  return Math.round(Math.max(ARROW_EDGE_MARGIN, Math.min(raw, panelWidth - ARROW_EDGE_MARGIN)));
+}

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

@@ -3,5 +3,6 @@
 export * from './dropdown';
 export * from './useCallbackRef';
 export * from './useFloatingPosition';
+export * from './useIsomorphicLayoutEffect';
 export * from './useMediaQuery';
 export * from './useMergeRefs';

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

@@ -0,0 +1,2 @@
+import { useEffect, useLayoutEffect } from 'react';
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

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

@@ -14,6 +14,9 @@ export const useMediaQuery = (query, options) => {
     return () => {
       mediaQuery.removeEventListener('change', handleChange);
     };
+    // options 객체 전체가 아니라 실제 사용하는 onMatched 콜백에만 의존한다. options 를 통째로
+    // 넣으면 매 렌더 새 객체로 간주돼 불필요하게 재구독한다.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [query, options?.onMatched]);
   return matches;
 };

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

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { forwardRef, useEffect, useRef } from 'react';
+import { forwardRef, useRef } from 'react';
+import { useIsomorphicLayoutEffect } from '../../../hooks/useIsomorphicLayoutEffect';
 export const CheckboxInput = forwardRef(({ size = 'xs', indeterminate = false, disabled, className, destructive = false, onChange, ...props }, ref) => {
     const inputRef = useRef(null);
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         const input = ref && typeof ref !== 'function' ? ref.current : inputRef.current;
         if (input) {
-            input.indeterminate = indeterminate; // 외부에서 받은 값을 그대로 사용
+            input.indeterminate = indeterminate;
         }
     }, [indeterminate, ref]);
     return (_jsx("span", { className: classNames('ncua-checkbox-input', `ncua-checkbox-input--${size}`, { 'has-indeterminate': indeterminate }, { destructive }, className), children: _jsx("input", { type: "checkbox", ref: (node) => {

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

@@ -3,6 +3,10 @@ import moment from 'moment';
 import { forwardRef, useCallback, useEffect } from 'react';
 import { DatePicker } from '../date-picker/DatePicker';
 import { getDateFormat } from '../date-picker/utils';
+/** 시작일·종료일이 모두 채워져 있고 유효한 날짜일 때만 범위 검증이 의미가 있다.
+ *  한쪽이라도 비어 있으면(예: ENTIRE 초기화로 양쪽이 '') moment 비교가 전부 무효가 되어
+ *  onDateValidation 에 "Invalid date" 같은 잘못된 newDate 가 전달되므로 검증을 건너뛴다. */
+const areBothDatesValid = (start, end) => Boolean(start) && Boolean(end) && moment(start).isValid() && moment(end).isValid();
 const RangeDatePicker = forwardRef(({ startDateOptions, endDateOptions, validationOption, onDateValidation, size = 'xs' }, ref) => {
     const getOverlapResult = useCallback((type) => {
         if (type === 'start' && moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate)) {
@@ -52,6 +56,9 @@ const RangeDatePicker = forwardRef(({ startDateOptions, endDateOptions, validati
         }
     }, [startDateOptions, endDateOptions, validationOption, onDateValidation, getOverlapResult, getSettingNewDate]);
     useEffect(() => {
+        if (!areBothDatesValid(startDateOptions.currentDate, endDateOptions.currentDate)) {
+            return;
+        }
         const isOverDate = moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
         if (isOverDate) {
             changeSettingDateAndAlert('start');
@@ -73,8 +80,18 @@ const RangeDatePicker = forwardRef(({ startDateOptions, endDateOptions, validati
         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]);
     useEffect(() => {
+        if (!areBothDatesValid(startDateOptions.currentDate, endDateOptions.currentDate)) {
+            return;
+        }
+        // 종료일이 '오늘'이면 종료측 검증을 건너뛴다: shopby 는 종료일=오늘이 정상 기본값이라
+        // (고도몰=어제) 이 상태를 에러로 잡지 않기 위함. (도입 d1bd8751)
         const isNotTodayEndDate = !moment(endDateOptions.currentDate).isSame(moment(), 'day');
         if (!validationOption?.setting || !isNotTodayEndDate) {
             return;
@@ -97,6 +114,11 @@ const RangeDatePicker = forwardRef(({ startDateOptions, endDateOptions, validati
         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 (_jsxs("div", { className: "ncua-range-date-picker", ref: ref || undefined, children: [_jsx(DatePicker, { ...startDateOptions, ref: undefined, size: size }), "~", _jsx(DatePicker, { isEndDate: true, ...endDateOptions, ref: undefined, size: size })] }));
 });

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

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

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

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

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

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

package/dist/temp/src/components/forms-and-input/range-date-picker-with-buttons/__tests__/RangeDatePickerWithButtons.test.d.ts

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

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

@@ -0,0 +1,42 @@
+// @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, vi } from 'vitest';
+import { RangeDatePickerWithButtons } from '../RangeDatePickerWithButtons';
+const mounted = [];
+function mount(props) {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+        root.render(createElement(RangeDatePickerWithButtons, props));
+    });
+    mounted.push({ root, container });
+    return container;
+}
+afterEach(() => {
+    for (const { root, container } of mounted.splice(0)) {
+        act(() => {
+            root.unmount();
+        });
+        container.remove();
+    }
+    vi.restoreAllMocks();
+});
+describe('#6 periodItems 에 없는 periodKey 방어', () => {
+    const baseProps = {
+        currentButtonId: 'NONE',
+        setCurrentButtonId: () => undefined,
+        startDateOptions: { currentDate: '2024-03-01', onChangeDate: () => undefined },
+        endDateOptions: { currentDate: '2024-03-05', onChangeDate: () => undefined },
+    };
+    it('periodKeys 에 periodItems 에 없는 키가 있어도 크래시하지 않고 유효한 버튼만 렌더한다', () => {
+        const container = mount({
+            ...baseProps,
+            periodKeys: ['TODAY', 'UNKNOWN_KEY'],
+        });
+        // 유효한 키(TODAY='오늘')는 렌더되고, 정의에 없는 키는 건너뛴다(크래시 없음)
+        expect(container.textContent).toContain('오늘');
+    });
+});

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

@@ -4,6 +4,9 @@ import { Slider as NcuaSlider } from '../../../../assets/scripts/slider';
 export const Slider = ({ min = 0, max = 100, step = 1, value = 0, onChange, labelPosition, disabled = false, className, }) => {
     const containerRef = useRef(null);
     const sliderInstanceRef = useRef(null);
+    // value 의 "타입"이 바뀔 때만(범위↔단일 등) 슬라이더를 재생성한다. valueType 으로 추출해
+    // 정적으로 드러낸다 — 96cf7b3a 에서 deps 를 [] → [typeof value, ...] 로 좁힌 의도.
+    const valueType = typeof value;
     useEffect(() => {
         if (!containerRef.current)
             return;
@@ -22,7 +25,10 @@ export const Slider = ({ min = 0, max = 100, step = 1, value = 0, onChange, labe
                 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]);
     useEffect(() => {
         if (sliderInstanceRef.current) {
             sliderInstanceRef.current.setValue(value);