@ihabdevteam/core 0.137.0 → 0.139.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

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

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

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

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

@@ -130,6 +130,10 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
                 }
                 catch (e) { }
             };
+            /* 합성이 실패하면(synthesis-failed·not-allowed·language-unavailable) end 없이 error 만 온다 — 끝난 것과 같이 정리한다.
+               전에는 재생 상태·소음이 그대로 남고 handleEnd·onDone 이 안 불려 문항이 넘어가지 않았다. 정지·다시 시작이 올린 번호의
+               error(취소)는 위 onend 와 같이 넘긴다. */
+            utt.onerror = () => { utt.onend?.(new Event('end')); };
             utt.onstart = () => {
                 try {
                     if (ttsRafRef.current) {

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) ?? '');
@@ -55,6 +57,8 @@ function WordCell({ label, subLabel, colloquialLabel, homonum, showWord = true,
             arr.push(t('wordTable.info.wordType', { v: expandSlashLabel(wordInfo.wordType, 어종이름(t)), defaultValue: '유형: {{v}}' }));
         return arr.length ? arr : null;
     }, [wordInfo, t]);
+    const 소리열쇠 = pron || label;
+    const audioUrl = 받은소리.for === 소리열쇠 ? 받은소리.url : '';
     useEffect(() => {
         const resolver = getTTSUrlResolver();
         const ttsText = pron || label;
@@ -62,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()로

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/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/utils/speak.js

@@ -32,6 +32,15 @@ export function speak(text, { onEnd, rate = 0.9 } = {}) {
                 catch (e) { }
             }
             : null;
+        // 합성이 실패하면 end 없이 error 만 온다 — 끝난 것으로 알린다(안 그러면 onEnd 를 기다리는 쪽이 멈춘 채)
+        u.onerror = onEnd
+            ? function () {
+                try {
+                    onEnd();
+                }
+                catch (e) { }
+            }
+            : null;
         synth.speak(u);
     };
     if (synth.getVoices().length > 0) {

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

@@ -144,6 +144,8 @@ async function buildIndexAsync(items, onProgress) {
         onProgress?.(total, total);
     return result;
 }
+/** 캐시를 비우거나 새 빌드를 시작할 때 오른다 — 늦게 끝난 옛 빌드가 캐시에 쓰지 못하게 */
+let 빌드세대 = 0;
 /**
  * @public
  * 단어 리스트로부터 대립쌍 인덱스를 빌드 (또는 캐시된 결과 반환).
@@ -162,10 +164,15 @@ export async function buildPairIndex(items, options = {}) {
             return memIndex;
         }
     }
+    /* 세대가 그대로일 때만 캐시에 담는다 — 빌드 중 clearPairIndexCache() 가 불렸거나 더 새 빌드가 시작됐으면, 늦게 끝난 옛
+       빌드가 방금 지운 캐시를 되살리거나 새 인덱스를 옛 것으로 덮었다. 부른 쪽에는 만든 것을 그대로 돌려준다. */
+    const 내세대 = ++빌드세대;
     const built = await buildIndexAsync(items, options.onProgress);
-    memIndex = built;
-    memSig = sig;
-    saveToLocalStorage(built, sig);
+    if (내세대 === 빌드세대) {
+        memIndex = built;
+        memSig = sig;
+        saveToLocalStorage(built, sig);
+    }
     return built;
 }
 /** @public 현재 메모리에 적재된 인덱스 (없으면 localStorage 시도) */
@@ -182,6 +189,7 @@ export function getPairIndex() {
 }
 /** @public 캐시 초기화 */
 export function clearPairIndexCache() {
+    빌드세대 += 1;
     memIndex = null;
     memSig = null;
     try {

package/dist/packages/core/src/version.d.ts

@@ -46,4 +46,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.137.0";
+export declare const CORE_VERSION = "0.139.0";

package/dist/packages/core/src/version.js

@@ -46,4 +46,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export const CORE_VERSION = '0.137.0';
+export const CORE_VERSION = '0.139.0';