@ihabdevteam/core 0.137.0 → 0.138.0

package/dist/ihabdevteam-core.d.ts

@@ -1376,7 +1376,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.137.0";
+export declare const CORE_VERSION = "0.138.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;

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

@@ -68,7 +68,16 @@ export default function Button(props) {
     useEffect(() => {
         if (prevDisabledRef.current && !disabledProp && btnRef.current) {
             const btn = btnRef.current;
-            btn.blur();
+            /* 마우스로 잡힌 초점만 푼다 — 키보드로 누른 단추(모두 듣기 등)가 막혔다 풀리는 순간 무조건 blur 해 초점이 body 로 빠졌다 */
+            let 마우스초점 = false;
+            try {
+                마우스초점 = btn.matches(':focus:not(:focus-visible)');
+            }
+            catch {
+                마우스초점 = false;
+            }
+            if (마우스초점)
+                btn.blur();
             btn.style.pointerEvents = 'none';
             const id = requestAnimationFrame(() => {
                 requestAnimationFrame(() => {

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

@@ -303,7 +303,7 @@ export default function PassCard({ product, showPrice = false, plan, type, endDa
                 ...(onDelete ? [{ label: t('passCard.menu.delete', '삭제하기'), icon: 'trash-2', onClick: () => { onDelete(); setMenuAnchor(null); }, closeOnSelect: true }] : []),
             ],
         }];
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "pass-card-frame", children: _jsxs("div", { ref: cardRef, className: `pass-card pass-card--${state}${hasMenu ? ' pass-card--clickable' : ''}`, style: cardStyle, onMouseEnter: handleMouseEnter, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, onClick: handleCardClick, onKeyDown: hasMenu ? handleCardKeyDown : undefined, role: hasMenu ? 'button' : undefined, tabIndex: hasMenu ? 0 : undefined, children: [bg ?? getDefaultBg(rType, rPlan, rLabel), !bgOnly && (_jsxs(_Fragment, { children: [_jsx("div", { className: "pass-card__top", children: _jsxs("div", { className: "pass-card__top-left", children: [_jsx("img", { src: resolvedLogoSrc ?? LOGO[rType], className: "pass-card__logo", alt: rType === 'manager'
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "pass-card-frame", children: _jsxs("div", { ref: cardRef, className: `pass-card pass-card--${state}${hasMenu ? ' pass-card--clickable' : ''}`, style: cardStyle, onMouseEnter: handleMouseEnter, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, onClick: handleCardClick, onKeyDown: hasMenu ? handleCardKeyDown : undefined, role: hasMenu ? 'button' : undefined, tabIndex: hasMenu ? 0 : undefined, "aria-haspopup": hasMenu ? 'menu' : undefined, "aria-expanded": hasMenu ? !!menuAnchor : undefined, children: [bg ?? getDefaultBg(rType, rPlan, rLabel), !bgOnly && (_jsxs(_Fragment, { children: [_jsx("div", { className: "pass-card__top", children: _jsxs("div", { className: "pass-card__top-left", children: [_jsx("img", { src: resolvedLogoSrc ?? LOGO[rType], className: "pass-card__logo", alt: rType === 'manager'
                                                     ? t('header.logoManager', '말귀매니저 로고')
                                                     : t('header.logoMalgwi', '말귀 로고') }), _jsxs("div", { className: "pass-card__plan", children: [_jsx("div", { children: planDisplay }), _jsx("span", { className: "h5b pass-card__plan-suffix", children: rLabel ? t('passCard.labeledPlan', { label: rLabel }) : t('passCard.planSuffix', '이용권') })] })] }) }), rPrice
                                     ? (_jsxs("div", { className: "pass-card__price-area", children: [rDiscountLabel && _jsx("span", { className: "pass-card__discount body-3", children: rDiscountLabel }), _jsxs("div", { className: "pass-card__price", children: [rOriginalPrice && _jsx("span", { className: "pass-card__price-original body-3", children: toWonSymbol(rOriginalPrice) }), priceDisplay] })] }))

package/dist/packages/core/src/components/Popup/LoadTablePopup.js

@@ -82,7 +82,9 @@ export default function LoadTablePopup({ onLoad, onCancel, tables: tablesProp, o
             animateThen(() => onLoad(table));
     }, [tables, selected, onLoad]);
     const headerActions = useMemo(() => tables.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: VIEW_OPTIONS, value: viewMode, onChange: handleSetViewMode }), _jsx(Dropdown, { options: SORT_OPTIONS, value: sortKey, onChange: handleSetSortKey })] })) : undefined, [tables.length, viewMode, sortKey, handleSetViewMode, handleSetSortKey, VIEW_OPTIONS, SORT_OPTIONS]);
-    return (_jsx(Popup, { className: "popup--load-table", title: t('wordTable.loadTable.title', '저장된 단어 표 불러오기'), headerActions: headerActions, onClose: onCancel, footer: ({ animateThen, closeWithAnimation }) => (_jsxs("div", { className: "load-table-popup__footer-actions", children: [_jsx(Button, { htmlType: "button", size: 48, type: "bar", label: t('common.cancel', '취소'), onClick: closeWithAnimation, width: "fit-content" }), _jsx(Button, { htmlType: "button", size: 48, type: "bar", variant: "main", label: t('wordTable.loadTable.loadButton', '불러오기'), width: "fit-content", disabled: !selected, onClick: () => handleLoadSelected(animateThen) })] })), children: _jsx("div", { className: "load-table-popup__body", children: tables.length === 0 ? (_jsx("p", { className: "load-table-popup__empty body-2", children: t('wordTable.loadTable.empty', '저장된 단어 표가 없습니다.') })) : (_jsxs(_Fragment, { children: [viewMode === 'grid' && (_jsx("ul", { className: "load-table-popup__grid", children: sorted.map(table => (_jsxs("li", { className: `load-table-popup__card${selected === table.id ? ' load-table-popup__card--selected' : ''}`, onClick: () => setSelected(table.id), ...pressable(() => setSelected(table.id)), children: [_jsx(DeleteButton, { onClick: e => handleDelete(table.id, e), ariaLabel: t('wordTable.loadTable.deleteAriaLabel', '삭제') }), _jsx(TableThumbnail, { table: table }), _jsxs("div", { className: "load-table-popup__card-info", children: [_jsx("span", { className: "load-table-popup__card-name body-2", children: table.name }), _jsxs("span", { className: "load-table-popup__card-meta caption-1", children: [formatDate(table.savedAt), " \u00B7 ", t('wordTable.loadTable.itemCount', { count: table.items.length, defaultValue: '{{count}}개' })] })] })] }, table.id))) })), viewMode === 'list' && (_jsx("ul", { className: "load-table-popup__list", children: sorted.map(table => (_jsxs("li", { className: `load-table-popup__row${selected === table.id ? ' load-table-popup__row--selected' : ''}`, onClick: () => setSelected(table.id), ...pressable(() => setSelected(table.id)), children: [_jsx("span", { className: "load-table-popup__row-check", children: selected === table.id && (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: _jsx("polyline", { points: "4 13 9 18 20 6", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), _jsxs("div", { className: "load-table-popup__row-main", children: [_jsx("span", { className: "load-table-popup__row-name body-2", children: table.name }), _jsx("div", { className: "load-table-popup__row-words", children: table.items.map((item, i) => (_jsx("span", { className: "load-table-popup__row-word caption-1", children: (item.words ?? []).length >= 2
+    return (_jsx(Popup, { className: "popup--load-table", title: t('wordTable.loadTable.title', '저장된 단어 표 불러오기'), headerActions: headerActions, onClose: onCancel, footer: ({ animateThen, closeWithAnimation }) => (_jsxs("div", { className: "load-table-popup__footer-actions", children: [_jsx(Button, { htmlType: "button", size: 48, type: "bar", label: t('common.cancel', '취소'), onClick: closeWithAnimation, width: "fit-content" }), _jsx(Button, { htmlType: "button", size: 48, type: "bar", variant: "main", label: t('wordTable.loadTable.loadButton', '불러오기'), width: "fit-content", 
+                    // 고른 표가 지금 목록에 있을 때만 — 부모 목록에서 빠진 표를 가리키면 눌러도 아무 일이 없었다
+                    disabled: !selected || !tables.some(t => t.id === selected), onClick: () => handleLoadSelected(animateThen) })] })), children: _jsx("div", { className: "load-table-popup__body", children: tables.length === 0 ? (_jsx("p", { className: "load-table-popup__empty body-2", children: t('wordTable.loadTable.empty', '저장된 단어 표가 없습니다.') })) : (_jsxs(_Fragment, { children: [viewMode === 'grid' && (_jsx("ul", { className: "load-table-popup__grid", children: sorted.map(table => (_jsxs("li", { className: `load-table-popup__card${selected === table.id ? ' load-table-popup__card--selected' : ''}`, onClick: () => setSelected(table.id), ...pressable(() => setSelected(table.id)), children: [_jsx(DeleteButton, { onClick: e => handleDelete(table.id, e), ariaLabel: t('wordTable.loadTable.deleteAriaLabel', '삭제') }), _jsx(TableThumbnail, { table: table }), _jsxs("div", { className: "load-table-popup__card-info", children: [_jsx("span", { className: "load-table-popup__card-name body-2", children: table.name }), _jsxs("span", { className: "load-table-popup__card-meta caption-1", children: [formatDate(table.savedAt), " \u00B7 ", t('wordTable.loadTable.itemCount', { count: table.items.length, defaultValue: '{{count}}개' })] })] })] }, table.id))) })), viewMode === 'list' && (_jsx("ul", { className: "load-table-popup__list", children: sorted.map(table => (_jsxs("li", { className: `load-table-popup__row${selected === table.id ? ' load-table-popup__row--selected' : ''}`, onClick: () => setSelected(table.id), ...pressable(() => setSelected(table.id)), children: [_jsx("span", { className: "load-table-popup__row-check", children: selected === table.id && (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: _jsx("polyline", { points: "4 13 9 18 20 6", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), _jsxs("div", { className: "load-table-popup__row-main", children: [_jsx("span", { className: "load-table-popup__row-name body-2", children: table.name }), _jsx("div", { className: "load-table-popup__row-words", children: table.items.map((item, i) => (_jsx("span", { className: "load-table-popup__row-word caption-1", children: (item.words ?? []).length >= 2
                                                     ? `${item.words[0].label} · ${item.words[1].label}`
                                                     : item.words?.[0]?.label ?? item.id }, i))) })] }), _jsx("span", { className: "load-table-popup__row-count caption-1", children: t('wordTable.loadTable.itemCount', { count: table.items.length, defaultValue: '{{count}}개' }) }), _jsx("span", { className: "load-table-popup__row-date caption-1", children: formatDate(table.savedAt) }), _jsx(DeleteButton, { onClick: e => handleDelete(table.id, e), ariaLabel: t('wordTable.loadTable.deleteAriaLabel', '삭제') })] }, table.id))) }))] })) }) }));
 }

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

@@ -299,7 +299,10 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
         ? { '--table-grid-cols': effectiveGrid }
         : undefined;
     const hasHeader = title !== undefined;
-    return (_jsx("div", { className: `table-wrap table-wrap--${size}${폭조절 ? ' table-wrap--resizable' : ''}${dragOver ? ' table-wrap--dragover' : ''}${collapsed ? ' table-wrap--collapsed' : ''}`, style: gridStyle, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, children: _jsxs("div", { className: "table body-2", children: [hasHeader && (_jsxs("div", { className: "table-header", onClick: onToggleCollapse, role: onToggleCollapse ? 'button' : undefined, tabIndex: onToggleCollapse ? 0 : undefined, "aria-expanded": onToggleCollapse ? !collapsed : undefined, onKeyDown: onToggleCollapse ? (e) => { if (e.key === 'Enter' || e.key === ' ') {
+    return (_jsx("div", { className: `table-wrap table-wrap--${size}${폭조절 ? ' table-wrap--resizable' : ''}${dragOver ? ' table-wrap--dragover' : ''}${collapsed ? ' table-wrap--collapsed' : ''}`, style: gridStyle, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, children: _jsxs("div", { className: "table body-2", children: [hasHeader && (_jsxs("div", { className: "table-header", onClick: onToggleCollapse, role: onToggleCollapse ? 'button' : undefined, tabIndex: onToggleCollapse ? 0 : undefined, "aria-expanded": onToggleCollapse ? !collapsed : undefined, 
+                    // 머리 안 단추(headerActions)에서 누른 키는 그 단추 몫이다 — 가로채면 표가 접히고 단추 동작은 막혔다(TableRow 와 같게)
+                    onKeyDown: onToggleCollapse ? (e) => { if (e.target !== e.currentTarget)
+                        return; if (e.key === 'Enter' || e.key === ' ') {
                         e.preventDefault();
                         onToggleCollapse();
                     } } : undefined, children: [onToggleCollapse && (_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: "table-header__chevron" })), icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "table-header__icon" })), _jsx("span", { className: "table-header__title h5b", children: title }), count !== undefined && _jsx("span", { className: "table-header__count body-3b", children: count }), headerActions && (_jsx("span", { className: "table-header__actions", onClick: e => e.stopPropagation(), children: headerActions }))] })), !collapsed && (_jsxs(_Fragment, { children: [headerGroups && headerGroups.length > 0 && (_jsx("div", { className: "table-fields table-fields--groups", children: headerGroups.map((g, i) => (_jsx("div", { className: cx('table-field body-3', g.className), style: { gridColumn: `span ${g.span}` }, children: g.label }, i))) })), _jsxs("div", { className: cx('table-fields-strip', 폭조절 && 'table-fields-strip--resizable'), children: [_jsx("div", { className: "table-fields", ref: fieldsRef, children: fields.map((f, i) => (_jsx(TableField, { onClick: f.onClick, className: f.className, sortDir: f.sortDir, 

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/TrainingCardGroup.js

@@ -11,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) { } });
@@ -695,6 +720,7 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
                         setPlaybackState('playing');
                     }
                     else {
+                        멈춤의도();
                         a.pause();
                         setPlaybackState('paused');
                     }
@@ -771,6 +797,7 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
                 }
                 else {
                     if (a) {
+                        멈춤의도();
                         a.pause();
                         setPlaybackState("paused");
                     }
@@ -810,6 +837,8 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
         catch (e) { }
     };
     const handleStop = () => {
+        // 기다리던 트랙 이동·재시도가 정지 뒤에 소리를 내지 않게
+        멈춤의도();
         if (ttsMode) {
             stopTTS();
             return;
@@ -911,6 +940,7 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
         const holdDelay = 200;
         const outDelay = 340;
         markCompletedByEnd(true);
+        멈춤의도();
         try {
             setProgress(1);
         }
@@ -1055,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: 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, 
+    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

@@ -46,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하지 않음

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/TrainingStepTextBox.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from 'react-i18next';
 import Button from '../Button';
 import Toast from '../Toast';
@@ -30,7 +30,13 @@ export default function TrainingStepTextBox({ context, state = "disabled", theme
         storageKey: 'textbox_fontScale',
     });
     const [noticeMessage, setNoticeMessage] = useState('');
-    const handleActivate = useCallback(() => setLocalStatus("active"), []);
+    /* 초점을 가진 '문장 미리보기' 를 누르면 그 단추가 사라진다 — 펼친 상자의 첫 조작 단추로 초점을 옮긴다 */
+    const 상자Ref = useRef(null);
+    const 펼친뒤초점Ref = useRef(false);
+    const handleActivate = useCallback(() => {
+        펼친뒤초점Ref.current = !!상자Ref.current && 상자Ref.current.contains(document.activeElement);
+        setLocalStatus("active");
+    }, []);
     const handleNoticeClose = useCallback(() => setNoticeMessage(''), []);
     const showNotice = (msg) => {
         try {
@@ -73,5 +79,14 @@ export default function TrainingStepTextBox({ context, state = "disabled", theme
         fontSize: `${fontSize}px`,
         lineHeight: `${lineHeight}px`,
     }), [fontSize, lineHeight]);
-    return (_jsxs("div", { className: `training-text-box ${stateClass} ${displayStatus !== 'disabled' && theme === 'dark' ? 'is-dark' : ''}`, children: [displayStatus === "disabled" && (_jsx("div", { className: "training-text-box__preview", children: _jsx(Button, { htmlType: "button", size: 48, type: "bar", onClick: handleActivate, icon: 'eye', ariaLabel: t('training.sentencePreview', '문장 미리보기'), label: t('training.sentencePreview', '문장 미리보기'), useBorder: false }) })), _jsx("div", { className: "training-text-box__area", "aria-hidden": displayStatus === "disabled", children: _jsx("span", { className: "training-text-box__inner h3", style: textStyle, children: content }) }), displayStatus !== "disabled" && (_jsxs("div", { className: "training-text-box__buttons", "aria-hidden": displayStatus === "disabled", children: [_jsx(Button, { htmlType: "button", size: 32, type: "dot", onClick: decrease, onDisabledClick: () => showNotice(t('training.fontSizeMin', '글씨 크기가 최소입니다.')), ariaLabel: t('training.fontSizeDecrease', '글자 크기 감소'), icon: 'minus', variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray', disabled: !canDecrease, useBorder: false, showTooltipInfo: true, ...(!isMobile && { width: '60px' }) }), _jsx(Button, { htmlType: "button", size: 32, type: "dot", onClick: increase, onDisabledClick: () => showNotice(t('training.fontSizeMax', '글씨 크기가 최대입니다.')), ariaLabel: t('training.fontSizeIncrease', '글자 크기 증가'), icon: 'plus', variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray', disabled: !canIncrease, useBorder: false, showTooltipInfo: true, ...(!isMobile && { width: '60px' }) }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", useBorder: false, width: 48, icon: theme === 'dark' ? 'moon' : 'sun-medium', onClick: toggleTheme, ariaLabel: t('training.toggleBackground', '배경 전환'), variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray' })] })), _jsx(Toast, { message: noticeMessage, position: "top", onClose: handleNoticeClose })] }));
+    useEffect(() => {
+        if (displayStatus === 'disabled' || !펼친뒤초점Ref.current)
+            return;
+        펼친뒤초점Ref.current = false;
+        const 지금 = document.activeElement;
+        if (지금 && 지금 !== document.body)
+            return;
+        상자Ref.current?.querySelector('.training-text-box__buttons button')?.focus();
+    }, [displayStatus]);
+    return (_jsxs("div", { ref: 상자Ref, className: `training-text-box ${stateClass} ${displayStatus !== 'disabled' && theme === 'dark' ? 'is-dark' : ''}`, children: [displayStatus === "disabled" && (_jsx("div", { className: "training-text-box__preview", children: _jsx(Button, { htmlType: "button", size: 48, type: "bar", onClick: handleActivate, icon: 'eye', ariaLabel: t('training.sentencePreview', '문장 미리보기'), label: t('training.sentencePreview', '문장 미리보기'), useBorder: false }) })), _jsx("div", { className: "training-text-box__area", "aria-hidden": displayStatus === "disabled", children: _jsx("span", { className: "training-text-box__inner h3", style: textStyle, children: content }) }), displayStatus !== "disabled" && (_jsxs("div", { className: "training-text-box__buttons", "aria-hidden": displayStatus === "disabled", children: [_jsx(Button, { htmlType: "button", size: 32, type: "dot", onClick: decrease, onDisabledClick: () => showNotice(t('training.fontSizeMin', '글씨 크기가 최소입니다.')), ariaLabel: t('training.fontSizeDecrease', '글자 크기 감소'), icon: 'minus', variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray', disabled: !canDecrease, useBorder: false, showTooltipInfo: true, ...(!isMobile && { width: '60px' }) }), _jsx(Button, { htmlType: "button", size: 32, type: "dot", onClick: increase, onDisabledClick: () => showNotice(t('training.fontSizeMax', '글씨 크기가 최대입니다.')), ariaLabel: t('training.fontSizeIncrease', '글자 크기 증가'), icon: 'plus', variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray', disabled: !canIncrease, useBorder: false, showTooltipInfo: true, ...(!isMobile && { width: '60px' }) }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", useBorder: false, width: 48, icon: theme === 'dark' ? 'moon' : 'sun-medium', onClick: toggleTheme, ariaLabel: t('training.toggleBackground', '배경 전환'), variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray' })] })), _jsx(Toast, { message: noticeMessage, position: "top", onClose: handleNoticeClose })] }));
 }

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

@@ -29,7 +29,8 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
     // 단어가 비면 뒷면으로 플립되는데, 그 애니메이션 동안 앞면이 '단어·발음 없이' 돌아가면 어색하다.
     // 플립 트리거(showBack)는 현재 값으로 두되, 앞면에 그릴 내용은 '마지막으로 채워졌던' 값을 유지한다.
     const [front, setFront] = useState({ label, subLabel, colloquialLabel, homonum: item.homonum });
-    if (label && front.label !== label) {
+    // 낱말이 있으면 넷을 **통째로** 견준다 — 낱말만 보면 같은 낱말에 발음이 새로 오거나 동음이의어 번호가 바뀌어도 앞 값이 남았다
+    if (label && (front.label !== label || front.subLabel !== subLabel || front.colloquialLabel !== colloquialLabel || front.homonum !== item.homonum)) {
         setFront({ label, subLabel, colloquialLabel, homonum: item.homonum });
     }
     // ── 재생 상태 ──
@@ -161,6 +162,9 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
            둘이 함께 울렸다. speechSynthesis 만 전역이라 음원 없는 낱말에서는 멀쩡해 보였고,
            그래서 증상이 반만 나타났다. 스피커가 하나이므로 자물쇠도 전역에 둔다. */
         const 멈춤 = () => {
+            // 남(다른 카드·다음 누름)이 자리를 가져가며 부르면 이 카드는 더 이상 쥐고 있지 않다 — 기다리던 흐름이 이것을 보고 물러선다
+            if (쥔소리Ref.current === 멈춤)
+                쥔소리Ref.current = null;
             try {
                 audioRef.current?.pause();
             }
@@ -189,7 +193,9 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
             if (fallbackResolver && label) {
                 try {
                     const url = await Promise.resolve(fallbackResolver(label));
-                    if (!mountedRef.current)
+                    /* 기다리는 사이 떠났거나 **소리 자리를 남에게 넘겼으면**(다른 카드를 눌렀거나 같은 카드를 다시 눌렀으면) 끝낸다 —
+                       늦게 온 합성 주소로 틀어 두 소리가 겹쳤고, 같은 카드를 두 번 누르면 두 번 울려 onPlayDone 도 두 번 나갔다. */
+                    if (!mountedRef.current || 쥔소리Ref.current !== 멈춤)
                         return;
                     if (url) {
                         setPlaying(true);
@@ -199,7 +205,7 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
                 }
                 catch { }
             }
-            if (!mountedRef.current)
+            if (!mountedRef.current || 쥔소리Ref.current !== 멈춤)
                 return;
             await playSpeechSynthesis();
         }

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

@@ -67,7 +67,9 @@ export function useNoiseFade({ noisePlayer, audioRef, playbackStateRef, }) {
         // 볼륨은 setElementVolume 이 그래프면 GainNode, 아니면 요소 volume 에 건다(iOS 실기기는 요소 volume 이 안 먹는다).
         try {
             resumeAudioMeter();
-            void routeElementAudio(noiseEl).then((an) => { try {
+            // 늦게 resume 돼도 버려진 소음 요소의 미터를 다시 등록하지 않는다
+            void routeElementAudio(noiseEl).then((an) => { if (noiseAudioRef.current !== noiseEl)
+                return; try {
                 registerAnalyserRef.current?.('noise', an);
             }
             catch (e) { } });