@ncds/ui-admin 1.8.14 → 1.8.16

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/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/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);

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

@@ -33,6 +33,13 @@ const Pagination = _ref => {
     }
   };
   (0, _react.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);
     }
@@ -47,10 +54,13 @@ 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 (0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)('ncua-pagination', `ncua-pagination--${breakPoint}`, className),
     children: [showJumpPageButton && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

package/dist/cjs/src/components/navigation/pagination/__tests__/Pagination.test.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _Pagination = require("../Pagination");
+// @vitest-environment jsdom
+
+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 = (0, _client.createRoot)(container);
+  }
+  (0, _testUtils.act)(() => {
+    root?.render(/*#__PURE__*/(0, _react.createElement)(_Pagination.Pagination, props));
+  });
+  return container;
+}
+(0, _vitest.afterEach)(() => {
+  if (root && container) {
+    (0, _testUtils.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));
+(0, _vitest.describe)('#332 Pagination — totalPage 축소 시 start 보정', () => {
+  (0, _vitest.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
+    });
+    (0, _vitest.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)를 넘는 버튼은 없어야 한다
+    (0, _vitest.expect)(nums[0]).toBe(GROUP_START_50_PAGES);
+    (0, _vitest.expect)(Math.max(...nums)).toBeLessThanOrEqual(LAST_PAGE_50);
+  });
+});

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

@@ -10,6 +10,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _reactDom = require("react-dom");
 var _ButtonCloseX = require("../../action/button/ButtonCloseX");
+var _utils = require("./utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ICON_SIZE_SM = 14;
 const ICON_SIZE_DEFAULT = 16;
@@ -71,9 +72,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 = (0, _utils.calculateArrowOffsetX)(anchor.left + anchor.width / 2, left, panel.width);
+  }
   return {
     top: Math.round(top),
     left: Math.round(left),
+    arrowX,
     calculatedPosition
   };
 };
@@ -86,6 +94,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
     })
@@ -138,7 +149,8 @@ const Tooltip = _ref => {
   const [mounted, setMounted] = (0, _react.useState)(false);
   const [coords, setCoords] = (0, _react.useState)({
     top: OFFSCREEN,
-    left: OFFSCREEN
+    left: OFFSCREEN,
+    arrowX: null
   });
   const [calculatedPosition, setCalculatedPosition] = (0, _react.useState)(position === 'auto' ? 'bottom' : position);
   const [isVisible, setIsVisible] = (0, _react.useState)(false);
@@ -160,7 +172,8 @@ 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/cjs/src/components/overlays/tooltip/__tests__/utils.test.js

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

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ARROW_EDGE_MARGIN = void 0;
+exports.calculateArrowOffsetX = calculateArrowOffsetX;
+// 화살표가 패널 모서리(border-radius 6px + 화살표 반너비 6px) 안쪽으로 파고들지 않기 위한 최소 여백
+const ARROW_EDGE_MARGIN = exports.ARROW_EDGE_MARGIN = 12;
+/**
+ * top/bottom 툴팁 화살표(::after)의 패널 내 X 오프셋.
+ * 패널이 viewport 경계 보정으로 앵커 중심에서 밀려도 화살표는 앵커를 가리키도록,
+ * 클램핑된 패널 left 기준으로 앵커 중심까지의 거리를 계산한다.
+ * 앵커가 패널 밖에 있으면 패널 모서리 여백까지만 이동한다.
+ * React(Tooltip.tsx)와 HTML 구현체(assets/scripts/tooltip)가 공유한다.
+ */
+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/cjs/src/hooks/index.js

@@ -36,6 +36,17 @@ Object.keys(_useFloatingPosition).forEach(function (key) {
     }
   });
 });
+var _useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect");
+Object.keys(_useIsomorphicLayoutEffect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useIsomorphicLayoutEffect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useIsomorphicLayoutEffect[key];
+    }
+  });
+});
 var _useMediaQuery = require("./useMediaQuery");
 Object.keys(_useMediaQuery).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsomorphicLayoutEffect = void 0;
+var _react = require("react");
+const useIsomorphicLayoutEffect = exports.useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;

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

@@ -20,6 +20,9 @@ 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/esm/src/components/forms-and-input/checkbox/CheckboxInput.js

@@ -1,6 +1,7 @@
 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 = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     size = 'xs',
@@ -12,10 +13,10 @@ export const CheckboxInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...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", {

package/dist/esm/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 = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     startDateOptions,
@@ -72,6 +76,9 @@ const RangeDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   }, [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');
@@ -95,8 +102,18 @@ const RangeDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     } 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;
@@ -121,6 +138,11 @@ const RangeDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     } 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",