@ihabdevteam/core 0.135.0 → 0.137.0

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

@@ -484,6 +484,9 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
         try {
             // 각 URL의 duration을 병렬로 측정 (실패한 URL은 0초로 계속)
             const durations = await Promise.all(ttsUrls.map(url => measureAudioDuration(url, { timeoutMs: 10000 })));
+            // 재는 동안 떠났으면 여기서 끝 — 떼어진 <audio> 에 주소를 물리고 불러오기를 시작하던 것
+            if (!mountedRef.current)
+                return;
             const finalSources = ttsUrls.map((src, i) => ({ src, objectUrl: null, duration: durations[i] || 0 }));
             applySources(finalSources, totalDurationOf(finalSources));
             setFetchDebugStatus('ready');
@@ -525,11 +528,17 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
                     catch (e) {
                         srcUrl = null;
                     }
+                    if (!mountedRef.current)
+                        return false;
                     // resolveUrl 실패 시 blob 다운로드로 폴백
                     if (!srcUrl) {
                         try {
                             setFetchDebugStatus('downloading');
                             const blob = await downloadSound(b.resolvedPath);
+                            /* 내려받는 동안 떠났으면 주소를 만들지 않고 끝낸다 — useObjectUrls 정리가 이미 끝난 뒤라 track 해도 회수되지
+                               않고 남았고, 이어서 떼어진 <audio> 에 물려 내려받기까지 시작했다. */
+                            if (!mountedRef.current)
+                                return false;
                             if (blob) {
                                 const blobObj = blob instanceof Blob ? blob : new Blob([blob]);
                                 objUrl = objectUrls.track(URL.createObjectURL(blobObj));
@@ -557,6 +566,24 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
                 catch (_) {
                     dur = 0;
                 }
+                if (!mountedRef.current) {
+                    // 떠났으면 방금 만든 blob 주소만 회수하고 끝(앞서 만든 것은 정리가 이미 회수했다)
+                    if (objUrl) {
+                        try {
+                            URL.revokeObjectURL(objUrl);
+                        }
+                        catch (_) { }
+                    }
+                    for (const f of finalSources) {
+                        if (f.objectUrl) {
+                            try {
+                                URL.revokeObjectURL(f.objectUrl);
+                            }
+                            catch (_) { }
+                        }
+                    }
+                    return false;
+                }
                 total += dur || 0;
                 finalSources.push({ ...b, src: srcUrl, objectUrl: objUrl, duration: dur });
             }
@@ -1028,7 +1055,7 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
     const fillPausedFlag = playbackState === "paused";
     const fillLeftPercent = Math.max(0, Math.min(100, (progress || 0) * 100));
     const fillClass = cx('audio-player__fill', fillVisibleFlag ? 'is-visible' : '', fillExpandedFlag ? 'is-expanded' : '', fillPausedFlag ? 'is-paused' : '', isFillOutAnimating ? 'is-out' : '');
-    return (_jsxs("div", { className: `audio-player ${isDisabled ? 'is-disabled' : ''}${className ? ` ${className}` : ''}`, role: "group", "aria-label": typeof label === 'string' ? label : undefined, children: [_jsxs("div", { className: `audio-player__panel ${displayedPlaying ? "is-playing" : ""} ${isFetchingUrl ? "is-loading" : ""} ${stateLocal !== "default" ? "is-revealed" : ""}`, children: [isFetchingUrl ? (_jsxs("div", { className: "audio-player__loading", role: "status", "aria-live": "polite", children: [_jsx("span", { className: "audio-player__loading-spinner", "aria-hidden": "true" }), _jsx("span", { className: "audio-player__loading-text", children: STATUS_MESSAGES[fetchDebugStatus] })] })) : null, stateLocal === "active" ? (_jsx("button", { className: "audio-player__button", type: "button", onClick: () => { hideListenTip(); handleToggle(); }, "aria-label": typeof label === 'string' ? label : t('training.listen', '듣기'), onMouseEnter: showListenTip, onMouseLeave: hideListenTip, 
+    return (_jsxs("div", { className: `audio-player ${isDisabled ? 'is-disabled' : ''}${className ? ` ${className}` : ''}`, role: "group", "aria-label": typeof label === 'string' ? label : undefined, children: [_jsxs("div", { className: `audio-player__panel ${displayedPlaying ? "is-playing" : ""} ${isFetchingUrl ? "is-loading" : ""} ${stateLocal !== "default" ? "is-revealed" : ""}`, children: [isFetchingUrl ? (_jsxs("div", { className: "audio-player__loading", role: "status", "aria-live": "polite", children: [_jsx("span", { className: "audio-player__loading-spinner", "aria-hidden": "true" }), _jsx("span", { className: "audio-player__loading-text", children: t(`training.audioStatus.${fetchDebugStatus}`, { defaultValue: STATUS_MESSAGES[fetchDebugStatus] }) })] })) : null, stateLocal === "active" ? (_jsx("button", { className: "audio-player__button", type: "button", onClick: () => { hideListenTip(); handleToggle(); }, "aria-label": typeof label === 'string' ? label : t('training.listen', '듣기'), onMouseEnter: showListenTip, onMouseLeave: hideListenTip, 
                         // 키보드로 이 버튼에 오면 마우스와 동일하게 안내를 띄운다
                         onFocus: showListenTip, onBlur: hideListenTip, children: _jsx("span", { ref: listenBtnRef, className: "audio-player__button-triangle-wrap", children: _jsx("svg", { className: "audio-player__button-triangle", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { ref: triPathRef, d: "M13.2 7.7 L16.5 9.85 Q20.2 12 16.5 14.15 L10 18.3 Q7 19.7 7 16.3 L7 7.7 Q7 4.3 10 5.7 L13.2 7.7" }) }) }) })) : null, listenBtnRect && (_jsx(InfoTooltip, { anchorRect: listenBtnRect, text: typeof label === 'string' && label ? label : t('training.listenLabel', '문장 듣기'), offset: 8 })), _jsxs("div", { className: `audio-player__play ${stateLocal === "playMode" || displayedPlaying ? "is-visible" : ""}`, children: [_jsxs("div", { ref: btnsRef, className: "audio-player__buttons", children: [_jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "skip-back", onClick: handlePrev, ariaLabel: t('training.prev', '이전'), width: "60px", variant: "transparent-white", "aria-hidden": "true", tabIndex: -1, disabled: stateLocal !== 'playMode' }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: displayedPlaying ? "pause" : "play", onClick: handleToggle, ariaLabel: t('common.playPause', '재생 / 멈춤'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "square", onClick: handleStop, ariaLabel: t('training.stop', '정지'), width: "60px", variant: "transparent-white", "aria-hidden": "true", tabIndex: -1, disabled: stateLocal !== 'playMode' }), sourceButtonCount > 1 ? (_jsx("div", { ref: sourceButtonsRef, className: "audio-player__source-buttons", children: Array.from({ length: sourceButtonCount }).map((_, idx) => (_jsx(Button, { htmlType: "button", size: 32, type: "dot", shape: "pill", useBorder: false, label: String(idx + 1), onClick: () => { try {
                                                 handleJumpTo(idx);

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

@@ -36,12 +36,15 @@ export default function TrainingStepCard({ index, stepIndex, isLast = false, tit
     // ── 모두 듣기 — 카드별 소리 듣기 버튼을 순서대로 재생 ──
     const cardRefs = useRef([]);
     const [playingAll, setPlayingAll] = useState(false);
+    const 단계살아있음 = useRef(true);
+    useEffect(() => { 단계살아있음.current = true; return () => { 단계살아있음.current = false; }; }, []);
     // 페이지 전환 시 (items 변경) 이전 선택 상태 및 카드 ref 초기화
     const itemsKey = useMemo(() => items.map((it) => it?.id ?? it?.word ?? '').join('|'), [items]);
     /* eslint-disable react-hooks/set-state-in-effect */
     useEffect(() => {
         setSelectedIndex(null);
-        cardRefs.current = [];
+        /* 카드 ref 는 비우지 않는다 — 마운트 때도 도는 이 effect 가 막 붙은 ref 를 지워, 따로 쓴 단계에서는 다시 그려질
+           일이 없어 '모두 듣기' 가 소리 하나 없이 끝났다. 빠진 카드는 ref 콜백이 null 을 넣고, 재생은 보이는 칸까지만 돈다. */
     }, [itemsKey]);
     /* eslint-enable react-hooks/set-state-in-effect */
     const handlePlayDone = useCallback((item, i) => {
@@ -66,7 +69,11 @@ export default function TrainingStepCard({ index, stepIndex, isLast = false, tit
             return;
         setPlayingAll(true);
         try {
-            for (const cardRef of cardRefs.current) {
+            /* 매 차례 **지금의** 카드를 읽고, 떠났으면 멈춘다 — 시작할 때 잡아 둔 핸들로 돌면 떠난 화면의 다음 카드가 이어서 울렸다 */
+            for (let i = 0; i < shown.length; i++) {
+                if (!단계살아있음.current)
+                    break;
+                const cardRef = cardRefs.current[i];
                 if (!cardRef)
                     continue;
                 await withTimeout(cardRef.play(), PLAY_ALL_CARD_TIMEOUT_MS);
@@ -75,7 +82,7 @@ export default function TrainingStepCard({ index, stepIndex, isLast = false, tit
         finally {
             setPlayingAll(false);
         }
-    }, [playingAll, currentState]);
+    }, [playingAll, currentState, shown.length]);
     const handleSelect = useCallback((item, i) => {
         /* 끝낸 단계(done)에서는 고를 수 없다 — 단추는 `!== 'disabled'` 로 열려 있었는데
            기록은 `=== 'active'` 일 때만 나가서, **화면 선택은 바뀌는데 점수는 그대로**였다.

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

@@ -1,12 +1,14 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo, useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import TrainingStep from './TrainingStep';
 import TrainingWordCard from './TrainingWordCard';
 import './TrainingStep.css';
 import './TrainingStepCard.css';
 /** @public */
-export default function TrainingStepCardOrder({ index, stepIndex, isLast = false, title = '들은 순서대로 카드를 선택하세요.', choices = [], onDone, onChange, }) {
+export default function TrainingStepCardOrder({ index, stepIndex, isLast = false, title, choices = [], onDone, onChange, }) {
+    const { t } = useTranslation();
     const idx = typeof index === 'number' ? index : -1;
     const currentState = typeof stepIndex !== 'number'
         ? 'disabled'
@@ -17,42 +19,50 @@ export default function TrainingStepCardOrder({ index, stepIndex, isLast = false
                 : 'disabled';
     // selectedOrder[i] = 선택 순서 (1-based), null = 미선택
     const [selectedOrder, setSelectedOrder] = useState(() => choices.map(() => null));
-    // choices 변경 시 초기화 (choicesKey로 내용까지 비교 — 개수만이 아닌 실제 단어 변경도 감지)
-    const choicesKey = choices.join('|');
+    // choices 변경 시 초기화 (choicesKey로 내용까지 비교 — 개수만이 아닌 실제 단어 변경도 감지).
+    // 열쇠는 JSON 으로 — '|' 로 잇고 가르면 낱말에 '|' 가 든 경우 칸 수가 늘어 모두 골라도 끝나지 않았다.
+    const choicesKey = JSON.stringify(choices);
+    const choiceCount = choices.length;
     /* eslint-disable react-hooks/set-state-in-effect */
     useEffect(() => {
-        setSelectedOrder(choicesKey ? choicesKey.split('|').map(() => null) : []);
+        setSelectedOrder(Array.from({ length: choiceCount }, () => null));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [choicesKey]);
     /* eslint-enable react-hooks/set-state-in-effect */
     const nextRank = useMemo(() => selectedOrder.filter(v => v !== null).length + 1, [selectedOrder]);
+    /* 다음 배열은 updater **밖에서** 셈하고 알린다 — updater 안에서 onChange·onDone 을 부르면 StrictMode 에서 한 번
+       클릭에 두 번씩 나갔다. 풀 때도 알린다(전에는 풀면 부모가 옛 순서를 그대로 들고 있었다). */
     const handleSelect = useCallback((i) => {
         if (currentState !== 'active')
             return;
-        setSelectedOrder(prev => {
-            const arr = [...prev];
-            if (arr[i] !== null) {
-                // 이미 선택된 카드 → 해당 순서 이후 선택 모두 해제
-                const rank = arr[i];
-                return arr.map(v => (v !== null && v >= rank ? null : v));
-            }
+        const prev = selectedOrder;
+        let arr;
+        if (prev[i] != null) {
+            // 이미 선택된 카드 → 해당 순서 이후 선택 모두 해제
+            const rank = prev[i];
+            arr = prev.map(v => (v !== null && v >= rank ? null : v));
+        }
+        else {
             // 미선택 카드 → 다음 순서 부여
+            arr = [...prev];
             arr[i] = nextRank;
-            const payload = { selectedOrder: arr, words: choices, __ts: Date.now() };
+        }
+        setSelectedOrder(arr);
+        const payload = { selectedOrder: arr, words: choices, __ts: Date.now() };
+        try {
+            if (typeof onChange === 'function')
+                onChange(payload);
+        }
+        catch { }
+        // 새로 골라 모두 선택됐으면 완료
+        if (prev[i] == null && arr.length > 0 && arr.every(v => v !== null)) {
             try {
-                if (typeof onChange === 'function')
-                    onChange(payload);
+                if (typeof onDone === 'function')
+                    onDone(payload);
             }
             catch { }
-            // 모두 선택됐으면 완료
-            if (arr.every(v => v !== null)) {
-                try {
-                    if (typeof onDone === 'function')
-                        onDone(payload);
-                }
-                catch { }
-            }
-            return arr;
-        });
-    }, [currentState, nextRank, onChange, onDone, choices]);
-    return (_jsx(TrainingStep, { index: index, stepIndex: stepIndex, isLast: isLast, title: title, onDone: onDone, children: _jsx("div", { className: "training-step__cards", children: choices.map((word, i) => (_jsx(TrainingWordCard, { item: { word }, disabled: currentState === 'disabled', selectable: true, selected: selectedOrder[i] !== null, orderRank: selectedOrder[i], onSelect: () => handleSelect(i), flipDelay: i * 120, hideLabel: false, hideAudio: true }, `${word}-${i}`))) }) }));
+        }
+    }, [currentState, selectedOrder, nextRank, onChange, onDone, choices]);
+    const resolvedTitle = title ?? t('training.selectInOrder', '들은 순서대로 카드를 선택하세요.');
+    return (_jsx(TrainingStep, { index: index, stepIndex: stepIndex, isLast: isLast, title: resolvedTitle, onDone: onDone, children: _jsx("div", { className: "training-step__cards", children: choices.map((word, i) => (_jsx(TrainingWordCard, { item: { word }, disabled: currentState === 'disabled', selectable: true, selected: selectedOrder[i] !== null, orderRank: selectedOrder[i], onSelect: () => handleSelect(i), flipDelay: i * 120, hideLabel: false, hideAudio: true }, `${word}-${i}`))) }) }));
 }

package/dist/packages/core/src/components/Training/TrainingStepOrderList.d.ts

@@ -3,5 +3,4 @@ import "./TrainingStep.css";
 import "./TrainingStepOrderList.css";
 import type { TrainingStepOrderListProps } from './trainingStepOrderListTypes';
 export type { TrainingContextItem, ShuffledItem, ChangeResult, TrainingStepOrderListProps } from './trainingStepOrderListTypes';
-/** @public */
 export default function TrainingStepOrderList({ index, stepIndex, isLast, title, onDone, onChange, context, }: TrainingStepOrderListProps): import("react").JSX.Element;

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

@@ -9,7 +9,10 @@ import "./TrainingStep.css";
 import TrainingStep from "./TrainingStep";
 import "./TrainingStepOrderList.css";
 /** @public */
-export default function TrainingStepOrderList({ index, stepIndex, isLast = false, title, onDone, onChange, context = [], }) {
+/* 기본 context 는 **모듈에 하나** — 매 렌더 새 `[]` 면 [context] effect 가 매번 다시 돌아 setState·onChange 로 렌더가 끝없이
+   반복됐다(자료를 불러오기 전 context 없이 그린 단계에서 CPU 100%). */
+const 빈문맥 = [];
+export default function TrainingStepOrderList({ index, stepIndex, isLast = false, title, onDone, onChange, context = 빈문맥, }) {
     const { t } = useTranslation();
     const resolvedTitle = title ?? t('training.orderListDefault', '문장을 들은 순서대로 배치하세요.');
     const toText = (v) => typeof v === "string"
@@ -32,7 +35,13 @@ export default function TrainingStepOrderList({ index, stepIndex, isLast = false
     const 조작가능 = currentState !== 'disabled';
     // context 변경 시 items/shuffled를 다시 초기화하는 의도된 동기화다
     /* eslint-disable react-hooks/set-state-in-effect */
+    /* 같은 context 로 다시 도는 effect(StrictMode 의 두 번 실행, 숨김→보임)는 넘긴다 — 다시 섞고 다시 알리면 처음 알림의
+       배치가 화면에 한 번도 안 뜬 배치였고 onChange·onDone 이 두 번씩 나갔다. 새 context 일 때만 섞는다. */
+    const 섞은문맥 = useRef(undefined);
     useEffect(() => {
+        if (섞은문맥.current === context)
+            return;
+        섞은문맥.current = context;
         const it = Array.isArray(context) ? context : [];
         setItems(it);
         const makeInitial = (src) => {
@@ -119,6 +128,12 @@ export default function TrainingStepOrderList({ index, stepIndex, isLast = false
         if (rafRef.current !== null)
             return;
         const loop = () => {
+            /* 끄는 것이 없으면 멈춘다 — dragstart 가 건 첫 프레임이 돌기 전에 dragend·언마운트가 오면 비어 있는 rafRef 만
+               취소돼, 뒤늦게 켜진 루프가 60fps 로 영영 돌았다. */
+            if (!draggingObjRef.current) {
+                rafRef.current = null;
+                return;
+            }
             rafRef.current = requestAnimationFrame(loop);
             const p = lastPosRef.current;
             const off = dragOffsetRef.current || { dx: 0, dy: 0 };

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

@@ -54,10 +54,13 @@ export default function TrainingStepTextBox({ context, state = "disabled", theme
             return context;
         return "";
     }, [context]);
-    useEffect(() => {
-        const id = setTimeout(() => setLocalStatus("disabled"), 0);
-        return () => clearTimeout(id);
-    }, [content]);
+    /* 문장이 바뀌면 **그 렌더에서** 가린다 — 타이머로 한 틱 뒤에 가리면, 앞 문제에서 펼쳐 둔 상자에 다음 문제 문장이
+       잠깐 드러났다(정답 문장이 번쩍). 렌더 중 상태 조정은 React 가 권하는 꼴이다. */
+    const [보던문장, set보던문장] = useState(content);
+    if (보던문장 !== content) {
+        set보던문장(content);
+        setLocalStatus("disabled");
+    }
     const displayStatus = state === "disabled" ? localStatus : state;
     const stateClass = displayStatus === "disabled"
         ? "training-text-box--disabled"

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

@@ -87,5 +87,8 @@ export default function TrainingStepTitle({ title, children, className = "", sta
             setPreviewContent(null);
         }
     }, [onPreviewTextBtn, previewText, showPreview]);
-    return (_jsxs("div", { className: rowClass, children: [_jsx("p", { className: cls, children: _jsx("span", { className: "training-step__title-text", children: title ?? children }) }), (usePreviewTextBtn || usePlayAllBtn) ? (_jsxs("div", { className: "title-controls", children: [_jsxs("div", { className: "title-buttons", children: [usePlayAllBtn && (_jsx(Button, { htmlType: "button", size: 32, type: isMobile ? 'dot' : 'bar', icon: "play-circle", label: isMobile ? undefined : t('training.playAll', '모두 듣기'), ariaLabel: t('training.playAll', '모두 듣기'), selected: playAllActive, onClick: onPlayAll, variant: state === 'disabled' ? 'disabled' : 'default', disabled: state === 'disabled' || playAllActive })), usePreviewTextBtn && (_jsx("div", { ref: btnRef, children: _jsx(Button, { htmlType: "button", size: 32, type: isMobile ? 'dot' : 'bar', icon: "eye", label: isMobile ? undefined : t('training.sentencePreview', '문장 미리보기'), ariaLabel: t('training.sentencePreview', '문장 미리보기'), selected: showPreview, onClick: handlePreviewButtonClick, variant: state === 'disabled' ? 'disabled' : 'default', disabled: !previewText && typeof onPreviewTextBtn !== 'function' }) }))] }), showPreview && (_jsx(TextBoxTooltip, { text: (previewContent ?? previewText), label: t('training.sentencePreview', '문장 미리보기'), anchorRect: anchorRect, onClose: handlePreviewClose, closeOnOutsideClick: false, isMobilePopup: true }))] })) : null] }));
+    return (_jsxs("div", { className: rowClass, children: [_jsx("p", { className: cls, children: _jsx("span", { className: "training-step__title-text", children: title ?? children }) }), (usePreviewTextBtn || usePlayAllBtn) ? (_jsxs("div", { className: "title-controls", children: [_jsxs("div", { className: "title-buttons", children: [usePlayAllBtn && (_jsx(Button, { htmlType: "button", size: 32, type: isMobile ? 'dot' : 'bar', icon: "play-circle", label: isMobile ? undefined : t('training.playAll', '모두 듣기'), ariaLabel: t('training.playAll', '모두 듣기'), selected: playAllActive, onClick: onPlayAll, variant: state === 'disabled' ? 'disabled' : 'default', disabled: state === 'disabled' || playAllActive, 
+                                // 재생 중에는 native disabled 를 달지 않는다 — 키보드로 누른 단추에 disabled 가 붙으면 초점이 body 로 빠졌다.
+                                // onDisabledClick 을 주면 Button 은 aria-disabled 로만 막고 클릭은 여기서 버린다.
+                                onDisabledClick: playAllActive && state !== 'disabled' ? () => { } : undefined })), usePreviewTextBtn && (_jsx("div", { ref: btnRef, children: _jsx(Button, { htmlType: "button", size: 32, type: isMobile ? 'dot' : 'bar', icon: "eye", label: isMobile ? undefined : t('training.sentencePreview', '문장 미리보기'), ariaLabel: t('training.sentencePreview', '문장 미리보기'), selected: showPreview, onClick: handlePreviewButtonClick, variant: state === 'disabled' ? 'disabled' : 'default', disabled: !previewText && typeof onPreviewTextBtn !== 'function' }) }))] }), showPreview && (_jsx(TextBoxTooltip, { text: (previewContent ?? previewText), label: t('training.sentencePreview', '문장 미리보기'), anchorRect: anchorRect, onClose: handlePreviewClose, closeOnOutsideClick: false, isMobilePopup: true }))] })) : null] }));
 }

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

@@ -9,7 +9,7 @@ import useMediaQuery from '../../hooks/useMediaQuery';
 import { getImageResolver } from '../../utils/imageConfig';
 import { useWordImage } from '../../hooks/useWordImage';
 import { getTTSUrlResolver, getTTSFallbackUrlResolver } from '../../utils/ttsConfig';
-import { claimSound } from './currentSound';
+import { claimSound, stopSoundIfOwner } from './currentSound';
 import SymbolSvg from '../../logo/Symbol_speechear_black.svg';
 import { resolveAssetUrl } from '../../utils/assets';
 import './TrainingWordCard.css';
@@ -80,8 +80,17 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
         return () => { cancelled = true; };
     }, [rawAudioSrc, label, audioFor]);
     // ── 언마운트 시 오디오 정리 ──
+    /* 떠날 때 **이 카드가 쥔 소리** 도 끊는다 — audio 만 멈춰, 음원 없는 낱말(speechSynthesis)을 듣는 중에 떠나면 말이
+       계속 나왔다. 남이 이미 가져간 소리는 건드리지 않는다(stopSoundIfOwner). 떠난 뒤에는 기다리던 합성 주소가 와도 울리지 않는다. */
+    const mountedRef = useRef(true);
+    const 쥔소리Ref = useRef(null);
     useEffect(() => {
+        mountedRef.current = true;
         return () => {
+            mountedRef.current = false;
+            if (쥔소리Ref.current)
+                stopSoundIfOwner(쥔소리Ref.current);
+            쥔소리Ref.current = null;
             try {
                 audioRef.current?.pause();
             }
@@ -143,7 +152,7 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
     // 재생 우선순위: ① 정식 음원 URL → ② 앱이 등록한 런타임 합성 폴백(예: Gemini-TTS) →
     // ③ 브라우저 speechSynthesis. ②가 있으면 아직 음원이 없는 단어도 표준발음으로 들린다.
     const playAudio = useCallback(async () => {
-        if (disabled)
+        if (disabled || !mountedRef.current)
             return;
         /* 이전 재생을 확실히 끊고 시작한다(겹침 방지).
     
@@ -151,7 +160,7 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
            것**이라, 옆 카드가 울리는 것은 못 멈췄다 — 변별 훈련에서 1번·2번을 잇달아 누르면
            둘이 함께 울렸다. speechSynthesis 만 전역이라 음원 없는 낱말에서는 멀쩡해 보였고,
            그래서 증상이 반만 나타났다. 스피커가 하나이므로 자물쇠도 전역에 둔다. */
-        const release = claimSound(() => {
+        const 멈춤 = () => {
             try {
                 audioRef.current?.pause();
             }
@@ -161,7 +170,9 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
             }
             catch { /* 미지원 환경 */ }
             setPlaying(false);
-        });
+        };
+        const release = claimSound(멈춤);
+        쥔소리Ref.current = 멈춤;
         try {
             window.speechSynthesis?.cancel();
         }
@@ -178,6 +189,8 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
             if (fallbackResolver && label) {
                 try {
                     const url = await Promise.resolve(fallbackResolver(label));
+                    if (!mountedRef.current)
+                        return;
                     if (url) {
                         setPlaying(true);
                         if (await playUrl(url))
@@ -186,10 +199,14 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
                 }
                 catch { }
             }
+            if (!mountedRef.current)
+                return;
             await playSpeechSynthesis();
         }
         finally {
             release(); // 다음 사람이 이미 가져갔으면 아무 일도 안 한다
+            if (쥔소리Ref.current === 멈춤)
+                쥔소리Ref.current = null;
         }
     }, [disabled, audioUrl, label, playUrl, playSpeechSynthesis]);
     useImperativeHandle(ref, () => ({

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

@@ -93,13 +93,19 @@ export default function WordTablePopup({ items, words, title, subtitle, emptyTex
     const customFooter = useMemo(() => (renderFooter ? renderFooter({ print: handlePrint, openNewWindow }) : undefined), [renderFooter, handlePrint, openNewWindow]);
     // 메뉴 '인쇄하기' 진입: 팝업이 열리고 표가 렌더된 직후 인쇄를 1회 자동 시작.
     // 짧은 지연은 WordTable 레이아웃 확정용 — 인쇄 iframe 쪽이 이미지 로드는 별도로 기다린다(wordTablePrint).
+    /* '했다' 는 **타이머가 실제로 울렸을 때** 적는다 — 걸 때 적으면 StrictMode 의 두 번 실행이나 100ms 안에 인쇄 설정이
+       바뀌어(handlePrint 가 새로 만들어져) 앞 타이머가 걷힌 뒤 다시 걸지 못해, 인쇄가 한 번도 안 떴다. 부르는 것은 최신 print. */
     const autoPrintDone = useRef(false);
+    const printRef = useRef(handlePrint);
+    useEffect(() => { printRef.current = handlePrint; }, [handlePrint]);
     useEffect(() => {
         if (!autoPrint || autoPrintDone.current)
             return;
-        autoPrintDone.current = true;
-        const id = window.setTimeout(() => handlePrint(), 100);
+        const id = window.setTimeout(() => {
+            autoPrintDone.current = true;
+            printRef.current();
+        }, 100);
         return () => window.clearTimeout(id);
-    }, [autoPrint, handlePrint]);
+    }, [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, 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, 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 }) }))] })) : (_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/currentSound.d.ts

@@ -22,5 +22,10 @@
  *          이미 다음 사람이 가져갔으면 그 사람 것을 지우면 안 된다.
  */
 export declare function claimSound(stop: () => void): () => void;
+/**
+ * **내 소리가 아직 울리고 있을 때만** 멈추고 자리를 비운다 — 소리를 낸 화면이 떠날 때 쓴다.
+ * 이미 다음 사람이 가져갔으면 아무것도 안 한다(남의 소리를 끊지 않는다).
+ */
+export declare function stopSoundIfOwner(stop: () => void): void;
 /** 지금 울리는 것을 멈춘다 — 화면을 떠날 때처럼, 새로 울릴 것이 없을 때 쓴다 */
 export declare function stopCurrentSound(): void;

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

@@ -34,6 +34,19 @@ export function claimSound(stop) {
     return () => { if (stopCurrent === stop)
         stopCurrent = null; };
 }
+/**
+ * **내 소리가 아직 울리고 있을 때만** 멈추고 자리를 비운다 — 소리를 낸 화면이 떠날 때 쓴다.
+ * 이미 다음 사람이 가져갔으면 아무것도 안 한다(남의 소리를 끊지 않는다).
+ */
+export function stopSoundIfOwner(stop) {
+    if (stopCurrent !== stop)
+        return;
+    stopCurrent = null;
+    try {
+        stop();
+    }
+    catch { /* 무시 */ }
+}
 /** 지금 울리는 것을 멈춘다 — 화면을 떠날 때처럼, 새로 울릴 것이 없을 때 쓴다 */
 export function stopCurrentSound() {
     if (!stopCurrent)

package/dist/packages/core/src/components/Training/trainingBlockButtonTypes.d.ts

@@ -41,8 +41,10 @@ export interface TrainingBlockButtonProps {
      * - `small`: 120×120px 축소 카드 (행 펼치기 영역 등 좁은 공간용)
      * - `list`: 너비 200px · 최소 높이 68px 가로형 항목
      * - `compact`: 툴팁 등 좁은 공간용 소형 리스트 항목 (전체 너비 × 높이 40px, 작은 아이콘)
+     * - `row`: 전체 너비 가로 행 — [아이콘][유형·제목][문항수]. 미리 듣기 단추는 없다.
+     *   좁은 화면에서 정사각형 카드 대신 쓴다(카드는 폭이 줄면 내용이 눌린다). 유형 줄은 `showTypeLabel` 일 때.
      */
-    size?: 'square' | 'small' | 'list' | 'compact';
+    size?: 'square' | 'small' | 'list' | 'compact' | 'row';
     renderPopup?: (props: TrainingBlockButtonPopupProps) => ReactNode;
     completedIds?: Set<string>;
     /** 선택 상태 ID Set. 포함된 항목(완료가 아닌 것)에 체크 배지를 표시 — 완료와 같은 배지이고, `hideCheckBadge` 면 숨는다. */

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

@@ -57,8 +57,15 @@ export function summarizeMisses(records) {
         cur.lastSelected = r.selected;
         /* 세트는 **최근 것이 앞**이어야 한다 — 다음 훈련을 짤 때 옛 세트를 먼저 집으면
            그 사이 세트가 바뀌었을 수 있다. 시간순으로 훑고 있으니 앞에 넣는다. */
-        if (r.setId && !cur.setIds.includes(r.setId))
-            cur.setIds.unshift(r.setId);
+        /* 이미 있던 세트를 다시 풀었으면 **빼서 다시 앞으로** — 건너뛰기만 하면 A→B→A 순서에서 [B, A] 로 남아
+           복습이 가장 최근 세트(A) 대신 옛 세트(B)로 짜였다. */
+        if (r.setId) {
+            const at = cur.setIds.indexOf(r.setId);
+            if (at > 0)
+                cur.setIds.splice(at, 1);
+            if (at !== 0)
+                cur.setIds.unshift(r.setId);
+        }
         모음.set(key, cur);
     }
     const items = [...모음.entries()].map(([key, v]) => ({

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

@@ -1,4 +1,5 @@
 'use client';
+import i18n from "i18next";
 import { getTopicTypes } from "../../utils/categories";
 /** @public */
 export function normalizeCats(item) {
@@ -43,6 +44,12 @@ export function splitTrainingVariants(value) {
     }
     return [String(value)];
 }
+const 이름 = (key, 기본) => {
+    if (!기본)
+        return 기본;
+    const s = typeof i18n?.t === "function" ? i18n.t(key, { defaultValue: 기본 }) : undefined;
+    return typeof s === "string" && s ? s : 기본;
+};
 /** @public */
 export function resolveTrainingPopupMeta(trainingData, depth, fallbackTitle) {
     const td = trainingData;
@@ -62,7 +69,11 @@ export function resolveTrainingPopupMeta(trainingData, depth, fallbackTitle) {
         wrapperStyle: category?.color
             ? { "--t-item-fg": category.color }
             : undefined,
-        iconTooltip: [category?.label, subCategory?.label].filter(Boolean).join(" / ") || undefined,
+        // 카테고리 이름은 지금 언어로(topic.* · topic.sub.*, 사전에 없으면 등록된 이름)
+        iconTooltip: [
+            category ? 이름(`topic.${category.key}`, category.label) : undefined,
+            subCategory ? 이름(`topic.sub.${subCategory.key}`, subCategory.label) : undefined,
+        ].filter(Boolean).join(" / ") || undefined,
     };
 }
 /** @public */

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

@@ -168,6 +168,10 @@ export function useNoiseFade({ noisePlayer, audioRef, playbackStateRef, }) {
             }
             catch (e) { }
             noiseAudioRef.current = null;
+            /* 이 요소에 물린 파일 기록도 함께 걷는다 — 남겨 두면 다시 만든 요소(StrictMode 의 두 번 실행, <Activity> 숨김→보임)에
+               설정 효과가 "이미 불러옴" 으로 보고 주소를 안 물려, 파형은 그려지는데 소음은 끝까지 안 났다. */
+            noiseTypeLoadedRef.current = null;
+            pendingNoiseUrlRef.current = null;
         };
     }, [cancelNoiseFade]);
     // 소음 감시(watchdog) — 메인이 재생 중이 아닌데 소음만 재생 중이면 강제로 정지한다.

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

@@ -17,6 +17,8 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
        end 이벤트를 내서, **정지를 누르면 끝까지 들은 것으로** handleEnd → onDone(true) 가 불렸고(문항 완료로 셈),
        언마운트 뒤에 온 end 가 떠난 화면에 완료를 알렸다. 번호가 다른 end 는 넘긴다. */
     const ttsTokenRef = useRef(0);
+    /** 이 훅이 말을 건 적이 있나 — 떠날 때 **제 말만** 끊는다(마운트만 한 단계가 다른 곳의 말을 끊던 것) */
+    const 말했나Ref = useRef(false);
     useEffect(() => {
         // cleanup TTS resources on unmount
         return () => {
@@ -26,11 +28,12 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
                     cancelAnimationFrame(ttsRafRef.current);
                     ttsRafRef.current = null;
                 }
-                if (window.speechSynthesis) {
+                if (말했나Ref.current && window.speechSynthesis) {
                     try {
                         window.speechSynthesis.cancel();
                     }
                     catch (e) { }
+                    말했나Ref.current = false;
                 }
             }
             catch (e) { }
@@ -138,6 +141,7 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
                 catch (e) { }
             };
             try {
+                말했나Ref.current = true;
                 synth.speak(utt);
             }
             catch (e) {

package/dist/packages/core/src/components/Word/WordTableBlock.js

@@ -20,7 +20,7 @@ import { formatYmd, getTodayKst } from '../../utils/date';
 import { getSavedTables } from '../../utils/savedWordTables';
 import { devWarnOnce } from '../../utils/devWarn';
 import { useWordTablePrint } from './useWordTablePrint';
-import { CELL_COUNTS } from './wordTableBlockTypes';
+import { CELL_COUNTS, ITEMS_PER_PAGE_OPTIONS } from './wordTableBlockTypes';
 // ── 컴포넌트 ───────────────────────────────────────────────
 /** @public */
 export default function WordTableBlock({ title, titleIcon, disc, items, onSaveComplete, onLoad, onRemoveItem, onReset, resetLabel, saveButtonLabel, secondarySaveButtonLabel, onReorder, showCellCount, onAddItem, className, renderSavePopup, renderWordSearch, hideControls, saveOnly, tableName, nameValue, onNameChange, descriptionValue, onDescriptionChange, namePlaceholder, descriptionPlaceholder, existingNames, editingName, onCancel }) {
@@ -191,7 +191,10 @@ export default function WordTableBlock({ title, titleIcon, disc, items, onSaveCo
                 setDisplayCellCount(parseInt(value));
         }
         else if (sectionLabel === t(hasPairs ? 'wordTable.filter.itemsPerPagePair' : 'wordTable.filter.itemsPerPageWord')) {
-            setItemsPerPageSetting(parseInt(value));
+            /* 목록에 없는 개수(= 그때의 '전체' 칸)를 고르면 **전체** 로 기억한다 — 숫자로 담으면 항목이 늘었을 때 고른 값('10개')이
+               선택지([20, 8, 4, 2, 1])에 없어 켜진 칸이 없는데 표는 10개씩 나뉘었다. */
+            const n = parseInt(value);
+            setItemsPerPageSetting(ITEMS_PER_PAGE_OPTIONS.includes(n) ? n : Number.POSITIVE_INFINITY);
         }
         else if (sectionLabel === t('wordTable.filter.pageNumber', '페이지 번호')) {
             setPageNumberPosition(parsePageNumberPosition(value));

package/dist/packages/core/src/components/Word/WordTableButton.js

@@ -16,6 +16,9 @@ export default function WordTableButton({ items, name, description, createdAt, p
     const renaming = titleNode != null;
     const hasStoreFooter = publisherName != null || publishedAt != null || likeCount != null || downloadCount != null;
     const handleKey = (e) => {
+        // 카드 안 단추('더보기'·게시자)에서 누른 키는 그 단추 몫이다 — 가로채면 카드가 열리고 단추 클릭은 막혔다(pressable 과 같은 규칙)
+        if (e.target !== e.currentTarget)
+            return;
         if (!renaming && (e.key === 'Enter' || e.key === ' ')) {
             e.preventDefault();
             onClick?.();

package/dist/packages/core/src/components/Word/useWordTableDisplaySettings.js

@@ -2,6 +2,7 @@
 import { useMemo, useState, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { chunkItems } from '../wordTableLayout';
+import { ITEMS_PER_PAGE_OPTIONS } from './wordTableBlockTypes';
 import { getImageResolver, checkImageExists } from '../../utils/imageConfig';
 import { buildCompositionSection, buildOrientationSection, buildBorderSection, buildCutLineSection, buildDivLineSection, buildItemsPerPageSection, buildPageNumberSection, buildTableSettingsSelected, applyTableSettingsSelect, PAGE_NUM_POSITION_VALUE, parsePageNumberPosition, } from './wordTableSettings';
 /**
@@ -68,7 +69,10 @@ export function useWordTableDisplaySettings(items) {
         if (applyTableSettingsSelect(t, value, sectionLabel, { setContentTypes, setOrientation, setShowOutline, setCutLine, setShowDivLine }))
             return;
         if (sectionLabel === t('wordTable.filter.itemsPerPagePair', '페이지당 대립쌍 수') || sectionLabel === t('wordTable.filter.itemsPerPageWord', '페이지당 단어 수')) {
-            setItemsPerPageSetting(parseInt(value));
+            /* 목록에 없는 개수(= 그때의 '전체' 칸)를 고르면 **전체** 로 기억한다 — 숫자로 담으면 항목이 늘었을 때 고른 값('10개')이
+               선택지([20, 8, 4, 2, 1])에 없어 켜진 칸이 없는데 표는 10개씩 나뉘었다. */
+            const n = parseInt(value);
+            setItemsPerPageSetting(ITEMS_PER_PAGE_OPTIONS.includes(n) ? n : Number.POSITIVE_INFINITY);
         }
         else if (sectionLabel === t('wordTable.filter.pageNumber', '페이지 번호')) {
             setPageNumberPosition(parsePageNumberPosition(value));

package/dist/packages/core/src/components/Word/wordScoreStats.js

@@ -62,12 +62,17 @@ export function tableTrends(records) {
     }
     const out = [];
     for (const v of 모음.values()) {
-        const rows = [...v.rows].sort((a, b) => a.scoredAt.localeCompare(b.scoredAt));
+        /* 매긴 칸이 하나도 없는 기록은 흐름에서 뺀다 — 정답률 0%로 넣으면 [0, 0.5] 처럼 나아진 적 없는 표가 +50%로 읽혔다
+           (summarize 는 같은 경우를 null 로 따로 둔다). 모두 비었으면 그 표는 흐름이 없다. */
+        const 매긴수 = (r) => Object.values(r.marks).filter(m => m === 'o' || m === 'triangle' || m === 'x').length;
+        const rows = v.rows.filter(r => 매긴수(r) > 0).sort((a, b) => a.scoredAt.localeCompare(b.scoredAt));
+        if (rows.length === 0)
+            continue;
         const rates = rows.map(r => {
             const vals = Object.values(r.marks);
             const o = vals.filter(m => m === 'o').length;
             const tri = vals.filter(m => m === 'triangle').length;
-            return 점수(o, tri, vals.filter(m => m === 'o' || m === 'triangle' || m === 'x').length);
+            return 점수(o, tri, 매긴수(r));
         });
         out.push({
             tableName: v.tableName,