@ncds/ui-admin 1.8.14 → 1.8.16

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

@@ -16,6 +16,13 @@ export const Pagination = ({ className = '', totalCount, itemCountPerPage = 10,
         }
     };
     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);
         }
@@ -30,10 +37,13 @@ export const Pagination = ({ className = '', totalCount, itemCountPerPage = 10,
             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, { children: [NavButton({
                         type: 'first',
                         breakPoint,

package/dist/temp/src/components/navigation/pagination/__tests__/Pagination.test.d.ts

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

package/dist/temp/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(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/temp/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)와 동일한 상수
@@ -72,13 +73,25 @@ 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));
-    return { top: Math.round(top), left: Math.round(left), calculatedPosition };
+    // 경계 보정으로 패널이 앵커 중심에서 밀렸을 때도 화살표(::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 };
 };
 const buildPanelStyle = (disablePortal, coords, visible, zIndex) => {
     const opacity = visible ? 1 : 0;
     if (disablePortal)
         return { opacity };
-    return { top: `${coords.top}px`, left: `${coords.left}px`, opacity, ...(zIndex && { zIndex }) };
+    return {
+        top: `${coords.top}px`,
+        left: `${coords.left}px`,
+        opacity,
+        ...(coords.arrowX !== null && { '--ncua-tooltip-arrow-x': `${coords.arrowX}px` }),
+        ...(zIndex && { zIndex }),
+    };
 };
 const renderIcon = (iconStyle, iconType, iconSize, iconColor) => {
     if (iconStyle === 'help-circle') {
@@ -92,7 +105,11 @@ export const Tooltip = ({ tooltipType = 'white', iconType = 'stroke', position =
     const panelRef = useRef(null);
     const rafIdRef = useRef(null);
     const [mounted, setMounted] = useState(false);
-    const [coords, setCoords] = useState({ top: OFFSCREEN, left: OFFSCREEN });
+    const [coords, setCoords] = useState({
+        top: OFFSCREEN,
+        left: OFFSCREEN,
+        arrowX: null,
+    });
     const [calculatedPosition, setCalculatedPosition] = useState(position === 'auto' ? 'bottom' : position);
     const [isVisible, setIsVisible] = useState(false);
     const [isManuallyClose, setIsManuallyClose] = useState(false);
@@ -112,7 +129,7 @@ export const Tooltip = ({ tooltipType = 'white', iconType = 'stroke', position =
         const anchor = anchorRef.current.getBoundingClientRect();
         const panel = panelRef.current.getBoundingClientRect();
         const next = computePanelCoords(position, anchor, panel);
-        setCoords({ top: next.top, left: next.left });
+        setCoords({ top: next.top, left: next.left, arrowX: next.arrowX });
         setCalculatedPosition(next.calculatedPosition);
     }, [position, disablePortal]);
     useEffect(() => {

package/dist/temp/src/components/overlays/tooltip/__tests__/utils.test.d.ts

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

package/dist/temp/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/temp/src/components/overlays/tooltip/utils.d.ts

@@ -0,0 +1,9 @@
+export declare const ARROW_EDGE_MARGIN = 12;
+/**
+ * top/bottom 툴팁 화살표(::after)의 패널 내 X 오프셋.
+ * 패널이 viewport 경계 보정으로 앵커 중심에서 밀려도 화살표는 앵커를 가리키도록,
+ * 클램핑된 패널 left 기준으로 앵커 중심까지의 거리를 계산한다.
+ * 앵커가 패널 밖에 있으면 패널 모서리 여백까지만 이동한다.
+ * React(Tooltip.tsx)와 HTML 구현체(assets/scripts/tooltip)가 공유한다.
+ */
+export declare function calculateArrowOffsetX(anchorCenterX: number, panelLeft: number, panelWidth: number): number;

package/dist/temp/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/temp/src/hooks/index.d.ts

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

package/dist/temp/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/temp/src/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

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

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

package/dist/temp/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/types/src/components/forms-and-input/range-date-picker/__tests__/RangeDatePicker.test.d.ts

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

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

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

package/dist/types/src/components/navigation/pagination/__tests__/Pagination.test.d.ts

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

package/dist/types/src/components/overlays/tooltip/__tests__/utils.test.d.ts

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

package/dist/types/src/components/overlays/tooltip/utils.d.ts

@@ -0,0 +1,9 @@
+export declare const ARROW_EDGE_MARGIN = 12;
+/**
+ * top/bottom 툴팁 화살표(::after)의 패널 내 X 오프셋.
+ * 패널이 viewport 경계 보정으로 앵커 중심에서 밀려도 화살표는 앵커를 가리키도록,
+ * 클램핑된 패널 left 기준으로 앵커 중심까지의 거리를 계산한다.
+ * 앵커가 패널 밖에 있으면 패널 모서리 여백까지만 이동한다.
+ * React(Tooltip.tsx)와 HTML 구현체(assets/scripts/tooltip)가 공유한다.
+ */
+export declare function calculateArrowOffsetX(anchorCenterX: number, panelLeft: number, panelWidth: number): number;

package/dist/types/src/hooks/index.d.ts

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

package/dist/types/src/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/ui-admin/assets/styles/style.css

@@ -29,7 +29,7 @@
   --green-600: #087443;
   --green-700: #095c37;
   --blue-50: #f5faff;
-  --blue-100: #d1e9ff;
+  --blue-100: #e0efff;
   --blue-200: #b2ddff;
   --blue-300: #84caff;
   --blue-400: #53b1fd;
@@ -3202,7 +3202,7 @@ button {
   transform: translateX(50%);
 }
 .ncua-tooltip__bg--top::after {
-  left: 50%;
+  left: var(--ncua-tooltip-arrow-x, 50%);
   transform: translateX(-50%);
 }
 .ncua-tooltip__bg--top-left {
@@ -3248,7 +3248,7 @@ button {
   transform: translateX(50%);
 }
 .ncua-tooltip__bg--bottom::after {
-  left: 50%;
+  left: var(--ncua-tooltip-arrow-x, 50%);
   transform: translateX(-50%);
 }
 .ncua-tooltip__bg--bottom-left {
@@ -5924,19 +5924,12 @@ button {
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: var(--z-index-sticky);
+  margin: 0 !important;
 }
 .ncua-image-file-input__empty-slot-wrapper .ncua-tooltip svg {
   opacity: 0;
   cursor: pointer;
 }
-.ncua-image-file-input__empty-slot-wrapper .ncua-tooltip .ncua-tooltip__bg {
-  left: 50%;
-  right: auto;
-  transform: translateX(-50%);
-  width: max-content;
-  max-width: 320px;
-  white-space: nowrap;
-}
 .ncua-image-file-input__preview-container {
   position: relative;
   border: 1px dashed var(--gray-200);
@@ -6043,10 +6036,6 @@ button {
 .ncua-image-file-input--xs .ncua-image-file-input__preview-container:not(:has(.ncua-image-file-input__preview-image))[disabled], .ncua-image-file-input--xs .ncua-image-file-input__preview-container:not(:has(.ncua-image-file-input__preview-image)).is-disable {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 4.16669V15.8334M4.16669 10H15.8334' stroke='%23d3d4d8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 }
-.ncua-image-file-input--xs .ncua-image-file-input__empty-slot-wrapper .ncua-tooltip .ncua-tooltip__bg {
-  top: auto;
-  bottom: -20px;
-}
 .ncua-image-file-input--sm {
   font-size: var(--font-size-sm);
   line-height: var(--line-heights-sm);
@@ -6067,10 +6056,6 @@ button {
 .ncua-image-file-input--sm .ncua-image-file-input__preview-container:not(:has(.ncua-image-file-input__preview-image))[disabled], .ncua-image-file-input--sm .ncua-image-file-input__preview-container:not(:has(.ncua-image-file-input__preview-image)).is-disable {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 4.16669V15.8334M4.16669 10H15.8334' stroke='%23d3d4d8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 }
-.ncua-image-file-input--sm .ncua-image-file-input__empty-slot-wrapper .ncua-tooltip .ncua-tooltip__bg {
-  top: auto;
-  bottom: -16px;
-}
 .ncua-image-file-input--xs .ncua-file-input {
   gap: 8px;
 }
@@ -6078,6 +6063,10 @@ button {
   gap: 16px;
 }
 
+.ncua-tooltip-panel.ncua-tooltip__bg.ncua-image-file-input__slot-tooltip {
+  pointer-events: none;
+}
+
 .ncua-tooltip-panel.ncua-image-file-input__slot-tooltip--xs {
   transform: translateY(-19px);
 }
@@ -7045,11 +7034,18 @@ button {
   color: var(--primary-red-600);
   font-weight: 400;
 }
+.ncua-sub-title--middle {
+  gap: 2px;
+}
 .ncua-sub-title--middle .ncua-sub-title__title {
   font-size: var(--font-size-md);
-  font-weight: 500;
+  font-weight: var(--font-weights-commerce-sans-1);
   line-height: var(--line-heights-md);
 }
+.ncua-sub-title--middle .ncua-sub-title__description {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
 .ncua-sub-title--sm .ncua-sub-title__title-area {
   gap: 6px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.14",
+  "version": "1.8.16",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",