@ihabdevteam/core 0.163.0 → 0.165.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, 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, detailSize, barGap, baseline, className, inGrid, }: BarChartProps): JSX.Element;
 
 /** @public */
 export declare interface BarChartControl {
@@ -410,6 +410,13 @@ export declare interface BarChartProps {
      * 막대 수가 늘면 굵기는 `barWidth` 를 위 한계로 두고 줄어든다(계열 수만큼 센다).
      */
     seriesMode?: 'stack' | 'group';
+    /** 머리의 보기 고르개 — 넓으면 세그먼트, 카드가 좁으면 '⋯' 한 단추로 접히고 그 메뉴에 칸들과 '상세보기' 가 함께 든다.
+     *  `headExtra` 로 고르개를 손수 얹고 좁을 때를 따로 다루던 것을 대신한다(ChartSection 이 카드 제 폭으로 잰다). */
+    headSegment?: ChartHeadSegment;
+    /** 제목 왼쪽 아이콘 — Section·ChartSection 과 같은 자리·같은 색 */
+    icon?: string;
+    /** 제목 아래 설명 한 줄 */
+    disc?: ReactNode;
     /** 0 선을 캔버스 가운데 두고 **음수는 아래로** 그린다(예: 변동률 %p). 주면 축은 위아래 대칭(±max|값|)이 되고,
      *  눈금·격자선·이름표가 음수 구간까지 따라가며, 툴팁은 양수에 `+` 를 붙여 방향을 드러낸다.
      *  `series` + `seriesMode='group'` 과 함께 쓰면 갈래마다 0 선 위·아래로 자란다. 지금은 `0` 만 쓴다. */
@@ -458,6 +465,9 @@ export declare interface BarData {
     isToday?: boolean;
     parts?: number[];
     partsB?: number[];
+    /** 아직 오지 않은 칸 — 막대를 그리지 않고 글씨를 흐리게, 평균·합계에서 뺀다.
+     *  `a === -1` 이 같은 뜻의 옛 표시인데, **음수가 값인 차트**(baseline)에서는 −1 이 진짜 값일 수 있어 이 칸을 쓴다. */
+    future?: boolean;
 }
 
 /**
@@ -989,6 +999,22 @@ export declare interface ChangeResult {
     __ts: number;
 }
 
+/** @public 카드 머리의 보기 고르개 — 넓으면 세그먼트, 좁으면 '⋯' 메뉴로 접힌다 */
+declare interface ChartHeadSegment {
+    /** 지금 고른 칸의 열쇠 */
+    value: string;
+    onChange: (key: string) => void;
+    /** 칸들. `icon` 은 접힌 메뉴에서만 쓰인다(고르개는 글자만). */
+    options: {
+        key: string;
+        label: string;
+        icon?: string;
+        disabled?: boolean;
+    }[];
+    /** 고르개·메뉴의 이름(낭독기) */
+    ariaLabel?: string;
+}
+
 /** 차트 범례 — 색상 점 + 라벨 목록. BarChart/RingChart 섹션이 공유. @public */
 export declare function ChartLegend({ items, className }: {
     items: ChartLegendItem[];
@@ -1013,6 +1039,8 @@ export declare interface ChartPoint {
     b: number;
     parts?: number[];
     partsB?: number[];
+    /** 아직 오지 않은 날 — `a === -1` 과 같은 뜻이고, 음수를 값으로 쓰는 차트(baseline)에서는 이쪽을 쓴다. */
+    future?: boolean;
 }
 
 /**
@@ -1021,16 +1049,29 @@ export declare interface ChartPoint {
  * 공유하도록 두 컴포넌트가 내부적으로 사용한다.
  * @public
  */
-export declare function ChartSection({ title, titleClassName, headRight, subRow, className, inGrid, children }: ChartSectionProps): JSX.Element;
+export declare function ChartSection({ title, titleClassName, icon, disc, headRight, headSegment, headMenuItems, collapseBelow, subRow, className, inGrid, children }: ChartSectionProps): JSX.Element;
 
 /** @public */
 export declare interface ChartSectionProps {
     /** 섹션 제목 */
     title: ReactNode;
+    /** 제목 왼쪽 아이콘 — `Section` 의 것과 같은 자리·같은 색 */
+    icon?: string;
+    /** 제목 아래 설명 한 줄 — `Section` 의 `disc` 와 같은 결 */
+    disc?: ReactNode;
     /** 제목 타이포그래피 클래스 (기본: 'h3') — 작은 카드(size='small')는 'h5' 등으로 축소 */
     titleClassName?: string;
-    /** 헤더 우측 영역 — 기간 네비게이션, 상세보기 버튼 등 */
-    headRight?: ReactNode;
+    /** 헤더 우측 영역 — 기간 네비게이션, 상세보기 버튼 등.
+     *  함수로 주면 `collapsed`(머리가 좁아 고르개가 '⋯' 로 접혔는가)를 받는다 — 접혔을 때 단추를 메뉴로 옮기는 쪽이 쓴다. */
+    headRight?: ReactNode | ((state: {
+        collapsed: boolean;
+    }) => ReactNode);
+    /** 머리의 보기 고르개. 카드가 좁으면 '⋯' 한 단추로 접히고, 그 메뉴에 칸들이 들어간다. */
+    headSegment?: ChartHeadSegment;
+    /** 접힌 '⋯' 메뉴에서 칸들 **뒤** 에 구분선과 함께 붙는 항목(상세보기 등) */
+    headMenuItems?: TooltipMenuColumnItem[];
+    /** 고르개를 '⋯' 로 접는 카드 폭(px, 기본 420) */
+    collapseBelow?: number;
     /** 총계(ChartTotal) + 범례(ChartLegend)를 담는 서브로우 */
     subRow?: ReactNode;
     /** 섹션 루트에 추가할 클래스 */
@@ -1500,7 +1541,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.163.0";
+export declare const CORE_VERSION = "0.165.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;

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, 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, detailSize, barGap, baseline, className, inGrid, }: BarChartProps): import("react").JSX.Element;

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

@@ -16,24 +16,31 @@ import { useBarChartControl } from './useBarChartControl';
 // ─── 막대 렌더링 원시 컴포넌트 ───────────────────────────────────
 /** 막대 값 — 수가 아니면(undefined·NaN·Infinity) 0 */
 const 수 = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : 0);
+/** 아직 오지 않은 칸인가 — 옛 표시(a === -1)와 새 표시(future)를 함께 본다.
+ *  음수가 값인 차트(baseline)에서는 −1 이 진짜 값일 수 있어 `future` 를 쓴다. */
+function 미래칸(d, 옛표시 = true) {
+    /* `baseline` 을 쓰는 차트는 −1 이 진짜 값이라 옛 표시를 보지 않는다 — 부르는 쪽이 옛표시=false 로 끈다 */
+    return d.future === true || (옛표시 && d.a === -1);
+}
 function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, barGap = 1, height = 140, maxOverride, tightMax, seriesColors, seriesLabels, rateLabels, grouped = false, baseline }) {
     // colorB 미지정 시 단일 계열(A) 모드
     const single = !colorB;
     const stacked = !!(seriesColors && seriesColors.length > 0);
     /* 값이 비었거나(undefined) 수가 아니면 0 으로 친다. 두 계열인데 한 항목의 `b` 가 비면 Math.max 가 NaN 이 되고
        `NaN || 10` 으로 y축이 데이터와 상관없이 10 에 박혀 막대가 판 위로 넘쳤다(ihab-core-96 이 짚음). */
+    /* 기준선 모드에서는 옛 미래 표시(a === -1)를 보지 않는다 — −1 이 진짜 값이다 */
+    const 기준 = baseline;
     const maxVal = useMemo(() => stacked
-        ? Math.max(0, ...data.filter(d => d.a !== -1).map(d => grouped
+        ? Math.max(0, ...data.filter(d => !미래칸(d, 기준 == null)).map(d => grouped
             /* 나란히 서면 가장 높은 **낱 막대**가 위를 정한다 — 합으로 잡으면 막대가 판의 몇 분의 일로 눌린다 */
             ? Math.max(0, ...(d.parts ?? []).map(수))
             : (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, grouped]);
+        : Math.max(0, ...data.filter(d => !미래칸(d, 기준 == null)).flatMap(d => single ? [수(d.a)] : [수(d.a), 수(d.b)])), [data, single, stacked, grouped]);
     /* 기준선 모드: 0 선에서 얼마나 떨어졌는지(|값 − 기준|)가 축을 정한다 — 위아래가 대칭이라야 같은 크기의 오름·내림이 같은 길이로 읽힌다 */
-    const 기준 = baseline;
     const 대칭최대 = useMemo(() => {
         if (기준 == null)
             return 0;
-        const 값들 = data.filter(d => d.a !== -1).flatMap(d => stacked ? (d.parts ?? []).map(수) : (single ? [수(d.a)] : [수(d.a), 수(d.b)]));
+        const 값들 = data.filter(d => !미래칸(d, 기준 == null)).flatMap(d => stacked ? (d.parts ?? []).map(수) : (single ? [수(d.a)] : [수(d.a), 수(d.b)]));
         return Math.max(0, ...값들.map(v => Math.abs(v - 기준)));
     }, [data, 기준, stacked, single]);
     const padded = useMemo(() => {
@@ -91,7 +98,7 @@ function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, b
     return (_jsxs("div", { className: "manager-bar-chart-wrap", style: 묶음간격, 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) => (
                                     /* 눈금선은 **적힌 값의 높이**에 둔다 — 가운데 값을 반올림(최대 3 → '2')하면서 자리는 절반(1.5)에 두어 선과 숫자가 어긋났다 */
                                     _jsx("div", { className: `manager-bar-chart-gridline${기준 != null && t === 기준 ? ' manager-bar-chart-gridline--baseline' : ''}`, style: { top: 눈금자리(t) * h }, children: _jsx("span", { className: "manager-bar-chart-gridline__label caption-1", children: t }) }, i))), data.map((d, i) => {
-                                        const isFuture = d.a === -1;
+                                        const isFuture = 미래칸(d, 기준 == null);
                                         /* 판 높이를 넘지 않는다 — maxOverride(진행률 100)보다 큰 값이 와도 막대가 눈금 위로 삐져나가지 않게 */
                                         /* 기준선 모드는 반쪽(h/2)을 쓴다 — 0 선에서 위나 아래로 자란다 */
                                         const 반 = h / 2;
@@ -159,7 +166,7 @@ function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, b
                                                     });
                                                 })() })) : (기준 != null ? (_jsx(_Fragment, { children: [{ v: 수(d.a), c: colorA }, ...(single ? [] : [{ v: 수(d.b), c: colorB }])].map(({ v, c }, k) => (_jsxs("div", { className: "manager-bar-chart-slot", style: 막대굵기, children: [_jsx("div", { className: "manager-bar-chart-slot__half manager-bar-chart-slot__half--up", children: v >= 기준 && _jsx("div", { className: "manager-bar-chart-bar manager-bar-chart-bar--full", style: { height: 높이(v), background: c } }) }), _jsx("div", { className: "manager-bar-chart-slot__half manager-bar-chart-slot__half--down", children: v < 기준 && _jsx("div", { className: "manager-bar-chart-bar manager-bar-chart-bar--full manager-bar-chart-bar--down", style: { height: 높이(v), background: c } }) })] }, 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; // 아직 도래하지 않은 날 — 글씨 흐리게
+                                    const isFuture = 미래칸(d, 기준 == null); // 아직 도래하지 않은 날 — 글씨 흐리게
                                     return (_jsxs("span", { className: `manager-bar-chart-x-axis__label${isFuture ? ' manager-bar-chart-x-axis__label--future' : ''}`, children: [_jsxs("span", { className: "caption-1 manager-bar-chart-x-axis__main", children: [d.isToday && _jsx("span", { className: "manager-bar-chart-x-axis__today-dot", style: { background: colorA } }), d.label] }), d.sublabel && _jsx("span", { className: "caption-1", children: d.sublabel })] }, i));
                                 }) })] }) }) }), tooltip && (_jsx(DescriptionTooltip, { anchorRect: tooltip.rect, title: tooltip.title, items: tooltip.items, showIndex: false, closeOnOutsideClick: false }))] }));
 }
@@ -180,18 +187,18 @@ export function BarChartControls({ control }) {
  * 주 보기의 막대·합계와 월 보기 완료율 주 막대가 **이 한 벌**을 쓴다 — 같은 주가 두 보기에서
  * 다른 수로 서지 않게(2026-09-12 말귀 검수: 주 보기 25% · 월 보기 38%).
  */
-function 주의날들(data, monday, now) {
+function 주의날들(data, monday, now, 옛표시 = true) {
     const 오늘 = new Date(now.getFullYear(), now.getMonth(), now.getDate());
     return Array.from({ length: 7 }, (_, i) => {
         const dt = new Date(monday);
         dt.setDate(monday.getDate() + i);
         const entry = (data[`${dt.getFullYear()}년 ${dt.getMonth() + 1}월`]?.daily ?? [])[dt.getDate() - 1];
-        const isFuture = entry?.a === -1 || dt > 오늘; // 미래 날 — 평균/막대에서 제외
+        const isFuture = (entry != null && 미래칸(entry, 옛표시)) || dt > 오늘; // 미래 날 — 평균/막대에서 제외
         return { dt, entry, isFuture };
     });
 }
 /** control(기간)에 따라 data를 막대 배열로 변환 */
-function barsFromControl(data, control, t, lang) {
+function barsFromControl(data, control, t, lang, 옛표시 = true) {
     const { period, monthRange, weekRange, weekRanges, DOW } = control;
     const isKo = lang?.startsWith('ko');
     const now = getTodayKstDate(); // 칸은 KST 달력 — 오늘·이번 주 표시도 KST 로
@@ -220,19 +227,20 @@ function barsFromControl(data, control, t, lang) {
                 // 시작일이 오늘 이후(또는 미래 달)면 아직 도래하지 않은 주 → 흐리게/막대 미표시
                 isFutureWeek = year > nowY || (year === nowY && (month > nowM || (month === nowM && startDay > nowD)));
             }
-            return { ...d, label, sublabel: isKo ? `${KO_ORD[n - 1] ?? n}주` : `Week ${n}`, isToday, a: isFutureWeek ? -1 : d.a, b: isFutureWeek ? 0 : d.b };
+            return { ...d, label, sublabel: isKo ? `${KO_ORD[n - 1] ?? n}주` : `Week ${n}`, isToday, future: (d.future === true || isFutureWeek) || undefined, a: isFutureWeek ? -1 : d.a, b: isFutureWeek ? 0 : d.b };
         });
     }
     const opt = weekRanges.find(o => o.value === weekRange);
     if (!opt)
         return [];
     const monday = new Date(opt.year, opt.month - 1, firstMondayOfMonth(opt.year, opt.month - 1) + opt.week * 7);
-    return 주의날들(data, monday, now).map(({ dt, entry, isFuture }) => {
+    return 주의날들(data, monday, now, 옛표시).map(({ dt, entry, isFuture }) => {
         const dM = dt.getMonth() + 1, dD = dt.getDate(), dY = dt.getFullYear();
         const sameMonth = dM === opt.month && dY === opt.year;
         return {
             label: sameMonth ? `${dD}` : `${dM}/${dD}`,
             sublabel: DOW[dt.getDay()] ?? '',
+            future: isFuture || undefined,
             a: isFuture ? -1 : (entry && entry.a > 0 ? entry.a : 0),
             b: isFuture ? 0 : (entry && entry.b > 0 ? entry.b : 0),
             isToday: dY === nowY && dM === nowM && dD === nowD,
@@ -253,13 +261,13 @@ 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, 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, detailSize = 32, barGap, baseline, className, inGrid = false, }) {
     const { t, i18n } = useTranslation();
     const sizePreset = BAR_SIZE_PRESET[size];
     // 외부 control 미지정 시 내부 컨트롤 사용 (단독 차트 하위 호환)
     const internalControl = useBarChartControl(data);
     const control = controlProp ?? internalControl;
-    const rawBars = useMemo(() => barsFromControl(data, control, t, i18n.language), [data, control, t, i18n.language]);
+    const rawBars = useMemo(() => barsFromControl(data, control, t, i18n.language, baseline == null), [data, control, t, i18n.language, baseline]);
     // 완료율 모드: a = 진행률(a/b×100). labelBKey 지정 시 b = 정답률(parts[0]/parts[1]×100) 2계열.
     //  월 보기의 주 막대는 **그 주 경과한 날의 일별 진행률 평균(미기록일 0%)** — 아래 total 과
     //  주 보기가 쓰는 같은 셈. 주 합 a/b 로 두면 기록 없는 날(b=0)이 빠져 같은 주가 두 보기에서
@@ -299,7 +307,7 @@ export default function BarChart({ size = 'medium', barWidth, titleKey, data, co
         };
         return rawBars.map((d, i) => {
             let a = d.a === -1 ? -1 : (d.b > 0 ? Math.round((d.a / d.b) * 100) : 0);
-            if (월 && d.a !== -1) {
+            if (월 && !미래칸(d)) {
                 const y = Number(월[1]), m0 = Number(월[2]) - 1;
                 const 지난날 = 주의날들(data, new Date(y, m0, firstMondayOfMonth(y, m0) + i * 7), now).filter(x => !x.isFuture);
                 if (rateAgg === 'weighted') {
@@ -319,7 +327,7 @@ export default function BarChart({ size = 'medium', barWidth, titleKey, data, co
                 }
             }
             let 계열 = null;
-            if (나란히 && d.a !== -1) {
+            if (나란히 && !미래칸(d)) {
                 let 날들;
                 if (월) {
                     const y = Number(월[1]), m0 = Number(월[2]) - 1;
@@ -373,7 +381,7 @@ export default function BarChart({ size = 'medium', barWidth, titleKey, data, co
         /* 기준선 모드는 부호를 살려 더한다 — 오르내림의 **순변화** 가 합계다(양수만 더하면 내린 주가 사라진다).
            미래 표시(a === -1)는 여기서도 뺀다 — 기준선 모드에서도 -1 은 '아직 오지 않은 칸' 이다(실제 -1 이 나올 수 있으면 그 칸을 자료에서 뺀다). */
         if (baseline != null) {
-            return 합칠것.reduce((s, d) => s + (d.a === -1 ? 0 : 수(d.a)) + (labelBKey ? 수(d.b) : 0), 0);
+            return 합칠것.reduce((s, d) => s + (미래칸(d, false) ? 0 : 수(d.a) + (labelBKey ? 수(d.b) : 0)), 0);
         }
         return 합칠것.reduce((s, d) => s + (d.a > 0 ? d.a : 0) + (labelBKey && d.b > 0 ? d.b : 0), 0);
     }, [bars, rawBars, rate, rateAgg, avgMode, baseline, labelBKey, control.period, control.monthRange, data]);
@@ -389,7 +397,9 @@ 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, title: t(titleKey), titleClassName: isSmall ? 'h5 chart-section-title--small' : undefined, headRight: isSmall ? (headExtra ?? undefined) : _jsxs(_Fragment, { children: [!hideControls && _jsx(BarChartControls, { control: control }), headExtra, onDetail && (_jsx("span", { className: "manager-bar-chart-detail-btn", children: _jsx(Button, { htmlType: "button", size: detailSize, 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, icon: icon, disc: disc, 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'은 라벨 생략
                 _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/ChartSection.css

@@ -31,6 +31,34 @@
 .manager-section__title {
   min-width: 0;
 }
+/* 아이콘 + (제목·설명) — Section 의 머리와 같은 결 */
+.manager-section__title-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-s);
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.manager-section__icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  margin-top: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--t-item-fg, var(--color-main));
+}
+.manager-section__title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.manager-section__disc {
+  color: var(--color-gray);
+  margin: 0;
+}
 .manager-section__head-right {
   display: flex;
   align-items: center;

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

@@ -1,5 +1,6 @@
 import './ChartSection.css';
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
+import { type TooltipMenuColumnItem } from './Tooltip/MenuTooltip';
 /** @public */
 export interface ChartLegendItem {
     color: string;
@@ -19,14 +20,42 @@ export interface ChartTotalProps {
 }
 /** 차트 총계 표시 — label이 있으면 라벨(윗줄)+값(아랫줄) stacked, 없으면 값만. @public */
 export declare function ChartTotal({ label, children }: ChartTotalProps): import("react").JSX.Element;
+/** @public 카드 머리의 보기 고르개 — 넓으면 세그먼트, 좁으면 '⋯' 메뉴로 접힌다 */
+export interface ChartHeadSegment {
+    /** 지금 고른 칸의 열쇠 */
+    value: string;
+    onChange: (key: string) => void;
+    /** 칸들. `icon` 은 접힌 메뉴에서만 쓰인다(고르개는 글자만). */
+    options: {
+        key: string;
+        label: string;
+        icon?: string;
+        disabled?: boolean;
+    }[];
+    /** 고르개·메뉴의 이름(낭독기) */
+    ariaLabel?: string;
+}
 /** @public */
 export interface ChartSectionProps {
     /** 섹션 제목 */
     title: ReactNode;
+    /** 제목 왼쪽 아이콘 — `Section` 의 것과 같은 자리·같은 색 */
+    icon?: string;
+    /** 제목 아래 설명 한 줄 — `Section` 의 `disc` 와 같은 결 */
+    disc?: ReactNode;
     /** 제목 타이포그래피 클래스 (기본: 'h3') — 작은 카드(size='small')는 'h5' 등으로 축소 */
     titleClassName?: string;
-    /** 헤더 우측 영역 — 기간 네비게이션, 상세보기 버튼 등 */
-    headRight?: ReactNode;
+    /** 헤더 우측 영역 — 기간 네비게이션, 상세보기 버튼 등.
+     *  함수로 주면 `collapsed`(머리가 좁아 고르개가 '⋯' 로 접혔는가)를 받는다 — 접혔을 때 단추를 메뉴로 옮기는 쪽이 쓴다. */
+    headRight?: ReactNode | ((state: {
+        collapsed: boolean;
+    }) => ReactNode);
+    /** 머리의 보기 고르개. 카드가 좁으면 '⋯' 한 단추로 접히고, 그 메뉴에 칸들이 들어간다. */
+    headSegment?: ChartHeadSegment;
+    /** 접힌 '⋯' 메뉴에서 칸들 **뒤** 에 구분선과 함께 붙는 항목(상세보기 등) */
+    headMenuItems?: TooltipMenuColumnItem[];
+    /** 고르개를 '⋯' 로 접는 카드 폭(px, 기본 420) */
+    collapseBelow?: number;
     /** 총계(ChartTotal) + 범례(ChartLegend)를 담는 서브로우 */
     subRow?: ReactNode;
     /** 섹션 루트에 추가할 클래스 */
@@ -46,4 +75,4 @@ export interface ChartSectionProps {
  * 공유하도록 두 컴포넌트가 내부적으로 사용한다.
  * @public
  */
-export default function ChartSection({ title, titleClassName, headRight, subRow, className, inGrid, children }: ChartSectionProps): import("react").JSX.Element;
+export default function ChartSection({ title, titleClassName, icon, disc, headRight, headSegment, headMenuItems, collapseBelow, subRow, className, inGrid, children }: ChartSectionProps): import("react").JSX.Element;

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

@@ -1,5 +1,13 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './ChartSection.css';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Icon from './Icon';
+import Button from './Button';
+import SegmentedControl from './SegmentedControl';
+import Tooltip from './Tooltip/Tooltip';
+import MenuTooltip from './Tooltip/MenuTooltip';
 /** 차트 범례 — 색상 점 + 라벨 목록. BarChart/RingChart 섹션이 공유. @public */
 export function ChartLegend({ items, className }) {
     return (_jsx("div", { className: className ? `manager-bar-chart-legend ${className}` : 'manager-bar-chart-legend', children: items.map((it, i) => (_jsxs("span", { className: "manager-bar-chart-legend-item", children: [_jsx("span", { className: "manager-bar-chart-legend-dot", style: { background: it.color } }), it.label] }, i))) }));
@@ -17,6 +25,48 @@ export function ChartTotal({ label, children }) {
  * 공유하도록 두 컴포넌트가 내부적으로 사용한다.
  * @public
  */
-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: ['manager-section__title', titleClassName].filter(Boolean).join(' '), children: title }), headRight && _jsx("div", { className: "manager-section__head-right", children: headRight })] }), subRow && _jsx("div", { className: "barchart-sub-row", children: subRow }), children] }));
+export default function ChartSection({ title, titleClassName = 'h3', icon, disc, headRight, headSegment, headMenuItems, collapseBelow = 420, subRow, className, inGrid = false, children }) {
+    const { t } = useTranslation();
+    const secRef = useRef(null);
+    /* 좁은지는 **카드 제 폭** 으로 잰다 — 부르는 쪽이 격자 칸 폭으로 대신 재면 두 칸을 차지하는 카드에서 틀린다.
+       ResizeObserver 가 없는 환경(구형·SSR)에서는 접지 않는다(넓은 쪽이 기본). */
+    const [좁음, set좁음] = useState(false);
+    useEffect(() => {
+        const el = secRef.current;
+        if (!el || !headSegment)
+            return;
+        const 재기 = (w) => set좁음(w > 0 && w < collapseBelow);
+        재기(el.clientWidth);
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const ro = new ResizeObserver(entries => 재기(entries[0].contentRect.width));
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [headSegment, collapseBelow]);
+    const [메뉴자리, set메뉴자리] = useState(null);
+    const 메뉴닫기 = useCallback(() => set메뉴자리(null), []);
+    const 메뉴열기 = useCallback((e) => {
+        const r = e.currentTarget.getBoundingClientRect();
+        set메뉴자리(prev => (prev ? null : { left: r.left, right: r.right, top: r.top, bottom: r.bottom, width: r.width, height: r.height, x: r.x, y: r.y }));
+    }, []);
+    const 접힘 = !!headSegment && 좁음;
+    useEffect(() => { if (!접힘)
+        set메뉴자리(null); }, [접힘]);
+    const 메뉴항목 = headSegment
+        ? [
+            ...headSegment.options.map(o => ({
+                label: o.label,
+                icon: o.icon,
+                selected: o.key === headSegment.value,
+                disabled: o.disabled,
+                onClick: () => headSegment.onChange(o.key),
+                closeOnSelect: true,
+            })),
+            /* 성격이 다른 묶음 — 위는 무엇을 볼지, 아래는 창을 연다 */
+            ...(headMenuItems ?? []).map((it, i) => (i === 0 ? { ...it, separatorBefore: true } : it)),
+        ]
+        : [];
+    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" }), _jsxs("div", { className: "manager-section__title-group", children: [_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/barChartData.d.ts

@@ -11,6 +11,9 @@ export interface BarData {
     isToday?: boolean;
     parts?: number[];
     partsB?: number[];
+    /** 아직 오지 않은 칸 — 막대를 그리지 않고 글씨를 흐리게, 평균·합계에서 뺀다.
+     *  `a === -1` 이 같은 뜻의 옛 표시인데, **음수가 값인 차트**(baseline)에서는 −1 이 진짜 값일 수 있어 이 칸을 쓴다. */
+    future?: boolean;
 }
 /** 한 구간(월 등)의 주별/일별 막대 데이터 묶음 */
 export type MonthBarData = {
@@ -26,6 +29,8 @@ export interface ChartPoint {
     b: number;
     parts?: number[];
     partsB?: number[];
+    /** 아직 오지 않은 날 — `a === -1` 과 같은 뜻이고, 음수를 값으로 쓰는 차트(baseline)에서는 이쪽을 쓴다. */
+    future?: boolean;
 }
 /** 해당 월(0-based)의 첫 월요일 날짜(1~7). 예: 2026-05(금요일 시작) → 4 */
 export declare function firstMondayOfMonth(year: number, month0: number): number;

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

@@ -113,6 +113,8 @@ export function buildMonthChartData(points) {
             const isFuture = isCurMonth && d > today;
             daily.push({
                 label: String(d),
+                /* 미래는 두 표시를 함께 단다 — 음수를 값으로 쓰는 차트(baseline)는 -1 을 진짜 값으로 읽으므로 future 를 본다 */
+                ...(isFuture && dayA[d] === 0 && dayB[d] === 0 ? { future: true } : {}),
                 a: isFuture && dayA[d] === 0 && dayB[d] === 0 ? -1 : dayA[d],
                 b: dayB[d],
                 ...(partsLen ? { parts: dayParts[d] } : {}),

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { ChartHeadSegment } from './ChartSection';
 import type { MonthBarData } from './barChartData';
 /** @public */
 export interface BarChartControl {
@@ -95,6 +96,13 @@ export interface BarChartProps {
      * 막대 수가 늘면 굵기는 `barWidth` 를 위 한계로 두고 줄어든다(계열 수만큼 센다).
      */
     seriesMode?: 'stack' | 'group';
+    /** 머리의 보기 고르개 — 넓으면 세그먼트, 카드가 좁으면 '⋯' 한 단추로 접히고 그 메뉴에 칸들과 '상세보기' 가 함께 든다.
+     *  `headExtra` 로 고르개를 손수 얹고 좁을 때를 따로 다루던 것을 대신한다(ChartSection 이 카드 제 폭으로 잰다). */
+    headSegment?: ChartHeadSegment;
+    /** 제목 왼쪽 아이콘 — Section·ChartSection 과 같은 자리·같은 색 */
+    icon?: string;
+    /** 제목 아래 설명 한 줄 */
+    disc?: ReactNode;
     /** 0 선을 캔버스 가운데 두고 **음수는 아래로** 그린다(예: 변동률 %p). 주면 축은 위아래 대칭(±max|값|)이 되고,
      *  눈금·격자선·이름표가 음수 구간까지 따라가며, 툴팁은 양수에 `+` 를 붙여 방향을 드러낸다.
      *  `series` + `seriesMode='group'` 과 함께 쓰면 갈래마다 0 선 위·아래로 자란다. 지금은 `0` 만 쓴다. */

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

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

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

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