@ihabdevteam/core 0.177.0 → 0.178.0

package/dist/ihabdevteam-core.d.ts

@@ -1063,7 +1063,7 @@ export declare interface ChartPoint {
  * 공유하도록 두 컴포넌트가 내부적으로 사용한다.
  * @public
  */
-export declare function ChartSection({ title, titleClassName, icon, disc, headRight, headSegment, headMenuItems, collapseBelow, onClick, ariaLabel, tooltip, totalNum, totalUnit, totalLabel, subRow, className, inGrid, children }: ChartSectionProps): JSX.Element;
+export declare function ChartSection({ title, titleClassName, icon, disc, headRight, headSegment, headMenuItems, collapseBelow, onClick, ariaLabel, tooltip, totalNum, totalUnit, totalLabel, subRow, subRowAlign, className, inGrid, children }: ChartSectionProps): JSX.Element;
 
 /** @public */
 export declare interface ChartSectionProps {
@@ -1109,6 +1109,15 @@ export declare interface ChartSectionProps {
     tooltip?: string;
     /** 총계(ChartTotal) + 범례(ChartLegend)를 담는 서브로우 */
     subRow?: ReactNode;
+    /** 서브로우에 선 것들의 **세로 맞춤** — `'start'`(기본) · `'center'` · `'end'`.
+     *
+     *  기본이 `'start'` 인 것은 **범례** 때문이다. 수(설명 한 줄 + 큰 수, 두 줄)와 범례가 함께 서면
+     *  범례는 첫 줄부터 읽히는 편이 낫다. 그런데 그 자리에 **32px 짜리 고르개** 를 넣으면 위에 붙어
+     *  아래가 29px 비고, 수에 견주어 떠 보인다(말귀 실측 2026-09-17: 서브로우 61.4px · 고르개 32px).
+     *  그때 `'center'` 로 준다 — 수가 가장 높으므로 수의 자리는 안 바뀌고 낮은 것만 가운데로 온다.
+     *
+     *  기본을 안 바꾼 것은 이미 선 화면 셋(말귀·소리방향성·kscan)의 범례가 함께 움직이기 때문이다. */
+    subRowAlign?: 'start' | 'center' | 'end';
     /** 섹션 루트에 추가할 클래스 */
     className?: string;
     /**
@@ -1576,7 +1585,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.177.0";
+export declare const CORE_VERSION = "0.178.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -1903,10 +1912,13 @@ export declare interface DeviceRow {
 
 declare type DeviceSide = '좌' | '우';
 
-export declare function DeviceSideTable({ rows, onSelect, onDelete, onWear, onRelease, onAdd }: DeviceSideTableProps): JSX.Element;
+export declare function DeviceSideTable({ rows, loading, onSelect, onDelete, onWear, onRelease, onAdd }: DeviceSideTableProps): JSX.Element;
 
 export declare interface DeviceSideTableProps {
     rows: DeviceRow[];
+    /** 서버에서 줄을 기다리는 중 — `Table` 의 `loading` 을 그대로 쓴다(스피너 한 줄).
+     *  안 주면 기다리는 동안 **빈 표**를 그렸다가 줄이 오면 늘어난다(말귀 기기 탭 실측 2026-09-17). */
+    loading?: boolean;
     /** 줄을 누르면 그 기기로 등록 폼을 채워 연다 */
     onSelect: (row: DeviceRow) => void;
     /**
@@ -5793,6 +5805,15 @@ export declare interface SegmentedControlProps {
     useBG?: boolean;
     /** 외부에서 정해진 폭을 버튼들이 균등 분할해 가득 채움 */
     fullWidth?: boolean;
+    /** 칸 하나의 **최소 폭**(px) — 크기별 기본(24:48 · 32:80 · 40:80 · 48:96)을 덮는다.
+     *
+     *  칸 이름 길이가 제각각인 자리에서 쓴다. 기본 폭은 짧은 이름도 갑갑하지 않게 잡은 값이라,
+     *  '상세분석 · 로데이터' 처럼 이름이 긴 고르개는 더 벌려야 하고, 소비자가 그때마다 제 CSS 로
+     *  덮던 자리다(말귀 두 곳 실측 2026-09-17).
+     *
+     *  바닥을 **깔면 짧은 이름이 헐렁해진다** — 한 고르개 안에서 이름 길이가 크게 다르면
+     *  차라리 주지 않는 편이 낫다(칸은 제 글자만큼 벌어진다). */
+    minButtonWidth?: number;
     /** 화면에 보이는 라벨 없이 스크린리더용 이름을 지정할 때 사용. 없으면 일반 라벨(segmentedControl.ariaLabel)로 대체 */
     ariaLabel?: string;
 }

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

@@ -406,5 +406,11 @@ export default function BarChart({ size = 'medium', barWidth, titleKey, data, co
                     /* 부호는 숫자 쪽에 붙인다 — `[^\d]+` 로 가르면 '-7%p' 의 '-' 가 단위로 넘어가 h5 로 작아졌다(변동률) */
                     (totalFormat(total).match(/([+-]?\d[\d.,]*|[^\d]+)/g) ?? []).map((part, i) => (/\d/.test(part)
                         ? _jsx("span", { className: "barchart-total__num h0", children: part }, i)
-                        : _jsx("span", { className: "barchart-total__unit h5", children: part }, i)))) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "barchart-total__num h0", children: total }), totalUnitKey && _jsx("span", { className: "barchart-total__unit h5", children: t(totalUnitKey) })] })) })) : (_jsxs(ChartTotal, { children: [_jsx("span", { className: "barchart-total__num h0", children: total }), _jsx("span", { className: "barchart-total__unit h5", children: t(labelAKey) }), totalUnitKey && _jsx("span", { className: "barchart-total__unit h5", children: t(totalUnitKey) })] }))) : _jsx("span", {}), _jsx(ChartLegend, { items: legendItems, className: "caption-1" })] }), children: loading ? (_jsx("div", { className: "manager-bar-chart-loading", children: _jsx(Loader, { size: 32 }) })) : (_jsx(BarChartCanvas, { data: bars, colorA: colorA, colorB: labelBKey ? colorB : undefined, labelA: t(labelAKey), labelB: labelBKey ? t(labelBKey) : undefined, barWidth: barWidth ?? sizePreset.barWidth, barGap: barGap, baseline: baseline, height: sizePreset.height, maxOverride: rate ? 100 : undefined, tightMax: tightMax, seriesColors: series?.map(s => s.color), seriesLabels: series?.map(s => s.label), rateLabels: rate ? { total: t('trainingStatus.today.tooltipTotal', '전체'), done: t('trainingStatus.today.tooltipDone', '완료') } : undefined, grouped: 나란히 })) }));
+                        : _jsx("span", { className: "barchart-total__unit h5", children: part }, i)))) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "barchart-total__num h0", children: total }), totalUnitKey && _jsx("span", { className: "barchart-total__unit h5", children: t(totalUnitKey) })] })) })) : (_jsxs(ChartTotal, { children: [_jsx("span", { className: "barchart-total__num h0", children: total }), _jsx("span", { className: "barchart-total__unit h5", children: t(labelAKey) }), totalUnitKey && _jsx("span", { className: "barchart-total__unit h5", children: t(totalUnitKey) })] }))) : _jsx("span", {}), _jsx(ChartLegend, { items: legendItems, className: "caption-1" })] }), children: loading ? (
+        /* **뼈대 먼저, 그 안에서 기다린다**(사용자 지시 2026-09-17). 기다림 상자를 따로 두면
+           자료가 오는 순간 카드 키가 달라져 격자가 한꺼번에 내려앉는다 — 말귀 실측: 상자 186px
+           → 막대 156px 로 카드마다 30px, 섹션 372 → 342px.
+           그래서 **그려질 것과 같은 뼈대**(칸 자리 + 축 한 줄)를 세우고 그 안에 스피너를 둔다.
+           키는 막대 자리(`sizePreset.height`)에서 오므로 크기 보기(size)가 달라도 따라온다. */
+        _jsx("div", { className: "manager-bar-chart-wrap manager-bar-chart-loading", "aria-busy": "true", children: _jsx("div", { className: "manager-bar-chart-inner", children: _jsxs("div", { className: "manager-bar-chart-area manager-bar-chart-area--loading", children: [_jsx("div", { className: "manager-bar-chart-plot manager-bar-chart-plot--loading", style: { height: sizePreset.height }, children: _jsx(Loader, { size: 32 }) }), _jsx("div", { className: "manager-bar-chart-x-axis", "aria-hidden": "true", children: _jsxs("span", { className: "manager-bar-chart-x-axis__label", children: [_jsx("span", { className: "caption-1 manager-bar-chart-x-axis__main", children: "\u00A0" }), bars.some(b => !!b.sublabel) && _jsx("span", { className: "caption-1", children: "\u00A0" })] }) })] }) }) })) : (_jsx(BarChartCanvas, { data: bars, colorA: colorA, colorB: labelBKey ? colorB : undefined, labelA: t(labelAKey), labelB: labelBKey ? t(labelBKey) : undefined, barWidth: barWidth ?? sizePreset.barWidth, barGap: barGap, baseline: baseline, height: sizePreset.height, maxOverride: rate ? 100 : undefined, tightMax: tightMax, seriesColors: series?.map(s => s.color), seriesLabels: series?.map(s => s.label), rateLabels: rate ? { total: t('trainingStatus.today.tooltipTotal', '전체'), done: t('trainingStatus.today.tooltipDone', '완료') } : undefined, grouped: 나란히 })) }));
 }

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

@@ -117,12 +117,19 @@
   gap: var(--spacing-xs);
 }
 
-/* 차트 영역 로딩 스피너 — 헤더/범례는 유지, 막대 자리에만 표시 */
-.manager-bar-chart-loading {
+/* 차트 영역 로딩 — 머리·범례는 그대로 두고 **그려질 것과 같은 뼈대** 안에서 기다린다.
+   전에는 이 상자에 min-height: 186px 을 박아 뒀는데, 막대가 들어서면 156px 이라 자료가 오는
+   순간 카드마다 30px 씩 줄어 격자가 한꺼번에 내려앉았다(말귀 실측 2026-09-17). 이제 키는
+   차트가 쥔 값(막대 자리 높이 · 링 지름)에서 오므로 여기서 박지 않는다. */
+.manager-bar-chart-plot--loading,
+.ring-chart--loading {
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 186px;
+}
+/* 축 자리만 잡는 줄 — 글자가 없어도 한 줄 높이를 가진다 */
+.manager-bar-chart-area--loading .manager-bar-chart-x-axis {
+  justify-content: center;
 }
 
 .barchart-sub-row {
@@ -131,6 +138,10 @@
   align-items: flex-start;
   margin-bottom: var(--spacing-l);
 }
+/* 서브로우 세로 맞춤(subRowAlign) — 수보다 낮은 것(32px 고르개 등)이 위에 붙어 떠 보일 때 쓴다.
+   수가 가장 높으므로 수의 자리는 안 바뀐다. */
+.barchart-sub-row--center { align-items: center; }
+.barchart-sub-row--end    { align-items: flex-end; }
 .barchart-total {
   display: flex;
   align-items: baseline;

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

@@ -79,6 +79,15 @@ export interface ChartSectionProps {
     tooltip?: string;
     /** 총계(ChartTotal) + 범례(ChartLegend)를 담는 서브로우 */
     subRow?: ReactNode;
+    /** 서브로우에 선 것들의 **세로 맞춤** — `'start'`(기본) · `'center'` · `'end'`.
+     *
+     *  기본이 `'start'` 인 것은 **범례** 때문이다. 수(설명 한 줄 + 큰 수, 두 줄)와 범례가 함께 서면
+     *  범례는 첫 줄부터 읽히는 편이 낫다. 그런데 그 자리에 **32px 짜리 고르개** 를 넣으면 위에 붙어
+     *  아래가 29px 비고, 수에 견주어 떠 보인다(말귀 실측 2026-09-17: 서브로우 61.4px · 고르개 32px).
+     *  그때 `'center'` 로 준다 — 수가 가장 높으므로 수의 자리는 안 바뀌고 낮은 것만 가운데로 온다.
+     *
+     *  기본을 안 바꾼 것은 이미 선 화면 셋(말귀·소리방향성·kscan)의 범례가 함께 움직이기 때문이다. */
+    subRowAlign?: 'start' | 'center' | 'end';
     /** 섹션 루트에 추가할 클래스 */
     className?: string;
     /**
@@ -96,4 +105,4 @@ export interface ChartSectionProps {
  * 공유하도록 두 컴포넌트가 내부적으로 사용한다.
  * @public
  */
-export default function ChartSection({ title, titleClassName, icon, disc, headRight, headSegment, headMenuItems, collapseBelow, onClick, ariaLabel, tooltip, totalNum, totalUnit, totalLabel, subRow, className, inGrid, children }: ChartSectionProps): import("react").JSX.Element;
+export default function ChartSection({ title, titleClassName, icon, disc, headRight, headSegment, headMenuItems, collapseBelow, onClick, ariaLabel, tooltip, totalNum, totalUnit, totalLabel, subRow, subRowAlign, className, inGrid, children }: ChartSectionProps): import("react").JSX.Element;

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

@@ -9,6 +9,7 @@ import SegmentedControl from './SegmentedControl';
 import Tooltip from './Tooltip/Tooltip';
 import TooltipInfo from './Tooltip/InfoTooltip';
 import { useHoverAnchor } from '../hooks/useHoverAnchor';
+import { useIsoLayoutEffect } from '../hooks/useIsoLayoutEffect';
 import MenuTooltip from './Tooltip/MenuTooltip';
 /** 차트 범례 — 색상 점 + 라벨 목록. BarChart/RingChart 섹션이 공유. @public */
 export function ChartLegend({ items, className }) {
@@ -27,7 +28,7 @@ export function ChartTotal({ label, children }) {
  * 공유하도록 두 컴포넌트가 내부적으로 사용한다.
  * @public
  */
-export default function ChartSection({ title, titleClassName = 'h3', icon, disc, headRight, headSegment, headMenuItems, collapseBelow = 420, onClick, ariaLabel, tooltip, totalNum, totalUnit, totalLabel, subRow, className, inGrid = false, children }) {
+export default function ChartSection({ title, titleClassName = 'h3', icon, disc, headRight, headSegment, headMenuItems, collapseBelow = 420, onClick, ariaLabel, tooltip, totalNum, totalUnit, totalLabel, subRow, subRowAlign = 'start', className, inGrid = false, children }) {
     const { t } = useTranslation();
     const secRef = useRef(null);
     /* 설명 툴팁 — StatChart 와 같은 결(카드 사각형 기준, 포인터가 나가거나 초점이 빠지면 닫힘).
@@ -36,9 +37,15 @@ export default function ChartSection({ title, titleClassName = 'h3', icon, disc,
     const 설명보이기 = useCallback(() => { if (tooltip && secRef.current)
         설명열기(secRef.current); }, [tooltip, 설명열기]);
     /* 좁은지는 **카드 제 폭** 으로 잰다 — 부르는 쪽이 격자 칸 폭으로 대신 재면 두 칸을 차지하는 카드에서 틀린다.
-       ResizeObserver 가 없는 환경(구형·SSR)에서는 접지 않는다(넓은 쪽이 기본). */
+       ResizeObserver 가 없는 환경(구형·SSR)에서는 접지 않는다(넓은 쪽이 기본).
+  
+       **첫 재기는 그리기 전에 끝나야 한다**(그래서 layout effect 다). `useEffect` 로 두었더니
+       좁은 카드도 첫 프레임은 고르개를 **편 채** 그려졌다가 다음 프레임에 '⋯' 로 접혔고, 그 한
+       프레임 동안 머리가 한 줄 늘어 카드가 부풀었다 — 말귀 실측 2026-09-17: 머리 32 → 70 → 32px,
+       섹션 342 → 380 → 342px, 페이지 바닥이 38px 출렁(layout-shift 로 잡힘).
+       뒤따르는 폭 변화는 ResizeObserver 가 그대로 따라간다. */
     const [좁음, set좁음] = useState(false);
-    useEffect(() => {
+    useIsoLayoutEffect(() => {
         const el = secRef.current;
         if (!el || !headSegment)
             return;
@@ -106,5 +113,5 @@ export default function ChartSection({ title, titleClassName = 'h3', icon, disc,
                     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) && _jsxs("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" }) }))] }));
+                }, 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) && (_jsxs("div", { className: ['barchart-sub-row', subRowAlign !== 'start' && `barchart-sub-row--${subRowAlign}`].filter(Boolean).join(' '), 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/Popup/DeviceSideTable.d.ts

@@ -21,6 +21,9 @@ export interface DeviceRow {
 }
 export interface DeviceSideTableProps {
     rows: DeviceRow[];
+    /** 서버에서 줄을 기다리는 중 — `Table` 의 `loading` 을 그대로 쓴다(스피너 한 줄).
+     *  안 주면 기다리는 동안 **빈 표**를 그렸다가 줄이 오면 늘어난다(말귀 기기 탭 실측 2026-09-17). */
+    loading?: boolean;
     /** 줄을 누르면 그 기기로 등록 폼을 채워 연다 */
     onSelect: (row: DeviceRow) => void;
     /**
@@ -38,4 +41,4 @@ export interface DeviceSideTableProps {
     /** 툴바 오른쪽 끝의 '기기 추가' */
     onAdd?: () => void;
 }
-export default function DeviceSideTable({ rows, onSelect, onDelete, onWear, onRelease, onAdd }: DeviceSideTableProps): import("react").JSX.Element;
+export default function DeviceSideTable({ rows, loading, onSelect, onDelete, onWear, onRelease, onAdd }: DeviceSideTableProps): import("react").JSX.Element;

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

@@ -29,7 +29,7 @@ function 정렬값(r, key) {
     /* 월·일이 null 로 오는 옛 기록이 있다 — padStart 에서 표가 통째로 터졌다 */
     return wornDateSortKey(r.wornYear, r.wornMonth, r.wornDay);
 }
-export default function DeviceSideTable({ rows, onSelect, onDelete, onWear, onRelease, onAdd }) {
+export default function DeviceSideTable({ rows, loading, onSelect, onDelete, onWear, onRelease, onAdd }) {
     const { t } = useTranslation();
     const 방향이름 = (side) => side === '좌' ? t('device.direction.left', '좌') : t('device.direction.right', '우');
     /* 머리행을 누르면 그 칸으로 정렬한다 — 같은 칸을 다시 누르면 방향이 뒤집힌다.
@@ -49,7 +49,7 @@ export default function DeviceSideTable({ rows, onSelect, onDelete, onWear, onRe
     }, [rows, 정렬]);
     /* 개수 보기·쪽넘김은 방문 표와 같은 것을 쓴다 — 같은 자리에서 같은 뜻으로 읽히게 */
     const { pageRows, pageSizeProps, paginationProps } = useTablePaging(sortedRows, 정렬);
-    return (_jsxs("div", { className: "dlp-side-table", children: [_jsx(Toolbar, { count: { value: rows.length, unit: t('customers.device.unit', '개') }, pageSize: pageSizeProps, pagination: paginationProps, actions: onAdd && (_jsx(Button, { htmlType: "button", size: 40, type: "bar", variant: "main", icon: "plus", label: t('customers.device.addButton', '기기 추가'), onClick: onAdd })) }), _jsx(Table, { resizable: true, resizeMode: "fit", resizeStorageKey: "customer-device-history-v2", fields: [
+    return (_jsxs("div", { className: "dlp-side-table", children: [_jsx(Toolbar, { count: { value: rows.length, unit: t('customers.device.unit', '개') }, pageSize: pageSizeProps, pagination: paginationProps, actions: onAdd && (_jsx(Button, { htmlType: "button", size: 40, type: "bar", variant: "main", icon: "plus", label: t('customers.device.addButton', '기기 추가'), onClick: onAdd })) }), _jsx(Table, { loading: loading, resizable: true, resizeMode: "fit", resizeStorageKey: "customer-device-history-v2", fields: [
                     /* 맨 왼쪽 — 지금 끼고 있는 것만 좌/우를 적는다. 이 열만 훑으면 "오늘 이 사람이
                        무엇을 쓰고 있나" 가 한눈에 보인다(나머지 줄은 비어 있어 눈에 안 걸린다). */
                     /* 체크박스 칸은 폭을 늘릴 것이 없다 — 손잡이를 주면 잡히는데 아무 일도

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

@@ -58,11 +58,17 @@ export default function RingChart({ titleKey, headRight, icon, showTotal, totalL
     const pct = (ringProps.total ?? 0) > 0 ? 퍼센트(Math.min((ringProps.done ?? 0) / ringProps.total, 1)) : 0;
     // size='small' — 대시보드 작은 그리드용 블럭. 컨트롤(headRight)만 생략하고 total/legend는 medium과 동일하게 유지
     const isSmall = ringProps.size === 'small';
+    /* 기다림 뼈대의 지름 — 그려질 링과 **같은 셈** 을 쓴다(RingChartCanvas 의 dim) */
+    const 기다림지름 = typeof ringProps.size === 'number' ? ringProps.size : RING_SIZE_PRESET[ringProps.size ?? 'medium'].diameter;
     // size='large' — 카드가 가로 폭을 거의 100% 차지(1열)
     const isLarge = ringProps.size === 'large';
     const sectionClassName = [className, isSmall ? 'manager-section--compact' : isLarge ? 'manager-section--full' : '']
         .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, 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 }) })) }));
+    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 ? (
+        /* 링도 같은 병이 있었다 — 기다림 상자 186px, 그려진 링은 지름(medium 120px)이다.
+           **그려질 링과 같은 자리·같은 지름**의 뼈대를 세우고 그 안에서 기다린다
+           (BarChart 와 같은 결, 사용자 지시 2026-09-17 "뼈대 먼저, 그 안에서 로딩"). */
+        _jsx("div", { className: "ring-chart-section-body ring-chart-section-body--offset", children: _jsx("div", { className: "ring-chart ring-chart--loading", style: { width: 기다림지름, height: 기다림지름 }, "aria-busy": "true", 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/SegmentedControl.css

@@ -20,8 +20,11 @@
 
 /* 라벨이 짧아도 세그먼트가 지나치게 쪼그라들지 않도록 size별 최소 너비 */
 .segmented-control .button         { min-width: 96px; } /* 기본(48) */
+/* 부르는 쪽이 정한 최소 폭(minButtonWidth) — 칸 이름 길이가 제각각인 카드에서 바닥을 따로 깐다.
+   셈수를 위 규칙들보다 한 겹 높여(.segmented-control.segmented-control) 크기별 기본을 덮는다. */
+.segmented-control.segmented-control--min .button { min-width: var(--segmented-min-button-w); }
 .segmented-control--24 .button     { min-width: 48px; }
-.segmented-control--32 .button     { min-width: 64px; }
+.segmented-control--32 .button     { min-width: 80px; } /* 64 는 갑갑했다 — 같은 화면의 기간 고르개(40)와 같은 눈금(2026-09-17 사용자 지시) */
 .segmented-control--40 .button     { min-width: 80px; }
 .segmented-control--48 .button     { min-width: 96px; }
 

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

@@ -24,6 +24,15 @@ export interface SegmentedControlProps {
     useBG?: boolean;
     /** 외부에서 정해진 폭을 버튼들이 균등 분할해 가득 채움 */
     fullWidth?: boolean;
+    /** 칸 하나의 **최소 폭**(px) — 크기별 기본(24:48 · 32:80 · 40:80 · 48:96)을 덮는다.
+     *
+     *  칸 이름 길이가 제각각인 자리에서 쓴다. 기본 폭은 짧은 이름도 갑갑하지 않게 잡은 값이라,
+     *  '상세분석 · 로데이터' 처럼 이름이 긴 고르개는 더 벌려야 하고, 소비자가 그때마다 제 CSS 로
+     *  덮던 자리다(말귀 두 곳 실측 2026-09-17).
+     *
+     *  바닥을 **깔면 짧은 이름이 헐렁해진다** — 한 고르개 안에서 이름 길이가 크게 다르면
+     *  차라리 주지 않는 편이 낫다(칸은 제 글자만큼 벌어진다). */
+    minButtonWidth?: number;
     /** 화면에 보이는 라벨 없이 스크린리더용 이름을 지정할 때 사용. 없으면 일반 라벨(segmentedControl.ariaLabel)로 대체 */
     ariaLabel?: string;
 }

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

@@ -10,7 +10,7 @@ export default function SegmentedControl(props) {
     const { t } = useTranslation();
     const { options = [], 
     // 안 주면 **켜진** 첫 칸 — 꺼진 첫 칸이 골라져 있었다(Tabs 와 같게)
-    value = options.find((o) => !o.disabled)?.key ?? options[0]?.key, onChange = (_v) => { }, className = '', size = 48, shape = 'pill', useBG = true, fullWidth = false, ariaLabel, } = props || {};
+    value = options.find((o) => !o.disabled)?.key ?? options[0]?.key, onChange = (_v) => { }, className = '', size = 48, shape = 'pill', useBG = true, fullWidth = false, minButtonWidth, ariaLabel, } = props || {};
     /* **라디오 무리는 Tab 자리 하나 + 화살표**가 ARIA 규칙이다.
        `role="radiogroup"`·`role="radio"` 만 붙여 놓고 키를 안 만들면 **안 붙인 것보다
        나쁘다** — 낭독기가 "라디오 그룹, 3 중 2" 라고 읽어 주니 사람은 화살표를 누르는데
@@ -62,7 +62,7 @@ export default function SegmentedControl(props) {
     };
     /* Tab 자리를 받을 한 칸 — 고른 것이 있으면 그것, 없으면 고를 수 있는 첫 칸 */
     const 탭자리 = 고를수있는.some((o) => o.key === value) ? value : 고를수있는[0]?.key;
-    return (_jsx("div", { ref: 그룹, onKeyDown: 키, className: cx('segmented-control', `segmented-control--${shape}`, `segmented-control--${size}`, fullWidth && 'segmented-control--full', !useBG && 'segmented-control--no-bg', className), role: "radiogroup", "aria-label": ariaLabel ?? t('segmentedControl.ariaLabel', '선택 탭'), children: options.map((opt) => (_jsx(Button, { htmlType: "button", role: "radio", "aria-checked": opt.key === value, "data-segkey": opt.key, tabIndex: opt.key === 탭자리 ? 0 : -1, label: opt.label, count: opt.count, 
+    return (_jsx("div", { ref: 그룹, onKeyDown: 키, className: cx('segmented-control', `segmented-control--${shape}`, `segmented-control--${size}`, fullWidth && 'segmented-control--full', !useBG && 'segmented-control--no-bg', minButtonWidth != null && 'segmented-control--min', className), style: minButtonWidth != null ? { ['--segmented-min-button-w']: `${minButtonWidth}px` } : undefined, role: "radiogroup", "aria-label": ariaLabel ?? t('segmentedControl.ariaLabel', '선택 탭'), children: options.map((opt) => (_jsx(Button, { htmlType: "button", role: "radio", "aria-checked": opt.key === value, "data-segkey": opt.key, tabIndex: opt.key === 탭자리 ? 0 : -1, label: opt.label, count: opt.count, 
             /* 수를 이름에 넣는다 — 글자 이름표는 단추의 aria-label 이 되어 내용(수)이 이름 계산에서 빠졌다("전체" 로만 읽힘) */
             ariaLabel: 이름(opt), disabled: opt.disabled, className: opt.key === value ? 'is-selected' : '', onClick: () => { if (!opt.disabled)
                 onChange(opt.key); }, size: size, shape: shape, useBorder: false, useBG: false }, opt.key))) }));

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../utils/cx';
-import { useId, useEffect, useLayoutEffect, useRef, useCallback, useState } from 'react';
+import { useId, useEffect, useRef, useCallback, useState } from 'react';
 import { devWarnOnce } from '../utils/devWarn';
 import { useTranslation } from 'react-i18next';
 import { createPortal } from 'react-dom';
@@ -9,9 +9,8 @@ import Icon from './Icon';
 import { anchoredMenuZIndex } from '../hooks/useAnchoredMenu';
 import Button from './Button';
 import { useComboboxSuggestions } from './useComboboxSuggestions';
+import { useIsoLayoutEffect } from '../hooks/useIsoLayoutEffect';
 import './TextField.css';
-/* 서버 렌더에서는 layout effect 가 돌지 않고 React 18 은 경고를 찍는다 — 브라우저에서만 layout, 서버에서는 effect */
-const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 /** @public */
 export default function TextField(props) {
     const { value, defaultValue, name, inputRef, onChange, label, ariaLabel, required, placeholder, type = 'text', disabled = false, readOnly = false, error, helperText, maxLength, size = 48, variant = 'input', fullWidth = false, newline = false, multiline = false, rows = 3, leftIcon, rightIcon, clearable = false, list, showCount = true, className = '', onFocus, onBlur, onKeyDown, onEnter, inputMode, autoComplete, autoFocus, suggestions: suggestionsProp, openOnFocus = false, } = props;

package/dist/packages/core/src/hooks/useIsoLayoutEffect.d.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+/**
+ * **브라우저에서는 layout effect, 서버에서는 effect.**
+ *
+ * `useLayoutEffect` 는 서버 렌더에서 돌지 않고 React 는 그 자리에 경고를 찍는다.
+ * 그렇다고 `useEffect` 로 두면 **그린 뒤** 에 도니, 첫 프레임이 잘못 그려졌다가
+ * 다음 프레임에 고쳐지는 깜빡임이 생긴다 — 재서 그리는 자리(폭·높이·자리)는 그
+ * 한 프레임이 화면에 보인다.
+ *
+ * 그래서 두 말을 다 듣는 한 줄이다. `TextField` 가 먼저 제 파일 안에 두고 썼고,
+ * `ChartSection` 이 같은 것을 필요로 해(2026-09-17 말귀 실측: 좁은 카드가 고르개를
+ * 편 채 한 프레임 그려져 카드가 38px 출렁) 여기 한 곳으로 모았다.
+ *
+ * @internal 코어 안에서만 쓴다 — 공개 갈래로 내보내지 않는다.
+ */
+export declare const useIsoLayoutEffect: typeof useEffect;

package/dist/packages/core/src/hooks/useIsoLayoutEffect.js

@@ -0,0 +1,17 @@
+'use client';
+import { useEffect, useLayoutEffect } from 'react';
+/**
+ * **브라우저에서는 layout effect, 서버에서는 effect.**
+ *
+ * `useLayoutEffect` 는 서버 렌더에서 돌지 않고 React 는 그 자리에 경고를 찍는다.
+ * 그렇다고 `useEffect` 로 두면 **그린 뒤** 에 도니, 첫 프레임이 잘못 그려졌다가
+ * 다음 프레임에 고쳐지는 깜빡임이 생긴다 — 재서 그리는 자리(폭·높이·자리)는 그
+ * 한 프레임이 화면에 보인다.
+ *
+ * 그래서 두 말을 다 듣는 한 줄이다. `TextField` 가 먼저 제 파일 안에 두고 썼고,
+ * `ChartSection` 이 같은 것을 필요로 해(2026-09-17 말귀 실측: 좁은 카드가 고르개를
+ * 편 채 한 프레임 그려져 카드가 38px 출렁) 여기 한 곳으로 모았다.
+ *
+ * @internal 코어 안에서만 쓴다 — 공개 갈래로 내보내지 않는다.
+ */
+export const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

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

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

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

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