@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/Table.js

@@ -0,0 +1,200 @@
+/// <reference path="../types/lucide-deep-imports.d.ts" />
+// ↑ deep import 에 타입을 붙이는 앰비언트 선언. 이 파일에 붙여 두는 이유:
+// 소비 앱은 tsconfig 의 paths 로 core 소스를 직접 보는데, 그 include 에는
+// core 의 types/ 가 안 걸려 선언이 로드되지 않는다(관측: speechear TS7016 159개).
+// 참조를 쓰는 파일에 두면 import 를 타고 따라온다.
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import { splitTrackList } from './tableTrackList';
+import { useTranslation } from 'react-i18next';
+import './Table.css';
+import './TableCell.css';
+import './TableField.css';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import ChevronUp from 'lucide-react/dist/esm/icons/chevron-up.mjs';
+import ChevronDown from 'lucide-react/dist/esm/icons/chevron-down.mjs';
+import Button from './Button';
+import Loader from './Loader';
+function TableCell({ children, className, style }) {
+    return _jsx("div", { className: className ? `table-cell ${className}` : 'table-cell', style: style, children: children });
+}
+function TableRow({ variant = 'default', children, className, draggable, onClick, onMouseEnter, onMouseLeave, onDragStart, onDragEnd, expandedContent }) {
+    const handleKeyDown = useCallback((e) => {
+        if (!onClick)
+            return;
+        // 행 안의 버튼(수정/삭제 등)이 자체적으로 Enter/Space를 처리하므로, 행 자체에서
+        // 발생한 키 입력만(target이 행 자기 자신일 때만) 행 클릭으로 취급한다
+        if (e.target !== e.currentTarget)
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClick();
+        }
+    }, [onClick]);
+    if (variant === 'loading') {
+        return _jsx("div", { className: "table-row-wrap", children: _jsx("div", { className: "table-row table-row--loading", children: _jsx(Loader, { size: 28 }) }) });
+    }
+    if (variant === 'empty') {
+        return _jsx("div", { className: "table-row-wrap", children: _jsx("div", { className: "table-row table-row--empty body-3", children: children }) });
+    }
+    return (_jsxs("div", { className: "table-row-wrap", children: [_jsx("div", { className: className ? `table-row ${className}` : 'table-row', draggable: draggable, onClick: onClick, onKeyDown: onClick ? handleKeyDown : undefined, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onDragStart: onDragStart, onDragEnd: onDragEnd, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: children }), expandedContent && _jsx("div", { className: "table-row-expand", children: expandedContent })] }));
+}
+function SortArrow({ dir }) {
+    const Icon = dir === 'asc' ? ChevronUp : ChevronDown;
+    return _jsx(Icon, { className: "table-field__sort-arrow", size: 16, strokeWidth: 2 });
+}
+function TableField({ children, onClick, className, sortDir, onResizeStart }) {
+    // 정렬 가능한 컬럼 헤더는 클릭만 받고 있어 키보드로는 정렬할 수 없었다.
+    // TableRow와 같은 방식으로 Enter/Space를 처리한다(리사이저 등 자식에서 온 키는 무시).
+    const handleKeyDown = useCallback((e) => {
+        if (!onClick)
+            return;
+        if (e.target !== e.currentTarget)
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClick();
+        }
+    }, [onClick]);
+    return (_jsxs("div", { onClick: onClick, onKeyDown: onClick ? handleKeyDown : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, "aria-sort": sortDir ? (sortDir === 'asc' ? 'ascending' : 'descending') : undefined, className: cx('table-field body-3', className, sortDir ? 'table-field--sorted' : '', onResizeStart ? 'table-field--resizable' : ''), children: [children, sortDir && _jsx(SortArrow, { dir: sortDir }), onResizeStart && (_jsx("span", { className: "table-field__resizer", onPointerDown: onResizeStart, onClick: e => e.stopPropagation(), "aria-hidden": "true" }))] }));
+}
+/** @public */
+export default function Table({ fields = [], headerGroups, items = [], renderRow, onRowClick, onRowMouseEnter, onRowMouseLeave, onRowDragStart, onRowDragEnd, draggingId, gridTemplateColumns, resizable = false, resizeMode = 'grow', resizeStorageKey, size = 'small', title, count, collapsed = false, onToggleCollapse, headerActions, empty, loading, dragOver = false, onDragOver, onDragLeave, onDrop, renderExpandedRow, expandedId, }) {
+    const { t } = useTranslation();
+    // ── 컬럼 폭 드래그 리사이즈 (resizable) ──
+    const MIN_COL_W = 48;
+    const storeKey = resizeStorageKey ? `table-cols:${resizeStorageKey}` : null;
+    const fieldsRef = useRef(null);
+    // fit 모드에서는 이웃(next)에서 같은 만큼 덜어 오므로 그 컬럼의 시작 폭도 들고 있어야 한다
+    const dragRef = useRef(null);
+    const [colWidths, setColWidths] = useState(() => {
+        if (!storeKey || typeof window === 'undefined')
+            return null;
+        try {
+            const arr = JSON.parse(window.localStorage.getItem(storeKey) ?? 'null');
+            return Array.isArray(arr) && arr.every((n) => typeof n === 'number') ? arr : null;
+        }
+        catch {
+            return null;
+        }
+    });
+    // 최신 colWidths를 참조로 유지 (드래그 종료 시 저장용)
+    const colWidthsRef = useRef(colWidths);
+    useEffect(() => { colWidthsRef.current = colWidths; }, [colWidths]);
+    const onResizeMove = useCallback((e) => {
+        const d = dragRef.current;
+        if (!d)
+            return;
+        setColWidths(prev => {
+            if (!prev)
+                return prev;
+            const copy = [...prev];
+            if (d.next != null && d.startWNext != null) {
+                // fit — 이동량을 두 컬럼이 나눠 갖는다. 둘 다 최소폭 밑으로 내려가지 않도록
+                // 이동량 자체를 먼저 자른다(한쪽만 자르면 합이 달라져 표 폭이 흔들린다).
+                const raw = e.clientX - d.startX;
+                const delta = Math.max(MIN_COL_W - d.startW, Math.min(d.startWNext - MIN_COL_W, raw));
+                copy[d.index] = d.startW + delta;
+                copy[d.next] = d.startWNext - delta;
+            }
+            else {
+                copy[d.index] = Math.max(MIN_COL_W, d.startW + (e.clientX - d.startX));
+            }
+            return copy;
+        });
+    }, []);
+    const onResizeEnd = useCallback(() => {
+        dragRef.current = null;
+        window.removeEventListener('pointermove', onResizeMove);
+        // addEventListener에 전달한 것과 동일한 함수 identity로 제거해야 하므로 자기 참조가 필요하다
+        // eslint-disable-next-line react-hooks/immutability
+        window.removeEventListener('pointerup', onResizeEnd);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        // 조절 결과를 localStorage에 저장
+        if (storeKey && colWidthsRef.current) {
+            try {
+                window.localStorage.setItem(storeKey, JSON.stringify(colWidthsRef.current));
+            }
+            catch { /* 저장 실패 무시 */ }
+        }
+    }, [onResizeMove, storeKey]);
+    const startResize = useCallback((index, e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const el = fieldsRef.current;
+        if (!el)
+            return;
+        // 현재 렌더된 컬럼 폭을 px로 고정한 뒤 드래그로 조절
+        // (fit 모드에서도 측정값을 그대로 쓴다 — 아래에서 fr 가중치로 내보내므로 같은 비율이 된다)
+        const measured = Array.from(el.children).map(c => c.getBoundingClientRect().width);
+        // fit — 덜어 올 이웃은 '폭 조절이 켜진' 다음 컬럼이다. 고정 폭 컬럼(체크박스 등)에서
+        // 덜어 오면 그 컬럼이 정해 둔 폭을 잃는다.
+        const next = resizeMode === 'fit'
+            ? fields.findIndex((f, i) => i > index && f.resizable !== false)
+            : -1;
+        dragRef.current = next >= 0
+            ? { index, startX: e.clientX, startW: measured[index], next, startWNext: measured[next] }
+            : { index, startX: e.clientX, startW: measured[index] };
+        setColWidths(measured);
+        window.addEventListener('pointermove', onResizeMove);
+        window.addEventListener('pointerup', onResizeEnd);
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+    }, [onResizeMove, onResizeEnd, resizeMode, fields]);
+    // 컬럼 리사이즈 드래그 도중(pointerup 발생 전) Table이 언마운트되면(예: 필터링/페이지 전환으로
+    // 목록이 통째로 바뀜) startResize에서 window에 등록한 pointermove/pointerup 리스너가 정리되지
+    // 않고 남아 언마운트된 컴포넌트의 setColWidths를 계속 호출하고, body 커서/userSelect도 고정된
+    // 채로 남는다 — 언마운트 시 드래그 중이었다면 명시적으로 정리한다.
+    useEffect(() => {
+        return () => {
+            if (dragRef.current) {
+                window.removeEventListener('pointermove', onResizeMove);
+                window.removeEventListener('pointerup', onResizeEnd);
+                document.body.style.cursor = '';
+                document.body.style.userSelect = '';
+            }
+        };
+    }, [onResizeMove, onResizeEnd]);
+    // 필드 개수가 바뀌면 고정 폭 무효화(원래 grid 사용).
+    // resizable:false인 컬럼(예: 체크박스)은 다른 컬럼 드래그 시 같이 측정·저장되어도 항상 기본 폭을 사용.
+    // 항목이 0개일 때(로딩/빈 상태)는 저장된 절대 px 폭 합이 현재 컨테이너 폭보다 커서
+    // 불필요한 가로 스크롤이 생길 수 있어, 이때는 기본(fr 단위) grid로 되돌린다.
+    const defaultCols = splitTrackList(gridTemplateColumns);
+    // fit 모드는 폭을 px가 아니라 비율(fr)로 내보낸다 — 측정값을 그대로 가중치로 쓰면 지금과 같은
+    // 비율이 되고, 컨테이너가 좁아져도 합이 늘 컨테이너 폭이라 가로 스크롤이 생기지 않는다.
+    // 그래서 grow 모드에 있던 'items가 0개면 기본 grid로 되돌린다'는 방어도 필요 없다
+    // (그건 절대 px 합이 컨테이너보다 클 때를 막던 것이다).
+    // 다만 원래 px로 못 박아 둔 열(아이콘·숫자 칸의 '64px')은 fit 모드에서도 px로 둔다.
+    // fr로 바꾸면 창이 넓어질 때 아이콘 칸까지 함께 늘어나 정해 둔 크기를 잃는다.
+    // px 열이 커진 만큼 남는 공간이 줄고 fr 가중치 합도 같이 줄어 총폭은 그대로다.
+    const isFixedPx = (i) => /^\d+(\.\d+)?px$/.test(defaultCols[i] ?? '');
+    const widthUnit = (i) => (resizeMode === 'fit' && !isFixedPx(i)) ? 'fr' : 'px';
+    const canApplyWidths = colWidths && colWidths.length === fields.length
+        && (resizeMode === 'fit' || items.length > 0);
+    const effectiveGrid = canApplyWidths
+        ? fields.map((f, i) => (f.resizable === false && defaultCols[i]) ? defaultCols[i] : `${colWidths[i]}${widthUnit(i)}`).join(' ')
+        : gridTemplateColumns;
+    const gridStyle = effectiveGrid
+        ? { '--table-grid-cols': effectiveGrid }
+        : undefined;
+    const hasHeader = title !== undefined;
+    return (_jsx("div", { className: `table-wrap table-wrap--${size}${dragOver ? ' table-wrap--dragover' : ''}${collapsed ? ' table-wrap--collapsed' : ''}`, style: gridStyle, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, children: _jsxs("div", { className: "table body-2", children: [hasHeader && (_jsxs("div", { className: "table-header", onClick: onToggleCollapse, role: onToggleCollapse ? 'button' : undefined, tabIndex: onToggleCollapse ? 0 : undefined, "aria-expanded": onToggleCollapse ? !collapsed : undefined, onKeyDown: onToggleCollapse ? (e) => { if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        onToggleCollapse();
+                    } } : undefined, children: [onToggleCollapse && (_jsx(Button, { size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: collapsed ? 'chevron-right' : 'chevron-down', ariaLabel: collapsed ? t('common.expand', '펼치기') : t('common.collapse', '접기'), className: "table-header__chevron" })), _jsx("span", { className: "table-header__title h5b", children: title }), count !== undefined && _jsx("span", { className: "table-header__count body-3b", children: count }), headerActions && (_jsx("span", { className: "table-header__actions", onClick: e => e.stopPropagation(), children: headerActions }))] })), !collapsed && (_jsxs(_Fragment, { children: [headerGroups && headerGroups.length > 0 && (_jsx("div", { className: "table-fields table-fields--groups", children: headerGroups.map((g, i) => (_jsx("div", { className: cx('table-field body-3', g.className), style: { gridColumn: `span ${g.span}` }, children: g.label }, i))) })), _jsx("div", { className: "table-fields", ref: fieldsRef, children: fields.map((f, i) => (_jsx(TableField, { onClick: f.onClick, className: f.className, sortDir: f.sortDir, 
+                                /* fit 모드는 오른쪽 이웃에서 폭을 덜어 오므로, 덜어 올 컬럼이 없는 자리에는
+                                   손잡이를 두지 않는다 — 두면 그 컬럼만 grow처럼 넓어져 표가 밀린다. */
+                                onResizeStart: resizable && i < fields.length - 1 && f.resizable !== false
+                                    && (resizeMode !== 'fit' || fields.some((g, j) => j > i && g.resizable !== false))
+                                    ? (e) => startResize(i, e) : undefined, children: f.label }, i))) }), _jsx("div", { className: "table-body", children: loading ? (_jsx(TableRow, { variant: "loading" })) : items.length === 0 && empty ? (_jsx(TableRow, { variant: "empty", children: empty })) : items.map((item, idx) => {
+                                const isDragging = draggingId != null && item.id === draggingId;
+                                const isExpanded = expandedId != null && (expandedId instanceof Set ? expandedId.has(item.id) : item.id === expandedId);
+                                return (_jsx(TableRow, { className: `${onRowClick ? ' table-row--clickable' : ''}${onRowDragStart ? ' table-row--draggable' : ''}${isDragging ? ' table-row--dragging' : ''}`.trim(), draggable: !!onRowDragStart, 
+                                    // 옆의 핸들러들처럼 있을 때만 넘긴다. 항상 함수를 만들어 넘기면
+                                    // TableRow 가 "클릭 가능"으로 보고 role="button" · tabIndex=0 을 붙여,
+                                    // 클릭 동작이 없는 표의 모든 행이 버튼으로 읽히고 탭 정지점이 된다.
+                                    onClick: onRowClick ? () => onRowClick(item) : undefined, onMouseEnter: onRowMouseEnter ? (e) => onRowMouseEnter(item, e) : undefined, onMouseLeave: onRowMouseLeave ? (e) => onRowMouseLeave(item, e) : undefined, onDragStart: onRowDragStart ? (e) => onRowDragStart(item, e) : undefined, onDragEnd: onRowDragEnd ? (e) => onRowDragEnd(item, e) : undefined, expandedContent: isExpanded && renderExpandedRow ? renderExpandedRow(item) : undefined, children: renderRow(item).map((cell, i) => (_jsx(TableCell, { className: cell.className, style: cell.style, children: cell.content }, i))) }, String(item.id ?? idx)));
+                            }) })] }))] }) }));
+}

package/dist/packages/core/src/components/TableCell.css

@@ -0,0 +1,12 @@
+.table-cell {
+  min-width: 0;
+  padding: 0 16px;
+  color: var(--color-darkGray);
+  display: flex;
+  align-items: center;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  /* 머리행(.table-field)에는 있고 여기엔 없었다 — 열을 좁히면 값이 옆 열 위로 겹쳐
+     그려져 두 열의 글자가 포개졌다(머리는 멀쩡한데 본문만). 같은 규칙으로 맞춘다. */
+  overflow: hidden;
+}

package/dist/packages/core/src/components/TableField.css

@@ -0,0 +1,60 @@
+.table-field {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  padding: 0 16px;
+  text-align: left;
+  color: var(--color-gray);
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+  /* 머리행과 본문은 별개의 grid라 컬럼 폭이 저마다 계산된다. .table-cell 에는 min-width:0
+     이 있는데 여기 없으면, 라벨(nowrap)의 min-content 가 그 열의 최소가 되어 머리행만
+     더 넓어진다 — 좁은 열에서 머리와 값이 어긋나 보인다. 둘을 같은 규칙으로 맞춘다. */
+  min-width: 0;
+  /* 위 min-width:0 으로 열이 라벨보다 좁아질 수 있다. 넘친 글자가 옆 열을 침범하지
+     않도록 잘라 낸다(열 이름은 폭을 넓히면 다시 보인다). */
+  overflow: hidden;
+}
+
+/* ── 컬럼 폭 리사이즈 핸들 (헤더 경계선 드래그) ── */
+.table-field--resizable { position: relative; }
+/* 손잡이는 **열 안쪽**에 둔다. 예전엔 right:-5px 로 경계에 걸치게 뒀는데, 그러면
+   그리드의 마지막 열에서 5px 이 표 밖으로 나가 그대로 가로 스크롤이 됐다
+   (실측: 375px 고객 표에서 .table-wrap 이 scrollWidth 338 / clientWidth 333 —
+    모바일에선 열이 접혀 재배치되므로 어느 열이 끝에 오는지 고정돼 있지도 않다).
+   대신 선(::after)을 flex-end 로 오른쪽 끝에 붙여 경계 위치는 그대로 유지한다. */
+.table-field__resizer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 10px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 3;
+  display: flex;
+  justify-content: flex-end;  /* 선을 열 경계(오른쪽 끝)에 */
+  align-items: center;        /* 선을 세로 중앙 */
+  touch-action: none;
+}
+.table-field__resizer::after {
+  content: '';
+  width: 1px;
+  height: 55%;
+  background: var(--color-whiteLine);
+  transition: background-color .12s, width .12s, height .12s;
+}
+.table-field__resizer:hover::after,
+.table-field__resizer:active::after {
+  width: 2px;
+  height: 100%;
+  background: var(--color-main);
+}
+
+.table-field:hover { color: var(--color-main); }
+
+.table-field--sorted { color: var(--color-main); }
+
+.table-field__sort-arrow {
+  flex-shrink: 0;
+}

package/dist/packages/core/src/components/Tabs.css

@@ -0,0 +1,55 @@
+.tabs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-m);
+}
+
+.tabs__list {
+  display: flex;
+  gap: var(--spacing-s);
+  border-bottom: 1px solid var(--color-whiteLine);
+}
+
+.tabs__tab {
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: 0 var(--spacing-xs);
+  color: var(--color-gray);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.tabs__list--32 .tabs__tab { height: 32px; }
+.tabs__list--40 .tabs__tab { height: 40px; }
+.tabs__list--48 .tabs__tab { height: 48px; }
+
+.tabs__tab:hover:not(:disabled) {
+  color: var(--color-darkGray);
+}
+
+.tabs__tab:focus-visible {
+  outline: 2px solid var(--color-main);
+  outline-offset: 2px;
+}
+
+.tabs__tab--active {
+  color: var(--color-main);
+  border-bottom-color: var(--color-main);
+}
+
+.tabs__tab:disabled {
+  color: var(--color-disabled);
+  cursor: not-allowed;
+}
+
+.tabs__panel {
+  outline: none;
+}
+
+.tabs__panel:focus-visible {
+  outline: 2px solid var(--color-main);
+  outline-offset: 2px;
+}

package/dist/packages/core/src/components/Tabs.d.ts

@@ -0,0 +1,30 @@
+import { type ReactNode } from 'react';
+import './Tabs.css';
+/** @public */
+export type TabItem = {
+    key: string;
+    label: ReactNode;
+    panel: ReactNode;
+    disabled?: boolean;
+};
+/** @public */
+export interface TabsProps {
+    items?: TabItem[];
+    value?: string;
+    onChange?: (key: string) => void;
+    className?: string;
+    /** 탭 버튼 높이 — SegmentedControl과 동일 체계 (32 / 40 / 48) */
+    size?: 32 | 40 | 48;
+}
+/**
+ * 탭 리스트 + 탭 패널 전환 컴포넌트. `role="tablist"/"tab"/"tabpanel"`,
+ * `aria-selected`, 화살표 키 탐색 등 완전한 탭 ARIA 시맨틱을 갖춘다.
+ *
+ * `SegmentedControl`과 혼동하지 말 것 — SegmentedControl은 콘텐츠 패널
+ * 전환이나 탭 ARIA role이 없는 단순 세그먼트 버튼 그룹으로, 필터/토글
+ * 선택(예: 상태 필터)에 쓰인다. Tabs는 children(panel)의 표시/숨김을
+ * 직접 소유하며 탭 콘텐츠 전환이 필요할 때 사용한다.
+ *
+ * @public
+ */
+export default function Tabs({ items, value, onChange, className, size }: TabsProps): import("react").JSX.Element;

package/dist/packages/core/src/components/Tabs.js

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import './Tabs.css';
+/**
+ * 탭 리스트 + 탭 패널 전환 컴포넌트. `role="tablist"/"tab"/"tabpanel"`,
+ * `aria-selected`, 화살표 키 탐색 등 완전한 탭 ARIA 시맨틱을 갖춘다.
+ *
+ * `SegmentedControl`과 혼동하지 말 것 — SegmentedControl은 콘텐츠 패널
+ * 전환이나 탭 ARIA role이 없는 단순 세그먼트 버튼 그룹으로, 필터/토글
+ * 선택(예: 상태 필터)에 쓰인다. Tabs는 children(panel)의 표시/숨김을
+ * 직접 소유하며 탭 콘텐츠 전환이 필요할 때 사용한다.
+ *
+ * @public
+ */
+export default function Tabs({ items = [], value, onChange, className = '', size = 40 }) {
+    const { t } = useTranslation();
+    const listRef = useRef(null);
+    const activeKey = value ?? items[0]?.key;
+    /** 지금 화면에 선 **켜진 탭들** — 옮기는 자리는 전부 이 목록 기준이다 */
+    const 켜진탭들 = () => Array.from(listRef.current?.querySelectorAll('[role="tab"]:not(:disabled)') ?? []);
+    const focusTabAt = (index, tabs = 켜진탭들()) => {
+        if (tabs.length === 0)
+            return;
+        const clamped = ((index % tabs.length) + tabs.length) % tabs.length;
+        tabs[clamped]?.focus();
+        tabs[clamped]?.click();
+    };
+    /*
+     * 자리를 세는 기준이 **두 벌로 갈려 있었다.** 옮길 대상은 `:not(:disabled)` 로
+     * 켜진 것만 모으면서, 넘기는 번호는 `items`(꺼진 것까지 든 전체) 기준이었다.
+     * 꺼진 탭이 하나만 섞여도 그 수만큼 어긋난다 — [A, B(꺼짐), C, D] 에서 C 의
+     * 오른쪽은 D 가 아니라 한 바퀴 돈 A 였고, End 도 D 가 아니라 A 로 갔다.
+     * 지금 눌린 탭이 **켜진 것들 안에서 몇 번째인지**를 세어 거기서 옮긴다.
+     */
+    const handleKeyDown = (e) => {
+        const 이동키 = ['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp', 'Home', 'End'];
+        if (!이동키.includes(e.key))
+            return;
+        e.preventDefault();
+        const tabs = 켜진탭들();
+        const 지금 = tabs.indexOf(e.currentTarget);
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown')
+            focusTabAt(지금 + 1, tabs);
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp')
+            focusTabAt(지금 - 1, tabs);
+        else if (e.key === 'Home')
+            focusTabAt(0, tabs);
+        else
+            focusTabAt(tabs.length - 1, tabs);
+    };
+    const activeItem = items.find(item => item.key === activeKey);
+    return (_jsxs("div", { className: `tabs ${className}`.trim(), children: [_jsx("div", { ref: listRef, className: `tabs__list tabs__list--${size}`, role: "tablist", "aria-label": t('tabs.ariaLabel', '탭'), children: items.map(item => (_jsx("button", { id: `tabs__tab-${item.key}`, type: "button", role: "tab", "aria-selected": item.key === activeKey, "aria-controls": `tabs__panel-${item.key}`, disabled: item.disabled, tabIndex: item.key === activeKey ? 0 : -1, className: `tabs__tab body-2${item.key === activeKey ? ' tabs__tab--active' : ''}`, onClick: () => onChange?.(item.key), onKeyDown: handleKeyDown, children: item.label }, item.key))) }), activeItem && (_jsx("div", { id: `tabs__panel-${activeItem.key}`, role: "tabpanel", "aria-labelledby": `tabs__tab-${activeItem.key}`, tabIndex: 0, className: "tabs__panel", children: activeItem.panel }, activeItem.key))] }));
+}