@ihabdevteam/core 0.322.0 → 0.324.0

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)