@ihabdevteam/core 0.321.0 → 0.323.0

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

@@ -29,7 +29,7 @@ import { loadNoiseSettings, saveNoiseSettings, reportAppliedNoiseSettings } from
 /** 판 중 소음 설정 변경을 저장하기 전 기다리는 시간(ms) — 멈춘 뒤 이만큼 지나면 마지막 값만 저장한다. */
 const NOISE_SAVE_DEBOUNCE_MS = 300;
 /* 움직임 최소화면 닫힘 대기를 0 으로 — 사라지는 애니메이션을 보여 줄 까닭이 없다. (공용 훅이 생기면 그것으로 합친다.) */
-const 움직임최소화 = () => {
+const prefersReducedMotion = () => {
     try {
         return typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
     }
@@ -38,8 +38,8 @@ const 움직임최소화 = () => {
     }
 };
 /** 결과를 계산하는 중인 결과 창 자리 — 이 객체와 **같은 것**이면 계산 중이다(결과 창의 '완료' 를 막는다). */
-const 결과계산중 = Object.freeze({});
-import { 키보드로눌렀나 } from '../../hooks/inputModality';
+const RESULT_PENDING = Object.freeze({});
+import { wasKeyboardPress } from '../../hooks/inputModality';
 // 문장 4종은 각 PagePopup 래퍼에서 useTrainingSessionLog로 이미 기록 → 베이스에서 중복 방지
 const SENTENCE_TIME_LOGGED_TYPES = new Set(['LISTEN_IN_NOISE', 'SHORT_STORY', 'LONG_STORY', 'ORDERING_SENTENCE']);
 /** 결과 창 자료에서 정답/전체를 센다 — 결과 항목 형태가 훈련 타입마다 달라(소음 하 듣기/문장 순서화는 correct 대신
@@ -57,7 +57,7 @@ const SENTENCE_TIME_LOGGED_TYPES = new Set(['LISTEN_IN_NOISE', 'SHORT_STORY', 'L
  * > 안 터지다가 옆 함수에서는 이미 터져 있었다). 여기는 **뜻이 같아서** 안 터진다 —
  * > 그 둘이 갈라지는 날이 오면 이 자리가 첫 판이다.
  */
-function 판결과셈(resultOverlay) {
+function countRoundResult(resultOverlay) {
     const ro = resultOverlay;
     /* `results` 가 이긴다 — 둘 다 오면 그쪽이 코어가 지은 이름이다 */
     const results = (ro?.results || ro?.answers || []);
@@ -211,28 +211,28 @@ function TrainingPagePopupInner(props) {
     }, []);
     /* 판 중 변경의 저장은 **멈춘 뒤 300ms 에 마지막 값만** 보낸다 — 전에는 슬라이더를 끄는 동안 움직일 때마다 저장이 나갔다
        (한 번 끌면 수십 번의 네트워크 쓰기, 늦게 도착한 앞 값이 뒤 값을 덮을 수도). 떠날 때·pagehide·탭 숨김에는 남은 값을 즉시 보낸다. */
-    const 저장대기Ref = useRef(null);
-    const 저장타이머Ref = useRef(null);
+    const pendingSaveRef = useRef(null);
+    const saveTimerRef = useRef(null);
     const flushNoiseSave = useCallback(() => {
-        if (저장타이머Ref.current !== null) {
-            clearTimeout(저장타이머Ref.current);
-            저장타이머Ref.current = null;
+        if (saveTimerRef.current !== null) {
+            clearTimeout(saveTimerRef.current);
+            saveTimerRef.current = null;
         }
-        const 남은값 = 저장대기Ref.current;
-        저장대기Ref.current = null;
-        if (남은값)
-            saveNoiseSettings(남은값);
+        const pending = pendingSaveRef.current;
+        pendingSaveRef.current = null;
+        if (pending)
+            saveNoiseSettings(pending);
     }, []);
     useEffect(() => {
         if (typeof window === 'undefined')
             return;
-        const 숨김 = () => { if (document.visibilityState === 'hidden')
+        const onHidden = () => { if (document.visibilityState === 'hidden')
             flushNoiseSave(); };
         window.addEventListener('pagehide', flushNoiseSave);
-        document.addEventListener('visibilitychange', 숨김);
+        document.addEventListener('visibilitychange', onHidden);
         return () => {
             window.removeEventListener('pagehide', flushNoiseSave);
-            document.removeEventListener('visibilitychange', 숨김);
+            document.removeEventListener('visibilitychange', onHidden);
             flushNoiseSave();
         };
     }, [flushNoiseSave]);
@@ -249,10 +249,10 @@ function TrainingPagePopupInner(props) {
         }
         // noiseOverride 판은 저장하지 않는다 — 판 중에 바꾼 것도 이 판에만.
         if (!noiseOverrideRef.current) {
-            저장대기Ref.current = merged;
-            if (저장타이머Ref.current !== null)
-                clearTimeout(저장타이머Ref.current);
-            저장타이머Ref.current = setTimeout(flushNoiseSave, NOISE_SAVE_DEBOUNCE_MS);
+            pendingSaveRef.current = merged;
+            if (saveTimerRef.current !== null)
+                clearTimeout(saveTimerRef.current);
+            saveTimerRef.current = setTimeout(flushNoiseSave, NOISE_SAVE_DEBOUNCE_MS);
         }
         reportAppliedNoiseSettings(merged);
     }, [flushNoiseSave]);
@@ -278,7 +278,7 @@ function TrainingPagePopupInner(props) {
        비워, 같은 문항을 다시 풀면 옛 선택 강조·옛 배치(순서화는 정답 배치일 수도)가 그대로 남았다. */
     const [replayCount, setReplayCount] = useState(0);
     // 다시하기 전 판들의 정답/전체 — 완료 때 onComplete 에 함께 넘긴다
-    const 앞판들Ref = useRef([]);
+    const previousRoundsRef = useRef([]);
     const [mode, setMode] = useState('center');
     const [closing, setClosing] = useState(false);
     // 닫힘 애니메이션(PAGE_POPUP_CLOSE_MS) 동안 다른 닫기 경로(ESC/닫기 버튼/완료)가 또 실행되면
@@ -300,7 +300,7 @@ function TrainingPagePopupInner(props) {
                 closingRef.current = false;
                 setClosing(false);
             }
-        }, 움직임최소화() ? 0 : PAGE_POPUP_CLOSE_MS);
+        }, prefersReducedMotion() ? 0 : PAGE_POPUP_CLOSE_MS);
     }, []);
     useEffect(() => () => { if (closeTimerRef.current)
         clearTimeout(closeTimerRef.current); }, []);
@@ -350,7 +350,7 @@ function TrainingPagePopupInner(props) {
     const [resultOverlay, setResultOverlay] = useState(null);
     /* 결과 요청 세대 — 결과보기가 올리고, 창을 닫거나(다시하기·완료·시나리오 초기화) 새로 요청하면 앞 요청은 늦은 것이 된다.
        결과 계산이 비동기일 때 늦게 온 옛 결과가 새 판 위에 결과 창을 다시 띄우거나 2회차 결과를 1회차 것으로 덮었다. */
-    const 결과세대Ref = useRef(0);
+    const resultGenerationRef = useRef(0);
     /**
      * **판 번호** — 한 판은 결과창이 닫힐 때 끝난다(다시하기도 닫고 시작한다).
      *
@@ -359,8 +359,8 @@ function TrainingPagePopupInner(props) {
      * 것은 **판이 다시 끝난 것이 아니다.** 그래서 "몇 번째 결과창인가" 가 아니라
      * **"몇 번째 판인가"** 로 가린다.
      */
-    const 판번호Ref = useRef(0);
-    const 결과창닫기 = () => { 결과세대Ref.current += 1; 판번호Ref.current += 1; setResultOverlay(null); };
+    const roundNoRef = useRef(0);
+    const closeResultOverlay = () => { resultGenerationRef.current += 1; roundNoRef.current += 1; setResultOverlay(null); };
     const [noticeMessage, setNoticeMessage] = useState('');
     const [flowState, setFlowState] = useState(() => createScenarioFlowState());
     const prevPageRef = useRef(typeof pageIndex === 'number' ? pageIndex : null);
@@ -370,7 +370,7 @@ function TrainingPagePopupInner(props) {
         if (!hasScenario && !isChildrenMode)
             return;
         setFlowState(createScenarioFlowState());
-        결과창닫기();
+        closeResultOverlay();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hasScenario, scenarioId, isChildrenMode]);
     /* eslint-enable react-hooks/set-state-in-effect */
@@ -434,14 +434,14 @@ function TrainingPagePopupInner(props) {
         const pageId = hasScenario
             ? getScenarioPageId(currentScenarioPage, effectivePageIndex)
             : (currentChildrenPage?.id || `children-page-${effectivePageIndex ?? 0}`);
-        const 지금 = new Date().toISOString();
+        const nowIso = new Date().toISOString();
         for (let i = 0; i <= effectiveStepIndex; i += 1) {
             const stepKey = hasScenario
                 ? getScenarioStepKey(currentScenarioSteps[i], i)
                 : `step-${i}`;
-            const k = 보인때열쇠(pageId, stepKey);
-            if (!스텝보인때.current.has(k))
-                스텝보인때.current.set(k, 지금);
+            const k = shownAtKey(pageId, stepKey);
+            if (!stepShownAt.current.has(k))
+                stepShownAt.current.set(k, nowIso);
         }
         /* `currentScenarioSteps` 는 그릴 때마다 새 배열이라 의존성에 넣으면 매번 돈다 —
            쪽·스텝 번호가 바뀔 때만 돌면 되고, 그 둘이 바뀌면 스텝 목록도 함께 바뀐다. */
@@ -548,8 +548,8 @@ function TrainingPagePopupInner(props) {
      * `state` 가 아니라 `ref` 다: 이 값은 **그릴 것을 바꾸지 않는다.** state 로 두면 스텝이
      * 바뀔 때마다 한 번씩 더 그린다.
      */
-    const 스텝보인때 = useRef(new Map());
-    const 보인때열쇠 = (pageId, stepKey) => `${pageId}\u0000${stepKey}`;
+    const stepShownAt = useRef(new Map());
+    const shownAtKey = (pageId, stepKey) => `${pageId}\u0000${stepKey}`;
     const setScenarioAnswer = useCallback((pageId, stepKey, payload) => {
         setFlowState((prev) => {
             const pageAnswers = prev.answersByPage[pageId] || {};
@@ -566,14 +566,14 @@ function TrainingPagePopupInner(props) {
                - `shownAt` 은 위 `스텝보인때` 에 적어 둔 것을 꺼낸다.
                글자꼴은 `Z` 다 — **여기서 짓는 때는 epoch 하나**라 지킬 지역 시계가 없다
                (앱이 글자로 보낸 때를 안 고치는 것과 다른 자리다, `trainingItemResults` 머리글). */
-            const 얹은payload = withStepTimes(payload, 스텝보인때.current.get(보인때열쇠(pageId, stepKey)), incomingTs);
+            const payloadWithTimes = withStepTimes(payload, stepShownAt.current.get(shownAtKey(pageId, stepKey)), incomingTs);
             return {
                 ...prev,
                 answersByPage: {
                     ...prev.answersByPage,
                     [pageId]: {
                         ...pageAnswers,
-                        [stepKey]: 얹은payload,
+                        [stepKey]: payloadWithTimes,
                     },
                 },
             };
@@ -691,8 +691,8 @@ function TrainingPagePopupInner(props) {
         return baseResult;
     };
     const handleViewResults = () => {
-        const 내결과 = ++결과세대Ref.current;
-        const 늦음 = () => 내결과 !== 결과세대Ref.current;
+        const myResult = ++resultGenerationRef.current;
+        const isStale = () => myResult !== resultGenerationRef.current;
         try {
             if (typeof document !== 'undefined' && document.body) {
                 try {
@@ -706,11 +706,11 @@ function TrainingPagePopupInner(props) {
         catch (e) { }
         if (hasScenario) {
             const maybe = buildScenarioResult();
-            setResultOverlay(결과계산중);
+            setResultOverlay(RESULT_PENDING);
             const maybeAny = maybe;
             Promise.resolve(maybeAny)
                 .then((data) => {
-                if (늦음())
+                if (isStale())
                     return;
                 if (data)
                     setResultOverlay(data);
@@ -720,7 +720,7 @@ function TrainingPagePopupInner(props) {
                 .catch((err) => {
                 if (import.meta.env?.DEV)
                     console.error('viewResults scenario handler failed', err);
-                if (늦음())
+                if (isStale())
                     return;
                 setResultOverlay({ isEmpty: true });
             });
@@ -728,11 +728,11 @@ function TrainingPagePopupInner(props) {
         }
         if (isChildrenMode) {
             const maybe = buildChildrenResult();
-            setResultOverlay(결과계산중);
+            setResultOverlay(RESULT_PENDING);
             const maybeAny = maybe;
             Promise.resolve(maybeAny)
                 .then((data) => {
-                if (늦음())
+                if (isStale())
                     return;
                 if (data)
                     setResultOverlay(data);
@@ -742,7 +742,7 @@ function TrainingPagePopupInner(props) {
                 .catch((err) => {
                 if (import.meta.env?.DEV)
                     console.error('viewResults children handler failed', err);
-                if (늦음())
+                if (isStale())
                     return;
                 setResultOverlay({ isEmpty: true });
             });
@@ -769,16 +769,16 @@ function TrainingPagePopupInner(props) {
                 setResultOverlay(maybeAny);
             }
             else {
-                setResultOverlay(maybeAny && typeof maybeAny.then === 'function' ? 결과계산중 : {});
+                setResultOverlay(maybeAny && typeof maybeAny.then === 'function' ? RESULT_PENDING : {});
             }
             // 결과가 비었거나 실패하면 막지 않는다(전과 같이 빈 창) — 계산 중 표시만 걷는다
-            const 계산중걷기 = () => { if (!늦음())
-                setResultOverlay((cur) => (cur === 결과계산중 ? {} : cur)); };
-            Promise.resolve(maybeAny).then((data) => { if (data && !늦음())
+            const clearPending = () => { if (!isStale())
+                setResultOverlay((cur) => (cur === RESULT_PENDING ? {} : cur)); };
+            Promise.resolve(maybeAny).then((data) => { if (data && !isStale())
                 setResultOverlay(data);
             else
-                계산중걷기(); }).catch((err) => { if (import.meta.env?.DEV)
-                console.error('viewResults child handler failed', err); 계산중걷기(); });
+                clearPending(); }).catch((err) => { if (import.meta.env?.DEV)
+                console.error('viewResults child handler failed', err); clearPending(); });
             return;
         }
         if (typeof externalOnResult === 'function') {
@@ -793,18 +793,18 @@ function TrainingPagePopupInner(props) {
                 setResultOverlay(maybeAny);
             }
             else {
-                setResultOverlay(maybeAny && typeof maybeAny.then === 'function' ? 결과계산중 : {});
+                setResultOverlay(maybeAny && typeof maybeAny.then === 'function' ? RESULT_PENDING : {});
             }
-            const 계산중걷기 = () => { if (!늦음())
-                setResultOverlay((cur) => (cur === 결과계산중 ? {} : cur)); };
+            const clearPending = () => { if (!isStale())
+                setResultOverlay((cur) => (cur === RESULT_PENDING ? {} : cur)); };
             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 && !늦음())
+            catch (e) { } if (data && !isStale())
                 setResultOverlay(data);
             else
-                계산중걷기(); }).catch((err) => { console.error('viewResults external handler failed', err); 계산중걷기(); });
+                clearPending(); }).catch((err) => { console.error('viewResults external handler failed', err); clearPending(); });
             return;
         }
     };
@@ -902,26 +902,26 @@ function TrainingPagePopupInner(props) {
     };
     /* 다음 문제로 넘어가면 포커스를 새 문제의 첫 칸으로. '다음 문제' 는 누르는 즉시 비활성이 되어 포커스가 body 로 빠졌다 —
        키보드 사용자는 매 문제 판 처음부터 Tab 을 다시 밟았다. 포커스가 판 안 다른 곳에 있으면 건드리지 않는다. */
-    const 앞쪽Ref = useRef(undefined);
+    const lastPageRef = useRef(undefined);
     useEffect(() => {
-        const 앞 = 앞쪽Ref.current;
-        앞쪽Ref.current = effectivePageIndex;
-        if (앞 === undefined || 앞 === effectivePageIndex)
+        const prevPage = lastPageRef.current;
+        lastPageRef.current = effectivePageIndex;
+        if (prevPage === undefined || prevPage === effectivePageIndex)
             return;
         // 키보드로 넘겼을 때만 — 마우스로 누른 사람에게 매 문제 '듣기' 초점 안내가 뜨지 않게
-        if (!키보드로눌렀나())
+        if (!wasKeyboardPress())
             return;
         const panel = panelRef.current;
         if (!panel)
             return;
         const active = document.activeElement;
-        const 잃음 = !active || active === document.body || !panel.contains(active) || active.disabled === true;
-        if (!잃음)
+        const lostFocus = !active || active === document.body || !panel.contains(active) || active.disabled === true;
+        if (!lostFocus)
             return;
-        const 첫칸 = panel.querySelector(`.training-steps ${FOCUSABLE_SELECTOR.split(', ').join(', .training-steps ')}`)
+        const firstCell = panel.querySelector(`.training-steps ${FOCUSABLE_SELECTOR.split(', ').join(', .training-steps ')}`)
             ?? Array.from(panel.querySelectorAll(FOCUSABLE_SELECTOR)).find((el) => !el.closest('[aria-hidden="true"]'));
         try {
-            첫칸?.focus();
+            firstCell?.focus();
         }
         catch (e) { }
     }, [effectivePageIndex]);
@@ -948,17 +948,17 @@ function TrainingPagePopupInner(props) {
      *
      * 세대로 **판마다 한 번**만 적는다(다시하기는 새 판이라 또 적는다).
      */
-    const 적은판Ref = useRef(-1);
-    const 판끝남적기 = useCallback(() => {
+    const reportedRoundRef = useRef(-1);
+    const reportRoundDone = useCallback(() => {
         if (!typeKey)
             return undefined;
         const ro = resultOverlay;
-        const { results, correct: finalCorrect, total } = 판결과셈(resultOverlay);
-        const 결과 = { correct: finalCorrect, total, attempt: 앞판들Ref.current.length + 1, previousAttempts: [...앞판들Ref.current] };
+        const { results, correct: finalCorrect, total } = countRoundResult(resultOverlay);
+        const result = { correct: finalCorrect, total, attempt: previousRoundsRef.current.length + 1, previousAttempts: [...previousRoundsRef.current] };
         /* 이미 이 판을 적었으면 **값만 돌려준다** — 닫을 때 `onComplete` 가 그 값을 받아야 한다 */
-        if (적은판Ref.current === 판번호Ref.current)
-            return 결과;
-        적은판Ref.current = 판번호Ref.current;
+        if (reportedRoundRef.current === roundNoRef.current)
+            return result;
+        reportedRoundRef.current = roundNoRef.current;
         /* 문항 하나하나를 함께 남긴다 — 여기서 접으면 어느 낱말을 틀렸는지 되찾을 길이 없다.
            '음소별 오류'(08-26 회의)가 이걸 원재료로 쓴다. */
         logTrainingCompletion({
@@ -974,39 +974,39 @@ function TrainingPagePopupInner(props) {
             dailyTotal: dailyTotal ?? null,
         });
         try {
-            onRoundFinished?.(결과);
+            onRoundFinished?.(result);
         }
         catch (e) { /* 알리는 쪽의 실패로 적는 일을 막지 않는다 */ }
-        return 결과;
+        return result;
     }, [typeKey, entryPoint, dailyTotal, itemRef, resultOverlay, onRoundFinished]);
     /* **결과창이 서면 적는다** — 닫기를 안 기다린다.
        결과를 세우는 자리가 넷이라(갈래·어린이·자식 손잡이·바깥 손잡이) 그 넷에 각각 적으면
        **한 자리가 안 따라간다.** 세운 값을 보고 여기 한 곳에서 적는다.
        `결과계산중`·빈 결과는 아직 사실이 아니다 — 적지 않는다. */
     useEffect(() => {
-        if (!resultOverlay || resultOverlay === 결과계산중)
+        if (!resultOverlay || resultOverlay === RESULT_PENDING)
             return;
         if (resultOverlay?.isEmpty)
             return;
         /* **셀 것이 있어야 적는다.** 결과가 `{}` 로 서는 길이 있다(자식이 빈손을 주거나 늦게
            실패했을 때) — 그것을 판이 끝난 것으로 적으면 `0/0` 짜리 기록이 쌓인다.
            그 꼴에서도 **닫을 때는 전과 같이 적힌다**(아래 그물) — 여기서 앞당기지만 않는다. */
-        if (!((판결과셈(resultOverlay).total ?? 0) > 0))
+        if (!((countRoundResult(resultOverlay).total ?? 0) > 0))
             return;
-        판끝남적기();
-    }, [resultOverlay, 판끝남적기]);
+        reportRoundDone();
+    }, [resultOverlay, reportRoundDone]);
     const handleResultDone = useCallback(() => {
         /* 여기서도 한 번 부른다 — **그물이다.** 위 효과가 못 돈 꼴(결과가 빈 채로 닫는 길 등)에서도
            적히게 두되, 이미 적었으면 세대가 막아 **두 번 안 적힌다.** */
-        const completeResult = 판끝남적기();
-        결과창닫기();
+        const completeResult = reportRoundDone();
+        closeResultOverlay();
         scheduleClose(() => {
             if (typeof onComplete === 'function')
                 onComplete(completeResult);
             if (typeof onBack === 'function')
                 onBack();
         });
-    }, [onComplete, onBack, 판끝남적기, setResultOverlay, scheduleClose]);
+    }, [onComplete, onBack, reportRoundDone, setResultOverlay, scheduleClose]);
     const handleNoticeClose = useCallback(() => setNoticeMessage(''), [setNoticeMessage]);
     const handleCloseBack = useCallback(() => {
         scheduleClose(() => { if (typeof onBack === 'function')
@@ -1027,11 +1027,11 @@ function TrainingPagePopupInner(props) {
                 onReplay: () => {
                     // 다시 푸는 판의 소요 시간은 지금부터 — 마운트 때 한 번만 찍어 앞 판 시간·결과 창을 보던 시간까지 섞였다(60초가 660초)
                     completionStartRef.current = Date.now();
-                    if (resultOverlay !== 결과계산중) {
-                        const { correct, total } = 판결과셈(resultOverlay);
-                        앞판들Ref.current.push({ correct, total });
+                    if (resultOverlay !== RESULT_PENDING) {
+                        const { correct, total } = countRoundResult(resultOverlay);
+                        previousRoundsRef.current.push({ correct, total });
                     }
-                    결과창닫기();
+                    closeResultOverlay();
                     setReplayCount((n) => n + 1);
                     if (hasScenario) {
                         setFlowState(createScenarioFlowState());
@@ -1055,7 +1055,7 @@ function TrainingPagePopupInner(props) {
                     catch (e) { }
                 },
                 onClose: handleResultDone,
-                pending: resultOverlay === 결과계산중,
+                pending: resultOverlay === RESULT_PENDING,
             })), (resultOverlay?.isEmpty && (_jsx("div", { className: "page-popup page-popup--result-empty", role: "dialog", "aria-modal": "true", "aria-label": t('training.result.eyebrow', '훈련 완료'), children: _jsxs("div", { className: "page-popup__panel page-popup__panel--center", children: [_jsx("div", { className: "page-popup__scroll", children: _jsx("div", { className: `page-popup__content page-popup__content--center${props.contentFull ? ' page-popup__content--full' : ''}`, children: _jsx("div", { className: "page-popup__empty", children: t('training.result.eyebrow', '훈련 완료') }) }) }), _jsx("div", { className: "page-popup__bottom", children: _jsx(Button, { htmlType: "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)

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

@@ -20,9 +20,9 @@ export default function TrainingPagePopupBottom({ useNoiseSettingBtn = false, on
     const mobileRef = useRef(null);
     const noisePlayer = useNoisePlayer();
     /* 쪽이 없으면(0) 쪽 이동만 숨기고 끝내는 단추는 둔다 — 전에는 0 === -1 이라 단추가 하나도 없어 판을 끝낼 수 없었다 */
-    const 쪽있음 = pageCount > 0;
-    const useNextBtn = 쪽있음 && pageIndex < pageCount - 1;
-    const useResultBtn = !쪽있음 || pageIndex >= pageCount - 1;
+    const hasPages = pageCount > 0;
+    const useNextBtn = hasPages && pageIndex < pageCount - 1;
+    const useResultBtn = !hasPages || pageIndex >= pageCount - 1;
     const isBtnActive = stepIndex === Math.max(0, stepCount);
     // 노이즈 설정 버튼이 비활성화되면 열려 있던 팝업을 닫는 의도된 동기화다
     /* eslint-disable react-hooks/set-state-in-effect */
@@ -65,35 +65,35 @@ export default function TrainingPagePopupBottom({ useNoiseSettingBtn = false, on
        굴려서 꺼낼 수도 없었다(말귀 실측 2026-09-22: 훈련을 이어갈 수 없다). 폰에서는 토글 단추
        **위에 떠서** 보인다(사용자 지시). 데스크톱은 그대로 바닥 줄에 나란히 선다 — 거기서는
        자리가 넉넉하다(1659px 창에서 왼쪽 묶음 434px). */
-    const 폰 = useMediaQuery('(max-width: 767px)');
-    const 미터토글ref = useRef(null);
-    const [미터자리, set미터자리] = useState(null);
+    const isPhone = useMediaQuery('(max-width: 767px)');
+    const meterToggleRef = useRef(null);
+    const [meterRect, setMeterRect] = useState(null);
     const handleToggleMeters = useCallback(() => {
         setShowMeters(prev => {
-            const 다음 = !prev;
-            set미터자리(다음 ? (미터토글ref.current?.getBoundingClientRect() ?? null) : null);
-            return 다음;
+            const next = !prev;
+            setMeterRect(next ? (meterToggleRef.current?.getBoundingClientRect() ?? null) : null);
+            return next;
         });
     }, []);
-    const 미터닫기 = useCallback(() => { setShowMeters(false); set미터자리(null); }, []);
+    const closeMeters = useCallback(() => { setShowMeters(false); setMeterRect(null); }, []);
     /* **결과 창이 뜨면 미터를 끈다**(사용자 지시 2026-09-22). 결과를 보는 동안 미터가 떠 있을
        까닭이 없고, 창을 닫고 다음 판을 시작할 때도 깨끗한 자리에서 시작하는 편이 낫다.
        아래 설정 창 동기화와 같은 결이다 — 의도한 동기화라 set-state-in-effect 를 연다. */
     /* eslint-disable-next-line react-hooks/set-state-in-effect */
     useEffect(() => { if (resultOpen) {
         setShowMeters(false);
-        set미터자리(null);
+        setMeterRect(null);
     } }, [resultOpen]);
-    const 미터들 = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "pp-bottom__meter", children: [_jsx("span", { className: "pp-bottom__meter-label caption-1", children: t('training.meter.sentence', '재생') }), _jsx(AudioMeter, { analyser: noisePlayer?.mainAnalyser ?? null, orientation: "horizontal", length: 112, label: "db", labelPos: "left", ariaLabel: t('training.meter.sentence', '재생') })] }), _jsxs("div", { className: "pp-bottom__meter", children: [_jsx("span", { className: "pp-bottom__meter-label caption-1", children: t('training.meter.noise', '소음') }), _jsx(AudioMeter, { analyser: noisePlayer?.noiseAnalyser ?? null, orientation: "horizontal", length: 112, label: "db", labelPos: "left", ariaLabel: t('training.meter.noise', '소음') })] })] }));
+    const meters = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "pp-bottom__meter", children: [_jsx("span", { className: "pp-bottom__meter-label caption-1", children: t('training.meter.sentence', '재생') }), _jsx(AudioMeter, { analyser: noisePlayer?.mainAnalyser ?? null, orientation: "horizontal", length: 112, label: "db", labelPos: "left", ariaLabel: t('training.meter.sentence', '재생') })] }), _jsxs("div", { className: "pp-bottom__meter", children: [_jsx("span", { className: "pp-bottom__meter-label caption-1", children: t('training.meter.noise', '소음') }), _jsx(AudioMeter, { analyser: noisePlayer?.noiseAnalyser ?? null, orientation: "horizontal", length: 112, label: "db", labelPos: "left", ariaLabel: t('training.meter.noise', '소음') })] })] }));
     /* 설정 창은 판 밖(body)으로 포털된다 — 열리면 초점을 창 첫 칸으로, 닫히면 연 단추로(useFloatingFocus 참고) */
-    const 창열림 = useNoiseSettingBtn && open;
-    useFloatingFocus(창열림, () => (typeof document !== 'undefined' ? document.querySelector('.noise-settings__header')?.closest('.tooltip-content') ?? null : null), () => {
-        const 보이는단추 = [desktopRef.current, mobileRef.current]
+    const panelOpen = useNoiseSettingBtn && open;
+    useFloatingFocus(panelOpen, () => (typeof document !== 'undefined' ? document.querySelector('.noise-settings__header')?.closest('.tooltip-content') ?? null : null), () => {
+        const visibleButtons = [desktopRef.current, mobileRef.current]
             .map((w) => w?.querySelector('button') ?? null)
             .find((b) => !!b && b.getClientRects().length > 0);
-        return 보이는단추 ?? desktopRef.current?.querySelector('button') ?? null;
+        return visibleButtons ?? desktopRef.current?.querySelector('button') ?? null;
     });
     return (_jsxs("div", { className: "pp-bottom", children: [_jsxs("div", { className: "pp-bottom__left", children: [useNoiseSettingBtn ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "pp-bottom__settings--desktop", children: _jsx("div", { ref: desktopRef, className: "pp-bottom__tooltip-trigger", "data-tooltip-ignore": true, children: _jsx(Button, { htmlType: "button", size: 56, type: "bar", icon: 'settings', onClick: handleDesktopClick, 
                                         /* 여닫이 — aria-pressed(selected) 대신 aria-expanded. 보이는 선택 모양은 같은 클래스로 */
-                                        className: open ? 'is-selected' : undefined, "aria-expanded": open, "aria-haspopup": "dialog", ariaLabel: t('training.trainingSettingsTitle', '훈련 설정'), label: t('training.trainingSettingsTitle', '훈련 설정'), minWidth: 140 }) }) }), _jsx("div", { className: "pp-bottom__settings--mobile", children: _jsx("div", { ref: mobileRef, className: "pp-bottom__tooltip-trigger", "data-tooltip-ignore": true, children: _jsx(Button, { htmlType: "button", size: 56, type: "dot", shape: "pill", icon: 'settings', onClick: handleMobileClick, className: open ? 'is-selected' : undefined, "aria-expanded": open, "aria-haspopup": "dialog", ariaLabel: t('training.settings', '설정') }) }) })] })) : null, useNoiseSettingBtn && (_jsx("div", { ref: 미터토글ref, className: "pp-bottom__meter-trigger", "data-tooltip-ignore": true, children: _jsx(Button, { htmlType: "button", size: 40, type: "dot", shape: "pill", icon: "audio-lines", onClick: handleToggleMeters, selected: showMeters, "aria-expanded": 폰 ? showMeters : undefined, ariaLabel: t('training.meter.toggle', '오디오 미터 표시') }) })), useNoiseSettingBtn && showMeters && !폰 && (_jsx("div", { className: "pp-bottom__meters", children: 미터들 }))] }), useNoiseSettingBtn && showMeters && 폰 && 미터자리 && (_jsx(Tooltip, { anchorRect: 미터자리, onClose: 미터닫기, ariaLabel: t('training.meter.toggle', '오디오 미터 표시'), children: _jsx("div", { className: "pp-bottom__meters pp-bottom__meters--floating", children: 미터들 }) })), _jsxs("div", { className: "pp-bottom__right", children: [useResultBtn && (_jsx(Button, { htmlType: "button", size: 56, type: "bar", icon: "check", onClick: typeof onResult === "function" ? onResult : onNext, ariaLabel: t('training.viewResult', '결과보기'), label: t('training.viewResult', '결과보기'), variant: "main", disabled: !isBtnActive })), useNextBtn && (_jsx(Button, { htmlType: "button", size: 56, type: "bar", rightIcon: "chevron-right", align: "right", onClick: onNext, ariaLabel: t('training.nextQuestion', '다음 문제'), label: t('training.nextQuestion', '다음 문제'), variant: "main", disabled: !isBtnActive }))] }), useNoiseSettingBtn && open && (_jsx(NoiseSettingsTooltip, { anchorRect: anchorRect, onClose: handleCloseTooltip, hideNoiseRows: hideNoiseRows }))] }));
+                                        className: open ? 'is-selected' : undefined, "aria-expanded": open, "aria-haspopup": "dialog", ariaLabel: t('training.trainingSettingsTitle', '훈련 설정'), label: t('training.trainingSettingsTitle', '훈련 설정'), minWidth: 140 }) }) }), _jsx("div", { className: "pp-bottom__settings--mobile", children: _jsx("div", { ref: mobileRef, className: "pp-bottom__tooltip-trigger", "data-tooltip-ignore": true, children: _jsx(Button, { htmlType: "button", size: 56, type: "dot", shape: "pill", icon: 'settings', onClick: handleMobileClick, className: open ? 'is-selected' : undefined, "aria-expanded": open, "aria-haspopup": "dialog", ariaLabel: t('training.settings', '설정') }) }) })] })) : null, useNoiseSettingBtn && (_jsx("div", { ref: meterToggleRef, className: "pp-bottom__meter-trigger", "data-tooltip-ignore": true, children: _jsx(Button, { htmlType: "button", size: 40, type: "dot", shape: "pill", icon: "audio-lines", onClick: handleToggleMeters, selected: showMeters, "aria-expanded": isPhone ? showMeters : undefined, ariaLabel: t('training.meter.toggle', '오디오 미터 표시') }) })), useNoiseSettingBtn && showMeters && !isPhone && (_jsx("div", { className: "pp-bottom__meters", children: meters }))] }), useNoiseSettingBtn && showMeters && isPhone && meterRect && (_jsx(Tooltip, { anchorRect: meterRect, onClose: closeMeters, ariaLabel: t('training.meter.toggle', '오디오 미터 표시'), children: _jsx("div", { className: "pp-bottom__meters pp-bottom__meters--floating", children: meters }) })), _jsxs("div", { className: "pp-bottom__right", children: [useResultBtn && (_jsx(Button, { htmlType: "button", size: 56, type: "bar", icon: "check", onClick: typeof onResult === "function" ? onResult : onNext, ariaLabel: t('training.viewResult', '결과보기'), label: t('training.viewResult', '결과보기'), variant: "main", disabled: !isBtnActive })), useNextBtn && (_jsx(Button, { htmlType: "button", size: 56, type: "bar", rightIcon: "chevron-right", align: "right", onClick: onNext, ariaLabel: t('training.nextQuestion', '다음 문제'), label: t('training.nextQuestion', '다음 문제'), variant: "main", disabled: !isBtnActive }))] }), useNoiseSettingBtn && open && (_jsx(NoiseSettingsTooltip, { anchorRect: anchorRect, onClose: handleCloseTooltip, hideNoiseRows: hideNoiseRows }))] }));
 }