@ncds/ui-admin 1.8.6 → 1.8.8

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

@@ -144,7 +144,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 +163,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/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

@@ -137,7 +137,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 +156,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/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

@@ -85,12 +85,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/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

@@ -3080,6 +3080,7 @@ button {
   display: flex;
   flex-direction: column;
   gap: 4px;
+  width: max-content;
   max-width: 320px;
   overflow-wrap: anywhere;
   font-family: var(--font-families-commerce-sans);
@@ -5887,6 +5888,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;
@@ -6307,8 +6316,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,
@@ -6331,6 +6339,24 @@ 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__body > .ncua-table__row td:first-child,
 .ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row th:first-child {
   width: auto;
@@ -6354,7 +6380,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 {

package/package.json

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