@ncds/ui-admin 1.8.8 → 1.8.11

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/feedback-and-status/badge/Badge.d.ts

@@ -1,11 +1,12 @@
 import type { ColorTone } from '../../../../constant/color';
 import type { Size } from '../../../../constant/size';
 import type { SideSlotType } from '../../../types/side-slot';
-type BadgeType = 'pill-outline' | 'pill-dark-color';
+type BadgeType = 'pill-outline' | 'pill-dark-color' | 'new-badge';
 type BadgeColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled'>;
 type BadgeSize = Extract<Size, 'xs' | 'sm' | 'md'>;
 type BadgeProps = {
-    label: string;
+    /** new-badge 타입에서는 사용되지 않는다(무시됨). 그 외 타입에서는 필수로 전달한다. */
+    label?: string;
     type?: BadgeType;
     color?: BadgeColor;
     className?: string;

package/dist/temp/src/components/feedback-and-status/badge/Badge.js

@@ -1,11 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { New } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { sideSlotRender } from './utils';
 /**
  * 뱃지 컴포넌트의 아이콘은 디자인 시스템에서 12px 고정으로 정의되어 있습니다.
  */
 const BADGE_ICON_SIZE = 12;
+/** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
+const NEW_BADGE_ICON_SIZE = { sm: 12, md: 16 };
 const Badge = ({ label, type = 'pill-outline', color = 'neutral', className, leadingIcon, trailingIcon, size = 'xs', }) => {
+    // new-badge: 신규 콘텐츠 'N' 마크 전용 타입. label·color·leadingIcon·trailingIcon은 무시되고
+    // 색은 --pink-600 으로 고정된다. (디자이너 명세: Icon/FeaturedIcon/Badge로 대체 불가한 전용 표시)
+    if (type === 'new-badge') {
+        const newBadgeSize = size === 'md' ? 'md' : 'sm';
+        const iconSize = NEW_BADGE_ICON_SIZE[newBadgeSize];
+        return (_jsx("span", { className: classNames('ncua-badge', 'ncua-badge--new-badge', `ncua-badge--new-badge-${newBadgeSize}`, className), children: _jsx(New, { width: iconSize, height: iconSize }) }));
+    }
     return (_jsxs("span", { className: classNames('ncua-badge', `ncua-badge--${type}`, `ncua-badge--${color}`, `ncua-badge--${size}`, className), children: [leadingIcon && sideSlotRender({ slot: leadingIcon, defaultIconSize: BADGE_ICON_SIZE }), _jsx("span", { className: "ncua-badge__label", children: label }), trailingIcon && sideSlotRender({ slot: trailingIcon, defaultIconSize: BADGE_ICON_SIZE })] }));
 };
 export { Badge };

package/dist/temp/src/components/forms-and-input/image-file-input/ImageFileInput.js

@@ -7,6 +7,18 @@ import { Tooltip } from '../../overlays/tooltip';
 import { HintText, Label } from '../../shared';
 import { FileInputErrorType as ImageFileInputErrorType } from '../file-input/FileInput';
 import { ImagePreview } from './components/ImagePreview';
+const toInvalidFile = (file, errorType) => ({
+    name: file.name,
+    size: file.size,
+    type: file.type,
+    lastModified: file.lastModified,
+    webkitRelativePath: file.webkitRelativePath,
+    arrayBuffer: () => file.arrayBuffer(),
+    stream: () => file.stream(),
+    text: () => file.text(),
+    slice: (...args) => file.slice(...args),
+    errorType,
+});
 export const ImageFileInput = forwardRef(({ size = 'sm', accept, multiple = false, maxFileSize, maxFileCount, value, onChange, onFileSelect, onFail, buttonLabel = '파일 찾기', imagePreviewTooltipLabel = '이미지 업로드', disabled, label, hintItems, validation, destructive, isRequired, showHelpIcon, hintText, showFileTagList = true, showHintText = true, showFileInput = true, ...props }, ref) => {
     const fileInputRef = useRef(null);
     useImperativeHandle(ref, () => fileInputRef.current);
@@ -48,25 +60,16 @@ export const ImageFileInput = forwardRef(({ size = 'sm', accept, multiple = fals
         const invalidFiles = [];
         for (const file of fileList) {
             if (files.some((f) => f.name === file.name && f.size === file.size)) {
-                invalidFiles.push({
-                    ...file,
-                    errorType: ImageFileInputErrorType.ALREADY_UPLOADED,
-                });
+                invalidFiles.push(toInvalidFile(file, ImageFileInputErrorType.ALREADY_UPLOADED));
                 continue;
             }
             if (!!maxFileSize && file.size > maxFileSize) {
-                invalidFiles.push({
-                    ...file,
-                    errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE,
-                });
+                invalidFiles.push(toInvalidFile(file, ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE));
                 continue;
             }
             // Skip max count check if maxFileCount is 1 (allow replacement)
             if (!!maxFileCount && maxFileCount !== 1 && files.length + validFiles.length >= maxFileCount) {
-                invalidFiles.push({
-                    ...file,
-                    errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT,
-                });
+                invalidFiles.push(toInvalidFile(file, ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT));
                 continue;
             }
             validFiles.push(file);

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/feedback-and-status/badge/Badge.d.ts

@@ -1,11 +1,12 @@
 import type { ColorTone } from '../../../../constant/color';
 import type { Size } from '../../../../constant/size';
 import type { SideSlotType } from '../../../types/side-slot';
-type BadgeType = 'pill-outline' | 'pill-dark-color';
+type BadgeType = 'pill-outline' | 'pill-dark-color' | 'new-badge';
 type BadgeColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled'>;
 type BadgeSize = Extract<Size, 'xs' | 'sm' | 'md'>;
 type BadgeProps = {
-    label: string;
+    /** new-badge 타입에서는 사용되지 않는다(무시됨). 그 외 타입에서는 필수로 전달한다. */
+    label?: string;
     type?: BadgeType;
     color?: BadgeColor;
     className?: string;

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';