@ncds/ui-admin 1.8.9 → 1.8.12

package/dist/esm/src/components/navigation/context-tab/ContextTab.js

@@ -0,0 +1,226 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, ChevronLeft, ChevronRight, Menu01 } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../../action/button/Button';
+import { Badge } from '../../feedback-and-status/badge/Badge';
+import { useContextTabScroll } from './useContextTabScroll';
+const DEFAULT_VISIBLE_TABS_COUNT = 7; // Figma 시안 정합 — Tab Bar 한 페이지 노출 탭 수
+// 컨트롤 버튼은 Button(onlyIcon)으로 렌더한다. 명세 편차: §2.4는 32×32를 명시하나
+// Button 사이즈에 32가 없어 아이콘 16px이 맞는 xs(28×28)를 사용한다. (명세 현행화 대기)
+const CONTROL_BUTTON_SIZE = 'xs';
+const CHECK_ICON_SIZE = 14;
+const MIN_VISIBLE_CONTEXTS = 2;
+/**
+ * 컨텍스트 항목의 신규(N) 배지를 Tab Bar·Dropdown 공통으로 렌더한다.
+ * Badge의 `new-badge` 타입(신규 콘텐츠 전용, 색·크기 고정)을 사용한다.
+ */
+const renderItemBadges = item => {
+  if (!item) return null;
+  if (item.isNew) return _jsx(Badge, {
+    type: "new-badge",
+    size: "sm"
+  });
+  if (item.badgeLabel) return _jsx(Badge, {
+    type: "pill-outline",
+    label: item.badgeLabel,
+    size: "xs"
+  });
+  return null;
+};
+/**
+ * 스크린리더용 접근성 레이블. N 배지는 시각 전용(아이콘)이라 SR이 의미를 못 읽으므로,
+ * "신규"를 풀어 aria-label에 합성한다 (DES-SPEC-030-1 §7). 신규가 아니면 undefined를 반환해
+ * 버튼의 보이는 텍스트가 그대로 접근성 이름이 되게 한다.
+ */
+const getAccessibleLabel = item => item.isNew ? `${item.label}, 신규` : undefined;
+const ContextTab = _ref => {
+  let {
+    menus = [],
+    activeTab,
+    onTabChange,
+    visibleTabsCount = DEFAULT_VISIBLE_TABS_COUNT,
+    className
+  } = _ref;
+  const containerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  // Tab Bar의 가로 스크롤·페이징(에지 계산·활성 탭 자동 스크롤)은 훅으로 분리한다.
+  const {
+    barRef,
+    isBeginning,
+    isEnd,
+    scrollByPage
+  } = useContextTabScroll({
+    activeTab,
+    menus,
+    visibleTabsCount
+  });
+  // Dropdown panel 닫기 — 외부 클릭 / ESC. ESC는 trigger로 포커스 복원, 외부 클릭은 클릭 위치 유지 (DES-SPEC-030-1 §1.5/§7)
+  useEffect(() => {
+    if (!isOpen) return;
+    const handlePointerDown = event => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    const handleKeyDown = event => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener('mousedown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen]);
+  // Dropdown panel이 열리면 첫(비활성 아닌) 항목으로 포커스를 이동한다 (DES-SPEC-030-1 §7)
+  useEffect(() => {
+    if (!isOpen) return;
+    const firstOption = panelRef.current?.querySelector('.ncua-context-tab__option:not(:disabled)');
+    firstOption?.focus();
+  }, [isOpen]);
+  // 컨텍스트가 2개 미만이면 ContextTab을 노출하지 않는다 (DES-SPEC-030-1 §1.2 / F6)
+  if (menus.length < MIN_VISIBLE_CONTEXTS) return null;
+  const handleSelect = item => {
+    if (item.disabled) return;
+    onTabChange?.(item.id);
+  };
+  const handleOptionSelect = item => {
+    if (item.disabled) return;
+    onTabChange?.(item.id);
+    setIsOpen(false);
+    triggerRef.current?.focus();
+  };
+  const renderOption = item => {
+    const isActive = item.id === activeTab;
+    return _jsx("li", {
+      role: "none",
+      children: _jsxs("button", {
+        type: "button",
+        role: "menuitem",
+        "aria-current": isActive || undefined,
+        "aria-disabled": item.disabled || undefined,
+        "aria-label": getAccessibleLabel(item),
+        disabled: item.disabled,
+        className: classNames('ncua-context-tab__option', {
+          'is-active': isActive
+        }),
+        onClick: () => handleOptionSelect(item),
+        children: [_jsx("span", {
+          className: "ncua-context-tab__option-label",
+          title: item.label,
+          children: item.label
+        }), renderItemBadges(item), isActive && _jsx(Check, {
+          className: "ncua-context-tab__option-check",
+          width: CHECK_ICON_SIZE,
+          height: CHECK_ICON_SIZE
+        })]
+      })
+    }, item.id);
+  };
+  // Dropdown panel은 2-column이며, 좌측 column = 짝수 인덱스 / 우측 column = 홀수 인덱스로
+  // row-major 읽기 순서를 유지한다 (Figma 시안 정합).
+  const leftColumn = menus.filter((_, index) => index % 2 === 0);
+  const rightColumn = menus.filter((_, index) => index % 2 === 1);
+  // 한 페이지 안에 모두 들어가면(스크롤 불필요) 탭이 영역을 균등하게 꽉 채우도록 한다.
+  // 초과 시에는 visibleTabsCount 등분 고정 폭으로 두고 가로 스크롤로 페이징한다.
+  const isFill = menus.length <= visibleTabsCount;
+  return _jsxs("div", {
+    ref: containerRef,
+    className: classNames('ncua-context-tab', className),
+    children: [_jsx(Button, {
+      ref: triggerRef,
+      onlyIcon: true,
+      hierarchy: "tertiary-gray",
+      size: CONTROL_BUTTON_SIZE,
+      className: "ncua-context-tab__control ncua-context-tab__control--menu",
+      label: "\uC804\uCCB4 \uCEE8\uD14D\uC2A4\uD2B8 \uBAA9\uB85D",
+      "aria-label": "\uC804\uCCB4 \uCEE8\uD14D\uC2A4\uD2B8 \uBAA9\uB85D",
+      "aria-haspopup": "menu",
+      "aria-expanded": isOpen,
+      leadingIcon: {
+        type: 'icon',
+        icon: Menu01
+      },
+      onClick: () => setIsOpen(prev => !prev)
+    }), _jsx("div", {
+      ref: barRef,
+      className: classNames('ncua-context-tab__bar', {
+        'is-fill': isFill
+      }),
+      role: "tablist",
+      style: {
+        '--ncua-context-tab-visible': visibleTabsCount
+      },
+      children: menus.map(item => {
+        const isActive = item.id === activeTab;
+        return _jsxs("button", {
+          type: "button",
+          role: "tab",
+          "aria-selected": isActive,
+          "aria-disabled": item.disabled || undefined,
+          "aria-label": getAccessibleLabel(item),
+          disabled: item.disabled,
+          title: item.label,
+          className: classNames('ncua-context-tab__tab', {
+            'is-active': isActive,
+            'is-disabled': item.disabled
+          }),
+          onClick: () => handleSelect(item),
+          children: [_jsx("span", {
+            className: "ncua-context-tab__tab-label",
+            children: item.label
+          }), renderItemBadges(item)]
+        }, item.id);
+      })
+    }), _jsxs("div", {
+      className: "ncua-context-tab__nav",
+      children: [_jsx(Button, {
+        onlyIcon: true,
+        hierarchy: "tertiary-gray",
+        size: CONTROL_BUTTON_SIZE,
+        className: "ncua-context-tab__control ncua-context-tab__control--prev",
+        label: "\uC774\uC804 \uCEE8\uD14D\uC2A4\uD2B8 \uBAA9\uB85D",
+        "aria-label": "\uC774\uC804 \uCEE8\uD14D\uC2A4\uD2B8 \uBAA9\uB85D",
+        disabled: isBeginning,
+        leadingIcon: {
+          type: 'icon',
+          icon: ChevronLeft
+        },
+        onClick: () => scrollByPage(-1)
+      }), _jsx(Button, {
+        onlyIcon: true,
+        hierarchy: "tertiary-gray",
+        size: CONTROL_BUTTON_SIZE,
+        className: "ncua-context-tab__control ncua-context-tab__control--next",
+        label: "\uB2E4\uC74C \uCEE8\uD14D\uC2A4\uD2B8 \uBAA9\uB85D",
+        "aria-label": "\uB2E4\uC74C \uCEE8\uD14D\uC2A4\uD2B8 \uBAA9\uB85D",
+        disabled: isEnd,
+        leadingIcon: {
+          type: 'icon',
+          icon: ChevronRight
+        },
+        onClick: () => scrollByPage(1)
+      })]
+    }), isOpen && _jsxs("div", {
+      ref: panelRef,
+      className: "ncua-context-tab__panel",
+      role: "menu",
+      children: [_jsx("ul", {
+        className: "ncua-context-tab__panel-column",
+        role: "none",
+        children: leftColumn.map(renderOption)
+      }), _jsx("ul", {
+        className: "ncua-context-tab__panel-column",
+        role: "none",
+        children: rightColumn.map(renderOption)
+      })]
+    })]
+  });
+};
+export { ContextTab };

package/dist/esm/src/components/navigation/context-tab/index.js

@@ -0,0 +1 @@
+export * from './ContextTab';

package/dist/esm/src/components/navigation/context-tab/useContextTabScroll.js

@@ -0,0 +1,77 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+const EDGE_THRESHOLD = 1; // 스크롤 끝 판정 시 소수점 오차 보정용 여유값(px)
+/**
+ * ContextTab Tab Bar의 네이티브 가로 스크롤·페이징 메커니즘을 담당하는 훅.
+ *
+ * - `barRef`: 스크롤 컨테이너(ref)
+ * - `isBeginning` / `isEnd`: 좌/우 네비 버튼의 disabled 판정
+ * - `scrollByPage`: `<` `>` 클릭 시 한 페이지(보이는 폭)만큼 이동 — scroll-snap이 탭 경계에 맞춰 정렬
+ * - `activeTab` 변경 시 해당 탭이 보이는 페이지로 자동 스크롤
+ */
+export const useContextTabScroll = _ref => {
+  let {
+    activeTab,
+    menus,
+    visibleTabsCount
+  } = _ref;
+  const barRef = useRef(null);
+  const [isBeginning, setIsBeginning] = useState(true);
+  const [isEnd, setIsEnd] = useState(true);
+  // effect가 menus 식별자에 묶이지 않도록 최신 menus를 ref로 보관한다.
+  const menusRef = useRef(menus);
+  menusRef.current = menus;
+  // Tab Bar의 스크롤 위치로 좌/우 네비 버튼의 활성 여부를 계산한다.
+  const updateEdges = useCallback(() => {
+    const bar = barRef.current;
+    if (!bar) return;
+    setIsBeginning(bar.scrollLeft <= EDGE_THRESHOLD);
+    setIsEnd(bar.scrollLeft + bar.clientWidth >= bar.scrollWidth - EDGE_THRESHOLD);
+  }, []);
+  // `<` `>` 클릭 시 보이는 폭(한 페이지)만큼 스크롤한다. scroll-snap이 탭 경계에 맞춰 정렬한다.
+  const scrollByPage = direction => {
+    const bar = barRef.current;
+    if (!bar) return;
+    bar.scrollBy({
+      left: direction * bar.clientWidth,
+      behavior: 'smooth'
+    });
+  };
+  // 활성 탭이 항상 viewport 안에 보이도록 — activeTab 변경 시에만 해당 페이지로 이동 (DES-SPEC-030-1 §1.6).
+  // menus를 deps에 넣지 않아(ref로 최신값 참조) 사용자가 다른 페이지를 보는 중 부모 리렌더로 페이지가 되돌아가는 것을 막는다.
+  useEffect(() => {
+    const bar = barRef.current;
+    if (!bar || activeTab == null) return;
+    const activeIndex = menusRef.current.findIndex(menu => menu.id === activeTab);
+    if (activeIndex < 0) return;
+    const pageStart = Math.floor(activeIndex / visibleTabsCount) * visibleTabsCount;
+    const target = bar.children[pageStart];
+    if (target) bar.scrollTo({
+      left: target.offsetLeft,
+      behavior: 'smooth'
+    });
+  }, [activeTab, visibleTabsCount]);
+  // 스크롤·리사이즈·컨텍스트 수 변경 시 좌/우 네비 활성 여부를 다시 계산한다.
+  // menus.length·visibleTabsCount 변경 시 scrollWidth가 바뀌지만 ResizeObserver는 clientWidth만 감지하므로,
+  // 두 값을 재실행 트리거로 deps에 둔다(본문에서 직접 읽지 않음).
+  // biome-ignore lint/correctness/useExhaustiveDependencies: 위 값들은 에지 재계산을 위한 의도적 트리거
+  useEffect(() => {
+    const bar = barRef.current;
+    if (!bar) return;
+    updateEdges();
+    bar.addEventListener('scroll', updateEdges, {
+      passive: true
+    });
+    const observer = new ResizeObserver(updateEdges);
+    observer.observe(bar);
+    return () => {
+      bar.removeEventListener('scroll', updateEdges);
+      observer.disconnect();
+    };
+  }, [updateEdges, menus.length, visibleTabsCount]);
+  return {
+    barRef,
+    isBeginning,
+    isEnd,
+    scrollByPage
+  };
+};

package/dist/temp/src/components/data-display/data-grid/DataGrid.js

@@ -19,7 +19,7 @@ const ActionBar = ({ children, className, position = 'top', align = 'space-betwe
         'ncua-data-grid__action-bar--space-between': align === 'space-between',
     }), ...rest, children: children }));
 ActionBar.displayName = 'DataGrid.ActionBar';
-const DataGridTable = forwardRef(({ children, className, type = 'horizontal', fixedHeader, maxHeight, hoverable, selectable, horizontalScroll, minWidth, }, ref) => (_jsx("div", { ref: ref, className: classNames('ncua-data-grid__table', className), children: _jsx(NcuaTable, { className: "ncua-table--in-data-grid", type: type, fixedHeader: fixedHeader, maxHeight: maxHeight, hoverable: hoverable, selectable: selectable, horizontalScroll: horizontalScroll, minWidth: minWidth, children: children }) })));
+const DataGridTable = forwardRef(({ children, className, type = 'horizontal', fixedHeader, maxHeight, hoverable, selectable, horizontalScroll, minWidth, draggable, }, ref) => (_jsx("div", { ref: ref, className: classNames('ncua-data-grid__table', className), children: _jsx(NcuaTable, { className: "ncua-table--in-data-grid", type: type, fixedHeader: fixedHeader, maxHeight: maxHeight, hoverable: hoverable, selectable: selectable, horizontalScroll: horizontalScroll, minWidth: minWidth, draggable: draggable, children: children }) })));
 DataGridTable.displayName = 'DataGrid.Table';
 const Pagination = ({ children, className, ...rest }) => (_jsx("div", { className: classNames('ncua-data-grid__pagination', className), ...rest, children: children }));
 Pagination.displayName = 'DataGrid.Pagination';

package/dist/temp/src/components/data-display/data-grid/DataGrid.types.d.ts

@@ -36,6 +36,11 @@ export type DataGridTableProps = {
     horizontalScroll?: boolean;
     /** 가로 스크롤 트리거 임계 너비. horizontalScroll=true 일 때만 의미가 있다. */
     minWidth?: string | number;
+    /**
+     * 행 드래그앤드롭 활성화. Table.Row에 dragId, Table.Body에 onRowDrop,
+     * 헤더에 Table.DragHeaderCell, 각 행에 Table.DragCell을 함께 사용한다.
+     */
+    draggable?: boolean;
 };
 export type DataGridPaginationProps = ComponentProps<'div'> & {
     children: ReactNode;

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

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
-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"> & {
+import type { SortDirection, TableBodyProps, TableColGroupProps, TableDragCellProps, TableDragHeaderCellProps, TableEmptyProps, TableFooterProps, TableHeaderProps, TablePaginationProps } from './types';
+export declare const Table: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "draggable" | "ref"> & {
     type?: import("./types").TableType | undefined;
     fixedHeader?: boolean | undefined;
     maxHeight?: string | number | undefined;
@@ -8,6 +8,7 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<impor
     selectable?: boolean | undefined;
     horizontalScroll?: boolean | undefined;
     minWidth?: string | number | undefined;
+    draggable?: boolean | undefined;
     children: ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>> & {
     Header: {
@@ -15,13 +16,22 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<impor
         displayName: string;
     };
     Body: {
-        ({ children, className }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, onRowDrop }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Row: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
         selected?: boolean | undefined;
         status?: import("./types").RowStatus | undefined;
+        dragId?: string | undefined;
     } & import("react").RefAttributes<HTMLTableRowElement>>;
+    DragHeaderCell: {
+        ({ className, children }: TableDragHeaderCellProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    DragCell: {
+        ({ disabled, className, children }: TableDragCellProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
     HeaderCell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & {
         sortDirection?: SortDirection | undefined;
         onSort?: (() => void) | undefined;
@@ -48,4 +58,4 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<impor
         displayName: string;
     };
 };
-export type { RowStatus, SortDirection, TableBodyProps, TableCellProps, TableColGroupProps, TableEmptyProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TablePaginationProps, TableProps, TableRowProps, TableType, } from './types';
+export type { RowStatus, SortDirection, TableBodyProps, TableCellProps, TableColGroupProps, TableDragCellProps, TableDragHeaderCellProps, TableEmptyProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TablePaginationProps, TableProps, TableRowProps, TableType, } from './types';

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

@@ -1,8 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown, ChevronSelectorVertical, ChevronUp } from '@ncds/ui-admin-icon';
+import { dropTargetForElements, draggable as makeDraggable, monitorForElements, } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import { attachClosestEdge, extractClosestEdge, } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { ChevronDown, ChevronSelectorVertical, ChevronUp, DotsGrid02 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
-import { Children, forwardRef, useRef, } from 'react';
+import { Children, forwardRef, useCallback, useContext, useEffect, useRef, useState, } from 'react';
 import { FloatingProvider } from '../../../contexts/FloatingContext';
+import { RowDndContext, TableDndContext } from './dnd-context';
+import { buildDragPreview, PREVIEW_BADGE_SIZE, TABLE_DND_ID_RADIX, TABLE_DND_ID_SLICE_END, TABLE_DND_ID_SLICE_START, } from './dnd-preview';
 import { TABLE_HEADER_HEIGHT, useTableHorizontalScrollbar, useTableVerticalScrollbar } from './useTableScrollbars';
 // 가로 스크롤 디자인 기준 폭 — 14인치 모니터 + LNB 고려한 디자인 권장 너비
 const DEFAULT_HORIZONTAL_SCROLL_MIN_WIDTH = 1140;
@@ -29,14 +35,145 @@ const ARIA_SORT_MAP = {
 // ──────────────────────────────────────────────
 const Header = ({ children, className }) => (_jsx("thead", { className: classNames('ncua-table__header', className), children: children }));
 Header.displayName = 'Table.Header';
-const Body = ({ children, className }) => (_jsx("tbody", { className: classNames('ncua-table__body', className), children: children }));
+const Body = ({ children, className, onRowDrop }) => {
+    const { tableId } = useContext(TableDndContext);
+    // onRowDrop 참조를 ref로 유지 — 콜백이 매 렌더마다 재생성되어도 effect가 재구독하지 않도록
+    const onRowDropRef = useRef(onRowDrop);
+    onRowDropRef.current = onRowDrop;
+    useEffect(() => {
+        return monitorForElements({
+            canMonitor: ({ source }) => source.data.tableId === tableId,
+            onDrop: ({ source, location }) => {
+                if (!onRowDropRef.current)
+                    return;
+                const target = location.current.dropTargets[0];
+                if (!target)
+                    return;
+                const fromId = source.data.id;
+                const toId = target.data.id;
+                if (typeof fromId !== 'string' || typeof toId !== 'string' || fromId === toId)
+                    return;
+                const edge = extractClosestEdge(target.data);
+                onRowDropRef.current(fromId, toId, edge === 'bottom' ? 'bottom' : 'top');
+            },
+        });
+    }, [tableId]);
+    return _jsx("tbody", { className: classNames('ncua-table__body', className), children: children });
+};
 Body.displayName = 'Table.Body';
-const Row = forwardRef(({ children, className, selected, status, ...rest }, ref) => (_jsx("tr", { ref: ref, className: classNames('ncua-table__row', className, {
-        'ncua-table__row--selected': selected,
-        'ncua-table__row--warning': status === 'warning',
-        'ncua-table__row--error': status === 'error',
-    }), ...rest, children: children })));
+const Row = forwardRef(({ children, className, selected, status, dragId, ...rest }, forwardedRef) => {
+    const { isDraggable, tableId } = useContext(TableDndContext);
+    const internalRef = useRef(null);
+    const [closestEdge, setClosestEdge] = useState(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const setRef = useCallback((el) => {
+        internalRef.current = el;
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(el);
+        }
+        else if (forwardedRef) {
+            forwardedRef.current = el;
+        }
+    }, [forwardedRef]);
+    useEffect(() => {
+        if (!isDraggable || !dragId || !internalRef.current)
+            return;
+        return dropTargetForElements({
+            element: internalRef.current,
+            getData: ({ input, element }) => attachClosestEdge({ id: dragId, tableId }, { input, element, allowedEdges: ['top', 'bottom'] }),
+            onDragEnter: ({ self, source }) => {
+                if (source.data.id === dragId)
+                    return;
+                const edge = extractClosestEdge(self.data);
+                setClosestEdge(edge === 'bottom' && internalRef.current?.nextElementSibling ? null : edge);
+            },
+            onDrag: ({ self, source }) => {
+                if (source.data.id === dragId)
+                    return;
+                const edge = extractClosestEdge(self.data);
+                setClosestEdge(edge === 'bottom' && internalRef.current?.nextElementSibling ? null : edge);
+            },
+            onDragLeave: () => setClosestEdge(null),
+            onDrop: () => setClosestEdge(null),
+        });
+    }, [isDraggable, dragId, tableId]);
+    return (_jsx(RowDndContext.Provider, { value: { dragId, setIsDragging }, children: _jsx("tr", { ref: setRef, "data-draggable-id": dragId, className: classNames('ncua-table__row', className, {
+                'ncua-table__row--selected': selected,
+                'ncua-table__row--warning': status === 'warning',
+                'ncua-table__row--error': status === 'error',
+                'ncua-table__row--drag-over-top': closestEdge === 'top',
+                'ncua-table__row--drag-over-bottom': closestEdge === 'bottom',
+                'is-dragging': isDragging,
+            }), ...rest, children: children }) }));
+});
 Row.displayName = 'Table.Row';
+const DragHeaderCell = ({ className, children }) => (_jsx("th", { className: classNames('ncua-table__header-cell', 'ncua-table__drag-header-cell', className), children: _jsxs("span", { className: "ncua-table__drag-cell-inner", children: [_jsx("span", { className: "ncua-table__drag-header-icon", "aria-hidden": "true", children: _jsx(DotsGrid02, { width: 16, height: 16 }) }), children] }) }));
+DragHeaderCell.displayName = 'Table.DragHeaderCell';
+const DragCell = ({ disabled, className, children }) => {
+    const { isDraggable, tableId } = useContext(TableDndContext);
+    const { dragId, setIsDragging } = useContext(RowDndContext);
+    const handleRef = useRef(null);
+    useEffect(() => {
+        if (!isDraggable || !dragId || !handleRef.current || disabled)
+            return;
+        let overlay = null;
+        let removePointerMove = null;
+        let pendingPreview = null;
+        return makeDraggable({
+            element: handleRef.current,
+            getInitialData: () => ({ id: dragId, tableId }),
+            onGenerateDragPreview: ({ nativeSetDragImage, location }) => {
+                if (!handleRef.current)
+                    return;
+                const rowEl = handleRef.current.closest('tr');
+                if (!rowEl)
+                    return;
+                disableNativeDragPreview({ nativeSetDragImage });
+                const rowRect = rowEl.getBoundingClientRect();
+                const badgeHalf = PREVIEW_BADGE_SIZE / 2;
+                const offsetX = Math.round(location.initial.input.clientX - rowRect.left) + badgeHalf;
+                const offsetY = Math.round(location.initial.input.clientY - rowRect.top) + badgeHalf;
+                const isSelected = rowEl.classList.contains('ncua-table__row--selected');
+                const bodyEl = rowEl.closest('.ncua-table__body');
+                const selectedRows = isSelected && bodyEl ? Array.from(bodyEl.querySelectorAll('.ncua-table__row--selected')) : [];
+                pendingPreview = {
+                    rows: selectedRows.length > 1 ? selectedRows : [rowEl],
+                    rowRect,
+                    offsetX,
+                    offsetY,
+                };
+            },
+            onDragStart: ({ location }) => {
+                setIsDragging(true);
+                if (!pendingPreview)
+                    return;
+                const { rows, rowRect, offsetX, offsetY } = pendingPreview;
+                overlay = buildDragPreview(rows, rowRect);
+                overlay.style.left = `${Math.round(location.initial.input.clientX) - offsetX}px`;
+                overlay.style.top = `${Math.round(location.initial.input.clientY) - offsetY}px`;
+                document.body.appendChild(overlay);
+                const onDragOver = (e) => {
+                    if (!overlay)
+                        return;
+                    overlay.style.left = `${e.clientX - offsetX}px`;
+                    overlay.style.top = `${e.clientY - offsetY}px`;
+                };
+                document.addEventListener('dragover', onDragOver);
+                removePointerMove = () => document.removeEventListener('dragover', onDragOver);
+            },
+            onDrop: () => {
+                setIsDragging(false);
+                removePointerMove?.();
+                removePointerMove = null;
+                overlay?.remove();
+                overlay = null;
+                pendingPreview = null;
+            },
+        });
+    }, [isDraggable, dragId, tableId, disabled, setIsDragging]);
+    return (_jsx("td", { className: classNames('ncua-table__drag-cell', className), children: _jsxs("span", { className: "ncua-table__drag-cell-inner", children: [isDraggable && (_jsx("button", { ref: handleRef, type: "button", className: "ncua-table__drag-handle", "aria-label": "\uD589 \uC21C\uC11C \uBCC0\uACBD", disabled: disabled, children: _jsx(DotsGrid02, {}) })), children] }) }));
+};
+DragCell.displayName = 'Table.DragCell';
 const HeaderCell = forwardRef(({ children, className, sortDirection, onSort, width, minWidth, style, ...rest }, ref) => {
     const isSortable = sortDirection !== undefined && onSort !== undefined;
     const SortIcon = isSortable ? SORT_ICONS[sortDirection] : undefined;
@@ -64,9 +201,14 @@ const ColGroup = ({ widths, minWidths }) => {
             return `${width}px`;
         return width;
     };
-    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), minWidth: resolveColWidth(minWidths?.[index]) } }, index))) }));
+    return (_jsx("colgroup", { children: widths.map((width, index) => {
+            const colStyle = {
+                width: resolveColWidth(width),
+                minWidth: resolveColWidth(minWidths?.[index]),
+            };
+            // biome-ignore lint/suspicious/noArrayIndexKey: colgroup columns never reorder or change
+            return _jsx("col", { style: colStyle }, 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 || '등록된 게시물이 없습니다.' }) }));
@@ -108,13 +250,17 @@ const sortChildren = (children) => {
 // ──────────────────────────────────────────────
 // Main Table component
 // ──────────────────────────────────────────────
-const TableComponent = forwardRef(({ type = 'horizontal', fixedHeader = false, maxHeight, hoverable = true, selectable = false, horizontalScroll = false, minWidth, children, className, ...rest }, ref) => {
+const TableComponent = forwardRef(({ type = 'horizontal', fixedHeader = false, maxHeight, hoverable = true, selectable = false, horizontalScroll = false, minWidth, draggable = false, children, className, ...rest }, ref) => {
+    const tableIdRef = useRef(`ncua-table-${Math.random().toString(TABLE_DND_ID_RADIX).slice(TABLE_DND_ID_SLICE_START, TABLE_DND_ID_SLICE_END)}`);
+    const tableId = tableIdRef.current;
+    const effectiveDraggable = draggable && type === 'horizontal';
     const tableClasses = classNames('ncua-table', className, {
         'ncua-table--horizontal': type === 'horizontal',
         'ncua-table--vertical': type === 'vertical',
         'ncua-table--fixed-header': fixedHeader,
         'ncua-table--hoverable': hoverable && type === 'horizontal',
         'ncua-table--selectable': selectable,
+        'ncua-table--draggable': effectiveDraggable,
     });
     const { headerContent, colGroupContent, tableContent, footerContent, paginationContent } = sortChildren(children);
     const scrollStyle = fixedHeader && maxHeight
@@ -148,12 +294,22 @@ const TableComponent = forwardRef(({ type = 'horizontal', fixedHeader = false, m
         hScrollbarRef,
         hThumbRef,
     });
+    // fixedHeader 모드에서 드래그 시 자동 스크롤
+    useEffect(() => {
+        if (!effectiveDraggable || !fixedScrollEnabled || !scrollContainerRef.current)
+            return;
+        return autoScrollForElements({ element: scrollContainerRef.current });
+    }, [effectiveDraggable, fixedScrollEnabled]);
     // <colgroup> + <thead> + <tbody> 묶음 — fixed-header 분기와 horizontalScroll 분기 모두에서 재사용
     const renderTable = () => (_jsxs("table", { className: "ncua-table__table", role: "table", children: [colGroupContent, headerContent, tableContent] }));
     // fixed-header 시 scroll-area + scrollbar 래핑, 아니면 <table> 그대로.
     // withScrollbar=false 이면 scrollbar를 제외 — horizontalScroll 분기에서 scrollbar를
     // h-scroll-container 형제 위치에 별도 렌더해 가로 스크롤 시 viewport 우측에 자연 고정.
     const renderScrollableArea = (includeVerticalScrollbar = true) => fixedScrollEnabled ? (_jsxs("div", { ref: scrollAreaRef, className: "ncua-table__scroll-area", children: [_jsx("div", { ref: scrollContainerRef, className: "ncua-table__scroll-container", style: scrollStyle, children: renderTable() }), includeVerticalScrollbar && (_jsx("div", { ref: scrollbarRef, className: "ncua-table__scrollbar", "aria-hidden": "true", children: _jsx("div", { ref: thumbRef, className: "ncua-table__scrollbar-thumb", onMouseDown: handleThumbMouseDown }) }))] })) : (renderTable());
+    const dndContextValue = {
+        isDraggable: effectiveDraggable,
+        tableId,
+    };
     // horizontalScroll=true 시 외곽 wrapper + FloatingProvider 부착.
     // 핵심 — __h-scroll-container 는 <table>(또는 scroll-area) 만 감싸고, footer/pagination 은
     // 그 바깥에서 항상 고정 위치. 세로 스크롤바는 h-scroll-container 형제로 배치되어
@@ -165,9 +321,9 @@ const TableComponent = forwardRef(({ type = 'horizontal', fixedHeader = false, m
         const innerStyle = {
             '--ncua-table-min-width': typeof resolvedMinWidth === 'number' ? `${resolvedMinWidth}px` : resolvedMinWidth,
         };
-        return (_jsx(FloatingProvider, { value: FLOATING_PORTAL_VALUE, children: _jsxs("div", { ref: ref, className: "ncua-table-wrapper", style: WRAPPER_STYLE, children: [_jsxs("div", { className: tableClasses, ...rest, children: [_jsxs("div", { ref: hScrollContainerRef, className: "ncua-table__h-scroll-container", children: [_jsx("div", { className: "ncua-table__h-scroll-inner", style: innerStyle, children: renderScrollableArea(false) }), _jsx("div", { ref: hScrollbarRef, className: "ncua-table__h-scrollbar", "aria-hidden": "true", children: _jsx("div", { ref: hThumbRef, className: "ncua-table__h-scrollbar-thumb", onMouseDown: handleHThumbMouseDown }) })] }), fixedScrollEnabled && (_jsx("div", { ref: scrollbarRef, className: "ncua-table__scrollbar", "aria-hidden": "true", children: _jsx("div", { ref: thumbRef, className: "ncua-table__scrollbar-thumb", onMouseDown: handleThumbMouseDown }) })), footerContent] }), paginationContent] }) }));
+        return (_jsx(TableDndContext.Provider, { value: dndContextValue, children: _jsx(FloatingProvider, { value: FLOATING_PORTAL_VALUE, children: _jsxs("div", { ref: ref, className: "ncua-table-wrapper", style: WRAPPER_STYLE, children: [_jsxs("div", { className: tableClasses, ...rest, children: [_jsxs("div", { ref: hScrollContainerRef, className: "ncua-table__h-scroll-container", children: [_jsx("div", { className: "ncua-table__h-scroll-inner", style: innerStyle, children: renderScrollableArea(false) }), _jsx("div", { ref: hScrollbarRef, className: "ncua-table__h-scrollbar", "aria-hidden": "true", children: _jsx("div", { ref: hThumbRef, className: "ncua-table__h-scrollbar-thumb", onMouseDown: handleHThumbMouseDown }) })] }), fixedScrollEnabled && (_jsx("div", { ref: scrollbarRef, className: "ncua-table__scrollbar", "aria-hidden": "true", children: _jsx("div", { ref: thumbRef, className: "ncua-table__scrollbar-thumb", onMouseDown: handleThumbMouseDown }) })), footerContent] }), paginationContent] }) }) }));
     }
-    return (_jsxs("div", { ref: ref, className: "ncua-table-wrapper", style: WRAPPER_STYLE, children: [_jsxs("div", { className: tableClasses, ...rest, children: [renderScrollableArea(), footerContent] }), paginationContent] }));
+    return (_jsx(TableDndContext.Provider, { value: dndContextValue, children: _jsxs("div", { ref: ref, className: "ncua-table-wrapper", style: WRAPPER_STYLE, children: [_jsxs("div", { className: tableClasses, ...rest, children: [renderScrollableArea(), footerContent] }), paginationContent] }) }));
 });
 TableComponent.displayName = 'Table';
 // ──────────────────────────────────────────────
@@ -177,6 +333,8 @@ export const Table = Object.assign(TableComponent, {
     Header,
     Body,
     Row,
+    DragHeaderCell,
+    DragCell,
     HeaderCell,
     Cell,
     Footer,

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

@@ -0,0 +1,12 @@
+type TableDndContextValue = {
+    isDraggable: boolean;
+    tableId: string;
+};
+declare const TableDndContext: import("react").Context<TableDndContextValue>;
+type RowDndContextValue = {
+    dragId: string | undefined;
+    setIsDragging: (v: boolean) => void;
+};
+declare const RowDndContext: import("react").Context<RowDndContextValue>;
+export type { TableDndContextValue, RowDndContextValue };
+export { TableDndContext, RowDndContext };

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

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+const TableDndContext = createContext({
+    isDraggable: false,
+    tableId: '',
+});
+const RowDndContext = createContext({
+    dragId: undefined,
+    setIsDragging: (_v) => undefined,
+});
+export { TableDndContext, RowDndContext };