@ihabdevteam/core 0.149.0 → 0.151.0

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

@@ -26,11 +26,35 @@ import useTrainingSessionLog from '../../hooks/useTrainingSessionLog';
 import { logTrainingCompletion } from '../../utils/trainingLogger';
 import { toItemResults } from '../../utils/trainingItemResults';
 import { loadNoiseSettings, saveNoiseSettings, reportAppliedNoiseSettings } from '../../utils/noiseSettingsStore';
+/** 판 중 소음 설정 변경을 저장하기 전 기다리는 시간(ms) — 멈춘 뒤 이만큼 지나면 마지막 값만 저장한다. */
+const NOISE_SAVE_DEBOUNCE_MS = 300;
+/* 움직임 최소화면 닫힘 대기를 0 으로 — 사라지는 애니메이션을 보여 줄 까닭이 없다. (공용 훅이 생기면 그것으로 합친다.) */
+const 움직임최소화 = () => {
+    try {
+        return typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    }
+    catch (e) {
+        return false;
+    }
+};
+/** 결과를 계산하는 중인 결과 창 자리 — 이 객체와 **같은 것**이면 계산 중이다(결과 창의 '완료' 를 막는다). */
+const 결과계산중 = Object.freeze({});
 import { 키보드로눌렀나 } from '../../hooks/inputModality';
 // 문장 4종은 각 PagePopup 래퍼에서 useTrainingSessionLog로 이미 기록 → 베이스에서 중복 방지
 const SENTENCE_TIME_LOGGED_TYPES = new Set(['LISTEN_IN_NOISE', 'SHORT_STORY', 'LONG_STORY', 'ORDERING_SENTENCE']);
-// renderResultPopup 미지정 시 기본 결과 팝업 — 모든 훈련 타입 공통 폴백
-const defaultRenderResult = (p) => _jsx(TrainingResultPopup, { score: p.score, contextsLength: p.contextsLength, results: p.results, onReplay: p.onReplay, onClose: p.onClose });
+/** 결과 창 자료에서 정답/전체를 센다 — 결과 항목 형태가 훈련 타입마다 달라(소음 하 듣기/문장 순서화는 correct 대신
+ *  heard/judgement 만 채움 — TrainingResultPopup 의 resolveDecision 과 같은 기준) 이 필드들도 본다. */
+function 판결과셈(resultOverlay) {
+    const ro = resultOverlay;
+    const results = (ro?.results || ro?.answers || []);
+    const total = Array.isArray(results) && results.length > 0 ? results.length : null;
+    const correct = Array.isArray(results)
+        ? results.filter(r => r?.correct === true || r?.isCorrect === true || r?.score === 1 ||
+            r?.heard === true || r?.judgement === true).length
+        : null;
+    return { results, correct: total != null ? correct : null, total };
+}
+const defaultRenderResult = (p) => _jsx(TrainingResultPopup, { score: p.score, contextsLength: p.contextsLength, results: p.results, onReplay: p.onReplay, onClose: p.onClose, pending: p.pending });
 import { getScenarioPageId, getScenarioStepKey, createScenarioFlowState, resolveScenarioStepProps, } from './trainingScenario';
 function TrainingPagePopupInner(props) {
     const { scenario, title, subTitle, depth, icon, wrapperStyle, iconTooltip, pageIndex, pageCount, stepIndex, stepCount, onBack, onComplete, onNext, onSettings, useNoiseSetting = true, children, ariaLabel, label, buildResults, onResult: externalOnResultProp, typeKey, entryPoint, dailyTotal, itemRef, renderResultPopup, noiseOverride, } = props;
@@ -171,6 +195,33 @@ function TrainingPagePopupInner(props) {
         else
             setNoiseAnalyser(analyser);
     }, []);
+    /* 판 중 변경의 저장은 **멈춘 뒤 300ms 에 마지막 값만** 보낸다 — 전에는 슬라이더를 끄는 동안 움직일 때마다 저장이 나갔다
+       (한 번 끌면 수십 번의 네트워크 쓰기, 늦게 도착한 앞 값이 뒤 값을 덮을 수도). 떠날 때·pagehide·탭 숨김에는 남은 값을 즉시 보낸다. */
+    const 저장대기Ref = useRef(null);
+    const 저장타이머Ref = useRef(null);
+    const flushNoiseSave = useCallback(() => {
+        if (저장타이머Ref.current !== null) {
+            clearTimeout(저장타이머Ref.current);
+            저장타이머Ref.current = null;
+        }
+        const 남은값 = 저장대기Ref.current;
+        저장대기Ref.current = null;
+        if (남은값)
+            saveNoiseSettings(남은값);
+    }, []);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const 숨김 = () => { if (document.visibilityState === 'hidden')
+            flushNoiseSave(); };
+        window.addEventListener('pagehide', flushNoiseSave);
+        document.addEventListener('visibilitychange', 숨김);
+        return () => {
+            window.removeEventListener('pagehide', flushNoiseSave);
+            document.removeEventListener('visibilitychange', 숨김);
+            flushNoiseSave();
+        };
+    }, [flushNoiseSave]);
     // noiseSettings에 병합 + 영속화(fire-and-forget) — setSettings/setPlaybackRate/setMainVolume가 공유
     const mergeAndSaveSettings = useCallback((next) => {
         const merged = mergeNoiseSettings(noiseSettingsRef.current, next);
@@ -183,10 +234,14 @@ function TrainingPagePopupInner(props) {
             return;
         }
         // noiseOverride 판은 저장하지 않는다 — 판 중에 바꾼 것도 이 판에만.
-        if (!noiseOverrideRef.current)
-            saveNoiseSettings(merged);
+        if (!noiseOverrideRef.current) {
+            저장대기Ref.current = merged;
+            if (저장타이머Ref.current !== null)
+                clearTimeout(저장타이머Ref.current);
+            저장타이머Ref.current = setTimeout(flushNoiseSave, NOISE_SAVE_DEBOUNCE_MS);
+        }
         reportAppliedNoiseSettings(merged);
-    }, []);
+    }, [flushNoiseSave]);
     // 문장(메인) 재생 컨트롤 — 툴팁(하단 설정)과 오디오 플레이어가 공유. 계정 설정("훈련" 패널)의
     // 기본값과 동일한 noiseSettings(mainVolume/mainSpeed)에 함께 영속화된다.
     const playbackRate = noiseSettings.mainSpeed;
@@ -208,6 +263,8 @@ function TrainingPagePopupInner(props) {
     /* '다시하기' 횟수 — 단계들의 key 에 넣어 **처음부터 다시 그린다.** 단계 컴포넌트는 내용(문장·보기)이 바뀔 때만 제 상태를
        비워, 같은 문항을 다시 풀면 옛 선택 강조·옛 배치(순서화는 정답 배치일 수도)가 그대로 남았다. */
     const [replayCount, setReplayCount] = useState(0);
+    // 다시하기 전 판들의 정답/전체 — 완료 때 onComplete 에 함께 넘긴다
+    const 앞판들Ref = useRef([]);
     const [mode, setMode] = useState('center');
     const [closing, setClosing] = useState(false);
     // 닫힘 애니메이션(PAGE_POPUP_CLOSE_MS) 동안 다른 닫기 경로(ESC/닫기 버튼/완료)가 또 실행되면
@@ -229,7 +286,7 @@ function TrainingPagePopupInner(props) {
                 closingRef.current = false;
                 setClosing(false);
             }
-        }, PAGE_POPUP_CLOSE_MS);
+        }, 움직임최소화() ? 0 : PAGE_POPUP_CLOSE_MS);
     }, []);
     useEffect(() => () => { if (closeTimerRef.current)
         clearTimeout(closeTimerRef.current); }, []);
@@ -576,7 +633,7 @@ function TrainingPagePopupInner(props) {
         catch (e) { }
         if (hasScenario) {
             const maybe = buildScenarioResult();
-            setResultOverlay({});
+            setResultOverlay(결과계산중);
             const maybeAny = maybe;
             Promise.resolve(maybeAny)
                 .then((data) => {
@@ -598,7 +655,7 @@ function TrainingPagePopupInner(props) {
         }
         if (isChildrenMode) {
             const maybe = buildChildrenResult();
-            setResultOverlay({});
+            setResultOverlay(결과계산중);
             const maybeAny = maybe;
             Promise.resolve(maybeAny)
                 .then((data) => {
@@ -639,11 +696,16 @@ function TrainingPagePopupInner(props) {
                 setResultOverlay(maybeAny);
             }
             else {
-                setResultOverlay(maybeAny && typeof maybeAny.then === 'function' ? {} : {});
+                setResultOverlay(maybeAny && typeof maybeAny.then === 'function' ? 결과계산중 : {});
             }
+            // 결과가 비었거나 실패하면 막지 않는다(전과 같이 빈 창) — 계산 중 표시만 걷는다
+            const 계산중걷기 = () => { if (!늦음())
+                setResultOverlay((cur) => (cur === 결과계산중 ? {} : cur)); };
             Promise.resolve(maybeAny).then((data) => { if (data && !늦음())
-                setResultOverlay(data); }).catch((err) => { if (import.meta.env?.DEV)
-                console.error('viewResults child handler failed', err); });
+                setResultOverlay(data);
+            else
+                계산중걷기(); }).catch((err) => { if (import.meta.env?.DEV)
+                console.error('viewResults child handler failed', err); 계산중걷기(); });
             return;
         }
         if (typeof externalOnResult === 'function') {
@@ -658,14 +720,18 @@ function TrainingPagePopupInner(props) {
                 setResultOverlay(maybeAny);
             }
             else {
-                setResultOverlay(maybeAny && typeof maybeAny.then === 'function' ? {} : {});
+                setResultOverlay(maybeAny && typeof maybeAny.then === 'function' ? 결과계산중 : {});
             }
+            const 계산중걷기 = () => { if (!늦음())
+                setResultOverlay((cur) => (cur === 결과계산중 ? {} : cur)); };
             Promise.resolve(maybeAny).then((data) => { try {
                 if (import.meta && import.meta.env && import.meta.env.DEV)
                     console.debug('TrainingPagePopup: externalOnResult resolved data:', data);
             }
             catch (e) { } if (data && !늦음())
-                setResultOverlay(data); }).catch((err) => { console.error('viewResults external handler failed', err); });
+                setResultOverlay(data);
+            else
+                계산중걷기(); }).catch((err) => { console.error('viewResults external handler failed', err); 계산중걷기(); });
             return;
         }
     };
@@ -716,16 +782,19 @@ function TrainingPagePopupInner(props) {
             return;
         }
     };
-    const resolvedTitle = hasScenario
+    // 보이는 제목의 폴백(헤더용) — 전과 같다
+    const visibleTitle = hasScenario
         ? scenarioMeta.title || scenarioMeta.label || ariaLabel || t('common.popup', '팝업')
         : title || label || (Array.isArray(depth) ? depth[depth.length - 1] : undefined) || ariaLabel || t('common.popup', '팝업');
+    /* 대화상자 이름 — ariaLabel 을 주면 그것이 이긴다. 전에는 제목이 있으면 ariaLabel 이 무시됐다(제목이 없을 때만 썼다). */
+    const resolvedTitle = ariaLabel || visibleTitle;
     // 헤더에 넘길 제목 — title이 '빈 문자열'로 명시돼 오면(이름 미입력) 그대로 넘긴다.
     // ||로 폴백하면 타입 라벨이 채워져 depth 라벨과 같은 문구가 두 줄로 반복되므로,
     // 비어 있다는 사실은 타이틀 컴포넌트가 안내 문구로 알린다.
-    // (resolvedTitle은 dialog aria-label용이라 그쪽은 폴백을 그대로 유지한다.)
+    // (resolvedTitle은 dialog aria-label용이라 그쪽은 폴백을 그대로 유지한다 — 헤더는 visibleTitle 로.)
     const titleForHeader = hasScenario
-        ? (scenarioMeta.title ?? scenarioMeta.label ?? resolvedTitle)
-        : (title ?? label ?? resolvedTitle);
+        ? (scenarioMeta.title ?? scenarioMeta.label ?? visibleTitle)
+        : (title ?? label ?? visibleTitle);
     const renderScenarioStep = (step, index) => {
         const pageId = getScenarioPageId(currentScenarioPage, effectivePageIndex);
         const stepKey = getScenarioStepKey(step, index);
@@ -800,16 +869,7 @@ function TrainingPagePopupInner(props) {
         let completeResult;
         if (typeKey) {
             const ro = resultOverlay;
-            const results = (ro?.results || ro?.answers || []);
-            const total = Array.isArray(results) && results.length > 0 ? results.length : null;
-            // 결과 항목 형태가 훈련 타입마다 달라(예: 소음 하 듣기/문장 순서화는 correct 대신
-            // heard/judgement만 채움 — TrainingResultPopup의 resolveDecision과 동일 기준) 이
-            // 필드들도 확인해야 그 타입들의 정답 수가 항상 0으로 기록되는 것을 막을 수 있다.
-            const correct = Array.isArray(results)
-                ? results.filter(r => r?.correct === true || r?.isCorrect === true || r?.score === 1 ||
-                    r?.heard === true || r?.judgement === true).length
-                : null;
-            const finalCorrect = total != null ? correct : null;
+            const { results, correct: finalCorrect, total } = 판결과셈(resultOverlay);
             /* 문항 하나하나를 함께 남긴다 — 여기서 접으면 어느 낱말을 틀렸는지 되찾을 길이 없다.
                '음소별 오류'(08-26 회의)가 이걸 원재료로 쓴다. */
             logTrainingCompletion({
@@ -824,7 +884,7 @@ function TrainingPagePopupInner(props) {
                 durationSeconds: Math.max(0, Math.round((Date.now() - completionStartRef.current) / 1000)),
                 dailyTotal: dailyTotal ?? null,
             });
-            completeResult = { correct: finalCorrect, total };
+            completeResult = { correct: finalCorrect, total, attempt: 앞판들Ref.current.length + 1, previousAttempts: [...앞판들Ref.current] };
         }
         결과창닫기();
         scheduleClose(() => {
@@ -852,6 +912,10 @@ function TrainingPagePopupInner(props) {
                 onReplay: () => {
                     // 다시 푸는 판의 소요 시간은 지금부터 — 마운트 때 한 번만 찍어 앞 판 시간·결과 창을 보던 시간까지 섞였다(60초가 660초)
                     completionStartRef.current = Date.now();
+                    if (resultOverlay !== 결과계산중) {
+                        const { correct, total } = 판결과셈(resultOverlay);
+                        앞판들Ref.current.push({ correct, total });
+                    }
                     결과창닫기();
                     setReplayCount((n) => n + 1);
                     if (hasScenario) {
@@ -876,6 +940,7 @@ function TrainingPagePopupInner(props) {
                     catch (e) { }
                 },
                 onClose: handleResultDone,
+                pending: resultOverlay === 결과계산중,
             })), (resultOverlay?.isEmpty && (_jsx("div", { className: "page-popup page-popup--result-empty", role: "dialog", "aria-modal": "true", "aria-label": t('training.result.eyebrow', '훈련 완료'), children: _jsxs("div", { className: "page-popup__panel page-popup__panel--center", children: [_jsx("div", { className: "page-popup__scroll", children: _jsx("div", { className: "page-popup__content page-popup__content--center", children: _jsx("div", { className: "page-popup__empty", children: t('training.result.eyebrow', '훈련 완료') }) }) }), _jsx("div", { className: "page-popup__bottom", children: _jsx(Button, { htmlType: "button", variant: "main", size: 48, onClick: handleResultDone, label: t('training.result.done', '완료') }) })] }) }))), _jsx(Toast, { message: noticeMessage, position: "top", onClose: handleNoticeClose })] }));
     const portalContent = (_jsx(NoisePlayerContext.Provider, { value: noiseContextValue, children: jsx }));
     if (typeof document !== 'undefined' && document.body)

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

@@ -8,6 +8,7 @@ export type TrainingPagePopupBottomProps = {
     stepIndex?: number;
     stepCount?: number;
     pageIndex?: number;
+    /** 쪽 수. 0(쪽이 없음)이어도 '결과보기'(완료) 단추는 보이고, '다음 문제'(쪽 이동)만 숨는다. 기본 1. */
     pageCount?: number;
 };
 /** @public */

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

@@ -6,6 +6,7 @@ import Button from '../Button';
 import AudioMeter from '../AudioMeter';
 import NoiseSettingsTooltip from './NoiseSettingsTooltip';
 import { useNoisePlayer } from './NoisePlayerContext';
+import { useFloatingFocus } from './useFloatingFocus';
 import "./TrainingPagePopupBottom.css";
 /** @public */
 export default function TrainingPagePopupBottom({ useNoiseSettingBtn = false, onSettings, onNext, onResult, stepIndex = 0, stepCount = 0, pageIndex = 0, pageCount = 1, }) {
@@ -16,8 +17,10 @@ export default function TrainingPagePopupBottom({ useNoiseSettingBtn = false, on
     const desktopRef = useRef(null);
     const mobileRef = useRef(null);
     const noisePlayer = useNoisePlayer();
-    const useNextBtn = pageIndex < pageCount - 1;
-    const useResultBtn = pageIndex === pageCount - 1;
+    /* 쪽이 없으면(0) 쪽 이동만 숨기고 끝내는 단추는 둔다 — 전에는 0 === -1 이라 단추가 하나도 없어 판을 끝낼 수 없었다 */
+    const 쪽있음 = pageCount > 0;
+    const useNextBtn = 쪽있음 && pageIndex < pageCount - 1;
+    const useResultBtn = !쪽있음 || pageIndex >= pageCount - 1;
     const isBtnActive = stepIndex === Math.max(0, stepCount);
     // 노이즈 설정 버튼이 비활성화되면 열려 있던 팝업을 닫는 의도된 동기화다
     /* eslint-disable react-hooks/set-state-in-effect */
@@ -56,5 +59,15 @@ export default function TrainingPagePopupBottom({ useNoiseSettingBtn = false, on
         setOpen(true);
     }, [open, onSettings]);
     const handleToggleMeters = useCallback(() => setShowMeters(prev => !prev), []);
-    return (_jsxs("div", { className: "pp-bottom", children: [_jsxs("div", { className: "pp-bottom__left", children: [useNoiseSettingBtn ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "pp-bottom__settings--desktop", children: _jsx("div", { ref: desktopRef, className: "pp-bottom__tooltip-trigger", "data-tooltip-ignore": true, children: _jsx(Button, { htmlType: "button", size: 56, type: "bar", icon: 'settings', onClick: handleDesktopClick, selected: open, ariaLabel: t('training.trainingSettingsTitle', '훈련 설정'), label: t('training.trainingSettingsTitle', '훈련 설정'), minWidth: 140 }) }) }), _jsx("div", { className: "pp-bottom__settings--mobile", children: _jsx("div", { ref: mobileRef, className: "pp-bottom__tooltip-trigger", "data-tooltip-ignore": true, children: _jsx(Button, { htmlType: "button", size: 56, type: "dot", icon: 'settings', onClick: handleMobileClick, selected: open, ariaLabel: t('training.settings', '설정'), minWidth: 52 }) }) })] })) : null, useNoiseSettingBtn && (_jsx(Button, { htmlType: "button", size: 40, type: "dot", shape: "pill", icon: "audio-lines", onClick: handleToggleMeters, selected: showMeters, ariaLabel: t('training.meter.toggle', '오디오 미터 표시') })), useNoiseSettingBtn && showMeters && (_jsxs("div", { className: "pp-bottom__meters", children: [_jsxs("div", { className: "pp-bottom__meter", children: [_jsx("span", { className: "pp-bottom__meter-label caption-1", children: t('training.meter.sentence', '재생') }), _jsx(AudioMeter, { analyser: noisePlayer?.mainAnalyser ?? null, orientation: "horizontal", length: 112, label: "db", labelPos: "left", ariaLabel: t('training.meter.sentence', '재생') })] }), _jsxs("div", { className: "pp-bottom__meter", children: [_jsx("span", { className: "pp-bottom__meter-label caption-1", children: t('training.meter.noise', '소음') }), _jsx(AudioMeter, { analyser: noisePlayer?.noiseAnalyser ?? null, orientation: "horizontal", length: 112, label: "db", labelPos: "left", ariaLabel: t('training.meter.noise', '소음') })] })] }))] }), _jsxs("div", { className: "pp-bottom__right", children: [useResultBtn && (_jsx(Button, { htmlType: "button", size: 56, type: "bar", icon: "check", onClick: typeof onResult === "function" ? onResult : onNext, ariaLabel: t('training.viewResult', '결과보기'), label: t('training.viewResult', '결과보기'), variant: "main", disabled: !isBtnActive })), useNextBtn && (_jsx(Button, { htmlType: "button", size: 56, type: "bar", rightIcon: "chevron-right", align: "right", onClick: onNext, ariaLabel: t('training.nextQuestion', '다음 문제'), label: t('training.nextQuestion', '다음 문제'), variant: "main", disabled: !isBtnActive }))] }), useNoiseSettingBtn && open && (_jsx(NoiseSettingsTooltip, { anchorRect: anchorRect, onClose: handleCloseTooltip }))] }));
+    /* 설정 창은 판 밖(body)으로 포털된다 — 열리면 초점을 창 첫 칸으로, 닫히면 연 단추로(useFloatingFocus 참고) */
+    const 창열림 = useNoiseSettingBtn && open;
+    useFloatingFocus(창열림, () => (typeof document !== 'undefined' ? document.querySelector('.noise-settings__header')?.closest('.tooltip-content') ?? null : null), () => {
+        const 보이는단추 = [desktopRef.current, mobileRef.current]
+            .map((w) => w?.querySelector('button') ?? null)
+            .find((b) => !!b && b.getClientRects().length > 0);
+        return 보이는단추 ?? desktopRef.current?.querySelector('button') ?? null;
+    });
+    return (_jsxs("div", { className: "pp-bottom", children: [_jsxs("div", { className: "pp-bottom__left", children: [useNoiseSettingBtn ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "pp-bottom__settings--desktop", children: _jsx("div", { ref: desktopRef, className: "pp-bottom__tooltip-trigger", "data-tooltip-ignore": true, children: _jsx(Button, { htmlType: "button", size: 56, type: "bar", icon: 'settings', onClick: handleDesktopClick, 
+                                        /* 여닫이 — aria-pressed(selected) 대신 aria-expanded. 보이는 선택 모양은 같은 클래스로 */
+                                        className: open ? 'is-selected' : undefined, "aria-expanded": open, "aria-haspopup": "dialog", ariaLabel: t('training.trainingSettingsTitle', '훈련 설정'), label: t('training.trainingSettingsTitle', '훈련 설정'), minWidth: 140 }) }) }), _jsx("div", { className: "pp-bottom__settings--mobile", children: _jsx("div", { ref: mobileRef, className: "pp-bottom__tooltip-trigger", "data-tooltip-ignore": true, children: _jsx(Button, { htmlType: "button", size: 56, type: "dot", icon: 'settings', onClick: handleMobileClick, className: open ? 'is-selected' : undefined, "aria-expanded": open, "aria-haspopup": "dialog", ariaLabel: t('training.settings', '설정'), minWidth: 52 }) }) })] })) : null, useNoiseSettingBtn && (_jsx(Button, { htmlType: "button", size: 40, type: "dot", shape: "pill", icon: "audio-lines", onClick: handleToggleMeters, selected: showMeters, ariaLabel: t('training.meter.toggle', '오디오 미터 표시') })), useNoiseSettingBtn && showMeters && (_jsxs("div", { className: "pp-bottom__meters", children: [_jsxs("div", { className: "pp-bottom__meter", children: [_jsx("span", { className: "pp-bottom__meter-label caption-1", children: t('training.meter.sentence', '재생') }), _jsx(AudioMeter, { analyser: noisePlayer?.mainAnalyser ?? null, orientation: "horizontal", length: 112, label: "db", labelPos: "left", ariaLabel: t('training.meter.sentence', '재생') })] }), _jsxs("div", { className: "pp-bottom__meter", children: [_jsx("span", { className: "pp-bottom__meter-label caption-1", children: t('training.meter.noise', '소음') }), _jsx(AudioMeter, { analyser: noisePlayer?.noiseAnalyser ?? null, orientation: "horizontal", length: 112, label: "db", labelPos: "left", ariaLabel: t('training.meter.noise', '소음') })] })] }))] }), _jsxs("div", { className: "pp-bottom__right", children: [useResultBtn && (_jsx(Button, { htmlType: "button", size: 56, type: "bar", icon: "check", onClick: typeof onResult === "function" ? onResult : onNext, ariaLabel: t('training.viewResult', '결과보기'), label: t('training.viewResult', '결과보기'), variant: "main", disabled: !isBtnActive })), useNextBtn && (_jsx(Button, { htmlType: "button", size: 56, type: "bar", rightIcon: "chevron-right", align: "right", onClick: onNext, ariaLabel: t('training.nextQuestion', '다음 문제'), label: t('training.nextQuestion', '다음 문제'), variant: "main", disabled: !isBtnActive }))] }), useNoiseSettingBtn && open && (_jsx(NoiseSettingsTooltip, { anchorRect: anchorRect, onClose: handleCloseTooltip }))] }));
 }

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

@@ -175,7 +175,20 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
         handleEndRef,
     });
     useEffect(() => { stopTTSRef.current = stopTTS; });
-    const startTTS = (text) => { 소리잡기('tts'); 합성시작(text); };
+    const startTTS = (text) => {
+        /* 음성 합성이 없는 기기 — 훅이 onDone(false) 로 흐름에 알리고(훈련은 다음 단계로 간다), 여기서는 사용자에게 까닭을 보인다.
+           전에는 아무 표시 없이 들은 것으로 셌다. */
+        if (typeof window === 'undefined' || !window.speechSynthesis) {
+            try {
+                setNoticeMessage(t('training.ttsUnavailable', '이 기기에서는 음성을 들려줄 수 없습니다.'));
+            }
+            catch (_) { }
+            합성시작(text);
+            return;
+        }
+        소리잡기('tts');
+        합성시작(text);
+    };
     const requestedSources = Array.isArray(soundSrc)
         ? soundSrc.filter(Boolean)
         : (soundSrc ? [soundSrc] : []);
@@ -516,7 +529,9 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
         a.src = src;
         a.load();
         await waitForCanPlay(a);
-        await waitForWaveReady();
+        // 기다리는 사이 떠났으면(false) 이어 가지 않는다 — 떼어진 <audio> 를 틀던 것
+        if ((await waitForWaveReady()) === false)
+            return;
         setIsFetchingUrl(false);
         await tryPlayWithRetry(a);
         setStateLocal('playMode');
@@ -674,7 +689,8 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
                         // (같은 기다림이 이 파일 위쪽에 waitForCanPlay 로 이미 있었다. 여기에 한 벌
                         //  더 적혀 있어, 기본 대기 시간을 고치면 한쪽만 바뀌는 자리였다.)
                         await waitForCanPlay(a);
-                        await waitForWaveReady();
+                        if ((await waitForWaveReady()) === false)
+                            return false;
                         // 스피너는 waveform까지 준비된 뒤(재생 직전)에 해제 — 짧은 단어 파일의 경우
                         // 재생 중/후까지 스피너가 보이는 현상도, 스피너가 사라진 뒤 waveform이
                         // 뒤늦게 나타나는 빈 화면 구간도 생기지 않도록 한다.
@@ -739,18 +755,20 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
                         fetchingRef.current = false;
                         setIsFetchingUrl(false);
                         setStateLocal('active');
-                        startTTS(ttsArr[0] || undefined);
+                        startTTS(ttsArr.length > 0 ? ttsArr : undefined);
                     }
                     return;
                 }
-                // 리졸버 미설정 → 기존 speechSynthesis
-                startTTS(ttsArr[0] || undefined);
+                // 리졸버 미설정 → 기존 speechSynthesis(여러 문장이면 차례로 모두)
+                startTTS(ttsArr.length > 0 ? ttsArr : undefined);
                 return;
             }
             // playMode 중 일시정지/재개
             if (stateLocal === 'playMode') {
-                // 오디오 파일로 변환된 경우 audioRef로 제어
-                if (a) {
+                /* 오디오 파일로 변환된 경우 audioRef로 제어. <audio> 는 늘 있으므로 그것만 보면 음성 합성으로 말하는 중(리졸버 없음·실패)에도
+                   이 길로 들어가 소리 없는 <audio> 를 재생하려 들고 말은 멈추지 않았다 — 합성기가 말하는 중이고 <audio> 에 소리가 없으면 합성기를 멈춘다. */
+                const 합성으로말함 = !!synth && (synth.speaking || synth.paused) && !(a && (a.currentSrc || a.getAttribute('src')));
+                if (a && !합성으로말함) {
                     if (a.paused) {
                         // 전부 들은 뒤 다시 재생 — 마지막 트랙 이어듣기가 아니라 처음(1번)부터
                         // 다시 시작한다(일반 오디오 분기와 동일한 처리).
@@ -945,8 +963,8 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
                 markWaveNotReady();
             a.src = src;
             a.load();
-            if (!sameSegment)
-                await waitForWaveReady();
+            if (!sameSegment && (await waitForWaveReady()) === false)
+                return;
             if (myToken !== jumpTokenRef.current)
                 return;
             await tryPlayWithRetry(a);
@@ -1147,7 +1165,7 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
                         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" : ""}`, inert: !(stateLocal === "playMode" || displayedPlaying) || undefined, 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', '재생 / 멈춤'), "aria-pressed": displayedPlaying, 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);
                                             }
-                                            catch (e) { } }, ariaLabel: t('training.sourcePlay', { n: idx + 1 }), variant: "transparent-white", selected: 구간표시 && currentIndex === idx, disabled: stateLocal !== 'playMode' || !(Array.isArray(sources) && sources[idx]), showTooltipInfo: true }, idx))) })) : null, (!Array.isArray(sources) || sources.length <= 1) ? (_jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "repeat", onClick: handleReplay, ariaLabel: t('common.replay', '다시듣기'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' })) : null, _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "skip-forward", onClick: handleNext, ariaLabel: t('training.next', '다음'), 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: "check", onClick: handleEnd, ariaLabel: t('common.done', '완료'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' })] }), _jsxs("div", { className: "audio-player__slider", children: [_jsx("div", { className: fillClass, ref: fillRef, style: { left: `${fillLeftPercent}%` }, "aria-hidden": "true" }), (showSoundWaveForm || showNoiseWaveForm) && (_jsx(WaveForm, { segments: currentSegments, progress: progress, totalDuration: totalDuration, onSegmentClick: handleJumpTo, waveProgressRef: waveProgressRef, showSoundWaveForm: showSoundWaveForm, noiseSrc: (showNoiseWaveForm && noisePlayer?.settings.enabled && noiseVolume > 0) ? activeNoiseUrl : null, noiseRatio: noisePlayer ? noiseRatioOf(noisePlayer.settings) : 0, noiseSpeed: noisePlayer?.settings.speed ?? 1, 
+                                            catch (e) { } }, ariaLabel: t('training.sourcePlay', { n: idx + 1 }), variant: "transparent-white", selected: 구간표시 && currentIndex === idx, disabled: stateLocal !== 'playMode' || !(Array.isArray(sources) && sources[idx]), showTooltipInfo: true }, idx))) })) : null, (!Array.isArray(sources) || sources.length <= 1) ? (_jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "repeat", onClick: handleReplay, ariaLabel: t('common.replay', '다시듣기'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' })) : null, _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "skip-forward", onClick: handleNext, ariaLabel: t('training.next', '다음'), 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: "check", onClick: handleEnd, ariaLabel: t('common.done', '완료'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' })] }), _jsxs("div", { className: "audio-player__slider", children: [_jsx("div", { className: fillClass, ref: fillRef, style: { left: `${fillLeftPercent}%` }, "aria-hidden": "true" }), (showSoundWaveForm || showNoiseWaveForm) && (_jsx(WaveForm, { segments: currentSegments, progress: progress, totalDuration: totalDuration, waveProgressRef: waveProgressRef, showSoundWaveForm: showSoundWaveForm, noiseSrc: (showNoiseWaveForm && noisePlayer?.settings.enabled && noiseVolume > 0) ? activeNoiseUrl : null, noiseRatio: noisePlayer ? noiseRatioOf(noisePlayer.settings) : 0, noiseSpeed: noisePlayer?.settings.speed ?? 1, 
                                         /* 그림은 "문장 = 기준" — 문제 소리(M÷R)가 아니라 전체 소리 M 으로 문장을 그리고 소음을 R 배로 키운다 */
                                         mainVolume: mainVolume, onReadyChange: handleWaveReadyChange }))] })] }), _jsx("audio", { ref: audioRef, crossOrigin: "anonymous", preload: "auto" })] }), !showSoundWaveForm && (_jsxs("p", { className: "audio-player__no-waveform caption-1", children: [_jsx(Icon, { icon: "triangle-alert", size: 14 }), t('training.noSoundWaveform', '소리 비교 문제는 웨이브폼을 표현하지 않습니다.')] })), _jsx(Toast, { message: noticeMessage, position: noticePosition, onClose: handleClearNotice })] }));
 }

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

@@ -36,6 +36,9 @@ export default function TrainingStepCard({ index, stepIndex, isLast = false, tit
     // ── 모두 듣기 — 카드별 소리 듣기 버튼을 순서대로 재생 ──
     const cardRefs = useRef([]);
     const [playingAll, setPlayingAll] = useState(false);
+    /* 모두 듣기를 멈추는 함수 — 도는 동안만 있다. 사용자가 카드의 '소리 듣기' 를 누르면 부른다: 전에는 누른 카드가 울리던 카드를
+       멈추게 했지만(currentSound) 멈춘 카드는 끝 신호가 안 와 차례가 8초 시한까지 기다렸다가 **다음 카드가 누른 카드를 끊고** 이어 울렸다. */
+    const 모두듣기멈춤Ref = useRef(null);
     const 단계살아있음 = useRef(true);
     useEffect(() => { 단계살아있음.current = true; return () => { 단계살아있음.current = false; }; }, []);
     // 페이지 전환 시 (items 변경) 이전 선택 상태 및 카드 ref 초기화
@@ -77,18 +80,21 @@ export default function TrainingStepCard({ index, stepIndex, isLast = false, tit
         if (playingAll || currentState === 'disabled')
             return;
         setPlayingAll(true);
+        let 멈춤 = false;
+        const 멈춤신호 = new Promise((resolve) => { 모두듣기멈춤Ref.current = () => { 멈춤 = true; resolve(); }; });
         try {
             /* 매 차례 **지금의** 카드를 읽고, 떠났으면 멈춘다 — 시작할 때 잡아 둔 핸들로 돌면 떠난 화면의 다음 카드가 이어서 울렸다 */
             for (let i = 0; i < shown.length; i++) {
-                if (!단계살아있음.current)
+                if (!단계살아있음.current || 멈춤)
                     break;
                 const cardRef = cardRefs.current[i];
                 if (!cardRef)
                     continue;
-                await withTimeout(cardRef.play(), PLAY_ALL_CARD_TIMEOUT_MS);
+                await Promise.race([withTimeout(cardRef.play(), PLAY_ALL_CARD_TIMEOUT_MS), 멈춤신호]);
             }
         }
         finally {
+            모두듣기멈춤Ref.current = null;
             setPlayingAll(false);
         }
     }, [playingAll, currentState, shown.length]);
@@ -122,5 +128,15 @@ export default function TrainingStepCard({ index, stepIndex, isLast = false, tit
             usePlayAllBtn: !hideAudio && shown.length > 0,
             onPlayAll: handlePlayAll,
             playAllActive: playingAll,
-        }, children: _jsx("div", { className: "training-step__cards", 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)))) }) }));
+        }, children: _jsx("div", { className: "training-step__cards", 
+            /* 모두 듣기 중 카드의 '소리 듣기' 를 누르면(마우스·Enter 모두 click) 모두 듣기를 멈춘다 — 누른 카드는 제 처리로 울린다.
+               캡처 단계에서 본다: 카드 단추는 선택 모드에서 전파를 막는다. */
+            onClickCapture: (e) => {
+                const 멈추기 = 모두듣기멈춤Ref.current;
+                if (!멈추기)
+                    return;
+                const 누른곳 = e.target;
+                if (누른곳 && typeof 누른곳.closest === 'function' && 누른곳.closest('.training-word-card__bottom'))
+                    멈추기();
+            }, 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/TrainingStepTitle.js

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import Button from '../Button';
 import useMediaQuery from '../../hooks/useMediaQuery';
 import TextBoxTooltip from '../Tooltip/TextBoxTooltip';
+import { useFloatingFocus } from './useFloatingFocus';
 import './TrainingStepTitle.css';
 /** @public */
 export default function TrainingStepTitle({ title, children, className = "", state = "disabled", usePreviewTextBtn = false, onPreviewTextBtn, previewText = null, useFaded, usePlayAllBtn = false, onPlayAll, playAllActive = false, }) {
@@ -17,6 +18,17 @@ export default function TrainingStepTitle({ title, children, className = "", sta
     const [showPreview, setShowPreview] = useState(false);
     const [anchorRect, setAnchorRect] = useState(null);
     const [previewContent, setPreviewContent] = useState(null);
+    /* 미리보기 창은 판 밖(body)으로 포털된다 — 열리면 초점을 창 첫 칸으로, 닫히면 미리보기 단추로(useFloatingFocus 참고).
+       창은 늦게 연 것이 body 끝에 붙으므로 뒤에서부터 찾는다. */
+    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];
+        return null;
+    }, () => btnRef.current?.querySelector('button') ?? null);
     // 인라인 화살표 함수로 넘어오는 경우가 있어 매 렌더 identity가 바뀐다.
     // 아래 동기화 effect가 그때마다 재실행되지 않도록 ref로 최신 값만 들고 간다.
     /* 갱신은 렌더가 아니라 효과에서 한다 — 렌더 중에 쓰면 **커밋되지 않을 렌더의 값**이
@@ -90,5 +102,7 @@ export default function TrainingStepTitle({ title, children, className = "", sta
     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] }));
+                                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', '문장 미리보기'), onClick: handlePreviewButtonClick, 
+                                    /* 여닫이 — aria-pressed(selected) 대신 aria-expanded. 보이는 선택 모양은 같은 클래스로 */
+                                    className: showPreview ? 'is-selected' : undefined, "aria-expanded": showPreview, "aria-haspopup": "dialog", 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.css

@@ -162,6 +162,21 @@
   background: linear-gradient(160deg, #f0f2f4 0%, #e4e8ea 100%);
 }
 
+/* 글자 카드 — 이미지가 있을 수 없는 글자(사전에 없는 음절)를 그림 자리에 크게. 색은 낱말 글자와 같다 */
+.training-word-card__text-face {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 48px;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--color-black, #0b2b35);
+  word-break: keep-all;
+  text-align: center;
+}
+
 /* ── Loading spinner ── */
 .training-word-card__spinner {
   position: absolute;
@@ -260,6 +275,7 @@
     aspect-ratio: 1 / 1;
   }
   .training-word-card__word { font-size: 14px; }
+  .training-word-card__text-face { font-size: 32px; }
   .training-word-card__pronunciation { font-size: 11px; }
   .training-word-card__body { gap: 2px; }
   .training-word-card__front { gap: 4px; }

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

@@ -14,6 +14,12 @@ export type TrainingWordCardItem = {
     subLabel?: string;
     colloquialLabel?: string;
     homonum?: number;
+    /**
+     * 이미지 없이 **글자 카드**로 보인다(이미지를 청하지 않고, `hideLabel` 이어도 글자를 그림 자리에 크게 보인다).
+     * 안 주면 단어 풀(setWordPool)이 불려 있고 그 풀에 없는 낱말일 때 저절로 글자 카드다 — 받침·자음 탈락의 만든 음절('다'·'애')처럼
+     * 사전에 없는 글자는 이미지가 있을 수 없다. `false` 면 풀에 없어도 이미지를 청한다. `image` 를 직접 주면 그것을 쓴다.
+     */
+    textOnly?: boolean;
     [k: string]: unknown;
 };
 /** @public */

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

@@ -7,6 +7,7 @@ import Button from '../Button';
 import Badge from '../Badge';
 import useMediaQuery from '../../hooks/useMediaQuery';
 import { getImageResolver } from '../../utils/imageConfig';
+import { getWordPool } from '../../utils/wordPool';
 import { useWordImage } from '../../hooks/useWordImage';
 import { getTTSUrlResolver, getTTSFallbackUrlResolver } from '../../utils/ttsConfig';
 import { claimSound, stopSoundIfOwner } from './currentSound';
@@ -43,8 +44,12 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
     const audioFor = `${typeof rawAudioSrc === 'string' ? rawAudioSrc : rawAudioSrc?.src ?? ''}\u0000${label}`;
     const [prepared, setPrepared] = useState({ for: '', url: '' });
     const audioUrl = prepared.for === audioFor ? prepared.url : '';
+    // ── 글자 카드 ── 사전(단어 풀)에 없는 글자는 이미지가 있을 수 없다. 전에는 없는 이미지를 받으려다 실패해,
+    // 글자까지 숨긴(hideLabel) 탈락 카드가 빈 칸이 됐다(받침·자음 탈락의 만든 음절 '다'·'애').
+    const pool = getWordPool();
+    const textCard = item.textOnly ?? (!item.image && !!front.label && !!pool && pool.entries.length > 0 && !pool.byWord.has(front.label));
     // ── 이미지 ── (앞면 유지값 기준 — 플립 동안 이미지도 유지)
-    const imageUrl = getImageResolver()?.(front.label, front.homonum) ?? item.image ?? '';
+    const imageUrl = textCard ? '' : (getImageResolver()?.(front.label, front.homonum) ?? item.image ?? '');
     const { imgRef, loading: imgLoading, hasImage, onLoad: handleImgLoad, onError: handleImgError } = useWordImage(imageUrl);
     // ── 오디오 URL 준비 ──
     useEffect(() => {
@@ -256,6 +261,6 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
                     onSelect?.();
                 }
             }
-            : undefined, children: _jsxs("div", { className: "training-word-card__flipper", style: { transitionDelay: showBack ? '0ms' : `${flipDelay}ms` }, children: [_jsxs("div", { className: "training-word-card__front", children: [selected && (_jsx("div", { className: "training-word-card__selected-badge", onClick: handleStopProp, children: _jsx(Badge, { type: "dot", size: 40, position: "inline", animate: true, icon: orderRank != null ? undefined : 'check', number: orderRank ?? undefined, "aria-label": orderRank != null ? t('training.nthSelected', { n: orderRank }) : t('training.selected', '선택됨') }) })), _jsx("div", { className: "training-word-card__image-wrap", children: hasImage ? (_jsxs(_Fragment, { children: [imgLoading && _jsx("div", { className: "training-word-card__spinner" }), _jsx("img", { ref: imgRef, className: "training-word-card__image", src: imageUrl, alt: front.label || t('common.image', '이미지'), style: { opacity: imgLoading ? 0 : 1 }, onLoad: handleImgLoad, onError: handleImgError })] })) : (_jsx("div", { className: "training-word-card__placeholder" })) }), !hideLabel && (_jsxs("div", { className: "training-word-card__body", children: [_jsx("div", { className: "training-word-card__word", children: front.label }), front.subLabel && (_jsxs("div", { className: "training-word-card__pronunciation", children: ["[", front.subLabel, "]"] })), front.colloquialLabel && (_jsxs("div", { className: "training-word-card__colloquial caption-1", children: ["[", front.colloquialLabel, "]"] }))] })), !hideAudio && (_jsx("div", { className: "training-word-card__bottom", onClick: selectable ? handleStopProp : undefined, children: _jsx(Button, { htmlType: "button", size: isMobile ? 40 : 48, type: isMobile ? 'dot' : 'bar', icon: playing ? 'pause' : 'play', label: isMobile ? undefined : t('training.playSound', '소리 듣기'), selected: playing, onClick: handlePlay, disabled: disabled, ariaLabel: t('training.playSound', '소리 듣기') }) }))] }), _jsx("div", { className: "training-word-card__back", "aria-hidden": "true", children: _jsx("img", { src: symbolSrc, className: "training-word-card__disabled-symbol", alt: "", draggable: false }) })] }) }));
+            : undefined, children: _jsxs("div", { className: "training-word-card__flipper", style: { transitionDelay: showBack ? '0ms' : `${flipDelay}ms` }, children: [_jsxs("div", { className: "training-word-card__front", children: [selected && (_jsx("div", { className: "training-word-card__selected-badge", onClick: handleStopProp, children: _jsx(Badge, { type: "dot", size: 40, position: "inline", animate: true, icon: orderRank != null ? undefined : 'check', number: orderRank ?? undefined, "aria-label": orderRank != null ? t('training.nthSelected', { n: orderRank }) : t('training.selected', '선택됨') }) })), _jsx("div", { className: "training-word-card__image-wrap", children: textCard ? (_jsx("div", { className: "training-word-card__text-face", children: front.label })) : hasImage ? (_jsxs(_Fragment, { children: [imgLoading && _jsx("div", { className: "training-word-card__spinner" }), _jsx("img", { ref: imgRef, className: "training-word-card__image", src: imageUrl, alt: front.label || t('common.image', '이미지'), style: { opacity: imgLoading ? 0 : 1 }, onLoad: handleImgLoad, onError: handleImgError })] })) : (_jsx("div", { className: "training-word-card__placeholder" })) }), !hideLabel && (_jsxs("div", { className: "training-word-card__body", children: [!textCard && _jsx("div", { className: "training-word-card__word", children: front.label }), front.subLabel && (_jsxs("div", { className: "training-word-card__pronunciation", children: ["[", front.subLabel, "]"] })), front.colloquialLabel && (_jsxs("div", { className: "training-word-card__colloquial caption-1", children: ["[", front.colloquialLabel, "]"] }))] })), !hideAudio && (_jsx("div", { className: "training-word-card__bottom", onClick: selectable ? handleStopProp : undefined, children: _jsx(Button, { htmlType: "button", size: isMobile ? 40 : 48, type: isMobile ? 'dot' : 'bar', icon: playing ? 'pause' : 'play', label: isMobile ? undefined : t('training.playSound', '소리 듣기'), selected: playing, onClick: handlePlay, disabled: disabled, ariaLabel: t('training.playSound', '소리 듣기') }) }))] }), _jsx("div", { className: "training-word-card__back", "aria-hidden": "true", children: _jsx("img", { src: symbolSrc, className: "training-word-card__disabled-symbol", alt: "", draggable: false }) })] }) }));
 });
 export default TrainingWordCard;

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

@@ -49,11 +49,11 @@ export interface TrainingBlockButtonProps {
     completedIds?: Set<string>;
     /** 선택 상태 ID Set. 포함된 항목(완료가 아닌 것)에 체크 배지를 표시 — 완료와 같은 배지이고, `hideCheckBadge` 면 숨는다. */
     selectedIds?: Set<string>;
-    /** 호버 시 표시할 문제/문장 텍스트. 제공 시 DescriptionTooltip 으로 렌더. */
+    /** 호버 시 표시할 문제/문장 텍스트. `useDescriptionTooltip` 이면 DescriptionTooltip 으로, 아니면 블록의 `title`(가리키면 뜨고 낭독기엔 설명)로 준다. */
     tooltipText?: string | string[];
     /** true 이면 호버 시 DescriptionTooltip 으로 문제 텍스트를 표시. 기본값 false. */
     useDescriptionTooltip?: boolean;
-    /** 제공 시 hover 중 뱃지 자리에 X 버튼 표시 — 클릭하면 호출됨. */
+    /** 제공 시 뱃지 자리에 X 버튼 표시 — 가리킬 수 있는 기기는 hover 중에만, 터치 기기(hover: none)는 늘. 클릭하면 호출됨. */
     onRemove?: () => void;
     /** true 이면 완료/선택 체크 뱃지를 표시하지 않음 */
     hideCheckBadge?: boolean;

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

@@ -22,6 +22,11 @@
  * 소요가 있다) · **세션 시간**(둘 다 없다). 무엇을 볼지는 읽는 쪽이 정한다.
  */
 export interface TrainingResultRecord {
+    /**
+     * 행 식별자(선택). `answeredAt` 이 같은 행(한 판을 한꺼번에 저장해 시각이 같은 행)의 **앞뒤를 가르는 데만** 쓴다 —
+     * 숫자면 수가 큰 쪽, 글이면 사전순으로 뒤인 쪽이 최근이다. 없으면 넘어온 배열에서 뒤에 있는 쪽이 최근이다.
+     */
+    id?: string | number | null;
     answeredAt: string;
     trainingType: string;
     /** 문항 식별자 — 코드가 있는 유형은 코드, 없는 유형(낱말)은 낱말 자체 */
@@ -77,6 +82,11 @@ export interface MissSummary {
  * 정렬은 세 겹이다. 정답률이 낮은 것이 먼저이되, **같은 정답률이면 여러 번 푼 것을
  * 앞에 둔다** — 한 번 틀린 것과 다섯 번 내리 틀린 것은 무게가 다르다. 그래도 같으면
  * 글자순으로 못 박는다(그러지 않으면 다시 읽을 때마다 차례가 흔들려 보던 줄을 놓친다).
+ *
+ * **"최근"(latestCorrect·latestAt·lastSelected·setIds 앞자리)은 `answeredAt` 으로 가린다.** 시각이 같은 행끼리는
+ * 둘 다 `id` 가 있으면 `id` 가 큰 쪽(숫자는 수 크기, 글은 사전순)이 최근이고, 그렇지 않으면 **넘어온 배열에서
+ * 뒤에 있는 쪽**이 최근이다 — 즉 `id` 없이 넘길 때는 **시간순(옛것 먼저)** 으로 넘겨야 같은 시각의 앞뒤가 맞다.
+ * (최신 먼저 넘기면 같은 시각 행의 최근이 뒤집힌다. 시각이 다른 행은 차례와 상관없이 맞다.)
  */
 export declare function summarizeMisses(records: readonly TrainingResultRecord[]): MissSummary;
 /**