@ihabdevteam/core 0.135.0 → 0.136.0

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

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

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

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

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

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

@@ -93,13 +93,19 @@ export default function WordTablePopup({ items, words, title, subtitle, emptyTex
     const customFooter = useMemo(() => (renderFooter ? renderFooter({ print: handlePrint, openNewWindow }) : undefined), [renderFooter, handlePrint, openNewWindow]);
     // 메뉴 '인쇄하기' 진입: 팝업이 열리고 표가 렌더된 직후 인쇄를 1회 자동 시작.
     // 짧은 지연은 WordTable 레이아웃 확정용 — 인쇄 iframe 쪽이 이미지 로드는 별도로 기다린다(wordTablePrint).
+    /* '했다' 는 **타이머가 실제로 울렸을 때** 적는다 — 걸 때 적으면 StrictMode 의 두 번 실행이나 100ms 안에 인쇄 설정이
+       바뀌어(handlePrint 가 새로 만들어져) 앞 타이머가 걷힌 뒤 다시 걸지 못해, 인쇄가 한 번도 안 떴다. 부르는 것은 최신 print. */
     const autoPrintDone = useRef(false);
+    const printRef = useRef(handlePrint);
+    useEffect(() => { printRef.current = handlePrint; }, [handlePrint]);
     useEffect(() => {
         if (!autoPrint || autoPrintDone.current)
             return;
-        autoPrintDone.current = true;
-        const id = window.setTimeout(() => handlePrint(), 100);
+        const id = window.setTimeout(() => {
+            autoPrintDone.current = true;
+            printRef.current();
+        }, 100);
         return () => window.clearTimeout(id);
-    }, [autoPrint, handlePrint]);
+    }, [autoPrint]);
     return (_jsxs(Popup, { title: title ?? t('keyWords.title', '주요 단어'), subtitle: subtitle, size: "large", className: cx('word-table-popup', className), buttons: footerButtons, footer: customFooter, footerClassName: footerClassName, beforeClose: beforeClose, onClose: onClose, children: [tableItems.length > 0 ? (_jsxs("div", { className: "word-table-popup__body", children: [showSettings && (_jsx(TableFilterPanel, { sections: filterSections, selected: filterSelected, onSelect: handleSelect })), isPaginated ? (_jsx("div", { className: "word-table-popup__pages", children: pages.map((page, i) => (_jsx(WordTable, { items: page, orientation: settings.orientation, contentTypes: settings.contentTypes, cutLine: settings.cutLine, showOutline: settings.showOutline, showDivLine: settings.showDivLine, count: settings.count, contentRef: el => { pageRefs.current[i] = el; }, pageNumber: { current: i + 1, total: pages.length }, pageNumberPosition: pageNumberPosition, scoring: scoring, scoreIndexOffset: pageStart[i], marks: 표에줄채점, onMarkClick: handleMarkClick }, i))) })) : (_jsx("div", { className: "word-table-popup__table", children: _jsx(WordTable, { items: tableItems, orientation: settings.orientation, contentTypes: settings.contentTypes, cutLine: settings.cutLine, showOutline: settings.showOutline, showDivLine: settings.showDivLine, count: settings.count, contentRef: contentRef, fitHeight: true, scoring: scoring, marks: 표에줄채점, onMarkClick: handleMarkClick }) }))] })) : (_jsx("p", { className: "word-table-popup__empty body-3", children: emptyText ?? t('keyWords.empty', '추출된 주요 단어가 없습니다.') })), _jsx(Toast, { message: toastMsg, position: "top", onClose: handleToastClose }, toastKey)] }));
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -17,6 +17,8 @@ function escapeHtml(s) {
 export function sanitizeFileName(name) {
     return name.replace(/[\\/:*?"<>|]/g, '_').trim();
 }
+/** 아직 되돌리지 못한 탭 제목 되돌리기(인쇄가 끝나기 전 다음 인쇄가 올 때) */
+let 제목되돌리기 = null;
 /**
  * 캡처한 콘텐츠 엘리먼트들을 화면 밖 숨김 iframe에서 인쇄한다. 전역 @media print(모든
  * .word-table 노출)나 팝업 차단의 간섭 없이 넘긴 엘리먼트만 격리 인쇄한다. WordTableBlock의
@@ -28,10 +30,21 @@ export function printWordTableElements(elements, paperW, paperH, fileName = '',
         return;
     const safeFileName = fileName ? sanitizeFileName(fileName) : '';
     // "PDF로 저장" 기본 파일명은 iframe이 아니라 최상위 탭(document)의 title에서 온다.
+    /* 탭 제목은 **어느 쪽 afterprint 가 와도** 되돌린다 — 브라우저에 따라 iframe 인쇄의 print 이벤트가 그 프레임에만 가서,
+       최상위에만 걸면 제목이 표 이름으로 남았고, 다음 인쇄가 그 표 이름을 '원래 제목' 으로 잡아 영영 안 돌아왔다.
+       되돌리지 못한 앞 인쇄가 있으면 먼저 되돌린 뒤 원래 제목을 잡는다. */
+    제목되돌리기?.();
+    let restore = null;
     if (safeFileName) {
         const prevTitle = document.title;
         document.title = safeFileName;
-        const restore = () => { document.title = prevTitle; window.removeEventListener('afterprint', restore); };
+        restore = () => {
+            document.title = prevTitle;
+            window.removeEventListener('afterprint', restore);
+            if (제목되돌리기 === restore)
+                제목되돌리기 = null;
+        };
+        제목되돌리기 = restore;
         window.addEventListener('afterprint', restore);
     }
     const iframe = document.createElement('iframe');
@@ -45,7 +58,7 @@ export function printWordTableElements(elements, paperW, paperH, fileName = '',
     doc.open();
     doc.write(captureHtml(elements, paperW, paperH, true, safeFileName, header));
     doc.close();
-    iframe.contentWindow?.addEventListener('afterprint', () => setTimeout(() => iframe.remove(), 0));
+    iframe.contentWindow?.addEventListener('afterprint', () => { restore?.(); setTimeout(() => iframe.remove(), 0); });
 }
 // 인쇄 시 PDF로 저장할 때 OS가 제안하는 기본 파일명은 문서 <title>에서 온다.
 export function captureHtml(els, paperW, paperH, autoPrint = false, fileName = '', header = '') {

package/dist/packages/core/src/components/buttonTypes.d.ts

@@ -87,6 +87,12 @@ export interface ButtonProps {
         title?: string;
         items: string[];
     } | null;
+    /**
+     * 누르는 단추가 아니라 **툴팁을 보여 주는 칩** 이다 — 커서를 손가락이 아닌 기본 화살표로 둔다.
+     * 모양(바탕·hover)과 포커스·툴팁은 그대로다. `onClick` 없이 `showTooltipInfo`·`tooltipDescription` 만 다는
+     * 자리(점수 칩 등)에 쓴다. 막힌 단추(`disabled`)와는 다르다 — 흐려지지 않는다.
+     */
+    tooltipOnly?: boolean;
     iconSize?: 'small' | 'medium' | 'large';
     iconColor?: string;
     /**

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

@@ -29,22 +29,20 @@ export function useCalendarMonth(value) {
         setViewM(next.m);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
-    const prevMonth = useCallback(() => {
-        if (viewM === 0) {
-            setViewY(y => y - 1);
-            setViewM(11);
-        }
-        else
-            setViewM(m => m - 1);
-    }, [viewM]);
-    const nextMonth = useCallback(() => {
-        if (viewM === 11) {
-            setViewY(y => y + 1);
-            setViewM(0);
-        }
-        else
-            setViewM(m => m + 1);
-    }, [viewM]);
-    const setViewYM = useCallback((y, m) => { setViewY(y); setViewM(m); }, []);
+    /* 달 넘김은 **지금 가리키는 연·월 하나** 에서 센다 — 갈래는 렌더 때의 viewM 으로, 갱신은 함수형으로 나눠 하던 때는
+       한 핸들러에서 두 번 부르면(2월에서 prevMonth 두 번) (2026, -1) 이 됐다. 부른 즉시 ref 도 옮겨 둔다. */
+    const ymRef = useRef({ y: viewY, m: viewM });
+    useEffect(() => { ymRef.current = { y: viewY, m: viewM }; }, [viewY, viewM]);
+    const moveMonth = useCallback((d) => {
+        const total = ymRef.current.y * 12 + ymRef.current.m + d;
+        const y = Math.floor(total / 12);
+        const m = total - y * 12;
+        ymRef.current = { y, m };
+        setViewY(y);
+        setViewM(m);
+    }, []);
+    const prevMonth = useCallback(() => moveMonth(-1), [moveMonth]);
+    const nextMonth = useCallback(() => moveMonth(1), [moveMonth]);
+    const setViewYM = useCallback((y, m) => { ymRef.current = { y, m }; setViewY(y); setViewM(m); }, []);
     return { viewY, viewM, prevMonth, nextMonth, setViewYM };
 }

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

@@ -83,8 +83,13 @@ export function useToastLifecycle({ message, position, duration, onClose }) {
             // 이미 보이는 중 → 텍스트만 업데이트, 애니메이션 재실행 없음
             if (showingRef.current) {
                 if (DURATION_MS > 0 && !hideTimerRef.current) {
-                    멈춤Ref.current = false;
-                    사라짐걸기.current(DURATION_MS);
+                    /* 멈춘 채(마우스·포커스가 올라가 있는 채) 문구가 바뀌면 시계를 새로 걸지 않는다 — 전에는 멈춤을 풀고 걸어
+                       읽고 있는 알림이 손 밑에서 사라졌고, 떠날 때의 resume 은 멈춤이 이미 풀려 아무것도 안 했다.
+                       새 문구의 시간은 **처음부터** 남겨 두고 resume 이 그만큼 돌린다. */
+                    if (멈춤Ref.current)
+                        남은Ref.current = DURATION_MS;
+                    else
+                        사라짐걸기.current(DURATION_MS);
                 }
                 lastMessageRef.current = message;
                 /* 여기서 건 사라짐 타이머도 떠날 때 걷는다 — 빈 정리 함수라 문구를 바꾼 뒤 언마운트하면 타이머가 살아

package/dist/packages/core/src/context/I18nProvider.js

@@ -3,13 +3,22 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import i18n, { SUPPORTED_LOCALES, DEFAULT_LOCALE } from '../i18n';
 import { I18nContext } from './I18nContext';
+function 지원코드(locale) {
+    const 있나 = (c) => SUPPORTED_LOCALES.some(l => l.code === c);
+    if (있나(locale))
+        return locale;
+    const 기본 = locale.split(/[-_]/)[0]?.toLowerCase() ?? '';
+    return 있나(기본) ? 기본 : DEFAULT_LOCALE;
+}
 /** @public */
 export function I18nProvider({ locale = DEFAULT_LOCALE, children }) {
+    /* 지역이 붙은 코드('en-US'·'ko_KR')는 기본 언어로 읽는다 — 전에는 목록에 없다고 기본(ko)으로 떨어져 영어를 달라 했는데
+       한국어가 나오고, context 의 locale 은 'en-US' 로 남아 둘이 갈렸다. context 에도 실제로 건 코드를 넣는다. */
+    const code = 지원코드(locale);
     useEffect(() => {
-        const code = SUPPORTED_LOCALES.find(l => l.code === locale) ? locale : DEFAULT_LOCALE;
         if (i18n.language !== code) {
             i18n.changeLanguage(code);
         }
-    }, [locale]);
-    return (_jsx(I18nContext.Provider, { value: { locale, supportedLocales: SUPPORTED_LOCALES }, children: children }));
+    }, [code]);
+    return (_jsx(I18nContext.Provider, { value: { locale: code, supportedLocales: SUPPORTED_LOCALES }, children: children }));
 }

package/dist/packages/core/src/hooks/useSoundCompassExam.js

@@ -25,6 +25,8 @@ export function useSoundCompassExam(speakers, { mode = 'playback', autoStart = f
     const after = (ms, fn) => { timers.current.push(setTimeout(fn, ms)); };
     useEffect(() => () => clearTimers(), []);
     const answerId = queue[index]?.id ?? null;
+    /** 이미 고른 문항 번호 — 새 문항이 대기에 들어가면 풀린다(playQuestion) */
+    const 고름잠금 = useRef(null);
     // ── playback: 모든 스피커를 순서대로 ──────────────────────────────────
     const runPlayback = useCallback(() => {
         clearTimers();
@@ -47,6 +49,7 @@ export function useSoundCompassExam(speakers, { mode = 'playback', autoStart = f
             onDoneRef.current?.({ score: scoreRef.current, total: q.length });
             return;
         }
+        고름잠금.current = null;
         setIndex(i);
         setSelectedId(null);
         setPhase('playing');
@@ -82,17 +85,25 @@ export function useSoundCompassExam(speakers, { mode = 'playback', autoStart = f
     }, [setScoreTracked]);
     // autoStart / 입력 변경 시 재시작 — start/reset이 여러 상태를 동기 초기화하지만 의도된 동작이다
     /* eslint-disable react-hooks/set-state-in-effect */
+    /* 배치가 바뀌었는지는 **스피커 id 들**로 본다 — 개수만 보면 수가 같은 다른 배치(HORIZON_7 ↔ PRESET_27 가로)로 바꿔도
+       초기화되지 않아 옛 문제 줄이 남고 정답 id 가 새 배치에 없어 무엇을 골라도 오답이었다. */
+    const 배치열쇠 = speakers.map((sp) => sp.id).join('|');
     useEffect(() => {
         if (autoStart)
             start();
         else
             reset();
+        // 배치·모드가 바뀌거나 떠날 때 앞 판의 예약을 걷는다
+        return () => clearTimers();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [mode, speakers.length, autoStart]);
+    }, [mode, 배치열쇠, autoStart]);
     /* eslint-enable react-hooks/set-state-in-effect */
     const onSelectSpeaker = useCallback((id) => {
-        if (phase !== 'waiting' || mode === 'playback')
+        /* 같은 대기에서 **한 번만** 받는다 — 다시 그려지기 전에 같은 핸들러가 두 번 불리면(렌더 시점의 phase 만 보면) 점수가 +2,
+           다음 문제가 두 번 예약됐다. 고르는 순간 ref 로 닫는다. */
+        if (phase !== 'waiting' || mode === 'playback' || 고름잠금.current === index)
             return;
+        고름잠금.current = index;
         setSelectedId(id);
         const correct = id === queue[index]?.id;
         if (correct)

package/dist/packages/core/src/i18n/locales/en.json

@@ -376,6 +376,7 @@
         "listenButton": "Listen",
         "playSound": "Play Sound",
         "playAll": "Play All",
+        "selectInOrder": "Select the cards in the order you heard.",
         "stop": "Stop",
         "preview": "Preview",
         "next": "Next",

package/dist/packages/core/src/i18n/locales/ko.json

@@ -374,6 +374,7 @@
         "listenButton": "문장 듣기",
         "playSound": "소리 듣기",
         "playAll": "모두 듣기",
+        "selectInOrder": "들은 순서대로 카드를 선택하세요.",
         "stop": "정지",
         "preview": "미리 듣기",
         "next": "다음",

package/dist/packages/core/src/utils/date.js

@@ -16,12 +16,24 @@
  * 영어로 보더라도 가리키는 날은 같아야 한다.
  */
 const KST = 'Asia/Seoul';
+/* 못 읽는 값(빈 문자열·깨진 날짜)이면 null — 아래 형식 함수들이 화면에 "Invalid Date" 를 그대로 내던 것을 빈 글자로 막는다
+   (같은 파일의 toKstYmd·formatYmd 는 이미 막고 있었다) */
+const 읽은날 = (iso) => {
+    const d = new Date(iso);
+    return Number.isNaN(d.getTime()) ? null : d;
+};
 export function formatDateKo(iso) {
-    return new Date(iso).toLocaleDateString('ko-KR', { timeZone: KST, year: 'numeric', month: 'short', day: 'numeric' });
+    const d = 읽은날(iso);
+    if (!d)
+        return '';
+    return d.toLocaleDateString('ko-KR', { timeZone: KST, year: 'numeric', month: 'short', day: 'numeric' });
 }
 /** "2024년 1월 15일 오후 03:30" (long month + time) */
 export function formatDateLongKo(iso) {
-    return new Date(iso).toLocaleString('ko-KR', {
+    const d = 읽은날(iso);
+    if (!d)
+        return '';
+    return d.toLocaleString('ko-KR', {
         timeZone: KST,
         year: 'numeric', month: 'long', day: 'numeric',
         hour: '2-digit', minute: '2-digit',
@@ -35,12 +47,18 @@ export function formatDateLongKo(iso) {
  */
 export function formatDateLocale(iso, lang) {
     const locale = lang.startsWith('ko') ? 'ko-KR' : 'en-US';
-    return new Date(iso).toLocaleDateString(locale, { timeZone: KST, year: 'numeric', month: 'short', day: 'numeric' });
+    const d = 읽은날(iso);
+    if (!d)
+        return '';
+    return d.toLocaleDateString(locale, { timeZone: KST, year: 'numeric', month: 'short', day: 'numeric' });
 }
 /** formatDateLongKo의 로케일 인식 버전 — en: "January 15, 2024, 03:30 PM" */
 export function formatDateLongLocale(iso, lang) {
     const locale = lang.startsWith('ko') ? 'ko-KR' : 'en-US';
-    return new Date(iso).toLocaleString(locale, {
+    const d = 읽은날(iso);
+    if (!d)
+        return '';
+    return d.toLocaleString(locale, {
         timeZone: KST,
         year: 'numeric', month: 'long', day: 'numeric',
         hour: '2-digit', minute: '2-digit',
@@ -48,7 +66,10 @@ export function formatDateLongLocale(iso, lang) {
 }
 /** "2024. 01. 15. 오후 03:30" (2-digit month + time) */
 export function formatDatetimeKo(iso) {
-    return new Date(iso).toLocaleString('ko-KR', {
+    const d = 읽은날(iso);
+    if (!d)
+        return '';
+    return d.toLocaleString('ko-KR', {
         timeZone: KST,
         year: 'numeric', month: '2-digit', day: '2-digit',
         hour: '2-digit', minute: '2-digit',

package/dist/packages/core/src/utils/speak.js

@@ -1,3 +1,12 @@
+/* 목소리 목록을 기다리는 말 — 하나만 둔다. 전에는 기다리는 리스너가 부를 때마다 줄을 서고 stopSpeaking 이 치우지 못해,
+   `speak('하나'); speak('둘'); stopSpeaking()` 뒤 목소리가 뜨는 순간 멈췄던 말이 모두 나왔다. */
+let 기다림 = null;
+/** voiceschanged 가 끝내 안 오는 환경(목소리 없음)에서도 말은 건다 — 안 그러면 onEnd 가 영영 안 불렸다 */
+const 목소리기다림MS = 1500;
+function 기다림치우기() {
+    기다림?.치우기();
+    기다림 = null;
+}
 /** @public */
 export function speak(text, { onEnd, rate = 0.9 } = {}) {
     if (typeof window === 'undefined' || typeof SpeechSynthesisUtterance === 'undefined' || !('speechSynthesis' in window)) {
@@ -5,7 +14,9 @@ export function speak(text, { onEnd, rate = 0.9 } = {}) {
         return;
     }
     const synth = window.speechSynthesis;
+    기다림치우기();
     const doSpeak = () => {
+        기다림치우기();
         synth.cancel();
         const u = new SpeechSynthesisUtterance(text);
         const voices = synth.getVoices();
@@ -23,13 +34,22 @@ export function speak(text, { onEnd, rate = 0.9 } = {}) {
             : null;
         synth.speak(u);
     };
-    if (synth.getVoices().length > 0)
+    if (synth.getVoices().length > 0) {
         doSpeak();
-    else
-        synth.addEventListener('voiceschanged', doSpeak, { once: true });
+        return;
+    }
+    const 시계 = setTimeout(doSpeak, 목소리기다림MS);
+    synth.addEventListener('voiceschanged', doSpeak, { once: true });
+    기다림 = {
+        치우기: () => {
+            clearTimeout(시계);
+            synth.removeEventListener('voiceschanged', doSpeak);
+        },
+    };
 }
 /** @public */
 export function stopSpeaking() {
+    기다림치우기();
     if (typeof window !== 'undefined' && 'speechSynthesis' in window)
         window.speechSynthesis.cancel();
 }