@ncds/ui-admin 1.8.9 → 1.8.12

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

@@ -0,0 +1,6 @@
+declare const TABLE_DND_ID_RADIX = 36;
+declare const TABLE_DND_ID_SLICE_START = 2;
+declare const TABLE_DND_ID_SLICE_END = 9;
+declare const PREVIEW_BADGE_SIZE = 24;
+declare const buildDragPreview: (rows: HTMLElement[], rowRect: DOMRect) => HTMLDivElement;
+export { TABLE_DND_ID_RADIX, TABLE_DND_ID_SLICE_START, TABLE_DND_ID_SLICE_END, PREVIEW_BADGE_SIZE, buildDragPreview };

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

@@ -0,0 +1,120 @@
+const TABLE_DND_ID_RADIX = 36;
+const TABLE_DND_ID_SLICE_START = 2;
+const TABLE_DND_ID_SLICE_END = 9;
+const PREVIEW_MAX_ROWS = 3;
+const PREVIEW_STACK_OFFSET = 5;
+const PREVIEW_MAX_STACK_OFFSET = PREVIEW_STACK_OFFSET * PREVIEW_MAX_ROWS;
+const PREVIEW_BADGE_SIZE = 24;
+const PREVIEW_BADGE_HALF = PREVIEW_BADGE_SIZE / 2;
+// hover의 color-mix 반투명 배경을 우회해 불투명 RGB 배경색을 클래스 기반으로 직접 결정
+const getRowBackground = (rowEl) => {
+    const resolveCssVar = (name) => getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+    const isSelected = rowEl.classList.contains('ncua-table__row--selected');
+    const isError = rowEl.classList.contains('ncua-table__row--error');
+    const isWarning = rowEl.classList.contains('ncua-table__row--warning');
+    if (isSelected && isError)
+        return resolveCssVar('--primary-red-50');
+    if (isSelected && isWarning)
+        return resolveCssVar('--orange-50');
+    if (isSelected)
+        return resolveCssVar('--gray-50');
+    return resolveCssVar('--base-white');
+};
+// cloneNode는 HTML attribute만 복사하므로 checkbox.checked를 직접 동기화
+const cloneRowWithState = (sourceRow) => {
+    const clone = sourceRow.cloneNode(true);
+    const srcInputs = sourceRow.querySelectorAll('input[type="checkbox"]');
+    const clnInputs = clone.querySelectorAll('input[type="checkbox"]');
+    srcInputs.forEach((src, i) => {
+        const cln = clnInputs[i];
+        if (cln)
+            cln.checked = src.checked;
+    });
+    clone.style.backgroundColor = getRowBackground(sourceRow);
+    // 열 너비는 테이블 레이아웃 컨텍스트에서 결정되므로 직접 복사 — ceil로 올림해 프리뷰 셀이 실제보다 좁아지지 않게 함
+    const srcCells = Array.from(sourceRow.querySelectorAll('td, th'));
+    const clnCells = Array.from(clone.querySelectorAll('td, th'));
+    srcCells.forEach((src, i) => {
+        const cln = clnCells[i];
+        if (!cln)
+            return;
+        const w = `${Math.ceil(src.getBoundingClientRect().width)}px`;
+        cln.style.width = w;
+        cln.style.minWidth = w;
+        cln.style.maxWidth = w;
+    });
+    return clone;
+};
+const buildCountBadge = (count) => {
+    const badge = document.createElement('div');
+    badge.className = 'ncua-table-dnd-preview__badge';
+    badge.textContent = String(count);
+    return badge;
+};
+const buildSummaryCard = (rowRect) => {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'ncua-table-dnd-preview__summary';
+    Object.assign(wrapper.style, {
+        top: `${Math.round(PREVIEW_BADGE_HALF + PREVIEW_MAX_STACK_OFFSET)}px`,
+        left: `${Math.round(PREVIEW_BADGE_HALF + PREVIEW_MAX_STACK_OFFSET)}px`,
+        width: `${Math.round(rowRect.width) - PREVIEW_MAX_STACK_OFFSET}px`,
+        height: `${Math.round(rowRect.height)}px`,
+    });
+    return wrapper;
+};
+const buildRowCard = ({ row, cardLeft, cardTop, cardWidth, rowHeight, zIndex, parentTable, }) => {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'ncua-table-dnd-preview__card';
+    Object.assign(wrapper.style, {
+        zIndex: String(zIndex),
+        top: `${cardTop}px`,
+        left: `${cardLeft}px`,
+        width: `${cardWidth}px`,
+        height: `${rowHeight}px`,
+        backgroundColor: getRowBackground(row),
+    });
+    const table = document.createElement('table');
+    if (parentTable)
+        table.className = parentTable.className;
+    table.style.width = `${cardWidth}px`;
+    const tbody = document.createElement('tbody');
+    tbody.className = 'ncua-table__body';
+    tbody.appendChild(cloneRowWithState(row));
+    table.appendChild(tbody);
+    wrapper.appendChild(table);
+    return wrapper;
+};
+const buildDragPreview = (rows, rowRect) => {
+    const visibleCount = Math.min(rows.length, PREVIEW_MAX_ROWS);
+    const hasSummary = rows.length > visibleCount;
+    const totalCards = visibleCount + (hasSummary ? 1 : 0);
+    const isMulti = rows.length > 1;
+    const parentTable = rows[0]?.closest('table') ?? null;
+    const rowWidth = Math.round(rowRect.width);
+    const rowHeight = Math.round(rowRect.height);
+    const container = document.createElement('div');
+    container.className = 'ncua-table-dnd-preview';
+    Object.assign(container.style, {
+        width: `${PREVIEW_BADGE_HALF + rowWidth}px`,
+        height: `${PREVIEW_BADGE_HALF + rowHeight + PREVIEW_STACK_OFFSET * (totalCards - 1)}px`,
+    });
+    if (isMulti)
+        container.appendChild(buildCountBadge(rows.length));
+    if (hasSummary)
+        container.appendChild(buildSummaryCard(rowRect));
+    // 뒤쪽 행 카드부터 렌더해서 앞쪽이 위로 올라오게
+    for (let i = visibleCount - 1; i >= 0; i--) {
+        const stackShift = isMulti ? i * PREVIEW_STACK_OFFSET : 0;
+        container.appendChild(buildRowCard({
+            row: rows[i],
+            cardLeft: Math.round(PREVIEW_BADGE_HALF + stackShift),
+            cardTop: Math.round(PREVIEW_BADGE_HALF + stackShift),
+            cardWidth: rowWidth - stackShift,
+            rowHeight,
+            zIndex: visibleCount - i,
+            parentTable,
+        }));
+    }
+    return container;
+};
+export { TABLE_DND_ID_RADIX, TABLE_DND_ID_SLICE_START, TABLE_DND_ID_SLICE_END, PREVIEW_BADGE_SIZE, buildDragPreview };

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

@@ -2,7 +2,7 @@ import type { ComponentProps, ReactNode } from 'react';
 export type TableType = 'horizontal' | 'vertical';
 export type SortDirection = 'asc' | 'desc' | 'none';
 export type RowStatus = 'warning' | 'error';
-export type TableProps = Omit<ComponentProps<'div'>, 'ref'> & {
+export type TableProps = Omit<ComponentProps<'div'>, 'ref' | 'draggable'> & {
     type?: TableType;
     fixedHeader?: boolean;
     maxHeight?: string | number;
@@ -19,6 +19,11 @@ export type TableProps = Omit<ComponentProps<'div'>, 'ref'> & {
      * 기본값은 1140 (14인치 모니터 + LNB 기준 디자인 권장 너비).
      */
     minWidth?: string | number;
+    /**
+     * 행 드래그앤드롭 활성화. Table.Row에 dragId, Table.Body에 onRowDrop,
+     * 헤더에 Table.DragHeaderCell, 각 행에 Table.DragCell을 함께 사용한다.
+     */
+    draggable?: boolean;
     children: ReactNode;
 };
 export type TableHeaderProps = {
@@ -28,10 +33,28 @@ export type TableHeaderProps = {
 export type TableBodyProps = {
     children: ReactNode;
     className?: string;
+    /**
+     * draggable=true 테이블에서 행이 재정렬될 때 호출된다.
+     * fromId → toId 로 이동, edge는 toId 행의 위(top)/아래(bottom) 삽입 위치.
+     */
+    onRowDrop?: (fromId: string, toId: string, edge: 'top' | 'bottom') => void;
 };
 export type TableRowProps = Omit<ComponentProps<'tr'>, 'ref'> & {
     selected?: boolean;
     status?: RowStatus;
+    /** 드래그앤드롭 식별자. draggable 테이블에서 필수. */
+    dragId?: string;
+};
+export type TableDragCellProps = {
+    disabled?: boolean;
+    className?: string;
+    /** 드래그 셀에 함께 배치할 콘텐츠 (예: CheckboxInput). 아이콘 우측 8px gap으로 배치된다. */
+    children?: ReactNode;
+};
+export type TableDragHeaderCellProps = {
+    className?: string;
+    /** 헤더 드래그 셀에 함께 배치할 콘텐츠 (예: 전체선택 CheckboxInput). 아이콘 우측 8px gap으로 배치된다. */
+    children?: ReactNode;
 };
 export type TableHeaderCellProps = Omit<ComponentProps<'th'>, 'ref'> & {
     sortDirection?: SortDirection;

package/dist/temp/src/components/index.d.ts

@@ -36,6 +36,7 @@ export * from './layout/block-header';
 export * from './layout/divider';
 export * from './layout/page-title';
 export * from './navigation/bread-crumb';
+export * from './navigation/context-tab';
 export * from './navigation/horizontal-tab';
 export * from './navigation/pagination';
 export * from './navigation/vertical-tab';

package/dist/temp/src/components/index.js

@@ -42,6 +42,7 @@ export * from './layout/divider';
 export * from './layout/page-title';
 // Navigation
 export * from './navigation/bread-crumb';
+export * from './navigation/context-tab';
 export * from './navigation/horizontal-tab';
 export * from './navigation/pagination';
 export * from './navigation/vertical-tab';

package/dist/temp/src/components/navigation/context-tab/ContextTab.d.ts

@@ -0,0 +1,18 @@
+interface ContextTabItemProps {
+    id: string;
+    label: string;
+    isNew?: boolean;
+    /** pill-outline 배지로 표시할 텍스트. 있으면 비신규 항목에도 배지를 노출한다. */
+    badgeLabel?: string;
+    disabled?: boolean;
+}
+interface ContextTabProps {
+    menus?: ContextTabItemProps[];
+    activeTab?: string;
+    onTabChange?: (id: string) => void;
+    visibleTabsCount?: number;
+    className?: string;
+}
+declare const ContextTab: ({ menus, activeTab, onTabChange, visibleTabsCount, className, }: ContextTabProps) => import("react/jsx-runtime").JSX.Element | null;
+export { ContextTab };
+export type { ContextTabItemProps, ContextTabProps };

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

@@ -0,0 +1,103 @@
+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 = ({ menus = [], activeTab, onTabChange, visibleTabsCount = DEFAULT_VISIBLE_TABS_COUNT, className, }) => {
+    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/temp/src/components/navigation/context-tab/index.d.ts

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

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

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

package/dist/temp/src/components/navigation/context-tab/useContextTabScroll.d.ts

@@ -0,0 +1,22 @@
+interface UseContextTabScrollParams {
+    activeTab?: string;
+    menus: {
+        id: string;
+    }[];
+    visibleTabsCount: number;
+}
+/**
+ * ContextTab Tab Bar의 네이티브 가로 스크롤·페이징 메커니즘을 담당하는 훅.
+ *
+ * - `barRef`: 스크롤 컨테이너(ref)
+ * - `isBeginning` / `isEnd`: 좌/우 네비 버튼의 disabled 판정
+ * - `scrollByPage`: `<` `>` 클릭 시 한 페이지(보이는 폭)만큼 이동 — scroll-snap이 탭 경계에 맞춰 정렬
+ * - `activeTab` 변경 시 해당 탭이 보이는 페이지로 자동 스크롤
+ */
+export declare const useContextTabScroll: ({ activeTab, menus, visibleTabsCount }: UseContextTabScrollParams) => {
+    barRef: import("react").RefObject<HTMLDivElement>;
+    isBeginning: boolean;
+    isEnd: boolean;
+    scrollByPage: (direction: 1 | -1) => void;
+};
+export {};

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

@@ -0,0 +1,65 @@
+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 = ({ activeTab, menus, visibleTabsCount }) => {
+    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/types/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/types/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/types/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/types/src/components/data-display/table/dnd-preview.d.ts

@@ -0,0 +1,6 @@
+declare const TABLE_DND_ID_RADIX = 36;
+declare const TABLE_DND_ID_SLICE_START = 2;
+declare const TABLE_DND_ID_SLICE_END = 9;
+declare const PREVIEW_BADGE_SIZE = 24;
+declare const buildDragPreview: (rows: HTMLElement[], rowRect: DOMRect) => HTMLDivElement;
+export { TABLE_DND_ID_RADIX, TABLE_DND_ID_SLICE_START, TABLE_DND_ID_SLICE_END, PREVIEW_BADGE_SIZE, buildDragPreview };

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

@@ -2,7 +2,7 @@ import type { ComponentProps, ReactNode } from 'react';
 export type TableType = 'horizontal' | 'vertical';
 export type SortDirection = 'asc' | 'desc' | 'none';
 export type RowStatus = 'warning' | 'error';
-export type TableProps = Omit<ComponentProps<'div'>, 'ref'> & {
+export type TableProps = Omit<ComponentProps<'div'>, 'ref' | 'draggable'> & {
     type?: TableType;
     fixedHeader?: boolean;
     maxHeight?: string | number;
@@ -19,6 +19,11 @@ export type TableProps = Omit<ComponentProps<'div'>, 'ref'> & {
      * 기본값은 1140 (14인치 모니터 + LNB 기준 디자인 권장 너비).
      */
     minWidth?: string | number;
+    /**
+     * 행 드래그앤드롭 활성화. Table.Row에 dragId, Table.Body에 onRowDrop,
+     * 헤더에 Table.DragHeaderCell, 각 행에 Table.DragCell을 함께 사용한다.
+     */
+    draggable?: boolean;
     children: ReactNode;
 };
 export type TableHeaderProps = {
@@ -28,10 +33,28 @@ export type TableHeaderProps = {
 export type TableBodyProps = {
     children: ReactNode;
     className?: string;
+    /**
+     * draggable=true 테이블에서 행이 재정렬될 때 호출된다.
+     * fromId → toId 로 이동, edge는 toId 행의 위(top)/아래(bottom) 삽입 위치.
+     */
+    onRowDrop?: (fromId: string, toId: string, edge: 'top' | 'bottom') => void;
 };
 export type TableRowProps = Omit<ComponentProps<'tr'>, 'ref'> & {
     selected?: boolean;
     status?: RowStatus;
+    /** 드래그앤드롭 식별자. draggable 테이블에서 필수. */
+    dragId?: string;
+};
+export type TableDragCellProps = {
+    disabled?: boolean;
+    className?: string;
+    /** 드래그 셀에 함께 배치할 콘텐츠 (예: CheckboxInput). 아이콘 우측 8px gap으로 배치된다. */
+    children?: ReactNode;
+};
+export type TableDragHeaderCellProps = {
+    className?: string;
+    /** 헤더 드래그 셀에 함께 배치할 콘텐츠 (예: 전체선택 CheckboxInput). 아이콘 우측 8px gap으로 배치된다. */
+    children?: ReactNode;
 };
 export type TableHeaderCellProps = Omit<ComponentProps<'th'>, 'ref'> & {
     sortDirection?: SortDirection;

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

@@ -36,6 +36,7 @@ export * from './layout/block-header';
 export * from './layout/divider';
 export * from './layout/page-title';
 export * from './navigation/bread-crumb';
+export * from './navigation/context-tab';
 export * from './navigation/horizontal-tab';
 export * from './navigation/pagination';
 export * from './navigation/vertical-tab';

package/dist/types/src/components/navigation/context-tab/ContextTab.d.ts

@@ -0,0 +1,18 @@
+interface ContextTabItemProps {
+    id: string;
+    label: string;
+    isNew?: boolean;
+    /** pill-outline 배지로 표시할 텍스트. 있으면 비신규 항목에도 배지를 노출한다. */
+    badgeLabel?: string;
+    disabled?: boolean;
+}
+interface ContextTabProps {
+    menus?: ContextTabItemProps[];
+    activeTab?: string;
+    onTabChange?: (id: string) => void;
+    visibleTabsCount?: number;
+    className?: string;
+}
+declare const ContextTab: ({ menus, activeTab, onTabChange, visibleTabsCount, className, }: ContextTabProps) => import("react/jsx-runtime").JSX.Element | null;
+export { ContextTab };
+export type { ContextTabItemProps, ContextTabProps };

package/dist/types/src/components/navigation/context-tab/index.d.ts

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

package/dist/types/src/components/navigation/context-tab/useContextTabScroll.d.ts

@@ -0,0 +1,22 @@
+interface UseContextTabScrollParams {
+    activeTab?: string;
+    menus: {
+        id: string;
+    }[];
+    visibleTabsCount: number;
+}
+/**
+ * ContextTab Tab Bar의 네이티브 가로 스크롤·페이징 메커니즘을 담당하는 훅.
+ *
+ * - `barRef`: 스크롤 컨테이너(ref)
+ * - `isBeginning` / `isEnd`: 좌/우 네비 버튼의 disabled 판정
+ * - `scrollByPage`: `<` `>` 클릭 시 한 페이지(보이는 폭)만큼 이동 — scroll-snap이 탭 경계에 맞춰 정렬
+ * - `activeTab` 변경 시 해당 탭이 보이는 페이지로 자동 스크롤
+ */
+export declare const useContextTabScroll: ({ activeTab, menus, visibleTabsCount }: UseContextTabScrollParams) => {
+    barRef: import("react").RefObject<HTMLDivElement>;
+    isBeginning: boolean;
+    isEnd: boolean;
+    scrollByPage: (direction: 1 | -1) => void;
+};
+export {};