@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,799 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, useCallback, cloneElement, isValidElement, Children } from "react";
+import { PAGE_POPUP_CLOSE_MS } from './pagePopupTiming';
+import { useTranslation } from 'react-i18next';
+import { createPortal } from "react-dom";
+import Toast from '../Toast';
+import Button from '../Button';
+import './TrainingPagePopup.css';
+import TrainingPagePopupBottom from './TrainingPagePopupBottom';
+import TrainingPagePopupTitle from './TrainingPagePopupTitle';
+import TrainingStepConfirm from './TrainingStepConfirm';
+import TrainingStepConfirmWithText from './TrainingStepConfirmWithText';
+import TrainingStepListen from './TrainingStepListen';
+import TrainingStepOrderList from './TrainingStepOrderList';
+import { getPayloadTimestamp } from './trainingPopupUtils';
+import { TrainingPagePopupContext } from './TrainingPagePopupContext';
+import { NoisePlayerContext, DEFAULT_NOISE_SETTINGS } from './NoisePlayerContext';
+import { lockBodyScrollWithPadding } from '../../hooks/bodyScrollLock';
+import { Page, ListenStep, ConfirmStep, ConfirmWithTextStep, OrderListStep, CardStep, CardOrderStep } from './TrainingStepComponents';
+import TrainingResultPopup from '../Popup/TrainingResultPopup';
+import useTrainingSessionLog from '../../hooks/useTrainingSessionLog';
+import { logTrainingCompletion } from '../../utils/trainingLogger';
+import { toItemResults } from '../../utils/trainingItemResults';
+import { loadNoiseSettings, saveNoiseSettings } from '../../utils/noiseSettingsStore';
+// 문장 4종은 각 PagePopup 래퍼에서 useTrainingSessionLog로 이미 기록 → 베이스에서 중복 방지
+const SENTENCE_TIME_LOGGED_TYPES = new Set(['LISTEN_IN_NOISE', 'SHORT_STORY', 'LONG_STORY', 'ORDERING_SENTENCE']);
+// renderResultPopup 미지정 시 기본 결과 팝업 — 모든 훈련 타입 공통 폴백
+const defaultRenderResult = (p) => _jsx(TrainingResultPopup, { score: p.score, contextsLength: p.contextsLength, results: p.results, onReplay: p.onReplay, onClose: p.onClose });
+import { getScenarioPageId, getScenarioStepKey, createScenarioFlowState, resolveScenarioStepProps, } from './trainingScenario';
+const FOCUSABLE_SELECTORS = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+function TrainingPagePopupInner(props) {
+    const { scenario, title, subTitle, depth, icon, wrapperStyle, iconTooltip, pageIndex, pageCount, stepIndex, stepCount, onBack, onComplete, onNext, onSettings, useNoiseSetting = true, children, ariaLabel, label, buildResults, onResult: externalOnResultProp, typeKey, entryPoint, dailyTotal, itemRef, renderResultPopup, } = props;
+    // 시간 기록 — 문장 4종은 각 래퍼(useTrainingSessionLog)에서 기록하므로 제외, 그 외(단어 등) 공통 기록
+    useTrainingSessionLog(typeKey && !SENTENCE_TIME_LOGGED_TYPES.has(typeKey) ? typeKey : '');
+    // 팝업 진입 시각 — 완료 정본의 소요 시간 계산 (마운트 시 1회만 effect에서 초기화)
+    const completionStartRef = useRef(0);
+    useEffect(() => { completionStartRef.current = Date.now(); }, []);
+    const { t } = useTranslation();
+    const externalOnResult = externalOnResultProp;
+    const hasScenario = !!scenario;
+    const scenarioId = scenario?.id || null;
+    const scenarioMeta = scenario?.meta || {};
+    const scenarioPages = Array.isArray(scenario?.pages) ? scenario.pages : [];
+    const isChildrenArray = Array.isArray(children) || (isValidElement(children) && typeof children !== 'function');
+    const compoundChildrenRaw = isChildrenArray ? Children.toArray(children).filter(isValidElement) : [];
+    const hasCompoundChildren = compoundChildrenRaw.length > 0;
+    const isPageType = (type) => type === Page || type?.__isTrainingPage === true;
+    const hasPageWrappers = hasCompoundChildren && compoundChildrenRaw.some((child) => isPageType(child.type));
+    const compoundPages = hasPageWrappers
+        ? compoundChildrenRaw
+            .filter((child) => isPageType(child.type))
+            .map((pageChild, pageIdx) => {
+            const pprops = pageChild.props || {};
+            return {
+                id: `children-page-${pageIdx}`,
+                steps: Children.toArray(pprops.children).filter(isValidElement),
+                pageTop: pprops.pageTop || pprops.top || null,
+                pageBottom: pprops.pageBottom || pprops.bottom || null,
+            };
+        })
+        : [{ id: 'children-page-0', steps: compoundChildrenRaw }];
+    const isChildrenMode = hasCompoundChildren && !hasScenario && typeof children !== 'function';
+    const effectiveChildrenPageCount = isChildrenMode ? Math.max(1, compoundPages.length) : 0;
+    // CSS 스코프 자동 관리: createPortal로 document.body에 렌더링되므로
+    // .ihabdevteam-core-scope 클래스를 body에 자동으로 추가/제거합니다.
+    // 호출부에서 별도 처리 없이 패키지 스타일이 정상 적용됩니다.
+    useEffect(() => {
+        if (typeof document === 'undefined' || !document.body)
+            return;
+        // 이미 붙어 있으면 앱 셸(index.html의 <body class="ihabdevteam-core-scope">)이 소유한 것이므로
+        // 추가도 제거도 하지 않는다. 예전엔 무조건 add/remove 해서, 훈련 팝업을 닫는 순간
+        // 앱이 소유한 클래스까지 벗겨져 이후 모든 화면이 기본 스타일로 무너졌다
+        // (이 클래스가 앱 전역 font-family·color·word-break를 공급한다).
+        // 개발 모드는 CSS가 인라인 주입돼 영향이 거의 없어 배포본에서만 드러났다.
+        if (document.body.classList.contains('ihabdevteam-core-scope'))
+            return;
+        document.body.classList.add('ihabdevteam-core-scope');
+        return () => {
+            document.body.classList.remove('ihabdevteam-core-scope');
+        };
+    }, []);
+    // 훈련 팝업이 열려 있는 동안 body에 마커 클래스를 남긴다.
+    // 앱 전역 플로팅 UI(피드백/버그신고 FAB 등)가 position:fixed 로 우하단에 떠 있으면
+    // 이 팝업의 하단 액션바(.pp-bottom)의 주 CTA('다음 문제' 등)와 겹쳐 클릭을 가로채므로,
+    // 앱 CSS가 이 마커를 보고 FAB를 액션바 위로 올릴 수 있게 한다.
+    // 중첩 팝업에서도 정확히 해제되도록 body dataset에 참조 카운터를 둔다.
+    useEffect(() => {
+        if (typeof document === 'undefined' || !document.body)
+            return;
+        const body = document.body;
+        body.dataset.ihabTrainingPopupCount = String(Number(body.dataset.ihabTrainingPopupCount || '0') + 1);
+        body.classList.add('ihab-training-popup-open');
+        return () => {
+            const remaining = Number(body.dataset.ihabTrainingPopupCount || '1') - 1;
+            if (remaining > 0) {
+                body.dataset.ihabTrainingPopupCount = String(remaining);
+            }
+            else {
+                delete body.dataset.ihabTrainingPopupCount;
+                body.classList.remove('ihab-training-popup-open');
+            }
+        };
+    }, []);
+    // 팝업이 열려 있는 동안 body 스크롤 및 스크롤바 잠금 — 공유 참조 카운터 사용.
+    // 개별 prev값 캡처 방식이었을 때는, 이 팝업이 닫히는 동시에(같은 핸들러에서) 형제
+    // 팝업/Popup이 새로 열리면 언마운트 순서에 따라 배경 스크롤이 조기에 풀리거나
+    // 반대로 모두 닫힌 뒤에도 영구히 잠기는 문제가 있었다.
+    useEffect(() => {
+        if (typeof document === 'undefined' || !document.body)
+            return;
+        return lockBodyScrollWithPadding();
+    }, []);
+    // enabled:false로 시작 — 저장된 설정 로드 전에 재생이 시작되면 기본 소음(defaultNoise)으로
+    // 먼저 재생을 시작했다가 로드 완료 후 실제 저장된 타입으로 중간에 전환해야 하는 레이스가 생기고,
+    // 그 전환 도중 페이드 애니메이션이 서로를 취소하며 volume이 0에 멈춘 채 paused로 남을 수 있다.
+    // 로드가 끝나기 전까지는 재생 자체를 시작하지 않도록 막아 이 레이스를 원천 차단한다.
+    const [noiseSettings, setNoisePart] = useState({ ...DEFAULT_NOISE_SETTINGS, enabled: false });
+    // 최신 설정 미러(setSettings에서 머지·저장 시 참조 — 상태 업데이터 내 부수효과 회피)
+    const noiseSettingsRef = useRef(noiseSettings);
+    useEffect(() => { noiseSettingsRef.current = noiseSettings; }, [noiseSettings]);
+    // 계정/고객 저장소에서 초기값 로드 (앱이 configureNoiseSettingsStore로 주입)
+    useEffect(() => {
+        let cancelled = false;
+        void loadNoiseSettings().then((saved) => {
+            if (cancelled)
+                return;
+            // 저장된 설정이 있으면 병합, 없으면 진짜 기본값으로 확정 — 어느 쪽이든 이제부터 재생 허용.
+            const merged = saved ? { ...noiseSettingsRef.current, ...saved } : { ...DEFAULT_NOISE_SETTINGS };
+            noiseSettingsRef.current = merged;
+            setNoisePart(merged);
+        });
+        return () => { cancelled = true; };
+    }, []);
+    // 오디오 레벨 미터용 analyser (오디오 플레이어가 재생 시 등록)
+    const [mainAnalyser, setMainAnalyser] = useState(null);
+    const [noiseAnalyser, setNoiseAnalyser] = useState(null);
+    const registerAnalyser = useCallback((which, analyser) => {
+        if (which === 'main')
+            setMainAnalyser(analyser);
+        else
+            setNoiseAnalyser(analyser);
+    }, []);
+    // noiseSettings에 병합 + 영속화(fire-and-forget) — setSettings/setPlaybackRate/setMainVolume가 공유
+    const mergeAndSaveSettings = useCallback((next) => {
+        const merged = { ...noiseSettingsRef.current, ...next };
+        noiseSettingsRef.current = merged;
+        setNoisePart(merged);
+        saveNoiseSettings(merged);
+    }, []);
+    // 문장(메인) 재생 컨트롤 — 툴팁(하단 설정)과 오디오 플레이어가 공유. 계정 설정("훈련" 패널)의
+    // 기본값과 동일한 noiseSettings(mainVolume/mainSpeed)에 함께 영속화된다.
+    const playbackRate = noiseSettings.mainSpeed;
+    const mainVolume = noiseSettings.mainVolume;
+    const setPlaybackRate = useCallback((rate) => mergeAndSaveSettings({ mainSpeed: rate }), [mergeAndSaveSettings]);
+    const setMainVolume = useCallback((v) => mergeAndSaveSettings({ mainVolume: v }), [mergeAndSaveSettings]);
+    const noiseContextValue = useMemo(() => ({
+        settings: noiseSettings,
+        setSettings: mergeAndSaveSettings,
+        registerAnalyser,
+        mainAnalyser,
+        noiseAnalyser,
+        playbackRate,
+        setPlaybackRate,
+        mainVolume,
+        setMainVolume,
+    }), [noiseSettings, mergeAndSaveSettings, registerAnalyser, mainAnalyser, noiseAnalyser, playbackRate, setPlaybackRate, mainVolume, setMainVolume]);
+    const panelRef = useRef(null);
+    const [mode, setMode] = useState('center');
+    const [closing, setClosing] = useState(false);
+    // 닫힘 애니메이션(PAGE_POPUP_CLOSE_MS) 동안 다른 닫기 경로(ESC/닫기 버튼/완료)가 또 실행되면
+    // onBack이 중복 호출돼 호출부가 라우터 back이면 2단계 뒤로 간다 — Popup.tsx와 동일한
+    // 1회 가드 + 언마운트 시 타이머 정리.
+    const closingRef = useRef(false);
+    const closeTimerRef = useRef(null);
+    const scheduleClose = useCallback((fn) => {
+        if (closingRef.current)
+            return;
+        closingRef.current = true;
+        setClosing(true);
+        closeTimerRef.current = setTimeout(fn, PAGE_POPUP_CLOSE_MS);
+    }, []);
+    useEffect(() => () => { if (closeTimerRef.current)
+        clearTimeout(closeTimerRef.current); }, []);
+    // Focus first focusable element when popup opens, and trap focus within
+    useEffect(() => {
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const getFocusableEls = () => Array.from(panel.querySelectorAll(FOCUSABLE_SELECTORS)).filter(el => !el.closest('[aria-hidden="true"]'));
+        // Focus first focusable element
+        const firstEl = getFocusableEls()[0];
+        if (firstEl) {
+            try {
+                firstEl.focus();
+            }
+            catch (e) { }
+        }
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                scheduleClose(() => { if (typeof onBack === 'function')
+                    onBack(); });
+                return;
+            }
+            if (e.key === 'Tab') {
+                const focusable = getFocusableEls();
+                if (focusable.length === 0)
+                    return;
+                const first = focusable[0];
+                const last = focusable[focusable.length - 1];
+                if (e.shiftKey) {
+                    if (document.activeElement === first) {
+                        e.preventDefault();
+                        last.focus();
+                    }
+                }
+                else {
+                    if (document.activeElement === last) {
+                        e.preventDefault();
+                        first.focus();
+                    }
+                }
+            }
+        };
+        panel.addEventListener('keydown', handleKeyDown);
+        return () => panel.removeEventListener('keydown', handleKeyDown);
+    }, [onBack, scheduleClose]);
+    const [measured, setMeasured] = useState(false);
+    // 최초 공개(reveal) 이후엔 mode 변경을 막는 플래그 (MutationObserver 루프 방지)
+    const revealedRef = useRef(false);
+    const [resultOverlay, setResultOverlay] = useState(null);
+    const [noticeMessage, setNoticeMessage] = useState('');
+    const [flowState, setFlowState] = useState(() => createScenarioFlowState());
+    const prevPageRef = useRef(typeof pageIndex === 'number' ? pageIndex : null);
+    // 시나리오/자녀모드 전환 시 플로우 상태를 초기화하는 의도된 동기화다
+    /* eslint-disable react-hooks/set-state-in-effect */
+    useEffect(() => {
+        if (!hasScenario && !isChildrenMode)
+            return;
+        setFlowState(createScenarioFlowState());
+        setResultOverlay(null);
+    }, [hasScenario, scenarioId, isChildrenMode]);
+    /* eslint-enable react-hooks/set-state-in-effect */
+    // 페이지 개수가 줄어들면 flowState.pageIndex를 유효 범위로 보정하는 의도된 동기화다
+    /* eslint-disable react-hooks/set-state-in-effect */
+    useEffect(() => {
+        if (!isChildrenMode)
+            return;
+        setFlowState((prev) => {
+            const nextPage = Math.max(0, Math.min(prev.pageIndex, Math.max(0, effectiveChildrenPageCount - 1)));
+            if (nextPage !== prev.pageIndex)
+                return { ...prev, pageIndex: nextPage, stepIndex: 0 };
+            return prev;
+        });
+    }, [isChildrenMode, effectiveChildrenPageCount]);
+    /* eslint-enable react-hooks/set-state-in-effect */
+    const safeChildrenPageIndex = isChildrenMode
+        ? Math.max(0, Math.min(flowState.pageIndex, effectiveChildrenPageCount - 1))
+        : 0;
+    const currentChildrenPage = isChildrenMode ? compoundPages[safeChildrenPageIndex] : null;
+    const compoundChildrenSteps = isChildrenMode && currentChildrenPage && Array.isArray(currentChildrenPage.steps)
+        ? currentChildrenPage.steps
+        : [];
+    const effectivePageIndex = hasScenario
+        ? flowState.pageIndex
+        : isChildrenMode
+            ? safeChildrenPageIndex
+            : (typeof pageIndex === 'number' ? pageIndex : 0);
+    const currentScenarioPage = hasScenario
+        ? scenarioPages[Math.max(0, Math.min(flowState.pageIndex, Math.max(0, scenarioPages.length - 1)))]
+        : null;
+    const currentScenarioSteps = hasScenario && currentScenarioPage && Array.isArray(currentScenarioPage.steps)
+        ? currentScenarioPage.steps
+        : [];
+    const effectiveStepCount = hasScenario
+        ? currentScenarioSteps.length
+        : isChildrenMode
+            ? compoundChildrenSteps.length
+            : (typeof stepCount === 'number' ? stepCount : 0);
+    const effectiveStepIndex = (hasScenario || isChildrenMode) ? Math.max(0, Math.min(flowState.stepIndex, Math.max(0, effectiveStepCount))) : (typeof stepIndex === 'number' ? stepIndex : 0);
+    const effectivePageCount = hasScenario
+        ? scenarioPages.length
+        : isChildrenMode
+            ? effectiveChildrenPageCount
+            : (typeof pageCount === 'number' ? pageCount : 0);
+    // 페이지가 앞으로 진행되면 안내 메시지를 띄우는 의도된 동기화다
+    /* eslint-disable react-hooks/set-state-in-effect */
+    useLayoutEffect(() => {
+        const prev = prevPageRef.current;
+        if (typeof effectivePageIndex === 'number' && prev !== null && effectivePageIndex !== prev) {
+            if (effectivePageIndex > prev) {
+                try {
+                    setNoticeMessage(t('training.problemNotice', { n: effectivePageIndex + 1 }));
+                }
+                catch (e) { }
+            }
+        }
+        prevPageRef.current = typeof effectivePageIndex === 'number' ? effectivePageIndex : prevPageRef.current;
+    }, [effectivePageIndex, pageIndex, t]);
+    /* eslint-enable react-hooks/set-state-in-effect */
+    useLayoutEffect(() => {
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const getScrollEl = () => panel.querySelector('.page-popup__scroll');
+        let rafId = null;
+        let timeoutId = null;
+        let resizeRafId = null;
+        /** 최초 공개 또는 resize 시 center/top 모드 결정 */
+        const applyMode = (isReveal) => {
+            const scroll = getScrollEl();
+            if (!scroll)
+                return;
+            const fits = scroll.scrollHeight <= scroll.clientHeight;
+            setMode(fits ? 'center' : 'top');
+            if (isReveal && !revealedRef.current) {
+                revealedRef.current = true;
+                try {
+                    setMeasured(true);
+                }
+                catch (e) { }
+                // 최초 공개 이후엔 MutationObserver 불필요 — 연결 해제
+                try {
+                    mo.disconnect();
+                }
+                catch (e) { }
+            }
+        };
+        /** 최초 공개용: DOM 변화가 잦을 때 debounce */
+        const scheduleReveal = () => {
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(() => {
+                if (timeoutId !== null)
+                    clearTimeout(timeoutId);
+                timeoutId = setTimeout(() => applyMode(true), 60);
+            });
+        };
+        /** 창 크기 변경용: 빠르게 재계산 */
+        const handleResize = () => {
+            if (resizeRafId !== null)
+                cancelAnimationFrame(resizeRafId);
+            resizeRafId = requestAnimationFrame(() => applyMode(false));
+        };
+        scheduleReveal();
+        window.addEventListener('resize', handleResize);
+        // MutationObserver: 최초 공개 전까지만 감시
+        const mo = new MutationObserver(scheduleReveal);
+        mo.observe(panel, { childList: true, subtree: true, attributes: true });
+        // 안전망: 아이콘 비동기 로딩 등으로 MutationObserver가 타이머를 계속 리셋해
+        // measured 가 영원히 false 로 남는 현상을 방지합니다 (최대 400ms 대기)
+        const maxWaitId = setTimeout(() => {
+            if (!revealedRef.current)
+                applyMode(true);
+        }, 400);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+            if (timeoutId !== null)
+                clearTimeout(timeoutId);
+            if (resizeRafId !== null)
+                cancelAnimationFrame(resizeRafId);
+            clearTimeout(maxWaitId);
+            try {
+                mo.disconnect();
+            }
+            catch (e) { }
+        };
+    }, [panelRef]);
+    const registerOnNext = useCallback((fn) => {
+        if (panelRef.current)
+            panelRef.current._childOnNext = fn;
+    }, []);
+    const registerOnResult = useCallback((fn) => {
+        if (panelRef.current)
+            panelRef.current._childOnResult = fn;
+    }, []);
+    const setScenarioAnswer = useCallback((pageId, stepKey, payload) => {
+        setFlowState((prev) => {
+            const pageAnswers = prev.answersByPage[pageId] || {};
+            const existing = pageAnswers[stepKey];
+            const incomingTs = getPayloadTimestamp(payload);
+            const existingTs = getPayloadTimestamp(existing);
+            if (existing && existingTs > incomingTs)
+                return prev;
+            return {
+                ...prev,
+                answersByPage: {
+                    ...prev.answersByPage,
+                    [pageId]: {
+                        ...pageAnswers,
+                        [stepKey]: payload,
+                    },
+                },
+            };
+        });
+    }, [setFlowState]);
+    const handleScenarioStepChange = useCallback((step, index, payload) => {
+        const pageId = getScenarioPageId(currentScenarioPage, effectivePageIndex);
+        const stepKey = getScenarioStepKey(step, index);
+        setScenarioAnswer(pageId, stepKey, payload);
+    }, [currentScenarioPage, effectivePageIndex, setScenarioAnswer]);
+    const handleScenarioStepDone = useCallback((step, index, payload) => {
+        const pageId = getScenarioPageId(currentScenarioPage, effectivePageIndex);
+        const stepKey = getScenarioStepKey(step, index);
+        setScenarioAnswer(pageId, stepKey, payload);
+        // safe guards: payload may be non-object
+        const allowChange = payload?.allowChange;
+        if (!(allowChange) && step?.autoAdvance !== false) {
+            setFlowState((prev) => ({
+                ...prev,
+                stepIndex: Math.max(prev.stepIndex, index + 1),
+            }));
+        }
+    }, [currentScenarioPage, effectivePageIndex, setScenarioAnswer, setFlowState]);
+    // currentChildrenPage는 compoundPages[idx]에서 파생된 읽기전용 값 — 컴파일러가 배열 인덱싱 결과를
+    // 보수적으로 "이후 변경될 수 있음"으로 취급해 수동 메모이제이션과의 정합성 검증을 건너뛴다
+    /* eslint-disable react-hooks/preserve-manual-memoization */
+    const handleChildrenStepDone = useCallback((payload, stepIdx) => {
+        const pageId = currentChildrenPage?.id || `children-page-${effectivePageIndex ?? 0}`;
+        const resolvedStepIdx = typeof stepIdx === 'number' ? stepIdx : (effectiveStepIndex ?? 0);
+        const stepKey = `step-${resolvedStepIdx}`;
+        setScenarioAnswer(pageId, stepKey, payload);
+        const allowChange = payload?.allowChange;
+        if (!(allowChange)) {
+            setFlowState((prev) => ({
+                ...prev,
+                stepIndex: Math.max(prev.stepIndex, resolvedStepIdx + 1),
+            }));
+        }
+    }, [currentChildrenPage, effectivePageIndex, effectiveStepIndex, setScenarioAnswer, setFlowState]);
+    const handleChildrenStepChange = useCallback((payload, stepIdx) => {
+        const pageId = currentChildrenPage?.id || `children-page-${effectivePageIndex ?? 0}`;
+        const resolvedStepIdx = typeof stepIdx === 'number' ? stepIdx : (effectiveStepIndex ?? 0);
+        const stepKey = `step-${resolvedStepIdx}`;
+        setScenarioAnswer(pageId, stepKey, payload);
+    }, [currentChildrenPage, effectivePageIndex, effectiveStepIndex, setScenarioAnswer]);
+    const childrenContextValue = isChildrenMode ? {
+        currentPageIndex: effectivePageIndex ?? 0,
+        currentStepIndex: effectiveStepIndex ?? 0,
+        totalStepsInPage: compoundChildrenSteps.length,
+        handleStepDone: handleChildrenStepDone,
+        handleStepChange: handleChildrenStepChange,
+    } : null;
+    const buildScenarioResult = async () => {
+        const baseResult = typeof scenario?.buildResults === 'function'
+            ? await Promise.resolve(scenario.buildResults({
+                scenario,
+                pages: scenarioPages,
+                flowState,
+                answersByPage: flowState.answersByPage,
+            }))
+            : null;
+        if (typeof externalOnResult === 'function') {
+            const externalResult = await Promise.resolve(externalOnResult(baseResult));
+            return externalResult || baseResult;
+        }
+        return baseResult;
+    };
+    const buildChildrenResult = async () => {
+        const pageId = currentChildrenPage?.id || `children-page-${flowState.pageIndex}`;
+        const pageAnswers = flowState.answersByPage[pageId] || {};
+        const normalizedAnswers = hasPageWrappers
+            ? (() => {
+                const merged = {};
+                let cursor = 0;
+                compoundPages.forEach((page) => {
+                    const perPage = flowState.answersByPage[page.id] || {};
+                    const pageStepCount = Array.isArray(page.steps) ? page.steps.length : 0;
+                    for (let localIdx = 0; localIdx < pageStepCount; localIdx += 1) {
+                        const value = perPage[`step-${localIdx}`];
+                        if (typeof value !== 'undefined')
+                            merged[`step-${cursor + localIdx}`] = value;
+                    }
+                    cursor += pageStepCount;
+                });
+                return merged;
+            })()
+            : pageAnswers;
+        if (typeof buildResults === 'function') {
+            const customResult = await Promise.resolve(buildResults(normalizedAnswers, {
+                pageAnswers,
+                answersByPage: flowState.answersByPage,
+                pages: compoundPages,
+                currentPageId: pageId,
+            }));
+            if (typeof externalOnResult === 'function') {
+                const externalResult = await Promise.resolve(externalOnResult(customResult));
+                return externalResult || customResult;
+            }
+            return customResult;
+        }
+        const results = Object.entries(pageAnswers).map(([key, payload], index) => ({
+            index,
+            key,
+            payload,
+        }));
+        const baseResult = {
+            results,
+            answers: results,
+            score: 0,
+        };
+        if (typeof externalOnResult === 'function') {
+            const externalResult = await Promise.resolve(externalOnResult(baseResult));
+            return externalResult || baseResult;
+        }
+        return baseResult;
+    };
+    const handleViewResults = () => {
+        try {
+            if (typeof document !== 'undefined' && document.body) {
+                try {
+                    document.dispatchEvent(new CustomEvent('speechear-close-tooltips'));
+                }
+                catch (e) { }
+                document.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, cancelable: true }));
+                document.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+            }
+        }
+        catch (e) { }
+        if (hasScenario) {
+            const maybe = buildScenarioResult();
+            setResultOverlay({});
+            const maybeAny = maybe;
+            Promise.resolve(maybeAny)
+                .then((data) => {
+                if (data)
+                    setResultOverlay(data);
+                else
+                    setResultOverlay({ isEmpty: true });
+            })
+                .catch((err) => {
+                if (import.meta.env?.DEV)
+                    console.error('viewResults scenario handler failed', err);
+                setResultOverlay({ isEmpty: true });
+            });
+            return;
+        }
+        if (isChildrenMode) {
+            const maybe = buildChildrenResult();
+            setResultOverlay({});
+            const maybeAny = maybe;
+            Promise.resolve(maybeAny)
+                .then((data) => {
+                if (data)
+                    setResultOverlay(data);
+                else
+                    setResultOverlay({ isEmpty: true });
+            })
+                .catch((err) => {
+                if (import.meta.env?.DEV)
+                    console.error('viewResults children handler failed', err);
+                setResultOverlay({ isEmpty: true });
+            });
+            return;
+        }
+        const fn = panelRef.current && panelRef.current._childOnResult;
+        const tryCall = (callable) => {
+            try {
+                return callable ? callable() : undefined;
+            }
+            catch (e) {
+                return undefined;
+            }
+        };
+        if (typeof fn === 'function') {
+            const maybe = tryCall(fn);
+            const maybeAny = maybe;
+            try {
+                if (import.meta && import.meta.env && import.meta.env.DEV)
+                    console.debug('TrainingPagePopup: child handler returned (maybe):', maybeAny);
+            }
+            catch (e) { }
+            if (maybeAny && typeof maybeAny.then !== 'function') {
+                setResultOverlay(maybeAny);
+            }
+            else {
+                setResultOverlay(maybeAny && typeof maybeAny.then === 'function' ? {} : {});
+            }
+            Promise.resolve(maybeAny).then((data) => { if (data)
+                setResultOverlay(data); }).catch((err) => { if (import.meta.env?.DEV)
+                console.error('viewResults child handler failed', err); });
+            return;
+        }
+        if (typeof externalOnResult === 'function') {
+            const maybe = tryCall(externalOnResult);
+            const maybeAny = maybe;
+            try {
+                if (import.meta && import.meta.env && import.meta.env.DEV)
+                    console.debug('TrainingPagePopup: externalOnResult returned (maybe):', maybeAny);
+            }
+            catch (e) { }
+            if (maybeAny && typeof maybeAny.then !== 'function') {
+                setResultOverlay(maybeAny);
+            }
+            else {
+                setResultOverlay(maybeAny && typeof maybeAny.then === 'function' ? {} : {});
+            }
+            Promise.resolve(maybeAny).then((data) => { try {
+                if (import.meta && import.meta.env && import.meta.env.DEV)
+                    console.debug('TrainingPagePopup: externalOnResult resolved data:', data);
+            }
+            catch (e) { } if (data)
+                setResultOverlay(data); }).catch((err) => { console.error('viewResults external handler failed', err); });
+            return;
+        }
+    };
+    const handleNext = () => {
+        if (hasScenario) {
+            if (typeof effectivePageIndex === 'number' && typeof effectivePageCount === 'number' && effectivePageIndex < effectivePageCount - 1) {
+                setFlowState((prev) => ({
+                    ...prev,
+                    pageIndex: prev.pageIndex + 1,
+                    stepIndex: 0,
+                }));
+                return;
+            }
+            return handleViewResults();
+        }
+        if (isChildrenMode) {
+            const totalSteps = compoundChildrenSteps.length;
+            if (typeof effectiveStepIndex === 'number' && effectiveStepIndex < totalSteps - 1) {
+                setFlowState((prev) => ({
+                    ...prev,
+                    stepIndex: prev.stepIndex + 1,
+                }));
+                return;
+            }
+            if (typeof effectivePageIndex === 'number' && typeof effectivePageCount === 'number' && effectivePageIndex < effectivePageCount - 1) {
+                setFlowState((prev) => ({
+                    ...prev,
+                    pageIndex: prev.pageIndex + 1,
+                    stepIndex: 0,
+                }));
+                return;
+            }
+            return handleViewResults();
+        }
+        if (typeof onNext === 'function') {
+            try {
+                onNext();
+            }
+            catch (e) { }
+            return;
+        }
+        const fn = panelRef.current && panelRef.current._childOnNext;
+        if (typeof fn === 'function') {
+            try {
+                fn();
+            }
+            catch (e) { }
+            return;
+        }
+    };
+    const resolvedTitle = hasScenario
+        ? scenarioMeta.title || scenarioMeta.label || ariaLabel || t('common.popup', '팝업')
+        : title || label || (Array.isArray(depth) ? depth[depth.length - 1] : undefined) || ariaLabel || t('common.popup', '팝업');
+    // 헤더에 넘길 제목 — title이 '빈 문자열'로 명시돼 오면(이름 미입력) 그대로 넘긴다.
+    // ||로 폴백하면 타입 라벨이 채워져 depth 라벨과 같은 문구가 두 줄로 반복되므로,
+    // 비어 있다는 사실은 타이틀 컴포넌트가 안내 문구로 알린다.
+    // (resolvedTitle은 dialog aria-label용이라 그쪽은 폴백을 그대로 유지한다.)
+    const titleForHeader = hasScenario
+        ? (scenarioMeta.title ?? scenarioMeta.label ?? resolvedTitle)
+        : (title ?? label ?? resolvedTitle);
+    const renderScenarioStep = (step, index) => {
+        const pageId = getScenarioPageId(currentScenarioPage, effectivePageIndex);
+        const stepKey = getScenarioStepKey(step, index);
+        const storedPayload = flowState.answersByPage[pageId]?.[stepKey];
+        const stepProps = resolveScenarioStepProps(step, {
+            page: currentScenarioPage,
+            pageIndex: effectivePageIndex,
+            step,
+            stepIndex: index,
+            storedPayload,
+            answersByPage: flowState.answersByPage,
+            flowState,
+        });
+        const commonProps = {
+            key: stepKey,
+            index,
+            stepIndex: effectiveStepIndex,
+            isLast: index === currentScenarioSteps.length - 1,
+        };
+        switch (step?.type) {
+            case 'listen':
+                return (_jsx(TrainingStepListen, { ...commonProps, ...stepProps, onDone: (payload) => handleScenarioStepDone(step, index, payload) }));
+            case 'confirm':
+                return (_jsx(TrainingStepConfirm, { ...commonProps, ...stepProps, onDone: (payload) => handleScenarioStepDone(step, index, payload), onChange: (payload) => handleScenarioStepChange(step, index, payload) }));
+            case 'confirmWithText':
+                return (_jsx(TrainingStepConfirmWithText, { ...commonProps, ...stepProps, onDone: (payload) => handleScenarioStepDone(step, index, payload), onChange: (payload) => handleScenarioStepChange(step, index, payload) }));
+            case 'orderList':
+                return (_jsx(TrainingStepOrderList, { ...commonProps, ...stepProps, onDone: (payload) => handleScenarioStepDone(step, index, payload), onChange: (payload) => handleScenarioStepChange(step, index, payload) }));
+            default:
+                return null;
+        }
+    };
+    const scenarioContent = hasScenario
+        ? scenarioPages.length > 0
+            ? _jsx("div", { className: "training-steps", children: currentScenarioSteps.map((step, index) => renderScenarioStep(step, index)) })
+            : (_jsx("div", { className: "page-popup__content page-popup__content--center", children: _jsx("div", { className: "pp-empty", children: scenario?.emptyMessage || t('training.noQuestions', '문제가 없습니다.') }) }))
+        : null;
+    const childrenContent = isChildrenMode
+        ? (_jsxs(TrainingPagePopupContext.Provider, { value: childrenContextValue, children: [currentChildrenPage?.pageTop ? (_jsx("div", { className: "training-page-top", children: currentChildrenPage.pageTop })) : null, _jsx("div", { className: "training-steps", children: compoundChildrenSteps.map((child, index) => {
+                        const el = child;
+                        return cloneElement(el, { ...el.props, _stepIndex: index, _totalSteps: compoundChildrenSteps.length, _stepKey: `step-${index}`, _pageIndex: effectivePageIndex });
+                    }) }), currentChildrenPage?.pageBottom ? (_jsx("div", { className: "training-page-bottom", children: currentChildrenPage.pageBottom })) : null] }))
+        : null;
+    const handleResultDone = useCallback(() => {
+        // 완료 정본 기록 (문장/단어/오늘의 듣기 공통) — 결과를 닫기 전에 캡처
+        // onComplete에도 그대로 전달해 상위(단어훈련 세션 로그 등)가 0으로 폴백하지 않도록 한다.
+        let completeResult;
+        if (typeKey) {
+            const ro = resultOverlay;
+            const results = (ro?.results || ro?.answers || []);
+            const total = Array.isArray(results) && results.length > 0 ? results.length : null;
+            // 결과 항목 형태가 훈련 타입마다 달라(예: 소음 하 듣기/문장 순서화는 correct 대신
+            // heard/judgement만 채움 — TrainingResultPopup의 resolveDecision과 동일 기준) 이
+            // 필드들도 확인해야 그 타입들의 정답 수가 항상 0으로 기록되는 것을 막을 수 있다.
+            const correct = Array.isArray(results)
+                ? results.filter(r => r?.correct === true || r?.isCorrect === true || r?.score === 1 ||
+                    r?.heard === true || r?.judgement === true).length
+                : null;
+            const finalCorrect = total != null ? correct : null;
+            /* 문항 하나하나를 함께 남긴다 — 여기서 접으면 어느 낱말을 틀렸는지 되찾을 길이 없다.
+               '음소별 오류'(08-26 회의)가 이걸 원재료로 쓴다. */
+            logTrainingCompletion({
+                items: toItemResults(results),
+                category: SENTENCE_TIME_LOGGED_TYPES.has(typeKey) ? 'sentence' : 'word',
+                trainingType: typeKey,
+                entryPoint: entryPoint ?? 'sentence',
+                itemRef: itemRef ?? null,
+                correct: finalCorrect,
+                total,
+                score: typeof ro?.score === 'number' ? ro.score : null,
+                durationSeconds: Math.max(0, Math.round((Date.now() - completionStartRef.current) / 1000)),
+                dailyTotal: dailyTotal ?? null,
+            });
+            completeResult = { correct: finalCorrect, total };
+        }
+        setResultOverlay(null);
+        scheduleClose(() => {
+            if (typeof onComplete === 'function')
+                onComplete(completeResult);
+            if (typeof onBack === 'function')
+                onBack();
+        });
+    }, [onComplete, onBack, typeKey, entryPoint, dailyTotal, itemRef, resultOverlay, setResultOverlay, scheduleClose]);
+    const handleNoticeClose = useCallback(() => setNoticeMessage(''), [setNoticeMessage]);
+    const handleCloseBack = useCallback(() => {
+        scheduleClose(() => { if (typeof onBack === 'function')
+            onBack(); });
+    }, [onBack, scheduleClose]);
+    const jsx = (_jsxs("div", { className: `page-popup${closing ? ' page-popup--closing' : ''}`, role: "dialog", "aria-label": resolvedTitle, children: [_jsxs("div", { ref: panelRef, className: `page-popup__panel ${!measured ? 'page-popup__panel--measuring' : ''} ${mode === 'center' ? 'page-popup__panel--center' : mode === 'top' ? 'page-popup__panel--top' : ''}`, "aria-modal": "true", children: [_jsx(TrainingPagePopupTitle, { title: titleForHeader, subtitle: hasScenario ? (scenarioMeta.subtitle || scenarioMeta.label) : (Array.isArray(depth) ? depth.join(' / ') : undefined), desc: !hasScenario ? subTitle : undefined, depth: (hasScenario ? scenarioMeta.depth : depth), icon: hasScenario ? scenarioMeta.icon : icon, wrapperStyle: hasScenario ? scenarioMeta.wrapperStyle : wrapperStyle, iconTooltip: hasScenario ? scenarioMeta.iconTooltip : iconTooltip, progressMax: effectivePageCount, progressIndex: effectivePageIndex, pageIndex: effectivePageIndex, pageCount: effectivePageCount, onBack: handleCloseBack, onClose: handleCloseBack }), _jsx("div", { className: "page-popup__scroll", children: _jsx("div", { className: `page-popup__content ${mode === "center" ? "page-popup__content--center" : "page-popup__content--top"}`, children: isChildrenMode ? childrenContent : (hasScenario ? scenarioContent : (typeof children === 'function' ? children({ registerOnNext, registerOnResult: registerOnResult, panelRef, setResultOverlay }) : children)) }) }), _jsx(TrainingPagePopupBottom, { onSettings: onSettings, onNext: handleNext, onResult: handleViewResults, useNoiseSettingBtn: Boolean(hasScenario ? (scenarioMeta.useNoiseSetting ?? true) : useNoiseSetting), stepIndex: effectiveStepIndex, stepCount: effectiveStepCount, pageIndex: effectivePageIndex, pageCount: effectivePageCount })] }), (resultOverlay && !resultOverlay.isEmpty && (renderResultPopup ?? defaultRenderResult)({
+                score: resultOverlay.score,
+                results: (resultOverlay.results || resultOverlay.answers || []),
+                contextsLength: resultOverlay.results ? resultOverlay.results.length : (resultOverlay.answers ? resultOverlay.answers.length : 0),
+                onReplay: () => {
+                    setResultOverlay(null);
+                    if (hasScenario) {
+                        setFlowState(createScenarioFlowState());
+                        if (typeof scenario?.onReplay === 'function') {
+                            try {
+                                scenario.onReplay();
+                            }
+                            catch (e) { }
+                        }
+                        return;
+                    }
+                    if (isChildrenMode) {
+                        setFlowState(createScenarioFlowState());
+                        return;
+                    }
+                    try {
+                        const maybeFn = panelRef.current && panelRef.current._childOnResult;
+                        if (typeof maybeFn === 'function')
+                            maybeFn({ replay: true });
+                    }
+                    catch (e) { }
+                },
+                onClose: handleResultDone,
+            })), (resultOverlay?.isEmpty && (_jsx("div", { className: "page-popup page-popup--result-empty", role: "dialog", "aria-label": t('training.result.eyebrow', '훈련 완료'), children: _jsxs("div", { className: "page-popup__panel page-popup__panel--center", "aria-modal": "true", children: [_jsx("div", { className: "page-popup__scroll", children: _jsx("div", { className: "page-popup__content page-popup__content--center", children: _jsx("div", { className: "page-popup__empty", children: t('training.result.eyebrow', '훈련 완료') }) }) }), _jsx("div", { className: "page-popup__bottom", children: _jsx(Button, { variant: "main", size: 48, onClick: handleResultDone, label: t('training.result.done', '완료') }) })] }) }))), _jsx(Toast, { message: noticeMessage, position: "top", onClose: handleNoticeClose })] }));
+    const portalContent = (_jsx(NoisePlayerContext.Provider, { value: noiseContextValue, children: jsx }));
+    if (typeof document !== 'undefined' && document.body)
+        return createPortal(portalContent, document.body);
+    return portalContent;
+}
+/** @public */
+const TrainingPagePopup = TrainingPagePopupInner;
+TrainingPagePopup.Page = Page;
+TrainingPagePopup.ListenStep = ListenStep;
+TrainingPagePopup.ConfirmStep = ConfirmStep;
+TrainingPagePopup.ConfirmWithTextStep = ConfirmWithTextStep;
+TrainingPagePopup.OrderListStep = OrderListStep;
+TrainingPagePopup.CardStep = CardStep;
+TrainingPagePopup.CardOrderStep = CardOrderStep;
+/** @public */
+export default TrainingPagePopup;