@ihabdevteam/core 0.321.0 → 0.323.0

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

@@ -11,16 +11,16 @@ import { getTodayKstDate } from '../utils/date';
 import DescriptionTooltip from './Tooltip/DescriptionTooltip';
 import ChartSection, { ChartTotal, ChartLegend } from './ChartSection';
 import { devWarnOnce } from '../utils/devWarn';
-import { firstMondayOfMonth, KO_ORD } from './barChartData';
+import { firstMondayOfMonth, weekLabel } from './barChartData';
 import { useBarChartControl } from './useBarChartControl';
 // ─── 막대 렌더링 원시 컴포넌트 ───────────────────────────────────
 /** 막대 값 — 수가 아니면(undefined·NaN·Infinity) 0 */
-const 수 = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : 0);
+const num = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : 0);
 /** 아직 오지 않은 칸인가 — 옛 표시(a === -1)와 새 표시(future)를 함께 본다.
  *  음수가 값인 차트(baseline)에서는 −1 이 진짜 값일 수 있어 `future` 를 쓴다. */
-function 미래칸(d, 옛표시 = true) {
+function isFutureBar(d, showPast = true) {
     /* `baseline` 을 쓰는 차트는 −1 이 진짜 값이라 옛 표시를 보지 않는다 — 부르는 쪽이 옛표시=false 로 끈다 */
-    return d.future === true || (옛표시 && d.a === -1);
+    return d.future === true || (showPast && d.a === -1);
 }
 function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, barGap = 1, height = 140, maxOverride, tightMax, seriesColors, seriesLabels, rateLabels, grouped = false, baseline, focusableBars = false }) {
     // colorB 미지정 시 단일 계열(A) 모드
@@ -29,24 +29,24 @@ function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, b
     /* 값이 비었거나(undefined) 수가 아니면 0 으로 친다. 두 계열인데 한 항목의 `b` 가 비면 Math.max 가 NaN 이 되고
        `NaN || 10` 으로 y축이 데이터와 상관없이 10 에 박혀 막대가 판 위로 넘쳤다(ihab-core-96 이 짚음). */
     /* 기준선 모드에서는 옛 미래 표시(a === -1)를 보지 않는다 — −1 이 진짜 값이다 */
-    const 기준 = baseline;
+    const base = baseline;
     const maxVal = useMemo(() => stacked
-        ? Math.max(0, ...data.filter(d => !미래칸(d, 기준 == null)).map(d => grouped
+        ? Math.max(0, ...data.filter(d => !isFutureBar(d, base == 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, 기준 == null)).flatMap(d => single ? [수(d.a)] : [수(d.a), 수(d.b)])), [data, single, stacked, grouped]);
+            ? Math.max(0, ...(d.parts ?? []).map(num))
+            : (d.parts ?? []).reduce((s, v) => s + Math.max(0, num(v)), 0)))
+        : Math.max(0, ...data.filter(d => !isFutureBar(d, base == null)).flatMap(d => single ? [num(d.a)] : [num(d.a), num(d.b)])), [data, single, stacked, grouped]);
     /* 기준선 모드: 0 선에서 얼마나 떨어졌는지(|값 − 기준|)가 축을 정한다 — 위아래가 대칭이라야 같은 크기의 오름·내림이 같은 길이로 읽힌다 */
-    const 대칭최대 = useMemo(() => {
-        if (기준 == null)
+    const symmetricMax = useMemo(() => {
+        if (base == null)
             return 0;
-        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 values = data.filter(d => !isFutureBar(d, base == null)).flatMap(d => stacked ? (d.parts ?? []).map(num) : (single ? [num(d.a)] : [num(d.a), num(d.b)]));
+        return Math.max(0, ...values.map(v => Math.abs(v - base)));
+    }, [data, base, stacked, single]);
     const padded = useMemo(() => {
-        const m = 기준 != null ? 대칭최대 : maxVal;
+        const m = base != null ? symmetricMax : maxVal;
         return maxOverride ?? (tightMax ? (m > 0 ? m : 10) : (Math.ceil(m / 10) * 10 || 10));
-    }, [maxVal, 대칭최대, 기준, maxOverride, tightMax]);
+    }, [maxVal, symmetricMax, base, maxOverride, tightMax]);
     const h = height;
     // 막대 너비 — 여백과 무관하게 막대 '개수'(컬럼 × 계열)가 늘수록 점진 축소(최대 barWidth)
     const barsPerCol = stacked ? (grouped ? Math.max(1, seriesColors.length) : 1) : (single ? 1 : 2);
@@ -57,109 +57,109 @@ function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, b
     }, [data.length, barsPerCol, barWidth]);
     /* 굵기는 인라인 flex/maxWidth 가 아니라 CSS 변수로 박는다 — 소비자가 `!important`
        없이 CSS 로 덮을 수 있게. 읽는 규칙은 BarChart.css 의 `.manager-bar-chart-bar`·`-stack`. */
-    const 막대굵기 = { '--bar-width': `${effBarWidth}px` };
+    const barWidthStyle = { '--bar-width': `${effBarWidth}px` };
     /* 나란히 선 막대 사이 간격 — 칸(.manager-bar-chart-col--group)의 gap 으로 내려보낸다 */
-    const 묶음간격 = { '--bar-group-gap': `${Math.max(0, barGap)}px` };
+    const groupGapStyle = { '--bar-group-gap': `${Math.max(0, barGap)}px` };
     const ticks = useMemo(() => {
         const mid = Math.round(padded / 2);
-        if (기준 != null) {
+        if (base != null) {
             /* 위 → 0 → 아래. 맨 아래 값은 x축 자리라 아래 렌더에서 뺀다(기존 규칙과 같다) */
-            const 위 = [기준 + padded, ...(mid !== padded ? [기준 + mid] : []), 기준];
-            return [...위, ...(mid !== padded ? [기준 - mid] : []), 기준 - padded];
+            const topTicks = [base + padded, ...(mid !== padded ? [base + mid] : []), base];
+            return [...topTicks, ...(mid !== padded ? [base - mid] : []), base - padded];
         }
         return mid !== padded ? [padded, mid, 0] : [padded, 0];
-    }, [padded, 기준]);
+    }, [padded, base]);
     /** 값 → 판 위에서의 높이 비율(0~1) 자리 — 기준선 모드는 0 선이 한가운데 */
-    const 눈금자리 = (t) => (기준 != null ? (1 - (t - (기준 - padded)) / (2 * padded)) : (1 - t / padded));
+    const tickPos = (t) => (base != null ? (1 - (t - (base - padded)) / (2 * padded)) : (1 - t / padded));
     const [tooltip, setTooltip] = useState(null);
     const handleBarLeave = useCallback(() => setTooltip(null), []);
     /* **한 칸이 말하는 것을 한 곳에서 짓는다**(말귀 요청 (52), 2026-10-02).
        전에는 이 셈이 `onMouseEnter` 손잡이 안에만 있어, **얹는 사람만** 수를 읽을 수 있었다.
        같은 글을 풍선·초점·`aria-label` 셋이 쓰도록 밖으로 뺀다 — 보는 말과 들리는 말이
        갈리지 않는다. */
-    const 풍선내용 = useCallback((d, parts) => {
+    const tooltipContent = useCallback((d, parts) => {
         const title = [d.label, d.sublabel].filter(Boolean).join(' ');
         let items;
         if (stacked && grouped && d.rawPartsB) {
             /* 계열별 비율 — 잰 것이 없는 계열은 0% 가 아니라 '-' 다(0% 는 "다 틀렸다" 로 읽힌다) */
             items = (seriesLabels ?? []).map((lb, k) => {
-                const 분모 = d.rawPartsB[k] ?? 0;
-                return { text: 분모 > 0 ? `${lb}: ${parts[k] ?? 0}% (${d.rawParts?.[k] ?? 0}/${분모})` : `${lb}: -`, color: (seriesColors ?? [])[k] };
+                const denominator = d.rawPartsB[k] ?? 0;
+                return { text: denominator > 0 ? `${lb}: ${parts[k] ?? 0}% (${d.rawParts?.[k] ?? 0}/${denominator})` : `${lb}: -`, color: (seriesColors ?? [])[k] };
             });
         }
         else if (stacked && grouped) {
             /* 자리가 고정이라 0 도 적는다 — 빈 자리가 무엇인지 알 수 있게 */
-            items = (seriesLabels ?? []).map((lb, k) => ({ text: `${lb}: ${부호붙이기(parts[k] ?? 0)}`, color: (seriesColors ?? [])[k] }));
+            items = (seriesLabels ?? []).map((lb, k) => ({ text: `${lb}: ${withSign(parts[k] ?? 0)}`, color: (seriesColors ?? [])[k] }));
         }
         else if (stacked) {
-            const 전부 = (seriesLabels ?? []).map((lb, k) => ({ text: `${lb}: ${parts[k] ?? 0}`, color: (seriesColors ?? [])[k] }));
-            const 있는 = 전부.filter((_, k) => (parts[k] ?? 0) > 0);
-            items = 있는.length ? 있는 : 전부;
+            const allItems = (seriesLabels ?? []).map((lb, k) => ({ text: `${lb}: ${parts[k] ?? 0}`, color: (seriesColors ?? [])[k] }));
+            const presentItems = allItems.filter((_, k) => (parts[k] ?? 0) > 0);
+            items = presentItems.length ? presentItems : allItems;
         }
         else if (rateLabels && !single) {
-            items = [{ text: `${labelA} ${수(d.a)}%`, color: colorA }, { text: `${labelB} ${수(d.b)}%`, color: colorB }];
+            items = [{ text: `${labelA} ${num(d.a)}%`, color: colorA }, { text: `${labelB} ${num(d.b)}%`, color: colorB }];
         }
         else if (rateLabels && d.rawB !== undefined) {
             items = [{ text: `${rateLabels.total} ${d.rawB}` }, { text: `${rateLabels.done} ${d.rawA ?? 0}`, color: colorA }];
         }
         else if (single) {
-            items = [{ text: `${labelA}: ${수(d.a)}`, color: colorA }];
+            items = [{ text: `${labelA}: ${num(d.a)}`, color: colorA }];
         }
         else {
-            items = [{ text: `${labelA}: ${수(d.a)}`, color: colorA }, { text: `${labelB}: ${수(d.b)}`, color: colorB }];
+            items = [{ text: `${labelA}: ${num(d.a)}`, color: colorA }, { text: `${labelB}: ${num(d.b)}`, color: colorB }];
         }
         return { title, items };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [stacked, grouped, seriesLabels, seriesColors, rateLabels, single, labelA, labelB, colorA, colorB, 기준]);
-    const 풍선열기 = useCallback((el, d, parts) => {
+    }, [stacked, grouped, seriesLabels, seriesColors, rateLabels, single, labelA, labelB, colorA, colorB, base]);
+    const openTooltip = useCallback((el, d, parts) => {
         const r = el.getBoundingClientRect();
-        const { title, items } = 풍선내용(d, parts);
+        const { title, items } = tooltipContent(d, parts);
         setTooltip({ rect: { left: r.left, top: r.top, right: r.right, bottom: r.bottom, width: r.width, height: r.height }, title, items });
-    }, [풍선내용]);
+    }, [tooltipContent]);
     /* 낭독기가 읽을 한 칸의 이름 — 풍선과 같은 글을 한 줄로 잇는다 */
-    const 막대이름 = useCallback((d, parts) => {
-        const { title, items } = 풍선내용(d, parts);
+    const barLabel = useCallback((d, parts) => {
+        const { title, items } = tooltipContent(d, parts);
         return [title, ...items.map(i => i.text)].filter(Boolean).join(', ');
-    }, [풍선내용]);
+    }, [tooltipContent]);
     /* 기준선 모드에서는 오름·내림이 뜻이라 양수에도 + 를 붙인다(부호가 없으면 툴팁만 보고 방향을 알 수 없다) */
-    const 부호붙이기 = (v) => (기준 != null && v > 기준 ? `+${v}` : `${v}`);
+    const withSign = (v) => (base != null && v > base ? `+${v}` : `${v}`);
     /* 떠 있는 동안 **스크롤하거나 막대 밖을 누르면** 닫는다 — 터치에서는 톡이 호환 mouseenter 로 띄우고 mouseleave 는 다른 곳을
        눌러야 와서, 스크롤해도 제자리에 떠 있었고 누를 수 없는 곳을 톡해도 안 닫혔다(말귀 훈련 현황·매니저 화면, 태블릿). */
-    const 떠있음 = tooltip != null;
+    const isOpen = tooltip != null;
     useEffect(() => {
-        if (!떠있음)
+        if (!isOpen)
             return;
         /* **안-모음: 닫기만 한다**(코어 자체 조사 2026-10-10에서 세어 보고 적음).
            굴림에 하는 일이 `setTooltip(null)` 하나뿐이라 레이아웃을 안 읽는다. 그리고 **미루면 안 된다** —
            풍선은 막대에 붙어 떠 있어서, 한 틀 미루면 막대에서 떨어진 풍선이 그만큼 더 허공에 남는다
            (Tooltip·useAnchoredMenu 의 `close` 길과 같은 가름: *자리 재기는 미뤄도 되고 닫기는 안 된다*). */
-        const 닫기 = () => setTooltip(null);
-        const 바깥누름 = (e) => {
+        const close = () => setTooltip(null);
+        const onOutsidePress = (e) => {
             const t = e.target;
             if (t && typeof t.closest === 'function' && t.closest('.manager-bar-chart-col'))
                 return;
             setTooltip(null);
         };
-        window.addEventListener('scroll', 닫기, true);
-        document.addEventListener('pointerdown', 바깥누름, true);
+        window.addEventListener('scroll', close, true);
+        document.addEventListener('pointerdown', onOutsidePress, true);
         return () => {
-            window.removeEventListener('scroll', 닫기, true);
-            document.removeEventListener('pointerdown', 바깥누름, true);
+            window.removeEventListener('scroll', close, true);
+            document.removeEventListener('pointerdown', onOutsidePress, true);
         };
-    }, [떠있음]);
-    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) => (
+    }, [isOpen]);
+    return (_jsxs("div", { className: "manager-bar-chart-wrap", style: groupGapStyle, 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, 기준 == null);
+                                    _jsx("div", { className: `manager-bar-chart-gridline${base != null && t === base ? ' manager-bar-chart-gridline--baseline' : ''}`, style: { top: tickPos(t) * h }, children: _jsx("span", { className: "manager-bar-chart-gridline__label caption-1", children: t }) }, i))), data.map((d, i) => {
+                                        const isFuture = isFutureBar(d, base == null);
                                         /* 판 높이를 넘지 않는다 — maxOverride(진행률 100)보다 큰 값이 와도 막대가 눈금 위로 삐져나가지 않게 */
                                         /* 기준선 모드는 반쪽(h/2)을 쓴다 — 0 선에서 위나 아래로 자란다 */
-                                        const 반 = h / 2;
-                                        const 높이 = (v) => (기준 != null
-                                            ? Math.min(반, (Math.abs(수(v) - 기준) / padded) * 반)
-                                            : Math.min(h, Math.max(0, (수(v) / padded) * h)));
-                                        const ha = isFuture ? 0 : 높이(d.a);
-                                        const hb = isFuture ? 0 : 높이(d.b);
-                                        const parts = (d.parts ?? []).map(수);
+                                        const half = h / 2;
+                                        const heightOf = (v) => (base != null
+                                            ? Math.min(half, (Math.abs(num(v) - base) / padded) * half)
+                                            : Math.min(h, Math.max(0, (num(v) / padded) * h)));
+                                        const ha = isFuture ? 0 : heightOf(d.a);
+                                        const hb = isFuture ? 0 : heightOf(d.b);
+                                        const parts = (d.parts ?? []).map(num);
                                         return (_jsx("div", { className: `manager-bar-chart-col${grouped && stacked ? ' manager-bar-chart-col--group' : ''}`, 
                                             /* **손가락은 그대로 둔다 — 걷으면 아이폰에서 풍선이 아예 안 뜬다.**
                                                말귀가 "`onClick` 이 없는데 손가락이 뜬다"(요청 (52))고 짚은 것이 맞다.
@@ -169,7 +169,7 @@ function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, b
                                                걷으면 데스크톱의 거짓 손가락 하나를 없애는 대신 **손가락으로 쓰는
                                                기기에서 수를 읽을 길이 통째로 사라진다.** 얹으면 값이 뜨니 아주 거짓도
                                                아니다. 자판 쪽은 아래 `focusableBars` 가 따로 연다. */
-                                            style: { cursor: isFuture ? 'default' : 'pointer' }, tabIndex: focusableBars && !isFuture ? 0 : undefined, role: focusableBars && !isFuture ? 'img' : undefined, "aria-label": focusableBars && !isFuture ? 막대이름(d, parts) : undefined, onMouseEnter: isFuture ? undefined : (e) => 풍선열기(e.currentTarget, d, parts), onFocus: isFuture || !focusableBars ? undefined : (e) => 풍선열기(e.currentTarget, d, parts), onBlur: focusableBars ? handleBarLeave : undefined, 
+                                            style: { cursor: isFuture ? 'default' : 'pointer' }, tabIndex: focusableBars && !isFuture ? 0 : undefined, role: focusableBars && !isFuture ? 'img' : undefined, "aria-label": focusableBars && !isFuture ? barLabel(d, parts) : undefined, onMouseEnter: isFuture ? undefined : (e) => openTooltip(e.currentTarget, d, parts), onFocus: isFuture || !focusableBars ? undefined : (e) => openTooltip(e.currentTarget, d, parts), onBlur: focusableBars ? handleBarLeave : undefined, 
                                             /* **수를 자판으로도 읽는다**(말귀 요청 (52), 2026-10-02). 전에는 값이
                                                얹어야 뜨는 풍선에만 있어, 자판·낭독기로는 막대 하나하나의 수를 읽을
                                                길이 **아예 없었다**. 이름은 풍선과 같은 글로 짓는다 — 보는 말과
@@ -180,26 +180,26 @@ function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, b
                                             /* 나란히 — 계열 k 는 늘 k 번째 자리. 0 이어도 자리를 두어 칸마다 같은 색이 같은 곳에 선다 */
                                             (seriesColors ?? []).map((c, k) => {
                                                 const v = parts[k] ?? 0;
-                                                if (기준 == null)
-                                                    return _jsx("div", { className: "manager-bar-chart-bar", style: { ...막대굵기, height: 높이(v), background: c } }, k);
+                                                if (base == null)
+                                                    return _jsx("div", { className: "manager-bar-chart-bar", style: { ...barWidthStyle, height: heightOf(v), background: c } }, k);
                                                 /* 0 선 위·아래 — 반쪽 둘을 쌓아 둔 자리(slot)에 그려, 나란히 선 칸의 폭 나눔은 그대로 둔다 */
-                                                const 아래 = 수(v) < 기준;
-                                                return (_jsxs("div", { className: "manager-bar-chart-slot", style: 막대굵기, children: [_jsx("div", { className: "manager-bar-chart-slot__half manager-bar-chart-slot__half--up", children: !아래 && _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: 아래 && _jsx("div", { className: "manager-bar-chart-bar manager-bar-chart-bar--full manager-bar-chart-bar--down", style: { height: 높이(v), background: c } }) })] }, k));
+                                                const below = num(v) < base;
+                                                return (_jsxs("div", { className: "manager-bar-chart-slot", style: barWidthStyle, children: [_jsx("div", { className: "manager-bar-chart-slot__half manager-bar-chart-slot__half--up", children: !below && _jsx("div", { className: "manager-bar-chart-bar manager-bar-chart-bar--full", style: { height: heightOf(v), background: c } }) }), _jsx("div", { className: "manager-bar-chart-slot__half manager-bar-chart-slot__half--down", children: below && _jsx("div", { className: "manager-bar-chart-bar manager-bar-chart-bar--full manager-bar-chart-bar--down", style: { height: heightOf(v), background: c } }) })] }, k));
                                             })) : stacked ? (
                                             // 계열별 stacked — 아래부터 위로 쌓고, 맨 위 segment만 상단 라운드
-                                            _jsx("div", { className: "manager-bar-chart-stack", style: 막대굵기, children: (() => {
+                                            _jsx("div", { className: "manager-bar-chart-stack", style: barWidthStyle, children: (() => {
                                                     const topK = parts.reduce((acc, v, k) => (v > 0 ? k : acc), -1); // 맨 위(최상단) 세그먼트
-                                                    let 남은 = h; // 쌓은 합도 판 높이를 넘지 않게 위 조각부터 깎는다
+                                                    let remaining = h; // 쌓은 합도 판 높이를 넘지 않게 위 조각부터 깎는다
                                                     return parts.map((v, k) => {
                                                         if (v <= 0)
                                                             return null;
-                                                        const 조각 = Math.min(남은, (v / padded) * h);
-                                                        남은 -= 조각;
-                                                        return _jsx("div", { className: "manager-bar-chart-stack-segment", style: { height: 조각, background: (seriesColors ?? [])[k], borderRadius: k === topK ? '6px 6px 0 0' : undefined } }, k);
+                                                        const piece = Math.min(remaining, (v / padded) * h);
+                                                        remaining -= piece;
+                                                        return _jsx("div", { className: "manager-bar-chart-stack-segment", style: { height: piece, background: (seriesColors ?? [])[k], borderRadius: k === topK ? '6px 6px 0 0' : undefined } }, k);
                                                     });
-                                                })() })) : (기준 != 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));
+                                                })() })) : (base != null ? (_jsx(_Fragment, { children: [{ v: num(d.a), c: colorA }, ...(single ? [] : [{ v: num(d.b), c: colorB }])].map(({ v, c }, k) => (_jsxs("div", { className: "manager-bar-chart-slot", style: barWidthStyle, children: [_jsx("div", { className: "manager-bar-chart-slot__half manager-bar-chart-slot__half--up", children: v >= base && _jsx("div", { className: "manager-bar-chart-bar manager-bar-chart-bar--full", style: { height: heightOf(v), background: c } }) }), _jsx("div", { className: "manager-bar-chart-slot__half manager-bar-chart-slot__half--down", children: v < base && _jsx("div", { className: "manager-bar-chart-bar manager-bar-chart-bar--full manager-bar-chart-bar--down", style: { height: heightOf(v), background: c } }) })] }, k))) })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "manager-bar-chart-bar", style: { ...barWidthStyle, height: ha, background: colorA } }), !single && _jsx("div", { className: "manager-bar-chart-bar", style: { ...barWidthStyle, height: hb, background: colorB } })] })))) }, i));
                                     })] }), _jsx("div", { className: "manager-bar-chart-x-axis", children: data.map((d, i) => {
-                                    const isFuture = 미래칸(d, 기준 == null); // 아직 도래하지 않은 날 — 글씨 흐리게
+                                    const isFuture = isFutureBar(d, base == 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 }))] }));
 }
@@ -220,20 +220,21 @@ export function BarChartControls({ control }) {
  * 주 보기의 막대·합계와 월 보기 완료율 주 막대가 **이 한 벌**을 쓴다 — 같은 주가 두 보기에서
  * 다른 수로 서지 않게(2026-09-12 말귀 검수: 주 보기 25% · 월 보기 38%).
  */
-function 주의날들(data, monday, now, 옛표시 = true) {
-    const 오늘 = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+function daysOfWeek(data, monday, now, showPast = true) {
+    const today = 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 != null && 미래칸(entry, 옛표시)) || dt > 오늘; // 미래 날 — 평균/막대에서 제외
+        const isFuture = (entry != null && isFutureBar(entry, showPast)) || dt > today; // 미래 날 — 평균/막대에서 제외
         return { dt, entry, isFuture };
     });
 }
 /** control(기간)에 따라 data를 막대 배열로 변환 */
-function barsFromControl(data, control, t, lang, 옛표시 = true) {
+/* **언어를 인자로 받지 않는다.** 주 라벨을 사전(`weekLabel`)이 쥐게 되자 `lang` 이 할 일이
+   없어졌다 — 가름이 한 자리로 모이면 그 자리로 흘러들던 인자도 함께 사라진다(2026-10-13). */
+function barsFromControl(data, control, t, showPast = true) {
     const { period, monthRange, weekRange, weekRanges, DOW } = control;
-    const isKo = lang?.startsWith('ko');
     const now = getTodayKstDate(); // 칸은 KST 달력 — 오늘·이번 주 표시도 KST 로
     const nowY = now.getFullYear(), nowM = now.getMonth() + 1, nowD = now.getDate();
     if (period === 'month') {
@@ -255,19 +256,19 @@ function barsFromControl(data, control, t, lang, 옛표시 = true) {
                 label = t('manager.chart.weekRange', { start: startDay, end: endTxt });
                 // 오늘이 이 주 범위(시작일~+6)에 들어가면 표시 — 마지막 주는 다음 달로 넘어가므로
                 // 날짜로 견준다(달이 같은지로 보면 9/3 이 8월 마지막 주 8/31~9/6 에서 빠진다)
-                const 오늘 = new Date(nowY, nowM - 1, nowD).getTime();
-                isToday = 오늘 >= new Date(year, month - 1, startDay).getTime() && 오늘 <= end.getTime();
+                const today = new Date(nowY, nowM - 1, nowD).getTime();
+                isToday = today >= new Date(year, month - 1, startDay).getTime() && today <= end.getTime();
                 // 시작일이 오늘 이후(또는 미래 달)면 아직 도래하지 않은 주 → 흐리게/막대 미표시
                 isFutureWeek = year > nowY || (year === nowY && (month > nowM || (month === nowM && startDay > nowD)));
             }
-            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 };
+            return { ...d, label, sublabel: weekLabel(t, n - 1), 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 daysOfWeek(data, monday, now, showPast).map(({ dt, entry, isFuture }) => {
         const dM = dt.getMonth() + 1, dD = dt.getDate(), dY = dt.getFullYear();
         const sameMonth = dM === opt.month && dY === opt.year;
         return {
@@ -295,44 +296,44 @@ const BAR_SIZE_PRESET = {
  * 원시 렌더링은 내부 BarChartCanvas가 담당한다.
  */
 export default function BarChart({ focusableBars, size = 'medium', barWidth, titleKey, titleLevel, 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 { t } = 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, baseline == null), [data, control, t, i18n.language, baseline]);
+    const rawBars = useMemo(() => barsFromControl(data, control, t, baseline == null), [data, control, t, baseline]);
     // 완료율 모드: a = 진행률(a/b×100). labelBKey 지정 시 b = 정답률(parts[0]/parts[1]×100) 2계열.
     //  월 보기의 주 막대는 **그 주 경과한 날의 일별 진행률 평균(미기록일 0%)** — 아래 total 과
     //  주 보기가 쓰는 같은 셈. 주 합 a/b 로 두면 기록 없는 날(b=0)이 빠져 같은 주가 두 보기에서
     //  다른 수로 선다(주 보기 25% · 월 보기 38%). 다음 달로 넘친 날도 그 주에 든다(주의날들).
     //  툴팁의 전체/완료(rawA·rawB)는 합 그대로 — 둘 다 사실이다.
-    const 나란히 = seriesMode === 'group' && !!series && series.length > 0;
+    const grouped = seriesMode === 'group' && !!series && series.length > 0;
     /* barGap 은 나란히 선 막대 **사이** 값이라 그 밖에서는 그릴 자리가 없다 — 조용히 먹으면 "간격을 줬는데 안 변한다" 가 된다 */
-    if (barGap != null && !나란히) {
+    if (barGap != null && !grouped) {
         devWarnOnce('bar-chart-bargap-without-group', "[BarChart] barGap 은 seriesMode='group' + series 에서만 쓰인다 — 그 밖에서는 아무 일도 하지 않는다.");
     }
     const bars = useMemo(() => {
         if (!rate)
             return rawBars;
-        const 월 = control.period === 'month' ? control.monthRange.match(/^(\d+)년 (\d+)월$/) : null;
+        const monthMatch = control.period === 'month' ? control.monthRange.match(/^(\d+)년 (\d+)월$/) : null;
         const now = getTodayKstDate();
-        const 계열수 = series?.length ?? 0;
+        const seriesCount = series?.length ?? 0;
         /** 계열 k 의 비율과 원래 수 — rateAgg 를 계열마다 따로. 날들은 막대 하나가 품는 경과한 날(주 보기는 그 하루) */
-        const 계열비율 = (날들) => {
+        const seriesRatio = (days) => {
             const pct = [], ra = [], rb = [];
-            for (let k = 0; k < 계열수; k++) {
-                let sa = 0, sb = 0, 비율합 = 0;
-                for (const 날 of 날들) {
-                    const x = 수(날.a[k]), y = 수(날.b[k]);
+            for (let k = 0; k < seriesCount; k++) {
+                let sa = 0, sb = 0, ratioSum = 0;
+                for (const day of days) {
+                    const x = num(day.a[k]), y = num(day.b[k]);
                     if (y <= 0)
                         continue; // 그 계열을 안 잰 날 — 분자가 남아 있어도 뺀다(단일 계열 weighted 와 같은 규칙)
                     sa += x;
                     sb += y;
-                    비율합 += (x / y) * 100;
+                    ratioSum += (x / y) * 100;
                 }
                 pct.push(rateAgg === 'weighted'
                     ? (sb > 0 ? Math.round((sa / sb) * 100) : 0) // 잰 날만 — Σa/Σb
-                    : (날들.length ? Math.round(비율합 / 날들.length) : 0)); // 안 잰 날은 0% 로 평균
+                    : (days.length ? Math.round(ratioSum / days.length) : 0)); // 안 잰 날은 0% 로 평균
                 ra.push(sa);
                 rb.push(sb);
             }
@@ -340,13 +341,13 @@ export default function BarChart({ focusableBars, size = 'medium', barWidth, tit
         };
         return rawBars.map((d, i) => {
             let a = d.a === -1 ? -1 : (d.b > 0 ? Math.round((d.a / d.b) * 100) : 0);
-            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 (monthMatch && !isFutureBar(d)) {
+                const y = Number(monthMatch[1]), m0 = Number(monthMatch[2]) - 1;
+                const pastDays = daysOfWeek(data, new Date(y, m0, firstMondayOfMonth(y, m0) + i * 7), now).filter(x => !x.isFuture);
                 if (rateAgg === 'weighted') {
                     /* 잰 것이 있는 날만 — 안 한 날을 0% 로 섞으면 "맞힌 비율" 이 내려간다(정답률) */
                     let sa = 0, sb = 0;
-                    for (const { entry: e } of 지난날)
+                    for (const { entry: e } of pastDays)
                         if (e && e.b > 0) {
                             sa += e.a;
                             sb += e.b;
@@ -354,35 +355,35 @@ export default function BarChart({ focusableBars, size = 'medium', barWidth, tit
                     a = sb > 0 ? Math.round((sa / sb) * 100) : 0;
                 }
                 else {
-                    a = 지난날.length
-                        ? Math.round(지난날.reduce((s, { entry: e }) => s + (e && e.b > 0 ? (e.a / e.b) * 100 : 0), 0) / 지난날.length)
+                    a = pastDays.length
+                        ? Math.round(pastDays.reduce((s, { entry: e }) => s + (e && e.b > 0 ? (e.a / e.b) * 100 : 0), 0) / pastDays.length)
                         : 0;
                 }
             }
-            let 계열 = null;
-            if (나란히 && !미래칸(d)) {
-                let 날들;
-                if (월) {
-                    const y = Number(월[1]), m0 = Number(월[2]) - 1;
-                    날들 = 주의날들(data, new Date(y, m0, firstMondayOfMonth(y, m0) + i * 7), now)
+            let seriesParts = null;
+            if (grouped && !isFutureBar(d)) {
+                let days;
+                if (monthMatch) {
+                    const y = Number(monthMatch[1]), m0 = Number(monthMatch[2]) - 1;
+                    days = daysOfWeek(data, new Date(y, m0, firstMondayOfMonth(y, m0) + i * 7), now)
                         .filter(x => !x.isFuture)
                         .map(({ entry: e }) => ({ a: e?.parts ?? [], b: e?.partsB ?? [] }));
                 }
                 else {
-                    날들 = [{ a: d.parts ?? [], b: d.partsB ?? [] }];
+                    days = [{ a: d.parts ?? [], b: d.partsB ?? [] }];
                 }
-                const r = 계열비율(날들);
-                계열 = { parts: r.pct, rawParts: r.ra, rawPartsB: r.rb };
+                const r = seriesRatio(days);
+                seriesParts = { parts: r.pct, rawParts: r.ra, rawPartsB: r.rb };
             }
             return {
                 ...d,
                 a,
                 b: d.a === -1 ? 0 : (labelBKey && d.parts && d.parts[1] > 0 ? Math.round((d.parts[0] / d.parts[1]) * 100) : 0),
                 rawA: d.a === -1 ? -1 : d.a, rawB: d.b,
-                ...(계열 ?? {}),
+                ...(seriesParts ?? {}),
             };
         });
-    }, [rawBars, rate, rateAgg, labelBKey, control.period, control.monthRange, data, 나란히, series?.length]);
+    }, [rawBars, rate, rateAgg, labelBKey, control.period, control.monthRange, data, grouped, series?.length]);
     // 합계 — 완료율 모드는 주/월 모두 "경과한 모든 날의 일별 진행률 평균"(미기록일=0% 포함)으로 통일.
     //  주: 선택 주의 일별, 월: 선택 월의 일별(주별 집계가 아니라 일 단위라 주↔월 일관성 유지). 미래(a=-1)만 제외.
     const total = useMemo(() => {
@@ -410,13 +411,13 @@ export default function BarChart({ focusableBars, size = 'medium', barWidth, tit
         /* 월 보기 합계는 **그 달 날짜만** — 주 막대는 월요일 시작 7일이라 달 경계를 넘는다(마지막 주는 다음 달 날, 첫 월요일 앞 날은
            앞 달 막대). 막대 합으로 내면 8월 합계에 9/1~9/6 이 들고 8/1~8/2 가 빠져, 상세 목록(달력 달)의 건수와 어긋났다.
            주 보기는 그 주 막대의 합 그대로. */
-        const 합칠것 = control.period === 'month' ? (data[control.monthRange]?.daily ?? []) : bars;
+        const toMerge = control.period === 'month' ? (data[control.monthRange]?.daily ?? []) : bars;
         /* 기준선 모드는 부호를 살려 더한다 — 오르내림의 **순변화** 가 합계다(양수만 더하면 내린 주가 사라진다).
            미래 표시(a === -1)는 여기서도 뺀다 — 기준선 모드에서도 -1 은 '아직 오지 않은 칸' 이다(실제 -1 이 나올 수 있으면 그 칸을 자료에서 뺀다). */
         if (baseline != null) {
-            return 합칠것.reduce((s, d) => s + (미래칸(d, false) ? 0 : 수(d.a) + (labelBKey ? 수(d.b) : 0)), 0);
+            return toMerge.reduce((s, d) => s + (isFutureBar(d, false) ? 0 : num(d.a) + (labelBKey ? num(d.b) : 0)), 0);
         }
-        return 합칠것.reduce((s, d) => s + (d.a > 0 ? d.a : 0) + (labelBKey && d.b > 0 ? d.b : 0), 0);
+        return toMerge.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]);
     const legendItems = series && series.length > 0
         ? series.map(s => ({ color: s.color, label: s.label }))
@@ -441,13 +442,13 @@ export default function BarChart({ focusableBars, size = 'medium', barWidth, tit
      * 이름은 바깥에서 더 받지 않는다 — **이미 `titleKey` 를 받고 있다.** 제목이 없을 때만 예전
      * 글자로 떨어뜨려 쓰던 자리가 안 깨지게 한다.
      */
-    const 카드이름 = titleKey ? t(titleKey) : '';
-    const 상세이름 = 카드이름
-        ? t('trainingStatus.detailFor', { name: 카드이름, defaultValue: '{{name}} 상세보기' })
+    const cardTitle = titleKey ? t(titleKey) : '';
+    const detailTitle = cardTitle
+        ? t('trainingStatus.detailFor', { name: cardTitle, defaultValue: '{{name}} 상세보기' })
         : t('trainingStatus.detail', '상세보기');
     return (_jsx(ChartSection, { className: sectionClassName, inGrid: inGrid, icon: icon, disc: disc, onClick: onClick, ariaLabel: cardAriaLabel, tooltip: cardTooltip, headSegment: headSegment, 
         /* 좁아 고르개가 '⋯' 로 접히면 상세보기도 그 메뉴로 들어간다 — 머리에 단추 둘이 남지 않게 */
-        headMenuItems: onDetail ? [{ label: 상세이름, icon: 'list', onClick: onDetail, closeOnSelect: true }] : undefined, title: t(titleKey), titleLevel: titleLevel, 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: 상세이름, showTooltipInfo: 상세이름, onClick: onDetail }) }))] }), subRow: _jsxs(_Fragment, { children: [showTotal ? ((rate || avgMode || (!!totalLabelKey && !!totalFormat)) ? (
+        headMenuItems: onDetail ? [{ label: detailTitle, icon: 'list', onClick: onDetail, closeOnSelect: true }] : undefined, title: t(titleKey), titleLevel: titleLevel, 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: detailTitle, showTooltipInfo: detailTitle, 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로 분리
@@ -460,5 +461,5 @@ export default function BarChart({ focusableBars, size = 'medium', barWidth, tit
            → 막대 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, { focusableBars: focusableBars, 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("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, { focusableBars: focusableBars, 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: grouped })) }));
 }

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

@@ -38,23 +38,23 @@ export default function BottomNav({ items = [], activeKey, onChange, appMode, on
         const root = rootRef.current;
         if (!root)
             return;
-        const 재기 = () => {
+        const measure = () => {
             const cs = typeof getComputedStyle === 'function' ? getComputedStyle(root) : null;
-            const 안쪽 = root.clientWidth - (parseFloat(cs?.paddingLeft ?? '') || 0) - (parseFloat(cs?.paddingRight ?? '') || 0);
+            const innerWidth = root.clientWidth - (parseFloat(cs?.paddingLeft ?? '') || 0) - (parseFloat(cs?.paddingRight ?? '') || 0);
             // 왼쪽 묶음은 항목 수와 무관하게 늘 같은 폭이다(모드 전환을 안 쓰면 아예 없다)
-            const 왼 = root.querySelector('.bottom-nav__left');
-            const 왼구분선 = 왼?.nextElementSibling;
-            const 왼폭 = (왼?.offsetWidth ?? 0)
-                + (왼 && 왼구분선?.classList.contains('bottom-nav__divider') ? 왼구분선.offsetWidth : 0);
-            setAvail(Math.max(0, 안쪽 - 왼폭));
+            const leftEl = root.querySelector('.bottom-nav__left');
+            const leftDivider = leftEl?.nextElementSibling;
+            const leftWidth = (leftEl?.offsetWidth ?? 0)
+                + (leftEl && leftDivider?.classList.contains('bottom-nav__divider') ? leftDivider.offsetWidth : 0);
+            setAvail(Math.max(0, innerWidth - leftWidth));
         };
-        재기();
+        measure();
         // ResizeObserver 가 없는 환경(구형 브라우저·SSR·테스트 러너)에서는 생성자 호출이
         // 그대로 던져 렌더가 통째로 깨진다. 위에서 초기값은 이미 쟀으므로 추적만 포기한다
         // (Popup·CrosswordGame·Tooltip 과 같은 처리).
         if (typeof ResizeObserver === 'undefined')
             return;
-        const ro = new ResizeObserver(재기);
+        const ro = new ResizeObserver(measure);
         ro.observe(root);
         /* **왼쪽 묶음도 본다**(말귀 요청 (71), 2026-10-02).
            `avail` 은 `바 안쪽 - 왼쪽 묶음` 이라 **왼쪽이 바뀌면 값이 바뀐다.** 그런데 보개는
@@ -65,21 +65,21 @@ export default function BottomNav({ items = [], activeKey, onChange, appMode, on
            없고, `/manager` 에서는 지금 보고 있는 화면의 아이콘이 반쪽이었다).
            놀이터에서 바 폭은 그대로 두고 왼쪽만 52 → 160px 로 넓혀 봤더니 **칸 수가 그대로**였다
            — 보개가 그 변화를 안 본다는 뜻이다. */
-        const 왼 = root.querySelector('.bottom-nav__left');
-        if (왼)
-            ro.observe(왼);
+        const leftEl = root.querySelector('.bottom-nav__left');
+        if (leftEl)
+            ro.observe(leftEl);
         return () => ro.disconnect();
         /* 왼쪽 묶음은 `onAppModeChange` 가 있을 때만 선다 — 그 유무가 바뀌면 **볼 대상이 바뀌므로**
            보개를 다시 건다. 항목 수는 `avail` 에 안 들어가므로(그게 이 셈의 요점이다) 안 넣는다. */
     }, [onAppModeChange]);
     const MORE_W = BTN_SIZE + 1;
     /** 폭 w 에 들어가는 칸 수 — n칸은 n*52 + (n-1)*10 을 쓰므로 n <= (w + 10) / 62 */
-    const 칸수 = (w) => Math.max(0, Math.floor((w + BTN_GAP) / (BTN_SIZE + BTN_GAP)));
-    const 다들어감 = itemsLen * (BTN_SIZE + BTN_GAP) - BTN_GAP <= avail;
+    const fitCount = (w) => Math.max(0, Math.floor((w + BTN_GAP) / (BTN_SIZE + BTN_GAP)));
+    const allFit = itemsLen * (BTN_SIZE + BTN_GAP) - BTN_GAP <= avail;
     const n = avail <= 0 ? itemsLen
-        : (moreItems.length === 0 && 다들어감) ? itemsLen
+        : (moreItems.length === 0 && allFit) ? itemsLen
             // "…" 가 설 자리를 뺀 폭으로 센다 — 유틸이 있으면 "…" 는 늘 선다
-            : Math.min(itemsLen, 칸수(avail - MORE_W));
+            : Math.min(itemsLen, fitCount(avail - MORE_W));
     const overflow = avail > 0 && n < itemsLen;
     const maxVisible = overflow ? n : itemsLen;
     const visibleItems = items.slice(0, maxVisible);
@@ -106,7 +106,7 @@ export default function BottomNav({ items = [], activeKey, onChange, appMode, on
        넘친 항목·유틸 항목의 배지를 **합한** 것이라 그 단추의 수가 아니다 — `더보기, 3개` 는
        "더보기에 3개가 들어 있다" 로 읽히는데, 안에 든 항목 수와도 다르다. `activeMore` 가
        있을 때는 더 어긋났다: `설정, 3개` 의 3 은 알림의 것이었다. */
-    const 안에든수 = useCallback((label, count) => count > 0 ? t('nav.badgeInsideLabel', { label, count, defaultValue: '{{label}}, 안에 알림 {{count}}개' }) : label, [t]);
+    const visibleCount = useCallback((label, count) => count > 0 ? t('nav.badgeInsideLabel', { label, count, defaultValue: '{{label}}, 안에 알림 {{count}}개' }) : label, [t]);
     const handleModeChange = useCallback(() => onAppModeChange?.(nextMode), [onAppModeChange, nextMode]);
     // 넘친 nav 항목 또는 유틸 항목이 현재 활성 상태면 … 버튼에 그 아이콘/선택표시를 반영
     const activeMore = useMemo(() => hiddenItems.find(it => !!it.key && it.key === activeKey) ?? moreItems.find(it => it.selected || (it.key && it.key === activeKey)), [hiddenItems, activeKey, moreItems]);
@@ -154,5 +154,5 @@ export default function BottomNav({ items = [], activeKey, onChange, appMode, on
                                     onChange?.(it.key);
                                     scrollNavTargetToTop(scrollContainer, 'BottomNav');
                                 } } }), count > 0 && (_jsx("span", { "aria-hidden": "true", children: _jsx(Badge, { type: "dot", position: "top-right", number: Math.min(count, 99), size: 24 }) }))] }, it.key ?? `__slot-${i}`));
-                }) }), showMore && (_jsxs(_Fragment, { children: [_jsx("div", { className: "bottom-nav__divider", "aria-hidden": "true" }), _jsx("div", { className: "bottom-nav__right", children: _jsxs("div", { ref: moreRef, className: "bottom-nav__slot", children: [_jsx(Button, { htmlType: "button", size: 52, type: "dot", icon: activeMore?.icon ?? 'ellipsis', ariaLabel: 안에든수(activeMore?.label ?? t('nav.more', '더보기'), moreBadge), selected: !!activeMore, className: "bottom-nav-item", onClick: handleToggleMore, "aria-expanded": moreOpen, "aria-controls": moreOpen ? moreMenuId : undefined }), moreBadge > 0 && (_jsx("span", { "aria-hidden": "true", children: _jsx(Badge, { type: "dot", position: "top-right", number: Math.min(moreBadge, 99), size: 24 }) })), moreOpen && createPortal(_jsx("div", { id: moreMenuId, role: "group", "aria-label": t('nav.moreMenu', '더보기 메뉴'), className: "tooltip-content", style: menuStyle, ref: menuRef, children: _jsx(MenuTooltip, { columns: moreColumns, onClose: handleCloseMore }) }), document.body)] }) })] }))] }));
+                }) }), showMore && (_jsxs(_Fragment, { children: [_jsx("div", { className: "bottom-nav__divider", "aria-hidden": "true" }), _jsx("div", { className: "bottom-nav__right", children: _jsxs("div", { ref: moreRef, className: "bottom-nav__slot", children: [_jsx(Button, { htmlType: "button", size: 52, type: "dot", icon: activeMore?.icon ?? 'ellipsis', ariaLabel: visibleCount(activeMore?.label ?? t('nav.more', '더보기'), moreBadge), selected: !!activeMore, className: "bottom-nav-item", onClick: handleToggleMore, "aria-expanded": moreOpen, "aria-controls": moreOpen ? moreMenuId : undefined }), moreBadge > 0 && (_jsx("span", { "aria-hidden": "true", children: _jsx(Badge, { type: "dot", position: "top-right", number: Math.min(moreBadge, 99), size: 24 }) })), moreOpen && createPortal(_jsx("div", { id: moreMenuId, role: "group", "aria-label": t('nav.moreMenu', '더보기 메뉴'), className: "tooltip-content", style: menuStyle, ref: menuRef, children: _jsx(MenuTooltip, { columns: moreColumns, onClose: handleCloseMore }) }), document.body)] }) })] }))] }));
 }