@ihabdevteam/core 0.168.0 → 0.170.0

package/dist/ihabdevteam-core.d.ts

@@ -309,7 +309,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, rateAgg, tightMax, avgMode, totalFormat, series, seriesMode, loading, onDetail, headExtra, headSegment, icon, disc, detailSize, barGap, baseline, className, inGrid, }: BarChartProps): JSX.Element;
+export declare function BarChart({ size, barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal, totalUnitKey, totalLabelKey, control: controlProp, hideControls, rate, rateAgg, tightMax, avgMode, totalFormat, series, seriesMode, loading, onDetail, headExtra, headSegment, icon, disc, onClick, cardAriaLabel, cardTooltip, detailSize, barGap, baseline, className, inGrid, }: BarChartProps): JSX.Element;
 
 /** @public */
 export declare interface BarChartControl {
@@ -413,6 +413,12 @@ export declare interface BarChartProps {
     /** 머리의 보기 고르개 — 넓으면 세그먼트, 카드가 좁으면 '⋯' 한 단추로 접히고 그 메뉴에 칸들과 '상세보기' 가 함께 든다.
      *  `headExtra` 로 고르개를 손수 얹고 좁을 때를 따로 다루던 것을 대신한다(ChartSection 이 카드 제 폭으로 잰다). */
     headSegment?: ChartHeadSegment;
+    /** 카드 자체를 누를 수 있게 — 커서·hover 테두리·키보드까지 ChartSection 이 한 결로 붙인다(머리의 단추·고르개 누름은 카드를 열지 않는다) */
+    onClick?: () => void;
+    /** 누르는 카드의 이름(낭독기) — 안 주면 제목 */
+    cardAriaLabel?: string;
+    /** 카드에 포인터가 닿을 때(키보드는 초점) 뜨는 설명 — StatChart tooltip 과 같은 뜻 */
+    cardTooltip?: string;
     /** 제목 왼쪽 아이콘 — Section·ChartSection 과 같은 자리·같은 색 */
     icon?: string;
     /** 제목 아래 설명 한 줄 */
@@ -1049,7 +1055,7 @@ export declare interface ChartPoint {
  * 공유하도록 두 컴포넌트가 내부적으로 사용한다.
  * @public
  */
-export declare function ChartSection({ title, titleClassName, icon, disc, headRight, headSegment, headMenuItems, collapseBelow, subRow, className, inGrid, children }: ChartSectionProps): JSX.Element;
+export declare function ChartSection({ title, titleClassName, icon, disc, headRight, headSegment, headMenuItems, collapseBelow, onClick, ariaLabel, tooltip, subRow, className, inGrid, children }: ChartSectionProps): JSX.Element;
 
 /** @public */
 export declare interface ChartSectionProps {
@@ -1072,6 +1078,14 @@ export declare interface ChartSectionProps {
     headMenuItems?: TooltipMenuColumnItem[];
     /** 고르개를 '⋯' 로 접는 카드 폭(px, 기본 420) */
     collapseBelow?: number;
+    /** 카드 자체를 누를 수 있게 한다 — 커서·hover 테두리·키보드(Enter·Space)·role·tabIndex 를 한 결로 붙인다.
+     *  `StatChart onClick` 과 같은 모양이다(소비자가 감싸개를 만들어 흉내 내던 것). */
+    onClick?: () => void;
+    /** 누르는 카드의 이름(낭독기) — 안 주면 제목이 글자일 때 그것을 쓴다 */
+    ariaLabel?: string;
+    /** 카드에 포인터가 닿을 때(키보드는 초점이 들어올 때) 뜨는 설명 — `StatChart tooltip` 과 같은 뜻.
+     *  같은 줄에 선 StatChart 카드들만 설명이 뜨고 이 카드만 안 뜨던 것을 메운다. */
+    tooltip?: string;
     /** 총계(ChartTotal) + 범례(ChartLegend)를 담는 서브로우 */
     subRow?: ReactNode;
     /** 섹션 루트에 추가할 클래스 */
@@ -1541,7 +1555,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.168.0";
+export declare const CORE_VERSION = "0.170.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -5332,7 +5346,7 @@ export declare function reviewTableName(original: string | ReviewSource, today:
  * 미지정 시에는 헤더 없는 순수 링만 렌더된다(크기/색상 데모 등).
  * @public
  */
-export declare function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, inGrid, ...ringProps }: RingChartProps): JSX.Element;
+export declare function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, inGrid, onClick, ariaLabel, tooltip, ...ringProps }: RingChartProps): JSX.Element;
 
 /** @public */
 export declare interface RingChartProps {
@@ -5385,6 +5399,12 @@ export declare interface RingChartProps {
     className?: string;
     /** CSS 격자 칸 안에 세운다 — 아래 여백·최소 폭을 풀고 링을 카드 바닥에 맞춘다. ChartSection `inGrid` 참고(titleKey 지정 시에만 사용) */
     inGrid?: boolean;
+    /** 카드 자체를 누를 수 있게 — 커서·hover 테두리·키보드까지 ChartSection 이 한 결로 붙인다(titleKey 지정 시에만) */
+    onClick?: () => void;
+    /** 누르는 카드의 이름(낭독기) — 안 주면 제목 */
+    ariaLabel?: string;
+    /** 카드에 포인터가 닿을 때(키보드는 초점) 뜨는 설명 — StatChart tooltip 과 같은 뜻(titleKey 지정 시에만) */
+    tooltip?: string;
 }
 
 /** @public */
@@ -6200,7 +6220,7 @@ export declare function splitTrainingVariants(value: unknown): string[];
  * (도넛 breakdown은 RingChart segments 모드, 리스트는 페이지에서 직접 구성).
  * @public
  */
-export declare function StatChart({ label, value, change, changeType, icon, tooltip, onClick }: StatChartProps): JSX.Element;
+export declare function StatChart({ label, value, change, changeType, icon, tooltip, onClick, children }: StatChartProps): JSX.Element;
 
 /** @public */
 export declare type StatChartChangeType = 'up' | 'down' | 'neutral';
@@ -6220,6 +6240,9 @@ export declare interface StatChartProps {
     /** 호버 시 표시할 툴팁 텍스트 */
     tooltip?: string;
     onClick?: () => void;
+    /** 값 **아래** 에 붙는 자리 — 목록 몇 줄, "외 n건" 단추처럼 값을 풀어 보이는 것.
+     *  이 자리가 없어 소비자가 카드 마크업(`manager-stat-card__*` 여덟 이름)을 통째로 베끼고 있었다(말귀 매니저 '금일 방문 예정'). */
+    children?: ReactNode;
 }
 
 /**

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, rateAgg, tightMax, avgMode, totalFormat, series, seriesMode, loading, onDetail, headExtra, headSegment, icon, disc, detailSize, barGap, baseline, className, inGrid, }: BarChartProps): import("react").JSX.Element;
+export default function BarChart({ size, barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal, totalUnitKey, totalLabelKey, control: controlProp, hideControls, rate, rateAgg, tightMax, avgMode, totalFormat, series, seriesMode, loading, onDetail, headExtra, headSegment, icon, disc, onClick, cardAriaLabel, cardTooltip, detailSize, barGap, baseline, className, inGrid, }: BarChartProps): import("react").JSX.Element;

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

@@ -261,7 +261,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, rateAgg = 'dayMean', tightMax = false, avgMode = false, totalFormat, series, seriesMode = 'stack', loading = false, onDetail, headExtra, headSegment, icon, disc, detailSize = 32, barGap, baseline, className, inGrid = false, }) {
+export default function BarChart({ size = 'medium', barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal = false, totalUnitKey, totalLabelKey, control: controlProp, hideControls = false, rate = false, rateAgg = 'dayMean', tightMax = false, avgMode = false, totalFormat, series, seriesMode = 'stack', loading = false, onDetail, headExtra, headSegment, icon, disc, onClick, cardAriaLabel, cardTooltip, detailSize = 32, barGap, baseline, className, inGrid = false, }) {
     const { t, i18n } = useTranslation();
     const sizePreset = BAR_SIZE_PRESET[size];
     // 외부 control 미지정 시 내부 컨트롤 사용 (단독 차트 하위 호환)
@@ -397,7 +397,7 @@ export default function BarChart({ size = 'medium', barWidth, titleKey, data, co
     const isLarge = size === 'large';
     const sectionClassName = [isSmall ? 'manager-section--compact' : isLarge ? 'manager-section--full' : undefined, className]
         .filter(Boolean).join(' ') || undefined;
-    return (_jsx(ChartSection, { className: sectionClassName, inGrid: inGrid, icon: icon, disc: disc, headSegment: headSegment, 
+    return (_jsx(ChartSection, { className: sectionClassName, inGrid: inGrid, icon: icon, disc: disc, onClick: onClick, ariaLabel: cardAriaLabel, tooltip: cardTooltip, headSegment: headSegment, 
         /* 좁아 고르개가 '⋯' 로 접히면 상세보기도 그 메뉴로 들어간다 — 머리에 단추 둘이 남지 않게 */
         headMenuItems: onDetail ? [{ label: t('trainingStatus.detail', '상세보기'), icon: 'list', onClick: onDetail, closeOnSelect: true }] : undefined, title: t(titleKey), titleClassName: isSmall ? 'h5 chart-section-title--small' : undefined, headRight: isSmall ? (headExtra ?? undefined) : ({ collapsed }) => _jsxs(_Fragment, { children: [!hideControls && _jsx(BarChartControls, { control: control }), headExtra, onDetail && !collapsed && (_jsx("span", { className: "manager-bar-chart-detail-btn", children: _jsx(Button, { htmlType: "button", size: detailSize, type: "dot", icon: "list", ariaLabel: t('trainingStatus.detail', '상세보기'), showTooltipInfo: t('trainingStatus.detail', '상세보기'), onClick: onDetail }) }))] }), subRow: _jsxs(_Fragment, { children: [showTotal ? ((rate || avgMode || (!!totalLabelKey && !!totalFormat)) ? (
                 // 진행률/평균 모드 또는 totalLabelKey+totalFormat 조합: 라벨(윗줄) + 값(아랫줄). size='small'은 라벨 생략

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

@@ -17,6 +17,16 @@
   /* 차트 카드 — inline 나열 가능하도록 최소 폭만 지정(최대 폭 제한 없음) */
   min-width: 320px;
 }
+/* 누르는 카드 — StatChart 의 누르는 카드와 같은 결(커서·hover 테두리). 소비자가 감싸개로 흉내 내던 것 */
+.manager-section--clickable {
+  cursor: pointer;
+  transition: box-shadow 120ms ease, border-color 120ms ease;
+}
+.manager-section--clickable:hover {
+  border-color: var(--color-main);
+  box-shadow: var(--shadow-dropdown);
+}
+
 .manager-section__head {
   display: flex;
   justify-content: space-between;

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

@@ -56,6 +56,14 @@ export interface ChartSectionProps {
     headMenuItems?: TooltipMenuColumnItem[];
     /** 고르개를 '⋯' 로 접는 카드 폭(px, 기본 420) */
     collapseBelow?: number;
+    /** 카드 자체를 누를 수 있게 한다 — 커서·hover 테두리·키보드(Enter·Space)·role·tabIndex 를 한 결로 붙인다.
+     *  `StatChart onClick` 과 같은 모양이다(소비자가 감싸개를 만들어 흉내 내던 것). */
+    onClick?: () => void;
+    /** 누르는 카드의 이름(낭독기) — 안 주면 제목이 글자일 때 그것을 쓴다 */
+    ariaLabel?: string;
+    /** 카드에 포인터가 닿을 때(키보드는 초점이 들어올 때) 뜨는 설명 — `StatChart tooltip` 과 같은 뜻.
+     *  같은 줄에 선 StatChart 카드들만 설명이 뜨고 이 카드만 안 뜨던 것을 메운다. */
+    tooltip?: string;
     /** 총계(ChartTotal) + 범례(ChartLegend)를 담는 서브로우 */
     subRow?: ReactNode;
     /** 섹션 루트에 추가할 클래스 */
@@ -75,4 +83,4 @@ export interface ChartSectionProps {
  * 공유하도록 두 컴포넌트가 내부적으로 사용한다.
  * @public
  */
-export default function ChartSection({ title, titleClassName, icon, disc, headRight, headSegment, headMenuItems, collapseBelow, subRow, className, inGrid, children }: ChartSectionProps): import("react").JSX.Element;
+export default function ChartSection({ title, titleClassName, icon, disc, headRight, headSegment, headMenuItems, collapseBelow, onClick, ariaLabel, tooltip, subRow, className, inGrid, children }: ChartSectionProps): import("react").JSX.Element;

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

@@ -7,6 +7,8 @@ import Icon from './Icon';
 import Button from './Button';
 import SegmentedControl from './SegmentedControl';
 import Tooltip from './Tooltip/Tooltip';
+import TooltipInfo from './Tooltip/InfoTooltip';
+import { useHoverAnchor } from '../hooks/useHoverAnchor';
 import MenuTooltip from './Tooltip/MenuTooltip';
 /** 차트 범례 — 색상 점 + 라벨 목록. BarChart/RingChart 섹션이 공유. @public */
 export function ChartLegend({ items, className }) {
@@ -25,9 +27,14 @@ export function ChartTotal({ label, children }) {
  * 공유하도록 두 컴포넌트가 내부적으로 사용한다.
  * @public
  */
-export default function ChartSection({ title, titleClassName = 'h3', icon, disc, headRight, headSegment, headMenuItems, collapseBelow = 420, subRow, className, inGrid = false, children }) {
+export default function ChartSection({ title, titleClassName = 'h3', icon, disc, headRight, headSegment, headMenuItems, collapseBelow = 420, onClick, ariaLabel, tooltip, subRow, className, inGrid = false, children }) {
     const { t } = useTranslation();
     const secRef = useRef(null);
+    /* 설명 툴팁 — StatChart 와 같은 결(카드 사각형 기준, 포인터가 나가거나 초점이 빠지면 닫힘).
+       hover 전용이면 키보드로는 볼 수 없어 초점에도 연다. */
+    const { anchorRect: 설명자리, openAt: 설명열기, close: 설명닫기 } = useHoverAnchor();
+    const 설명보이기 = useCallback(() => { if (tooltip && secRef.current)
+        설명열기(secRef.current); }, [tooltip, 설명열기]);
     /* 좁은지는 **카드 제 폭** 으로 잰다 — 부르는 쪽이 격자 칸 폭으로 대신 재면 두 칸을 차지하는 카드에서 틀린다.
        ResizeObserver 가 없는 환경(구형·SSR)에서는 접지 않는다(넓은 쪽이 기본). */
     const [좁음, set좁음] = useState(false);
@@ -66,7 +73,33 @@ export default function ChartSection({ title, titleClassName = 'h3', icon, disc,
             ...(headMenuItems ?? []).map((it, i) => (i === 0 ? { ...it, separatorBefore: true } : it)),
         ]
         : [];
+    /* 누르는 카드 — 머리의 단추·고르개를 눌렀을 때까지 카드가 열리면 안 된다(그 누름은 제 일을 한다) */
+    const 카드누름 = useCallback((e) => {
+        if (!onClick)
+            return;
+        const t = e.target;
+        if (t && typeof t.closest === 'function' && t.closest('button, a, input, select, textarea, [role="radiogroup"]'))
+            return;
+        onClick();
+    }, [onClick]);
+    const 카드키 = useCallback((e) => {
+        if (!onClick)
+            return;
+        if (e.target !== e.currentTarget)
+            return; // 안쪽 단추의 Enter·Space 는 그 단추 것
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClick();
+        }
+    }, [onClick]);
     const 오른쪽 = typeof headRight === 'function' ? headRight({ collapsed: 접힘 }) : headRight;
     const 머리오른쪽 = (오른쪽 || headSegment) ? (_jsxs("div", { className: "manager-section__head-right", children: [오른쪽, headSegment && (접힘 ? (_jsx(Button, { htmlType: "button", size: 32, type: "dot", icon: "ellipsis", ariaLabel: headSegment.ariaLabel ?? t('common.more', '더보기'), showTooltipInfo: headSegment.ariaLabel ?? t('common.more', '더보기'), "aria-haspopup": "menu", "aria-expanded": !!메뉴자리, onClick: 메뉴열기 })) : (_jsx(SegmentedControl, { size: 32, ariaLabel: headSegment.ariaLabel, options: headSegment.options.map(o => ({ key: o.key, label: o.label, disabled: o.disabled })), value: headSegment.value, onChange: headSegment.onChange })))] })) : null;
-    return (_jsxs("section", { ref: secRef, className: ['manager-section', inGrid && 'manager-section--grid', className].filter(Boolean).join(' '), children: [_jsxs("div", { className: "manager-section__head", children: [_jsxs("div", { className: "manager-section__title-row", children: [icon && _jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "manager-section__icon" }), _jsx("div", { className: ['manager-section__title', titleClassName].filter(Boolean).join(' '), children: title })] }), 머리오른쪽, disc && _jsx("div", { className: "manager-section__disc body-3", children: disc })] }), subRow && _jsx("div", { className: "barchart-sub-row", children: subRow }), children, 메뉴자리 && (_jsx(Tooltip, { anchorRect: 메뉴자리, onClose: 메뉴닫기, ariaLabel: headSegment?.ariaLabel ?? t('tooltip.menu', '메뉴'), children: _jsx(MenuTooltip, { columns: [{ items: 메뉴항목 }], onClose: 메뉴닫기, size: "small" }) }))] }));
+    return (_jsxs("section", { ref: secRef, className: ['manager-section', inGrid && 'manager-section--grid', onClick && 'manager-section--clickable', className].filter(Boolean).join(' '), onClick: onClick ? 카드누름 : undefined, onKeyDown: onClick ? 카드키 : undefined, onPointerEnter: tooltip ? 설명보이기 : undefined, onPointerLeave: tooltip ? 설명닫기 : undefined, onFocus: tooltip ? 설명보이기 : undefined, onBlur: tooltip ? 설명닫기 : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? (ariaLabel ?? (typeof title === 'string' ? title : undefined)) : undefined, children: [tooltip && 설명자리 && (_jsx(TooltipInfo, { anchorRect: {
+                    left: 설명자리.left,
+                    top: 설명자리.top + 21,
+                    right: 설명자리.right,
+                    bottom: 설명자리.bottom,
+                    width: 설명자리.width,
+                    height: 설명자리.height,
+                }, text: tooltip })), _jsxs("div", { className: "manager-section__head", children: [_jsxs("div", { className: "manager-section__title-row", children: [icon && _jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "manager-section__icon" }), _jsx("div", { className: ['manager-section__title', titleClassName].filter(Boolean).join(' '), children: title })] }), 머리오른쪽, disc && _jsx("div", { className: "manager-section__disc body-3", children: disc })] }), subRow && _jsx("div", { className: "barchart-sub-row", children: subRow }), children, 메뉴자리 && (_jsx(Tooltip, { anchorRect: 메뉴자리, onClose: 메뉴닫기, ariaLabel: headSegment?.ariaLabel ?? t('tooltip.menu', '메뉴'), children: _jsx(MenuTooltip, { columns: [{ items: 메뉴항목 }], onClose: 메뉴닫기, size: "small" }) }))] }));
 }

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

@@ -60,6 +60,12 @@ export interface RingChartProps {
     className?: string;
     /** CSS 격자 칸 안에 세운다 — 아래 여백·최소 폭을 풀고 링을 카드 바닥에 맞춘다. ChartSection `inGrid` 참고(titleKey 지정 시에만 사용) */
     inGrid?: boolean;
+    /** 카드 자체를 누를 수 있게 — 커서·hover 테두리·키보드까지 ChartSection 이 한 결로 붙인다(titleKey 지정 시에만) */
+    onClick?: () => void;
+    /** 누르는 카드의 이름(낭독기) — 안 주면 제목 */
+    ariaLabel?: string;
+    /** 카드에 포인터가 닿을 때(키보드는 초점) 뜨는 설명 — StatChart tooltip 과 같은 뜻(titleKey 지정 시에만) */
+    tooltip?: string;
 }
 /**
  * 도넛 링 차트 — 전체 대비 완료 비율을 원형 호로 표현.
@@ -67,4 +73,4 @@ export interface RingChartProps {
  * 미지정 시에는 헤더 없는 순수 링만 렌더된다(크기/색상 데모 등).
  * @public
  */
-export default function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, inGrid, ...ringProps }: RingChartProps): import("react").JSX.Element;
+export default function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, inGrid, onClick, ariaLabel, tooltip, ...ringProps }: RingChartProps): import("react").JSX.Element;

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

@@ -51,7 +51,7 @@ function RingChartCanvas({ done, total, segments, color = 'var(--color-main)', s
  * 미지정 시에는 헤더 없는 순수 링만 렌더된다(크기/색상 데모 등).
  * @public
  */
-export default function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, inGrid = false, ...ringProps }) {
+export default function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, inGrid = false, onClick, ariaLabel, tooltip, ...ringProps }) {
     const { t } = useTranslation();
     if (!titleKey)
         return _jsx(RingChartCanvas, { ...ringProps });
@@ -64,5 +64,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, 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: ringProps.hideCenter ?? isSmall }) })) }));
+    return (_jsx(ChartSection, { className: sectionClassName, inGrid: inGrid, onClick: onClick, ariaLabel: ariaLabel, tooltip: tooltip, 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: ringProps.hideCenter ?? isSmall }) })) }));
 }

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

@@ -48,6 +48,16 @@
   flex: 1;
   justify-content: space-between;
 }
+/* 값 아래 자리 — 목록·단추 등 카드가 값을 풀어 보이는 것 */
+.manager-stat-card__body {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 4px;
+  width: 100%;
+  text-align: left;
+}
+
 .manager-stat-card__left {
   display: flex;
   flex-direction: row;

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

@@ -1,4 +1,5 @@
 import './StatChart.css';
+import { type ReactNode } from 'react';
 /** @public */
 export type StatChartChangeType = 'up' | 'down' | 'neutral';
 /** @public */
@@ -16,6 +17,9 @@ export interface StatChartProps {
     /** 호버 시 표시할 툴팁 텍스트 */
     tooltip?: string;
     onClick?: () => void;
+    /** 값 **아래** 에 붙는 자리 — 목록 몇 줄, "외 n건" 단추처럼 값을 풀어 보이는 것.
+     *  이 자리가 없어 소비자가 카드 마크업(`manager-stat-card__*` 여덟 이름)을 통째로 베끼고 있었다(말귀 매니저 '금일 방문 예정'). */
+    children?: ReactNode;
 }
 /**
  * 순수 카운트 스탯 카드 — 제목+아이콘, 큰 숫자, 증감(선택) 만 보여준다.
@@ -23,4 +27,4 @@ export interface StatChartProps {
  * (도넛 breakdown은 RingChart segments 모드, 리스트는 페이지에서 직접 구성).
  * @public
  */
-export default function StatChart({ label, value, change, changeType, icon, tooltip, onClick }: StatChartProps): import("react").JSX.Element;
+export default function StatChart({ label, value, change, changeType, icon, tooltip, onClick, children }: StatChartProps): import("react").JSX.Element;

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

@@ -11,7 +11,7 @@ import TooltipInfo from './Tooltip/InfoTooltip';
  * (도넛 breakdown은 RingChart segments 모드, 리스트는 페이지에서 직접 구성).
  * @public
  */
-export default function StatChart({ label, value, change, changeType, icon, tooltip, onClick }) {
+export default function StatChart({ label, value, change, changeType, icon, tooltip, onClick, children }) {
     const cardRef = useRef(null);
     /* 앵커 상태는 공용 훅이 갖는다 — ManagerPage 의 VisitListCard 가 같은 것을 손으로
        한 벌 더 적고 있었다. 여는 조건(tooltip 이 있을 때만)만 여기 남긴다. */
@@ -37,5 +37,5 @@ export default function StatChart({ label, value, change, changeType, icon, tool
                     bottom: anchorRect.bottom,
                     width: anchorRect.width,
                     height: anchorRect.height,
-                }, text: tooltip })), _jsxs("div", { className: "manager-stat-card__label-row", children: [_jsx("span", { className: "manager-stat-card__label h5", children: label }), icon && (_jsx("span", { className: "manager-stat-card__icon", children: _jsx(Icon, { icon: icon, className: "manager-stat-card__icon-inner" }) }))] }), _jsx("div", { className: "manager-stat-card__content", children: _jsxs("div", { className: "manager-stat-card__left", children: [_jsx("div", { className: "manager-stat-card__value h2", children: value }), changeText && (_jsx("div", { className: `manager-stat-card__change manager-stat-card__change--${resolvedChangeType ?? 'neutral'} caption-1`, children: changeText }))] }) })] }));
+                }, text: tooltip })), _jsxs("div", { className: "manager-stat-card__label-row", children: [_jsx("span", { className: "manager-stat-card__label h5", children: label }), icon && (_jsx("span", { className: "manager-stat-card__icon", children: _jsx(Icon, { icon: icon, className: "manager-stat-card__icon-inner" }) }))] }), _jsxs("div", { className: "manager-stat-card__content", children: [_jsxs("div", { className: "manager-stat-card__left", children: [_jsx("div", { className: "manager-stat-card__value h2", children: value }), changeText && (_jsx("div", { className: `manager-stat-card__change manager-stat-card__change--${resolvedChangeType ?? 'neutral'} caption-1`, children: changeText }))] }), children && _jsx("div", { className: "manager-stat-card__body", children: children })] })] }));
 }

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

@@ -99,6 +99,12 @@ export interface BarChartProps {
     /** 머리의 보기 고르개 — 넓으면 세그먼트, 카드가 좁으면 '⋯' 한 단추로 접히고 그 메뉴에 칸들과 '상세보기' 가 함께 든다.
      *  `headExtra` 로 고르개를 손수 얹고 좁을 때를 따로 다루던 것을 대신한다(ChartSection 이 카드 제 폭으로 잰다). */
     headSegment?: ChartHeadSegment;
+    /** 카드 자체를 누를 수 있게 — 커서·hover 테두리·키보드까지 ChartSection 이 한 결로 붙인다(머리의 단추·고르개 누름은 카드를 열지 않는다) */
+    onClick?: () => void;
+    /** 누르는 카드의 이름(낭독기) — 안 주면 제목 */
+    cardAriaLabel?: string;
+    /** 카드에 포인터가 닿을 때(키보드는 초점) 뜨는 설명 — StatChart tooltip 과 같은 뜻 */
+    cardTooltip?: string;
     /** 제목 왼쪽 아이콘 — Section·ChartSection 과 같은 자리·같은 색 */
     icon?: string;
     /** 제목 아래 설명 한 줄 */

package/dist/packages/core/src/version.d.ts

@@ -46,4 +46,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.168.0";
+export declare const CORE_VERSION = "0.170.0";

package/dist/packages/core/src/version.js

@@ -46,4 +46,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export const CORE_VERSION = '0.168.0';
+export const CORE_VERSION = '0.170.0';