@ncds/ui-admin 1.8.0 → 1.8.1

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

@@ -147,6 +147,7 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
   (0, _react.useImperativeHandle)(ref, () => internalRef.current, []);
   const trailingElement = {
     type: 'custom',
+    placement: 'inside',
     children: (0, _jsxRuntime.jsx)("div", {
       className: "ncua-input__icon-wrap ncua-input__right-icon",
       onClick: showAllItem,

package/dist/cjs/src/components/table/Table.js

@@ -10,6 +10,11 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // ──────────────────────────────────────────────
+// $table-header-height 와 동기화 — sticky thead가 차지하는 높이를 maxHeight에 보상
+const TABLE_HEADER_HEIGHT = 40;
+// 스크롤바 트랙 상하 여백 합계 (top 8px + bottom 8px) — SCSS &--fixed-header &__scrollbar 오프셋과 동기화
+const SCROLLBAR_TRACK_OFFSET = 16;
+const SCROLLBAR_THUMB_MIN_HEIGHT = 40;
 // Sort Icons (@ncds/ui-admin-icon)
 // ──────────────────────────────────────────────
 const SORT_ICONS = {
@@ -111,8 +116,18 @@ const Cell = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   let {
     children,
     className,
+    isHeader,
     ...rest
   } = _ref5;
+  if (isHeader) {
+    return (0, _jsxRuntime.jsx)("th", {
+      ref: ref,
+      scope: "row",
+      className: (0, _classnames.default)('ncua-table__cell', className),
+      ...rest,
+      children: children
+    });
+  }
   return (0, _jsxRuntime.jsx)("td", {
     ref: ref,
     className: (0, _classnames.default)('ncua-table__cell', className),
@@ -153,14 +168,13 @@ const ColGroup = _ref8 => {
     return width;
   };
   return (0, _jsxRuntime.jsx)("colgroup", {
-    children: widths.map((width, index) => {
-      const duplicateCount = widths.slice(0, index).filter(v => v === width).length;
-      return (0, _jsxRuntime.jsx)("col", {
-        style: {
-          width: resolveColWidth(width)
-        }
-      }, `col-${width}-${duplicateCount}`);
-    })
+    children: widths.map((width, index) =>
+    // biome-ignore lint/suspicious/noArrayIndexKey: colgroup columns never reorder or change
+    (0, _jsxRuntime.jsx)("col", {
+      style: {
+        width: resolveColWidth(width)
+      }
+    }, index))
   });
 };
 ColGroup.displayName = 'Table.ColGroup';
@@ -189,12 +203,18 @@ const categorizeChild = (child, result) => {
     result.footerContent.push(child);
   } else if (child.type === Pagination) {
     result.paginationContent.push(child);
+  } else if (child.type === Header) {
+    result.headerContent.push(child);
+  } else if (child.type === ColGroup) {
+    result.colGroupContent.push(child);
   } else {
     result.tableContent.push(child);
   }
 };
 const sortChildren = children => {
   const result = {
+    headerContent: [],
+    colGroupContent: [],
     tableContent: [],
     footerContent: [],
     paginationContent: []
@@ -226,17 +246,113 @@ const TableComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref0, ref) => {
     'ncua-table--selectable': selectable
   });
   const {
+    headerContent,
+    colGroupContent,
     tableContent,
     footerContent,
     paginationContent
   } = sortChildren(children);
   const scrollStyle = fixedHeader && maxHeight ? {
-    maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight
+    maxHeight: typeof maxHeight === 'number' ? `${maxHeight + TABLE_HEADER_HEIGHT}px` : `calc(${maxHeight} + ${TABLE_HEADER_HEIGHT}px)`
   } : undefined;
-  const tableElement = (0, _jsxRuntime.jsx)("table", {
+  // Custom scrollbar refs (used only in fixed-header mode)
+  const scrollContainerRef = (0, _react.useRef)(null);
+  const scrollAreaRef = (0, _react.useRef)(null);
+  const thumbRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!fixedHeader || !maxHeight) return;
+    const scrollEl = scrollContainerRef.current;
+    const thumbEl = thumbRef.current;
+    if (!scrollEl || !thumbEl) return;
+    const update = () => {
+      const {
+        scrollTop,
+        scrollHeight,
+        clientHeight
+      } = scrollEl;
+      if (scrollHeight <= clientHeight) {
+        thumbEl.style.height = '0';
+        return;
+      }
+      const trackHeight = (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`;
+      thumbEl.style.transform = `translateY(${thumbTop}px)`;
+    };
+    scrollEl.addEventListener('scroll', update, {
+      passive: true
+    });
+    const observer = new ResizeObserver(update);
+    observer.observe(scrollEl);
+    update();
+    return () => {
+      scrollEl.removeEventListener('scroll', update);
+      observer.disconnect();
+    };
+  }, [fixedHeader, maxHeight]);
+  const handleThumbMouseDown = e => {
+    e.preventDefault();
+    const scrollEl = scrollContainerRef.current;
+    const thumbEl = thumbRef.current;
+    const areaEl = scrollAreaRef.current;
+    if (!scrollEl || !thumbEl) return;
+    areaEl?.setAttribute('data-dragging', '');
+    const startY = e.clientY;
+    const startScrollTop = scrollEl.scrollTop;
+    const {
+      scrollHeight,
+      clientHeight
+    } = scrollEl;
+    const thumbHeight = thumbEl.offsetHeight;
+    const scrollRatio = (scrollHeight - clientHeight) / (clientHeight - thumbHeight);
+    const onMove = ev => {
+      scrollEl.scrollTop = startScrollTop + (ev.clientY - startY) * scrollRatio;
+    };
+    const onUp = () => {
+      areaEl?.removeAttribute('data-dragging');
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  };
+  if (fixedHeader && maxHeight) {
+    return (0, _jsxRuntime.jsxs)("div", {
+      ref: ref,
+      className: "ncua-table-wrapper",
+      children: [(0, _jsxRuntime.jsxs)("div", {
+        className: tableClasses,
+        ...rest,
+        children: [(0, _jsxRuntime.jsxs)("div", {
+          ref: scrollAreaRef,
+          className: "ncua-table__scroll-area",
+          children: [(0, _jsxRuntime.jsx)("div", {
+            ref: scrollContainerRef,
+            className: "ncua-table__scroll-container",
+            style: scrollStyle,
+            children: (0, _jsxRuntime.jsxs)("table", {
+              className: "ncua-table__table",
+              role: "table",
+              children: [colGroupContent, headerContent, tableContent]
+            })
+          }), (0, _jsxRuntime.jsx)("div", {
+            className: "ncua-table__scrollbar",
+            "aria-hidden": "true",
+            children: (0, _jsxRuntime.jsx)("div", {
+              ref: thumbRef,
+              className: "ncua-table__scrollbar-thumb",
+              onMouseDown: handleThumbMouseDown
+            })
+          })]
+        }), footerContent]
+      }), paginationContent]
+    });
+  }
+  const tableElement = (0, _jsxRuntime.jsxs)("table", {
     className: "ncua-table__table",
     role: "table",
-    children: tableContent
+    children: [colGroupContent, headerContent, tableContent]
   });
   return (0, _jsxRuntime.jsxs)("div", {
     ref: ref,
@@ -244,11 +360,7 @@ const TableComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref0, ref) => {
     children: [(0, _jsxRuntime.jsxs)("div", {
       className: tableClasses,
       ...rest,
-      children: [fixedHeader && maxHeight ? (0, _jsxRuntime.jsx)("div", {
-        className: "ncua-table__scroll-container",
-        style: scrollStyle,
-        children: tableElement
-      }) : tableElement, footerContent]
+      children: [tableElement, footerContent]
     }), paginationContent]
   });
 });

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

@@ -140,6 +140,7 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
   useImperativeHandle(ref, () => internalRef.current, []);
   const trailingElement = {
     type: 'custom',
+    placement: 'inside',
     children: _jsx("div", {
       className: "ncua-input__icon-wrap ncua-input__right-icon",
       onClick: showAllItem,

package/dist/esm/src/components/table/Table.js

@@ -1,8 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronSelectorVertical, ChevronUp } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
-import { Children, forwardRef } from 'react';
+import { Children, forwardRef, useEffect, useRef } from 'react';
 // ──────────────────────────────────────────────
+// $table-header-height 와 동기화 — sticky thead가 차지하는 높이를 maxHeight에 보상
+const TABLE_HEADER_HEIGHT = 40;
+// 스크롤바 트랙 상하 여백 합계 (top 8px + bottom 8px) — SCSS &--fixed-header &__scrollbar 오프셋과 동기화
+const SCROLLBAR_TRACK_OFFSET = 16;
+const SCROLLBAR_THUMB_MIN_HEIGHT = 40;
 // Sort Icons (@ncds/ui-admin-icon)
 // ──────────────────────────────────────────────
 const SORT_ICONS = {
@@ -104,8 +109,18 @@ const Cell = /*#__PURE__*/forwardRef((_ref5, ref) => {
   let {
     children,
     className,
+    isHeader,
     ...rest
   } = _ref5;
+  if (isHeader) {
+    return _jsx("th", {
+      ref: ref,
+      scope: "row",
+      className: classNames('ncua-table__cell', className),
+      ...rest,
+      children: children
+    });
+  }
   return _jsx("td", {
     ref: ref,
     className: classNames('ncua-table__cell', className),
@@ -146,14 +161,13 @@ const ColGroup = _ref8 => {
     return width;
   };
   return _jsx("colgroup", {
-    children: widths.map((width, index) => {
-      const duplicateCount = widths.slice(0, index).filter(v => v === width).length;
-      return _jsx("col", {
-        style: {
-          width: resolveColWidth(width)
-        }
-      }, `col-${width}-${duplicateCount}`);
-    })
+    children: widths.map((width, index) =>
+    // biome-ignore lint/suspicious/noArrayIndexKey: colgroup columns never reorder or change
+    _jsx("col", {
+      style: {
+        width: resolveColWidth(width)
+      }
+    }, index))
   });
 };
 ColGroup.displayName = 'Table.ColGroup';
@@ -182,12 +196,18 @@ const categorizeChild = (child, result) => {
     result.footerContent.push(child);
   } else if (child.type === Pagination) {
     result.paginationContent.push(child);
+  } else if (child.type === Header) {
+    result.headerContent.push(child);
+  } else if (child.type === ColGroup) {
+    result.colGroupContent.push(child);
   } else {
     result.tableContent.push(child);
   }
 };
 const sortChildren = children => {
   const result = {
+    headerContent: [],
+    colGroupContent: [],
     tableContent: [],
     footerContent: [],
     paginationContent: []
@@ -219,17 +239,113 @@ const TableComponent = /*#__PURE__*/forwardRef((_ref0, ref) => {
     'ncua-table--selectable': selectable
   });
   const {
+    headerContent,
+    colGroupContent,
     tableContent,
     footerContent,
     paginationContent
   } = sortChildren(children);
   const scrollStyle = fixedHeader && maxHeight ? {
-    maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight
+    maxHeight: typeof maxHeight === 'number' ? `${maxHeight + TABLE_HEADER_HEIGHT}px` : `calc(${maxHeight} + ${TABLE_HEADER_HEIGHT}px)`
   } : undefined;
-  const tableElement = _jsx("table", {
+  // Custom scrollbar refs (used only in fixed-header mode)
+  const scrollContainerRef = useRef(null);
+  const scrollAreaRef = useRef(null);
+  const thumbRef = useRef(null);
+  useEffect(() => {
+    if (!fixedHeader || !maxHeight) return;
+    const scrollEl = scrollContainerRef.current;
+    const thumbEl = thumbRef.current;
+    if (!scrollEl || !thumbEl) return;
+    const update = () => {
+      const {
+        scrollTop,
+        scrollHeight,
+        clientHeight
+      } = scrollEl;
+      if (scrollHeight <= clientHeight) {
+        thumbEl.style.height = '0';
+        return;
+      }
+      const trackHeight = (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`;
+      thumbEl.style.transform = `translateY(${thumbTop}px)`;
+    };
+    scrollEl.addEventListener('scroll', update, {
+      passive: true
+    });
+    const observer = new ResizeObserver(update);
+    observer.observe(scrollEl);
+    update();
+    return () => {
+      scrollEl.removeEventListener('scroll', update);
+      observer.disconnect();
+    };
+  }, [fixedHeader, maxHeight]);
+  const handleThumbMouseDown = e => {
+    e.preventDefault();
+    const scrollEl = scrollContainerRef.current;
+    const thumbEl = thumbRef.current;
+    const areaEl = scrollAreaRef.current;
+    if (!scrollEl || !thumbEl) return;
+    areaEl?.setAttribute('data-dragging', '');
+    const startY = e.clientY;
+    const startScrollTop = scrollEl.scrollTop;
+    const {
+      scrollHeight,
+      clientHeight
+    } = scrollEl;
+    const thumbHeight = thumbEl.offsetHeight;
+    const scrollRatio = (scrollHeight - clientHeight) / (clientHeight - thumbHeight);
+    const onMove = ev => {
+      scrollEl.scrollTop = startScrollTop + (ev.clientY - startY) * scrollRatio;
+    };
+    const onUp = () => {
+      areaEl?.removeAttribute('data-dragging');
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  };
+  if (fixedHeader && maxHeight) {
+    return _jsxs("div", {
+      ref: ref,
+      className: "ncua-table-wrapper",
+      children: [_jsxs("div", {
+        className: tableClasses,
+        ...rest,
+        children: [_jsxs("div", {
+          ref: scrollAreaRef,
+          className: "ncua-table__scroll-area",
+          children: [_jsx("div", {
+            ref: scrollContainerRef,
+            className: "ncua-table__scroll-container",
+            style: scrollStyle,
+            children: _jsxs("table", {
+              className: "ncua-table__table",
+              role: "table",
+              children: [colGroupContent, headerContent, tableContent]
+            })
+          }), _jsx("div", {
+            className: "ncua-table__scrollbar",
+            "aria-hidden": "true",
+            children: _jsx("div", {
+              ref: thumbRef,
+              className: "ncua-table__scrollbar-thumb",
+              onMouseDown: handleThumbMouseDown
+            })
+          })]
+        }), footerContent]
+      }), paginationContent]
+    });
+  }
+  const tableElement = _jsxs("table", {
     className: "ncua-table__table",
     role: "table",
-    children: tableContent
+    children: [colGroupContent, headerContent, tableContent]
   });
   return _jsxs("div", {
     ref: ref,
@@ -237,11 +353,7 @@ const TableComponent = /*#__PURE__*/forwardRef((_ref0, ref) => {
     children: [_jsxs("div", {
       className: tableClasses,
       ...rest,
-      children: [fixedHeader && maxHeight ? _jsx("div", {
-        className: "ncua-table__scroll-container",
-        style: scrollStyle,
-        children: tableElement
-      }) : tableElement, footerContent]
+      children: [tableElement, footerContent]
     }), paginationContent]
   });
 });

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

@@ -106,6 +106,7 @@ const ComboBox = forwardRef(({ placeholder = '검색하세요', id, className, h
     useImperativeHandle(ref, () => internalRef.current, []);
     const trailingElement = {
         type: 'custom',
+        placement: 'inside',
         children: (_jsx("div", { className: "ncua-input__icon-wrap ncua-input__right-icon", onClick: showAllItem, children: _jsx(Button, { label: "\uC804\uCCB4", hierarchy: "text", size: "xxs", leadingIcon: { type: 'icon', icon: ChevronSelectorVertical } }) })),
     };
     const leadingElement = {

package/dist/temp/src/components/table/Table.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import type { SortDirection, TableBodyProps, TableCellProps, TableColGroupProps, TableEmptyProps, TableFooterProps, TableHeaderProps, TablePaginationProps } from './types';
+import type { SortDirection, TableBodyProps, TableColGroupProps, TableEmptyProps, TableFooterProps, TableHeaderProps, TablePaginationProps } from './types';
 export declare const Table: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     type?: import("./types").TableType | undefined;
     fixedHeader?: boolean | undefined;
@@ -25,7 +25,9 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<impor
         onSort?: (() => void) | undefined;
         width?: string | number | undefined;
     } & import("react").RefAttributes<HTMLTableCellElement>>;
-    Cell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+    Cell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & {
+        isHeader?: boolean | undefined;
+    } & import("react").RefAttributes<HTMLTableCellElement>>;
     Footer: {
         ({ children, className }: TableFooterProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;

package/dist/temp/src/components/table/Table.js

@@ -1,8 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronSelectorVertical, ChevronUp } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
-import { Children, forwardRef } from 'react';
+import { Children, forwardRef, useEffect, useRef, } from 'react';
 // ──────────────────────────────────────────────
+// $table-header-height 와 동기화 — sticky thead가 차지하는 높이를 maxHeight에 보상
+const TABLE_HEADER_HEIGHT = 40;
+// 스크롤바 트랙 상하 여백 합계 (top 8px + bottom 8px) — SCSS &--fixed-header &__scrollbar 오프셋과 동기화
+const SCROLLBAR_TRACK_OFFSET = 16;
+const SCROLLBAR_THUMB_MIN_HEIGHT = 40;
 // Sort Icons (@ncds/ui-admin-icon)
 // ──────────────────────────────────────────────
 const SORT_ICONS = {
@@ -36,7 +41,12 @@ const HeaderCell = forwardRef(({ children, className, sortDirection, onSort, wid
         }), style: { ...style, width }, "aria-sort": isSortable ? ARIA_SORT_MAP[sortDirection] : undefined, onClick: isSortable ? onSort : undefined, ...rest, children: isSortable && SortIcon ? (_jsxs("span", { className: "ncua-table__header-cell-inner", children: [_jsx("span", { className: "ncua-table__header-cell-text", children: children }), _jsx("span", { className: "ncua-table__sort-icon", children: _jsx(SortIcon, { width: 16, height: 16 }) })] })) : (children) }));
 });
 HeaderCell.displayName = 'Table.HeaderCell';
-const Cell = forwardRef(({ children, className, ...rest }, ref) => (_jsx("td", { ref: ref, className: classNames('ncua-table__cell', className), ...rest, children: children })));
+const Cell = forwardRef(({ children, className, isHeader, ...rest }, ref) => {
+    if (isHeader) {
+        return (_jsx("th", { ref: ref, scope: "row", className: classNames('ncua-table__cell', className), ...rest, children: children }));
+    }
+    return (_jsx("td", { ref: ref, className: classNames('ncua-table__cell', className), ...rest, children: children }));
+});
 Cell.displayName = 'Table.Cell';
 const Footer = ({ children, className }) => (_jsx("div", { className: classNames('ncua-table__footer', className), children: children }));
 Footer.displayName = 'Table.Footer';
@@ -50,10 +60,9 @@ const ColGroup = ({ widths }) => {
             return `${width}px`;
         return width;
     };
-    return (_jsx("colgroup", { children: widths.map((width, index) => {
-            const duplicateCount = widths.slice(0, index).filter((v) => v === width).length;
-            return _jsx("col", { style: { width: resolveColWidth(width) } }, `col-${width}-${duplicateCount}`);
-        }) }));
+    return (_jsx("colgroup", { children: widths.map((width, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: colgroup columns never reorder or change
+        _jsx("col", { style: { width: resolveColWidth(width) } }, index))) }));
 };
 ColGroup.displayName = 'Table.ColGroup';
 const Empty = ({ colSpan, children }) => (_jsx("tr", { children: _jsx("td", { colSpan: colSpan, className: "ncua-table__empty", role: "status", "aria-live": "polite", children: children || '등록된 게시물이 없습니다.' }) }));
@@ -69,12 +78,24 @@ const categorizeChild = (child, result) => {
     else if (child.type === Pagination) {
         result.paginationContent.push(child);
     }
+    else if (child.type === Header) {
+        result.headerContent.push(child);
+    }
+    else if (child.type === ColGroup) {
+        result.colGroupContent.push(child);
+    }
     else {
         result.tableContent.push(child);
     }
 };
 const sortChildren = (children) => {
-    const result = { tableContent: [], footerContent: [], paginationContent: [] };
+    const result = {
+        headerContent: [],
+        colGroupContent: [],
+        tableContent: [],
+        footerContent: [],
+        paginationContent: [],
+    };
     Children.forEach(children, (child) => {
         categorizeChild(child, result);
     });
@@ -91,12 +112,75 @@ const TableComponent = forwardRef(({ type = 'horizontal', fixedHeader = false, m
         'ncua-table--hoverable': hoverable && type === 'horizontal',
         'ncua-table--selectable': selectable,
     });
-    const { tableContent, footerContent, paginationContent } = sortChildren(children);
+    const { headerContent, colGroupContent, tableContent, footerContent, paginationContent } = sortChildren(children);
     const scrollStyle = fixedHeader && maxHeight
-        ? { maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight }
+        ? {
+            maxHeight: typeof maxHeight === 'number'
+                ? `${maxHeight + TABLE_HEADER_HEIGHT}px`
+                : `calc(${maxHeight} + ${TABLE_HEADER_HEIGHT}px)`,
+        }
         : undefined;
-    const tableElement = (_jsx("table", { className: "ncua-table__table", role: "table", children: tableContent }));
-    return (_jsxs("div", { ref: ref, className: "ncua-table-wrapper", children: [_jsxs("div", { className: tableClasses, ...rest, children: [fixedHeader && maxHeight ? (_jsx("div", { className: "ncua-table__scroll-container", style: scrollStyle, children: tableElement })) : (tableElement), footerContent] }), paginationContent] }));
+    // Custom scrollbar refs (used only in fixed-header mode)
+    const scrollContainerRef = useRef(null);
+    const scrollAreaRef = useRef(null);
+    const thumbRef = useRef(null);
+    useEffect(() => {
+        if (!fixedHeader || !maxHeight)
+            return;
+        const scrollEl = scrollContainerRef.current;
+        const thumbEl = thumbRef.current;
+        if (!scrollEl || !thumbEl)
+            return;
+        const update = () => {
+            const { scrollTop, scrollHeight, clientHeight } = scrollEl;
+            if (scrollHeight <= clientHeight) {
+                thumbEl.style.height = '0';
+                return;
+            }
+            const trackHeight = (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`;
+            thumbEl.style.transform = `translateY(${thumbTop}px)`;
+        };
+        scrollEl.addEventListener('scroll', update, { passive: true });
+        const observer = new ResizeObserver(update);
+        observer.observe(scrollEl);
+        update();
+        return () => {
+            scrollEl.removeEventListener('scroll', update);
+            observer.disconnect();
+        };
+    }, [fixedHeader, maxHeight]);
+    const handleThumbMouseDown = (e) => {
+        e.preventDefault();
+        const scrollEl = scrollContainerRef.current;
+        const thumbEl = thumbRef.current;
+        const areaEl = scrollAreaRef.current;
+        if (!scrollEl || !thumbEl)
+            return;
+        areaEl?.setAttribute('data-dragging', '');
+        const startY = e.clientY;
+        const startScrollTop = scrollEl.scrollTop;
+        const { scrollHeight, clientHeight } = scrollEl;
+        const thumbHeight = thumbEl.offsetHeight;
+        const scrollRatio = (scrollHeight - clientHeight) / (clientHeight - thumbHeight);
+        const onMove = (ev) => {
+            scrollEl.scrollTop = startScrollTop + (ev.clientY - startY) * scrollRatio;
+        };
+        const onUp = () => {
+            areaEl?.removeAttribute('data-dragging');
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    };
+    if (fixedHeader && maxHeight) {
+        return (_jsxs("div", { ref: ref, className: "ncua-table-wrapper", children: [_jsxs("div", { className: tableClasses, ...rest, children: [_jsxs("div", { ref: scrollAreaRef, className: "ncua-table__scroll-area", children: [_jsx("div", { ref: scrollContainerRef, className: "ncua-table__scroll-container", style: scrollStyle, children: _jsxs("table", { className: "ncua-table__table", role: "table", children: [colGroupContent, headerContent, tableContent] }) }), _jsx("div", { className: "ncua-table__scrollbar", "aria-hidden": "true", children: _jsx("div", { ref: thumbRef, className: "ncua-table__scrollbar-thumb", onMouseDown: handleThumbMouseDown }) })] }), footerContent] }), paginationContent] }));
+    }
+    const tableElement = (_jsxs("table", { className: "ncua-table__table", role: "table", children: [colGroupContent, headerContent, tableContent] }));
+    return (_jsxs("div", { ref: ref, className: "ncua-table-wrapper", children: [_jsxs("div", { className: tableClasses, ...rest, children: [tableElement, footerContent] }), paginationContent] }));
 });
 TableComponent.displayName = 'Table';
 // ──────────────────────────────────────────────

package/dist/temp/src/components/table/types.d.ts

@@ -27,7 +27,9 @@ export type TableHeaderCellProps = Omit<ComponentProps<'th'>, 'ref'> & {
     onSort?: () => void;
     width?: string | number;
 };
-export type TableCellProps = Omit<ComponentProps<'td'>, 'ref'>;
+export type TableCellProps = Omit<ComponentProps<'td'>, 'ref'> & {
+    isHeader?: boolean;
+};
 export type TableFooterProps = {
     children: ReactNode;
     className?: string;

package/dist/types/src/components/table/Table.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import type { SortDirection, TableBodyProps, TableCellProps, TableColGroupProps, TableEmptyProps, TableFooterProps, TableHeaderProps, TablePaginationProps } from './types';
+import type { SortDirection, TableBodyProps, TableColGroupProps, TableEmptyProps, TableFooterProps, TableHeaderProps, TablePaginationProps } from './types';
 export declare const Table: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     type?: import("./types").TableType | undefined;
     fixedHeader?: boolean | undefined;
@@ -25,7 +25,9 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<impor
         onSort?: (() => void) | undefined;
         width?: string | number | undefined;
     } & import("react").RefAttributes<HTMLTableCellElement>>;
-    Cell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+    Cell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & {
+        isHeader?: boolean | undefined;
+    } & import("react").RefAttributes<HTMLTableCellElement>>;
     Footer: {
         ({ children, className }: TableFooterProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;

package/dist/types/src/components/table/types.d.ts

@@ -27,7 +27,9 @@ export type TableHeaderCellProps = Omit<ComponentProps<'th'>, 'ref'> & {
     onSort?: () => void;
     width?: string | number;
 };
-export type TableCellProps = Omit<ComponentProps<'td'>, 'ref'>;
+export type TableCellProps = Omit<ComponentProps<'td'>, 'ref'> & {
+    isHeader?: boolean;
+};
 export type TableFooterProps = {
     children: ReactNode;
     className?: string;

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

@@ -960,6 +960,10 @@ button {
 .ncua-checkbox-input:has(input:disabled:checked)::before {
   background-image: var(--check-icon-disabled);
 }
+.ncua-checkbox-input.has-indeterminate :where(input) {
+  border-color: var(--gray-700);
+  background-color: var(--gray-50);
+}
 .ncua-checkbox-input.has-indeterminate::before {
   background-image: var(--indeterminate-icon);
 }
@@ -3523,8 +3527,17 @@ button {
 .ncua-pagination__before {
   margin-inline: 4px 8px;
 }
+.ncua-pagination__item {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
 .ncua-pagination__item + .ncua-pagination__item {
   margin-inline-start: 4px;
+  margin-top: 0;
 }
 .ncua-pagination__page-num {
   font-size: 14px;
@@ -5584,29 +5597,53 @@ button {
   box-shadow: var(--shadow-xs);
   overflow: hidden;
 }
+.ncua-table__scroll-area {
+  position: relative;
+}
+.ncua-table__scroll-area:hover .ncua-table__scrollbar, .ncua-table__scroll-area[data-dragging] .ncua-table__scrollbar {
+  opacity: 1;
+}
 .ncua-table__scroll-container {
   width: 100%;
   overflow-y: auto;
+  scrollbar-width: none;
 }
 .ncua-table__scroll-container::-webkit-scrollbar {
-  width: 16px;
+  display: none;
 }
-.ncua-table__scroll-container::-webkit-scrollbar-track {
-  background: transparent;
-  padding: 4px;
-  margin-top: 40px;
+.ncua-table__scrollbar {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  bottom: 2px;
+  width: 6px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+  border-radius: 8px;
 }
-.ncua-table__scroll-container::-webkit-scrollbar-thumb {
-  background: var(--gray-200);
+.ncua-table__scrollbar-thumb {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+  background: var(--gray-100);
   border-radius: 8px;
-  border: 5px solid transparent;
-  background-clip: padding-box;
-  min-height: 40px;
+  cursor: pointer;
+  pointer-events: auto;
+}
+.ncua-table__scrollbar-thumb:hover {
+  background: var(--gray-200);
+}
+.ncua-table__scrollbar-thumb:active {
+  background: var(--gray-300);
+  cursor: grabbing;
 }
 .ncua-table__table {
   display: table;
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
   border-spacing: 0;
   table-layout: fixed;
   margin-bottom: 0;
@@ -5617,6 +5654,7 @@ button {
 }
 .ncua-table__header tr {
   border-bottom: none;
+  height: 40px;
 }
 .ncua-table__header-cell {
   padding: 0 16px;
@@ -5651,9 +5689,16 @@ button {
 .ncua-table__header-cell-text {
   white-space: nowrap;
 }
+.ncua-table .ncua-checkbox-input,
+.ncua-table .ncua-radio-input {
+  vertical-align: middle;
+}
 .ncua-table .ncua-checkbox-input::before {
   pointer-events: none;
 }
+.ncua-table__header-cell:has(> .ncua-checkbox-input), .ncua-table__header-cell:has(> .ncua-radio-input), .ncua-table__cell:has(> .ncua-checkbox-input), .ncua-table__cell:has(> .ncua-radio-input) {
+  line-height: 0;
+}
 .ncua-table__sort-icon {
   display: inline-flex;
   align-items: center;
@@ -5676,20 +5721,21 @@ button {
   background: var(--base-white);
 }
 .ncua-table__row {
-  min-height: 48px;
+  height: 48px;
   background: var(--base-white);
   transition: background-color 0.15s ease;
 }
 .ncua-table__row:nth-child(2n), .ncua-table__row:nth-child(2n+1) {
   background-color: var(--base-white);
 }
-.ncua-table__row td {
+.ncua-table__row td,
+.ncua-table__row th.ncua-table__cell {
   border-bottom: 1px solid var(--gray-100);
 }
-.ncua-table__row:last-child td {
+.ncua-table__row:last-child td, .ncua-table__row:last-child th.ncua-table__cell {
   border-bottom: none;
 }
-.ncua-table__row--selected {
+.ncua-table__row--selected:nth-child(n) {
   background: var(--gray-50);
 }
 .ncua-table__row--selected td:first-child {
@@ -5705,23 +5751,39 @@ button {
   background: var(--base-black);
   z-index: 1;
 }
-.ncua-table__row--warning {
-  background: var(--warning-50, #fffaeb);
+.ncua-table__row--warning.ncua-table__row--selected:nth-child(n) {
+  background: var(--orange-50);
 }
-.ncua-table__row--warning td {
-  border-bottom-color: var(--warning-200, #fedf89);
+.ncua-table__row--warning.ncua-table__row--selected td,
+.ncua-table__row--warning.ncua-table__row--selected th {
+  background: var(--orange-50);
 }
-.ncua-table__row--error {
-  background: var(--error-50, #fef3f2);
+.ncua-table__row--error.ncua-table__row--selected:nth-child(n) {
+  background: var(--primary-red-50);
 }
-.ncua-table__row--error td {
-  border-bottom-color: var(--error-200, #fecdca);
+.ncua-table__row--error.ncua-table__row--selected td,
+.ncua-table__row--error.ncua-table__row--selected th {
+  background: var(--primary-red-50);
 }
-.ncua-table--hoverable .ncua-table__row:not(.ncua-table__row--selected):not(.ncua-table__row--warning):not(.ncua-table__row--error):hover {
-  background: var(--gray-50);
+.ncua-table--hoverable .ncua-table__row:not(.ncua-table__row--selected):hover {
+  background: color-mix(in srgb, var(--gray-50) 40%, transparent);
 }
-.ncua-table--hoverable .ncua-table__row--selected:hover {
-  background: var(--gray-100);
+.ncua-table--hoverable .ncua-table__row--selected:not(.ncua-table__row--warning):not(.ncua-table__row--error):hover {
+  background: color-mix(in srgb, var(--gray-200) 10%, transparent);
+}
+.ncua-table--hoverable .ncua-table__row--selected.ncua-table__row--warning:hover {
+  background: var(--base-white);
+}
+.ncua-table--hoverable .ncua-table__row--selected.ncua-table__row--warning:hover td,
+.ncua-table--hoverable .ncua-table__row--selected.ncua-table__row--warning:hover th {
+  background: color-mix(in srgb, var(--orange-200) 10%, transparent);
+}
+.ncua-table--hoverable .ncua-table__row--selected.ncua-table__row--error:hover {
+  background: var(--base-white);
+}
+.ncua-table--hoverable .ncua-table__row--selected.ncua-table__row--error:hover td,
+.ncua-table--hoverable .ncua-table__row--selected.ncua-table__row--error:hover th {
+  background: color-mix(in srgb, var(--primary-red-200) 10%, transparent);
 }
 .ncua-table__cell {
   padding: 10px 8px;
@@ -5732,13 +5794,13 @@ button {
   text-align: center;
   vertical-align: middle;
   border-right: 1px solid var(--gray-100);
-  min-height: 48px;
+  height: 48px;
   word-break: break-word;
 }
 .ncua-table__cell:last-child {
   border-right: none;
 }
-.ncua-table__checkbox-cell {
+.ncua-table__checkbox-cell, .ncua-table__radio-cell {
   width: 56px;
   min-width: 56px;
   max-width: 56px;
@@ -5746,13 +5808,13 @@ button {
   vertical-align: middle;
   border-right: 1px solid var(--gray-100);
 }
-.ncua-table__checkbox-cell--header {
+.ncua-table__checkbox-cell--header, .ncua-table__radio-cell--header {
   padding: 0 16px;
   background: var(--gray-100);
   border-right-color: var(--gray-200);
   border-bottom: 1px solid var(--gray-200);
 }
-.ncua-table__checkbox-cell--body {
+.ncua-table__checkbox-cell--body, .ncua-table__radio-cell--body {
   padding: 12px 16px;
   height: 48px;
 }
@@ -5803,16 +5865,18 @@ button {
 .ncua-table--selectable .ncua-table__table {
   background: var(--base-white);
 }
+.ncua-table--selectable .ncua-table__scroll-area,
 .ncua-table--selectable .ncua-table__scroll-container,
-.ncua-table--selectable > .ncua-table__table {
+.ncua-table--selectable > .ncua-table__table:not(.ncua-table__table--head) {
   box-shadow: 0 1px 0 0 var(--gray-200);
 }
 .ncua-table--selectable:has(.ncua-table__footer) {
   padding-bottom: 0;
   background: var(--base-white);
 }
+.ncua-table--selectable:has(.ncua-table__footer) .ncua-table__scroll-area,
 .ncua-table--selectable:has(.ncua-table__footer) .ncua-table__scroll-container,
-.ncua-table--selectable:has(.ncua-table__footer) > .ncua-table__table {
+.ncua-table--selectable:has(.ncua-table__footer) > .ncua-table__table:not(.ncua-table__table--head) {
   box-shadow: none;
 }
 .ncua-table--in-data-grid.ncua-table--selectable .ncua-table__header-cell:first-child,
@@ -5821,40 +5885,64 @@ button {
   border-left: none;
 }
 .ncua-table--in-data-grid.ncua-table--selectable.ncua-table--fixed-header .ncua-table__header-cell:first-child {
-  box-shadow: inset 0 -1px 0 0 var(--gray-200), inset -1px 0 0 0 var(--gray-200);
+  border-left: none;
 }
 .ncua-table--fixed-header {
   position: relative;
-}
-.ncua-table--fixed-header::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 16px;
-  height: 40px;
-  background: var(--gray-100);
-  border-bottom: 1px solid var(--gray-200);
-  z-index: 11;
-  pointer-events: none;
+  overflow: clip;
 }
 .ncua-table--fixed-header .ncua-table__header-cell {
   position: sticky;
   top: 0;
   z-index: 10;
-  border-bottom: none;
-  border-right: none;
-  box-shadow: inset 0 -1px 0 0 var(--gray-200), inset -1px 0 0 0 var(--gray-200);
+  padding: 0 16px;
+  height: 40px;
 }
-.ncua-table--fixed-header .ncua-table__header-cell:last-child {
-  border-right: none;
-  box-shadow: inset 0 -1px 0 0 var(--gray-200);
+.ncua-table--fixed-header .ncua-table__scrollbar {
+  top: calc(40px + 8px);
+  right: 4px;
+  bottom: 8px;
+}
+.ncua-table--horizontal .ncua-table__header-cell {
+  height: 40px;
+  min-height: 40px;
+}
+.ncua-table--vertical {
+  overflow: visible;
+}
+.ncua-table--vertical .ncua-table__scroll-container {
+  overflow: visible;
+}
+.ncua-table--vertical .ncua-table__body > .ncua-table__row:first-child > .ncua-table__cell:first-child {
+  border-top-left-radius: var(--border-radius-md);
+}
+.ncua-table--vertical .ncua-table__body > .ncua-table__row:first-child > .ncua-table__cell:last-child {
+  border-top-right-radius: var(--border-radius-md);
 }
-.ncua-table--fixed-header.ncua-table--selectable .ncua-table__header-cell:first-child {
-  box-shadow: inset 0 -1px 0 0 var(--gray-200), inset -1px 0 0 0 var(--gray-200), inset 1px 0 0 0 var(--gray-100);
+.ncua-table--vertical .ncua-table__body > .ncua-table__row:last-child > .ncua-table__cell:first-child {
+  border-bottom-left-radius: var(--border-radius-md);
 }
-.ncua-table--vertical .ncua-table__row td:first-child,
-.ncua-table--vertical .ncua-table__row th:first-child {
+.ncua-table--vertical .ncua-table__body > .ncua-table__row:last-child > .ncua-table__cell:last-child {
+  border-bottom-right-radius: var(--border-radius-md);
+}
+.ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row:first-child > .ncua-table__cell:first-child {
+  border-top-left-radius: 0;
+}
+.ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row:first-child > .ncua-table__cell:last-child {
+  border-top-right-radius: 0;
+}
+.ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row:last-child > .ncua-table__cell:first-child {
+  border-bottom-left-radius: 0;
+}
+.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 {
+  height: 48px;
+}
+.ncua-table--vertical .ncua-table__body > .ncua-table__row td:first-child,
+.ncua-table--vertical .ncua-table__body > .ncua-table__row th:first-child {
   width: 240px;
   min-width: 240px;
   max-width: 240px;
@@ -5867,12 +5955,31 @@ button {
   background: var(--gray-50);
   border-right: 1px solid var(--gray-100);
 }
-.ncua-table--vertical .ncua-table__row td:last-child,
-.ncua-table--vertical .ncua-table__row th:last-child {
+.ncua-table--vertical .ncua-table__body > .ncua-table__row td:last-child,
+.ncua-table--vertical .ncua-table__body > .ncua-table__row th:last-child {
   padding: 10px 16px;
   text-align: left;
   font-weight: var(--font-weights-commerce-sans-4);
 }
+.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;
+  min-width: 0;
+  max-width: none;
+  padding: 10px 8px;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-4);
+  line-height: var(--line-heights-xs);
+  text-align: center;
+  background: var(--base-white);
+  border-right: 1px solid var(--gray-100);
+}
+.ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row td:last-child,
+.ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row th:last-child {
+  padding: 10px 8px;
+  text-align: center;
+  font-weight: var(--font-weights-commerce-sans-4);
+}
 .ncua-table--vertical .ncua-table__required {
   color: var(--primary-red-500, #ec1d31);
   font-size: var(--font-size-sm);

package/package.json

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