@ihabdevteam/core 0.164.0 → 0.166.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` 만 쓴다. */
@@ -992,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[];
@@ -1026,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;
     /** 섹션 루트에 추가할 클래스 */
@@ -1505,7 +1541,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.164.0";
+export declare const CORE_VERSION = "0.166.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

@@ -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, 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 미지정 시 내부 컨트롤 사용 (단독 차트 하위 호환)
@@ -397,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', '상세보기'), showTooltipInfo: 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,30 @@
 .manager-section__title {
   min-width: 0;
 }
+/* 아이콘 + (제목·설명) — Section 의 머리와 같은 결 */
+.manager-section__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-s);
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.manager-section__icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--t-item-fg, var(--color-main));
+}
+.manager-section__disc {
+  /* 제목 줄 **아래 한 줄** — flex 줄바꿈에서 통째로 한 줄을 차지한다(제목 옆에 서면 오른쪽 묶음을 밀어낸다) */
+  flex: 0 0 100%;
+  min-width: 0;
+  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" }), _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/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.164.0";
+export declare const CORE_VERSION = "0.166.0";

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

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