@ihabdevteam/core 0.131.0 → 0.132.0

package/dist/ihabdevteam-core.d.ts

@@ -230,6 +230,11 @@ export declare interface BadgeProps {
      * bar 는 주면 그 이름으로 읽힌다(안 주면 글자 그대로 읽힌다).
      */
     'aria-label'?: string;
+    /**
+     * 낭독기에서 숨긴다(dot·bar 모두). 개수를 곁의 단추 이름에 넣었을 때 쓴다 — 예: SideNav·BottomNav 는
+     * 단추 이름을 "숙제, 3개" 로 짓고 뱃지는 숨긴다. 주면 `aria-label` 보다 이긴다.
+     */
+    'aria-hidden'?: boolean;
     label?: string;
     children?: ReactNode;
     /**
@@ -290,7 +295,7 @@ export declare type BadgeType = 'bar' | 'dot';
  *  - 주(week):  'YYYY년 M월 N째주' 드롭다운 + 그 주의 요일(일~토) 막대
  * 원시 렌더링은 내부 BarChartCanvas가 담당한다.
  */
-export declare function BarChart({ size, barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal, totalUnitKey, totalLabelKey, control: controlProp, hideControls, rate, tightMax, avgMode, totalFormat, series, loading, onDetail, }: BarChartProps): JSX.Element;
+export declare function BarChart({ size, barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal, totalUnitKey, totalLabelKey, control: controlProp, hideControls, rate, tightMax, avgMode, totalFormat, series, loading, onDetail, inGrid, }: BarChartProps): JSX.Element;
 
 /** @public */
 export declare interface BarChartControl {
@@ -382,6 +387,8 @@ export declare interface BarChartProps {
     loading?: boolean;
     /** 지정 시 헤더 우측에 '상세보기' 버튼 표시 → 클릭 콜백 */
     onDetail?: () => void;
+    /** CSS 격자 칸 안에 세운다 — 아래 여백·최소 폭을 풀고 막대를 카드 바닥에 맞춘다. ChartSection `inGrid` 참고. */
+    inGrid?: boolean;
 }
 
 /** 시맨틱 사이즈 — 차트 캔버스 높이·막대 너비 프리셋 */
@@ -906,7 +913,7 @@ export declare interface ChartPoint {
  * 공유하도록 두 컴포넌트가 내부적으로 사용한다.
  * @public
  */
-export declare function ChartSection({ title, titleClassName, headRight, subRow, className, children }: ChartSectionProps): JSX.Element;
+export declare function ChartSection({ title, titleClassName, headRight, subRow, className, inGrid, children }: ChartSectionProps): JSX.Element;
 
 /** @public */
 export declare interface ChartSectionProps {
@@ -920,6 +927,13 @@ export declare interface ChartSectionProps {
     subRow?: ReactNode;
     /** 섹션 루트에 추가할 클래스 */
     className?: string;
+    /**
+     * CSS 격자(한 줄에 여러 칸) 안에 세울 때 켠다 — `manager-section--grid`.
+     * 아래 여백(14px)·최소 폭(320px)을 풀고 카드를 세로 flex 로 만들어, 같은 줄 카드끼리 높이가 늘어나면
+     * 차트 몸통(막대·링·로딩)을 **카드 바닥**에 맞춘다(범례 줄 수가 달라도 막대 바닥이 한 선).
+     * 차트가 아닌 카드에 같은 꼴이 필요하면 `manager-section manager-section--grid` 클래스를 그대로 쓴다.
+     */
+    inGrid?: boolean;
     children?: ReactNode;
 }
 
@@ -1355,7 +1369,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.131.0";
+export declare const CORE_VERSION = "0.132.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -3246,7 +3260,7 @@ export declare type PageProps = {
 export declare function pageStartIndexes(pageLengths: readonly number[]): number[];
 
 /** @public */
-export declare function PageTitle({ title, sub, rightAction, titleAction, badge, badgeVariant, documentTitle, onBack, backLabel }: PageTitleProps): JSX.Element;
+export declare function PageTitle({ title, sub, rightAction, titleAction, badge, badgeVariant, documentTitle, onBack, backLabel, wrap }: PageTitleProps): JSX.Element;
 
 declare type PageTitleProps = {
     title: ReactNode;
@@ -3277,6 +3291,14 @@ declare type PageTitleProps = {
      * title 이 문자열이면 이 값은 필요 없다.
      */
     documentTitle?: string;
+    /**
+     * 오른쪽(`rightAction`)이 넓어 제목 칸을 짓누를 때 **줄을 접어** 오른쪽을 아래로 내린다. 기본 false(한 줄 유지).
+     *
+     * 한 줄로 두면 제목 칸이 `min-width: 0` 까지 줄어, 탭 일곱 같은 넓은 오른쪽이 제목을 한 글자씩 세로로
+     * 밀어낸다(말귀 고객 상세 1135px 실측). 켜면 제목 칸에 320px(좁으면 제 폭) 바닥을 주고, 그 바닥이
+     * 안 들어가면 오른쪽이 다음 줄로 간다.
+     */
+    wrap?: boolean;
 };
 
 /**
@@ -4125,6 +4147,14 @@ export declare interface PopupProps {
      * 더 넓거나 무제한이 필요하면 className으로 `.popup-panel` max-width를 직접 override.
      */
     size?: 'small' | 'medium' | 'large';
+    /**
+     * 패널 높이를 못 박는다(숫자는 px, 문자열은 CSS 길이 그대로). 미지정 시 내용만큼(기본).
+     *
+     * 탭을 옮길 때마다 내용 높이가 달라 창이 위아래로 뛰는 팝업에 쓴다. **화면보다 크면 화면에
+     * 맞춘다** — 패널의 `max-height`(데스크톱 `100% - 60px`, 좁은 화면은 하단 내비 몫까지 뺀 값)가
+     * 그대로 걸리므로 창이 화면 밖으로 나가지 않는다. 넘치는 내용은 본문이 스스로 굴린다.
+     */
+    height?: number | string;
     /**
      * 이 값이 바뀌면 본문(.popup-content) 스크롤을 맨 위로 되돌린다.
      * 탭/모드 전환처럼 내부 콘텐츠가 통째로 바뀌는 팝업에서, 스크롤을 내린 채
@@ -4904,7 +4934,7 @@ export declare function reviewTableName(original: string, today: Date): string;
  * 미지정 시에는 헤더 없는 순수 링만 렌더된다(크기/색상 데모 등).
  * @public
  */
-export declare function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, ...ringProps }: RingChartProps): JSX.Element;
+export declare function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, inGrid, ...ringProps }: RingChartProps): JSX.Element;
 
 /** @public */
 export declare interface RingChartProps {
@@ -4955,6 +4985,8 @@ export declare interface RingChartProps {
     loading?: boolean;
     /** 섹션 루트에 추가할 클래스 (titleKey 지정 시에만 사용) */
     className?: string;
+    /** CSS 격자 칸 안에 세운다 — 아래 여백·최소 폭을 풀고 링을 카드 바닥에 맞춘다. ChartSection `inGrid` 참고(titleKey 지정 시에만 사용) */
+    inGrid?: boolean;
 }
 
 /** @public */
@@ -6017,7 +6049,7 @@ export declare type TabItem = {
 /** @public */
 export declare function Table<T extends {
     id?: string | number;
-}>({ fields, headerGroups, items, renderRow, onRowClick, onRowMouseEnter, onRowMouseLeave, onRowDragStart, onRowDragEnd, draggingId, gridTemplateColumns, resizable, resizeMode, resizeStorageKey, size, title, icon, count, collapsed, onToggleCollapse, headerActions, empty, loading, dragOver, onDragOver, onDragLeave, onDrop, renderExpandedRow, expandedId, }: TableProps<T>): JSX.Element;
+}>({ fields, headerGroups, items, renderRow, onRowClick, isRowClickable, onRowMouseEnter, onRowMouseLeave, onRowDragStart, onRowDragEnd, draggingId, gridTemplateColumns, mobileGridTemplateColumns, resizable, resizeMode, resizeStorageKey, size, title, icon, count, collapsed, onToggleCollapse, headerActions, empty, loading, dragOver, onDragOver, onDragLeave, onDrop, renderExpandedRow, expandedId, }: TableProps<T>): JSX.Element;
 
 /**
  * **다음에 쓸 표를 고른다.**
@@ -6139,12 +6171,28 @@ export declare type TableProps<T extends {
         style?: CSSProperties;
     }>;
     onRowClick?: (item: T) => void;
+    /**
+     * 줄마다 누를 수 있는지. false 인 줄은 `onRowClick` 이 안 불리고, 버튼으로 읽히지도(role·Tab 정지점) 않으며,
+     * 손가락 커서·hover 강조도 없다. `onRowClick` 이 있을 때만 뜻이 있다. 미지정이면 모든 줄이 눌린다(기본).
+     *
+     * 예: 방문 기록 표에서 '안 옴' 줄은 열 것이 없다 — CSS 로 커서만 되돌리면 눌리기는 그대로이고 낭독기는 여전히 버튼이라 한다.
+     */
+    isRowClickable?: (item: T) => boolean;
     onRowMouseEnter?: (item: T, event: MouseEvent_2<HTMLDivElement>) => void;
     onRowMouseLeave?: (item: T, event: MouseEvent_2<HTMLDivElement>) => void;
     onRowDragStart?: (item: T, event: DragEvent_2<HTMLDivElement>) => void;
     onRowDragEnd?: (item: T, event: DragEvent_2<HTMLDivElement>) => void;
     draggingId?: string | number | null;
     gridTemplateColumns?: string;
+    /**
+     * 좁은 화면(767px 이하)에서 쓸 열 틀. 주면 그 폭에서는 이 틀을 쓰고 **끌어 둔 폭(저장값)은 무시**한다 —
+     * 폭 조절 손잡이와 '칸 너비 초기화' 단추도 숨겨, 좁은 화면에서 끈 값이 넓은 화면의 저장값을 덮지 않게 한다.
+     * 넓은 화면으로 돌아오면 저장값이 그대로 돌아온다. 미지정이면 좁은 화면도 넓은 화면과 같다(기본).
+     *
+     * 열 틀은 인라인 CSS 변수로 들어가므로 앱 CSS 로는 `!important` 없이 못 이긴다 — 그래서 prop 이다.
+     * 숨길 칸은 `renderRow` 의 `className`·`fields[].className` 으로 앱이 가린다.
+     */
+    mobileGridTemplateColumns?: string;
     /** true면 헤더 경계선을 드래그해 컬럼 폭 조절 가능 */
     resizable?: boolean;
     /**
@@ -7760,6 +7808,7 @@ export declare function useComboboxSuggestions({ value, onChange, suggestions, o
     filtered: string[];
     handleFocus: () => void;
     handleBlur: () => void;
+    handleInput: () => void;
     handleKeyDown: (e: KeyboardEvent_2<HTMLInputElement | HTMLTextAreaElement>) => void;
     handleSelect: (item: string) => void;
 };

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

@@ -6,7 +6,10 @@ import Icon from './Icon';
 import './Accordion.css';
 function Item({ title, body, open = false, onToggle, avatar, titleClassName = 'body-2', bodyClassName = 'body-2', className = '', }) {
     const { t } = useTranslation();
-    return (_jsxs("div", { className: `accordion-item ${open ? 'accordion-item--open' : ''} ${className}`.trim(), children: [_jsxs("div", { className: "accordion-item__header", role: "button", tabIndex: 0, "aria-expanded": open, "data-accordion-header": true, onClick: onToggle, onKeyDown: e => {
+    return (
+    /* 무리가 role="list" 라 항목은 listitem 이어야 한다 — 없으면 낭독기가 "목록, 항목 0개" 로 읽고
+       목록 안 차례("3개 중 2번째")도 못 준다. */
+    _jsxs("div", { className: `accordion-item ${open ? 'accordion-item--open' : ''} ${className}`.trim(), role: "listitem", children: [_jsxs("div", { className: "accordion-item__header", role: "button", tabIndex: 0, "aria-expanded": open, "data-accordion-header": true, onClick: onToggle, onKeyDown: e => {
                     if (e.key === 'Enter' || e.key === ' ') {
                         // div에 role=button을 씌운 것이라 Space의 기본 동작(페이지 스크롤)이 살아 있다.
                         // 막지 않으면 키보드로 항목을 열 때마다 화면이 한 페이지씩 밀려 내려간다.

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

@@ -32,6 +32,11 @@ export interface BadgeProps {
      * bar 는 주면 그 이름으로 읽힌다(안 주면 글자 그대로 읽힌다).
      */
     'aria-label'?: string;
+    /**
+     * 낭독기에서 숨긴다(dot·bar 모두). 개수를 곁의 단추 이름에 넣었을 때 쓴다 — 예: SideNav·BottomNav 는
+     * 단추 이름을 "숙제, 3개" 로 짓고 뱃지는 숨긴다. 주면 `aria-label` 보다 이긴다.
+     */
+    'aria-hidden'?: boolean;
     label?: string;
     children?: ReactNode;
     /**

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

@@ -18,7 +18,7 @@ function MinusIcon() {
 /** @public */
 export default function Badge(props) {
     const { t } = useTranslation();
-    const { type = 'bar', size, className = '', 'aria-label': ariaLabel, } = props;
+    const { type = 'bar', size, className = '', 'aria-label': ariaLabel, 'aria-hidden': ariaHidden, } = props;
     // ── dot (원형) ──────────────────────────────────────────────────────────
     if (type === 'dot') {
         const { icon, number, position = 'top-right', onClick, animate = false } = props;
@@ -49,7 +49,7 @@ export default function Badge(props) {
                    내게** 한다 — 그래야 이벤트의 target·currentTarget 도 실제와 같다. */
                 e.preventDefault();
                 e.currentTarget.click();
-            } : undefined, "aria-label": ariaLabel ?? defaultLabel, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [number !== undefined && number, number === undefined && dotIcon === 'check' && _jsx(CheckIcon, {}), number === undefined && dotIcon === 'remove' && _jsx(RemoveIcon, {}), number === undefined && dotIcon === 'minus' && _jsx(MinusIcon, {})] }));
+            } : undefined, "aria-label": ariaHidden ? undefined : ariaLabel ?? defaultLabel, "aria-hidden": ariaHidden || undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [number !== undefined && number, number === undefined && dotIcon === 'check' && _jsx(CheckIcon, {}), number === undefined && dotIcon === 'remove' && _jsx(RemoveIcon, {}), number === undefined && dotIcon === 'minus' && _jsx(MinusIcon, {})] }));
     }
     // ── bar (텍스트) ────────────────────────────────────────────────────────
     const { label, children, variant = 'default', fill = 'filled', minWidth, iconLeft, iconRight, color } = props;
@@ -72,5 +72,5 @@ export default function Badge(props) {
     return (
     // aria-label 을 받아 놓고 bar 에서는 버렸다 — dot 과 같이 건넨다. 이름만 두면 역할 없는
     // span 이라 낭독기가 무시하므로 이름이 있을 때만 role="img" 를 붙인다(안 주면 예전 그대로).
-    _jsxs("span", { className: cls, style: style, "aria-label": ariaLabel, role: ariaLabel ? 'img' : undefined, children: [iconLeft && _jsx(Icon, { icon: iconLeft, size: iconSize, className: "badge__icon" }), label ?? children, iconRight && _jsx(Icon, { icon: iconRight, size: iconSize, className: "badge__icon" })] }));
+    _jsxs("span", { className: cls, style: style, "aria-label": ariaHidden ? undefined : ariaLabel, role: ariaLabel && !ariaHidden ? 'img' : undefined, "aria-hidden": ariaHidden || undefined, children: [iconLeft && _jsx(Icon, { icon: iconLeft, size: iconSize, className: "badge__icon" }), label ?? children, iconRight && _jsx(Icon, { icon: iconRight, size: iconSize, className: "badge__icon" })] }));
 }

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

@@ -13,4 +13,4 @@ import type { BarChartProps } from './barChartTypes';
  *  - 주(week):  'YYYY년 M월 N째주' 드롭다운 + 그 주의 요일(일~토) 막대
  * 원시 렌더링은 내부 BarChartCanvas가 담당한다.
  */
-export default function BarChart({ size, barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal, totalUnitKey, totalLabelKey, control: controlProp, hideControls, rate, tightMax, avgMode, totalFormat, series, loading, onDetail, }: BarChartProps): import("react").JSX.Element;
+export default function BarChart({ size, barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal, totalUnitKey, totalLabelKey, control: controlProp, hideControls, rate, tightMax, avgMode, totalFormat, series, loading, onDetail, inGrid, }: BarChartProps): import("react").JSX.Element;

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

@@ -12,13 +12,17 @@ import ChartSection, { ChartTotal, ChartLegend } from './ChartSection';
 import { firstMondayOfMonth, KO_ORD } from './barChartData';
 import { useBarChartControl } from './useBarChartControl';
 // ─── 막대 렌더링 원시 컴포넌트 ───────────────────────────────────
+/** 막대 값 — 수가 아니면(undefined·NaN·Infinity) 0 */
+const 수 = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : 0);
 function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, height = 140, maxOverride, tightMax, seriesColors, seriesLabels, rateLabels }) {
     // colorB 미지정 시 단일 계열(A) 모드
     const single = !colorB;
     const stacked = !!(seriesColors && seriesColors.length > 0);
+    /* 값이 비었거나(undefined) 수가 아니면 0 으로 친다. 두 계열인데 한 항목의 `b` 가 비면 Math.max 가 NaN 이 되고
+       `NaN || 10` 으로 y축이 데이터와 상관없이 10 에 박혀 막대가 판 위로 넘쳤다(ihab-core-96 이 짚음). */
     const maxVal = useMemo(() => stacked
-        ? Math.max(0, ...data.filter(d => d.a !== -1).map(d => (d.parts ?? []).reduce((s, v) => s + Math.max(0, v), 0)))
-        : Math.max(0, ...data.filter(d => d.a !== -1).flatMap(d => single ? [d.a] : [d.a, d.b])), [data, single, stacked]);
+        ? Math.max(0, ...data.filter(d => d.a !== -1).map(d => (d.parts ?? []).reduce((s, v) => s + Math.max(0, 수(v)), 0)))
+        : Math.max(0, ...data.filter(d => d.a !== -1).flatMap(d => single ? [수(d.a)] : [수(d.a), 수(d.b)])), [data, single, stacked]);
     const padded = useMemo(() => maxOverride ?? (tightMax ? (maxVal > 0 ? maxVal : 10) : (Math.ceil(maxVal / 10) * 10 || 10)), [maxVal, maxOverride, tightMax]);
     const h = height;
     // 막대 너비 — 여백과 무관하게 막대 '개수'(컬럼 × 계열)가 늘수록 점진 축소(최대 barWidth)
@@ -38,9 +42,11 @@ function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, h
     const handleBarLeave = useCallback(() => setTooltip(null), []);
     return (_jsxs("div", { className: "manager-bar-chart-wrap", children: [_jsx("div", { className: "manager-bar-chart-inner", children: _jsx("div", { className: "manager-bar-chart-scroll", children: _jsxs("div", { className: "manager-bar-chart-area", children: [_jsxs("div", { className: "manager-bar-chart-plot", style: { height: h }, children: [ticks.slice(0, -1).map((t, i) => (_jsx("div", { className: "manager-bar-chart-gridline", style: { top: i * (h / (ticks.length - 1)) }, children: _jsx("span", { className: "manager-bar-chart-gridline__label caption-1", children: t }) }, i))), data.map((d, i) => {
                                         const isFuture = d.a === -1;
-                                        const ha = isFuture ? 0 : (d.a / padded) * h;
-                                        const hb = isFuture ? 0 : (d.b / padded) * h;
-                                        const parts = d.parts ?? [];
+                                        /* 판 높이를 넘지 않는다 — maxOverride(진행률 100)보다 큰 값이 와도 막대가 눈금 위로 삐져나가지 않게 */
+                                        const 높이 = (v) => Math.min(h, Math.max(0, (수(v) / padded) * h));
+                                        const ha = isFuture ? 0 : 높이(d.a);
+                                        const hb = isFuture ? 0 : 높이(d.b);
+                                        const parts = (d.parts ?? []).map(수);
                                         return (_jsx("div", { className: "manager-bar-chart-col", style: { cursor: isFuture ? 'default' : 'pointer' }, onMouseEnter: isFuture ? undefined : (e) => {
                                                 const r = e.currentTarget.getBoundingClientRect();
                                                 /* 한 줄에 `A: 3 / B: 5 / …` 로 늘어놓던 것을 줄마다 하나로 — 유형이 넷·다섯이면
@@ -53,25 +59,30 @@ function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, h
                                                     items = 있는.length ? 있는 : 전부;
                                                 }
                                                 else if (rateLabels && !single) {
-                                                    items = [{ text: `${labelA} ${d.a}%`, color: colorA }, { text: `${labelB} ${d.b}%`, color: colorB }];
+                                                    items = [{ text: `${labelA} ${수(d.a)}%`, color: colorA }, { text: `${labelB} ${수(d.b)}%`, color: colorB }];
                                                 }
                                                 else if (rateLabels && d.rawB !== undefined) {
                                                     items = [{ text: `${rateLabels.total} ${d.rawB}` }, { text: `${rateLabels.done} ${d.rawA ?? 0}`, color: colorA }];
                                                 }
                                                 else if (single) {
-                                                    items = [{ text: `${labelA}: ${d.a}`, color: colorA }];
+                                                    items = [{ text: `${labelA}: ${수(d.a)}`, color: colorA }];
                                                 }
                                                 else {
-                                                    items = [{ text: `${labelA}: ${d.a}`, color: colorA }, { text: `${labelB}: ${d.b}`, color: colorB }];
+                                                    items = [{ text: `${labelA}: ${수(d.a)}`, color: colorA }, { text: `${labelB}: ${수(d.b)}`, color: colorB }];
                                                 }
                                                 setTooltip({ rect: { left: r.left, top: r.top, right: r.right, bottom: r.bottom, width: r.width, height: r.height }, title, items });
                                             }, onMouseLeave: handleBarLeave, children: !isFuture && (stacked ? (
                                             // 계열별 stacked — 아래부터 위로 쌓고, 맨 위 segment만 상단 라운드
                                             _jsx("div", { className: "manager-bar-chart-stack", style: 막대굵기, children: (() => {
                                                     const topK = parts.reduce((acc, v, k) => (v > 0 ? k : acc), -1); // 맨 위(최상단) 세그먼트
-                                                    return parts.map((v, k) => (v > 0
-                                                        ? _jsx("div", { className: "manager-bar-chart-stack-segment", style: { height: (v / padded) * h, background: (seriesColors ?? [])[k], borderRadius: k === topK ? '6px 6px 0 0' : undefined } }, k)
-                                                        : null));
+                                                    let 남은 = h; // 쌓은 합도 판 높이를 넘지 않게 위 조각부터 깎는다
+                                                    return parts.map((v, k) => {
+                                                        if (v <= 0)
+                                                            return null;
+                                                        const 조각 = Math.min(남은, (v / padded) * h);
+                                                        남은 -= 조각;
+                                                        return _jsx("div", { className: "manager-bar-chart-stack-segment", style: { height: 조각, background: (seriesColors ?? [])[k], borderRadius: k === topK ? '6px 6px 0 0' : undefined } }, k);
+                                                    });
                                                 })() })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "manager-bar-chart-bar", style: { ...막대굵기, height: ha, background: colorA } }), !single && _jsx("div", { className: "manager-bar-chart-bar", style: { ...막대굵기, height: hb, background: colorB } })] }))) }, i));
                                     })] }), _jsx("div", { className: "manager-bar-chart-x-axis", children: data.map((d, i) => {
                                     const isFuture = d.a === -1; // 아직 도래하지 않은 날 — 글씨 흐리게
@@ -167,7 +178,7 @@ const BAR_SIZE_PRESET = {
  *  - 주(week):  'YYYY년 M월 N째주' 드롭다운 + 그 주의 요일(일~토) 막대
  * 원시 렌더링은 내부 BarChartCanvas가 담당한다.
  */
-export default function BarChart({ size = 'medium', barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal = false, totalUnitKey, totalLabelKey, control: controlProp, hideControls = false, rate = false, tightMax = false, avgMode = false, totalFormat, series, loading = false, onDetail, }) {
+export default function BarChart({ size = 'medium', barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal = false, totalUnitKey, totalLabelKey, control: controlProp, hideControls = false, rate = false, tightMax = false, avgMode = false, totalFormat, series, loading = false, onDetail, inGrid = false, }) {
     const { t, i18n } = useTranslation();
     const sizePreset = BAR_SIZE_PRESET[size];
     // 외부 control 미지정 시 내부 컨트롤 사용 (단독 차트 하위 호환)
@@ -228,7 +239,7 @@ export default function BarChart({ size = 'medium', barWidth, titleKey, data, co
     // size='large' — 카드가 가로 폭을 거의 100% 차지(1열)
     const isLarge = size === 'large';
     const sectionClassName = isSmall ? 'manager-section--compact' : isLarge ? 'manager-section--full' : undefined;
-    return (_jsx(ChartSection, { className: sectionClassName, title: t(titleKey), titleClassName: isSmall ? 'h5 chart-section-title--small' : undefined, headRight: isSmall ? undefined : _jsxs(_Fragment, { children: [!hideControls && _jsx(BarChartControls, { control: control }), onDetail && (_jsx("span", { className: "manager-bar-chart-detail-btn", children: _jsx(Button, { size: 32, type: "dot", icon: "list", ariaLabel: t('trainingStatus.detail', '상세보기'), onClick: onDetail }) }))] }), subRow: _jsxs(_Fragment, { children: [showTotal ? ((rate || avgMode || (!!totalLabelKey && !!totalFormat)) ? (
+    return (_jsx(ChartSection, { className: sectionClassName, inGrid: inGrid, title: t(titleKey), titleClassName: isSmall ? 'h5 chart-section-title--small' : undefined, headRight: isSmall ? undefined : _jsxs(_Fragment, { children: [!hideControls && _jsx(BarChartControls, { control: control }), onDetail && (_jsx("span", { className: "manager-bar-chart-detail-btn", children: _jsx(Button, { size: 32, type: "dot", icon: "list", ariaLabel: t('trainingStatus.detail', '상세보기'), onClick: onDetail }) }))] }), subRow: _jsxs(_Fragment, { children: [showTotal ? ((rate || avgMode || (!!totalLabelKey && !!totalFormat)) ? (
                 // 진행률/평균 모드 또는 totalLabelKey+totalFormat 조합: 라벨(윗줄) + 값(아랫줄). size='small'은 라벨 생략
                 _jsx(ChartTotal, { label: isSmall ? undefined : `${t(control.period === 'week' ? 'manager.chart.weeklyPrefix' : 'manager.chart.monthlyPrefix')} ${t(totalLabelKey ?? labelAKey)}`, children: totalFormat ? (
                     // 숫자는 h0, 단위(시간/분/초 등)는 h5로 분리

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

@@ -62,6 +62,10 @@ export default function Calendar({ visits = [], onVisitClick, onVisitMove, onDay
                         return (_jsxs("div", { className: `calendar-cell${isToday(day) ? ' today' : ''}${isDragOver ? ' drag-over' : ''}${onDayClick ? ' calendar-cell--clickable' : ''}`, role: onDayClick ? 'button' : undefined, tabIndex: onDayClick ? 0 : undefined, "aria-label": onDayClick ? t('calendar.addOnDate', { date: dateKey }) : undefined, onClick: onDayClick ? () => onDayClick(dateKey) : undefined, 
                             /* `<div role="button">` 은 브라우저가 Enter·Space 를 눌림으로 바꿔 주지 않는다 */
                             onKeyDown: onDayClick ? (e) => {
+                                /* 칸 안의 방문 표시에서 누른 Enter 가 올라온 것이면 넘긴다 — 마우스 click 은 표시가
+                                   stopPropagation 하지만 keydown 은 막지 않아, 방문 상세와 '그날 새 방문' 이 함께 열렸다. */
+                                if (e.target !== e.currentTarget)
+                                    return;
                                 if (e.key !== 'Enter' && e.key !== ' ')
                                     return;
                                 e.preventDefault();

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

@@ -189,3 +189,19 @@
     min-width: 0;
   }
 }
+
+/* inGrid — CSS 격자 칸 안의 카드. 격자가 간격(gap)과 폭을 정하므로 아래 여백·최소 폭을 푼다.
+   compact 의 min-width(160px)보다 뒤에 둬야 같은 특이도로 이긴다 — **파일 끝**에 둔다.
+   세로 flex 라서, 같은 줄 카드끼리 늘어난 높이를 차트 몸통 위에 몰아 막대·링이 바닥에 선다
+   (말귀 훈련 현황의 네 칸이 범례 줄 수가 달라 막대 바닥이 들쭉날쭉했다). */
+.manager-section--grid {
+  margin-bottom: 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.manager-section--grid > .manager-bar-chart-wrap,
+.manager-section--grid > .manager-bar-chart-loading,
+.manager-section--grid > .ring-chart-section-body {
+  margin-top: auto;
+}

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

@@ -31,6 +31,13 @@ export interface ChartSectionProps {
     subRow?: ReactNode;
     /** 섹션 루트에 추가할 클래스 */
     className?: string;
+    /**
+     * CSS 격자(한 줄에 여러 칸) 안에 세울 때 켠다 — `manager-section--grid`.
+     * 아래 여백(14px)·최소 폭(320px)을 풀고 카드를 세로 flex 로 만들어, 같은 줄 카드끼리 높이가 늘어나면
+     * 차트 몸통(막대·링·로딩)을 **카드 바닥**에 맞춘다(범례 줄 수가 달라도 막대 바닥이 한 선).
+     * 차트가 아닌 카드에 같은 꼴이 필요하면 `manager-section manager-section--grid` 클래스를 그대로 쓴다.
+     */
+    inGrid?: boolean;
     children?: ReactNode;
 }
 /**
@@ -39,4 +46,4 @@ export interface ChartSectionProps {
  * 공유하도록 두 컴포넌트가 내부적으로 사용한다.
  * @public
  */
-export default function ChartSection({ title, titleClassName, headRight, subRow, className, children }: ChartSectionProps): import("react").JSX.Element;
+export default function ChartSection({ title, titleClassName, headRight, subRow, className, inGrid, children }: ChartSectionProps): import("react").JSX.Element;

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

@@ -17,6 +17,6 @@ export function ChartTotal({ label, children }) {
  * 공유하도록 두 컴포넌트가 내부적으로 사용한다.
  * @public
  */
-export default function ChartSection({ title, titleClassName = 'h3', headRight, subRow, className, children }) {
-    return (_jsxs("section", { className: className ? `manager-section ${className}` : 'manager-section', children: [_jsxs("div", { className: "manager-section__head", children: [_jsx("div", { className: titleClassName, children: title }), headRight] }), subRow && _jsx("div", { className: "barchart-sub-row", children: subRow }), children] }));
+export default function ChartSection({ title, titleClassName = 'h3', headRight, subRow, className, inGrid = false, children }) {
+    return (_jsxs("section", { className: ['manager-section', inGrid && 'manager-section--grid', className].filter(Boolean).join(' '), children: [_jsxs("div", { className: "manager-section__head", children: [_jsx("div", { className: titleClassName, children: title }), headRight] }), subRow && _jsx("div", { className: "barchart-sub-row", children: subRow }), children] }));
 }

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

@@ -32,3 +32,9 @@
    음수 여백으로 왼쪽을 당겨, 아이콘 단추의 제 여백 때문에 제목이 페이지의 다른
    제목들보다 오른쪽으로 밀려 보이는 것을 막는다(글자 시작선을 맞춘다). */
 .page-title__back { margin-left: -8px; margin-right: -4px; flex-shrink: 0; }
+
+/* wrap — 오른쪽이 넓으면 줄을 접는다. 제목 칸의 바닥을 320px 로 두되 **제 그릇보다 크지 않게**(min) —
+   그냥 320px 이면 좁은 화면(세로 배치, 그릇 280px)에서 제목이 그릇을 넘쳐 오른쪽이 잘린다
+   (ChartSection 의 min-width 320px 가 똑같이 그랬다). */
+.page-title--wrap { flex-wrap: wrap; }
+.page-title--wrap .page-title__main { min-width: min(320px, 100%); }

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

@@ -29,7 +29,15 @@ type PageTitleProps = {
      * title 이 문자열이면 이 값은 필요 없다.
      */
     documentTitle?: string;
+    /**
+     * 오른쪽(`rightAction`)이 넓어 제목 칸을 짓누를 때 **줄을 접어** 오른쪽을 아래로 내린다. 기본 false(한 줄 유지).
+     *
+     * 한 줄로 두면 제목 칸이 `min-width: 0` 까지 줄어, 탭 일곱 같은 넓은 오른쪽이 제목을 한 글자씩 세로로
+     * 밀어낸다(말귀 고객 상세 1135px 실측). 켜면 제목 칸에 320px(좁으면 제 폭) 바닥을 주고, 그 바닥이
+     * 안 들어가면 오른쪽이 다음 줄로 간다.
+     */
+    wrap?: boolean;
 };
 /** @public */
-export default function PageTitle({ title, sub, rightAction, titleAction, badge, badgeVariant, documentTitle, onBack, backLabel }: PageTitleProps): import("react").JSX.Element;
+export default function PageTitle({ title, sub, rightAction, titleAction, badge, badgeVariant, documentTitle, onBack, backLabel, wrap }: PageTitleProps): import("react").JSX.Element;
 export {};

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

@@ -5,12 +5,12 @@ import Badge from './Badge';
 import Button from './Button';
 import { useDocumentTitle } from '../hooks/useDocumentTitle';
 /** @public */
-export default function PageTitle({ title, sub, rightAction, titleAction, badge, badgeVariant = 'default', documentTitle, onBack, backLabel }) {
+export default function PageTitle({ title, sub, rightAction, titleAction, badge, badgeVariant = 'default', documentTitle, onBack, backLabel, wrap = false }) {
     const { t } = useTranslation();
     // 페이지 제목이 곧 문서 제목이 되도록 맞춘다(WCAG 2.4.2).
     useDocumentTitle(typeof title === 'string' ? title : (documentTitle ?? null));
     const 뒤로이름 = backLabel ?? t('common.back', '뒤로');
-    return (_jsxs("div", { className: "page-title", children: [_jsxs("div", { className: "page-title__main", children: [_jsxs("div", { className: "page-title__title-row", children: [onBack && (
+    return (_jsxs("div", { className: wrap ? 'page-title page-title--wrap' : 'page-title', children: [_jsxs("div", { className: "page-title__main", children: [_jsxs("div", { className: "page-title__title-row", children: [onBack && (
                             /* 글자 없이 화살표만 둔다 — 제목 옆에서 '뒤로' 라고 적으면 제목과 경쟁한다.
                                그만큼 과녁을 크게(48) 잡는다. 이름은 낭독기용으로 따로 준다. */
                             _jsx(Button, { className: "page-title__back", size: 48, type: "dot", icon: "chevron-left", iconSize: "large", useBorder: false, 

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

@@ -73,6 +73,14 @@ export interface PopupProps {
      * 더 넓거나 무제한이 필요하면 className으로 `.popup-panel` max-width를 직접 override.
      */
     size?: 'small' | 'medium' | 'large';
+    /**
+     * 패널 높이를 못 박는다(숫자는 px, 문자열은 CSS 길이 그대로). 미지정 시 내용만큼(기본).
+     *
+     * 탭을 옮길 때마다 내용 높이가 달라 창이 위아래로 뛰는 팝업에 쓴다. **화면보다 크면 화면에
+     * 맞춘다** — 패널의 `max-height`(데스크톱 `100% - 60px`, 좁은 화면은 하단 내비 몫까지 뺀 값)가
+     * 그대로 걸리므로 창이 화면 밖으로 나가지 않는다. 넘치는 내용은 본문이 스스로 굴린다.
+     */
+    height?: number | string;
     /**
      * 이 값이 바뀌면 본문(.popup-content) 스크롤을 맨 위로 되돌린다.
      * 탭/모드 전환처럼 내부 콘텐츠가 통째로 바뀌는 팝업에서, 스크롤을 내린 채

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

@@ -13,7 +13,7 @@ const ANIM_MS = 260;
 /** @public */
 export default function Popup(props) {
     const { t } = useTranslation();
-    const { title, subtitle, headerActions, children, buttons, footer, footerClassName = "", onClose, closeDisabled = false, beforeClose, closeOnBackdrop = true, className = "", ariaLabel, useTitle = true, inline = false, size, resetScrollKey } = props || {};
+    const { title, subtitle, headerActions, children, buttons, footer, footerClassName = "", onClose, closeDisabled = false, beforeClose, closeOnBackdrop = true, className = "", ariaLabel, useTitle = true, inline = false, size, height, resetScrollKey } = props || {};
     const [closing, setClosing] = useState(false);
     // 닫힘 애니메이션 중(260ms)엔 버튼이 시각적으로만 흐려질 뿐 클릭은 계속 가능해,
     // 그 사이 같은 버튼을 연타하면 cb(확인/완료 콜백)가 여러 번 예약되어 중복 실행된다.
@@ -147,7 +147,9 @@ export default function Popup(props) {
         if (pressed && e.target === e.currentTarget)
             closeWithAnimation();
     };
-    const el = (_jsx("div", { className: `popup ${inline ? 'popup--inline' : ''} ${closing ? 'popup--closing' : ''} ${className}`, onPointerDown: backdropEnabled ? onBackdropPointerDown : undefined, onClick: backdropEnabled ? onBackdropClick : undefined, children: _jsxs("div", { ref: panelRef, className: `popup-panel${size ? ` popup-panel--${size}` : ''}`, tabIndex: -1, role: inline ? undefined : 'dialog', "aria-modal": inline ? undefined : true, "aria-labelledby": !inline && title ? titleId : undefined, "aria-label": !inline && !title && ariaLabel ? ariaLabel : undefined, children: [!useTitle && (headerActions || onClose) ? (_jsxs("div", { className: "popup-close-float", children: [headerActions, onClose && _jsx(Button, { size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, onClick: closeWithAnimation, disabled: closeDisabled, ariaLabel: t('common.close', '닫기') })] })) : (title || headerActions || onClose) ? (_jsxs("div", { className: `popup-header${subtitle ? ' popup-header--with-subtitle' : ''}`, children: [_jsxs("div", { className: "popup-header-main", children: [_jsx("span", { id: titleId, className: "popup-title popup-title--left h2", children: title }), subtitle && _jsx("span", { className: "popup-subtitle body-3", children: subtitle })] }), _jsxs("div", { className: "popup-header-actions", children: [headerActions, onClose && (_jsx(Button, { size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, onClick: closeWithAnimation, disabled: closeDisabled, ariaLabel: t('common.close', '닫기') }))] })] })) : null, _jsx("div", { className: "popup-content", ref: contentRef, tabIndex: contentScrollable ? 0 : undefined, children: _jsx("div", { className: "popup-content__inner", children: typeof children === 'function' ? children({ animateThen, closeWithAnimation }) : children }) }), buttons?.length ? (_jsx("div", { className: "popup-footer popup-footer--buttons", children: buttons.map((btn, i) => (_jsx(Button, { size: 48, variant: btn.variant ?? 'default', label: btn.label, disabled: btn.disabled, onClick: () => btn.onClick?.({ animateThen, closeWithAnimation }) }, i))) })) : footer ? (_jsx("div", { className: `popup-footer${footerClassName ? ` ${footerClassName}` : ''}`, children: typeof footer === 'function' ? footer({ animateThen, closeWithAnimation }) : footer })) : null] }) }));
+    const el = (_jsx("div", { className: `popup ${inline ? 'popup--inline' : ''} ${closing ? 'popup--closing' : ''} ${className}`, onPointerDown: backdropEnabled ? onBackdropPointerDown : undefined, onClick: backdropEnabled ? onBackdropClick : undefined, children: _jsxs("div", { ref: panelRef, className: `popup-panel${size ? ` popup-panel--${size}` : ''}`, 
+            /* max-height(CSS)가 height 보다 이기므로 화면보다 크게 줘도 화면에 맞춰진다 */
+            style: height != null ? { height } : undefined, tabIndex: -1, role: inline ? undefined : 'dialog', "aria-modal": inline ? undefined : true, "aria-labelledby": !inline && title ? titleId : undefined, "aria-label": !inline && !title && ariaLabel ? ariaLabel : undefined, children: [!useTitle && (headerActions || onClose) ? (_jsxs("div", { className: "popup-close-float", children: [headerActions, onClose && _jsx(Button, { size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, onClick: closeWithAnimation, disabled: closeDisabled, ariaLabel: t('common.close', '닫기') })] })) : (title || headerActions || onClose) ? (_jsxs("div", { className: `popup-header${subtitle ? ' popup-header--with-subtitle' : ''}`, children: [_jsxs("div", { className: "popup-header-main", children: [_jsx("span", { id: titleId, className: "popup-title popup-title--left h2", children: title }), subtitle && _jsx("span", { className: "popup-subtitle body-3", children: subtitle })] }), _jsxs("div", { className: "popup-header-actions", children: [headerActions, onClose && (_jsx(Button, { size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, onClick: closeWithAnimation, disabled: closeDisabled, ariaLabel: t('common.close', '닫기') }))] })] })) : null, _jsx("div", { className: "popup-content", ref: contentRef, tabIndex: contentScrollable ? 0 : undefined, children: _jsx("div", { className: "popup-content__inner", children: typeof children === 'function' ? children({ animateThen, closeWithAnimation }) : children }) }), buttons?.length ? (_jsx("div", { className: "popup-footer popup-footer--buttons", children: buttons.map((btn, i) => (_jsx(Button, { size: 48, variant: btn.variant ?? 'default', label: btn.label, disabled: btn.disabled, onClick: () => btn.onClick?.({ animateThen, closeWithAnimation }) }, i))) })) : footer ? (_jsx("div", { className: `popup-footer${footerClassName ? ` ${footerClassName}` : ''}`, children: typeof footer === 'function' ? footer({ animateThen, closeWithAnimation }) : footer })) : null] }) }));
     if (inline || typeof document === 'undefined')
         return el;
     return createPortal(el, document.body);

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

@@ -58,6 +58,8 @@ export interface RingChartProps {
     loading?: boolean;
     /** 섹션 루트에 추가할 클래스 (titleKey 지정 시에만 사용) */
     className?: string;
+    /** CSS 격자 칸 안에 세운다 — 아래 여백·최소 폭을 풀고 링을 카드 바닥에 맞춘다. ChartSection `inGrid` 참고(titleKey 지정 시에만 사용) */
+    inGrid?: boolean;
 }
 /**
  * 도넛 링 차트 — 전체 대비 완료 비율을 원형 호로 표현.
@@ -65,4 +67,4 @@ export interface RingChartProps {
  * 미지정 시에는 헤더 없는 순수 링만 렌더된다(크기/색상 데모 등).
  * @public
  */
-export default function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, ...ringProps }: RingChartProps): import("react").JSX.Element;
+export default function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, inGrid, ...ringProps }: RingChartProps): import("react").JSX.Element;

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

@@ -40,7 +40,7 @@ function RingChartCanvas({ done, total, segments, color = 'var(--color-main)', s
  * 미지정 시에는 헤더 없는 순수 링만 렌더된다(크기/색상 데모 등).
  * @public
  */
-export default function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, ...ringProps }) {
+export default function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, inGrid = false, ...ringProps }) {
     const { t } = useTranslation();
     if (!titleKey)
         return _jsx(RingChartCanvas, { ...ringProps });
@@ -53,5 +53,5 @@ export default function RingChart({ titleKey, headRight, icon, showTotal, totalL
         .filter(Boolean).join(' ') || undefined;
     // StatChart(.manager-stat-card__icon)와 동일한 톤 — headRight 자리에 렌더(둘 중 하나만 사용)
     const iconNode = icon && (_jsx("span", { className: "chart-section-icon", children: _jsx(Icon, { icon: icon, className: "chart-section-icon-inner" }) }));
-    return (_jsx(ChartSection, { className: sectionClassName, title: t(titleKey), titleClassName: isSmall ? 'h5 chart-section-title--small' : undefined, headRight: iconNode || (isSmall ? undefined : headRight), subRow: (showTotal || legend) && _jsxs(_Fragment, { children: [showTotal ? (_jsxs(ChartTotal, { label: !isSmall && totalLabelKey ? t(totalLabelKey) : undefined, children: [_jsx("span", { className: "barchart-total__num h0", children: pct }), _jsx("span", { className: "barchart-total__unit h5", children: "%" })] })) : _jsx("span", {}), legend && _jsx(ChartLegend, { items: legend })] }), children: loading ? (_jsx("div", { className: "manager-bar-chart-loading", children: _jsx(Loader, { size: 32 }) })) : (_jsx("div", { className: "ring-chart-section-body ring-chart-section-body--offset", children: _jsx(RingChartCanvas, { ...ringProps, hideCenter: isSmall || ringProps.hideCenter }) })) }));
+    return (_jsx(ChartSection, { className: sectionClassName, inGrid: inGrid, title: t(titleKey), titleClassName: isSmall ? 'h5 chart-section-title--small' : undefined, headRight: iconNode || (isSmall ? undefined : headRight), subRow: (showTotal || legend) && _jsxs(_Fragment, { children: [showTotal ? (_jsxs(ChartTotal, { label: !isSmall && totalLabelKey ? t(totalLabelKey) : undefined, children: [_jsx("span", { className: "barchart-total__num h0", children: pct }), _jsx("span", { className: "barchart-total__unit h5", children: "%" })] })) : _jsx("span", {}), legend && _jsx(ChartLegend, { items: legend })] }), children: loading ? (_jsx("div", { className: "manager-bar-chart-loading", children: _jsx(Loader, { size: 32 }) })) : (_jsx("div", { className: "ring-chart-section-body ring-chart-section-body--offset", children: _jsx(RingChartCanvas, { ...ringProps, hideCenter: isSmall || ringProps.hideCenter }) })) }));
 }

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

@@ -6,6 +6,10 @@ import Button from './Button';
 import Badge from './Badge';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+/** 단추 이름에 개수를 붙인다 — 뱃지는 aria-hidden 이라 개수는 이름으로만 전해진다(BottomNav 와 같은 문구). */
+function nameWithCount(t, label, count) {
+    return count && count > 0 ? t('nav.badgeLabel', { label, count, defaultValue: '{{label}}, {{count}}개' }) : label;
+}
 function SideNavFooter(props) {
     const { t } = useTranslation();
     const { activeKey, unreadCount, onDebug, onNotification, onSetting, onHelp, onAccount } = props || {};
@@ -20,9 +24,10 @@ function SideNavFooter(props) {
     // 하나도 없으면 바닥 자체를 비운다 — 빈 채로 두면 여백(margin-top + padding)만 남는다.
     if (!그릴것)
         return null;
-    return (_jsxs("div", { className: "side-nav__footer", children: [onDebug && (_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "terminal", ariaLabel: t('nav.debug', '디버그'), onClick: onDebug, selected: activeKey === 'debug' })), onNotification && (_jsxs("span", { className: "side-nav__notification-wrap", children: [_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "bell", ariaLabel: t('nav.notifications', '알림'), onClick: onNotification, selected: activeKey === 'notifications' }), !!unreadCount && (_jsx(Badge, { type: "dot", number: Math.min(unreadCount, 99), size: 24 }))] })), onSetting && (_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "settings", ariaLabel: t('nav.settings', '설정'), onClick: onSetting, selected: activeKey === 'settings' })), onHelp && (_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "message-circle-question-mark", ariaLabel: t('nav.help', '도움말'), onClick: onHelp, selected: activeKey === 'help' })), onAccount && (_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "user-round", ariaLabel: t('nav.account', '계정'), onClick: onAccount, selected: activeKey === 'account' }))] }));
+    return (_jsxs("div", { className: "side-nav__footer", children: [onDebug && (_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "terminal", ariaLabel: t('nav.debug', '디버그'), onClick: onDebug, selected: activeKey === 'debug' })), onNotification && (_jsxs("span", { className: "side-nav__notification-wrap", children: [_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "bell", ariaLabel: nameWithCount(t, t('nav.notifications', '알림'), unreadCount), onClick: onNotification, selected: activeKey === 'notifications' }), !!unreadCount && unreadCount > 0 && (_jsx(Badge, { type: "dot", number: Math.min(unreadCount, 99), size: 24, "aria-hidden": true }))] })), onSetting && (_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "settings", ariaLabel: t('nav.settings', '설정'), onClick: onSetting, selected: activeKey === 'settings' })), onHelp && (_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "message-circle-question-mark", ariaLabel: t('nav.help', '도움말'), onClick: onHelp, selected: activeKey === 'help' })), onAccount && (_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "user-round", ariaLabel: t('nav.account', '계정'), onClick: onAccount, selected: activeKey === 'account' }))] }));
 }
 function SideNavButton(props) {
+    const { t } = useTranslation();
     const { item, itemKey, label, icon, active, onClick, style, state, labelStyle } = props || {};
     const key = item?.key ?? itemKey ?? '';
     const text = (item?.label ?? label ?? '');
@@ -34,13 +39,19 @@ function SideNavButton(props) {
     const handleClick = useCallback((e) => {
         if (isDisabled)
             return;
-        try {
-            e.currentTarget.blur();
+        /* 포커스는 **포인터로 눌렀을 때만** 걷는다. 걷는 까닭은 마우스로 누른 뒤 :focus 틴트가 남고 태블릿
+           레일이 :focus-within 으로 펼친 채 남기 때문인데, 키보드로 Enter 를 누른 사람까지 걷으면 포커스가
+           body 로 떨어져 메뉴 처음부터 Tab 을 다시 밟아야 했다. 키보드가 낸 click 은 detail 이 0 이다. */
+        const fromPointer = e.detail > 0;
+        if (fromPointer) {
+            try {
+                e.currentTarget.blur();
+            }
+            catch (err) { }
         }
-        catch (err) { }
-        onClick?.(key, e.currentTarget);
+        onClick?.(key, e.currentTarget, fromPointer);
     }, [isDisabled, key, onClick]);
-    return (_jsxs("button", { className: btnClass, onClick: handleClick, "aria-label": typeof text === 'string' ? text : undefined, style: style, "aria-disabled": isDisabled, children: [iconElement, _jsx("span", { className: `side-nav__label button-1 f`, style: labelStyle, children: text }), badgeCount > 0 && (_jsx(Badge, { type: "dot", position: "inline", number: Math.min(badgeCount, 99), size: 24, "aria-label": `${badgeCount}` })), state === 'loading' && (_jsx("span", { className: "side-nav__spinner", "aria-label": "loading" }))] }));
+    return (_jsxs("button", { type: "button", className: btnClass, onClick: handleClick, "aria-label": typeof text === 'string' ? nameWithCount(t, text, badgeCount) : undefined, style: style, "aria-disabled": isDisabled, children: [iconElement, _jsx("span", { className: `side-nav__label button-1 f`, style: labelStyle, children: text }), badgeCount > 0 && (_jsx(Badge, { type: "dot", position: "inline", number: Math.min(badgeCount, 99), size: 24, "aria-hidden": true })), state === 'loading' && (_jsx("span", { className: "side-nav__spinner", "aria-label": "loading" }))] }));
 }
 /** @public */
 export default function SideNav(props) {
@@ -49,15 +60,17 @@ export default function SideNav(props) {
     const handleModeSwitch = useCallback(() => onAppModeChange?.(appMode === 'malgwi' ? 'manager' : 'malgwi'), [onAppModeChange, appMode]);
     return (_jsxs("nav", { "aria-label": t('nav.mainMenu', '메인 메뉴'), className: "side-nav__menu", children: [_jsxs("div", { className: "side-nav__menu-list", children: [(items || [])
                         .filter((it) => !it.section && (it.key || it.label))
-                        .map((it, idx) => (_jsxs(React.Fragment, { children: [it.divider && _jsx("div", { className: "side-nav__separator" }), _jsx(SideNavButton, { item: it, active: it.key === activeKey, state: it.disabled ? 'disabled' : undefined, onClick: (_key, btnEl) => {
+                        .map((it, idx) => (_jsxs(React.Fragment, { children: [it.divider && _jsx("div", { className: "side-nav__separator" }), _jsx(SideNavButton, { item: it, active: it.key === activeKey, state: it.disabled ? 'disabled' : undefined, onClick: (_key, btnEl, fromPointer) => {
                                     if (it.disabled)
                                         return;
                                     if (it.href) {
                                         window.open(it.href, '_blank', 'noopener,noreferrer');
-                                        try {
-                                            btnEl?.blur();
+                                        if (fromPointer) {
+                                            try {
+                                                btnEl?.blur();
+                                            }
+                                            catch (err) { }
                                         }
-                                        catch (err) { }
                                         return;
                                     }
                                     onChange?.(it.key);
@@ -69,6 +82,10 @@ export default function SideNav(props) {
                                             window.scrollTo({ top: 0 });
                                     }
                                     catch (_) { }
+                                    /* 키보드로 고르면 포커스가 레일 안에 남으므로 태블릿 레일도 펼친 채 둔다(:focus-within) —
+                                       아래 강제 접힘은 마우스가 들어와야 풀리므로 키보드 사용자에게 걸면 레일이 닫힌 채 포커스만 남는다. */
+                                    if (!fromPointer)
+                                        return;
                                     try {
                                         btnEl?.blur();
                                     }