@ihabdevteam/core 0.134.0 → 0.136.0

package/dist/packages/core/src/components/Report/ReportDocument.js

@@ -44,7 +44,10 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
     const measureRef = useRef(null);
     const chromeRef = useRef(null);
     const rulerRef = useRef(null);
-    const [pages, setPages] = useState(null);
+    /* 쪽 나눔은 **어느 블록 구성(shape)으로 잰 것인지**와 함께 둔다. 블록 수가 줄면 다시 재는 layout effect 가 렌더 뒤에야 돌아,
+       그 사이 렌더가 옛 쪽의 번호로 새 blocks 를 읽다 `blocks[i]` 가 없어 **화면 전체가 깨졌다**(선택 섹션을 끄거나 자료를 다시
+       받아 행이 줄 때). 지금 구성의 것이 아니면 없는 것으로 본다. */
+    const [measured, setMeasured] = useState(null);
     /* **넘칠 때만 탭 자리를 만든다.** A4 한 장은 794px 이라 좁은 자리에서는 가로로
        넘치는데, 이 상자 안에는 포커스 갈 곳이 하나도 없다 — 그러면 키보드만 쓰는
        사람은 오른쪽 절반을 **영영 못 본다**(WCAG 2.1.1). 실측: 겉 560px 에 안 794px.
@@ -64,7 +67,7 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
         const ro = new ResizeObserver(재자);
         ro.observe(el);
         return () => ro.disconnect();
-    }, [pages]);
+    }, [measured]);
     // 블록 구성이 바뀌었는지를 값 하나로 본다. blocks 배열 자체는 렌더마다 새로
     // 만들어지는 일이 흔해 의존성에 그대로 넣으면 측정 → setPages → 렌더 → 측정
     // 이 끝나지 않는다.
@@ -73,13 +76,31 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
        통째로 건너뛴다 — 고친 사람의 변경을 볼 수도 찾을 수도 없다.
        돌리는 값은 예전과 한 바이트도 다르지 않다. */
     const shape = blocks.map((b) => `${b.id}\u0000${b.section ?? ''}\u0000${b.group ?? ''}`).join('\u0001');
+    const pages = measured && measured.shape === shape ? measured.pages : null;
+    /* 자(ruler)의 높이 — 0 에서 크기가 생기면(숨겨져 있다 보이게 됨) 다시 잰다 */
+    const [자크기, set자크기] = useState(0);
+    useEffect(() => {
+        const ruler = rulerRef.current;
+        if (!ruler || typeof ResizeObserver === 'undefined')
+            return;
+        const ro = new ResizeObserver(() => set자크기(ruler.offsetHeight));
+        ro.observe(ruler);
+        return () => ro.disconnect();
+    }, []);
     useLayoutEffect(() => {
         const el = measureRef.current;
         const ruler = rulerRef.current;
         if (!el || !ruler)
             return;
-        const chromeH = chromeRef.current?.offsetHeight ?? 0;
-        const budget = ruler.offsetHeight - chromeH;
+        /* display:none 안에서 처음 그리면 자·블록이 모두 0 이라 한 갈래가 한 장에 몰리는데, 보이게 된 뒤에도 구성이 같아 다시
+           재지 않았다 — 자의 높이(자크기)를 의존성에 두어 크기가 생기면 다시 잰다. */
+        /* 머리·바닥 높이는 **갈래마다** 잰다 — 제목이 있는 갈래와 없는 갈래는 머리 높이가 달라, 첫 갈래 것 하나로 재면 제목 있는
+           뒤 갈래의 장이 넘쳤다. */
+        const chromeOf = new Map();
+        chromeRef.current?.querySelectorAll('[data-chrome-section]').forEach((node) => {
+            chromeOf.set(node.dataset.chromeSection ?? '', node.offsetHeight);
+        });
+        const budgetFor = (section) => ruler.offsetHeight - (chromeOf.get(section ?? '') ?? 0);
         const heights = Array.from(el.children).map((c) => c.offsetHeight);
         // 이웃한 같은 group 을 한 덩어리로 묶는다.
         const groups = [];
@@ -103,6 +124,7 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
         };
         groups.forEach((grp) => {
             const groupH = grp.reduce((sum, i) => sum + heights[i], 0);
+            const budget = budgetFor(blocks[grp[0]].section);
             // 갈래가 바뀌면 새 장에서 시작한다.
             if (cur.length && blocks[cur[0]].section !== blocks[grp[0]].section)
                 flush();
@@ -124,10 +146,10 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
             }
         });
         flush();
-        setPages(packed);
+        setMeasured({ shape, pages: packed });
         // blocks 는 위 shape 로 대신 본다.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [shape]);
+    }, [shape, 자크기]);
     /* 번들러마다 SVG import 결과가 다르다 — Vite 는 문자열, Next 는 `{ src }` 객체다.
        문자열만 보면 Next 앱에서 fallback 경로(`/logo/...`)로 떨어져 404 가 난다
        (kscan 결과지의 바닥 로고가 실제로 깨졌다). 둘 다 받는다. */
@@ -140,9 +162,9 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
         header: (_jsxs("div", { className: "report-doc__header", children: [_jsx("h2", { className: "report-doc__title h3b", children: (section != null && sectionTitles?.[section]) || null }), logo] })),
         footer: (_jsxs("div", { className: "report-doc__footer caption-1", children: [_jsx("span", { className: "report-doc__footer-left", children: footerLeft }), _jsx("span", { className: "report-doc__page-no", children: pageLabel(page, total) })] })),
     });
-    // 머리·바닥이 쓰는 높이를 재기 위한 견본. 쪽 번호 자릿수만큼만 다르므로
-    // 첫 장의 것으로 대신한다.
-    const sampleChrome = chrome(1, 1, blocks[0]?.section);
+    // 머리·바닥이 쓰는 높이를 재기 위한 견본 — 갈래마다 하나(제목 유무로 머리 높이가 다르다). 쪽 번호 자릿수만큼만
+    // 다르므로 첫 장 번호로 잰다.
+    const chromeSections = Array.from(new Set(blocks.map((b) => b.section ?? '')));
     const vars = {
         ...(pageWidth ? { '--report-page-w': pageWidth } : null),
         ...(pageHeight ? { '--report-page-h': pageHeight } : null),
@@ -152,7 +174,10 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
     return (_jsxs("div", { ref: rootRef, className: cx('report-doc', className), style: vars, 
         /* 굴릴 것이 있을 때만 포커스를 받는다. 이름 없이 포커스만 주면 낭독기가
            문서 전체를 읽어 버리므로 역할과 이름을 함께 준다. */
-        tabIndex: 넘침 ? 0 : undefined, role: 넘침 ? 'group' : undefined, "aria-label": 넘침 ? t('report.previewRegion', '보고서 미리보기') : undefined, children: [_jsxs("div", { className: "report-doc__measure", "aria-hidden": true, children: [_jsx("div", { ref: rulerRef, className: "report-doc__ruler" }), _jsxs("div", { ref: chromeRef, children: [sampleChrome.header, sampleChrome.footer] }), _jsx("div", { ref: measureRef, className: "report-doc__measure-blocks", children: blocks.map((b) => (_jsx("div", { children: b.content }, b.id))) })] }), pages && (_jsx("div", { className: "report-doc__pages", children: pages.map((idxs, p) => {
+        tabIndex: 넘침 ? 0 : undefined, role: 넘침 ? 'group' : undefined, "aria-label": 넘침 ? t('report.previewRegion', '보고서 미리보기') : undefined, children: [_jsxs("div", { className: "report-doc__measure", "aria-hidden": true, children: [_jsx("div", { ref: rulerRef, className: "report-doc__ruler" }), _jsx("div", { ref: chromeRef, children: chromeSections.map((sec) => {
+                            const c = chrome(1, 1, sec || undefined);
+                            return _jsxs("div", { "data-chrome-section": sec, children: [c.header, c.footer] }, sec);
+                        }) }), _jsx("div", { ref: measureRef, className: "report-doc__measure-blocks", children: blocks.map((b) => (_jsx("div", { children: b.content }, b.id))) })] }), pages && (_jsx("div", { className: "report-doc__pages", children: pages.map((idxs, p) => {
                     const { header, footer: pageFooter } = chrome(p + 1, pages.length, blocks[idxs[0]].section);
                     return (_jsxs("section", { className: "report-doc__page", children: [header, idxs.map((i) => (_jsx("div", { children: blocks[i].content }, blocks[i].id))), pageFooter] }, p));
                 }) }))] }));

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

@@ -11,6 +11,15 @@ const RING_SIZE_PRESET = {
     large: { diameter: 160, strokeWidth: 22 },
 };
 /** 원시 링 렌더링 — 도넛 링 하나만 그린다(헤더/legend 없음) */
+/** 비율 → 퍼센트 정수. **다 채우기 전에는 100 을 내지 않는다** — 반올림하면 199/200 이 '100%' 인데 링 끝은 비고 범례는
+ *  '미완료 1건' 이었다(말귀 숙제 완료율). 같은 까닭으로 0 초과면 0 을 내지 않는다. */
+function 퍼센트(ratio) {
+    if (!Number.isFinite(ratio) || ratio <= 0)
+        return 0;
+    if (ratio >= 1)
+        return 100;
+    return Math.min(99, Math.max(1, Math.round(ratio * 100)));
+}
 function RingChartCanvas({ done, total, segments, color = 'var(--color-main)', size = 'medium', strokeWidth, label = '%', hideCenter = false, hideLabel = false }) {
     const dim = typeof size === 'number' ? size : RING_SIZE_PRESET[size].diameter;
     const stroke = strokeWidth ?? (typeof size === 'number' ? 12 : RING_SIZE_PRESET[size].strokeWidth);
@@ -23,7 +32,9 @@ function RingChartCanvas({ done, total, segments, color = 'var(--color-main)', s
             const acc = out.length > 0 ? out[out.length - 1].acc : 0;
             // 누적 비율이 1을 넘지 않도록 clamp — 호출자가 넘긴 ratio 합이 100%를 넘으면 이후
             // 구간이 원을 한 바퀴 넘어 겹쳐 그려지는 대신 조용히 잘리도록(오류 대신 방어적 저하)
-            const ratio = Math.max(0, Math.min(s.ratio, 1 - acc));
+            // NaN(잘못된 날짜로 남은 날 수 등)은 0 으로 — 그대로 두면 누적값이 NaN 으로 번져 뒤 구간이 전부 사라졌다
+            const r = Number.isFinite(s.ratio) ? s.ratio : 0;
+            const ratio = Math.max(0, Math.min(r, 1 - acc));
             out.push({ color: s.color, rotate: -90 + acc * 360, dash: circumference * ratio, acc: acc + ratio });
             return out;
         }, []);
@@ -32,7 +43,7 @@ function RingChartCanvas({ done, total, segments, color = 'var(--color-main)', s
     const pct = (total ?? 0) > 0 ? Math.min((done ?? 0) / total, 1) : 0;
     const filled = circumference * pct;
     const gap = circumference - filled;
-    return (_jsxs("div", { className: "ring-chart", style: { width: dim, height: dim }, children: [_jsxs("svg", { width: dim, height: dim, viewBox: `0 0 ${dim} ${dim}`, "aria-hidden": "true", children: [_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "var(--color-whiteLine)", strokeWidth: stroke }), pct > 0 && (_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: color, strokeWidth: stroke, strokeDasharray: `${filled} ${gap}`, strokeLinecap: pct < 0.02 || pct > 0.98 ? 'butt' : 'round', transform: `rotate(-90 ${center} ${center})` }))] }), !hideCenter && (_jsxs("div", { className: `ring-chart__center${hideLabel ? '' : ` ${dim <= 96 ? 'ring-chart__center--small' : size === 'medium' ? 'ring-chart__center--medium' : 'ring-chart__center--large'}`}`, children: [_jsx("span", { className: `ring-chart__pct ${dim <= 96 ? 'h2' : 'h1'}`, children: Math.round(pct * 100) }), !hideLabel && (_jsx("span", { className: `ring-chart__label ${dim <= 96 ? 'caption-2' : 'caption-1'}${dim <= 96 || size === 'medium' ? ' ring-chart__label--tight' : ''}`, children: label }))] }))] }));
+    return (_jsxs("div", { className: "ring-chart", style: { width: dim, height: dim }, children: [_jsxs("svg", { width: dim, height: dim, viewBox: `0 0 ${dim} ${dim}`, "aria-hidden": "true", children: [_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "var(--color-whiteLine)", strokeWidth: stroke }), pct > 0 && (_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: color, strokeWidth: stroke, strokeDasharray: `${filled} ${gap}`, strokeLinecap: pct < 0.02 || pct > 0.98 ? 'butt' : 'round', transform: `rotate(-90 ${center} ${center})` }))] }), !hideCenter && (_jsxs("div", { className: `ring-chart__center${hideLabel ? '' : ` ${dim <= 96 ? 'ring-chart__center--small' : size === 'medium' ? 'ring-chart__center--medium' : 'ring-chart__center--large'}`}`, children: [_jsx("span", { className: `ring-chart__pct ${dim <= 96 ? 'h2' : 'h1'}`, children: 퍼센트(pct) }), !hideLabel && (_jsx("span", { className: `ring-chart__label ${dim <= 96 ? 'caption-2' : 'caption-1'}${dim <= 96 || size === 'medium' ? ' ring-chart__label--tight' : ''}`, children: label }))] }))] }));
 }
 /**
  * 도넛 링 차트 — 전체 대비 완료 비율을 원형 호로 표현.
@@ -44,7 +55,7 @@ export default function RingChart({ titleKey, headRight, icon, showTotal, totalL
     const { t } = useTranslation();
     if (!titleKey)
         return _jsx(RingChartCanvas, { ...ringProps });
-    const pct = (ringProps.total ?? 0) > 0 ? Math.round(Math.min((ringProps.done ?? 0) / ringProps.total, 1) * 100) : 0;
+    const pct = (ringProps.total ?? 0) > 0 ? 퍼센트(Math.min((ringProps.done ?? 0) / ringProps.total, 1)) : 0;
     // size='small' — 대시보드 작은 그리드용 블럭. 컨트롤(headRight)만 생략하고 total/legend는 medium과 동일하게 유지
     const isSmall = ringProps.size === 'small';
     // size='large' — 카드가 가로 폭을 거의 100% 차지(1열)

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

@@ -57,7 +57,10 @@ function SideNavButton(props) {
 export default function SideNav(props) {
     const { t } = useTranslation();
     const { items = [], activeKey, onChange, unreadCount, onDebug, onNotification, onAccount, onSetting, onHelp, appMode, onAppModeChange } = props || {};
-    const handleModeSwitch = useCallback(() => onAppModeChange?.(appMode === 'malgwi' ? 'manager' : 'malgwi'), [onAppModeChange, appMode]);
+    /* 모드를 안 주면 말귀로 본다 — Header(브랜드)·BottomNav 와 같게. 전에는 여기만 매니저로 봐 같은 화면에서
+       데스크톱은 '말귀로 이동', 모바일은 '말귀 매니저' 로 서로 반대를 가리켰다. */
+    const isManager = appMode === 'manager';
+    const handleModeSwitch = useCallback(() => onAppModeChange?.(isManager ? 'malgwi' : 'manager'), [onAppModeChange, isManager]);
     return (_jsxs("nav", { "aria-label": t('nav.mainMenu', '메인 메뉴'), className: "side-nav__menu", children: [_jsxs("div", { className: "side-nav__menu-list", children: [(items || [])
                         .filter((it) => !it.section && (it.key || it.label))
                         .map((it, idx) => (_jsxs(React.Fragment, { children: [it.divider && _jsx("div", { className: "side-nav__separator" }), _jsx(SideNavButton, { item: it, active: it.key === activeKey, state: it.disabled ? 'disabled' : undefined, onClick: (_key, btnEl, fromPointer) => {
@@ -113,7 +116,7 @@ export default function SideNav(props) {
                                     }
                                 } })] }, it.key ?? `side-nav__item-${idx}`))), onAppModeChange && _jsx("div", { className: "side-nav__separator side-nav__separator--short" }), onAppModeChange && (_jsx(SideNavButton, { item: {
                             key: '__mode-switch__',
-                            label: appMode === 'malgwi' ? t('nav.goToManager', '말귀매니저로 이동') : t('nav.goToMalgwi', '말귀로 이동'),
-                            icon: appMode === 'malgwi' ? 'arrow-right' : 'arrow-left',
+                            label: isManager ? t('nav.goToMalgwi', '말귀로 이동') : t('nav.goToManager', '말귀매니저로 이동'),
+                            icon: isManager ? 'arrow-left' : 'arrow-right',
                         }, onClick: handleModeSwitch }))] }), _jsx(SideNavFooter, { activeKey: activeKey, unreadCount: unreadCount, onDebug: onDebug, onNotification: onNotification, onAccount: onAccount, onSetting: onSetting, onHelp: onHelp })] }));
 }

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

@@ -33,8 +33,7 @@ export default function SplashLogo({ logo, alt, onDone, durationMs = 3000, }) {
     // 담는다. 타이머는 한 번만 걸고, 울릴 때 **그때의 최신 콜백**을 부른다.
     const onDoneRef = useLatestRef(onDone);
     useEffect(() => {
-        if (!onDoneRef.current)
-            return;
+        // onDone 이 없어도 타이머는 건다 — 처음에 없다가 나중에 들어오면(인증 확인 뒤 콜백을 넘기는 등) 전에는 끝내 안 걸려 스플래시가 남았다
         const timer = setTimeout(() => onDoneRef.current?.(), durationMs);
         return () => clearTimeout(timer);
     }, [durationMs, onDoneRef]);

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

@@ -30,7 +30,7 @@ export default function StatChart({ label, value, change, changeType, icon, tool
     }, [onClick]);
     return (_jsxs("div", { ref: cardRef, className: `manager-stat-card${onClick ? ' manager-stat-card--clickable' : ''}`, onClick: onClick, onKeyDown: onClick ? handleKeyDown : undefined, onPointerEnter: handleAnchorEnter, onPointerLeave: handleAnchorLeave, 
         // hover 전용이면 키보드로는 툴팁 내용을 볼 수 없다(ManagerPage와 동일 처리)
-        onFocus: handleAnchorEnter, onBlur: handleAnchorLeave, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? `${label} ${value}` : undefined, children: [tooltip && anchorRect && (_jsx(TooltipInfo, { anchorRect: {
+        onFocus: handleAnchorEnter, onBlur: handleAnchorLeave, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? [label, value, changeText].filter((v) => v !== undefined && v !== '').join(' ') : undefined, children: [tooltip && anchorRect && (_jsx(TooltipInfo, { anchorRect: {
                     left: anchorRect.left,
                     top: anchorRect.top + 21,
                     right: anchorRect.right,

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

@@ -77,17 +77,27 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
     const defaultColsRef = useRef([]);
     // fit 모드에서는 이웃(next)에서 같은 만큼 덜어 오므로 그 컬럼의 시작 폭도 들고 있어야 한다
     const dragRef = useRef(null);
-    const [colWidths, setColWidths] = useState(() => {
-        if (!storeKey || typeof window === 'undefined')
+    /* 저장한 폭 읽기 — 숫자이기만 하면 받던 것을 **유한하고 최소 폭 이상인 수**만 받는다(0·음수·NaN 이 들어오면 격자 틀이
+       무효가 됐다). */
+    const 저장폭읽기 = (key) => {
+        if (!key || typeof window === 'undefined')
             return null;
         try {
-            const arr = JSON.parse(window.localStorage.getItem(storeKey) ?? 'null');
-            return Array.isArray(arr) && arr.every((n) => typeof n === 'number') ? arr : null;
+            const arr = JSON.parse(window.localStorage.getItem(key) ?? 'null');
+            return Array.isArray(arr) && arr.length > 0 && arr.every((n) => typeof n === 'number' && Number.isFinite(n) && n > 0) ? arr : null;
         }
         catch {
             return null;
         }
-    });
+    };
+    const [colWidths, setColWidths] = useState(() => 저장폭읽기(storeKey));
+    /* 마운트된 채 resizeStorageKey 가 바뀌면 **새 열쇠의 폭**을 읽는다 — 마운트 때 한 번만 읽어, 열 수가 같으면 앞 열쇠의 폭이
+       다른 열에 그대로 씌워졌다. 렌더 중에 맞춘다(바뀐 그 렌더에서 옛 폭이 한 번이라도 그려지지 않게). */
+    const [읽은열쇠, set읽은열쇠] = useState(storeKey);
+    if (읽은열쇠 !== storeKey) {
+        set읽은열쇠(storeKey);
+        setColWidths(저장폭읽기(storeKey));
+    }
     // 최신 colWidths를 참조로 유지 (드래그 종료 시 저장용)
     const colWidthsRef = useRef(colWidths);
     useEffect(() => { colWidthsRef.current = colWidths; }, [colWidths]);

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

@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import Tooltip from './Tooltip';
 import './TrainingTooltip.css';
-import { TRAINING_TYPES } from '../../utils/CategoryData';
+import { translateTrainingTypes } from '../../utils/CategoryData';
 import { getTrainingPools } from '../../utils/getTrainingData';
 import TrainingBlockButton from '../Training/TrainingBlockButton';
 /** 타입 칩 호버 → TrainingTooltip 표시까지의 지연(ms). 말귀자료실 카드와
@@ -20,10 +20,11 @@ function findTrainingData(sel) {
 /** @public */
 export default function TrainingTooltip({ plan, anchorRect, offset = 12, onClose }) {
     const { t } = useTranslation();
-    const groups = useMemo(() => TRAINING_TYPES.map(t => ({
-        type: t,
-        items: (plan.items ?? []).filter(i => i.trainingType === t.key),
-    })).filter(g => g.items.length > 0), [plan.items]);
+    // 머리글은 지금 언어로 — 원본 목록의 한국어 라벨을 써 영어 화면에도 '짧은 이야기 듣기' 가 떴다
+    const groups = useMemo(() => translateTrainingTypes(t).map(type => ({
+        type,
+        items: (plan.items ?? []).filter(i => i.trainingType === type.key),
+    })).filter(g => g.items.length > 0), [plan.items, t]);
     if (groups.length === 0)
         return null;
     const box = (_jsx("div", { className: "tooltip-training__box", children: _jsx("div", { className: "tooltip-training__groups", children: groups.flatMap(({ type, items }, idx) => [

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

@@ -278,6 +278,63 @@
   justify-content: center;
 }
 
+/* ── row 변형 — 전체 너비 가로 행 ─────────────────────────────────────────────────
+   정사각형 카드는 폭이 줄면 내용이 눌린다. 좁은 화면 목록에서 한 줄에 한 장씩
+   [아이콘][유형/제목][문항수] 를 모두 보이게 grid 로 다시 놓는다. 미리 듣기 단추는 그리지 않는다. */
+.training-block-button--row {
+  width: 100%;
+  height: auto;
+  min-height: 68px;
+  display: flex;
+  align-items: center;
+}
+.training-block-button--row .training-block-button__left {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas:
+    "icon type  count"
+    "icon title count";
+  align-items: center;
+  align-content: center;
+  height: auto;
+  column-gap: var(--spacing-s);
+  row-gap: 4px;
+  padding: 8px 0;
+}
+.training-block-button--row .category-icon__wrap {
+  grid-area: icon;
+  align-self: center;
+}
+.training-block-button--row .training-block-button__type-label {
+  grid-area: type;
+  align-self: end;
+  position: static;
+  inset: auto;
+}
+.training-block-button--row .training-block-button__title {
+  grid-area: title;
+  align-self: start;
+  position: static;
+  inset: auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.training-block-button--row .training-block-button__description {
+  grid-area: count;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: static;
+  inset: auto;
+  height: auto;
+}
+/* 유형 줄이 없으면 제목이 두 줄 자리 가운데에 선다 */
+.training-block-button--row:not(.training-block-button--withType) .training-block-button__title {
+  grid-row: 1 / span 2;
+  align-self: center;
+}
+
 /* preview play button: small 카드 우측 상단 — 좌측 아이콘(top:12)과 수평 정렬 */
 .training-block-button--small .training-block-button__preview {
   position: absolute;

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

@@ -47,7 +47,9 @@ export default function TrainingBlockButton(props) {
         if (btnHover && !open && useDescriptionTooltip)
             setBtnAnchorRect(btnRef.current?.getBoundingClientRect() ?? null);
     }, [btnHover, open, useDescriptionTooltip]);
-    const handleKeyDown = useCallback((e) => { if (e.key === 'Enter' || e.key === ' ') {
+    /* 블록 자신에서 난 키만 — 안의 '더보기'·'미리 듣기' 단추에서 누른 Enter 를 가로채 훈련 팝업을 열었다(메뉴를 키보드로 못 엶) */
+    const handleKeyDown = useCallback((e) => { if (e.target !== e.currentTarget)
+        return; if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
         handleActivate();
     } }, [handleActivate]);
@@ -165,7 +167,9 @@ export default function TrainingBlockButton(props) {
         }
     }
     catch (_) { }
-    const isList = size === 'list';
+    const isRow = size === 'row';
+    // row 는 list 의 바탕 위에 배치만 바꾼다
+    const isList = size === 'list' || isRow;
     const isCompact = size === 'compact';
     const isSmall = size === 'small';
     const trainingTypeName = isSmall && type?.key
@@ -174,11 +178,11 @@ export default function TrainingBlockButton(props) {
     // 타입 라벨이 실제로 렌더되는지(타이틀과 같으면 숨김) — 레이아웃 여백 정리에 사용.
     const typeLabelRendered = (!!showTypeLabel && !!type?.label && type.label !== String(itemTitle)) ||
         (isSmall && !!trainingTypeName && trainingTypeName !== String(itemTitle));
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: btnRef, className: `training-block-button${isList ? ' training-block-button--list' : ''}${isCompact ? ' training-block-button--compact' : ''}${isSmall ? ' training-block-button--small' : ''}${isCompleted ? ' training-block-button--completed' : ''}${isSelected ? ' training-block-button--selected' : ''}${typeLabelRendered && !isSmall ? ' training-block-button--withType' : ''}${isSmall && !typeLabelRendered ? ' training-block-button--no-type-label' : ''}`, onClick: handleActivate, onPointerEnter: handleBtnHoverOn, onPointerLeave: handleBtnHoverClose, role: "button", tabIndex: 0, onKeyDown: handleKeyDown, "aria-label": typeof ariaLabel === 'string' ? ariaLabel : (typeof itemTitle === 'string' ? itemTitle : undefined), children: [_jsxs("div", { className: "training-block-button__left", children: [showTypeLabel && type?.label && type.label !== String(itemTitle) && (_jsx("span", { className: "training-block-button__type-label caption-1", children: type.label })), isSmall && trainingTypeName && trainingTypeName !== String(itemTitle) && (_jsx("span", { className: "training-block-button__type-label caption-2", children: trainingTypeName })), _jsx(CategoryIcon, { icon: iconForBtn, label: itemTitle, tooltip: popupIconTooltip, wrapperStyle: wrapperStyle, iconSize: (isSmall || isCompact) ? 'small' : 'medium' }), !hideCheckBadge && (isCompleted || isSelected) && !(onRemove && btnHover) && (_jsx(Badge, { type: "dot", icon: "check", position: "top-left", size: "medium", "aria-label": isCompleted ? t('training.completed', '훈련 완료') : t('training.selected', '선택됨') })), onRemove && btnHover && (_jsx(Badge, { type: "dot", icon: "remove", position: "top-left", size: "medium", "aria-label": t('common.remove', '제거'), onClick: handleRemoveClick })), _jsx("div", { className: `training-block-button__title ${isCompact ? 'body-3' : isSmall ? 'body-3b' : 'h3'}`, children: String(itemTitle) }), _jsxs("div", { className: "training-block-button__description", children: [(() => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: btnRef, className: `training-block-button${isList ? ' training-block-button--list' : ''}${isRow ? ' training-block-button--row' : ''}${isCompact ? ' training-block-button--compact' : ''}${isSmall ? ' training-block-button--small' : ''}${isCompleted ? ' training-block-button--completed' : ''}${isSelected ? ' training-block-button--selected' : ''}${typeLabelRendered && !isSmall ? ' training-block-button--withType' : ''}${isSmall && !typeLabelRendered ? ' training-block-button--no-type-label' : ''}`, onClick: handleActivate, onPointerEnter: handleBtnHoverOn, onPointerLeave: handleBtnHoverClose, role: "button", tabIndex: 0, onKeyDown: handleKeyDown, "aria-label": typeof ariaLabel === 'string' ? ariaLabel : (typeof itemTitle === 'string' ? itemTitle : undefined), children: [_jsxs("div", { className: "training-block-button__left", children: [showTypeLabel && type?.label && type.label !== String(itemTitle) && (_jsx("span", { className: "training-block-button__type-label caption-1", children: type.label })), isSmall && trainingTypeName && trainingTypeName !== String(itemTitle) && (_jsx("span", { className: "training-block-button__type-label caption-2", children: trainingTypeName })), _jsx(CategoryIcon, { icon: iconForBtn, label: itemTitle, tooltip: popupIconTooltip, wrapperStyle: wrapperStyle, iconSize: (isSmall || isCompact) ? 'small' : 'medium' }), !hideCheckBadge && (isCompleted || isSelected) && !(onRemove && btnHover) && (_jsx(Badge, { type: "dot", icon: "check", position: "top-left", size: "medium", "aria-label": isCompleted ? t('training.completed', '훈련 완료') : t('training.selected', '선택됨') })), onRemove && btnHover && (_jsx(Badge, { type: "dot", icon: "remove", position: "top-left", size: "medium", "aria-label": t('common.remove', '제거'), onClick: handleRemoveClick })), _jsx("div", { className: `training-block-button__title ${isCompact ? 'body-3' : isSmall ? 'body-3b' : 'h3'}`, children: String(itemTitle) }), _jsxs("div", { className: "training-block-button__description", children: [(() => {
                                         const countText = countLabelOverride !== undefined ? countLabelOverride : countLabel;
                                         // 정해진 문항수가 없으면(빈 값) 카운트 요소 자체를 그리지 않는다.
                                         return countText ? (_jsx("div", { className: `training-block-button__count ${isSmall ? 'caption-2' : 'caption-1'}`, children: countText })) : null;
-                                    })(), _jsx("div", { className: "training-block-button__chevron", children: _jsx(Icon, { icon: "chevron-right", label: t('training.next', '다음'), className: "training-block-button__chevron-icon", imgClassName: "training-block-button__chevron-icon-image", maskClassName: "training-block-button__chevron-icon-mask", svgClassName: "training-block-button__chevron-icon-svg", size: isSmall ? 12 : 20 }) })] }), (isList || isSmall) && previewUrls.length > 0 && (_jsx("div", { ref: previewBtnRef, className: "training-block-button__preview", "data-tooltip-ignore": true, onClick: handlePreviewAreaClick, onPointerEnter: handlePreviewHoverOn, onPointerLeave: handlePreviewHoverClose, children: _jsx(Button, { htmlType: "button", size: isSmall ? 28 : 32, type: "dot", icon: playing ? 'pause' : 'play', variant: isSmall ? 'transparent-lightGray' : 'default', useBorder: false, selected: playing, ariaLabel: playing ? t('training.stop', '정지') : t('training.preview', '미리 듣기'), onClick: handlePreview }) }))] }), onMore && (_jsx("div", { className: "training-block-button__more", "data-tooltip-ignore": true, onClick: e => { e.stopPropagation(); onMore(e); }, children: _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "more-horizontal", variant: "transparent-lightGray", useBorder: false, ariaLabel: t('common.more', '더보기') }) }))] }), previewHover && (_jsx(InfoTooltip, { anchorRect: previewAnchorRect, text: playing ? t('training.stop', '정지') : t('training.preview', '미리 듣기'), offset: 8, onClose: handlePreviewHoverClose })), btnHover && !open && useDescriptionTooltip && (tooltipItems ? (_jsx(DescriptionTooltip, { anchorRect: btnAnchorRect, items: tooltipItems, activeIndex: playingIndex, onClose: handleBtnHoverClose })) : topic?.subTitle ? (_jsx(InfoTooltip, { anchorRect: btnAnchorRect, text: topic.subTitle, offset: 8, onClose: handleBtnHoverClose })) : null), open && renderPopup && renderPopup({
+                                    })(), _jsx("div", { className: "training-block-button__chevron", children: _jsx(Icon, { icon: "chevron-right", label: t('training.next', '다음'), className: "training-block-button__chevron-icon", imgClassName: "training-block-button__chevron-icon-image", maskClassName: "training-block-button__chevron-icon-mask", svgClassName: "training-block-button__chevron-icon-svg", size: isSmall ? 12 : 20 }) })] }), ((isList && !isRow) || isSmall) && previewUrls.length > 0 && (_jsx("div", { ref: previewBtnRef, className: "training-block-button__preview", "data-tooltip-ignore": true, onClick: handlePreviewAreaClick, onPointerEnter: handlePreviewHoverOn, onPointerLeave: handlePreviewHoverClose, children: _jsx(Button, { htmlType: "button", size: isSmall ? 28 : 32, type: "dot", icon: playing ? 'pause' : 'play', variant: isSmall ? 'transparent-lightGray' : 'default', useBorder: false, selected: playing, ariaLabel: playing ? t('training.stop', '정지') : t('training.preview', '미리 듣기'), onClick: handlePreview }) }))] }), onMore && (_jsx("div", { className: "training-block-button__more", "data-tooltip-ignore": true, onClick: e => { e.stopPropagation(); onMore(e); }, children: _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "more-horizontal", variant: "transparent-lightGray", useBorder: false, ariaLabel: t('common.more', '더보기') }) }))] }), previewHover && (_jsx(InfoTooltip, { anchorRect: previewAnchorRect, text: playing ? t('training.stop', '정지') : t('training.preview', '미리 듣기'), offset: 8, onClose: handlePreviewHoverClose })), btnHover && !open && useDescriptionTooltip && (tooltipItems ? (_jsx(DescriptionTooltip, { anchorRect: btnAnchorRect, items: tooltipItems, activeIndex: playingIndex, onClose: handleBtnHoverClose })) : topic?.subTitle ? (_jsx(InfoTooltip, { anchorRect: btnAnchorRect, text: topic.subTitle, offset: 8, onClose: handleBtnHoverClose })) : null), open && renderPopup && renderPopup({
                 trainingData: topic,
                 typeKey: type?.key ?? '',
                 onClose: handleClose,

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

@@ -203,6 +203,9 @@ function TrainingPagePopupInner(props) {
         setMainVolume,
     }), [noiseSettings, mergeAndSaveSettings, registerAnalyser, mainAnalyser, noiseAnalyser, playbackRate, setPlaybackRate, mainVolume, setMainVolume]);
     const panelRef = useRef(null);
+    /* '다시하기' 횟수 — 단계들의 key 에 넣어 **처음부터 다시 그린다.** 단계 컴포넌트는 내용(문장·보기)이 바뀔 때만 제 상태를
+       비워, 같은 문항을 다시 풀면 옛 선택 강조·옛 배치(순서화는 정답 배치일 수도)가 그대로 남았다. */
+    const [replayCount, setReplayCount] = useState(0);
     const [mode, setMode] = useState('center');
     const [closing, setClosing] = useState(false);
     // 닫힘 애니메이션(PAGE_POPUP_CLOSE_MS) 동안 다른 닫기 경로(ESC/닫기 버튼/완료)가 또 실행되면
@@ -728,16 +731,38 @@ function TrainingPagePopupInner(props) {
                 return null;
         }
     };
+    /* 다음 문제로 넘어가면 포커스를 새 문제의 첫 칸으로. '다음 문제' 는 누르는 즉시 비활성이 되어 포커스가 body 로 빠졌다 —
+       키보드 사용자는 매 문제 판 처음부터 Tab 을 다시 밟았다. 포커스가 판 안 다른 곳에 있으면 건드리지 않는다. */
+    const 앞쪽Ref = useRef(undefined);
+    useEffect(() => {
+        const 앞 = 앞쪽Ref.current;
+        앞쪽Ref.current = effectivePageIndex;
+        if (앞 === undefined || 앞 === effectivePageIndex)
+            return;
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const active = document.activeElement;
+        const 잃음 = !active || active === document.body || !panel.contains(active) || active.disabled === true;
+        if (!잃음)
+            return;
+        const 첫칸 = panel.querySelector(`.training-steps ${FOCUSABLE_SELECTOR.split(', ').join(', .training-steps ')}`)
+            ?? Array.from(panel.querySelectorAll(FOCUSABLE_SELECTOR)).find((el) => !el.closest('[aria-hidden="true"]'));
+        try {
+            첫칸?.focus();
+        }
+        catch (e) { }
+    }, [effectivePageIndex]);
     const scenarioContent = hasScenario
         ? scenarioPages.length > 0
-            ? _jsx("div", { className: "training-steps", children: currentScenarioSteps.map((step, index) => renderScenarioStep(step, index)) })
+            ? _jsx("div", { className: "training-steps", children: currentScenarioSteps.map((step, index) => renderScenarioStep(step, index)) }, `replay-${replayCount}`)
             : (_jsx("div", { className: "page-popup__content page-popup__content--center", children: _jsx("div", { className: "pp-empty", children: scenario?.emptyMessage || t('training.noQuestions', '문제가 없습니다.') }) }))
         : null;
     const childrenContent = isChildrenMode
         ? (_jsxs(TrainingPagePopupContext.Provider, { value: childrenContextValue, children: [currentChildrenPage?.pageTop ? (_jsx("div", { className: "training-page-top", children: currentChildrenPage.pageTop })) : null, _jsx("div", { className: "training-steps", children: compoundChildrenSteps.map((child, index) => {
                         const el = child;
                         return cloneElement(el, { ...el.props, _stepIndex: index, _totalSteps: compoundChildrenSteps.length, _stepKey: `step-${index}`, _pageIndex: effectivePageIndex });
-                    }) }), currentChildrenPage?.pageBottom ? (_jsx("div", { className: "training-page-bottom", children: currentChildrenPage.pageBottom })) : null] }))
+                    }) }, `replay-${replayCount}`), currentChildrenPage?.pageBottom ? (_jsx("div", { className: "training-page-bottom", children: currentChildrenPage.pageBottom })) : null] }))
         : null;
     const handleResultDone = useCallback(() => {
         // 완료 정본 기록 (문장/단어/오늘의 듣기 공통) — 결과를 닫기 전에 캡처
@@ -796,6 +821,7 @@ function TrainingPagePopupInner(props) {
                 contextsLength: resultOverlay.results ? resultOverlay.results.length : (resultOverlay.answers ? resultOverlay.answers.length : 0),
                 onReplay: () => {
                     setResultOverlay(null);
+                    setReplayCount((n) => n + 1);
                     if (hasScenario) {
                         setFlowState(createScenarioFlowState());
                         if (typeof scenario?.onReplay === 'function') {

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

@@ -24,7 +24,8 @@ export default function TrainingPagePopupTitle({ title, subtitle, desc, depth, i
     const subtitleText = typeof subtitle === 'string' ? subtitle.trim() : subtitle;
     const hasName = !!(titleText || subtitleText);
     const resolvedTitle = hasName ? (titleText || subtitleText) : t('common.emptyTrainingName', '훈련 이름이 비어 있습니다.');
-    const rawDepth = depthText || subtitle;
+    // subtitle 을 이미 제목으로 썼으면(title 이 빔) depth 폴백에 다시 쓰지 않는다 — 같은 글이 두 줄로 찍혔다
+    const rawDepth = depthText || (titleText ? subtitle : undefined);
     // 모바일: " · " 또는 " / " 구분자가 있으면 마지막 세그먼트만 사용
     const resolvedDepth = (isMobile && typeof rawDepth === 'string' && (rawDepth.includes(' · ') || rawDepth.includes(' / ')))
         ? rawDepth.split(/\s[·/]\s/).pop()

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

@@ -41,7 +41,8 @@ export default function TrainingStepCard({ index, stepIndex, isLast = false, tit
     /* eslint-disable react-hooks/set-state-in-effect */
     useEffect(() => {
         setSelectedIndex(null);
-        cardRefs.current = [];
+        /* 카드 ref 는 비우지 않는다 — 마운트 때도 도는 이 effect 가 막 붙은 ref 를 지워, 따로 쓴 단계에서는 다시 그려질
+           일이 없어 '모두 듣기' 가 소리 하나 없이 끝났다. 빠진 카드는 ref 콜백이 null 을 넣고, 재생은 보이는 칸까지만 돈다. */
     }, [itemsKey]);
     /* eslint-enable react-hooks/set-state-in-effect */
     const handlePlayDone = useCallback((item, i) => {
@@ -66,7 +67,7 @@ export default function TrainingStepCard({ index, stepIndex, isLast = false, tit
             return;
         setPlayingAll(true);
         try {
-            for (const cardRef of cardRefs.current) {
+            for (const cardRef of cardRefs.current.slice(0, shown.length)) {
                 if (!cardRef)
                     continue;
                 await withTimeout(cardRef.play(), PLAY_ALL_CARD_TIMEOUT_MS);
@@ -75,7 +76,7 @@ export default function TrainingStepCard({ index, stepIndex, isLast = false, tit
         finally {
             setPlayingAll(false);
         }
-    }, [playingAll, currentState]);
+    }, [playingAll, currentState, shown.length]);
     const handleSelect = useCallback((item, i) => {
         /* 끝낸 단계(done)에서는 고를 수 없다 — 단추는 `!== 'disabled'` 로 열려 있었는데
            기록은 `=== 'active'` 일 때만 나가서, **화면 선택은 바뀌는데 점수는 그대로**였다.

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

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