@ihabdevteam/core 0.136.0 → 0.138.0

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

@@ -9,7 +9,7 @@ import useMediaQuery from '../../hooks/useMediaQuery';
 import { getImageResolver } from '../../utils/imageConfig';
 import { useWordImage } from '../../hooks/useWordImage';
 import { getTTSUrlResolver, getTTSFallbackUrlResolver } from '../../utils/ttsConfig';
-import { claimSound } from './currentSound';
+import { claimSound, stopSoundIfOwner } from './currentSound';
 import SymbolSvg from '../../logo/Symbol_speechear_black.svg';
 import { resolveAssetUrl } from '../../utils/assets';
 import './TrainingWordCard.css';
@@ -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 });
     }
     // ── 재생 상태 ──
@@ -80,8 +81,17 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
         return () => { cancelled = true; };
     }, [rawAudioSrc, label, audioFor]);
     // ── 언마운트 시 오디오 정리 ──
+    /* 떠날 때 **이 카드가 쥔 소리** 도 끊는다 — audio 만 멈춰, 음원 없는 낱말(speechSynthesis)을 듣는 중에 떠나면 말이
+       계속 나왔다. 남이 이미 가져간 소리는 건드리지 않는다(stopSoundIfOwner). 떠난 뒤에는 기다리던 합성 주소가 와도 울리지 않는다. */
+    const mountedRef = useRef(true);
+    const 쥔소리Ref = useRef(null);
     useEffect(() => {
+        mountedRef.current = true;
         return () => {
+            mountedRef.current = false;
+            if (쥔소리Ref.current)
+                stopSoundIfOwner(쥔소리Ref.current);
+            쥔소리Ref.current = null;
             try {
                 audioRef.current?.pause();
             }
@@ -143,7 +153,7 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
     // 재생 우선순위: ① 정식 음원 URL → ② 앱이 등록한 런타임 합성 폴백(예: Gemini-TTS) →
     // ③ 브라우저 speechSynthesis. ②가 있으면 아직 음원이 없는 단어도 표준발음으로 들린다.
     const playAudio = useCallback(async () => {
-        if (disabled)
+        if (disabled || !mountedRef.current)
             return;
         /* 이전 재생을 확실히 끊고 시작한다(겹침 방지).
     
@@ -151,7 +161,10 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
            것**이라, 옆 카드가 울리는 것은 못 멈췄다 — 변별 훈련에서 1번·2번을 잇달아 누르면
            둘이 함께 울렸다. speechSynthesis 만 전역이라 음원 없는 낱말에서는 멀쩡해 보였고,
            그래서 증상이 반만 나타났다. 스피커가 하나이므로 자물쇠도 전역에 둔다. */
-        const release = claimSound(() => {
+        const 멈춤 = () => {
+            // 남(다른 카드·다음 누름)이 자리를 가져가며 부르면 이 카드는 더 이상 쥐고 있지 않다 — 기다리던 흐름이 이것을 보고 물러선다
+            if (쥔소리Ref.current === 멈춤)
+                쥔소리Ref.current = null;
             try {
                 audioRef.current?.pause();
             }
@@ -161,7 +174,9 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
             }
             catch { /* 미지원 환경 */ }
             setPlaying(false);
-        });
+        };
+        const release = claimSound(멈춤);
+        쥔소리Ref.current = 멈춤;
         try {
             window.speechSynthesis?.cancel();
         }
@@ -178,6 +193,10 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
             if (fallbackResolver && label) {
                 try {
                     const url = await Promise.resolve(fallbackResolver(label));
+                    /* 기다리는 사이 떠났거나 **소리 자리를 남에게 넘겼으면**(다른 카드를 눌렀거나 같은 카드를 다시 눌렀으면) 끝낸다 —
+                       늦게 온 합성 주소로 틀어 두 소리가 겹쳤고, 같은 카드를 두 번 누르면 두 번 울려 onPlayDone 도 두 번 나갔다. */
+                    if (!mountedRef.current || 쥔소리Ref.current !== 멈춤)
+                        return;
                     if (url) {
                         setPlaying(true);
                         if (await playUrl(url))
@@ -186,10 +205,14 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
                 }
                 catch { }
             }
+            if (!mountedRef.current || 쥔소리Ref.current !== 멈춤)
+                return;
             await playSpeechSynthesis();
         }
         finally {
             release(); // 다음 사람이 이미 가져갔으면 아무 일도 안 한다
+            if (쥔소리Ref.current === 멈춤)
+                쥔소리Ref.current = null;
         }
     }, [disabled, audioUrl, label, playUrl, playSpeechSynthesis]);
     useImperativeHandle(ref, () => ({

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

@@ -22,5 +22,10 @@
  *          이미 다음 사람이 가져갔으면 그 사람 것을 지우면 안 된다.
  */
 export declare function claimSound(stop: () => void): () => void;
+/**
+ * **내 소리가 아직 울리고 있을 때만** 멈추고 자리를 비운다 — 소리를 낸 화면이 떠날 때 쓴다.
+ * 이미 다음 사람이 가져갔으면 아무것도 안 한다(남의 소리를 끊지 않는다).
+ */
+export declare function stopSoundIfOwner(stop: () => void): void;
 /** 지금 울리는 것을 멈춘다 — 화면을 떠날 때처럼, 새로 울릴 것이 없을 때 쓴다 */
 export declare function stopCurrentSound(): void;

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

@@ -34,6 +34,19 @@ export function claimSound(stop) {
     return () => { if (stopCurrent === stop)
         stopCurrent = null; };
 }
+/**
+ * **내 소리가 아직 울리고 있을 때만** 멈추고 자리를 비운다 — 소리를 낸 화면이 떠날 때 쓴다.
+ * 이미 다음 사람이 가져갔으면 아무것도 안 한다(남의 소리를 끊지 않는다).
+ */
+export function stopSoundIfOwner(stop) {
+    if (stopCurrent !== stop)
+        return;
+    stopCurrent = null;
+    try {
+        stop();
+    }
+    catch { /* 무시 */ }
+}
 /** 지금 울리는 것을 멈춘다 — 화면을 떠날 때처럼, 새로 울릴 것이 없을 때 쓴다 */
 export function stopCurrentSound() {
     if (!stopCurrent)

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

@@ -1,4 +1,5 @@
 'use client';
+import i18n from "i18next";
 import { getTopicTypes } from "../../utils/categories";
 /** @public */
 export function normalizeCats(item) {
@@ -43,6 +44,12 @@ export function splitTrainingVariants(value) {
     }
     return [String(value)];
 }
+const 이름 = (key, 기본) => {
+    if (!기본)
+        return 기본;
+    const s = typeof i18n?.t === "function" ? i18n.t(key, { defaultValue: 기본 }) : undefined;
+    return typeof s === "string" && s ? s : 기본;
+};
 /** @public */
 export function resolveTrainingPopupMeta(trainingData, depth, fallbackTitle) {
     const td = trainingData;
@@ -62,7 +69,11 @@ export function resolveTrainingPopupMeta(trainingData, depth, fallbackTitle) {
         wrapperStyle: category?.color
             ? { "--t-item-fg": category.color }
             : undefined,
-        iconTooltip: [category?.label, subCategory?.label].filter(Boolean).join(" / ") || undefined,
+        // 카테고리 이름은 지금 언어로(topic.* · topic.sub.*, 사전에 없으면 등록된 이름)
+        iconTooltip: [
+            category ? 이름(`topic.${category.key}`, category.label) : undefined,
+            subCategory ? 이름(`topic.sub.${subCategory.key}`, subCategory.label) : undefined,
+        ].filter(Boolean).join(" / ") || undefined,
     };
 }
 /** @public */

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) { } });
@@ -168,6 +170,10 @@ export function useNoiseFade({ noisePlayer, audioRef, playbackStateRef, }) {
             }
             catch (e) { }
             noiseAudioRef.current = null;
+            /* 이 요소에 물린 파일 기록도 함께 걷는다 — 남겨 두면 다시 만든 요소(StrictMode 의 두 번 실행, <Activity> 숨김→보임)에
+               설정 효과가 "이미 불러옴" 으로 보고 주소를 안 물려, 파형은 그려지는데 소음은 끝까지 안 났다. */
+            noiseTypeLoadedRef.current = null;
+            pendingNoiseUrlRef.current = null;
         };
     }, [cancelNoiseFade]);
     // 소음 감시(watchdog) — 메인이 재생 중이 아닌데 소음만 재생 중이면 강제로 정지한다.

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

@@ -17,6 +17,8 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
        end 이벤트를 내서, **정지를 누르면 끝까지 들은 것으로** handleEnd → onDone(true) 가 불렸고(문항 완료로 셈),
        언마운트 뒤에 온 end 가 떠난 화면에 완료를 알렸다. 번호가 다른 end 는 넘긴다. */
     const ttsTokenRef = useRef(0);
+    /** 이 훅이 말을 건 적이 있나 — 떠날 때 **제 말만** 끊는다(마운트만 한 단계가 다른 곳의 말을 끊던 것) */
+    const 말했나Ref = useRef(false);
     useEffect(() => {
         // cleanup TTS resources on unmount
         return () => {
@@ -26,11 +28,12 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
                     cancelAnimationFrame(ttsRafRef.current);
                     ttsRafRef.current = null;
                 }
-                if (window.speechSynthesis) {
+                if (말했나Ref.current && window.speechSynthesis) {
                     try {
                         window.speechSynthesis.cancel();
                     }
                     catch (e) { }
+                    말했나Ref.current = false;
                 }
             }
             catch (e) { }
@@ -138,6 +141,7 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
                 catch (e) { }
             };
             try {
+                말했나Ref.current = true;
                 synth.speak(utt);
             }
             catch (e) {

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

@@ -45,7 +45,9 @@ export default function PhonemeSelectBlock({ sections, selectedList, count, onCo
         const hasLabel = !!value && value !== '없음';
         return (_jsxs("span", { className: cx('phoneme-select-block__cell-jamo-part', value ? '' : 'phoneme-select-block__cell-jamo-part--empty', hasLabel ? '' : 'phoneme-select-block__cell-jamo-part--no-label'), children: [_jsx("span", { className: `phoneme-select-block__cell-jamo-char h1${value === '없음' ? ' phoneme-select-block__cell-jamo-char--excluded' : ''}`, children: value === '없음' ? 'x' : (value || placeholder) }), hasLabel && _jsx("span", { className: "phoneme-select-block__cell-jamo-label caption-2", children: displayLabel ?? label })] }, label));
     }), [sections, placeholder]);
-    const infoButton = (_jsxs(_Fragment, { children: [_jsx("div", { "data-tooltip-ignore": true, children: _jsx(Button, { htmlType: "button", size: 40, type: isMobile ? 'dot' : undefined, icon: "info", label: isMobile ? undefined : t('wordPairs.caution', '유의사항'), selected: !!infoAnchorRect, onClick: (e) => toggleInfo(e.currentTarget) }) }), infoAnchorRect && (_jsx(DescriptionTooltip, { title: t('wordPairs.caution', '유의사항'), items: infoNotes, anchorRect: infoAnchorRect, onClose: handleCloseInfo }))] }));
+    const infoButton = (_jsxs(_Fragment, { children: [_jsx("div", { "data-tooltip-ignore": true, children: _jsx(Button, { htmlType: "button", size: 40, type: isMobile ? 'dot' : undefined, icon: "info", label: isMobile ? undefined : t('wordPairs.caution', '유의사항'), 
+                    // 좁은 화면에서는 아이콘만 남는다 — 이름을 늘 준다
+                    ariaLabel: t('wordPairs.caution', '유의사항'), selected: !!infoAnchorRect, onClick: (e) => toggleInfo(e.currentTarget) }) }), infoAnchorRect && (_jsx(DescriptionTooltip, { title: t('wordPairs.caution', '유의사항'), items: infoNotes, anchorRect: infoAnchorRect, onClose: handleCloseInfo }))] }));
     return (_jsxs(Section, { type: sectionType, title: title, icon: titleIcon, disc: disc, action: infoButton, className: cx('phoneme-select-block', className), children: [beforeContent, (!hideCountControl || (showInfoButton && !(title || disc))) && (_jsxs("div", { className: "phoneme-select-block__controls", children: [!hideCountControl && (_jsx(SegmentedControl, { options: countOptions, value: String(count), onChange: handleCountChange, size: 40, className: "phoneme-select-block__count-control" })), showInfoButton && !(title || disc) && infoButton] })), _jsx("div", { className: "phoneme-select-block__cells", children: pairMode
                     ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "phoneme-select-block__cell-group", children: Array.from({ length: count }).map((_, pairIdx) => {
                                     const sel = selectedList[pairIdx * 2] ?? {};

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

@@ -31,7 +31,9 @@ function WordCell({ label, subLabel, colloquialLabel, homonum, showWord = true,
     const audioRef = useRef(null);
     const [scale, setScale] = useState(1);
     const [playing, setPlaying] = useState(false);
-    const [audioUrl, setAudioUrl] = useState('');
+    /* 받은 주소에 **어느 낱말의 것인지** 를 함께 둔다 — 주소만 들고 있으면 같은 칸의 낱말이 바뀐 뒤 새 주소를 받는 동안(또는
+       못 받으면) 누를 때 앞 낱말 소리가 났다(틀린 자극). 지금 낱말의 것일 때만 쓴다. */
+    const [받은소리, set받은소리] = useState({ for: '', url: '' });
     const [infoAnchor, setInfoAnchor] = useState(null);
     // 발음(subLabel)이 없으면 단어로 표준발음 조회(앱 주입 resolver)
     const pron = (subLabel && subLabel.length > 0) ? subLabel : (getPronunciationResolver()?.(label, homonum) ?? '');
@@ -43,17 +45,20 @@ function WordCell({ label, subLabel, colloquialLabel, homonum, showWord = true,
         if (!wordInfo)
             return null;
         const arr = [];
+        // 지금 언어로 — 템플릿 글자·약호 이름표가 한국어로 박혀 영어 화면에도 "난이도: 2등급 / 품사: 명사" 가 떴다
         if (wordInfo.grade)
-            arr.push(`난이도: ${wordInfo.grade}등급`);
+            arr.push(t('wordTable.info.grade', { n: wordInfo.grade, defaultValue: '난이도: {{n}}등급' }));
         if (wordInfo.syllables)
-            arr.push(`음절 수: ${wordInfo.syllables}음절`);
+            arr.push(t('wordTable.info.syllables', { n: wordInfo.syllables, defaultValue: '음절 수: {{n}}음절' }));
         // 축약 코드를 전체 표기로 — 복합값('명/관' → '명사/관형사')도 각각 펼친다(단어 관리 표와 동일 규칙).
         if (wordInfo.pos)
-            arr.push(`품사: ${expandSlashLabel(wordInfo.pos, POS_LABEL)}`);
+            arr.push(t('wordTable.info.pos', { v: expandSlashLabel(wordInfo.pos, 품사이름(t)), defaultValue: '품사: {{v}}' }));
         if (wordInfo.wordType)
-            arr.push(`유형: ${expandSlashLabel(wordInfo.wordType, WORD_TYPE_LABEL)}`);
+            arr.push(t('wordTable.info.wordType', { v: expandSlashLabel(wordInfo.wordType, 어종이름(t)), defaultValue: '유형: {{v}}' }));
         return arr.length ? arr : null;
-    }, [wordInfo]);
+    }, [wordInfo, t]);
+    const 소리열쇠 = pron || label;
+    const audioUrl = 받은소리.for === 소리열쇠 ? 받은소리.url : '';
     useEffect(() => {
         const resolver = getTTSUrlResolver();
         const ttsText = pron || label;
@@ -61,7 +66,7 @@ function WordCell({ label, subLabel, colloquialLabel, homonum, showWord = true,
             return;
         let cancelled = false;
         Promise.resolve(resolver(ttsText)).then(url => { if (!cancelled && url)
-            setAudioUrl(url); });
+            set받은소리({ for: ttsText, url }); });
         return () => { cancelled = true; };
     }, [pron, label]);
     // 컴포넌트 언마운트 시 발음 재생 중단 — audioRef는 <audio> JSX가 아니라 new Audio()로
@@ -128,6 +133,19 @@ function WordCell({ label, subLabel, colloquialLabel, homonum, showWord = true,
                            것인지 알 길이 없으므로 낱말을 이름에 넣는다. */
                         ariaLabel: t('wordTable.wordInfo', '{{word}} 낱말 정보', { word: label }), onClick: (e) => e.stopPropagation() }), infoAnchor && infoTooltipItems && (_jsx(DescriptionTooltip, { anchorRect: infoAnchor, items: infoTooltipItems, showIndex: false }))] }))] }));
 }
+// ── WordTable (표 디자인) ──────────────────────────────────────
+/* 품사·어종 약호 → 지금 언어의 이름. 사전에 없으면 원본 한국어 이름표(POS_LABEL·WORD_TYPE_LABEL) */
+const 품사열쇠 = {
+    '명': 'noun', '동': 'verb', '형': 'adjective', '부': 'adverb', '수': 'numeral', '관': 'determiner', '감': 'interjection',
+    '조': 'particle', '접': 'affix', '의': 'dependentNoun', '대': 'pronoun', '보동': 'auxVerb', '보형': 'auxAdjective',
+};
+const 어종열쇠 = { '고유': 'native', '한자': 'sino', '외래': 'foreign', '혼종': 'mixed' };
+function 품사이름(t) {
+    return Object.fromEntries(Object.entries(POS_LABEL).map(([k, v]) => [k, 품사열쇠[k] ? t(`wordTable.pos.${품사열쇠[k]}`, { defaultValue: v }) : v]));
+}
+function 어종이름(t) {
+    return Object.fromEntries(Object.entries(WORD_TYPE_LABEL).map(([k, v]) => [k, 어종열쇠[k] ? t(`wordSearch.filter.type.${어종열쇠[k]}`, { defaultValue: v }) : v]));
+}
 /**
  * 단어표(표 디자인) — A4 종이를 컨테이너에 맞춰 축소(scale)하고,
  * 칸 그리드와 단어 셀을 그린다. 컨트롤(필터·저장·인쇄)은 포함하지 않는다.

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

@@ -40,12 +40,18 @@ export function useEditableList(emptyItem, initialList = []) {
     /* 갱신은 렌더가 아니라 효과에서 한다 — 렌더 중에 쓰면 커밋되지 않을 렌더의 값이 남는다.
        읽는 곳은 바로 아래 동기화 효과뿐이고, 그것이 뒤에 선언돼 있어 순서도 맞다.
        (효과는 선언 순서대로 돈다.) */
-    const isEditingRef = useRef(isEditing);
-    useEffect(() => { isEditingRef.current = isEditing; });
+    /* 편집이 **취소로** 끝나면 그 사이 건너뛴 목록을 받는다 — 전에는 initialList 가 바뀔 때만 돌아, 편집 중 들어온 서버 목록이
+       취소한 뒤에도 끝내 안 보였다(방문 예정을 고치다 취소하면 그 사이 다른 방문이 빠진 채). commitEdit 으로 끝난 때는
+       방금 커밋한 편집을 옛 목록으로 덮지 않도록 한 번 넘긴다(다음 목록이 오면 그때 받는다). */
+    const 커밋으로끝남Ref = useRef(false);
     const prevInitialRef = useRef(null);
     useEffect(() => {
-        if (isEditingRef.current)
+        if (isEditing)
             return;
+        if (커밋으로끝남Ref.current) {
+            커밋으로끝남Ref.current = false;
+            return;
+        }
         const prev = prevInitialRef.current;
         const same = prev !== null
             && prev.length === initialList.length
@@ -56,7 +62,7 @@ export function useEditableList(emptyItem, initialList = []) {
         setList(initialList);
         // 고른 항목도 새 목록의 같은 항목(id)으로 옮긴다 — 옛 참조로 남으면 지우기·수정 대상 찾기가 헛돈다
         setSelected(prev => (prev == null ? prev : initialList.find(v => isSameEditableItem(v, prev)) ?? prev));
-    }, [initialList]);
+    }, [initialList, isEditing]);
     /* 편집 중이 아닐 때는 편집 폼을 고른 항목에 맞춘다 — 취소하거나(서버 거절로) 되돌려도 폼이 저장 안 된 값을 들고 있어,
        상세 화면에 거절된 값이 보이고 다시 '수정하기' 를 누르면 그 값에서 시작했다. */
     // eslint-disable-next-line react-hooks/set-state-in-effect
@@ -72,7 +78,9 @@ export function useEditableList(emptyItem, initialList = []) {
     const commitEdit = useCallback((updater, updated) => {
         setList(updater);
         setSelected(updated);
-        setIsEditing(false);
+        // 편집 중이었을 때만 표시한다(편집이 아닌데 표시하면 다음 목록 한 번을 헛되이 건너뛴다). 같은 값을 넣는 표시라 두 번 불려도 같다
+        setIsEditing(prev => { if (prev)
+            커밋으로끝남Ref.current = true; return false; });
     }, []);
     const remove = useCallback((item) => {
         setList(prev => prev.filter(v => !isSameEditableItem(v, item)));

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

@@ -5,9 +5,9 @@ export default function useFontScale({ storageKey = 'fontScale',
 // 기본값을 중앙화: Training/Tooltip 텍스트 박스 공통값
 baseFont = 20, minScale = 0.8, maxScale = 1.4, step = 0.1, lineHeightRatio = 1.4, } = {}) {
     const clamp = (v) => Math.max(minScale, Math.min(maxScale, Number(v)));
-    const [scale, setScaleRaw] = useState(() => {
+    const 읽기 = (key) => {
         try {
-            const raw = localStorage.getItem(storageKey);
+            const raw = localStorage.getItem(key);
             const parsed = raw ? Number(raw) : 1;
             // 손상된/비숫자 저장값(Number(raw) === NaN)이 그대로 초기값이 되면 scale이 NaN으로
             // 고정되어 canIncrease/canDecrease 비교가 항상 false가 되고 fontSize/lineHeight도
@@ -17,9 +17,18 @@ baseFont = 20, minScale = 0.8, maxScale = 1.4, step = 0.1, lineHeightRatio = 1.4
             return Number.isFinite(parsed) ? clamp(parsed) : clamp(1);
         }
         catch (e) {
-            return 1;
+            // 저장소를 못 읽어도 범위는 지킨다(minScale 이 1 보다 크면 1 은 범위 밖이다)
+            return clamp(1);
         }
-    });
+    };
+    const [scale, setScaleRaw] = useState(() => 읽기(storageKey));
+    /* 열쇠가 바뀌면 **그 열쇠의 저장값** 으로 — 전에는 앞 열쇠의 값을 들고 있다가 아래 쓰기가 새 열쇠의 저장값을 덮었다.
+       렌더 중에 맞추므로 쓰기 effect 는 새 값으로만 돈다. */
+    const [읽은열쇠, set읽은열쇠] = useState(storageKey);
+    if (읽은열쇠 !== storageKey) {
+        set읽은열쇠(storageKey);
+        setScaleRaw(읽기(storageKey));
+    }
     useEffect(() => {
         try {
             localStorage.setItem(storageKey, String(scale));

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

@@ -42,6 +42,9 @@ export default function useIcon(icon) {
                 normalized = icon;
             }
         }
+        // 다른 파일로 바뀌면 앞 아이콘의 판정·SVG 를 걷는다 — 안 걷으면 새 파일을 받는 동안 앞 아이콘이 그대로 그려졌다
+        setMode(null);
+        setSvgText(null);
         setIconToUse(normalized);
     }, [icon]);
     /* eslint-enable react-hooks/set-state-in-effect */

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

@@ -20,6 +20,9 @@ function toRawKey(icon) {
         return null;
     if (icon.includes('/assets/'))
         return null;
+    // 그림 파일(.png·.jpg 등)은 아이콘 이름이 아니다 — 이름으로 찾아 개발 모드에 헛 경고를 냈다
+    if (/\.(png|jpe?g|gif|webp|avif|bmp|ico)$/i.test(lower))
+        return null;
     const baseFile = icon.split('/').pop() || '';
     // 주의: lucide 아이콘명 규약("trash-2", "edit-2", "link-2" 등)은 끝의 숫자가
     // "-2/-3" 변형 아이콘을 가리키는 유의미한 부분이라 잘라내면 안 됨(예: trash-2 ≠ trash).

package/dist/packages/core/src/hooks/useMediaQuery.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 /**
  * 미디어쿼리 결과를 강제로 덮어쓰기 위한 컨텍스트.
  * 랜딩페이지 폰 목업처럼 데스크탑 뷰포트에서 모바일 화면을 재현해야 할 때,
@@ -12,6 +13,6 @@ export interface MediaQueryOverride {
     mobile?: boolean;
 }
 /** @public */
-export declare const MediaQueryOverrideContext: import("react").Context<MediaQueryOverride | null>;
+export declare const MediaQueryOverrideContext: React.Context<MediaQueryOverride | null>;
 /** @public */
 export default function useMediaQuery(query: string): boolean;

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

@@ -1,19 +1,40 @@
 'use client';
-import { useEffect, useState, useContext, createContext } from 'react';
+import * as React from 'react';
+import { useCallback, useEffect, useState, useContext, createContext } from 'react';
 /** @public */
 export const MediaQueryOverrideContext = createContext(null);
 // '(max-width: 767px)' / '(max-width: 768px)' 같은 모바일 판정 쿼리인지 추정
 function isMobileQuery(query) {
     return /max-width:\s*7[0-9][0-9]px/.test(query);
 }
-/** @public */
-export default function useMediaQuery(query) {
-    const override = useContext(MediaQueryOverrideContext);
-    const getMatches = (q) => {
+const getMatches = (q) => {
+    if (typeof window === 'undefined' || !window.matchMedia)
+        return false;
+    return window.matchMedia(q).matches;
+};
+/* React 18+ — 외부 저장소 구독으로 읽는다. **서버 스냅숏은 false** 라, 서버에서 그린 HTML 을 붙일 때(kscan·Next) 첫 렌더가
+   서버와 같고 붙인 뒤 곧바로 실제 값으로 다시 그린다. 전에는 첫 렌더에서 matchMedia 를 읽어 모바일 기기에서 hydration
+   불일치로 트리를 통째로 다시 만들었다. 서버 렌더가 아닌 첫 렌더는 그대로 실제 값이다. */
+function useMatchesStore(query) {
+    const subscribe = useCallback((onChange) => {
         if (typeof window === 'undefined' || !window.matchMedia)
-            return false;
-        return window.matchMedia(q).matches;
-    };
+            return () => { };
+        const mql = window.matchMedia(query);
+        if (mql.addEventListener)
+            mql.addEventListener('change', onChange);
+        else if (mql.addListener)
+            mql.addListener(onChange);
+        return () => {
+            if (mql.removeEventListener)
+                mql.removeEventListener('change', onChange);
+            else if (mql.removeListener)
+                mql.removeListener(onChange);
+        };
+    }, [query]);
+    return React.useSyncExternalStore(subscribe, () => getMatches(query), () => false);
+}
+/* React 16.8·17 — useSyncExternalStore 가 없다. 예전 방식 그대로. */
+function useMatchesState(query) {
     const [matches, setMatches] = useState(getMatches(query));
     // query가 바뀌면 새 matchMedia 결과로 즉시 동기화(구독 시작 전 값이 stale할 수 있음) —
     // window.matchMedia(외부 시스템) 구독의 표준 패턴이다
@@ -37,6 +58,14 @@ export default function useMediaQuery(query) {
         };
     }, [query]);
     /* eslint-enable react-hooks/set-state-in-effect */
+    return matches;
+}
+// 모듈을 불러올 때 한 번 정한다 — 렌더마다 같은 훅을 부르므로 훅 순서 규칙을 어기지 않는다
+const useMatches = typeof React.useSyncExternalStore === 'function' ? useMatchesStore : useMatchesState;
+/** @public */
+export default function useMediaQuery(query) {
+    const override = useContext(MediaQueryOverrideContext);
+    const matches = useMatches(query);
     // 오버라이드가 있고 모바일 판정 쿼리이면 강제값 사용
     if (override && typeof override.mobile === 'boolean' && isMobileQuery(query)) {
         return override.mobile;

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

@@ -1,3 +1,4 @@
+'use client';
 import { useMemo } from 'react';
 /**
  * 클라이언트 페이지네이션 — 목록·페이지크기·현재 페이지로 현재 쪽 항목·총 쪽수·보정된

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

@@ -15,6 +15,9 @@ export function usePasswordChange(onChangePassword) {
     const [pwMsg, setPwMsg] = useState(null);
     const [pwLoading, setPwLoading] = useState(false);
     const clearTimerRef = useRef(null);
+    /* 처리 중에는 다시 받지 않는다 — 두 번 누르면 변경이 두 번 나가, 먼저 온 성공 뒤에 늦게 온 "현재 비밀번호 틀림" 이
+       남아 바뀌었는데 오류 문구가 떴다(말귀 계정 화면 단추는 로딩 중에도 눌린다) */
+    const 처리중Ref = useRef(false);
     useEffect(() => {
         return () => {
             if (clearTimerRef.current !== null)
@@ -26,6 +29,8 @@ export function usePasswordChange(onChangePassword) {
         setPwMsg(null);
     }, []);
     const handleChangePw = useCallback(async () => {
+        if (처리중Ref.current)
+            return;
         if (!pw.current) {
             setPwMsg({ type: 'error', text: t('account.security.password.currentRequired', '현재 비밀번호를 입력하세요.') });
             return;
@@ -41,6 +46,7 @@ export function usePasswordChange(onChangePassword) {
             return;
         }
         setPwLoading(true);
+        처리중Ref.current = true;
         // 콜백이 문구 대신 **거절**하면(망 끊김 등) 로딩이 true 로 남아 단추가 영영 잠겼고,
         // reset() 도 로딩은 안 건드려 풀 길이 없었다. 거절도 오류 문구로 보이고 로딩은 늘 내린다.
         let err;
@@ -51,6 +57,7 @@ export function usePasswordChange(onChangePassword) {
             err = getErrorMessage(e);
         }
         finally {
+            처리중Ref.current = false;
             setPwLoading(false);
         }
         if (err) {

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

@@ -1,3 +1,4 @@
+'use client';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { translateTrainingTypes } from '../utils/CategoryData';

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

@@ -1,3 +1,4 @@
+'use client';
 import { useState } from 'react';
 import { useEditableList, isSameEditableItem } from './useEditableList';
 /**

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

@@ -1,5 +1,5 @@
 'use client';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { CAPABILITY, generateRuntimeItems, precomputeCommonCombinations, } from '../utils/wordTrainingRuntime';
 import { valueToJamos, syllableToFilter, NO_CODA } from './useWordTrainingFilter';
 /** 선택된 단어 구성을 실제 매칭용 CompositionFilter로 변환. 선택 없으면 null.
@@ -36,6 +36,9 @@ export function useWordTrainingDataGeneration(types, difficulty, contrastCount,
     // 배열인 이쪽만 빠져 있었다. effect 안에서 어차피 정렬해 문자열로 쓰고 있으니
     // 그 문자열을 의존성으로 삼는다. 내용이 같으면 다시 만들지 않는다.
     const gradeKey = gradeFilter.length > 0 ? gradeFilter.slice().sort().join(',') : '';
+    /* types 도 **내용** 으로 — 만드는 일은 어떤 유형이 있느냐(key)에만 달려 있다. 빠져 있어 늦게 채워진 목록([] → [A,B])으로는
+       끝까지 아무것도 안 만들었다. 이름·색·부제는 아래에서 최신 types 로 덧입혀, 언어를 바꿔도 다시 뽑지 않고 이름만 따라간다. */
+    const typesKey = types.map(t => t.key).join('|');
     // 단어풀 갱신 시 사전 계산 (백그라운드 fire-and-forget)
     useEffect(() => {
         if (poolVersion > 0) {
@@ -100,7 +103,19 @@ export function useWordTrainingDataGeneration(types, difficulty, contrastCount,
             }
         })();
         return () => { cancelled = true; };
-    }, [difficulty, contrastCount, cho, jung, jong, syllable, excludeNoImage, sameStructureOnly, phonemeView, poolVersion, gradeKey]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [difficulty, contrastCount, cho, jung, jong, syllable, excludeNoImage, sameStructureOnly, phonemeView, poolVersion, gradeKey, typesKey]); // eslint-disable-line react-hooks/exhaustive-deps
     /* eslint-enable react-hooks/set-state-in-effect */
-    return { perTypeData, generating };
+    // 이름·색·부제는 지금 types 로 — 만든 때의 label 을 들고 있어 언어를 바꿔도 단추 제목이 옛 언어로 남았다
+    // 부르는 쪽이 types 를 매번 새 배열로 줘도 결과 객체가 그대로이도록 **내용** 으로 기억한다
+    const typesLabelKey = JSON.stringify(types.map(t => [t.key, t.label, t.color, t.subTitle]));
+    const labeled = useMemo(() => {
+        const out = {};
+        for (const [key, v] of Object.entries(perTypeData)) {
+            const t = types.find(x => x.key === key);
+            out[key] = v && t ? { ...v, name: t.label, iconColor: t.color, subTitle: t.subTitle } : v;
+        }
+        return out;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [perTypeData, typesLabelKey]);
+    return { perTypeData: labeled, generating };
 }