@ihabdevteam/core 0.322.0 → 0.323.0

package/dist/packages/core/src/components/Training/TrainingStepCard.js

@@ -39,9 +39,9 @@ export default function TrainingStepCard({ index, stepIndex, isLast = false, loc
     const [playingAll, setPlayingAll] = useState(false);
     /* 모두 듣기를 멈추는 함수 — 도는 동안만 있다. 사용자가 카드의 '소리 듣기' 를 누르면 부른다: 전에는 누른 카드가 울리던 카드를
        멈추게 했지만(currentSound) 멈춘 카드는 끝 신호가 안 와 차례가 8초 시한까지 기다렸다가 **다음 카드가 누른 카드를 끊고** 이어 울렸다. */
-    const 모두듣기멈춤Ref = useRef(null);
-    const 단계살아있음 = useRef(true);
-    useEffect(() => { 단계살아있음.current = true; return () => { 단계살아있음.current = false; }; }, []);
+    const stopPlayAllRef = useRef(null);
+    const stepAliveRef = useRef(true);
+    useEffect(() => { stepAliveRef.current = true; return () => { stepAliveRef.current = false; }; }, []);
     // 페이지 전환 시 (items 변경) 이전 선택 상태 및 카드 ref 초기화
     const itemsKey = useMemo(() => items.map((it) => it?.id ?? it?.word ?? '').join('|'), [items]);
     /* eslint-disable react-hooks/set-state-in-effect */
@@ -78,33 +78,33 @@ export default function TrainingStepCard({ index, stepIndex, isLast = false, loc
         }
     }, [selectable, onChange, currentState, onDone]);
     /* 손잡이가 memo 라 **지금 값**을 ref 로 읽는다 — 이 파일이 `단계살아있음` 에 쓰는 것과 같은 결 */
-    const 사이뜸Ref = useRef(playAllGapMs);
-    useEffect(() => { 사이뜸Ref.current = Math.max(0, playAllGapMs || 0); }, [playAllGapMs]);
+    const gapMsRef = useRef(playAllGapMs);
+    useEffect(() => { gapMsRef.current = Math.max(0, playAllGapMs || 0); }, [playAllGapMs]);
     const handlePlayAll = useCallback(async () => {
         if (playingAll || currentState === 'disabled')
             return;
         setPlayingAll(true);
-        let 멈춤 = false;
-        const 멈춤신호 = new Promise((resolve) => { 모두듣기멈춤Ref.current = () => { 멈춤 = true; resolve(); }; });
+        let stopped = false;
+        const stopSignal = new Promise((resolve) => { stopPlayAllRef.current = () => { stopped = true; resolve(); }; });
         try {
             /* 매 차례 **지금의** 카드를 읽고, 떠났으면 멈춘다 — 시작할 때 잡아 둔 핸들로 돌면 떠난 화면의 다음 카드가 이어서 울렸다 */
             for (let i = 0; i < shown.length; i++) {
-                if (!단계살아있음.current || 멈춤)
+                if (!stepAliveRef.current || stopped)
                     break;
                 const cardRef = cardRefs.current[i];
                 if (!cardRef)
                     continue;
-                await Promise.race([withTimeout(cardRef.play(), PLAY_ALL_CARD_TIMEOUT_MS), 멈춤신호]);
+                await Promise.race([withTimeout(cardRef.play(), PLAY_ALL_CARD_TIMEOUT_MS), stopSignal]);
                 /* **사이 뜸**(말귀 요청 (79), 2026-10-06) — 앞 카드가 **끝난 뒤부터** 센다.
                    마지막 뒤에는 안 둔다. 멈춤 신호와 함께 기다려, 누르는 순간 바로 걷힌다. */
-                const 사이 = Math.max(0, 사이뜸Ref.current || 0);
-                if (사이 > 0 && i < shown.length - 1 && !멈춤 && 단계살아있음.current) {
-                    await Promise.race([new Promise((r) => { setTimeout(r, 사이); }), 멈춤신호]);
+                const gapMs = Math.max(0, gapMsRef.current || 0);
+                if (gapMs > 0 && i < shown.length - 1 && !stopped && stepAliveRef.current) {
+                    await Promise.race([new Promise((r) => { setTimeout(r, gapMs); }), stopSignal]);
                 }
             }
         }
         finally {
-            모두듣기멈춤Ref.current = null;
+            stopPlayAllRef.current = null;
             setPlayingAll(false);
         }
     }, [playingAll, currentState, shown.length]);
@@ -146,11 +146,11 @@ export default function TrainingStepCard({ index, stepIndex, isLast = false, loc
             /* 모두 듣기 중 카드의 '소리 듣기' 를 누르면(마우스·Enter 모두 click) 모두 듣기를 멈춘다 — 누른 카드는 제 처리로 울린다.
                캡처 단계에서 본다: 카드 단추는 선택 모드에서 전파를 막는다. */
             onClickCapture: (e) => {
-                const 멈추기 = 모두듣기멈춤Ref.current;
-                if (!멈추기)
+                const stop = stopPlayAllRef.current;
+                if (!stop)
                     return;
-                const 누른곳 = e.target;
-                if (누른곳 && typeof 누른곳.closest === 'function' && 누른곳.closest('.training-word-card__bottom'))
-                    멈추기();
+                const pressedAt = e.target;
+                if (pressedAt && typeof pressedAt.closest === 'function' && pressedAt.closest('.training-word-card__bottom'))
+                    stop();
             }, children: shown.length === 0 ? (_jsx("div", { className: "training-step__empty", children: t('training.noCards', '카드가 없습니다.') })) : (shown.map((it, i) => (_jsx(TrainingWordCard, { ref: (el) => { cardRefs.current[i] = el; }, item: it, disabled: currentState === 'disabled', onPlayDone: () => handlePlayDone(it, i), selectable: selectable, selected: selectable && selectedIndex === i, onSelect: selectable ? () => handleSelect(it, i) : undefined, flipDelay: i * 120, hideLabel: hideLabel, hideAudio: hideAudio }, (it && it.id) || i)))) }) }));
 }

package/dist/packages/core/src/components/Training/TrainingStepConfirmWithText.js

@@ -20,10 +20,10 @@ export default function TrainingStepConfirmWithText({ index, stepIndex, isLast =
     // "null 이 아니면 null 로" 를 해서, 답을 누르면 한 박자 뒤 강조가 곧바로 사라졌다.
     // 문항 열쇠는 문장 + 보기 — 문장만 보면 보기만 바뀐 문항에서 같은 번호의 새 보기가 골라진 채 보였다.
     // 데모 강제 선택 시에는 문항 변경 리셋을 건너뛴다.
-    const 문항열쇠 = `${String(sentence)}\u0000${JSON.stringify(choices ?? null)}`;
-    const [prevKey, setPrevKey] = useState(문항열쇠);
-    if (prevKey !== 문항열쇠) {
-        setPrevKey(문항열쇠);
+    const questionKey = `${String(sentence)}\u0000${JSON.stringify(choices ?? null)}`;
+    const [prevKey, setPrevKey] = useState(questionKey);
+    if (prevKey !== questionKey) {
+        setPrevKey(questionKey);
         if (demoSelected == null)
             setSelectedAnswer(null);
     }

package/dist/packages/core/src/components/Training/TrainingStepOrderList.js

@@ -11,8 +11,8 @@ import "./TrainingStepOrderList.css";
 /** @public */
 /* 기본 context 는 **모듈에 하나** — 매 렌더 새 `[]` 면 [context] effect 가 매번 다시 돌아 setState·onChange 로 렌더가 끝없이
    반복됐다(자료를 불러오기 전 context 없이 그린 단계에서 CPU 100%). */
-const 빈문맥 = [];
-export default function TrainingStepOrderList({ index, stepIndex, isLast = false, lockedHint, title, onDone, onChange, context = 빈문맥, }) {
+const EMPTY_CONTEXT = [];
+export default function TrainingStepOrderList({ index, stepIndex, isLast = false, lockedHint, title, onDone, onChange, context = EMPTY_CONTEXT, }) {
     const { t } = useTranslation();
     const resolvedTitle = title ?? t('training.orderListDefault', '문장을 들은 순서대로 배치하세요.');
     const toText = (v) => typeof v === "string"
@@ -32,18 +32,18 @@ export default function TrainingStepOrderList({ index, stepIndex, isLast = false
         return "disabled";
     }, [stepIndex, index]);
     /** 옮기기 단추·끌어놓기를 여는가 — 진행 중이거나 끝낸 단계(아래 move 머리말) */
-    const 조작가능 = currentState !== 'disabled';
+    const interactive = currentState !== 'disabled';
     // context 변경 시 items/shuffled를 다시 초기화하는 의도된 동기화다
     /* eslint-disable react-hooks/set-state-in-effect */
     /* 같은 context 로 다시 도는 effect(StrictMode 의 두 번 실행, 숨김→보임)는 넘긴다 — 다시 섞고 다시 알리면 처음 알림의
        배치가 화면에 한 번도 안 뜬 배치였고 onChange·onDone 이 두 번씩 나갔다. 새 context 일 때만 섞는다. */
-    const 섞은문맥 = useRef(undefined);
+    const shuffledRef = useRef(undefined);
     /** 첫 `onDone` 을 **어느 문맥에** 냈는가 — 두 번 안 내려고 쥔다(아래 '열릴 때' 효과 참고) */
-    const 첫보고Ref = useRef(undefined);
+    const firstReportRef = useRef(undefined);
     useEffect(() => {
-        if (섞은문맥.current === context)
+        if (shuffledRef.current === context)
             return;
-        섞은문맥.current = context;
+        shuffledRef.current = context;
         const it = Array.isArray(context) ? context : [];
         setItems(it);
         const makeInitial = (src) => {
@@ -76,7 +76,7 @@ export default function TrainingStepOrderList({ index, stepIndex, isLast = false
             }
             if (typeof onDone === "function" && currentState === "active") {
                 const sc2 = initial.filter((s, i) => s.text === toText(it[i])).length;
-                첫보고Ref.current = context;
+                firstReportRef.current = context;
                 onDone({ shuffled: initial, score: sc2, total: (it || []).length, initial: true, __ts: Date.now() });
             }
         }
@@ -104,9 +104,9 @@ export default function TrainingStepOrderList({ index, stepIndex, isLast = false
     useEffect(() => {
         if (currentState !== 'active')
             return;
-        if (첫보고Ref.current === context)
+        if (firstReportRef.current === context)
             return;
-        첫보고Ref.current = context;
+        firstReportRef.current = context;
         if (typeof onDone !== 'function')
             return;
         const it = Array.isArray(context) ? context : [];
@@ -474,7 +474,7 @@ export default function TrainingStepOrderList({ index, stepIndex, isLast = false
                                         map.set(it.id, el);
                                     else
                                         map.delete(it.id);
-                                }, className: `order-list__draggable ${draggedIndex === idx ? "dragging" : ""}`, "data-disabled": currentState === 'disabled', "aria-disabled": currentState === 'disabled', tabIndex: currentState === 'disabled' ? -1 : 0, draggable: 조작가능, onDragStart: 조작가능 ? (e) => handleDragStart(idx, e) : undefined, onDragEnter: 조작가능 ? (e) => handleDragOverWithClass(idx, e) : undefined, onDragOver: 조작가능 ? (e) => handleDragOverWithClass(idx, e) : undefined, onDragLeave: 조작가능 ? () => {
+                                }, className: `order-list__draggable ${draggedIndex === idx ? "dragging" : ""}`, "data-disabled": currentState === 'disabled', "aria-disabled": currentState === 'disabled', tabIndex: currentState === 'disabled' ? -1 : 0, draggable: interactive, onDragStart: interactive ? (e) => handleDragStart(idx, e) : undefined, onDragEnter: interactive ? (e) => handleDragOverWithClass(idx, e) : undefined, onDragOver: interactive ? (e) => handleDragOverWithClass(idx, e) : undefined, onDragLeave: interactive ? () => {
                                     try {
                                         if (dragLeaveTimeoutRef.current !== null)
                                             clearTimeout(dragLeaveTimeoutRef.current);
@@ -491,6 +491,6 @@ export default function TrainingStepOrderList({ index, stepIndex, isLast = false
                                         }, 80);
                                     }
                                     catch (err) { }
-                                } : undefined, onDrop: 조작가능 ? (e) => handleDrop(idx, e) : undefined, onDragEnd: 조작가능 ? handleDragEnd : undefined, children: [_jsx("span", { className: "order-list__item-text body-2", children: it.text }), 조작가능 ? (_jsxs("span", { className: "order-list__item-buttons", children: [_jsx(Button, { htmlType: "button", size: 32, type: "dot", onClick: () => move(idx, -1), ariaLabel: t("training.up"), icon: 'chevron-up', variant: 'transparent-gray', width: 48, useFaded: "true", disabled: idx === 0, useBorder: false, useDisabledInvisible: true }), _jsx(Button, { htmlType: "button", size: 32, type: "dot", onClick: () => move(idx, 1), ariaLabel: t("training.down"), icon: 'chevron-down', variant: 'transparent-gray', width: 48, useFaded: "true", disabled: idx === shuffled.length - 1, useBorder: false, useDisabledInvisible: true })] })) : null] })] }) }, it.id));
+                                } : undefined, onDrop: interactive ? (e) => handleDrop(idx, e) : undefined, onDragEnd: interactive ? handleDragEnd : undefined, children: [_jsx("span", { className: "order-list__item-text body-2", children: it.text }), interactive ? (_jsxs("span", { className: "order-list__item-buttons", children: [_jsx(Button, { htmlType: "button", size: 32, type: "dot", onClick: () => move(idx, -1), ariaLabel: t("training.up"), icon: 'chevron-up', variant: 'transparent-gray', width: 48, useFaded: "true", disabled: idx === 0, useBorder: false, useDisabledInvisible: true }), _jsx(Button, { htmlType: "button", size: 32, type: "dot", onClick: () => move(idx, 1), ariaLabel: t("training.down"), icon: 'chevron-down', variant: 'transparent-gray', width: 48, useFaded: "true", disabled: idx === shuffled.length - 1, useBorder: false, useDisabledInvisible: true })] })) : null] })] }) }, it.id));
             }) }) }));
 }

package/dist/packages/core/src/components/Training/TrainingStepTextBox.js

@@ -32,11 +32,11 @@ export default function TrainingStepTextBox({ context, state = "disabled", theme
     });
     const [noticeMessage, setNoticeMessage] = useState('');
     /* 초점을 가진 '문장 미리보기' 를 누르면 그 단추가 사라진다 — 펼친 상자의 첫 조작 단추로 초점을 옮긴다 */
-    const 상자Ref = useRef(null);
-    const 펼친뒤초점Ref = useRef(false);
+    const boxRef = useRef(null);
+    const focusAfterExpandRef = useRef(false);
     const handleActivate = useCallback(() => {
         // 키보드로 눌렀을 때만 — 마우스로 눌렀는데 옮기면 '글자 크기 감소' 초점 툴팁이 떴다
-        펼친뒤초점Ref.current = wasKeyboardPress() && !!상자Ref.current && 상자Ref.current.contains(document.activeElement);
+        focusAfterExpandRef.current = wasKeyboardPress() && !!boxRef.current && boxRef.current.contains(document.activeElement);
         setLocalStatus("active");
     }, []);
     const handleNoticeClose = useCallback(() => setNoticeMessage(''), []);
@@ -64,9 +64,9 @@ export default function TrainingStepTextBox({ context, state = "disabled", theme
     }, [context]);
     /* 문장이 바뀌면 **그 렌더에서** 가린다 — 타이머로 한 틱 뒤에 가리면, 앞 문제에서 펼쳐 둔 상자에 다음 문제 문장이
        잠깐 드러났다(정답 문장이 번쩍). 렌더 중 상태 조정은 React 가 권하는 꼴이다. */
-    const [보던문장, set보던문장] = useState(content);
-    if (보던문장 !== content) {
-        set보던문장(content);
+    const [shownContent, setShownContent] = useState(content);
+    if (shownContent !== content) {
+        setShownContent(content);
         setLocalStatus("disabled");
     }
     const displayStatus = state === "disabled" ? localStatus : state;
@@ -82,13 +82,13 @@ export default function TrainingStepTextBox({ context, state = "disabled", theme
         lineHeight: `${lineHeight}px`,
     }), [fontSize, lineHeight]);
     useEffect(() => {
-        if (displayStatus === 'disabled' || !펼친뒤초점Ref.current)
+        if (displayStatus === 'disabled' || !focusAfterExpandRef.current)
             return;
-        펼친뒤초점Ref.current = false;
-        const 지금 = document.activeElement;
-        if (지금 && 지금 !== document.body)
+        focusAfterExpandRef.current = false;
+        const active = document.activeElement;
+        if (active && active !== document.body)
             return;
-        상자Ref.current?.querySelector('.training-text-box__buttons button')?.focus();
+        boxRef.current?.querySelector('.training-text-box__buttons button')?.focus();
     }, [displayStatus]);
-    return (_jsxs("div", { ref: 상자Ref, className: `training-text-box ${stateClass} ${displayStatus !== 'disabled' && theme === 'dark' ? 'is-dark' : ''}`, children: [displayStatus === "disabled" && (_jsx("div", { className: "training-text-box__preview", children: _jsx(Button, { htmlType: "button", size: 48, type: "bar", onClick: handleActivate, icon: 'eye', ariaLabel: t('training.sentencePreview', '문장 미리보기'), label: t('training.sentencePreview', '문장 미리보기'), useBorder: false }) })), _jsx("div", { className: "training-text-box__area", "aria-hidden": displayStatus === "disabled", children: _jsx("span", { className: "training-text-box__inner h3", style: textStyle, children: content }) }), displayStatus !== "disabled" && (_jsxs("div", { className: "training-text-box__buttons", "aria-hidden": displayStatus === "disabled", children: [_jsx(Button, { htmlType: "button", size: 32, type: "dot", onClick: decrease, onDisabledClick: () => showNotice(t('training.fontSizeMin', '글씨 크기가 최소입니다.')), ariaLabel: t('training.fontSizeDecrease', '글자 크기 감소'), icon: 'minus', variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray', disabled: !canDecrease, useBorder: false, showTooltipInfo: true, ...(!isMobile && { width: '60px' }) }), _jsx(Button, { htmlType: "button", size: 32, type: "dot", onClick: increase, onDisabledClick: () => showNotice(t('training.fontSizeMax', '글씨 크기가 최대입니다.')), ariaLabel: t('training.fontSizeIncrease', '글자 크기 증가'), icon: 'plus', variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray', disabled: !canIncrease, useBorder: false, showTooltipInfo: true, ...(!isMobile && { width: '60px' }) }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", useBorder: false, width: 48, icon: theme === 'dark' ? 'moon' : 'sun-medium', onClick: toggleTheme, ariaLabel: t('training.toggleBackground', '배경 전환'), variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray' })] })), _jsx(Toast, { message: noticeMessage, position: "top", onClose: handleNoticeClose })] }));
+    return (_jsxs("div", { ref: boxRef, className: `training-text-box ${stateClass} ${displayStatus !== 'disabled' && theme === 'dark' ? 'is-dark' : ''}`, children: [displayStatus === "disabled" && (_jsx("div", { className: "training-text-box__preview", children: _jsx(Button, { htmlType: "button", size: 48, type: "bar", onClick: handleActivate, icon: 'eye', ariaLabel: t('training.sentencePreview', '문장 미리보기'), label: t('training.sentencePreview', '문장 미리보기'), useBorder: false }) })), _jsx("div", { className: "training-text-box__area", "aria-hidden": displayStatus === "disabled", children: _jsx("span", { className: "training-text-box__inner h3", style: textStyle, children: content }) }), displayStatus !== "disabled" && (_jsxs("div", { className: "training-text-box__buttons", "aria-hidden": displayStatus === "disabled", children: [_jsx(Button, { htmlType: "button", size: 32, type: "dot", onClick: decrease, onDisabledClick: () => showNotice(t('training.fontSizeMin', '글씨 크기가 최소입니다.')), ariaLabel: t('training.fontSizeDecrease', '글자 크기 감소'), icon: 'minus', variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray', disabled: !canDecrease, useBorder: false, showTooltipInfo: true, ...(!isMobile && { width: '60px' }) }), _jsx(Button, { htmlType: "button", size: 32, type: "dot", onClick: increase, onDisabledClick: () => showNotice(t('training.fontSizeMax', '글씨 크기가 최대입니다.')), ariaLabel: t('training.fontSizeIncrease', '글자 크기 증가'), icon: 'plus', variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray', disabled: !canIncrease, useBorder: false, showTooltipInfo: true, ...(!isMobile && { width: '60px' }) }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", useBorder: false, width: 48, icon: theme === 'dark' ? 'moon' : 'sun-medium', onClick: toggleTheme, ariaLabel: t('training.toggleBackground', '배경 전환'), variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray' })] })), _jsx(Toast, { message: noticeMessage, position: "top", onClose: handleNoticeClose })] }));
 }

package/dist/packages/core/src/components/Training/TrainingStepTitle.js

@@ -23,10 +23,10 @@ export default function TrainingStepTitle({ title, children, className = "", sta
     useFloatingFocus(showPreview && !!anchorRect, () => {
         if (typeof document === 'undefined')
             return null;
-        const 창들 = Array.from(document.querySelectorAll('.tooltip-content'));
-        for (let i = 창들.length - 1; i >= 0; i--)
-            if (창들[i].querySelector('.tooltip-textbox__root'))
-                return 창들[i];
+        const tooltipEls = Array.from(document.querySelectorAll('.tooltip-content'));
+        for (let i = tooltipEls.length - 1; i >= 0; i--)
+            if (tooltipEls[i].querySelector('.tooltip-textbox__root'))
+                return tooltipEls[i];
         return null;
     }, () => btnRef.current?.querySelector('button') ?? null);
     // 인라인 화살표 함수로 넘어오는 경우가 있어 매 렌더 identity가 바뀐다.

package/dist/packages/core/src/components/Training/TrainingWordCard.js

@@ -90,14 +90,14 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
     /* 떠날 때 **이 카드가 쥔 소리** 도 끊는다 — audio 만 멈춰, 음원 없는 낱말(speechSynthesis)을 듣는 중에 떠나면 말이
        계속 나왔다. 남이 이미 가져간 소리는 건드리지 않는다(stopSoundIfOwner). 떠난 뒤에는 기다리던 합성 주소가 와도 울리지 않는다. */
     const mountedRef = useRef(true);
-    const 쥔소리Ref = useRef(null);
+    const heldSoundRef = useRef(null);
     useEffect(() => {
         mountedRef.current = true;
         return () => {
             mountedRef.current = false;
-            if (쥔소리Ref.current)
-                stopSoundIfOwner(쥔소리Ref.current);
-            쥔소리Ref.current = null;
+            if (heldSoundRef.current)
+                stopSoundIfOwner(heldSoundRef.current);
+            heldSoundRef.current = null;
             try {
                 audioRef.current?.pause();
             }
@@ -138,17 +138,17 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
     const playUrl = useCallback((url) => {
         /* 끝은 **그 자리에서** 받는다(약속은 한 틱 늦다) — 옛 코드도 `onended`·`fail` 안에서
            바로 되돌렸고, 그 사이에 남이 상태를 읽는다. */
-        const 소리 = playOneShot(url, (들었나) => {
+        const sound = playOneShot(url, (played) => {
             setPlaying(false);
-            if (들었나) {
+            if (played) {
                 try {
                     onPlayDone?.();
                 }
                 catch { }
             }
         });
-        audioRef.current = 소리.el;
-        return 소리.done;
+        audioRef.current = sound.el;
+        return sound.done;
     }, [onPlayDone]);
     // 오디오 재생 핵심 로직 — 종료 시 resolve. 클릭 핸들러와 ref로 노출되는 play() 양쪽에서 공유.
     // 재생 우선순위: ① 정식 음원 URL → ② 앱이 등록한 런타임 합성 폴백(예: Gemini-TTS) →
@@ -162,10 +162,10 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
            것**이라, 옆 카드가 울리는 것은 못 멈췄다 — 변별 훈련에서 1번·2번을 잇달아 누르면
            둘이 함께 울렸다. speechSynthesis 만 전역이라 음원 없는 낱말에서는 멀쩡해 보였고,
            그래서 증상이 반만 나타났다. 스피커가 하나이므로 자물쇠도 전역에 둔다. */
-        const 멈춤 = () => {
+        const stop = () => {
             // 남(다른 카드·다음 누름)이 자리를 가져가며 부르면 이 카드는 더 이상 쥐고 있지 않다 — 기다리던 흐름이 이것을 보고 물러선다
-            if (쥔소리Ref.current === 멈춤)
-                쥔소리Ref.current = null;
+            if (heldSoundRef.current === stop)
+                heldSoundRef.current = null;
             try {
                 audioRef.current?.pause();
             }
@@ -176,8 +176,8 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
             catch { /* 미지원 환경 */ }
             setPlaying(false);
         };
-        const release = claimSound(멈춤);
-        쥔소리Ref.current = 멈춤;
+        const release = claimSound(stop);
+        heldSoundRef.current = stop;
         try {
             window.speechSynthesis?.cancel();
         }
@@ -196,7 +196,7 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
                     const url = await Promise.resolve(fallbackResolver(label));
                     /* 기다리는 사이 떠났거나 **소리 자리를 남에게 넘겼으면**(다른 카드를 눌렀거나 같은 카드를 다시 눌렀으면) 끝낸다 —
                        늦게 온 합성 주소로 틀어 두 소리가 겹쳤고, 같은 카드를 두 번 누르면 두 번 울려 onPlayDone 도 두 번 나갔다. */
-                    if (!mountedRef.current || 쥔소리Ref.current !== 멈춤)
+                    if (!mountedRef.current || heldSoundRef.current !== stop)
                         return;
                     if (url) {
                         setPlaying(true);
@@ -206,14 +206,14 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
                 }
                 catch { }
             }
-            if (!mountedRef.current || 쥔소리Ref.current !== 멈춤)
+            if (!mountedRef.current || heldSoundRef.current !== stop)
                 return;
             await playSpeechSynthesis();
         }
         finally {
             release(); // 다음 사람이 이미 가져갔으면 아무 일도 안 한다
-            if (쥔소리Ref.current === 멈춤)
-                쥔소리Ref.current = null;
+            if (heldSoundRef.current === stop)
+                heldSoundRef.current = null;
         }
     }, [disabled, audioUrl, label, playUrl, playSpeechSynthesis]);
     useImperativeHandle(ref, () => ({

package/dist/packages/core/src/components/Training/WordTablePopup.js

@@ -53,15 +53,15 @@ export default function WordTablePopup({ items, words, title, subtitle, emptyTex
     useEffect(() => { notifyRef.current = onScoreChange; });
     /* 매긴 것이 **바뀌었을 때만** 알린다 — 처음 열 때 onScoreChange({}) 가 나갔다. '첫 실행 건너뛰기' 는 StrictMode 의 두 번째 실행에서
        새어 이전 값과 견준다. */
-    const 알린marksRef = useRef(marks);
+    const reportedMarksRef = useRef(marks);
     useEffect(() => {
-        if (알린marksRef.current === marks)
+        if (reportedMarksRef.current === marks)
             return;
-        알린marksRef.current = marks;
+        reportedMarksRef.current = marks;
         notifyRef.current?.(marksForSave(marks));
     }, [marks]);
     /* 표에는 지운 칸(null)이 빠진 것만 넘긴다 — 표는 "매겨진 것"만 알면 된다. */
-    const 표에줄채점 = useMemo(() => marksForSave(marks), [marks]);
+    const marksForTable = useMemo(() => marksForSave(marks), [marks]);
     // 인쇄 — WordTable 내부 콘텐츠(.word-table 아래 그리드)를 격리 iframe으로 출력한다.
     // (전역 print CSS는 모든 .word-table을 노출하므로 window.print 직접 호출은 다른 표까지 인쇄될 수 있다)
     // 페이지 분할 시엔 페이지별 ref, 아니면 단일 콘텐츠 ref를 넘긴다.
@@ -115,5 +115,5 @@ export default function WordTablePopup({ items, words, title, subtitle, emptyTex
         }, 100);
         return () => window.clearTimeout(id);
     }, [autoPrint]);
-    return (_jsxs(Popup, { title: title ?? t('keyWords.title', '주요 단어'), subtitle: subtitle, size: "large", className: cx('word-table-popup', className), buttons: footerButtons, footer: customFooter, footerClassName: footerClassName, footerLayout: footerLayout, beforeClose: beforeClose, onClose: onClose, children: [tableItems.length > 0 ? (_jsxs("div", { className: "word-table-popup__body", children: [showSettings && (_jsx(TableFilterPanel, { sections: filterSections, selected: filterSelected, onSelect: handleSelect })), isPaginated ? (_jsx("div", { className: "word-table-popup__pages", children: pages.map((page, i) => (_jsx(WordTable, { items: page, orientation: settings.orientation, contentTypes: settings.contentTypes, cutLine: settings.cutLine, showOutline: settings.showOutline, showDivLine: settings.showDivLine, count: settings.count, contentRef: el => { pageRefs.current[i] = el; }, pageNumber: { current: i + 1, total: pages.length }, pageNumberPosition: pageNumberPosition, brand: brand && { ...brand, top: settings.showTopInfo, bottom: settings.showBottomInfo }, code: code, scoring: scoring, scoreIndexOffset: pageStart[i], marks: 표에줄채점, onMarkClick: handleMarkClick }, i))) })) : (_jsx("div", { className: "word-table-popup__table", children: _jsx(WordTable, { items: tableItems, orientation: settings.orientation, contentTypes: settings.contentTypes, cutLine: settings.cutLine, showOutline: settings.showOutline, showDivLine: settings.showDivLine, count: settings.count, contentRef: contentRef, fitHeight: true, scoring: scoring, marks: 표에줄채점, onMarkClick: handleMarkClick, brand: brand && { ...brand, top: settings.showTopInfo, bottom: settings.showBottomInfo }, code: code }) }))] })) : (_jsx("p", { className: "word-table-popup__empty body-3", children: emptyText ?? t('keyWords.empty', '추출된 주요 단어가 없습니다.') })), _jsx(Toast, { message: toastMsg, position: "top", onClose: handleToastClose }, toastKey)] }));
+    return (_jsxs(Popup, { title: title ?? t('keyWords.title', '주요 단어'), subtitle: subtitle, size: "large", className: cx('word-table-popup', className), buttons: footerButtons, footer: customFooter, footerClassName: footerClassName, footerLayout: footerLayout, beforeClose: beforeClose, onClose: onClose, children: [tableItems.length > 0 ? (_jsxs("div", { className: "word-table-popup__body", children: [showSettings && (_jsx(TableFilterPanel, { sections: filterSections, selected: filterSelected, onSelect: handleSelect })), isPaginated ? (_jsx("div", { className: "word-table-popup__pages", children: pages.map((page, i) => (_jsx(WordTable, { items: page, orientation: settings.orientation, contentTypes: settings.contentTypes, cutLine: settings.cutLine, showOutline: settings.showOutline, showDivLine: settings.showDivLine, count: settings.count, contentRef: el => { pageRefs.current[i] = el; }, pageNumber: { current: i + 1, total: pages.length }, pageNumberPosition: pageNumberPosition, brand: brand && { ...brand, top: settings.showTopInfo, bottom: settings.showBottomInfo }, code: code, scoring: scoring, scoreIndexOffset: pageStart[i], marks: marksForTable, onMarkClick: handleMarkClick }, i))) })) : (_jsx("div", { className: "word-table-popup__table", children: _jsx(WordTable, { items: tableItems, orientation: settings.orientation, contentTypes: settings.contentTypes, cutLine: settings.cutLine, showOutline: settings.showOutline, showDivLine: settings.showDivLine, count: settings.count, contentRef: contentRef, fitHeight: true, scoring: scoring, marks: marksForTable, onMarkClick: handleMarkClick, brand: brand && { ...brand, top: settings.showTopInfo, bottom: settings.showBottomInfo }, code: code }) }))] })) : (_jsx("p", { className: "word-table-popup__empty body-3", children: emptyText ?? t('keyWords.empty', '추출된 주요 단어가 없습니다.') })), _jsx(Toast, { message: toastMsg, position: "top", onClose: handleToastClose }, toastKey)] }));
 }

package/dist/packages/core/src/components/Training/audioPlaybackRules.js

@@ -23,15 +23,15 @@ export function progressOf({ currentTime, sources, index, audioDuration, }) {
     /* `index || 0` 은 원본에서 옮겨 온 그대로다 — 아직 번호를 못 정한 상태(undefined·NaN)를
        0번으로 본다는 뜻이다. 음수는 그대로 통과하지만 그러면 `sources[음수]` 가 없어서
        아래 else 쪽으로 떨어진다. 부르는 쪽이 음수를 줄 일은 없다. */
-    const 지금 = index || 0;
-    const 이번트랙 = Array.isArray(sources) && sources.length > 0 ? sources[지금] : undefined;
-    const 길이 = 이번트랙
-        ? (이번트랙.duration || audioDuration || 0)
+    const at = index || 0;
+    const track = Array.isArray(sources) && sources.length > 0 ? sources[at] : undefined;
+    const duration = track
+        ? (track.duration || audioDuration || 0)
         : (audioDuration || 0);
-    if (!(길이 > 0))
+    if (!(duration > 0))
         return 0;
     const t = Number.isFinite(currentTime) ? currentTime : 0;
-    return Math.max(0, Math.min(1, t / 길이));
+    return Math.max(0, Math.min(1, t / duration));
 }
 /**
  * **앞뒤 뜸을 포함한 한 트랙의 진행** — 0~1(말귀 요청 (74), 2026-10-05).
@@ -79,8 +79,8 @@ export function padBarSpans({ bars, trackDurationSec, leadInMs, tailMs, }) {
 export function nextTrackIndex(sources, index) {
     if (!Array.isArray(sources))
         return null;
-    const 지금 = index || 0; // progressOf 와 같은 규칙 — 원본에서 옮겨 왔다
-    return 지금 < sources.length - 1 ? 지금 + 1 : null;
+    const at = index || 0; // progressOf 와 같은 규칙 — 원본에서 옮겨 왔다
+    return at < sources.length - 1 ? at + 1 : null;
 }
 /**
  * `pause` 이벤트를 흘려보내야 하는가.

package/dist/packages/core/src/components/Training/audioTimeline.js

@@ -1,18 +1,18 @@
-const 밀리 = (초) => Math.max(0, (typeof 초 === 'number' && Number.isFinite(초) ? 초 : 0) * 1000);
-const 뜸값 = (ms) => Math.max(0, typeof ms === 'number' && Number.isFinite(ms) ? ms : 0);
+const toMs = (sec) => Math.max(0, (typeof sec === 'number' && Number.isFinite(sec) ? sec : 0) * 1000);
+const padMs = (ms) => Math.max(0, typeof ms === 'number' && Number.isFinite(ms) ? ms : 0);
 /** 소리 길이들과 뜸으로 시간표를 짓는다. 길이를 모르는 소리는 0 으로 둔다. */
 export function buildTimeline({ durationsSec, leadInMs = 0, tailMs = 0, }) {
-    const 앞 = 뜸값(leadInMs);
-    const 뒤 = 뜸값(tailMs);
+    const lead = padMs(leadInMs);
+    const tail = padMs(tailMs);
     const segments = [];
-    let 지금 = 0;
-    durationsSec.forEach((초, track) => {
-        for (const [kind, durMs] of [['lead', 앞], ['sound', 밀리(초)], ['tail', 뒤]]) {
-            segments.push({ kind, track, startMs: 지금, durMs });
-            지금 += durMs;
+    let cursor = 0;
+    durationsSec.forEach((sec, track) => {
+        for (const [kind, durMs] of [['lead', lead], ['sound', toMs(sec)], ['tail', tail]]) {
+            segments.push({ kind, track, startMs: cursor, durMs });
+            cursor += durMs;
         }
     });
-    return { segments, totalMs: 지금, trackCount: durationsSec.length };
+    return { segments, totalMs: cursor, trackCount: durationsSec.length };
 }
 /** 한 트랙의 세 구간. 없는 트랙이면 `null` */
 export function trackSegments(tl, track) {
@@ -48,9 +48,9 @@ export function timelineProgress(tl, at) {
     const t = trackSegments(tl, at.track);
     if (!t || !(t.totalMs > 0))
         return 0;
-    const 구간 = t[at.kind];
-    const 흐른 = Math.min(Math.max(0, Number.isFinite(at.elapsedMs) ? at.elapsedMs : 0), 구간.durMs);
-    return Math.max(0, Math.min(1, (구간.startMs - t.lead.startMs + 흐른) / t.totalMs));
+    const segment = t[at.kind];
+    const elapsed = Math.min(Math.max(0, Number.isFinite(at.elapsedMs) ? at.elapsedMs : 0), segment.durMs);
+    return Math.max(0, Math.min(1, (segment.startMs - t.lead.startMs + elapsed) / t.totalMs));
 }
 /**
  * **이 트랙의 막대를 앞뜸 · 소리 · 뒤뜸으로 나눈다.**
@@ -59,27 +59,27 @@ export function timelineProgress(tl, at) {
  * 남는다** — 반올림이 겹쳐 0 이 되면 파형이 통째로 빈다.
  */
 export function timelineBarSpans(tl, track, bars) {
-    const 칸 = Math.max(0, Math.floor(bars));
+    const barCount = Math.max(0, Math.floor(bars));
     const t = trackSegments(tl, track);
-    if (!t || 칸 === 0 || !(t.totalMs > 0) || (t.lead.durMs === 0 && t.tail.durMs === 0) || !(t.sound.durMs > 0)) {
-        return { lead: 0, sound: 칸, tail: 0 };
+    if (!t || barCount === 0 || !(t.totalMs > 0) || (t.lead.durMs === 0 && t.tail.durMs === 0) || !(t.sound.durMs > 0)) {
+        return { lead: 0, sound: barCount, tail: 0 };
     }
-    const 앞칸 = Math.round((t.lead.durMs / t.totalMs) * 칸);
-    const 뒤칸 = Math.round((t.tail.durMs / t.totalMs) * 칸);
-    const 소리칸 = Math.max(1, 칸 - 앞칸 - 뒤칸);
-    const 넘침 = 앞칸 + 소리칸 + 뒤칸 - 칸;
-    return { lead: Math.max(0, 앞칸 - Math.ceil(넘침 / 2)), sound: 소리칸, tail: Math.max(0, 뒤칸 - Math.floor(넘침 / 2)) };
+    const leadBars = Math.round((t.lead.durMs / t.totalMs) * barCount);
+    const tailBars = Math.round((t.tail.durMs / t.totalMs) * barCount);
+    const soundBars = Math.max(1, barCount - leadBars - tailBars);
+    const overflow = leadBars + soundBars + tailBars - barCount;
+    return { lead: Math.max(0, leadBars - Math.ceil(overflow / 2)), sound: soundBars, tail: Math.max(0, tailBars - Math.floor(overflow / 2)) };
 }
 /**
  * **앞 소리가 끝나고 다음 소리가 날 때까지**(ms) — 뒤뜸 + 앞뜸.
  * 마지막 트랙이거나 없는 트랙이면 0.
  */
 export function gapAfterTrackMs(tl, track) {
-    const 지금 = trackSegments(tl, track);
-    const 다음 = trackSegments(tl, track + 1);
-    if (!지금 || !다음)
+    const cursor = trackSegments(tl, track);
+    const nextTrack = trackSegments(tl, track + 1);
+    if (!cursor || !nextTrack)
         return 0;
-    return 지금.tail.durMs + 다음.lead.durMs;
+    return cursor.tail.durMs + nextTrack.lead.durMs;
 }
 /** 그 트랙의 소리가 **누른 뒤 몇 ms 에** 나는가(불러오는 시간은 빼고). 없는 트랙이면 `null` */
 export function soundStartMs(tl, track) {

package/dist/packages/core/src/components/Training/oneShotSound.js

@@ -37,19 +37,19 @@
  * `try` 를 적고 있었고, 그 안에서 하는 일이 조금씩 달랐다.
  */
 export function playOneShot(url, onEnd) {
-    let 풀기 = () => { };
-    const done = new Promise((res) => { 풀기 = res; });
+    let settle = () => { };
+    const done = new Promise((res) => { settle = res; });
     /** 끝은 한 번이다 — 거절과 `error` 가 함께 오는 일이 실제로 있다 */
-    let 끝났나 = false;
-    const 끝 = (played) => {
-        if (끝났나)
+    let ended = false;
+    const finish = (played) => {
+        if (ended)
             return;
-        끝났나 = true;
+        ended = true;
         try {
             onEnd?.(played);
         }
         catch { /* 부르는 쪽의 실패로 약속을 묶어 두지 않는다 */ }
-        풀기(played);
+        settle(played);
     };
     let el;
     try {
@@ -58,17 +58,17 @@ export function playOneShot(url, onEnd) {
     catch {
         /* 요소를 못 만들면 울릴 수 없다 — 부르는 쪽은 `done` 하나만 보면 된다.
            빈 요소를 돌려주는 것은 `el` 을 쥐고 `pause()` 를 부르는 쪽 때문이다. */
-        끝(false);
+        finish(false);
         return { el: {}, stop: () => { }, done };
     }
-    el.onended = () => 끝(true);
-    el.onerror = () => 끝(false);
+    el.onended = () => finish(true);
+    el.onerror = () => finish(false);
     /* `play()` 의 거절도 "못 틀었다" 다(자동재생 막힘 등) */
     try {
-        void el.play().catch(() => 끝(false));
+        void el.play().catch(() => finish(false));
     }
     catch {
-        끝(false);
+        finish(false);
     }
     return {
         el,
@@ -79,7 +79,7 @@ export function playOneShot(url, onEnd) {
                 el.pause();
             }
             catch { /* 이미 정리됐다 */ }
-            끝(false);
+            finish(false);
         },
         done,
     };