@ihabdevteam/core 0.136.0 → 0.138.0

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

@@ -8,6 +8,8 @@ import Icon from './Icon';
 import Button from './Button';
 import { useComboboxSuggestions } from './useComboboxSuggestions';
 import './TextField.css';
+/* 서버 렌더에서는 layout effect 가 돌지 않고 React 18 은 경고를 찍는다 — 브라우저에서만 layout, 서버에서는 effect */
+const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 /** @public */
 export default function TextField(props) {
     const { value, defaultValue, name, inputRef, onChange, label, ariaLabel, required, placeholder, type = 'text', disabled = false, readOnly = false, error, helperText, maxLength, size = 48, variant = 'input', fullWidth = false, newline = false, multiline = false, rows = 3, leftIcon, rightIcon, clearable = false, list, showCount = true, className = '', onFocus, onBlur, onKeyDown, onEnter, inputMode, autoComplete, autoFocus, suggestions, openOnFocus = false, } = props;
@@ -61,7 +63,7 @@ export default function TextField(props) {
        돌아, 부모가 같은 값을 다시 두면(공백을 걷는 등) 화면 칸에 친 글자가 남았다. React 가 일반 칸에
        해 주는 되돌림(restoreControlledState)을 onChange 뒤 한 박자에 흉내 낸다. */
     const valueRef = useRef(value);
-    useLayoutEffect(() => { valueRef.current = value; });
+    useIsoLayoutEffect(() => { valueRef.current = value; });
     /*
      * React 는 controlled input 의 값을 node.defaultValue(= HTML value 속성)에 동기화한다.
      * 일반 입력에서는 무해하지만 비밀번호에서는 그 속성이 outerHTML 직렬화 경로

package/dist/packages/core/src/components/Tooltip/DescriptionTooltip.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Tooltip from './Tooltip';
 import { useTranslation } from 'react-i18next';

package/dist/packages/core/src/components/Tooltip/MenuTooltip.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState, useEffect, useRef } from 'react';
+import { useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import Button from '../Button';
 import Badge from '../Badge';
@@ -9,28 +9,25 @@ import './MenuTooltip.css';
 export default function MenuTooltip({ columns = [], onClose, className = '', size = 'medium' }) {
     const { t } = useTranslation();
     const itemSize = size === 'small' ? 40 : 48;
-    const [stack, setStack] = useState([{ title: null, columns }]);
+    /* 하위 메뉴는 **어느 항목으로 들어왔는지(경로)** 만 들고, 목록은 매 렌더 지금의 columns 에서 꺼낸다 — 전에는 들어갈 때
+       children 을 복사해 두어, 부모가 선택 표시(이름 → 날짜)를 바꿔도 하위 목록은 옛 체크였다. 경로의 항목이 사라졌으면
+       있는 데까지만 보인다. */
+    const [path, setPath] = useState([]);
+    const stack = useMemo(() => {
+        const out = [{ title: null, columns }];
+        let cols = columns;
+        for (const p of path) {
+            const item = cols?.[p.ci]?.items?.[p.ii];
+            if (!item || !Array.isArray(item.children) || !item.children.length)
+                break;
+            cols = [{ title: null, items: item.children }];
+            out.push({ title: item.label || null, columns: cols });
+        }
+        return out;
+    }, [columns, path]);
     const current = stack[stack.length - 1];
-    // 부모에서 전달되는 `columns`가 변경될 때 루트 컬럼을 동기화합니다.
-    // (사용자가 서브-뷰로 들어가 있으면 그 상태는 유지됩니다.)
-    /* eslint-disable react-hooks/set-state-in-effect */
-    useEffect(() => {
-        setStack((prev) => {
-            try {
-                if (!Array.isArray(prev) || prev.length === 0)
-                    return [{ title: null, columns }];
-                const next = prev.slice();
-                const rootTitle = next[0] && typeof next[0].title !== 'undefined' ? next[0].title : null;
-                next[0] = { title: rootTitle, columns };
-                return next;
-            }
-            catch (e) {
-                return [{ title: null, columns }];
-            }
-        });
-    }, [columns]);
-    /* eslint-enable react-hooks/set-state-in-effect */
-    const goBack = useCallback(() => setStack((s) => (s.length > 1 ? s.slice(0, s.length - 1) : s)), []);
+    const 보이는깊이 = stack.length - 1;
+    const goBack = useCallback(() => setPath((p) => p.slice(0, Math.max(0, Math.min(p.length, 보이는깊이) - 1))), [보이는깊이]);
     // 키보드 포커스 — Tooltip은 body로 포털되므로, 포커스를 옮겨주지 않으면 ⋯ 버튼을 누른
     // 키보드 사용자가 메뉴에 닿으려면 페이지 끝까지 Tab 해야 한다(사실상 도달 불가).
     // Tooltip에 이미 있는 ESC·Tab 트랩과 짝을 이루도록 첫 항목으로 포커스를 넣고,
@@ -64,11 +61,11 @@ export default function MenuTooltip({ columns = [], onClose, className = '', siz
         return () => cancelAnimationFrame(raf);
     }, [depth]);
     useEffect(() => () => { openerRef.current?.focus?.({ preventScroll: true }); }, []);
-    const handleClick = useCallback((item) => {
+    const handleClick = useCallback((item, ci, ii) => {
         if (!item)
             return;
         if (Array.isArray(item.children) && item.children.length) {
-            setStack((s) => [...s, { title: item.label || null, columns: [{ title: null, items: (item.children || []) }] }]);
+            setPath((p) => [...p.slice(0, 보이는깊이), { ci, ii }]);
             return;
         }
         try {
@@ -83,7 +80,7 @@ export default function MenuTooltip({ columns = [], onClose, className = '', siz
                 onClose();
         }
         catch (err) { }
-    }, [onClose]);
+    }, [onClose, 보이는깊이]);
     return (_jsxs("div", { className: `tooltip-menu tooltip-menu--${size} ${className}`, children: [(stack.length > 1 || current.title) && (_jsxs("div", { className: "tooltip-menu__header", children: [stack.length > 1 ? (_jsx(Button, { htmlType: "button", size: itemSize, type: "dot", icon: "chevron-left", ariaLabel: t('common.back', '뒤로'), onClick: goBack, variant: "transparent-gray", useBorder: false })) : null, _jsx("div", { className: "tooltip-menu__title button-1", children: current.title })] })), _jsx("div", { className: "tooltip-menu__columns", ref: itemsWrapRef, children: current.columns && current.columns.map((col, ci) => (_jsxs("div", { className: "tooltip-menu__column", children: [col.title ? _jsx("div", { className: "tooltip-menu__column-title body-3", children: col.title }) : null, _jsx("div", { className: "tooltip-menu__items", children: (col.items || []).map((item, idx) => (_jsx(Button, { htmlType: "button", className: "tooltip-menu__item", size: itemSize, type: item.label ? 'bar' : 'dot', icon: item.selected ? 'check' : (item.icon || 'none'), rightIcon: Array.isArray(item.children) && item.children.length
                                     ? 'chevron-right'
                                     : item.badgeCount
@@ -93,5 +90,5 @@ export default function MenuTooltip({ columns = [], onClose, className = '', siz
                                    (SideNav·BottomNav 와 같은 nav.badgeLabel "알림, 5개"). */
                                 ariaLabel: item.label && item.badgeCount && item.badgeCount > 0
                                     ? t('nav.badgeLabel', { label: item.label, count: item.badgeCount, defaultValue: '{{label}}, {{count}}개' })
-                                    : item.label, onClick: () => handleClick(item), selected: item.selected, disabled: item.disabled, showTooltipInfo: item.tooltip || false, useBorder: false, align: "left" }, idx))) })] }, ci))) })] }));
+                                    : item.label, onClick: () => handleClick(item, ci, idx), selected: item.selected, disabled: item.disabled, showTooltipInfo: item.tooltip || false, useBorder: false, align: "left" }, idx))) })] }, ci))) })] }));
 }

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useRef, useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import Button from '../Button';
 import Section from '../Section';
@@ -29,8 +29,25 @@ export default function TrainingBlock(props) {
     }, [total]);
     /* eslint-enable react-hooks/set-state-in-effect */
     useWindowEvent('speechear.data.updated', () => setDataTick((v) => v + 1));
-    function loadMore() { setVisible((v) => Math.min(total, v + BTN_COUNT_MAX)); }
-    return (_jsxs(Section, { type: sectionType, title: type?.label, icon: type?.icon, disc: type?.desc, className: "training-block", children: [_jsx("div", { className: "training-list", children: (itemsAll || []).slice(0, visible).map((item, idx) => {
+    /* 마지막 '더보기' 는 누르면 사라진다 — 초점이 거기 있었으면 새로 붙은 첫 항목으로 옮긴다(안 옮기면 body 로 떨어졌다) */
+    const 목록Ref = useRef(null);
+    const 더보기초점Ref = useRef(null);
+    function loadMore() {
+        const 단추 = document.activeElement;
+        더보기초점Ref.current = 단추 && 단추.closest?.('.training-block__more') ? visible : null;
+        setVisible((v) => Math.min(total, v + BTN_COUNT_MAX));
+    }
+    useEffect(() => {
+        const 첫새 = 더보기초점Ref.current;
+        if (첫새 == null)
+            return;
+        더보기초점Ref.current = null;
+        const 지금 = document.activeElement;
+        if (지금 && 지금 !== document.body)
+            return;
+        목록Ref.current?.querySelectorAll('.training-block-button')[첫새]?.focus();
+    }, [visible]);
+    return (_jsxs(Section, { type: sectionType, title: type?.label, icon: type?.icon, disc: type?.desc, className: "training-block", children: [_jsx("div", { className: "training-list", ref: 목록Ref, children: (itemsAll || []).slice(0, visible).map((item, idx) => {
                     const itemForBtn = item;
                     const depthForBtn = depthLabel;
                     return (_jsx(TrainingBlockButton, { index: idx, type: type, trainingData: itemForBtn, depth: depthForBtn, renderPopup: renderPopup, completedIds: completedIds, selectedIds: selectedIds, size: size, useDescriptionTooltip: useDescriptionTooltip, onRemove: typeof onRemove === 'function' && selectedIds != null && itemForBtn?.id != null && selectedIds.has(String(itemForBtn.id))

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getTopicTypes, getTrainingTypes } from '../../utils/categories';
+import { TRAINING_TYPE_I18N_KEY } from '../../utils/CategoryData';
 import Icon from '../Icon';
 import Button from '../Button';
 import CategoryIcon from './CategoryIcon';
@@ -93,9 +94,11 @@ export default function TrainingBlockButton(props) {
             const c = topic.iconColor;
             wrapperStyle = { ['--t-item-fg']: c };
         }
-        mainName = parent?.label || '';
+        // 카테고리 이름도 지금 언어로(topic.* · topic.sub.*, 사전에 없으면 등록된 이름)
+        mainName = parent ? t(`topic.${parent.key}`, { defaultValue: parent.label || '' }) : '';
         try {
-            subName = parent?.subs?.find((s) => s.key === subKey)?.label || '';
+            const sub = parent?.subs?.find((s) => s.key === subKey);
+            subName = sub ? t(`topic.sub.${sub.key}`, { defaultValue: sub.label || '' }) : '';
         }
         catch (_) { }
     }
@@ -172,8 +175,11 @@ export default function TrainingBlockButton(props) {
     const isList = size === 'list' || isRow;
     const isCompact = size === 'compact';
     const isSmall = size === 'small';
-    const trainingTypeName = isSmall && type?.key
-        ? (getTrainingTypes().find(t => t.key === type.key)?.label ?? '')
+    // 유형 이름은 지금 언어로 — 등록된 원본의 한국어 라벨을 써 영어 화면 계획 바구니에 '소음 하 문장 듣기' 가 떴다
+    const 유형원본 = isSmall && type?.key ? getTrainingTypes().find(x => x.key === type.key) : undefined;
+    const 유형열쇠 = 유형원본 ? TRAINING_TYPE_I18N_KEY[유형원본.key] : undefined;
+    const trainingTypeName = 유형원본
+        ? (유형열쇠 ? t(`trainingType.${유형열쇠}.title`, { defaultValue: 유형원본.label }) : (유형원본.label ?? ''))
         : '';
     // 타입 라벨이 실제로 렌더되는지(타이틀과 같으면 숨김) — 레이아웃 여백 정리에 사용.
     const typeLabelRendered = (!!showTypeLabel && !!type?.label && type.label !== String(itemTitle)) ||

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

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../../utils/cx';
 import { useTranslation } from 'react-i18next';
@@ -10,7 +11,7 @@ export default function TrainingCardGroup({ title, count, collapsed = false, onT
     /* 접을 수 있는가 — `onToggle` 유무가 그것을 말한다. 새 prop 을 두지 않는다. */
     const 접을수있다 = onToggle != null;
     const cls = cx('training-card-group', dragOver && 'training-card-group--dragover', collapsed && 'training-card-group--collapsed', 접을수있다 && 'training-card-group--collapsible', className);
-    return (_jsxs("div", { className: cls, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, children: [_jsxs("header", { className: "training-card-group__header", children: [접을수있다 && (_jsx(Button, { htmlType: "button", size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: collapsed ? 'chevron-right' : 'chevron-down', ariaLabel: collapsed ? t('common.expand', '펼치기') : t('common.collapse', '접기'), className: "training-card-group__chevron", onClick: onToggle })), typeof title === 'string'
+    return (_jsxs("div", { className: cls, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, children: [_jsxs("header", { className: "training-card-group__header", children: [접을수있다 && (_jsx(Button, { htmlType: "button", size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: collapsed ? 'chevron-right' : 'chevron-down', ariaLabel: collapsed ? t('common.expand', '펼치기') : t('common.collapse', '접기'), className: "training-card-group__chevron", "aria-expanded": !collapsed, onClick: onToggle })), typeof title === 'string'
                         ? _jsx("span", { className: "training-card-group__title h5b", children: title })
                         : title, count !== undefined && _jsx("span", { className: "training-card-group__count body-3b", children: count }), (sort || actions != null) && (_jsxs("span", { className: "training-card-group__actions", onClick: e => e.stopPropagation(), children: [sort && (_jsx(Dropdown, { size: 40, options: sort.options, value: sort.value, placeholder: sort.placeholder, onChange: sort.onChange })), actions] }))] }), !collapsed && (empty
                 ? _jsx("div", { className: "training-card-group__empty body-3", children: emptyContent })

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

@@ -265,6 +265,10 @@ function TrainingPagePopupInner(props) {
     // 최초 공개(reveal) 이후엔 mode 변경을 막는 플래그 (MutationObserver 루프 방지)
     const revealedRef = useRef(false);
     const [resultOverlay, setResultOverlay] = useState(null);
+    /* 결과 요청 세대 — 결과보기가 올리고, 창을 닫거나(다시하기·완료·시나리오 초기화) 새로 요청하면 앞 요청은 늦은 것이 된다.
+       결과 계산이 비동기일 때 늦게 온 옛 결과가 새 판 위에 결과 창을 다시 띄우거나 2회차 결과를 1회차 것으로 덮었다. */
+    const 결과세대Ref = useRef(0);
+    const 결과창닫기 = () => { 결과세대Ref.current += 1; setResultOverlay(null); };
     const [noticeMessage, setNoticeMessage] = useState('');
     const [flowState, setFlowState] = useState(() => createScenarioFlowState());
     const prevPageRef = useRef(typeof pageIndex === 'number' ? pageIndex : null);
@@ -274,7 +278,8 @@ function TrainingPagePopupInner(props) {
         if (!hasScenario && !isChildrenMode)
             return;
         setFlowState(createScenarioFlowState());
-        setResultOverlay(null);
+        결과창닫기();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hasScenario, scenarioId, isChildrenMode]);
     /* eslint-enable react-hooks/set-state-in-effect */
     // 페이지 개수가 줄어들면 flowState.pageIndex를 유효 범위로 보정하는 의도된 동기화다
@@ -544,6 +549,8 @@ function TrainingPagePopupInner(props) {
         return baseResult;
     };
     const handleViewResults = () => {
+        const 내결과 = ++결과세대Ref.current;
+        const 늦음 = () => 내결과 !== 결과세대Ref.current;
         try {
             if (typeof document !== 'undefined' && document.body) {
                 try {
@@ -561,6 +568,8 @@ function TrainingPagePopupInner(props) {
             const maybeAny = maybe;
             Promise.resolve(maybeAny)
                 .then((data) => {
+                if (늦음())
+                    return;
                 if (data)
                     setResultOverlay(data);
                 else
@@ -569,6 +578,8 @@ function TrainingPagePopupInner(props) {
                 .catch((err) => {
                 if (import.meta.env?.DEV)
                     console.error('viewResults scenario handler failed', err);
+                if (늦음())
+                    return;
                 setResultOverlay({ isEmpty: true });
             });
             return;
@@ -579,6 +590,8 @@ function TrainingPagePopupInner(props) {
             const maybeAny = maybe;
             Promise.resolve(maybeAny)
                 .then((data) => {
+                if (늦음())
+                    return;
                 if (data)
                     setResultOverlay(data);
                 else
@@ -587,6 +600,8 @@ function TrainingPagePopupInner(props) {
                 .catch((err) => {
                 if (import.meta.env?.DEV)
                     console.error('viewResults children handler failed', err);
+                if (늦음())
+                    return;
                 setResultOverlay({ isEmpty: true });
             });
             return;
@@ -614,7 +629,7 @@ function TrainingPagePopupInner(props) {
             else {
                 setResultOverlay(maybeAny && typeof maybeAny.then === 'function' ? {} : {});
             }
-            Promise.resolve(maybeAny).then((data) => { if (data)
+            Promise.resolve(maybeAny).then((data) => { if (data && !늦음())
                 setResultOverlay(data); }).catch((err) => { if (import.meta.env?.DEV)
                 console.error('viewResults child handler failed', err); });
             return;
@@ -637,7 +652,7 @@ function TrainingPagePopupInner(props) {
                 if (import.meta && import.meta.env && import.meta.env.DEV)
                     console.debug('TrainingPagePopup: externalOnResult resolved data:', data);
             }
-            catch (e) { } if (data)
+            catch (e) { } if (data && !늦음())
                 setResultOverlay(data); }).catch((err) => { console.error('viewResults external handler failed', err); });
             return;
         }
@@ -796,7 +811,7 @@ function TrainingPagePopupInner(props) {
             });
             completeResult = { correct: finalCorrect, total };
         }
-        setResultOverlay(null);
+        결과창닫기();
         scheduleClose(() => {
             if (typeof onComplete === 'function')
                 onComplete(completeResult);
@@ -820,7 +835,7 @@ function TrainingPagePopupInner(props) {
                 results: (resultOverlay.results || resultOverlay.answers || []),
                 contextsLength: resultOverlay.results ? resultOverlay.results.length : (resultOverlay.answers ? resultOverlay.answers.length : 0),
                 onReplay: () => {
-                    setResultOverlay(null);
+                    결과창닫기();
                     setReplayCount((n) => n + 1);
                     if (hasScenario) {
                         setFlowState(createScenarioFlowState());

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

@@ -82,6 +82,22 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
   
      대신 아래에서 `uiState` 로 겹쳐 읽는다 — 상태 기계는 그대로 두고 화면만 가린다. */
     const [stateLocal, setStateLocal] = useState('active');
+    /* 초점을 가진 큰 '듣기' 단추를 누르면 그 단추가 사라진다 — 재생 모드가 되면 초점을 '재생 / 멈춤' 으로 옮긴다
+       (옮기지 않으면 초점이 body 로 떨어져 키보드 사용자가 멈출 단추를 다시 찾아야 했다). */
+    const 듣기초점옮기기Ref = useRef(false);
+    useEffect(() => {
+        if (stateLocal !== 'playMode' || !듣기초점옮기기Ref.current)
+            return;
+        듣기초점옮기기Ref.current = false;
+        const 지금 = typeof document !== 'undefined' ? document.activeElement : null;
+        if (지금 && 지금 !== document.body)
+            return;
+        const 재생멈춤 = btnsRef.current?.querySelectorAll('button')[1];
+        try {
+            재생멈춤?.focus();
+        }
+        catch (e) { }
+    }, [stateLocal]);
     const [sources, setSources] = useState(null);
     const [segments, setSegments] = useState(null);
     const [currentIndex, setCurrentIndex] = useState(0);
@@ -171,9 +187,14 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
         mountedRef.current = true;
         return () => { mountedRef.current = false; };
     }, []);
+    /* 재생 의도 — 멈춤·정지·완료·트랙 이동이 올린다. 대기 중이던 play() 는 멈추면 AbortError 로 거절되는데, 그것을 "다시 시도할
+       오류" 로만 보고 다시 부르면 **정지를 눌렀는데 소리가 다시 났다**. 시작할 때의 의도가 그대로일 때만 다시 시도한다. */
+    const 재생의도Ref = useRef(0);
+    const 멈춤의도 = () => { 재생의도Ref.current += 1; jumpTokenRef.current += 1; };
     const tryPlayWithRetry = useCallback(async (a, attempts = 3, delayMs = 50) => {
+        const 의도 = 재생의도Ref.current;
         for (let i = 0; i < attempts; i++) {
-            if (!mountedRef.current)
+            if (!mountedRef.current || 의도 !== 재생의도Ref.current)
                 return false;
             try {
                 await a.play();
@@ -182,6 +203,8 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
             catch (err) {
                 const errName = err instanceof Error ? err.name : (typeof err === 'object' && err && 'name' in err ? err.name : undefined);
                 if (errName === 'AbortError') {
+                    if (의도 !== 재생의도Ref.current)
+                        return false;
                     await new Promise((res) => setTimeout(res, delayMs));
                     continue;
                 }
@@ -218,7 +241,9 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
             // 태우므로 그 전엔 요소가 제 볼륨으로 직접 울린다(무음 방지). 태운 뒤 볼륨은 GainNode 로 걸린다.
             try {
                 resumeAudioMeter();
-                void routeElementAudio(a).then((an) => { try {
+                // 늦게 resume 돼도 떠난 플레이어의 미터를 다시 등록하지 않는다(언마운트 정리가 null 로 등록한 뒤)
+                void routeElementAudio(a).then((an) => { if (!mountedRef.current)
+                    return; try {
                     registerAnalyserRef.current?.('main', an);
                 }
                 catch (e) { } });
@@ -484,6 +509,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 +553,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 +591,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 });
             }
@@ -668,6 +720,7 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
                         setPlaybackState('playing');
                     }
                     else {
+                        멈춤의도();
                         a.pause();
                         setPlaybackState('paused');
                     }
@@ -744,6 +797,7 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
                 }
                 else {
                     if (a) {
+                        멈춤의도();
                         a.pause();
                         setPlaybackState("paused");
                     }
@@ -783,6 +837,8 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
         catch (e) { }
     };
     const handleStop = () => {
+        // 기다리던 트랙 이동·재시도가 정지 뒤에 소리를 내지 않게
+        멈춤의도();
         if (ttsMode) {
             stopTTS();
             return;
@@ -884,6 +940,7 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
         const holdDelay = 200;
         const outDelay = 340;
         markCompletedByEnd(true);
+        멈춤의도();
         try {
             setProgress(1);
         }
@@ -1028,7 +1085,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: (e) => { 듣기초점옮기기Ref.current = document.activeElement === e.currentTarget; 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,6 +36,8 @@ 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 */
@@ -44,6 +46,15 @@ export default function TrainingStepCard({ index, stepIndex, isLast = false, tit
         /* 카드 ref 는 비우지 않는다 — 마운트 때도 도는 이 effect 가 막 붙은 ref 를 지워, 따로 쓴 단계에서는 다시 그려질
            일이 없어 '모두 듣기' 가 소리 하나 없이 끝났다. 빠진 카드는 ref 콜백이 null 을 넣고, 재생은 보이는 칸까지만 돈다. */
     }, [itemsKey]);
+    // 쪽 넘김 되돌리기 — 다음 쪽 카드 묶음이 같으면 카드 열쇠가 그대로라 앞 쪽 선택이 남았다(TrainingStepConfirm 과 같은 규칙)
+    const prevStepIndexRef = useRef(undefined);
+    useEffect(() => {
+        const prev = prevStepIndexRef.current;
+        if (typeof prev === 'number' && typeof stepIndex === 'number' && typeof index === 'number' && prev >= index && stepIndex < index) {
+            setSelectedIndex(null);
+        }
+        prevStepIndexRef.current = stepIndex;
+    }, [stepIndex, index]);
     /* eslint-enable react-hooks/set-state-in-effect */
     const handlePlayDone = useCallback((item, i) => {
         // selectable 모드에서는 오디오 재생이 step을 advance하지 않음
@@ -67,7 +78,11 @@ export default function TrainingStepCard({ index, stepIndex, isLast = false, tit
             return;
         setPlayingAll(true);
         try {
-            for (const cardRef of cardRefs.current.slice(0, shown.length)) {
+            /* 매 차례 **지금의** 카드를 읽고, 떠났으면 멈춘다 — 시작할 때 잡아 둔 핸들로 돌면 떠난 화면의 다음 카드가 이어서 울렸다 */
+            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);

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

@@ -30,10 +30,11 @@ export default function TrainingStepConfirm({ index, stepIndex, isLast = false,
     const [selectedAnswer, setSelectedAnswer] = useState(null);
     const [selectedSet, setSelectedSet] = useState(() => new Set());
     /* eslint-disable react-hooks/set-state-in-effect */
+    // 보기를 answer·wrongAnswers 로 만드는 경우도 문항이 바뀌면 푼다 — choices 열쇠만 보면 사과/배 → 배/사과 에서 앞 강조가 남았다
     useEffect(() => {
         setSelectedAnswer(null);
         setSelectedSet(new Set());
-    }, [propChoicesKey]);
+    }, [propChoicesKey, answer, wrongAnswersKey]);
     /* eslint-enable react-hooks/set-state-in-effect */
     // 페이지 전환 감지: stepIndex가 이 step의 index 이상이었다가 다시 미만으로 돌아오면
     // (다음 페이지가 시작되어 stepIndex가 리셋된 경우) 선택 상태도 초기화한다.

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useEffect, useState } from "react";
 import { useTranslation } from 'react-i18next';
 import Button from '../Button';
 import "./TrainingStep.css";
@@ -15,15 +15,35 @@ export default function TrainingStepConfirmWithText({ index, stepIndex, isLast =
     const sentence = context && typeof context === 'object' ? (context.sentence || '') : (typeof context === 'string' ? context : '');
     const choices = context && typeof context === 'object' ? context.choices : undefined;
     const [selectedAnswer, setSelectedAnswer] = useState(demoSelected ?? null);
-    // 문장이 **바뀔 때만** 선택을 푼다(렌더 중 상태 조정). 예전 effect 는 selectedAnswer 를 의존성에 두고
+    // 문항이 **바뀔 때만** 선택을 푼다(렌더 중 상태 조정). 예전 effect 는 selectedAnswer 를 의존성에 두고
     // "null 이 아니면 null 로" 를 해서, 답을 누르면 한 박자 뒤 강조가 곧바로 사라졌다.
-    // 데모 강제 선택 시에는 문장 변경 리셋을 건너뛴다.
-    const [prevSentence, setPrevSentence] = useState(sentence);
-    if (prevSentence !== sentence) {
-        setPrevSentence(sentence);
+    // 문항 열쇠는 문장 + 보기 — 문장만 보면 보기만 바뀐 문항에서 같은 번호의 새 보기가 골라진 채 보였다.
+    // 데모 강제 선택 시에는 문항 변경 리셋을 건너뛴다.
+    const 문항열쇠 = `${String(sentence)}\u0000${JSON.stringify(choices ?? null)}`;
+    const [prevKey, setPrevKey] = useState(문항열쇠);
+    if (prevKey !== 문항열쇠) {
+        setPrevKey(문항열쇠);
         if (demoSelected == null)
             setSelectedAnswer(null);
     }
+    // 데모 선택이 바뀌면 따른다(useState 초기값만 쓰여 undefined → true 로 바꿔도 강조가 안 켜졌다)
+    const [prevDemo, setPrevDemo] = useState(demoSelected);
+    if (prevDemo !== demoSelected) {
+        setPrevDemo(demoSelected);
+        setSelectedAnswer(demoSelected ?? null);
+    }
+    // 쪽 넘김 되돌리기 — stepIndex 가 이 단계 이상이었다가 다시 미만으로 오면(다음 쪽이 시작됨) 선택을 푼다.
+    // 다음 쪽 문장이 같으면 문항 열쇠가 그대로라 앞 쪽 답의 강조가 남았다(TrainingStepConfirm 과 같은 규칙).
+    const prevStepIndexRef = useRef(undefined);
+    useEffect(() => {
+        const prev = prevStepIndexRef.current;
+        if (typeof prev === 'number' && typeof stepIndex === 'number' && typeof index === 'number'
+            && prev >= index && stepIndex < index && demoSelected == null) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            setSelectedAnswer(null);
+        }
+        prevStepIndexRef.current = stepIndex;
+    }, [stepIndex, index, demoSelected]);
     const handleEndedLocal = useCallback((payload) => {
         const p = (typeof payload === 'object' && payload !== null)
             ? Object.assign({}, payload, { __ts: Date.now() })

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 };