@ncds/ui-admin 1.8.7 → 1.8.9

package/dist/cjs/src/components/data-display/table/Table.js

@@ -281,8 +281,10 @@ const TableComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref0, ref) => {
     handleThumbMouseDown
   } = (0, _useTableScrollbars.useTableVerticalScrollbar)({
     enabled: fixedScrollEnabled,
+    layoutKey: horizontalScroll,
     scrollContainerRef,
     scrollAreaRef,
+    scrollbarRef,
     thumbRef
   });
   const {

package/dist/cjs/src/components/data-display/table/useTableScrollbars.js

@@ -72,10 +72,13 @@ const startDrag = (e, options) => {
 const useTableVerticalScrollbar = _ref => {
   let {
     enabled,
+    layoutKey,
     scrollContainerRef,
     scrollAreaRef,
+    scrollbarRef,
     thumbRef
   } = _ref;
+  // biome-ignore lint/correctness/useExhaustiveDependencies: layoutKey는 직접 참조하지 않지만 horizontalScroll 토글로 스크롤바 DOM이 리마운트될 때 effect를 재바인딩하기 위한 트리거로 의도적으로 포함한다.
   (0, _react.useEffect)(() => {
     if (!enabled) return;
     const scrollEl = scrollContainerRef.current;
@@ -91,7 +94,7 @@ const useTableVerticalScrollbar = _ref => {
         thumbEl.style.height = '0';
         return;
       }
-      const trackHeight = (scrollAreaRef.current?.clientHeight ?? clientHeight) - TABLE_HEADER_HEIGHT - SCROLLBAR_TRACK_OFFSET;
+      const trackHeight = scrollbarRef.current?.clientHeight || (scrollAreaRef.current?.clientHeight ?? clientHeight) - TABLE_HEADER_HEIGHT - SCROLLBAR_TRACK_OFFSET;
       const thumbHeight = Math.max(SCROLLBAR_THUMB_MIN_HEIGHT, clientHeight / scrollHeight * trackHeight);
       const thumbTop = scrollTop / (scrollHeight - clientHeight) * (trackHeight - thumbHeight);
       thumbEl.style.height = `${thumbHeight}px`;
@@ -103,12 +106,13 @@ const useTableVerticalScrollbar = _ref => {
     const observer = new ResizeObserver(update);
     observer.observe(scrollEl);
     if (scrollAreaRef.current) observer.observe(scrollAreaRef.current);
+    if (scrollbarRef.current) observer.observe(scrollbarRef.current);
     update();
     return () => {
       scrollEl.removeEventListener('scroll', update);
       observer.disconnect();
     };
-  }, [enabled, scrollContainerRef, scrollAreaRef, thumbRef]);
+  }, [enabled, layoutKey, scrollContainerRef, scrollAreaRef, scrollbarRef, thumbRef]);
   const handleThumbMouseDown = e => {
     const scrollEl = scrollContainerRef.current;
     const thumbEl = thumbRef.current;

package/dist/cjs/src/components/feedback-and-status/badge/Badge.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Badge = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("./utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -12,6 +13,11 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * 뱃지 컴포넌트의 아이콘은 디자인 시스템에서 12px 고정으로 정의되어 있습니다.
  */
 const BADGE_ICON_SIZE = 12;
+/** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
+const NEW_BADGE_ICON_SIZE = {
+  sm: 12,
+  md: 16
+};
 const Badge = _ref => {
   let {
     label,
@@ -22,6 +28,19 @@ const Badge = _ref => {
     trailingIcon,
     size = 'xs'
   } = _ref;
+  // new-badge: 신규 콘텐츠 'N' 마크 전용 타입. label·color·leadingIcon·trailingIcon은 무시되고
+  // 색은 --pink-600 으로 고정된다. (디자이너 명세: Icon/FeaturedIcon/Badge로 대체 불가한 전용 표시)
+  if (type === 'new-badge') {
+    const newBadgeSize = size === 'md' ? 'md' : 'sm';
+    const iconSize = NEW_BADGE_ICON_SIZE[newBadgeSize];
+    return (0, _jsxRuntime.jsx)("span", {
+      className: (0, _classnames.default)('ncua-badge', 'ncua-badge--new-badge', `ncua-badge--new-badge-${newBadgeSize}`, className),
+      children: (0, _jsxRuntime.jsx)(_uiAdminIcon.New, {
+        width: iconSize,
+        height: iconSize
+      })
+    });
+  }
   return (0, _jsxRuntime.jsxs)("span", {
     className: (0, _classnames.default)('ncua-badge', `ncua-badge--${type}`, `ncua-badge--${color}`, `ncua-badge--${size}`, className),
     children: [leadingIcon && (0, _utils.sideSlotRender)({

package/dist/cjs/src/components/forms-and-input/combo-box/ComboBox.js

@@ -50,6 +50,7 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
     showFooterButtons = false,
     maxSelection,
     onEdit,
+    onComplete,
     ...props
   } = _ref;
   const internalRef = (0, _react.useRef)(null);
@@ -183,12 +184,13 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
   const handleEdit = () => {
     onEdit?.();
   };
-  const handleComplete = () => {
+  const handleComplete = completedValue => {
     if (!multiple) return;
     const tags = getSelectedTagsData();
     setSelectedTags(tags);
     setInputValue('');
     closeDropdown();
+    onComplete?.(completedValue);
   };
   const handleRemoveTag = tagId => {
     if (!onChange) return;

package/dist/cjs/src/components/forms-and-input/image-file-input/ImageFileInput.js

@@ -14,6 +14,20 @@ var _shared = require("../../shared");
 var _FileInput = require("../file-input/FileInput");
 var _ImagePreview = require("./components/ImagePreview");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const toInvalidFile = (file, errorType) => ({
+  name: file.name,
+  size: file.size,
+  type: file.type,
+  lastModified: file.lastModified,
+  webkitRelativePath: file.webkitRelativePath,
+  arrayBuffer: () => file.arrayBuffer(),
+  stream: () => file.stream(),
+  text: () => file.text(),
+  slice: function () {
+    return file.slice(...arguments);
+  },
+  errorType
+});
 const ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     size = 'sm',
@@ -81,25 +95,16 @@ const ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardR
     const invalidFiles = [];
     for (const file of fileList) {
       if (files.some(f => f.name === file.name && f.size === file.size)) {
-        invalidFiles.push({
-          ...file,
-          errorType: _FileInput.FileInputErrorType.ALREADY_UPLOADED
-        });
+        invalidFiles.push(toInvalidFile(file, _FileInput.FileInputErrorType.ALREADY_UPLOADED));
         continue;
       }
       if (!!maxFileSize && file.size > maxFileSize) {
-        invalidFiles.push({
-          ...file,
-          errorType: _FileInput.FileInputErrorType.EXCEED_MAX_FILE_SIZE
-        });
+        invalidFiles.push(toInvalidFile(file, _FileInput.FileInputErrorType.EXCEED_MAX_FILE_SIZE));
         continue;
       }
       // Skip max count check if maxFileCount is 1 (allow replacement)
       if (!!maxFileCount && maxFileCount !== 1 && files.length + validFiles.length >= maxFileCount) {
-        invalidFiles.push({
-          ...file,
-          errorType: _FileInput.FileInputErrorType.EXCEED_MAX_FILE_COUNT
-        });
+        invalidFiles.push(toInvalidFile(file, _FileInput.FileInputErrorType.EXCEED_MAX_FILE_COUNT));
         continue;
       }
       validFiles.push(file);
@@ -144,7 +149,7 @@ const ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardR
           position: "bottom",
           tooltipType: "black",
           forceVisible: isButtonHovered && !disabled,
-          disablePortal: true
+          panelClassName: (0, _classnames.default)('ncua-image-file-input__slot-tooltip', `ncua-image-file-input__slot-tooltip--${size}`)
         })]
       })]
     });
@@ -163,19 +168,19 @@ const ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardR
     className: (0, _classnames.default)('ncua-image-file-input', `ncua-image-file-input--${size}`, {
       destructive: destructive
     }),
-    children: [renderImagePreview(files), showFileInput && (0, _jsxRuntime.jsxs)("div", {
+    children: [renderImagePreview(files), (0, _jsxRuntime.jsx)("input", {
+      hidden: true,
+      ref: fileInputRef,
+      type: "file",
+      accept: accept,
+      multiple: multiple,
+      onChange: handleFileChange,
+      tabIndex: -1,
+      "aria-hidden": "true",
+      ...props
+    }), showFileInput && (0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)('ncua-file-input', `ncua-file-input--${size}`),
-      children: [(0, _jsxRuntime.jsx)("input", {
-        hidden: true,
-        ref: fileInputRef,
-        type: "file",
-        accept: accept,
-        multiple: multiple,
-        onChange: handleFileChange,
-        tabIndex: -1,
-        "aria-hidden": "true",
-        ...props
-      }), (0, _jsxRuntime.jsxs)("div", {
+      children: [(0, _jsxRuntime.jsxs)("div", {
         className: "ncua-file-input__input-container",
         children: [(0, _jsxRuntime.jsxs)("div", {
           className: "ncua-file-input__label",

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

@@ -89,6 +89,7 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
     register,
     onChange,
     onEdit,
+    onComplete,
     ...props
   } = _ref2;
   const internalRef = (0, _react.useRef)(null);
@@ -173,10 +174,11 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
   const handleEdit = () => {
     onEdit?.();
   };
-  const handleComplete = () => {
+  const handleComplete = completedValue => {
     if (multiple) {
       const tags = getSelectedTagsData();
       setSelectedTags(tags);
+      onComplete?.(completedValue);
     }
     closeDropdown();
   };

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

@@ -128,7 +128,8 @@ const Tooltip = _ref => {
     className,
     zIndex,
     forceVisible,
-    disablePortal = false
+    disablePortal = false,
+    panelClassName
   } = _ref;
   const iconSize = size === 'sm' ? ICON_SIZE_SM : ICON_SIZE_DEFAULT;
   const anchorRef = (0, _react.useRef)(null);
@@ -206,17 +207,17 @@ const Tooltip = _ref => {
     'ncua-tooltip--stroke': iconType === 'stroke',
     'ncua-tooltip--auto': position === 'auto'
   }, className), [size, type, hideArrow, iconType, position, className]);
-  const panelClassName = (0, _react.useMemo)(() => (0, _classnames.default)({
+  const panelClasses = (0, _react.useMemo)(() => (0, _classnames.default)({
     'ncua-tooltip-panel': !disablePortal
   }, 'ncua-tooltip__bg', `ncua-tooltip__bg--${tooltipType}`, `ncua-tooltip__bg--${finalPosition}`, {
     'ncua-tooltip__bg--visible': effectiveVisible,
     'ncua-tooltip__bg--force-hidden': isManuallyClose && !forceVisible
-  }), [tooltipType, finalPosition, effectiveVisible, isManuallyClose, forceVisible, disablePortal]);
+  }, panelClassName), [tooltipType, finalPosition, effectiveVisible, isManuallyClose, forceVisible, disablePortal, panelClassName]);
   const panelStyle = buildPanelStyle(disablePortal, coords, effectiveVisible, zIndex);
   const portalTarget = mounted ? resolvePortalTarget() : null;
   const panel = (0, _jsxRuntime.jsxs)("span", {
     ref: panelRef,
-    className: panelClassName,
+    className: panelClasses,
     style: panelStyle,
     children: [title && (0, _jsxRuntime.jsx)("span", {
       className: "ncua-tooltip__title",

package/dist/cjs/src/components/select-dropdown/SelectDropdown.js

@@ -111,7 +111,7 @@ const SelectDropdown = exports.SelectDropdown = /*#__PURE__*/(0, _react.forwardR
             label: "\uC120\uD0DD \uC644\uB8CC",
             hierarchy: "secondary",
             size: "xs",
-            onClick: onComplete
+            onClick: () => onComplete?.(value ?? [])
           })]
         })]
       })

package/dist/esm/src/components/data-display/table/Table.js

@@ -274,8 +274,10 @@ const TableComponent = /*#__PURE__*/forwardRef((_ref0, ref) => {
     handleThumbMouseDown
   } = useTableVerticalScrollbar({
     enabled: fixedScrollEnabled,
+    layoutKey: horizontalScroll,
     scrollContainerRef,
     scrollAreaRef,
+    scrollbarRef,
     thumbRef
   });
   const {

package/dist/esm/src/components/data-display/table/useTableScrollbars.js

@@ -66,10 +66,13 @@ const startDrag = (e, options) => {
 export const useTableVerticalScrollbar = _ref => {
   let {
     enabled,
+    layoutKey,
     scrollContainerRef,
     scrollAreaRef,
+    scrollbarRef,
     thumbRef
   } = _ref;
+  // biome-ignore lint/correctness/useExhaustiveDependencies: layoutKey는 직접 참조하지 않지만 horizontalScroll 토글로 스크롤바 DOM이 리마운트될 때 effect를 재바인딩하기 위한 트리거로 의도적으로 포함한다.
   useEffect(() => {
     if (!enabled) return;
     const scrollEl = scrollContainerRef.current;
@@ -85,7 +88,7 @@ export const useTableVerticalScrollbar = _ref => {
         thumbEl.style.height = '0';
         return;
       }
-      const trackHeight = (scrollAreaRef.current?.clientHeight ?? clientHeight) - TABLE_HEADER_HEIGHT - SCROLLBAR_TRACK_OFFSET;
+      const trackHeight = scrollbarRef.current?.clientHeight || (scrollAreaRef.current?.clientHeight ?? clientHeight) - TABLE_HEADER_HEIGHT - SCROLLBAR_TRACK_OFFSET;
       const thumbHeight = Math.max(SCROLLBAR_THUMB_MIN_HEIGHT, clientHeight / scrollHeight * trackHeight);
       const thumbTop = scrollTop / (scrollHeight - clientHeight) * (trackHeight - thumbHeight);
       thumbEl.style.height = `${thumbHeight}px`;
@@ -97,12 +100,13 @@ export const useTableVerticalScrollbar = _ref => {
     const observer = new ResizeObserver(update);
     observer.observe(scrollEl);
     if (scrollAreaRef.current) observer.observe(scrollAreaRef.current);
+    if (scrollbarRef.current) observer.observe(scrollbarRef.current);
     update();
     return () => {
       scrollEl.removeEventListener('scroll', update);
       observer.disconnect();
     };
-  }, [enabled, scrollContainerRef, scrollAreaRef, thumbRef]);
+  }, [enabled, layoutKey, scrollContainerRef, scrollAreaRef, scrollbarRef, thumbRef]);
   const handleThumbMouseDown = e => {
     const scrollEl = scrollContainerRef.current;
     const thumbEl = thumbRef.current;

package/dist/esm/src/components/feedback-and-status/badge/Badge.js

@@ -1,10 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { New } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { sideSlotRender } from './utils';
 /**
  * 뱃지 컴포넌트의 아이콘은 디자인 시스템에서 12px 고정으로 정의되어 있습니다.
  */
 const BADGE_ICON_SIZE = 12;
+/** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
+const NEW_BADGE_ICON_SIZE = {
+  sm: 12,
+  md: 16
+};
 const Badge = _ref => {
   let {
     label,
@@ -15,6 +21,19 @@ const Badge = _ref => {
     trailingIcon,
     size = 'xs'
   } = _ref;
+  // new-badge: 신규 콘텐츠 'N' 마크 전용 타입. label·color·leadingIcon·trailingIcon은 무시되고
+  // 색은 --pink-600 으로 고정된다. (디자이너 명세: Icon/FeaturedIcon/Badge로 대체 불가한 전용 표시)
+  if (type === 'new-badge') {
+    const newBadgeSize = size === 'md' ? 'md' : 'sm';
+    const iconSize = NEW_BADGE_ICON_SIZE[newBadgeSize];
+    return _jsx("span", {
+      className: classNames('ncua-badge', 'ncua-badge--new-badge', `ncua-badge--new-badge-${newBadgeSize}`, className),
+      children: _jsx(New, {
+        width: iconSize,
+        height: iconSize
+      })
+    });
+  }
   return _jsxs("span", {
     className: classNames('ncua-badge', `ncua-badge--${type}`, `ncua-badge--${color}`, `ncua-badge--${size}`, className),
     children: [leadingIcon && sideSlotRender({

package/dist/esm/src/components/forms-and-input/combo-box/ComboBox.js

@@ -43,6 +43,7 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
     showFooterButtons = false,
     maxSelection,
     onEdit,
+    onComplete,
     ...props
   } = _ref;
   const internalRef = useRef(null);
@@ -176,12 +177,13 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
   const handleEdit = () => {
     onEdit?.();
   };
-  const handleComplete = () => {
+  const handleComplete = completedValue => {
     if (!multiple) return;
     const tags = getSelectedTagsData();
     setSelectedTags(tags);
     setInputValue('');
     closeDropdown();
+    onComplete?.(completedValue);
   };
   const handleRemoveTag = tagId => {
     if (!onChange) return;

package/dist/esm/src/components/forms-and-input/image-file-input/ImageFileInput.js

@@ -7,6 +7,20 @@ import { Tooltip } from '../../overlays/tooltip';
 import { HintText, Label } from '../../shared';
 import { FileInputErrorType as ImageFileInputErrorType } from '../file-input/FileInput';
 import { ImagePreview } from './components/ImagePreview';
+const toInvalidFile = (file, errorType) => ({
+  name: file.name,
+  size: file.size,
+  type: file.type,
+  lastModified: file.lastModified,
+  webkitRelativePath: file.webkitRelativePath,
+  arrayBuffer: () => file.arrayBuffer(),
+  stream: () => file.stream(),
+  text: () => file.text(),
+  slice: function () {
+    return file.slice(...arguments);
+  },
+  errorType
+});
 export const ImageFileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     size = 'sm',
@@ -74,25 +88,16 @@ export const ImageFileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     const invalidFiles = [];
     for (const file of fileList) {
       if (files.some(f => f.name === file.name && f.size === file.size)) {
-        invalidFiles.push({
-          ...file,
-          errorType: ImageFileInputErrorType.ALREADY_UPLOADED
-        });
+        invalidFiles.push(toInvalidFile(file, ImageFileInputErrorType.ALREADY_UPLOADED));
         continue;
       }
       if (!!maxFileSize && file.size > maxFileSize) {
-        invalidFiles.push({
-          ...file,
-          errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE
-        });
+        invalidFiles.push(toInvalidFile(file, ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE));
         continue;
       }
       // Skip max count check if maxFileCount is 1 (allow replacement)
       if (!!maxFileCount && maxFileCount !== 1 && files.length + validFiles.length >= maxFileCount) {
-        invalidFiles.push({
-          ...file,
-          errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT
-        });
+        invalidFiles.push(toInvalidFile(file, ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT));
         continue;
       }
       validFiles.push(file);
@@ -137,7 +142,7 @@ export const ImageFileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
           position: "bottom",
           tooltipType: "black",
           forceVisible: isButtonHovered && !disabled,
-          disablePortal: true
+          panelClassName: classNames('ncua-image-file-input__slot-tooltip', `ncua-image-file-input__slot-tooltip--${size}`)
         })]
       })]
     });
@@ -156,19 +161,19 @@ export const ImageFileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     className: classNames('ncua-image-file-input', `ncua-image-file-input--${size}`, {
       destructive: destructive
     }),
-    children: [renderImagePreview(files), showFileInput && _jsxs("div", {
+    children: [renderImagePreview(files), _jsx("input", {
+      hidden: true,
+      ref: fileInputRef,
+      type: "file",
+      accept: accept,
+      multiple: multiple,
+      onChange: handleFileChange,
+      tabIndex: -1,
+      "aria-hidden": "true",
+      ...props
+    }), showFileInput && _jsxs("div", {
       className: classNames('ncua-file-input', `ncua-file-input--${size}`),
-      children: [_jsx("input", {
-        hidden: true,
-        ref: fileInputRef,
-        type: "file",
-        accept: accept,
-        multiple: multiple,
-        onChange: handleFileChange,
-        tabIndex: -1,
-        "aria-hidden": "true",
-        ...props
-      }), _jsxs("div", {
+      children: [_jsxs("div", {
         className: "ncua-file-input__input-container",
         children: [_jsxs("div", {
           className: "ncua-file-input__label",

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

@@ -82,6 +82,7 @@ const SelectBox = /*#__PURE__*/forwardRef((_ref2, ref
     register,
     onChange,
     onEdit,
+    onComplete,
     ...props
   } = _ref2;
   const internalRef = useRef(null);
@@ -166,10 +167,11 @@ const SelectBox = /*#__PURE__*/forwardRef((_ref2, ref
   const handleEdit = () => {
     onEdit?.();
   };
-  const handleComplete = () => {
+  const handleComplete = completedValue => {
     if (multiple) {
       const tags = getSelectedTagsData();
       setSelectedTags(tags);
+      onComplete?.(completedValue);
     }
     closeDropdown();
   };

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

@@ -121,7 +121,8 @@ export const Tooltip = _ref => {
     className,
     zIndex,
     forceVisible,
-    disablePortal = false
+    disablePortal = false,
+    panelClassName
   } = _ref;
   const iconSize = size === 'sm' ? ICON_SIZE_SM : ICON_SIZE_DEFAULT;
   const anchorRef = useRef(null);
@@ -199,17 +200,17 @@ export const Tooltip = _ref => {
     'ncua-tooltip--stroke': iconType === 'stroke',
     'ncua-tooltip--auto': position === 'auto'
   }, className), [size, type, hideArrow, iconType, position, className]);
-  const panelClassName = useMemo(() => classNames({
+  const panelClasses = useMemo(() => classNames({
     'ncua-tooltip-panel': !disablePortal
   }, 'ncua-tooltip__bg', `ncua-tooltip__bg--${tooltipType}`, `ncua-tooltip__bg--${finalPosition}`, {
     'ncua-tooltip__bg--visible': effectiveVisible,
     'ncua-tooltip__bg--force-hidden': isManuallyClose && !forceVisible
-  }), [tooltipType, finalPosition, effectiveVisible, isManuallyClose, forceVisible, disablePortal]);
+  }, panelClassName), [tooltipType, finalPosition, effectiveVisible, isManuallyClose, forceVisible, disablePortal, panelClassName]);
   const panelStyle = buildPanelStyle(disablePortal, coords, effectiveVisible, zIndex);
   const portalTarget = mounted ? resolvePortalTarget() : null;
   const panel = _jsxs("span", {
     ref: panelRef,
-    className: panelClassName,
+    className: panelClasses,
     style: panelStyle,
     children: [title && _jsx("span", {
       className: "ncua-tooltip__title",

package/dist/esm/src/components/select-dropdown/SelectDropdown.js

@@ -104,7 +104,7 @@ const SelectDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
             label: "\uC120\uD0DD \uC644\uB8CC",
             hierarchy: "secondary",
             size: "xs",
-            onClick: onComplete
+            onClick: () => onComplete?.(value ?? [])
           })]
         })]
       })

package/dist/temp/src/components/data-display/table/Table.js

@@ -136,8 +136,10 @@ const TableComponent = forwardRef(({ type = 'horizontal', fixedHeader = false, m
     const fixedScrollEnabled = !!(fixedHeader && maxHeight);
     const { handleThumbMouseDown } = useTableVerticalScrollbar({
         enabled: fixedScrollEnabled,
+        layoutKey: horizontalScroll,
         scrollContainerRef,
         scrollAreaRef,
+        scrollbarRef,
         thumbRef,
     });
     const { handleHThumbMouseDown } = useTableHorizontalScrollbar({

package/dist/temp/src/components/data-display/table/useTableScrollbars.d.ts

@@ -6,11 +6,13 @@ export declare const H_SCROLLBAR_SIDE_GAP = 8;
 export declare const SCROLLBAR_TRACK_OFFSET = 16;
 type VerticalScrollbarOptions = {
     enabled: boolean;
+    layoutKey: unknown;
     scrollContainerRef: RefObject<HTMLDivElement | null>;
     scrollAreaRef: RefObject<HTMLDivElement | null>;
+    scrollbarRef: RefObject<HTMLDivElement | null>;
     thumbRef: RefObject<HTMLDivElement | null>;
 };
-export declare const useTableVerticalScrollbar: ({ enabled, scrollContainerRef, scrollAreaRef, thumbRef, }: VerticalScrollbarOptions) => {
+export declare const useTableVerticalScrollbar: ({ enabled, layoutKey, scrollContainerRef, scrollAreaRef, scrollbarRef, thumbRef, }: VerticalScrollbarOptions) => {
     handleThumbMouseDown: (e: MouseEvent<HTMLDivElement>) => void;
 };
 type HorizontalScrollbarOptions = {

package/dist/temp/src/components/data-display/table/useTableScrollbars.js

@@ -51,7 +51,8 @@ const startDrag = (e, options) => {
     document.addEventListener('mousemove', onMove);
     document.addEventListener('mouseup', onUp);
 };
-export const useTableVerticalScrollbar = ({ enabled, scrollContainerRef, scrollAreaRef, thumbRef, }) => {
+export const useTableVerticalScrollbar = ({ enabled, layoutKey, scrollContainerRef, scrollAreaRef, scrollbarRef, thumbRef, }) => {
+    // biome-ignore lint/correctness/useExhaustiveDependencies: layoutKey는 직접 참조하지 않지만 horizontalScroll 토글로 스크롤바 DOM이 리마운트될 때 effect를 재바인딩하기 위한 트리거로 의도적으로 포함한다.
     useEffect(() => {
         if (!enabled)
             return;
@@ -65,7 +66,8 @@ export const useTableVerticalScrollbar = ({ enabled, scrollContainerRef, scrollA
                 thumbEl.style.height = '0';
                 return;
             }
-            const trackHeight = (scrollAreaRef.current?.clientHeight ?? clientHeight) - TABLE_HEADER_HEIGHT - SCROLLBAR_TRACK_OFFSET;
+            const trackHeight = scrollbarRef.current?.clientHeight ||
+                (scrollAreaRef.current?.clientHeight ?? clientHeight) - TABLE_HEADER_HEIGHT - SCROLLBAR_TRACK_OFFSET;
             const thumbHeight = Math.max(SCROLLBAR_THUMB_MIN_HEIGHT, (clientHeight / scrollHeight) * trackHeight);
             const thumbTop = (scrollTop / (scrollHeight - clientHeight)) * (trackHeight - thumbHeight);
             thumbEl.style.height = `${thumbHeight}px`;
@@ -76,12 +78,14 @@ export const useTableVerticalScrollbar = ({ enabled, scrollContainerRef, scrollA
         observer.observe(scrollEl);
         if (scrollAreaRef.current)
             observer.observe(scrollAreaRef.current);
+        if (scrollbarRef.current)
+            observer.observe(scrollbarRef.current);
         update();
         return () => {
             scrollEl.removeEventListener('scroll', update);
             observer.disconnect();
         };
-    }, [enabled, scrollContainerRef, scrollAreaRef, thumbRef]);
+    }, [enabled, layoutKey, scrollContainerRef, scrollAreaRef, scrollbarRef, thumbRef]);
     const handleThumbMouseDown = (e) => {
         const scrollEl = scrollContainerRef.current;
         const thumbEl = thumbRef.current;

package/dist/temp/src/components/feedback-and-status/badge/Badge.d.ts

@@ -1,11 +1,12 @@
 import type { ColorTone } from '../../../../constant/color';
 import type { Size } from '../../../../constant/size';
 import type { SideSlotType } from '../../../types/side-slot';
-type BadgeType = 'pill-outline' | 'pill-dark-color';
+type BadgeType = 'pill-outline' | 'pill-dark-color' | 'new-badge';
 type BadgeColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled'>;
 type BadgeSize = Extract<Size, 'xs' | 'sm' | 'md'>;
 type BadgeProps = {
-    label: string;
+    /** new-badge 타입에서는 사용되지 않는다(무시됨). 그 외 타입에서는 필수로 전달한다. */
+    label?: string;
     type?: BadgeType;
     color?: BadgeColor;
     className?: string;

package/dist/temp/src/components/feedback-and-status/badge/Badge.js

@@ -1,11 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { New } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { sideSlotRender } from './utils';
 /**
  * 뱃지 컴포넌트의 아이콘은 디자인 시스템에서 12px 고정으로 정의되어 있습니다.
  */
 const BADGE_ICON_SIZE = 12;
+/** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
+const NEW_BADGE_ICON_SIZE = { sm: 12, md: 16 };
 const Badge = ({ label, type = 'pill-outline', color = 'neutral', className, leadingIcon, trailingIcon, size = 'xs', }) => {
+    // new-badge: 신규 콘텐츠 'N' 마크 전용 타입. label·color·leadingIcon·trailingIcon은 무시되고
+    // 색은 --pink-600 으로 고정된다. (디자이너 명세: Icon/FeaturedIcon/Badge로 대체 불가한 전용 표시)
+    if (type === 'new-badge') {
+        const newBadgeSize = size === 'md' ? 'md' : 'sm';
+        const iconSize = NEW_BADGE_ICON_SIZE[newBadgeSize];
+        return (_jsx("span", { className: classNames('ncua-badge', 'ncua-badge--new-badge', `ncua-badge--new-badge-${newBadgeSize}`, className), children: _jsx(New, { width: iconSize, height: iconSize }) }));
+    }
     return (_jsxs("span", { className: classNames('ncua-badge', `ncua-badge--${type}`, `ncua-badge--${color}`, `ncua-badge--${size}`, className), children: [leadingIcon && sideSlotRender({ slot: leadingIcon, defaultIconSize: BADGE_ICON_SIZE }), _jsx("span", { className: "ncua-badge__label", children: label }), trailingIcon && sideSlotRender({ slot: trailingIcon, defaultIconSize: BADGE_ICON_SIZE })] }));
 };
 export { Badge };

package/dist/temp/src/components/forms-and-input/combo-box/ComboBox.d.ts

@@ -30,6 +30,10 @@ interface ComboBoxProps extends Omit<ComponentPropsWithRef<'div'>, 'size' | 'onC
      */
     maxSelection?: number | null;
     onEdit?: () => void;
+    /**
+     * 완료 버튼 클릭 시 호출되는 콜백 — 현재 선택된 값을 인자로 받음 (multiple 모드에서만 트리거)
+     */
+    onComplete?: OptionChangeHandler;
 }
 declare const ComboBox: import("react").ForwardRefExoticComponent<Omit<ComboBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export { defaultMaxHeight, ComboBox };

package/dist/temp/src/components/forms-and-input/combo-box/ComboBox.js

@@ -20,7 +20,7 @@ const notifyFormChange = (register, multiple, newValue) => {
         });
     }
 };
-const ComboBox = forwardRef(({ placeholder = '검색하세요', id, className, hintText, children, size = 'xs', destructive = false, value, optionItems = [], onChange, onSearch, disabled = false, register, maxHeight = defaultMaxHeight, searchValue = '', label, required = false, multiple = false, showFooterButtons = false, maxSelection, onEdit, ...props }, ref) => {
+const ComboBox = forwardRef(({ placeholder = '검색하세요', id, className, hintText, children, size = 'xs', destructive = false, value, optionItems = [], onChange, onSearch, disabled = false, register, maxHeight = defaultMaxHeight, searchValue = '', label, required = false, multiple = false, showFooterButtons = false, maxSelection, onEdit, onComplete, ...props }, ref) => {
     const internalRef = useRef(null);
     const dropdownRef = useRef(null);
     const inputRef = useRef(null);
@@ -122,13 +122,14 @@ const ComboBox = forwardRef(({ placeholder = '검색하세요', id, className, h
     const handleEdit = () => {
         onEdit?.();
     };
-    const handleComplete = () => {
+    const handleComplete = (completedValue) => {
         if (!multiple)
             return;
         const tags = getSelectedTagsData();
         setSelectedTags(tags);
         setInputValue('');
         closeDropdown();
+        onComplete?.(completedValue);
     };
     const handleRemoveTag = (tagId) => {
         if (!onChange)

package/dist/temp/src/components/forms-and-input/image-file-input/ImageFileInput.js

@@ -7,6 +7,18 @@ import { Tooltip } from '../../overlays/tooltip';
 import { HintText, Label } from '../../shared';
 import { FileInputErrorType as ImageFileInputErrorType } from '../file-input/FileInput';
 import { ImagePreview } from './components/ImagePreview';
+const toInvalidFile = (file, errorType) => ({
+    name: file.name,
+    size: file.size,
+    type: file.type,
+    lastModified: file.lastModified,
+    webkitRelativePath: file.webkitRelativePath,
+    arrayBuffer: () => file.arrayBuffer(),
+    stream: () => file.stream(),
+    text: () => file.text(),
+    slice: (...args) => file.slice(...args),
+    errorType,
+});
 export const ImageFileInput = forwardRef(({ size = 'sm', accept, multiple = false, maxFileSize, maxFileCount, value, onChange, onFileSelect, onFail, buttonLabel = '파일 찾기', imagePreviewTooltipLabel = '이미지 업로드', disabled, label, hintItems, validation, destructive, isRequired, showHelpIcon, hintText, showFileTagList = true, showHintText = true, showFileInput = true, ...props }, ref) => {
     const fileInputRef = useRef(null);
     useImperativeHandle(ref, () => fileInputRef.current);
@@ -48,25 +60,16 @@ export const ImageFileInput = forwardRef(({ size = 'sm', accept, multiple = fals
         const invalidFiles = [];
         for (const file of fileList) {
             if (files.some((f) => f.name === file.name && f.size === file.size)) {
-                invalidFiles.push({
-                    ...file,
-                    errorType: ImageFileInputErrorType.ALREADY_UPLOADED,
-                });
+                invalidFiles.push(toInvalidFile(file, ImageFileInputErrorType.ALREADY_UPLOADED));
                 continue;
             }
             if (!!maxFileSize && file.size > maxFileSize) {
-                invalidFiles.push({
-                    ...file,
-                    errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE,
-                });
+                invalidFiles.push(toInvalidFile(file, ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE));
                 continue;
             }
             // Skip max count check if maxFileCount is 1 (allow replacement)
             if (!!maxFileCount && maxFileCount !== 1 && files.length + validFiles.length >= maxFileCount) {
-                invalidFiles.push({
-                    ...file,
-                    errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT,
-                });
+                invalidFiles.push(toInvalidFile(file, ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT));
                 continue;
             }
             validFiles.push(file);
@@ -85,12 +88,12 @@ export const ImageFileInput = forwardRef(({ size = 'sm', accept, multiple = fals
     };
     const renderImagePreview = (files = []) => {
         const showEmptySlot = maxFileCount ? files.length < maxFileCount : files.length === 0;
-        return (_jsxs("div", { className: "ncua-image-file-input__previews", children: [files.map((file, index) => (_jsx(ImagePreview, { file: file, onRemove: () => handleRemoveFile(index) }, `${file.name}-${index}`))), showEmptySlot && (_jsxs("div", { className: "ncua-image-file-input__empty-slot-wrapper", onMouseEnter: () => !disabled && setIsButtonHovered(true), onMouseLeave: () => setIsButtonHovered(false), onClick: handleBrowseClick, children: [_jsx(Button, { onlyIcon: true, size: size, className: classNames('ncua-image-file-input__preview-container'), onClick: handleBrowseClick, disabled: disabled, label: imagePreviewTooltipLabel }), _jsx(Tooltip, { content: imagePreviewTooltipLabel, position: "bottom", tooltipType: "black", forceVisible: isButtonHovered && !disabled, disablePortal: true })] }))] }));
+        return (_jsxs("div", { className: "ncua-image-file-input__previews", children: [files.map((file, index) => (_jsx(ImagePreview, { file: file, onRemove: () => handleRemoveFile(index) }, `${file.name}-${index}`))), showEmptySlot && (_jsxs("div", { className: "ncua-image-file-input__empty-slot-wrapper", onMouseEnter: () => !disabled && setIsButtonHovered(true), onMouseLeave: () => setIsButtonHovered(false), onClick: handleBrowseClick, children: [_jsx(Button, { onlyIcon: true, size: size, className: classNames('ncua-image-file-input__preview-container'), onClick: handleBrowseClick, disabled: disabled, label: imagePreviewTooltipLabel }), _jsx(Tooltip, { content: imagePreviewTooltipLabel, position: "bottom", tooltipType: "black", forceVisible: isButtonHovered && !disabled, panelClassName: classNames('ncua-image-file-input__slot-tooltip', `ncua-image-file-input__slot-tooltip--${size}`) })] }))] }));
     };
     const renderHintList = () => {
         if (!hintItems || hintItems.length === 0)
             return null;
         return (_jsx("ul", { className: "ncua-file-input__hint-list", children: hintItems.map((hint) => (_jsx("li", { className: "ncua-file-input__hint-item", children: hint }, hint))) }));
     };
-    return (_jsxs("div", { className: classNames('ncua-image-file-input', `ncua-image-file-input--${size}`, { destructive: destructive }), children: [renderImagePreview(files), showFileInput && (_jsxs("div", { className: classNames('ncua-file-input', `ncua-file-input--${size}`), children: [_jsx("input", { hidden: true, ref: fileInputRef, type: "file", accept: accept, multiple: multiple, onChange: handleFileChange, tabIndex: -1, "aria-hidden": "true", ...props }), _jsxs("div", { className: "ncua-file-input__input-container", children: [_jsxs("div", { className: "ncua-file-input__label", children: [_jsx(Label, { isRequired: isRequired, children: label }), showHelpIcon && _jsx(HelpCircle, { className: "ncua-input__help-icon" })] }), _jsx(Button, { size: "xs", onClick: handleBrowseClick, disabled: disabled, leadingIcon: { type: 'icon', icon: Upload01 }, label: buttonLabel }), showHintText && hintText && _jsx(HintText, { destructive: destructive, children: hintText })] }), showHintText && renderHintList()] }))] }));
+    return (_jsxs("div", { className: classNames('ncua-image-file-input', `ncua-image-file-input--${size}`, { destructive: destructive }), children: [renderImagePreview(files), _jsx("input", { hidden: true, ref: fileInputRef, type: "file", accept: accept, multiple: multiple, onChange: handleFileChange, tabIndex: -1, "aria-hidden": "true", ...props }), showFileInput && (_jsxs("div", { className: classNames('ncua-file-input', `ncua-file-input--${size}`), children: [_jsxs("div", { className: "ncua-file-input__input-container", children: [_jsxs("div", { className: "ncua-file-input__label", children: [_jsx(Label, { isRequired: isRequired, children: label }), showHelpIcon && _jsx(HelpCircle, { className: "ncua-input__help-icon" })] }), _jsx(Button, { size: "xs", onClick: handleBrowseClick, disabled: disabled, leadingIcon: { type: 'icon', icon: Upload01 }, label: buttonLabel }), showHintText && hintText && _jsx(HintText, { destructive: destructive, children: hintText })] }), showHintText && renderHintList()] }))] }));
 });

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

@@ -28,6 +28,10 @@ type SelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> &
      */
     maxSelection?: number | null;
     onEdit?: () => void;
+    /**
+     * 완료 버튼 클릭 시 호출되는 콜백 — 현재 선택된 값을 인자로 받음 (multiple 모드에서만 트리거)
+     */
+    onComplete?: OptionChangeHandler;
     align?: 'left' | 'right';
     /**
      * 옵션 패널을 React Portal로 body에 렌더한다.

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

@@ -40,7 +40,7 @@ function DisplayValue({ displayValue }) {
     }
     return (_jsxs("div", { className: "ncua-selectbox__value-container", children: [displayValue.icon && (_jsx("span", { className: "ncua-selectbox__value-icon", children: _jsx(displayValue.icon, { width: 16, height: 16 }) })), _jsx("span", { className: "ncua-selectbox__value-text", children: displayValue.label })] }));
 }
-const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceholder = false, hintText, size = 'xs', type = 'default', autoWidth = true, destructive = false, value, optionItems = [], disabled = false, maxHeight = DEFAULT_MAX_HEIGHT, multiple = false, maxSelection, align = 'left', usePortal, id, className, children, register, onChange, onEdit, ...props }, ref
+const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceholder = false, hintText, size = 'xs', type = 'default', autoWidth = true, destructive = false, value, optionItems = [], disabled = false, maxHeight = DEFAULT_MAX_HEIGHT, multiple = false, maxSelection, align = 'left', usePortal, id, className, children, register, onChange, onEdit, onComplete, ...props }, ref
 // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 옵션/멀티/태그/포탈 등 필수 분기 통합
 ) => {
     const internalRef = useRef(null);
@@ -106,10 +106,11 @@ const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceho
     const handleEdit = () => {
         onEdit?.();
     };
-    const handleComplete = () => {
+    const handleComplete = (completedValue) => {
         if (multiple) {
             const tags = getSelectedTagsData();
             setSelectedTags(tags);
+            onComplete?.(completedValue);
         }
         closeDropdown();
     };

package/dist/temp/src/components/overlays/tooltip/Tooltip.d.ts

@@ -16,6 +16,7 @@ interface TooltipProps {
     forceVisible?: boolean;
     /** true이면 Portal 없이 앵커 내부에 패널을 인라인 렌더링. CSS 기반 위치 지정이 필요한 경우 사용 */
     disablePortal?: boolean;
+    panelClassName?: string;
 }
-export declare const Tooltip: ({ tooltipType, iconType, position, size, title, content, hideArrow, type, iconColor, iconStyle, className, zIndex, forceVisible, disablePortal, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ tooltipType, iconType, position, size, title, content, hideArrow, type, iconColor, iconStyle, className, zIndex, forceVisible, disablePortal, panelClassName, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -86,7 +86,7 @@ const renderIcon = (iconStyle, iconType, iconSize, iconColor) => {
     }
     return iconType === 'stroke' ? (_jsx(AlertCircle, { width: iconSize, height: iconSize, color: iconColor })) : (_jsx(AlertCircleFill, { width: iconSize, height: iconSize, color: iconColor }));
 };
-export const Tooltip = ({ tooltipType = 'white', iconType = 'stroke', position = 'auto', size = 'sm', title, content, hideArrow = false, type = 'short', iconColor = 'var(--gray-300)', iconStyle = 'help-circle', className, zIndex, forceVisible, disablePortal = false, }) => {
+export const Tooltip = ({ tooltipType = 'white', iconType = 'stroke', position = 'auto', size = 'sm', title, content, hideArrow = false, type = 'short', iconColor = 'var(--gray-300)', iconStyle = 'help-circle', className, zIndex, forceVisible, disablePortal = false, panelClassName, }) => {
     const iconSize = size === 'sm' ? ICON_SIZE_SM : ICON_SIZE_DEFAULT;
     const anchorRef = useRef(null);
     const panelRef = useRef(null);
@@ -154,12 +154,12 @@ export const Tooltip = ({ tooltipType = 'white', iconType = 'stroke', position =
         'ncua-tooltip--stroke': iconType === 'stroke',
         'ncua-tooltip--auto': position === 'auto',
     }, className), [size, type, hideArrow, iconType, position, className]);
-    const panelClassName = useMemo(() => classNames({ 'ncua-tooltip-panel': !disablePortal }, 'ncua-tooltip__bg', `ncua-tooltip__bg--${tooltipType}`, `ncua-tooltip__bg--${finalPosition}`, {
+    const panelClasses = useMemo(() => classNames({ 'ncua-tooltip-panel': !disablePortal }, 'ncua-tooltip__bg', `ncua-tooltip__bg--${tooltipType}`, `ncua-tooltip__bg--${finalPosition}`, {
         'ncua-tooltip__bg--visible': effectiveVisible,
         'ncua-tooltip__bg--force-hidden': isManuallyClose && !forceVisible,
-    }), [tooltipType, finalPosition, effectiveVisible, isManuallyClose, forceVisible, disablePortal]);
+    }, panelClassName), [tooltipType, finalPosition, effectiveVisible, isManuallyClose, forceVisible, disablePortal, panelClassName]);
     const panelStyle = buildPanelStyle(disablePortal, coords, effectiveVisible, zIndex);
     const portalTarget = mounted ? resolvePortalTarget() : null;
-    const panel = (_jsxs("span", { ref: panelRef, className: panelClassName, style: panelStyle, children: [title && _jsx("span", { className: "ncua-tooltip__title", children: title }), content && _jsx("span", { className: "ncua-tooltip__content", children: content }), type === 'long' && (_jsx(ButtonCloseX, { className: "ncua-tooltip__close-button", size: "xs", theme: tooltipType === 'white' ? 'dark' : 'light', onClick: handleCloseClick, "aria-label": "\uD234\uD301 \uB2EB\uAE30" }))] }));
+    const panel = (_jsxs("span", { ref: panelRef, className: panelClasses, style: panelStyle, children: [title && _jsx("span", { className: "ncua-tooltip__title", children: title }), content && _jsx("span", { className: "ncua-tooltip__content", children: content }), type === 'long' && (_jsx(ButtonCloseX, { className: "ncua-tooltip__close-button", size: "xs", theme: tooltipType === 'white' ? 'dark' : 'light', onClick: handleCloseClick, "aria-label": "\uD234\uD301 \uB2EB\uAE30" }))] }));
     return (_jsxs("span", { ref: anchorRef, className: tooltipClassName, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [renderIcon(iconStyle, iconType, iconSize, iconColor), disablePortal ? panel : portalTarget && createPortal(panel, portalTarget)] }));
 };

package/dist/temp/src/components/select-dropdown/SelectDropdown.d.ts

@@ -25,7 +25,7 @@ type SelectDropdownProps = ComponentPropsWithRef<'div'> & {
     showSelectAllAction?: boolean;
     onSelectAll?: () => void;
     onEdit?: () => void;
-    onComplete?: () => void;
+    onComplete?: (value: OptionValue) => void;
     activeDescendantId?: string;
     componentType?: 'selectbox' | 'combobox';
     align?: 'left' | 'right';

package/dist/temp/src/components/select-dropdown/SelectDropdown.js

@@ -20,7 +20,7 @@ const SelectDropdown = forwardRef(({ isOpen, direction = 'down', size = 'xs', op
                                     'ncua-select-dropdown__option--selected': isSelected,
                                     'ncua-select-dropdown__option--focused': isFocused,
                                 }), onClick: () => onOptionSelect(option), onMouseEnter: handleMouseEnter, role: "option", "aria-selected": isSelected, children: [option.icon && (_jsx("span", { className: "ncua-select-dropdown__option-icon", children: _jsx(option.icon, { width: 16, height: 16 }) })), _jsx("span", { className: "ncua-select-dropdown__option-text", children: option.label })] }, option.id));
-                        }), children] }) }), showFooterButtons && (_jsx("div", { className: "ncua-select-dropdown__footer", children: _jsxs("div", { className: "ncua-select-dropdown__footer-buttons", children: [_jsx("div", { className: "ncua-select-dropdown__footer-left", children: multiple && showSelectAllAction && (_jsx(Button, { label: selectAllButtonText, hierarchy: "text", size: "xs", onClick: onSelectAll, underline: true })) }), _jsxs("div", { className: "ncua-select-dropdown__footer-right", children: [_jsx(Button, { label: "\uD3B8\uC9D1", hierarchy: "secondary-gray", size: "xs", onClick: onEdit }), multiple && _jsx(Button, { label: "\uC120\uD0DD \uC644\uB8CC", hierarchy: "secondary", size: "xs", onClick: onComplete })] })] }) }))] }));
+                        }), children] }) }), showFooterButtons && (_jsx("div", { className: "ncua-select-dropdown__footer", children: _jsxs("div", { className: "ncua-select-dropdown__footer-buttons", children: [_jsx("div", { className: "ncua-select-dropdown__footer-left", children: multiple && showSelectAllAction && (_jsx(Button, { label: selectAllButtonText, hierarchy: "text", size: "xs", onClick: onSelectAll, underline: true })) }), _jsxs("div", { className: "ncua-select-dropdown__footer-right", children: [_jsx(Button, { label: "\uD3B8\uC9D1", hierarchy: "secondary-gray", size: "xs", onClick: onEdit }), multiple && (_jsx(Button, { label: "\uC120\uD0DD \uC644\uB8CC", hierarchy: "secondary", size: "xs", onClick: () => onComplete?.(value ?? []) }))] })] }) }))] }));
 });
 SelectDropdown.displayName = 'SelectDropdown';
 export { SelectDropdown };

package/dist/types/src/components/data-display/table/useTableScrollbars.d.ts

@@ -6,11 +6,13 @@ export declare const H_SCROLLBAR_SIDE_GAP = 8;
 export declare const SCROLLBAR_TRACK_OFFSET = 16;
 type VerticalScrollbarOptions = {
     enabled: boolean;
+    layoutKey: unknown;
     scrollContainerRef: RefObject<HTMLDivElement | null>;
     scrollAreaRef: RefObject<HTMLDivElement | null>;
+    scrollbarRef: RefObject<HTMLDivElement | null>;
     thumbRef: RefObject<HTMLDivElement | null>;
 };
-export declare const useTableVerticalScrollbar: ({ enabled, scrollContainerRef, scrollAreaRef, thumbRef, }: VerticalScrollbarOptions) => {
+export declare const useTableVerticalScrollbar: ({ enabled, layoutKey, scrollContainerRef, scrollAreaRef, scrollbarRef, thumbRef, }: VerticalScrollbarOptions) => {
     handleThumbMouseDown: (e: MouseEvent<HTMLDivElement>) => void;
 };
 type HorizontalScrollbarOptions = {

package/dist/types/src/components/feedback-and-status/badge/Badge.d.ts

@@ -1,11 +1,12 @@
 import type { ColorTone } from '../../../../constant/color';
 import type { Size } from '../../../../constant/size';
 import type { SideSlotType } from '../../../types/side-slot';
-type BadgeType = 'pill-outline' | 'pill-dark-color';
+type BadgeType = 'pill-outline' | 'pill-dark-color' | 'new-badge';
 type BadgeColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled'>;
 type BadgeSize = Extract<Size, 'xs' | 'sm' | 'md'>;
 type BadgeProps = {
-    label: string;
+    /** new-badge 타입에서는 사용되지 않는다(무시됨). 그 외 타입에서는 필수로 전달한다. */
+    label?: string;
     type?: BadgeType;
     color?: BadgeColor;
     className?: string;

package/dist/types/src/components/forms-and-input/combo-box/ComboBox.d.ts

@@ -30,6 +30,10 @@ interface ComboBoxProps extends Omit<ComponentPropsWithRef<'div'>, 'size' | 'onC
      */
     maxSelection?: number | null;
     onEdit?: () => void;
+    /**
+     * 완료 버튼 클릭 시 호출되는 콜백 — 현재 선택된 값을 인자로 받음 (multiple 모드에서만 트리거)
+     */
+    onComplete?: OptionChangeHandler;
 }
 declare const ComboBox: import("react").ForwardRefExoticComponent<Omit<ComboBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export { defaultMaxHeight, ComboBox };

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

@@ -28,6 +28,10 @@ type SelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> &
      */
     maxSelection?: number | null;
     onEdit?: () => void;
+    /**
+     * 완료 버튼 클릭 시 호출되는 콜백 — 현재 선택된 값을 인자로 받음 (multiple 모드에서만 트리거)
+     */
+    onComplete?: OptionChangeHandler;
     align?: 'left' | 'right';
     /**
      * 옵션 패널을 React Portal로 body에 렌더한다.

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

@@ -16,6 +16,7 @@ interface TooltipProps {
     forceVisible?: boolean;
     /** true이면 Portal 없이 앵커 내부에 패널을 인라인 렌더링. CSS 기반 위치 지정이 필요한 경우 사용 */
     disablePortal?: boolean;
+    panelClassName?: string;
 }
-export declare const Tooltip: ({ tooltipType, iconType, position, size, title, content, hideArrow, type, iconColor, iconStyle, className, zIndex, forceVisible, disablePortal, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ tooltipType, iconType, position, size, title, content, hideArrow, type, iconColor, iconStyle, className, zIndex, forceVisible, disablePortal, panelClassName, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/src/components/select-dropdown/SelectDropdown.d.ts

@@ -25,7 +25,7 @@ type SelectDropdownProps = ComponentPropsWithRef<'div'> & {
     showSelectAllAction?: boolean;
     onSelectAll?: () => void;
     onEdit?: () => void;
-    onComplete?: () => void;
+    onComplete?: (value: OptionValue) => void;
     activeDescendantId?: string;
     componentType?: 'selectbox' | 'combobox';
     align?: 'left' | 'right';

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

@@ -5017,6 +5017,20 @@ button {
   color: var(--gray-300);
   background-color: var(--gray-100);
 }
+.ncua-badge--new-badge {
+  justify-content: center;
+  color: var(--pink-600);
+  background-color: var(--pink-200);
+  border-radius: 5px;
+}
+.ncua-badge--new-badge-sm {
+  width: 16px;
+  height: 16px;
+}
+.ncua-badge--new-badge-md {
+  width: 20px;
+  height: 20px;
+}
 
 .ncua-badge-group {
   display: inline-flex;
@@ -5888,6 +5902,14 @@ button {
   gap: 16px;
 }
 
+.ncua-tooltip-panel.ncua-image-file-input__slot-tooltip--xs {
+  transform: translateY(-19px);
+}
+
+.ncua-tooltip-panel.ncua-image-file-input__slot-tooltip--sm {
+  transform: translateY(-27px);
+}
+
 .ncua-table-wrapper {
   display: flex;
   flex-direction: column;
@@ -5957,6 +5979,8 @@ button {
 }
 
 .ncua-table {
+  --ncua-table-header-height: 40px;
+  --ncua-table-default-min-width: 1140px;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -6308,8 +6332,7 @@ button {
 .ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row:last-child > .ncua-table__cell:last-child {
   border-bottom-right-radius: 0;
 }
-.ncua-table--vertical .ncua-table__body > .ncua-table__row td,
-.ncua-table--vertical .ncua-table__body > .ncua-table__row th {
+.ncua-table--vertical .ncua-table__body > .ncua-table__row {
   height: 48px;
 }
 .ncua-table--vertical .ncua-table__body > .ncua-table__row td:first-child,
@@ -6332,6 +6355,42 @@ button {
   text-align: left;
   font-weight: var(--font-weights-commerce-sans-0);
 }
+.ncua-table--vertical .ncua-table__body > .ncua-table__row td:first-child > div:has(> .ncua-tooltip),
+.ncua-table--vertical .ncua-table__body > .ncua-table__row th:first-child > div:has(> .ncua-tooltip) {
+  display: flex;
+  align-items: center;
+}
+.ncua-table--vertical .ncua-table__body > .ncua-table__row td:first-child > div:has(> .ncua-tooltip) > .ncua-tooltip,
+.ncua-table--vertical .ncua-table__body > .ncua-table__row th:first-child > div:has(> .ncua-tooltip) > .ncua-tooltip {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+  margin-left: var(--spacing-xs);
+}
+.ncua-table--vertical .ncua-table__body > .ncua-table__row td:first-child > div:has(> .ncua-tooltip) > .ncua-tooltip > .ncua-tooltip__icon,
+.ncua-table--vertical .ncua-table__body > .ncua-table__row th:first-child > div:has(> .ncua-tooltip) > .ncua-tooltip > .ncua-tooltip__icon {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+}
+.ncua-table--vertical .ncua-table .ncua-table__header > .ncua-table__row th:first-child {
+  width: auto;
+  min-width: 0;
+  max-width: none;
+  padding: 0 var(--spacing-m);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-1);
+  line-height: var(--line-heights-xs);
+  color: var(--gray-500);
+  text-align: center;
+  background: var(--gray-100);
+  border-right: 1px solid var(--gray-200);
+}
+.ncua-table--vertical .ncua-table .ncua-table__header > .ncua-table__row th:last-child {
+  padding: 0 var(--spacing-m);
+  text-align: center;
+  font-weight: var(--font-weights-commerce-sans-1);
+}
 .ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row td:first-child,
 .ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row th:first-child {
   width: auto;
@@ -6355,7 +6414,7 @@ button {
   color: var(--primary-red-500, #ec1d31);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weights-commerce-sans-1);
-  margin-right: 2px;
+  margin-right: 4px;
 }
 
 .ncua-data-grid {
@@ -6476,7 +6535,15 @@ button {
   border: 1px solid var(--gray-100);
   border-radius: 12px;
   box-shadow: var(--shadow-sm);
-  overflow: hidden;
+}
+.ncua-block-container > *:first-child {
+  border-radius: 12px 12px 0 0;
+}
+.ncua-block-container > *:last-child {
+  border-radius: 0 0 12px 12px;
+}
+.ncua-block-container > *:only-child, .ncua-block-container > *:first-child:has(~ *:last-child[style*="display: none"]), .ncua-block-container > *:first-child:has(~ *:last-child[hidden]) {
+  border-radius: 12px;
 }
 .ncua-block-container__body {
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.7",
+  "version": "1.8.9",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -70,7 +70,7 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-react-accessibility": "1.1.4",
-    "@ncds/ui-admin-icon": "0.1.9",
+    "@ncds/ui-admin-icon": "0.1.11",
     "classnames": "2.5.1",
     "dompurify": "3.4.1",
     "flatpickr": "4.6.13",