@ncds/ui-admin 1.8.13 → 1.8.15

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/temp/src/utils/__tests__/date-picker.test.d.ts

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

package/dist/temp/src/utils/__tests__/date-picker.test.js

@@ -0,0 +1,26 @@
+import moment from 'moment';
+import { describe, expect, it } from 'vitest';
+import { convertToMomentFormat } from '../date-picker';
+describe('convertToMomentFormat', () => {
+    it('날짜 전용 포맷을 moment 토큰으로 변환한다 (기존 동작 보존)', () => {
+        expect(convertToMomentFormat('Y-m-d')).toBe('YYYY-MM-DD');
+    });
+    it('2자리 연도(y)를 YY로 변환한다', () => {
+        expect(convertToMomentFormat('y-m-d')).toBe('YY-MM-DD');
+    });
+    it('시간 포함 포맷의 H/i/S를 모두 변환한다 (버그 수정 지점)', () => {
+        expect(convertToMomentFormat('Y-m-d H:i')).toBe('YYYY-MM-DD HH:mm');
+        expect(convertToMomentFormat('Y-m-d H:i:S')).toBe('YYYY-MM-DD HH:mm:ss');
+    });
+    it('월(m)과 분(i)이 함께 있어도 서로 침범하지 않는다', () => {
+        // m -> MM(월) 먼저, i -> mm(분) 나중 순서가 지켜져야 함
+        expect(convertToMomentFormat('Y-m-d H:i')).not.toContain('i');
+        expect(convertToMomentFormat('Y-m-d H:i')).toBe('YYYY-MM-DD HH:mm');
+    });
+    it('실제 moment 출력이 의도한 문자열과 일치한다 (회귀 핵심)', () => {
+        const date = moment('2024-03-20 14:30:05', 'YYYY-MM-DD HH:mm:ss').toDate();
+        expect(moment(date).format(convertToMomentFormat('Y-m-d'))).toBe('2024-03-20');
+        expect(moment(date).format(convertToMomentFormat('Y-m-d H:i'))).toBe('2024-03-20 14:30');
+        expect(moment(date).format(convertToMomentFormat('Y-m-d H:i:S'))).toBe('2024-03-20 14:30:05');
+    });
+});

package/dist/temp/src/utils/date-picker.d.ts

@@ -6,6 +6,8 @@ export declare function getSubtractDate({ date, period, unit, }: {
     period: DurationInputArg1;
     unit: DurationInputArg2;
 }): Date;
+/** flatpickr dateFormat 토큰을 moment 포맷 토큰으로 변환 (단일 패스 치환으로 토큰 간 간섭 방지) */
+export declare const convertToMomentFormat: (format: string) => string;
 export declare const formatDateInput: (input: string) => string;
 export declare const formatHourInput: (input: string) => string;
 export declare const formatMinuteInput: (input: string) => string;

package/dist/temp/src/utils/date-picker.js

@@ -15,6 +15,19 @@ export function getToday() {
 export function getSubtractDate({ date = getToday(), period, unit, }) {
     return moment(date).subtract(period, unit).toDate();
 }
+/** flatpickr dateFormat 토큰을 moment 포맷 토큰으로 변환 (단일 패스 치환으로 토큰 간 간섭 방지) */
+export const convertToMomentFormat = (format) => {
+    const tokenMap = {
+        Y: 'YYYY',
+        y: 'YY',
+        m: 'MM',
+        d: 'DD',
+        H: 'HH',
+        i: 'mm',
+        S: 'ss',
+    };
+    return format.replace(/[YymdHiS]/g, (matched) => tokenMap[matched] || matched);
+};
 export const formatDateInput = (input) => {
     const dateRegex = /^(19|20)\d{2}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[0-1])$/;
     if (dateRegex.test(input)) {

package/dist/types/src/components/forms-and-input/date-picker/__tests__/DatePicker.memo.test.d.ts

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

package/dist/types/src/components/forms-and-input/date-picker/__tests__/DatePicker.test.d.ts

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

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/forms-and-input/select/Select.d.ts

@@ -7,6 +7,7 @@ export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, 'size
     disabledPlaceholder?: boolean;
     hintText?: string;
     destructive?: boolean;
+    readOnly?: boolean;
     size?: Extract<Size, 'xs' | 'sm' | 'md'>;
     optionItems?: OptionType[];
     register?: UseFormRegisterReturn;

package/dist/types/src/components/forms-and-input/select-box/SelectBox.d.ts

@@ -16,6 +16,7 @@ type SelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> &
     value?: OptionValue;
     onChange?: OptionChangeHandler;
     disabled?: boolean;
+    readOnly?: boolean;
     register?: UseFormRegisterReturn;
     maxHeight?: number;
     multiple?: boolean;

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/types/src/utils/__tests__/date-picker.test.d.ts

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

package/dist/types/src/utils/date-picker.d.ts

@@ -6,6 +6,8 @@ export declare function getSubtractDate({ date, period, unit, }: {
     period: DurationInputArg1;
     unit: DurationInputArg2;
 }): Date;
+/** flatpickr dateFormat 토큰을 moment 포맷 토큰으로 변환 (단일 패스 치환으로 토큰 간 간섭 방지) */
+export declare const convertToMomentFormat: (format: string) => string;
 export declare const formatDateInput: (input: string) => string;
 export declare const formatHourInput: (input: string) => string;
 export declare const formatMinuteInput: (input: string) => string;

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

@@ -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 {
@@ -3415,6 +3415,12 @@ button {
 .ncua-select__content:has(.ncua-select__tag:disabled) {
   border-color: var(--gray-200);
 }
+.ncua-select--readonly .ncua-select__tag {
+  pointer-events: none;
+  background-color: var(--gray-50);
+  color: var(--gray-700);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%23a4a5a8' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
 .ncua-select.destructive .ncua-select__content {
   border-color: var(--primary-red-600);
 }
@@ -3644,7 +3650,7 @@ button {
   cursor: pointer;
   transition: all 0.15s ease-in-out;
 }
-.ncua-selectbox__content:hover:not(.ncua-selectbox--disabled .ncua-selectbox__content) {
+.ncua-selectbox__content:hover:not(.ncua-selectbox--disabled .ncua-selectbox__content):not(.ncua-selectbox--readonly .ncua-selectbox__content) {
   border-color: var(--gray-300);
 }
 .ncua-selectbox__content:focus {
@@ -3727,6 +3733,16 @@ button {
 .ncua-selectbox--disabled .ncua-selectbox__arrow {
   color: var(--gray-300);
 }
+.ncua-selectbox--readonly .ncua-selectbox__content {
+  background-color: var(--gray-50);
+  cursor: default;
+}
+.ncua-selectbox--readonly .ncua-selectbox__value {
+  color: var(--gray-700);
+}
+.ncua-selectbox--readonly .ncua-selectbox__arrow {
+  color: var(--gray-300);
+}
 .ncua-selectbox.destructive .ncua-selectbox__content {
   border-color: var(--primary-red-600);
 }
@@ -3791,7 +3807,7 @@ button {
   border: 0;
   background-color: transparent;
 }
-.ncua-selectbox--simple .ncua-selectbox__content:hover:not(.ncua-selectbox--disabled .ncua-selectbox--simple .ncua-selectbox__content) {
+.ncua-selectbox--simple .ncua-selectbox__content:hover:not(.ncua-selectbox--disabled .ncua-selectbox--simple .ncua-selectbox__content):not(.ncua-selectbox--readonly .ncua-selectbox--simple .ncua-selectbox__content) {
   border-color: transparent;
 }
 .ncua-selectbox--simple .ncua-selectbox__content:focus {
@@ -5908,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);
@@ -6027,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);
@@ -6051,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;
 }
@@ -6062,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);
 }
@@ -7029,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.13",
+  "version": "1.8.15",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -105,6 +105,7 @@
     "eslint-config-react-app": "7.0.1",
     "file-loader": "6.2.0",
     "html-webpack-plugin": "5.6.6",
+    "jsdom": "26.1.0",
     "mini-css-extract-plugin": "2.10.1",
     "prop-types": "15.8.1",
     "react": "18.2.0",