@ihabdevteam/core 0.321.0 → 0.323.0

package/dist/packages/core/src/components/Report/ReportDocument.js

@@ -55,19 +55,19 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
        넘치는데, 이 상자 안에는 포커스 갈 곳이 하나도 없다 — 그러면 키보드만 쓰는
        사람은 오른쪽 절반을 **영영 못 본다**(WCAG 2.1.1). 실측: 겉 560px 에 안 794px.
        늘 `tabIndex=0` 을 걸면 안 넘칠 때도 빈 탭 자리가 하나 생기므로 재서 건다. */
-    const [넘침, set넘침] = useState(false);
+    const [overflowing, setOverflowing] = useState(false);
     useEffect(() => {
         const el = rootRef.current;
         if (!el)
             return;
-        const 재자 = () => set넘침(el.scrollWidth > el.clientWidth + 1);
-        재자();
+        const measure = () => setOverflowing(el.scrollWidth > el.clientWidth + 1);
+        measure();
         // ResizeObserver 가 없는 환경(구형 브라우저·SSR·테스트 러너)에서는 생성자 호출이
         // 그대로 던져 렌더가 통째로 깨진다. 위에서 한 번은 이미 쟀으므로 추적만 포기한다
         // (BottomNav·WordTable 과 같은 처리).
         if (typeof ResizeObserver === 'undefined')
             return;
-        const ro = new ResizeObserver(재자);
+        const ro = new ResizeObserver(measure);
         ro.observe(el);
         return () => ro.disconnect();
     }, [measured]);
@@ -81,36 +81,36 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
     const shape = blocks.map((b) => `${b.id}\u0000${b.section ?? ''}\u0000${b.group ?? ''}`).join('\u0001');
     const pages = measured && measured.shape === shape ? measured.pages : null;
     /* 자(ruler)의 높이 — 0 에서 크기가 생기면(숨겨져 있다 보이게 됨) 다시 잰다 */
-    const [자크기, set자크기] = useState(0);
+    const [rulerSize, setRulerSize] = useState(0);
     useEffect(() => {
         const ruler = rulerRef.current;
         if (!ruler || typeof ResizeObserver === 'undefined')
             return;
-        const ro = new ResizeObserver(() => set자크기(ruler.offsetHeight));
+        const ro = new ResizeObserver(() => setRulerSize(ruler.offsetHeight));
         ro.observe(ruler);
         return () => ro.disconnect();
     }, []);
     /* **내용 높이가 바뀌면 다시 잰다** — 짜임(id·section·group)이 같아도 메모가 길어지거나 글꼴·이미지가 늦게 와 블록 높이가 달라지면
        예전 나눔 그대로 장이 넘쳤다(소리방향성은 id 에 메모 길이를 넣어 짜임을 바꾸는 우회를 썼다 — 그 길도 그대로 된다).
        재기 사본 블록마다 ResizeObserver 를 걸고, 여러 번 울려도 다시 나눔은 rAF 한 번으로 모은다. 없는 환경에서는 지금처럼. */
-    const [다시재기, set다시재기] = useState(0);
+    const [remeasureTick, setRemeasureTick] = useState(0);
     useEffect(() => {
         const el = measureRef.current;
         if (!el || typeof ResizeObserver === 'undefined')
             return;
-        let 틀 = null;
-        const 미루기 = typeof requestAnimationFrame === 'function'
+        let frameId = null;
+        const defer = typeof requestAnimationFrame === 'function'
             ? (f) => requestAnimationFrame(f)
             : (f) => setTimeout(f, 16);
-        const 거두기 = typeof cancelAnimationFrame === 'function' ? cancelAnimationFrame : (id) => clearTimeout(id);
+        const undefer = typeof cancelAnimationFrame === 'function' ? cancelAnimationFrame : (id) => clearTimeout(id);
         const ro = new ResizeObserver(() => {
-            if (틀 != null)
+            if (frameId != null)
                 return;
-            틀 = 미루기(() => { 틀 = null; set다시재기((n) => n + 1); });
+            frameId = defer(() => { frameId = null; setRemeasureTick((n) => n + 1); });
         });
         Array.from(el.children).forEach((c) => ro.observe(c));
-        return () => { ro.disconnect(); if (틀 != null)
-            거두기(틀); };
+        return () => { ro.disconnect(); if (frameId != null)
+            undefer(frameId); };
     }, [shape]);
     useLayoutEffect(() => {
         const el = measureRef.current;
@@ -124,13 +124,13 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
         /* 높이는 **소수 그대로** 잰다 — offsetHeight 는 정수로 반올림해, 소수 높이 블록이 모이면 반올림 합은 예산과 같은데 실제 장은
            종이보다 3px 넘쳤고(mm 규격의 자 1016.69px 는 1017 로 올림) 인쇄에서는 그 1px 로 쪽이 하나 더 생겼다(Chromium PDF 확인).
            rect 가 0 인 환경(레이아웃 없는 시험)에서는 offsetHeight 로 물러선다. */
-        const 높이 = (node) => node.getBoundingClientRect().height || node.offsetHeight;
+        const heightOf = (node) => node.getBoundingClientRect().height || node.offsetHeight;
         const chromeOf = new Map();
         chromeRef.current?.querySelectorAll('[data-chrome-section]').forEach((node) => {
-            chromeOf.set(node.dataset.chromeSection ?? '', 높이(node));
+            chromeOf.set(node.dataset.chromeSection ?? '', heightOf(node));
         });
-        const budgetFor = (section) => 높이(ruler) - (chromeOf.get(section ?? '') ?? 0);
-        const heights = Array.from(el.children).map((c) => 높이(c));
+        const budgetFor = (section) => heightOf(ruler) - (chromeOf.get(section ?? '') ?? 0);
+        const heights = Array.from(el.children).map((c) => heightOf(c));
         // 이웃한 같은 group 을 한 덩어리로 묶는다.
         const groups = [];
         blocks.forEach((b, i) => {
@@ -179,11 +179,11 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
         });
         flush();
         /* 같은 나눔이면 상태를 그대로 둔다 — 다시 재기(ResizeObserver 첫 울림 등)마다 새 객체로 렌더가 한 번 더 도는 것을 막는다 */
-        setMeasured((앞) => (앞 && 앞.shape === shape && JSON.stringify(앞.pages) === JSON.stringify(packed) ? 앞 : { shape, pages: packed }));
+        setMeasured((prev) => (prev && prev.shape === shape && JSON.stringify(prev.pages) === JSON.stringify(packed) ? prev : { shape, pages: packed }));
         // blocks 는 위 shape 로 대신 본다.
         // eslint-disable-next-line react-hooks/exhaustive-deps
         // 장 규격이 바뀌면 글이 다시 흘러 블록 높이가 달라진다 — 자(세로) 높이는 그대로라 자크기만으로는 다시 재지 않아 장이 넘쳤다
-    }, [shape, 자크기, pageWidth, pageHeight, margin, 다시재기]);
+    }, [shape, rulerSize, pageWidth, pageHeight, margin, remeasureTick]);
     /* 번들러마다 SVG import 결과가 다르다 — Vite 는 문자열, Next 는 `{ src }` 객체다.
        문자열만 보면 Next 앱에서 fallback 경로(`/logo/...`)로 떨어져 404 가 난다
        (kscan 결과지의 바닥 로고가 실제로 깨졌다). 둘 다 받는다. */
@@ -208,7 +208,7 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
     return (_jsxs("div", { ref: rootRef, className: cx('report-doc', className), style: vars, 
         /* 굴릴 것이 있을 때만 포커스를 받는다. 이름 없이 포커스만 주면 낭독기가
            문서 전체를 읽어 버리므로 역할과 이름을 함께 준다. */
-        tabIndex: 넘침 ? 0 : undefined, role: 넘침 ? 'group' : undefined, "aria-label": 넘침 ? t('report.previewRegion', '보고서 미리보기') : undefined, children: [_jsxs("div", { className: "report-doc__measure", "aria-hidden": true, children: [_jsx("div", { ref: rulerRef, className: "report-doc__ruler" }), _jsx("div", { ref: chromeRef, children: chromeSections.map((sec) => {
+        tabIndex: overflowing ? 0 : undefined, role: overflowing ? 'group' : undefined, "aria-label": overflowing ? t('report.previewRegion', '보고서 미리보기') : undefined, children: [_jsxs("div", { className: "report-doc__measure", "aria-hidden": true, children: [_jsx("div", { ref: rulerRef, className: "report-doc__ruler" }), _jsx("div", { ref: chromeRef, children: chromeSections.map((sec) => {
                             const c = chrome(1, 1, sec || undefined);
                             return _jsxs("div", { "data-chrome-section": sec, children: [c.header, c.footer] }, sec);
                         }) }), _jsx("div", { ref: measureRef, className: "report-doc__measure-blocks", children: blocks.map((b) => (_jsx("div", { children: b.content }, b.id))) })] }), pages && (_jsx("div", { className: "report-doc__pages", children: pages.map((idxs, p) => {

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

@@ -13,7 +13,7 @@ const RING_SIZE_PRESET = {
 /** 원시 링 렌더링 — 도넛 링 하나만 그린다(헤더/legend 없음) */
 /** 비율 → 퍼센트 정수. **다 채우기 전에는 100 을 내지 않는다** — 반올림하면 199/200 이 '100%' 인데 링 끝은 비고 범례는
  *  '미완료 1건' 이었다(말귀 숙제 완료율). 같은 까닭으로 0 초과면 0 을 내지 않는다. */
-function 퍼센트(ratio) {
+function toPercent(ratio) {
     if (!Number.isFinite(ratio) || ratio <= 0)
         return 0;
     if (ratio >= 1)
@@ -43,7 +43,7 @@ function RingChartCanvas({ done, total, segments, color = 'var(--color-main)', s
     const pct = (total ?? 0) > 0 ? Math.min((done ?? 0) / total, 1) : 0;
     const filled = circumference * pct;
     const gap = circumference - filled;
-    return (_jsxs("div", { className: "ring-chart", style: { width: dim, height: dim }, children: [_jsxs("svg", { width: dim, height: dim, viewBox: `0 0 ${dim} ${dim}`, "aria-hidden": "true", children: [_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "var(--color-whiteLine)", strokeWidth: stroke }), pct > 0 && (_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: color, strokeWidth: stroke, strokeDasharray: `${filled} ${gap}`, strokeLinecap: pct < 0.02 || pct > 0.98 ? 'butt' : 'round', transform: `rotate(-90 ${center} ${center})` }))] }), !hideCenter && (_jsxs("div", { className: `ring-chart__center${hideLabel ? '' : ` ${dim <= 96 ? 'ring-chart__center--small' : size === 'medium' ? 'ring-chart__center--medium' : 'ring-chart__center--large'}`}`, children: [_jsx("span", { className: `ring-chart__pct ${dim <= 96 ? 'h2' : 'h1'}`, children: 퍼센트(pct) }), !hideLabel && (_jsx("span", { className: `ring-chart__label ${dim <= 96 ? 'caption-2' : 'caption-1'}${dim <= 96 || size === 'medium' ? ' ring-chart__label--tight' : ''}`, children: label }))] }))] }));
+    return (_jsxs("div", { className: "ring-chart", style: { width: dim, height: dim }, children: [_jsxs("svg", { width: dim, height: dim, viewBox: `0 0 ${dim} ${dim}`, "aria-hidden": "true", children: [_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "var(--color-whiteLine)", strokeWidth: stroke }), pct > 0 && (_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: color, strokeWidth: stroke, strokeDasharray: `${filled} ${gap}`, strokeLinecap: pct < 0.02 || pct > 0.98 ? 'butt' : 'round', transform: `rotate(-90 ${center} ${center})` }))] }), !hideCenter && (_jsxs("div", { className: `ring-chart__center${hideLabel ? '' : ` ${dim <= 96 ? 'ring-chart__center--small' : size === 'medium' ? 'ring-chart__center--medium' : 'ring-chart__center--large'}`}`, children: [_jsx("span", { className: `ring-chart__pct ${dim <= 96 ? 'h2' : 'h1'}`, children: toPercent(pct) }), !hideLabel && (_jsx("span", { className: `ring-chart__label ${dim <= 96 ? 'caption-2' : 'caption-1'}${dim <= 96 || size === 'medium' ? ' ring-chart__label--tight' : ''}`, children: label }))] }))] }));
 }
 /**
  * 도넛 링 차트 — 전체 대비 완료 비율을 원형 호로 표현.
@@ -55,11 +55,11 @@ export default function RingChart({ titleKey, titleLevel, headRight, icon, showT
     const { t } = useTranslation();
     if (!titleKey)
         return _jsx(RingChartCanvas, { ...ringProps });
-    const pct = (ringProps.total ?? 0) > 0 ? 퍼센트(Math.min((ringProps.done ?? 0) / ringProps.total, 1)) : 0;
+    const pct = (ringProps.total ?? 0) > 0 ? toPercent(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;
+    const loaderSize = 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' : '']
@@ -70,5 +70,5 @@ export default function RingChart({ titleKey, titleLevel, headRight, icon, showT
         /* 링도 같은 병이 있었다 — 기다림 상자 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 }) })) }));
+        _jsx("div", { className: "ring-chart-section-body ring-chart-section-body--offset", children: _jsx("div", { className: "ring-chart ring-chart--loading", style: { width: loaderSize, height: loaderSize }, "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/SectionHeadFloat.js

@@ -25,30 +25,30 @@ import './SectionHeadFloat.css';
  */
 export default function SectionHeadFloat({ children, className }) {
     const ref = useRef(null);
-    const [부모, set부모] = useState(null);
-    useEffect(() => { set부모(ref.current?.parentElement ?? null); }, []);
+    const [parent, setParent] = useState(null);
+    useEffect(() => { setParent(ref.current?.parentElement ?? null); }, []);
     useEffect(() => {
         const el = ref.current;
-        if (!el || !부모)
+        if (!el || !parent)
             return;
         /* 흐름으로 돌아간 좁은 화면에서는 비울 자리가 없다 — 그때 폭을 적어 두면 제목이 공연히 좁아진다.
            `position` 을 보고 가른다(문턱을 두 군데 적지 않으려고 — CSS 가 정본이다). */
-        const 적기 = () => {
-            const 띄웠나 = typeof window !== 'undefined' && window.getComputedStyle(el).position === 'absolute';
-            const w = 띄웠나 ? Math.ceil(el.getBoundingClientRect().width) : 0;
+        const apply = () => {
+            const isFloating = typeof window !== 'undefined' && window.getComputedStyle(el).position === 'absolute';
+            const w = isFloating ? Math.ceil(el.getBoundingClientRect().width) : 0;
             if (w > 0)
-                부모.style.setProperty('--section-head-float-w', `${w}px`);
+                parent.style.setProperty('--section-head-float-w', `${w}px`);
             else
-                부모.style.removeProperty('--section-head-float-w');
+                parent.style.removeProperty('--section-head-float-w');
         };
-        적기();
+        apply();
         if (typeof ResizeObserver === 'undefined')
-            return () => { 부모.style.removeProperty('--section-head-float-w'); };
+            return () => { parent.style.removeProperty('--section-head-float-w'); };
         /* 줄 자신과 카드를 함께 본다 — 단추 글자가 바뀌면 줄이, 창이 좁아지면 카드가 먼저 움직인다 */
-        const 지켜보기 = new ResizeObserver(() => 적기());
-        지켜보기.observe(el);
-        지켜보기.observe(부모);
-        return () => { 지켜보기.disconnect(); 부모.style.removeProperty('--section-head-float-w'); };
-    }, [부모, children]);
+        const observer = new ResizeObserver(() => apply());
+        observer.observe(el);
+        observer.observe(parent);
+        return () => { observer.disconnect(); parent.style.removeProperty('--section-head-float-w'); };
+    }, [parent, children]);
     return _jsx("div", { ref: ref, className: cx('section-head-float', className), children: children });
 }

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

@@ -18,7 +18,7 @@ import { devWarnOnce, isDev } from '../utils/devWarn';
  * 멀쩡하다) 콘솔이 울기만 하고, 정작 부딪힌 자리가 묻힌다. 둘 이상 **함께 서 있을 때만**
  * 알린다. 열쇠에 보기 이름을 넣어, 서로 다른 부딪힘은 각각 한 번씩 알린다.
  */
-const 이름없이선것 = new Map();
+const unlabeledGroups = new Map();
 /** @public */
 export default function SegmentedControl(props) {
     const { t } = useTranslation();
@@ -31,69 +31,69 @@ export default function SegmentedControl(props) {
        아무 일도 안 일어난다. 실측으로 칸 수만큼 Tab 자리였고 ArrowRight 는 죽어 있었다.
        라디오에서는 **고름이 포커스를 따라간다** — 화살표로 옮기면 그 자리가 곧 선택이다.
        못 고르는 칸(disabled)은 건너뛰고, 끝에서는 돈다. */
-    const 그룹 = useRef(null);
-    const 고를수있는 = options.filter((o) => !o.disabled);
-    const 내자리 = useId();
+    const groupRef = useRef(null);
+    const selectable = options.filter((o) => !o.disabled);
+    const uid = useId();
     /* 보기 이름을 이어 **이 고르개가 무엇인지** 적는다 — 콘솔만 보고 찾아갈 수 있게.
        원시 글자라 아래 useEffect 가 다시 그릴 때마다 돌지 않는다(배열을 그냥 넣으면 돈다). */
-    const 서명 = options.map((o) => o.key).join('·');
+    const signature = options.map((o) => o.key).join('·');
     useEffect(() => {
         if (!isDev || (ariaLabel != null && ariaLabel !== ''))
             return;
-        이름없이선것.set(내자리, 서명 || '(보기 없음)');
-        if (이름없이선것.size > 1) {
-            const 모두 = [...이름없이선것.values()].sort();
-            devWarnOnce(`segmented-control-unnamed:${모두.join('|')}`, `[ihab/SegmentedControl] 이름 없는 라디오그룹이 한 화면에 ${이름없이선것.size} 개 서 있습니다 — ` +
+        unlabeledGroups.set(uid, signature || '(보기 없음)');
+        if (unlabeledGroups.size > 1) {
+            const all = [...unlabeledGroups.values()].sort();
+            devWarnOnce(`segmented-control-unnamed:${all.join('|')}`, `[ihab/SegmentedControl] 이름 없는 라디오그룹이 한 화면에 ${unlabeledGroups.size} 개 서 있습니다 — ` +
                 `낭독기는 모두 "선택 탭" 으로 읽어 어느 것이 무엇인지 가릴 수 없습니다. ariaLabel 을 주세요. ` +
-                `지금 선 것(보기 이름으로 적음): ${모두.join('  /  ')}`);
+                `지금 선 것(보기 이름으로 적음): ${all.join('  /  ')}`);
         }
-        return () => { 이름없이선것.delete(내자리); };
-    }, [ariaLabel, 서명, 내자리]);
-    const 옮기기 = (걸음) => {
-        if (!고를수있는.length)
+        return () => { unlabeledGroups.delete(uid); };
+    }, [ariaLabel, signature, uid]);
+    const moveBy = (step) => {
+        if (!selectable.length)
             return;
-        const 지금 = Math.max(0, 고를수있는.findIndex((o) => o.key === value));
-        const 다음 = 걸음 === 'first' ? 고를수있는[0]
-            : 걸음 === 'last' ? 고를수있는[고를수있는.length - 1]
-                : 고를수있는[(지금 + 걸음 + 고를수있는.length) % 고를수있는.length];
-        if (!다음)
+        const current = Math.max(0, selectable.findIndex((o) => o.key === value));
+        const next = step === 'first' ? selectable[0]
+            : step === 'last' ? selectable[selectable.length - 1]
+                : selectable[(current + step + selectable.length) % selectable.length];
+        if (!next)
             return;
         /* 이미 그 자리여도 포커스는 옮긴다 — 칸이 하나뿐일 때 멈춘 것처럼 보이지 않게 */
-        onChange(다음.key);
-        const 칸 = Array.from(그룹.current?.querySelectorAll('[data-segkey]') ?? [])
-            .find((el) => el.dataset.segkey === 다음.key);
-        칸?.focus();
+        onChange(next.key);
+        const buttons = Array.from(groupRef.current?.querySelectorAll('[data-segkey]') ?? [])
+            .find((el) => el.dataset.segkey === next.key);
+        buttons?.focus();
     };
-    const 키 = (e) => {
+    const onKeyDown = (e) => {
         switch (e.key) {
             case 'ArrowRight':
             case 'ArrowDown':
-                옮기기(1);
+                moveBy(1);
                 break;
             case 'ArrowLeft':
             case 'ArrowUp':
-                옮기기(-1);
+                moveBy(-1);
                 break;
             case 'Home':
-                옮기기('first');
+                moveBy('first');
                 break;
             case 'End':
-                옮기기('last');
+                moveBy('last');
                 break;
             default: return;
         }
         e.preventDefault();
     };
-    const 이름 = (opt) => {
-        const 글자 = (v) => typeof v === 'string' || typeof v === 'number';
-        if (!글자(opt.label) || opt.count == null || opt.count === false || !글자(opt.count))
+    const labelOf = (opt) => {
+        const isText = (v) => typeof v === 'string' || typeof v === 'number';
+        if (!isText(opt.label) || opt.count == null || opt.count === false || !isText(opt.count))
             return undefined;
         return `${opt.label}, ${opt.count}`;
     };
     /* 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', 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, 
+    const tabKey = selectable.some((o) => o.key === value) ? value : selectable[0]?.key;
+    return (_jsx("div", { ref: groupRef, onKeyDown: 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 === tabKey ? 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)
+            ariaLabel: labelOf(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/SideNav.js

@@ -22,9 +22,9 @@ function SideNavFooter(props) {
        넷 서 있었다 — 눌러도 아무 일이 없으니 사람은 고장으로 읽고, 낭독기에는
        '알림 단추' 라고 읽히는데 실제로는 아무 데도 못 간다.
        **없는 단추가 죽은 단추보다 낫다.** */
-    const 그릴것 = onDebug || onNotification || onSetting || onHelp || onFeedback || onAccount;
+    const hasAny = onDebug || onNotification || onSetting || onHelp || onFeedback || onAccount;
     // 하나도 없으면 바닥 자체를 비운다 — 빈 채로 두면 여백(margin-top + padding)만 남는다.
-    if (!그릴것)
+    if (!hasAny)
         return null;
     return (_jsxs("div", { className: "side-nav__footer", children: [onDebug && (_jsx(Button, { htmlType: "button", size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "terminal", ariaLabel: t('nav.debug', '디버그'), onClick: onDebug, selected: activeKey === 'debug' })), onNotification && (_jsxs("span", { className: "side-nav__notification-wrap", children: [_jsx(Button, { htmlType: "button", size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "bell", ariaLabel: nameWithCount(t, t('nav.notifications', '알림'), unreadCount), onClick: onNotification, selected: activeKey === 'notifications' }), !!unreadCount && unreadCount > 0 && (_jsx(Badge, { type: "dot", number: Math.min(unreadCount, 99), size: 24, "aria-hidden": true }))] })), onSetting && (_jsx(Button, { htmlType: "button", size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "settings", ariaLabel: t('nav.settings', '설정'), onClick: onSetting, selected: activeKey === 'settings' })), onHelp && (_jsx(Button, { htmlType: "button", size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "message-circle-question-mark", ariaLabel: t('nav.help', '도움말'), onClick: onHelp, selected: activeKey === 'help' })), onFeedback && (_jsx(Button, { htmlType: "button", size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "bug", ariaLabel: t('nav.feedback', '버그신고'), onClick: onFeedback, selected: activeKey === 'feedback' })), onAccount && (_jsx(Button, { htmlType: "button", size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "user-round", ariaLabel: t('nav.account', '계정'), onClick: onAccount, selected: activeKey === 'account' }))] }));
 }
@@ -65,76 +65,76 @@ export default function SideNav(props) {
     const handleModeSwitch = useCallback(() => onAppModeChange?.(isManager ? 'malgwi' : 'manager'), [onAppModeChange, isManager]);
     /* **떠 있는 막대의 자리와 길이** — 구르는 통(이 `<nav>`)을 재어 셈한다. 네이티브 막대는
        폭을 정할 수 없고 자리를 먹어 항목을 밀어내므로(2026-09-25 실측: 오른쪽만 23px) 직접 그린다. */
-    const 통ref = useRef(null);
-    const [막대, set막대] = useState(null);
+    const containerRef = useRef(null);
+    const [thumb, setThumb] = useState(null);
     useEffect(() => {
-        const el = 통ref.current;
+        const el = containerRef.current;
         if (!el)
             return;
         /* **굴림 한 번에 한 번만 센다**(말귀 요청 (115), 2026-10-10). 전에는 `scroll` 마다 바로 `setState` 라
            굴리는 동안 틀마다 여러 번 다시 그렸다. 틀에 한 번으로 모으고(rAF), **값이 그대로면 상태를 안
            건드린다** — 같은 수를 새 객체로 넘기면 React 는 바뀐 줄 안다. */
-        let 예약 = null;
-        const 셈 = () => {
+        let rafId = null;
+        const compute = () => {
             const { scrollHeight, clientHeight, scrollTop } = el;
             /* 넘치지 않으면 그리지 않는다 — 없는 스크롤을 알릴 까닭이 없다 */
             if (scrollHeight <= clientHeight + 1) {
-                set막대(prev => (prev === null ? prev : null));
+                setThumb(prev => (prev === null ? prev : null));
                 return;
             }
-            const 길이 = Math.max(24, (clientHeight / scrollHeight) * clientHeight);
-            const 남은길 = clientHeight - 길이;
-            const 남은굴림 = scrollHeight - clientHeight;
-            const 다음 = { top: Math.round((scrollTop / 남은굴림) * 남은길), height: Math.round(길이) };
-            set막대(prev => (prev && prev.top === 다음.top && prev.height === 다음.height ? prev : 다음));
+            const thumbHeight = Math.max(24, (clientHeight / scrollHeight) * clientHeight);
+            const trackRemain = clientHeight - thumbHeight;
+            const scrollRemain = scrollHeight - clientHeight;
+            const next = { top: Math.round((scrollTop / scrollRemain) * trackRemain), height: Math.round(thumbHeight) };
+            setThumb(prev => (prev && prev.top === next.top && prev.height === next.height ? prev : next));
         };
-        const 재기 = () => {
+        const measure = () => {
             if (typeof requestAnimationFrame === 'undefined') {
-                셈();
+                compute();
                 return;
             }
-            if (예약 !== null)
+            if (rafId !== null)
                 return;
-            예약 = requestAnimationFrame(() => { 예약 = null; 셈(); });
+            rafId = requestAnimationFrame(() => { rafId = null; compute(); });
         };
-        셈();
-        el.addEventListener('scroll', 재기, { passive: true });
+        compute();
+        el.addEventListener('scroll', measure, { passive: true });
         /* 항목이 늘거나 창이 바뀌면 길이도 달라진다 */
-        const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(재기) : null;
+        const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(measure) : null;
         ro?.observe(el);
         for (const c of Array.from(el.children))
             ro?.observe(c);
         return () => {
-            if (예약 !== null)
-                cancelAnimationFrame(예약);
-            el.removeEventListener('scroll', 재기);
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+            el.removeEventListener('scroll', measure);
             ro?.disconnect();
         };
     }, [items]);
     /* **막대를 잡아 끌 수 있다.** 손에 잡히게 그려 놓고 안 잡히면 그 꼴이 거짓말이 된다.
        통의 한 픽셀은 막대의 `scrollHeight / clientHeight` 배다 — 그 비로 옮긴다. */
-    const 끌기 = useRef(null);
-    const 막대잡기 = useCallback((e) => {
-        const el = 통ref.current;
+    const dragRef = useRef(null);
+    const onThumbDown = useCallback((e) => {
+        const el = containerRef.current;
         if (!el)
             return;
         e.preventDefault();
-        끌기.current = { y: e.clientY, top: el.scrollTop };
+        dragRef.current = { y: e.clientY, top: el.scrollTop };
         e.currentTarget.setPointerCapture(e.pointerId);
     }, []);
-    const 막대끌기 = useCallback((e) => {
-        const el = 통ref.current;
-        const 잡은것 = 끌기.current;
-        if (!el || !잡은것)
+    const onThumbMove = useCallback((e) => {
+        const el = containerRef.current;
+        const held = dragRef.current;
+        if (!el || !held)
             return;
-        el.scrollTop = 잡은것.top + (e.clientY - 잡은것.y) * (el.scrollHeight / el.clientHeight);
+        el.scrollTop = held.top + (e.clientY - held.y) * (el.scrollHeight / el.clientHeight);
     }, []);
-    const 막대놓기 = useCallback((e) => {
-        끌기.current = null;
+    const onThumbUp = useCallback((e) => {
+        dragRef.current = null;
         if (e.currentTarget.hasPointerCapture(e.pointerId))
             e.currentTarget.releasePointerCapture(e.pointerId);
     }, []);
-    return (_jsxs("nav", { ref: 통ref, "aria-label": t('nav.mainMenu', '메인 메뉴'), className: "side-nav__menu", children: [막대 && (_jsx("div", { className: "side-nav__scroll", "aria-hidden": "true", children: _jsx("div", { className: "side-nav__scroll-thumb", style: { top: 막대.top, height: 막대.height }, onPointerDown: 막대잡기, onPointerMove: 막대끌기, onPointerUp: 막대놓기, onPointerCancel: 막대놓기 }) })), _jsxs("div", { className: "side-nav__menu-list", children: [(items || [])
+    return (_jsxs("nav", { ref: containerRef, "aria-label": t('nav.mainMenu', '메인 메뉴'), className: "side-nav__menu", children: [thumb && (_jsx("div", { className: "side-nav__scroll", "aria-hidden": "true", children: _jsx("div", { className: "side-nav__scroll-thumb", style: { top: thumb.top, height: thumb.height }, onPointerDown: onThumbDown, onPointerMove: onThumbMove, onPointerUp: onThumbUp, onPointerCancel: onThumbUp }) })), _jsxs("div", { className: "side-nav__menu-list", children: [(items || [])
                         .filter((it) => !it.section && (it.key || it.label))
                         .map((it, idx) => (_jsxs(React.Fragment, { children: [it.divider && _jsx("div", { className: "side-nav__separator" }), _jsx(SideNavButton, { item: it, active: !!it.key && it.key === activeKey, state: it.disabled ? 'disabled' : undefined, onClick: (_key, btnEl, fromPointer) => {
                                     if (it.disabled)
@@ -174,8 +174,8 @@ export default function SideNav(props) {
                                         const supportsMatches = typeof headerEl.matches === 'function';
                                         /* :hover 는 **호버가 되는 기기에서만** 믿는다 — iPad 는 톡한 요소에 :hover 가 붙어 남아, "마우스가 레일 위에 있다" 로
                                            읽혀 강제 접힘을 건너뛰었다(메뉴를 골라도 레일이 펼친 채 본문을 가림) */
-                                        const 호버기기 = window.matchMedia('(hover: hover)').matches;
-                                        const isHovered = 호버기기 && supportsMatches ? headerEl.matches(':hover') : false;
+                                        const hasHover = window.matchMedia('(hover: hover)').matches;
+                                        const isHovered = hasHover && supportsMatches ? headerEl.matches(':hover') : false;
                                         if (!isHovered) {
                                             headerEl.classList.add('header--force-collapsed');
                                             const onEnter = () => {

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

@@ -87,7 +87,7 @@ export default function Slider({ value, onChange, min = 0, max = 100, step = 1,
     }
     /* 낭독기가 들을 값 글자 — 숫자만 넘기면 "1.25x"·"위"·"3 / 7" 이 "1.25"·"0"·"3" 으로 들렸다. 보이는 라벨과 같은 글자,
        라벨이 없으면 끝값의 minLabel·maxLabel. 둘 다 아니면 숫자 그대로(undefined). */
-    const 값글자 = formatValue
+    const valueFormatter = formatValue
         ? formatValue(clamped)
         : label === 'percent' ? `${Math.round(max > min ? ((clamped - min) / (max - min)) * 100 : 0)}%`
             : label === 'count' ? `${clamped} / ${max}`
@@ -95,7 +95,7 @@ export default function Slider({ value, onChange, min = 0, max = 100, step = 1,
                     : clamped === max && maxLabel ? maxLabel
                         : undefined;
     // 루트가 아닐 때(label/showMinMax로 감싸질 때)는 className을 바깥 wrapper가 대신 가져간다
-    const input = (_jsx("input", { type: "range", className: cx('slider', `slider--${orientation}`, isStatic && 'slider--static', !label && !showMinMax && className), min: min, max: max, step: step, value: clamped, disabled: disabled, readOnly: isStatic, tabIndex: isStatic ? -1 : undefined, "aria-label": ariaLabel, "aria-valuetext": 값글자, "aria-orientation": orientation, onChange: handleChange, style: style }));
+    const input = (_jsx("input", { type: "range", className: cx('slider', `slider--${orientation}`, isStatic && 'slider--static', !label && !showMinMax && className), min: min, max: max, step: step, value: clamped, disabled: disabled, readOnly: isStatic, tabIndex: isStatic ? -1 : undefined, "aria-label": ariaLabel, "aria-valuetext": valueFormatter, "aria-orientation": orientation, onChange: handleChange, style: style }));
     if (!label && !showMinMax)
         return input;
     // 트랙 양 끝 최소·최대값 텍스트 — 세로는 채움 방향(아래→위)에 맞춰 위=max/아래=min 순서로 배치

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

@@ -16,7 +16,7 @@ import './SoundCompass.css';
 const lerp = (a, b, t) => a + (b - a) * t;
 /** @public */
 export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSpeakerId = null, playedIds, selectedId = null, answerId = null, showFeedback = false, pulseSelected = false, pulseSelectedDuration, pulseScale, clickable = false, onSelectSpeaker, buttonSize = 40, showIcon = true, onCenterClick, centerLabel, centerDisabled = false, centerAttention = false, shortcutAnchor = 'top-right', shortcutScale, scaleShortcut = false, }) {
-    const { t: 번역 } = useTranslation();
+    const { t: translate } = useTranslation();
     const t = Math.max(0, Math.min(1, viewT));
     const CENTER = size / 2;
     // ── 탑뷰 좌표 ──────────────────────────────────────────────────────────
@@ -123,10 +123,10 @@ export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSp
     const played = useMemo(() => new Set(playedIds ?? []), [playedIds]);
     const stateLabel = (state) => ({
         idle: '',
-        active: 번역('soundCompass.state.active', '소리 나는 중'),
-        played: 번역('soundCompass.state.played', '들음'),
-        correct: 번역('soundCompass.state.correct', '정답'),
-        wrong: 번역('soundCompass.state.wrong', '오답'),
+        active: translate('soundCompass.state.active', '소리 나는 중'),
+        played: translate('soundCompass.state.played', '들음'),
+        correct: translate('soundCompass.state.correct', '정답'),
+        wrong: translate('soundCompass.state.wrong', '오답'),
     })[state];
     const getSpeakerState = (sp) => {
         if (activeSpeakerId === sp.id)