@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,971 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../utils/cx';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from "react-i18next";
+// TrainingItem, TrainingGroup import 제거됨 (resolveMapping 제거로 불필요)
+import { downloadSound, getSignedOrPublicUrl, resolveSoundPath } from '../../utils/storage';
+import { getTTSUrlResolver } from '../../utils/ttsConfig';
+import { getElementAnalyser, resumeAudioMeter } from '../../utils/audioMeter';
+import { useNoisePlayer } from './NoisePlayerContext';
+import { useNoiseFade } from './useNoiseFade';
+import { useTTSPlayback } from './useTTSPlayback';
+import './TrainingStepAudioPlayer.css';
+import WaveForm from './AudioPlayerWaveForm';
+import Toast from '../Toast';
+import Button from '../Button';
+import Icon from '../Icon';
+import InfoTooltip from '../Tooltip/InfoTooltip';
+import { STATUS_MESSAGES } from './trainingStepAudioPlayerTypes';
+import { measureAudioDuration, waitForCanPlay } from './audioWaits';
+import { useWaveReady } from './useWaveReady';
+import { useObjectUrls } from './useObjectUrls';
+import { useAnchorRect } from './useAnchorRect';
+import { useProgressTicker } from './useProgressTicker';
+import { nextTrackIndex, shouldIgnorePause, buildSegments, totalDurationOf, normalizeSources } from './audioPlaybackRules';
+/** @public */
+export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath, onDone, disabled = false, ttsText = null, className, showSoundWaveForm = true, showNoiseWaveForm = true }) {
+    const { t } = useTranslation();
+    const label = btnLabel;
+    // 소음 재생
+    const noisePlayer = useNoisePlayer();
+    // 미터용 analyser 등록 — 콜백 stale 방지용 ref
+    const registerAnalyserRef = useRef(noisePlayer?.registerAnalyser);
+    /* 렌더 중에 ref 를 쓰면 **버려질 렌더의 값**이 남을 수 있다(동시성 렌더링에서 React 는
+       커밋하지 않을 렌더를 그리다 버린다). 이 값을 읽는 곳은 재생 이벤트 핸들러와 언마운트
+       정리뿐이라 둘 다 커밋 이후에 도는 자리다 — 그러니 효과에서 갱신해도 늦지 않고,
+       그래야 커밋된 값만 들어간다. 이 효과는 맨 앞에 두어 뒤따르는 효과들이 이미 채워진
+       값을 보게 한다. */
+    useEffect(() => { registerAnalyserRef.current = noisePlayer?.registerAnalyser; });
+    const audioRef = useRef(null);
+    const fillRef = useRef(null);
+    const btnsRef = useRef(null);
+    // mappingRef removed — resolveMapping 제거됨
+    /* 내려받기 폴백으로 만든 blob 주소의 회수는 useObjectUrls 가 들고 있다.
+       (한때 '현재 재생 중 하나'를 따로 든 ref 가 있었는데 null 만 대입돼서 그 옆의
+        revokeObjectURL 이 한 번도 실행된 적이 없었다 — 실제 회수는 전부 이쪽이 했다.) */
+    const objectUrls = useObjectUrls();
+    const sourceButtonsRef = useRef(null);
+    const fetchingRef = useRef(false);
+    // handlePrev/handleNext/handleJumpTo 세대 토큰 — 빠른 연타로 여러 호출이 겹치면
+    // src 교체/load()가 서로 인터리빙되며 "선택된" UI가 실제 재생 중인 트랙과 어긋날 수 있다.
+    // 각 호출 시작 시 증가시키고, await 이후 최신 호출인지 확인해 아니면 중단한다.
+    const jumpTokenRef = useRef(0);
+    const triPathRef = useRef(null);
+    /* 듣기 단추 설명 툴팁이 붙을 자리 — 가리키기와 초점 둘 다 받고, 다른 곳을 누르면 닫는다. */
+    /* 구조 분해해서 받는다 — `listenBtnRect` 처럼 점을 찍어 쓰면 lint 규칙이 그 객체를
+       ref 로 보고 "렌더 중 ref 접근"으로 잘못 짚는다(rect 는 상태다). */
+    const { ref: listenBtnRef, rect: listenBtnRect, show: showListenTip, hide: hideListenTip, } = useAnchorRect();
+    // 이 컴포넌트는 스텝/페이지 전환마다 key가 바뀌어 완전히 언마운트-재마운트된다.
+    // registerAnalyser는 재생 시작 시점에만 호출되고 해제는 없어서, 언마운트 후에도
+    // NoisePlayerContext가 이전 스텝의(이미 detach된) analyser를 그대로 들고 있다가
+    // 다음 스텝이 재생을 시작하기 전까지 미터에 잔상(ghost reading)이 남는다.
+    useEffect(() => {
+        return () => {
+            registerAnalyserRef.current?.('main', null);
+            registerAnalyserRef.current?.('noise', null);
+        };
+    }, []);
+    const [isFetchingUrl, setIsFetchingUrl] = useState(false);
+    const [fetchDebugStatus, setFetchDebugStatus] = useState('idle');
+    const [playbackState, setPlaybackState] = useState('stopped');
+    // 소음 감시(watchdog)에서 참조 — speechSynthesis TTS 재생 중에는 main <audio>가 놀고
+    // 있어도 소음이 나오는 게 정상이므로, <audio> 상태 대신 이 값으로 재생 여부를 판단한다.
+    const playbackStateRef = useRef('stopped');
+    useEffect(() => { playbackStateRef.current = playbackState; }, [playbackState]);
+    const [progress, setProgress] = useState(0);
+    /* `stateLocal` 은 이 컴포넌트의 상태 기계다 — default · active · load · playMode.
+     **'disabled' 는 여기 담지 않는다.** 그건 밖에서 온 prop 이라, 담는 순간 "prop 을
+     상태에 베껴 두고 바뀔 때마다 맞추는" 효과가 필요해진다. 그 효과는 낡은 상태로 한 번
+     그린 뒤에야 고쳐 주고, 무엇보다 **비활성이 풀릴 때 원래 무엇을 하고 있었는지 잃는다**
+     (예전 코드는 무조건 'active' 로 되돌렸다).
+  
+     대신 아래에서 `uiState` 로 겹쳐 읽는다 — 상태 기계는 그대로 두고 화면만 가린다. */
+    const [stateLocal, setStateLocal] = useState('active');
+    const [sources, setSources] = useState(null);
+    const [segments, setSegments] = useState(null);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    /* 어느 구간 단추를 밝힐 것인가.
+     *
+     * 한때 번호를 통째로 들고 있었는데, 값이 null 이 아닐 때는 **언제나 `currentIndex` 와
+     * 같았다** — 여덟 자리 전부 `setCurrentIndex` 와 나란히 같은 값을 넣고 있었다.
+     * 그래서 번호는 `currentIndex` 에서 읽고, 여기서는 **밝힐지 말지만** 든다.
+     * 둘을 따로 들면 언젠가 한쪽만 갱신되는 자리가 생긴다(실제로 `goToTrack` 이
+     * 번호만 바꾸고 이 값은 효과에 기대고 있었다). */
+    const [구간표시, set구간표시] = useState(false);
+    const [totalDuration, setTotalDuration] = useState(0);
+    // 문장(메인) 재생 속도·볼륨 — 하단 소음설정 툴팁과 공유(NoisePlayerContext)
+    const playbackRate = noisePlayer?.playbackRate ?? 1.0;
+    const mainVolume = noisePlayer?.mainVolume ?? 1.0;
+    const [fillCompletionPhase, setFillCompletionPhase] = useState('idle');
+    const [noticeMessage, setNoticeMessage] = useState("");
+    const [noticePosition] = useState("top");
+    const sourcesRef = useRef(null);
+    const currentIndexRef = useRef(0);
+    const waveProgressRef = useRef(null);
+    /* 진행 표시는 React 를 거치지 않고 DOM 을 직접 만진다 — 초당 예순 번 상태를 바꾸면
+       파형 바 300개가 매 프레임 다시 만들어진다. 프레임 사슬을 걸고 끄는 일이 원래
+       아홉 군데에 흩어져 있었다. */
+    /* 함수만 꺼내 쓴다 — 훅이 돌려주는 객체는 매 렌더 새것이라 그대로 의존성에 넣으면
+       이벤트 배선이 매 렌더 다시 붙는다. 안쪽 셋은 useCallback 이라 안정적이다. */
+    const { start: startTicker, stop: stopTicker, settleTo: settleTicker, } = useProgressTicker({ audioRef, fillRef, waveProgressRef, sourcesRef, currentIndexRef });
+    /* 파형이 자리를 잡을 때까지 기다리는 규칙은 useWaveReady 가 들고 있다 —
+       ref 둘·함수 둘에 "준비 안 됨으로 되돌리기"가 일곱 군데 흩어져 있던 것을 모았다. */
+    const { onReadyChange: handleWaveReadyChange, waitForReady: waitForWaveReady, markNotReady: markWaveNotReady, } = useWaveReady({ showSoundWaveForm, showNoiseWaveForm });
+    const noticeResetRef = useRef(null);
+    const disabledRef = useRef(disabled);
+    const onDoneRef = useRef(onDone);
+    const fillOutResetRef = useRef(null);
+    /* 재생이 '끝까지 가서' 끝났는가.
+     *
+     * 두 벌인 이유가 있다. **ref 는 즉시성**이 필요해서다 — onEnded 와 ✓ 단추가 동시에
+     * 들어올 때 중복 호출을 막는 문지기라, 다음 렌더를 기다릴 수 없다. **상태는 화면**이
+     * 필요해서다 — 진행 마커의 표시 여부가 이 값에 걸려 있는데, ref 를 렌더 중에 읽으면
+     * React 가 다시 그려 주지 않아 화면과 값이 어긋날 수 있다.
+     *
+     * 그래서 둘을 **반드시 함께** 바꾼다. 직접 대입하지 말고 markCompletedByEnd 를 쓸 것. */
+    const completedByEndRef = useRef(false);
+    const [completedByEnd, setCompletedByEnd] = useState(false);
+    const markCompletedByEnd = useCallback((v) => {
+        completedByEndRef.current = v;
+        setCompletedByEnd(v);
+    }, []);
+    const handleEndRef = useRef(null);
+    const { activeNoiseUrl, noiseSettingsRef, fadeInNoise, fadeOutNoise } = useNoiseFade({
+        noisePlayer,
+        audioRef,
+        playbackStateRef,
+    });
+    const { startTTS, stopTTS } = useTTSPlayback({
+        ttsText,
+        playbackRate,
+        mainVolume,
+        fillRef,
+        waveProgressRef,
+        setProgress,
+        setPlaybackState,
+        setStateLocal,
+        fadeInNoise,
+        fadeOutNoise,
+        noiseSettingsRef,
+        onDoneRef,
+        handleEndRef,
+    });
+    const requestedSources = Array.isArray(soundSrc)
+        ? soundSrc.filter(Boolean)
+        : (soundSrc ? [soundSrc] : []);
+    const ttsMode = (!requestedSources || requestedSources.length === 0) && !!ttsText;
+    const multiSources = Array.isArray(sources) && sources.length > 0 ? sources : (Array.isArray(segments) && segments.length > 0 ? segments : null);
+    const sourceButtonCount = Math.max(Array.isArray(multiSources) ? multiSources.length : 0, requestedSources.length);
+    // resolveMapping 제거됨 — JSON 파일 의존성 없이 resolveSoundPath(code, bucketPath) 로 직접 경로 결정
+    const tryPlayWithRetry = useCallback(async (a, attempts = 3, delayMs = 50) => {
+        for (let i = 0; i < attempts; i++) {
+            try {
+                await a.play();
+                return true;
+            }
+            catch (err) {
+                const errName = err instanceof Error ? err.name : (typeof err === 'object' && err && 'name' in err ? err.name : undefined);
+                if (errName === 'AbortError') {
+                    await new Promise((res) => setTimeout(res, delayMs));
+                    continue;
+                }
+                if (import.meta.env?.DEV)
+                    console.warn('TrainingStepAudioPlayer: play failed (non-abort)', err);
+                // 브라우저 자동재생 정책 등으로 play()가 최종 거부되면 호출부 대부분이 반환값을
+                // 그냥 버려 사용자는 아무 반응 없이 조용히 실패한 것처럼 보인다 — fetch 실패와
+                // 동일한 Toast 채널로 재생 실패도 알린다.
+                try {
+                    setNoticeMessage(t('training.audioFetchError', '사운드 소스를 가져오지 못했습니다.'));
+                }
+                catch (_) { }
+                return false;
+            }
+        }
+        if (import.meta.env?.DEV)
+            console.warn("TrainingStepAudioPlayer: play failed after retries", { src: a.src });
+        try {
+            setNoticeMessage(t('training.audioFetchError', '사운드 소스를 가져오지 못했습니다.'));
+        }
+        catch (_) { }
+        return false;
+    }, [t]);
+    const attachAudioListeners = useCallback(() => {
+        const a = audioRef.current;
+        if (!a)
+            return;
+        const onPlay = () => {
+            setPlaybackState("playing");
+            setStateLocal("playMode");
+            set구간표시(true);
+            startTicker();
+            // 미터: 재생 제스처 시점에 context resume 후 메인 analyser 등록(무음 방지)
+            try {
+                resumeAudioMeter();
+                registerAnalyserRef.current?.('main', getElementAnalyser(a));
+            }
+            catch (e) { }
+            // 소음 동기 시작
+            const ns = noiseSettingsRef.current;
+            if (ns?.enabled && (ns?.level ?? 0) > 0) {
+                fadeInNoise(ns.level / 9);
+            }
+        };
+        const onPause = () => {
+            // 두 가지 경우 무시:
+            // 1. 오디오 자연 종료: 브라우저는 ended 이전에 pause 를 발생시킵니다. a.ended 로 감지합니다.
+            // 2. handleEnd 가 a.pause() 를 호출한 이후: completedByEndRef 가 true 입니다.
+            if (shouldIgnorePause({ ended: !!a?.ended, completedByEnd: completedByEndRef.current }))
+                return;
+            setPlaybackState("paused");
+            stopTicker();
+            // 소음 동기 일시정지
+            fadeOutNoise();
+        };
+        const onEnded = () => {
+            try {
+                const sref = sourcesRef.current;
+                const next = nextTrackIndex(sref, currentIndexRef.current);
+                if (next !== null) {
+                    currentIndexRef.current = next;
+                    setCurrentIndex(next);
+                    set구간표시(true);
+                    const nextSrc = sref?.[next] && sref[next].src;
+                    if (nextSrc && a) {
+                        a.src = nextSrc;
+                        a.load();
+                        tryPlayWithRetry(a).catch(() => { });
+                        return;
+                    }
+                }
+            }
+            catch (e) { }
+            setPlaybackState("stopped");
+            setProgress(1);
+            try {
+                if (a)
+                    try {
+                        a.currentTime = 0;
+                    }
+                    catch (e) { }
+            }
+            catch (e) { }
+            stopTicker();
+            set구간표시(false);
+            // 마지막 트랙 종료 시 소음 정지
+            fadeOutNoise();
+            // Route through handleEnd (via ref) so stateLocal transitions to 'active' before onDone fires.
+            // Direct onDoneRef.current(true) would fire while stateLocal === 'playMode'.
+            try {
+                if (!disabledRef.current && handleEndRef.current)
+                    handleEndRef.current();
+            }
+            catch (e) { }
+        };
+        a.addEventListener("play", onPlay);
+        a.addEventListener("pause", onPause);
+        a.addEventListener("ended", onEnded);
+        return () => {
+            try {
+                a.removeEventListener("play", onPlay);
+                a.removeEventListener("pause", onPause);
+                a.removeEventListener("ended", onEnded);
+                stopTicker();
+            }
+            catch (e) { }
+        };
+    }, [fadeInNoise, fadeOutNoise, tryPlayWithRetry, noiseSettingsRef, startTicker, stopTicker]);
+    useEffect(() => {
+        const cleanup = attachAudioListeners();
+        return cleanup;
+    }, [attachAudioListeners]);
+    useEffect(() => {
+        disabledRef.current = disabled;
+    }, [disabled]);
+    useEffect(() => {
+        onDoneRef.current = onDone;
+    }, [onDone]);
+    useEffect(() => {
+        /* 비활성이면 그리지 않는다 — 예전에는 `stateLocal` 이 'disabled' 를 담고 있어
+           이 한 줄로 걸러졌다. 이제 prop 을 직접 본다. */
+        if (disabled || stateLocal !== 'active')
+            return;
+        const p = triPathRef.current;
+        if (!p)
+            return;
+        let styleEl = null;
+        const raf = requestAnimationFrame(() => {
+            try {
+                const L = p.getTotalLength();
+                if (!L)
+                    return;
+                const gap = L * 0.20;
+                p.style.strokeDasharray = `${L - gap} ${gap}`;
+                const id = 'triFlow_' + Math.random().toString(36).slice(2);
+                styleEl = document.createElement('style');
+                styleEl.textContent = `@keyframes ${id}{from{stroke-dashoffset:0}to{stroke-dashoffset:-${L}}}`;
+                document.head.appendChild(styleEl);
+                p.style.animation = `${id} 2.4s linear infinite`;
+            }
+            catch (e) { }
+        });
+        return () => { cancelAnimationFrame(raf); styleEl?.remove(); };
+    }, [stateLocal, disabled]);
+    useEffect(() => { sourcesRef.current = sources; }, [sources]);
+    useEffect(() => { currentIndexRef.current = currentIndex; }, [currentIndex]);
+    useEffect(() => {
+        const btnsEl = btnsRef.current;
+        const srcWrap = sourceButtonsRef.current;
+        if (!btnsEl || !srcWrap)
+            return;
+        let ro = null;
+        const MIN_BUTTON = 32;
+        const MAX_BUTTON = 60;
+        const calc = () => {
+            try {
+                const children = Array.from(btnsEl.querySelectorAll(':scope > .button'));
+                let occupied = 0;
+                children.forEach((el) => {
+                    if (el === srcWrap)
+                        return;
+                    const r = el.getBoundingClientRect();
+                    occupied += r.width;
+                });
+                const total = btnsEl.getBoundingClientRect().width;
+                const available = Math.max(0, Math.floor(total - occupied - 8));
+                const count = sourceButtonCount;
+                if (!count || available <= 0) {
+                    Array.from(srcWrap.children).forEach((c) => { try {
+                        c.style.width = '';
+                    }
+                    catch { } });
+                    return;
+                }
+                let per = Math.floor(available / count);
+                if (per > MAX_BUTTON)
+                    per = MAX_BUTTON;
+                if (per < MIN_BUTTON)
+                    per = Math.max(MIN_BUTTON, Math.floor(available / count));
+                const btnEls = Array.from(srcWrap.querySelectorAll('.button'));
+                btnEls.forEach((b) => { try {
+                    b.style.width = `${per}px`;
+                }
+                catch (e) { } });
+            }
+            catch (e) { }
+        };
+        const rafId = requestAnimationFrame(calc);
+        try {
+            ro = new ResizeObserver(() => { requestAnimationFrame(calc); });
+            ro.observe(btnsEl);
+            ro.observe(srcWrap);
+            window.addEventListener('resize', calc);
+        }
+        catch (e) { }
+        return () => {
+            try {
+                cancelAnimationFrame(rafId);
+            }
+            catch (e) { }
+            try {
+                if (ro) {
+                    ro.disconnect();
+                    ro = null;
+                }
+            }
+            catch (e) { }
+            try {
+                window.removeEventListener('resize', calc);
+            }
+            catch (e) { }
+        };
+    }, [sources, segments, sourceButtonCount]);
+    /* 남은 타이머 정리. 프레임 사슬은 여기서 안 건드린다 — useProgressTicker 가 스스로
+       떠날 때 멈춘다. 두 곳에서 멈추면 "어디서 멈추는가"가 다시 흩어진다. */
+    useEffect(() => {
+        return () => {
+            try {
+                if (noticeResetRef.current) {
+                    clearTimeout(noticeResetRef.current);
+                    noticeResetRef.current = null;
+                }
+                if (fillOutResetRef.current) {
+                    clearTimeout(fillOutResetRef.current);
+                    fillOutResetRef.current = null;
+                }
+            }
+            catch (e) { }
+        };
+    }, []);
+    /**
+     * TTS URL 리졸버가 반환한 직접 URL을 오디오 소스로 준비합니다.
+     * soundSrc 없이 ttsText → URL 변환 후 일반 오디오 플로우로 진입할 때 사용합니다.
+     */
+    /**
+     * 걸어 놓은 소리를 실제로 재생하기까지 — 한 벌뿐이다.
+     *
+     * 한 소리짜리 경로와 여러 소리짜리 경로가 같은 스무 줄을 각자 들고 있었다. 차례가
+     * 중요하다: **스피너는 파형까지 준비된 뒤에 끈다.** 먼저 끄면 스피너가 사라진 자리에
+     * 파형이 뒤늦게 나타나는 빈 화면 구간이 생긴다.
+     */
+    /**
+     * 새로 만든 소스 목록을 화면과 ref 에 한꺼번에 앉힌다.
+     *
+     * 세 갈래(단일 TTS·복수 TTS·저장소 소스)가 이 네 줄을 각자 들고 있었고 **둘씩 어긋나
+     * 있었다.** 하나는 구간 길이를 `|| 0` 없이 넘겼고(길이를 모르면 undefined 가 흘렀다),
+     * 다른 하나는 `sourcesRef` 를 즉시 안 채워 다음 렌더까지 옛 목록을 들고 있었다
+     * (재생 중 트랙 번호를 그 ref 로 읽는다). 한 벌로 모아 그 두 어긋남을 없앤다.
+     */
+    const applySources = (finalSources, total) => {
+        setSources(finalSources);
+        setTotalDuration(total);
+        markWaveNotReady();
+        setSegments(buildSegments(finalSources));
+        /* 즉시 채운다 — 아래에서 이어지는 재생이 다음 렌더를 기다리지 않고 이 값을 읽는다. */
+        sourcesRef.current = finalSources;
+    };
+    const loadAndPlay = async (a, src) => {
+        markCompletedByEnd(false);
+        fetchingRef.current = false;
+        a.src = src;
+        a.load();
+        await waitForCanPlay(a);
+        await waitForWaveReady();
+        setIsFetchingUrl(false);
+        await tryPlayWithRetry(a);
+        setStateLocal('playMode');
+        setCurrentIndex(0);
+        set구간표시(true);
+    };
+    const fetchAndPrepareFromTTSUrl = async (ttsUrl, playAfterLoad = false) => {
+        const a = audioRef.current;
+        setIsFetchingUrl(true);
+        setFetchDebugStatus('measuring_duration');
+        try {
+            // 오디오 길이 측정 — 에러 시 reject 하여 outer catch 로 전달합니다. (10초 — 서버 응답 대기)
+            const dur = await measureAudioDuration(ttsUrl, { timeoutMs: 10000, rejectOnError: true });
+            const finalSources = [{ src: ttsUrl, objectUrl: null, duration: dur }];
+            applySources(finalSources, dur);
+            setFetchDebugStatus('ready');
+            if (playAfterLoad && a)
+                await loadAndPlay(a, ttsUrl);
+        }
+        finally {
+            fetchingRef.current = false;
+            setIsFetchingUrl(false);
+        }
+    };
+    /**
+     * 여러 TTS URL을 한 번에 로드하여 multi-source 재생 (1, 2, ...)
+     */
+    const fetchAndPrepareFromMultipleTTSUrls = async (ttsUrls, playAfterLoad = false) => {
+        const a = audioRef.current;
+        setIsFetchingUrl(true);
+        setFetchDebugStatus('measuring_duration');
+        try {
+            // 각 URL의 duration을 병렬로 측정 (실패한 URL은 0초로 계속)
+            const durations = await Promise.all(ttsUrls.map(url => measureAudioDuration(url, { timeoutMs: 10000 })));
+            const finalSources = ttsUrls.map((src, i) => ({ src, objectUrl: null, duration: durations[i] || 0 }));
+            applySources(finalSources, totalDurationOf(finalSources));
+            setFetchDebugStatus('ready');
+            if (playAfterLoad && a && finalSources.length > 0)
+                await loadAndPlay(a, finalSources[0].src);
+        }
+        finally {
+            fetchingRef.current = false;
+            setIsFetchingUrl(false);
+        }
+    };
+    const fetchAndPrepare = async (playAfterLoad = false, showSpinner = true) => {
+        const a = audioRef.current;
+        const candidates = soundSrc ? (Array.isArray(soundSrc) ? soundSrc : [soundSrc]) : [];
+        if (!candidates || candidates.length === 0 || !candidates.some(Boolean))
+            return;
+        if (fetchingRef.current)
+            return;
+        fetchingRef.current = true;
+        if (showSpinner)
+            setIsFetchingUrl(true);
+        setFetchDebugStatus('resolving');
+        try {
+            // ── 1단계: 소리 지정을 한 모양으로 편다 (순수 계산 — audioPlaybackRules) ──
+            const built = normalizeSources(soundSrc, bucketPath, resolveSoundPath);
+            // ── 2단계: 경로 → URL 취득 (resolveUrl → 실패 시 download fallback) ──────
+            const finalSources = [];
+            let total = 0;
+            for (const b of built) {
+                let srcUrl = b.src ?? null;
+                let objUrl = null;
+                if (!srcUrl && b.resolvedPath) {
+                    // resolveUrl 로 스트리밍 URL 취득 시도 (signed URL 또는 public URL)
+                    try {
+                        setFetchDebugStatus('getting_signed_url');
+                        srcUrl = await getSignedOrPublicUrl(b.resolvedPath);
+                    }
+                    catch (e) {
+                        srcUrl = null;
+                    }
+                    // resolveUrl 실패 시 blob 다운로드로 폴백
+                    if (!srcUrl) {
+                        try {
+                            setFetchDebugStatus('downloading');
+                            const blob = await downloadSound(b.resolvedPath);
+                            if (blob) {
+                                const blobObj = blob instanceof Blob ? blob : new Blob([blob]);
+                                objUrl = objectUrls.track(URL.createObjectURL(blobObj));
+                                srcUrl = objUrl;
+                            }
+                        }
+                        catch (e) {
+                            setFetchDebugStatus('error');
+                            try {
+                                setNoticeMessage(t('training.audioFetchError', '사운드 소스를 가져오지 못했습니다.'));
+                                setStateLocal('active');
+                            }
+                            catch (_) { }
+                        }
+                    }
+                }
+                if (!srcUrl)
+                    continue;
+                // 오디오 길이 측정 (네트워크 무응답 대비 3초 타임아웃, 실패 시 0초로 계속)
+                let dur = 0;
+                try {
+                    setFetchDebugStatus('measuring_duration');
+                    dur = await measureAudioDuration(srcUrl, { timeoutMs: 3000 });
+                }
+                catch (_) {
+                    dur = 0;
+                }
+                total += dur || 0;
+                finalSources.push({ ...b, src: srcUrl, objectUrl: objUrl, duration: dur });
+            }
+            applySources(finalSources, total);
+            if (finalSources.length > 0 && playAfterLoad && a) {
+                const first = finalSources[0];
+                markCompletedByEnd(false);
+                try {
+                    // 교체된 이전 소스들의 blob 주소 회수 — 새 소스 목록에 남은 것만 유지
+                    objectUrls.keepOnly(finalSources.map(f => f.objectUrl));
+                }
+                catch (_) { }
+                setFetchDebugStatus('ready');
+                fetchingRef.current = false;
+                if (first.src && a) {
+                    try {
+                        a.src = first.src;
+                        a.load();
+                        // canplay 이벤트 대기 — load() 직후 play() 호출 시 발생하는 AbortError 방지.
+                        // 짧은 파일도 canplay가 빠르게 발생하므로 재생 지연 없음.
+                        // (같은 기다림이 이 파일 위쪽에 waitForCanPlay 로 이미 있었다. 여기에 한 벌
+                        //  더 적혀 있어, 기본 대기 시간을 고치면 한쪽만 바뀌는 자리였다.)
+                        await waitForCanPlay(a);
+                        await waitForWaveReady();
+                        // 스피너는 waveform까지 준비된 뒤(재생 직전)에 해제 — 짧은 단어 파일의 경우
+                        // 재생 중/후까지 스피너가 보이는 현상도, 스피너가 사라진 뒤 waveform이
+                        // 뒤늦게 나타나는 빈 화면 구간도 생기지 않도록 한다.
+                        if (showSpinner)
+                            setIsFetchingUrl(false);
+                        if (a)
+                            await tryPlayWithRetry(a);
+                    }
+                    catch (e) {
+                        if (showSpinner)
+                            setIsFetchingUrl(false);
+                    }
+                }
+                else {
+                    if (showSpinner)
+                        setIsFetchingUrl(false);
+                }
+                setStateLocal('playMode');
+                setCurrentIndex(0);
+                set구간표시(true);
+            }
+        }
+        finally {
+            fetchingRef.current = false;
+            if (showSpinner)
+                setIsFetchingUrl(false);
+            setFetchDebugStatus((prev) => (prev === 'ready' ? 'ready' : 'idle'));
+        }
+    };
+    const handleToggle = async () => {
+        const a = audioRef.current;
+        if (!a && !ttsMode)
+            return;
+        // TTS mode: TTS URL 리졸버가 있으면 오디오 파일로 변환(waveform 지원),
+        //           없으면 기존 speechSynthesis fallback
+        if (ttsMode) {
+            const synth = window.speechSynthesis;
+            if (stateLocal === 'active') {
+                const resolver = getTTSUrlResolver();
+                // ttsText가 배열인 경우: 모든 텍스트의 URL을 미리 resolve해서 multi-source 재생
+                const ttsArr = Array.isArray(ttsText) ? ttsText.filter(Boolean) : (ttsText ? [ttsText] : []);
+                if (resolver && ttsArr.length > 0) {
+                    /* 리졸버(문장 TTS는 서버 합성까지 기다린다)가 느릴 수 있어 스피너를 먼저 켠다 —
+                       fetchAndPrepare 가 켜기 전 합성 대기 구간에 아무 표시가 없던 문제.
+          
+                       한 문장이냐 여러 문장이냐로 아래 두 줄만 갈리는데, 한때 이 스무 줄 전체가
+                       두 벌로 있었다. 감싸개는 한 벌이면 된다. */
+                    setStateLocal('load');
+                    setIsFetchingUrl(true);
+                    setFetchDebugStatus('resolving');
+                    fetchingRef.current = true;
+                    try {
+                        const urls = await Promise.all(ttsArr.map(t => Promise.resolve(resolver(t))));
+                        if (urls.length > 1)
+                            await fetchAndPrepareFromMultipleTTSUrls(urls, true);
+                        else
+                            await fetchAndPrepareFromTTSUrl(urls[0], true);
+                    }
+                    catch (e) {
+                        // 리졸버·길이 측정이 실패하면 브라우저 음성 합성으로 물러선다 — 소리는 나야 한다
+                        fetchingRef.current = false;
+                        setIsFetchingUrl(false);
+                        setStateLocal('active');
+                        startTTS(ttsArr[0] || undefined);
+                    }
+                    return;
+                }
+                // 리졸버 미설정 → 기존 speechSynthesis
+                startTTS(ttsArr[0] || undefined);
+                return;
+            }
+            // playMode 중 일시정지/재개
+            if (stateLocal === 'playMode') {
+                // 오디오 파일로 변환된 경우 audioRef로 제어
+                if (a) {
+                    if (a.paused) {
+                        // 전부 들은 뒤 다시 재생 — 마지막 트랙 이어듣기가 아니라 처음(1번)부터
+                        // 다시 시작한다(일반 오디오 분기와 동일한 처리).
+                        if (completedByEndRef.current) {
+                            await handleReplay();
+                            return;
+                        }
+                        await tryPlayWithRetry(a);
+                        setPlaybackState('playing');
+                    }
+                    else {
+                        a.pause();
+                        setPlaybackState('paused');
+                    }
+                    return;
+                }
+                // speechSynthesis fallback
+                try {
+                    if (synth && synth.paused) {
+                        try {
+                            synth.resume();
+                            setPlaybackState('playing');
+                        }
+                        catch (e) { }
+                    }
+                    else {
+                        try {
+                            synth.pause();
+                            setPlaybackState('paused');
+                        }
+                        catch (e) { }
+                    }
+                }
+                catch (e) { }
+            }
+            return;
+        }
+        if (stateLocal === "active") {
+            /* 비활성인 채로 소스가 이미 준비돼 있으면 다시 받지 않고 그것부터 튼다.
+               (예전에는 `stateLocal === 'disabled'` 로 판정했다 — 같은 뜻이다.) */
+            if (disabled && Array.isArray(sourcesRef.current) && sourcesRef.current.length > 0) {
+                const first = sourcesRef.current[0];
+                try {
+                    if (first.src && a) {
+                        try {
+                            a.src = first.src;
+                            a.load();
+                            if (a)
+                                await tryPlayWithRetry(a);
+                        }
+                        catch (e) { }
+                    }
+                    setStateLocal('playMode');
+                    setCurrentIndex(0);
+                    set구간표시(true);
+                    return;
+                }
+                catch (e) { }
+            }
+            setStateLocal("load");
+            await fetchAndPrepare(true);
+            return;
+        }
+        if (stateLocal === "load")
+            return;
+        if (stateLocal === "playMode" || stateLocal === "active") {
+            try {
+                if (a && a.paused) {
+                    if (completedByEndRef.current) {
+                        await handleReplay();
+                        return;
+                    }
+                    if (a)
+                        await tryPlayWithRetry(a);
+                    setPlaybackState("playing");
+                }
+                else {
+                    if (a) {
+                        a.pause();
+                        setPlaybackState("paused");
+                    }
+                }
+            }
+            catch (e) {
+                const errName = e instanceof Error ? e.name : (typeof e === 'object' && e && 'name' in e ? e.name : undefined);
+                if (errName !== 'AbortError' && import.meta.env?.DEV) {
+                    console.warn('TrainingStepAudioPlayer: toggle failed', e);
+                }
+            }
+        }
+    };
+    const handleReplay = async () => {
+        const a = audioRef.current;
+        if (!a)
+            return;
+        try {
+            // 멀티소스: 전부 들은 뒤(또는 재생 도중) 다시 재생하면 마지막 트랙이 아니라
+            // 맨 처음(1번) 소스부터 다시 시작한다 — src 교체·waveform 대기·재생을 모두
+            // 처리하는 handleJumpTo에 위임.
+            const sref = sourcesRef.current;
+            if (Array.isArray(sref) && sref.length > 1) {
+                await handleJumpTo(0);
+                return;
+            }
+            markCompletedByEnd(false);
+            try {
+                a.currentTime = 0;
+            }
+            catch (e) { }
+            if (a)
+                await tryPlayWithRetry(a);
+            setPlaybackState('playing');
+            setStateLocal('playMode');
+        }
+        catch (e) { }
+    };
+    const handleStop = () => {
+        if (ttsMode) {
+            stopTTS();
+            return;
+        }
+        const a = audioRef.current;
+        try {
+            if (a) {
+                try {
+                    a.pause();
+                }
+                catch (e) { }
+                try {
+                    a.currentTime = 0;
+                }
+                catch (e) { }
+            }
+        }
+        catch (e) { }
+        fadeOutNoise();
+        setPlaybackState('stopped');
+        setStateLocal('active');
+        setProgress(0);
+        set구간표시(false);
+    };
+    /**
+     * 트랙을 갈아 끼우고 재생한다 — 이전·다음·번호 단추가 모두 이 한 벌을 쓴다.
+     *
+     * 세 벌이 따로 있었고 **`handleJumpTo` 만 `completedByEnd` 를 되돌렸다.** 나머지 둘로
+     * 트랙을 옮기면, 앞 문항을 끝까지 들은 뒤에는 그 값이 참인 채로 남아
+     *
+     *   · 진행 마커가 드러나지 않고(`fillVisibleFlag` 가 이 값을 본다)
+     *   · `pause` 이벤트가 통째로 무시된다(`shouldIgnorePause`)
+     *
+     * 새 트랙이 재생되는데 화면은 아무 표시도 안 하는 상태가 된다. 소스가 여럿인 훈련에서만
+     * 나므로 화면에서 재현하지는 못했고(2026-08-28), 구조로 없앤다.
+     *
+     * 이동 토큰은 연타 방지다 — 파형을 기다리는 사이 더 최신 이동이 오면 이 호출은 물러선다.
+     */
+    const goToTrack = async (index, { sameSegment = false } = {}) => {
+        const myToken = ++jumpTokenRef.current;
+        const a = audioRef.current;
+        const sref = sourcesRef.current;
+        const src = sref?.[index]?.src;
+        try {
+            markCompletedByEnd(false);
+            setCurrentIndex(index);
+            set구간표시(true); // 재생이 시작되기 전에도 밝힌다 — 예전엔 효과가 해 주던 일
+            currentIndexRef.current = index;
+            if (!src || !a)
+                return;
+            // 같은 구간을 다시 트는 것이면 파형은 그대로다 — 괜히 기다리지 않는다.
+            if (!sameSegment)
+                markWaveNotReady();
+            a.src = src;
+            a.load();
+            if (!sameSegment)
+                await waitForWaveReady();
+            if (myToken !== jumpTokenRef.current)
+                return;
+            await tryPlayWithRetry(a);
+            if (myToken !== jumpTokenRef.current)
+                return;
+            setPlaybackState('playing');
+            setStateLocal('playMode');
+        }
+        catch (e) {
+            if (import.meta.env?.DEV)
+                console.warn('TrainingStepAudioPlayer: 트랙 이동 실패', e);
+        }
+    };
+    const handlePrev = async () => {
+        const sref = sourcesRef.current;
+        const idx = currentIndexRef.current || 0;
+        /* 첫 트랙에서 '이전'은 처음으로 되감기다 — 그건 '다시듣기'와 같은 일이라 그쪽에 맡긴다.
+         *
+         * 한때 여기에 되감기를 따로 적어 뒀는데 `markCompletedByEnd(false)` 가 빠져 있었다.
+         * 그래서 **끝까지 들은 뒤 '이전'을 누르면 소리는 다시 나는데 진행 마커가 안 나왔다**
+         * (마커의 표시 여부가 그 값을 본다). 화면에서 재현해 확인했다(2026-08-28). */
+        if (!sref || idx <= 0) {
+            await handleReplay();
+            return;
+        }
+        await goToTrack(idx - 1);
+    };
+    const handleNext = async () => {
+        const sref = sourcesRef.current;
+        const idx = currentIndexRef.current || 0;
+        // 마지막 트랙에서 '다음'은 정지다
+        if (!sref || idx >= sref.length - 1) {
+            handleStop();
+            return;
+        }
+        await goToTrack(idx + 1);
+    };
+    const handleEnd = () => {
+        // Guard: prevent double invocation (e.g. ✓ button + natural onEnded firing at same time)
+        if (completedByEndRef.current)
+            return;
+        const holdDelay = 200;
+        const outDelay = 340;
+        markCompletedByEnd(true);
+        try {
+            setProgress(1);
+        }
+        catch (e) { }
+        settleTicker(1);
+        try {
+            setFillCompletionPhase('hold');
+        }
+        catch (e) { }
+        try {
+            const a = audioRef.current;
+            // ttsMode가 true여도 fetchAndPrepareFromTTSUrl로 실제 오디오 파일을 재생한 경우
+            // (a.src가 설정된 경우)에는 일반 오디오처럼 처리해야 합니다.
+            // stopTTS()를 호출하면 즉시 stateLocal='active'로 전환되어 fill 애니메이션이 건너뜁니다.
+            const hasTTSAudioSrc = ttsMode && !!(a?.src);
+            if (!ttsMode || hasTTSAudioSrc) {
+                if (a) {
+                    a.pause();
+                    try {
+                        a.currentTime = 0;
+                    }
+                    catch (e) { }
+                }
+            }
+            else {
+                stopTTS(); // pure speechSynthesis path
+            }
+            fadeOutNoise();
+        }
+        catch (e) { }
+        try {
+            setPlaybackState('stopped');
+        }
+        catch (e) { }
+        set구간표시(false);
+        if (disabledRef.current)
+            return;
+        try {
+            if (fillOutResetRef.current) {
+                clearTimeout(fillOutResetRef.current);
+                fillOutResetRef.current = null;
+            }
+            fillOutResetRef.current = setTimeout(() => {
+                try {
+                    setFillCompletionPhase('out');
+                }
+                catch (e) { }
+                fillOutResetRef.current = setTimeout(() => {
+                    try {
+                        if (typeof onDoneRef.current === 'function')
+                            onDoneRef.current(true);
+                    }
+                    catch (e) { }
+                    try {
+                        setFillCompletionPhase('idle');
+                    }
+                    catch (e) { }
+                    fillOutResetRef.current = null;
+                }, outDelay);
+            }, holdDelay);
+        }
+        catch (e) { }
+    };
+    // Keep handleEndRef current so the stale onEnded closure (registered once on mount) can
+    // always reach the latest handleEnd — avoids calling onDone while stateLocal === 'playMode'.
+    /* 위 registerAnalyserRef 와 같은 이유로 렌더가 아니라 효과에서 갱신한다. 이 값을 읽는
+       곳은 <audio> 의 'ended' 핸들러 하나뿐이고, 그 이벤트는 커밋 중에 발화하지 않는다. */
+    useEffect(() => { handleEndRef.current = handleEnd; });
+    const handleClearNotice = useCallback(() => setNoticeMessage(''), []);
+    const handleJumpTo = async (index) => {
+        const sref = sourcesRef.current || [];
+        if (!sref[index])
+            return;
+        await goToTrack(index, { sameSegment: index === currentIndexRef.current });
+    };
+    const displayedPlaying = playbackState === "playing";
+    const currentSegments = useMemo(() => {
+        if (!segments || segments.length <= 1)
+            return segments;
+        const seg = segments[currentIndex];
+        return seg ? [seg] : segments;
+    }, [segments, currentIndex]);
+    const isDisabled = disabled === true;
+    useEffect(() => {
+        try {
+            const a = audioRef.current;
+            if (a && typeof a.playbackRate === 'number')
+                a.playbackRate = playbackRate || 1.0;
+        }
+        catch (e) { }
+    }, [playbackRate]);
+    // 문장(메인) 볼륨 반영
+    useEffect(() => {
+        try {
+            const a = audioRef.current;
+            if (a)
+                a.volume = Math.max(0, Math.min(1, mainVolume));
+        }
+        catch (e) { }
+    }, [mainVolume]);
+    // fill (진행 마커) 클래스 및 초기 위치 계산 — RAF 루프에서 .style.left를 직접 갱신합니다.
+    const isFillHolding = fillCompletionPhase === 'hold';
+    const isFillOutAnimating = fillCompletionPhase === 'out';
+    const fillVisibleFlag = ((stateLocal === "playMode" && !isFetchingUrl) && !completedByEnd) || isFillHolding || isFillOutAnimating;
+    const fillExpandedFlag = playbackState !== "stopped" || isFillHolding || isFillOutAnimating;
+    const fillPausedFlag = playbackState === "paused";
+    const fillLeftPercent = Math.max(0, Math.min(100, (progress || 0) * 100));
+    const fillClass = cx('audio-player__fill', fillVisibleFlag ? 'is-visible' : '', fillExpandedFlag ? 'is-expanded' : '', fillPausedFlag ? 'is-paused' : '', isFillOutAnimating ? 'is-out' : '');
+    return (_jsxs("div", { className: `audio-player ${isDisabled ? 'is-disabled' : ''}${className ? ` ${className}` : ''}`, role: "group", "aria-label": typeof label === 'string' ? label : undefined, children: [_jsxs("div", { className: `audio-player__panel ${displayedPlaying ? "is-playing" : ""} ${isFetchingUrl ? "is-loading" : ""} ${stateLocal !== "default" ? "is-revealed" : ""}`, children: [isFetchingUrl ? (_jsxs("div", { className: "audio-player__loading", role: "status", "aria-live": "polite", children: [_jsx("span", { className: "audio-player__loading-spinner", "aria-hidden": "true" }), _jsx("span", { className: "audio-player__loading-text", children: STATUS_MESSAGES[fetchDebugStatus] })] })) : null, stateLocal === "active" ? (_jsx("button", { className: "audio-player__button", type: "button", onClick: () => { hideListenTip(); handleToggle(); }, "aria-label": typeof label === 'string' ? label : t('training.listen', '듣기'), onMouseEnter: showListenTip, onMouseLeave: hideListenTip, 
+                        // 키보드로 이 버튼에 오면 마우스와 동일하게 안내를 띄운다
+                        onFocus: showListenTip, onBlur: hideListenTip, children: _jsx("span", { ref: listenBtnRef, className: "audio-player__button-triangle-wrap", children: _jsx("svg", { className: "audio-player__button-triangle", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { ref: triPathRef, d: "M13.2 7.7 L16.5 9.85 Q20.2 12 16.5 14.15 L10 18.3 Q7 19.7 7 16.3 L7 7.7 Q7 4.3 10 5.7 L13.2 7.7" }) }) }) })) : null, listenBtnRect && (_jsx(InfoTooltip, { anchorRect: listenBtnRect, text: typeof label === 'string' && label ? label : t('training.listenLabel', '문장 듣기'), offset: 8 })), _jsxs("div", { className: `audio-player__play ${stateLocal === "playMode" || displayedPlaying ? "is-visible" : ""}`, children: [_jsxs("div", { ref: btnsRef, className: "audio-player__buttons", children: [_jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "skip-back", onClick: handlePrev, ariaLabel: t('training.prev', '이전'), width: "60px", variant: "transparent-white", "aria-hidden": "true", tabIndex: -1, disabled: stateLocal !== 'playMode' }), _jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: displayedPlaying ? "pause" : "play", onClick: handleToggle, ariaLabel: t('common.playPause', '재생 / 멈춤'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' }), _jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "square", onClick: handleStop, ariaLabel: t('training.stop', '정지'), width: "60px", variant: "transparent-white", "aria-hidden": "true", tabIndex: -1, disabled: stateLocal !== 'playMode' }), sourceButtonCount > 1 ? (_jsx("div", { ref: sourceButtonsRef, className: "audio-player__source-buttons", children: Array.from({ length: sourceButtonCount }).map((_, idx) => (_jsx(Button, { size: 32, type: "dot", shape: "pill", useBorder: false, label: String(idx + 1), onClick: () => { try {
+                                                handleJumpTo(idx);
+                                            }
+                                            catch (e) { } }, ariaLabel: t('training.sourcePlay', { n: idx + 1 }), variant: "transparent-white", selected: 구간표시 && currentIndex === idx, disabled: stateLocal !== 'playMode' || !(Array.isArray(sources) && sources[idx]), showTooltipInfo: true }, idx))) })) : null, (!Array.isArray(sources) || sources.length <= 1) ? (_jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "repeat", onClick: handleReplay, ariaLabel: t('common.replay', '다시듣기'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' })) : null, _jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "skip-forward", onClick: handleNext, ariaLabel: t('training.next', '다음'), width: "60px", variant: "transparent-white", "aria-hidden": true, tabIndex: -1, disabled: stateLocal !== 'playMode' }), _jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "check", onClick: handleEnd, ariaLabel: t('common.done', '완료'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' })] }), _jsxs("div", { className: "audio-player__slider", children: [_jsx("div", { className: fillClass, ref: fillRef, style: { left: `${fillLeftPercent}%` }, "aria-hidden": "true" }), (showSoundWaveForm || showNoiseWaveForm) && (_jsx(WaveForm, { segments: currentSegments, progress: progress, totalDuration: totalDuration, onSegmentClick: handleJumpTo, waveProgressRef: waveProgressRef, showSoundWaveForm: showSoundWaveForm, noiseSrc: (showNoiseWaveForm && noisePlayer?.settings.enabled && (noisePlayer?.settings.level ?? 0) > 0) ? activeNoiseUrl : null, noiseLevel: noisePlayer?.settings.level ?? 0, noiseSpeed: noisePlayer?.settings.speed ?? 1, mainVolume: mainVolume, onReadyChange: handleWaveReadyChange }))] })] }), _jsx("audio", { ref: audioRef, crossOrigin: "anonymous", preload: "auto" })] }), !showSoundWaveForm && (_jsxs("p", { className: "audio-player__no-waveform caption-1", children: [_jsx(Icon, { icon: "triangle-alert", size: 14 }), t('training.noSoundWaveform', '소리 비교 문제는 웨이브폼을 표현하지 않습니다.')] })), _jsx(Toast, { message: noticeMessage, position: noticePosition, onClose: handleClearNotice })] }));
+}