@ncds/ui-admin 1.8.9 → 1.8.11

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

@@ -410,6 +410,17 @@ Object.keys(_breadCrumb).forEach(function (key) {
     }
   });
 });
+var _contextTab = require("./navigation/context-tab");
+Object.keys(_contextTab).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _contextTab[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _contextTab[key];
+    }
+  });
+});
 var _horizontalTab = require("./navigation/horizontal-tab");
 Object.keys(_horizontalTab).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -0,0 +1,233 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContextTab = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _Button = require("../../action/button/Button");
+var _Badge = require("../../feedback-and-status/badge/Badge");
+var _useContextTabScroll = require("./useContextTabScroll");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 (0, _jsxRuntime.jsx)(_Badge.Badge, {
+    type: "new-badge",
+    size: "sm"
+  });
+  if (item.badgeLabel) return (0, _jsxRuntime.jsx)(_Badge.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 = (0, _react.useRef)(null);
+  const triggerRef = (0, _react.useRef)(null);
+  const panelRef = (0, _react.useRef)(null);
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  // Tab Bar의 가로 스크롤·페이징(에지 계산·활성 탭 자동 스크롤)은 훅으로 분리한다.
+  const {
+    barRef,
+    isBeginning,
+    isEnd,
+    scrollByPage
+  } = (0, _useContextTabScroll.useContextTabScroll)({
+    activeTab,
+    menus,
+    visibleTabsCount
+  });
+  // Dropdown panel 닫기 — 외부 클릭 / ESC. ESC는 trigger로 포커스 복원, 외부 클릭은 클릭 위치 유지 (DES-SPEC-030-1 §1.5/§7)
+  (0, _react.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)
+  (0, _react.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 (0, _jsxRuntime.jsx)("li", {
+      role: "none",
+      children: (0, _jsxRuntime.jsxs)("button", {
+        type: "button",
+        role: "menuitem",
+        "aria-current": isActive || undefined,
+        "aria-disabled": item.disabled || undefined,
+        "aria-label": getAccessibleLabel(item),
+        disabled: item.disabled,
+        className: (0, _classnames.default)('ncua-context-tab__option', {
+          'is-active': isActive
+        }),
+        onClick: () => handleOptionSelect(item),
+        children: [(0, _jsxRuntime.jsx)("span", {
+          className: "ncua-context-tab__option-label",
+          title: item.label,
+          children: item.label
+        }), renderItemBadges(item), isActive && (0, _jsxRuntime.jsx)(_uiAdminIcon.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 (0, _jsxRuntime.jsxs)("div", {
+    ref: containerRef,
+    className: (0, _classnames.default)('ncua-context-tab', className),
+    children: [(0, _jsxRuntime.jsx)(_Button.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: _uiAdminIcon.Menu01
+      },
+      onClick: () => setIsOpen(prev => !prev)
+    }), (0, _jsxRuntime.jsx)("div", {
+      ref: barRef,
+      className: (0, _classnames.default)('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 (0, _jsxRuntime.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: (0, _classnames.default)('ncua-context-tab__tab', {
+            'is-active': isActive,
+            'is-disabled': item.disabled
+          }),
+          onClick: () => handleSelect(item),
+          children: [(0, _jsxRuntime.jsx)("span", {
+            className: "ncua-context-tab__tab-label",
+            children: item.label
+          }), renderItemBadges(item)]
+        }, item.id);
+      })
+    }), (0, _jsxRuntime.jsxs)("div", {
+      className: "ncua-context-tab__nav",
+      children: [(0, _jsxRuntime.jsx)(_Button.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: _uiAdminIcon.ChevronLeft
+        },
+        onClick: () => scrollByPage(-1)
+      }), (0, _jsxRuntime.jsx)(_Button.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: _uiAdminIcon.ChevronRight
+        },
+        onClick: () => scrollByPage(1)
+      })]
+    }), isOpen && (0, _jsxRuntime.jsxs)("div", {
+      ref: panelRef,
+      className: "ncua-context-tab__panel",
+      role: "menu",
+      children: [(0, _jsxRuntime.jsx)("ul", {
+        className: "ncua-context-tab__panel-column",
+        role: "none",
+        children: leftColumn.map(renderOption)
+      }), (0, _jsxRuntime.jsx)("ul", {
+        className: "ncua-context-tab__panel-column",
+        role: "none",
+        children: rightColumn.map(renderOption)
+      })]
+    })]
+  });
+};
+exports.ContextTab = ContextTab;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ContextTab = require("./ContextTab");
+Object.keys(_ContextTab).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ContextTab[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ContextTab[key];
+    }
+  });
+});

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

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useContextTabScroll = void 0;
+var _react = require("react");
+const EDGE_THRESHOLD = 1; // 스크롤 끝 판정 시 소수점 오차 보정용 여유값(px)
+/**
+ * ContextTab Tab Bar의 네이티브 가로 스크롤·페이징 메커니즘을 담당하는 훅.
+ *
+ * - `barRef`: 스크롤 컨테이너(ref)
+ * - `isBeginning` / `isEnd`: 좌/우 네비 버튼의 disabled 판정
+ * - `scrollByPage`: `<` `>` 클릭 시 한 페이지(보이는 폭)만큼 이동 — scroll-snap이 탭 경계에 맞춰 정렬
+ * - `activeTab` 변경 시 해당 탭이 보이는 페이지로 자동 스크롤
+ */
+const useContextTabScroll = _ref => {
+  let {
+    activeTab,
+    menus,
+    visibleTabsCount
+  } = _ref;
+  const barRef = (0, _react.useRef)(null);
+  const [isBeginning, setIsBeginning] = (0, _react.useState)(true);
+  const [isEnd, setIsEnd] = (0, _react.useState)(true);
+  // effect가 menus 식별자에 묶이지 않도록 최신 menus를 ref로 보관한다.
+  const menusRef = (0, _react.useRef)(menus);
+  menusRef.current = menus;
+  // Tab Bar의 스크롤 위치로 좌/우 네비 버튼의 활성 여부를 계산한다.
+  const updateEdges = (0, _react.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로 최신값 참조) 사용자가 다른 페이지를 보는 중 부모 리렌더로 페이지가 되돌아가는 것을 막는다.
+  (0, _react.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: 위 값들은 에지 재계산을 위한 의도적 트리거
+  (0, _react.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
+  };
+};
+exports.useContextTabScroll = useContextTabScroll;

package/dist/esm/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/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/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/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 {};

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

@@ -5522,6 +5522,164 @@ button {
   box-shadow: -2px 0 var(--gray-700);
 }
 
+.ncua-context-tab {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-inline: 4px;
+  border: 1px solid var(--gray-100);
+  border-radius: 8px;
+  background-color: var(--gray-100);
+}
+.ncua-context-tab__bar {
+  position: relative;
+  display: flex;
+  flex: 1;
+  gap: 8px;
+  min-width: 0;
+  padding-block: 4px;
+  padding-inline-end: 4px;
+  margin-inline-end: -4px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+.ncua-context-tab__bar::-webkit-scrollbar {
+  display: none;
+}
+.ncua-context-tab__bar.is-fill .ncua-context-tab__tab {
+  flex: 1 1 0;
+}
+.ncua-context-tab__tab {
+  border: 0;
+  padding: 0;
+  background-color: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  flex: 0 0 calc((100% - (var(--ncua-context-tab-visible, 7) - 1) * 8px) / var(--ncua-context-tab-visible, 7));
+  min-width: 0;
+  scroll-snap-align: start;
+  padding: 5px 12px;
+  border-radius: 6px;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
+  font-weight: 700;
+  color: var(--gray-400);
+  white-space: nowrap;
+}
+.ncua-context-tab__tab-label {
+  overflow: hidden;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: break-word;
+  min-width: 0;
+}
+.ncua-context-tab__tab:hover {
+  color: var(--gray-500);
+}
+.ncua-context-tab__tab.is-active {
+  color: var(--gray-700);
+}
+.ncua-context-tab__tab.is-disabled, .ncua-context-tab__tab:disabled {
+  color: var(--gray-300);
+  cursor: not-allowed;
+}
+.ncua-context-tab__tab.is-disabled:hover, .ncua-context-tab__tab:disabled:hover {
+  background-color: transparent;
+  box-shadow: none;
+}
+.ncua-context-tab__control {
+  flex-shrink: 0;
+}
+.ncua-context-tab__control--menu.ncua-btn--xs, .ncua-context-tab__control--prev.ncua-btn--xs, .ncua-context-tab__control--next.ncua-btn--xs {
+  width: 32px;
+  height: 32px;
+  transition: none;
+}
+.ncua-context-tab__tab:hover, .ncua-context-tab__tab.is-active, .ncua-context-tab__control--menu.ncua-btn--xs[aria-expanded]:hover, .ncua-context-tab__control--menu.ncua-btn--xs[aria-expanded=true], .ncua-context-tab__control--prev.ncua-btn--xs:not(.is-disable):hover, .ncua-context-tab__control--next.ncua-btn--xs:not(.is-disable):hover {
+  background-color: var(--base-white);
+  box-shadow: var(--shadow-sm);
+}
+.ncua-context-tab__nav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+.ncua-context-tab__panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: -1px;
+  z-index: 10;
+  display: flex;
+  width: 100%;
+  max-height: 188px;
+  overflow-y: auto;
+  border: 1px solid var(--gray-100);
+  border-radius: 8px;
+  background-color: var(--base-white);
+  box-shadow: var(--shadow-lg);
+}
+.ncua-context-tab__panel-column {
+  flex: 1 1 0;
+  min-width: 0;
+  padding: 4px 0;
+  list-style: none;
+  margin: 0;
+}
+.ncua-context-tab__panel-column li {
+  padding: 2px 6px;
+}
+.ncua-context-tab__option {
+  border: 0;
+  padding: 0;
+  background-color: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 120px;
+  padding: 7px 10px;
+  border-radius: 6px;
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+  font-weight: 500;
+  color: var(--gray-500);
+  text-align: left;
+}
+.ncua-context-tab__option-label {
+  overflow: hidden;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: break-word;
+  min-width: 0;
+}
+.ncua-context-tab__option-check {
+  flex-shrink: 0;
+  margin-inline-start: auto;
+  color: var(--gray-700);
+}
+.ncua-context-tab__option:hover {
+  background-color: var(--gray-50);
+}
+.ncua-context-tab__option:disabled {
+  color: var(--gray-300);
+  cursor: not-allowed;
+}
+.ncua-context-tab__option:disabled:hover {
+  background-color: transparent;
+}
+.ncua-context-tab .ncua-badge {
+  flex-shrink: 0;
+}
+
 .ncua-progress-circle {
   position: relative;
   display: inline-flex;

package/package.json

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