@ihabdevteam/core 0.150.0 → 0.152.0

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useToastLifecycle } from './useToastLifecycle';
 import './Toast.css';
@@ -12,6 +12,20 @@ onClose = () => { }, duration = 2000, // 0 = persistent until message cleared
     /* 톡(터치)은 멈추지 않는다 — 톡하면 호환 mouseenter 로 멈추고 mouseleave 는 다른 곳을 톡하기 전까지 안 와 알림이 사라지지 않았다.
        마우스 머무름·키보드 포커스는 그대로 멈춘다. 마지막 포인터 종류를 pointerenter 로 기억해 가른다. */
     const 마지막포인터 = useRef(null);
+    /* **첫 문구가 안 읽혔다** — live 영역(role=status)이 문구와 한꺼번에 문서에 들어오면 낭독기는 "바뀐 것" 으로 보지 않는다.
+       영역을 먼저 붙이고, 다음 틱(등장 애니메이션이 시작되는 두 프레임 뒤)에 문구를 접근 트리에 넣는다.
+       문구 노드는 처음부터 두고 `aria-hidden` 만 푼다 — 글자를 늦게 넣으면 문구를 곧바로 찾는 시험(getByText·status 의
+       textContent)이 깨지고, 늘 비어 있는 status 영역을 따로 두면 getByRole('status') 가 둘을 찾는다. 이미 떠 있는 동안 바뀐 문구는 곧바로 읽힌다. */
+    const [읽힘, set읽힘] = useState(false);
+    useEffect(() => {
+        // 등장(showing)을 따라 한 번 켜고, 내려가면 끈다 — 외부(애니메이션 수명) 상태와의 의도된 동기화
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        if (showing)
+            set읽힘(true);
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        else if (!mounted)
+            set읽힘(false);
+    }, [showing, mounted]);
     if (!mounted)
         return null;
     const normalizedType = type === 'notice' || type === 'warning' ? type : 'normal';
@@ -22,7 +36,7 @@ onClose = () => { }, duration = 2000, // 0 = persistent until message cleared
        쪽이 미리 정하는 것이고, 읽는 사람이 **그 자리에서** 멈출 수는 없었다.
        다시 움직일 때는 **남은 시간부터** 돈다 — 처음부터가 아니다. */
     _jsx("div", { ref: popupRef, className: `toast toast--${position} ${showing ? 'is-visible' : ''}`, role: "status", "aria-live": "polite", onPointerEnter: (e) => { 마지막포인터.current = e.pointerType; }, onMouseEnter: () => { if (마지막포인터.current !== 'touch')
-            pause(); }, onMouseLeave: resume, onFocusCapture: pause, onBlurCapture: resume, children: _jsx("div", { className: `toast__inner toast__inner--${normalizedType} body-2`, children: message }) }));
+            pause(); }, onMouseLeave: resume, onFocusCapture: pause, onBlurCapture: resume, children: _jsx("div", { className: `toast__inner toast__inner--${normalizedType} body-2`, "aria-hidden": 읽힘 || showing ? undefined : true, children: message }) }));
     if (typeof document !== 'undefined') {
         return createPortal(el, document.body);
     }

package/dist/packages/core/src/components/Tooltip/Tooltip.css

@@ -42,9 +42,11 @@
   padding: 0 2px 10px;
 }
 
+/* 닫힘 페이드 — **애니메이션으로** 준다. 열림 애니메이션(tooltip-pop, fill-mode both)이 끝난 값(opacity 1)을 붙들고 있어
+   opacity·transition 선언은 애니메이션 값에 져서 200ms 동안 그대로 보이다 툭 사라졌다. 같은 animation 속성을 바꿔 끼운다. */
 .tooltip-content.is-closing {
   opacity: 0;
-  transition: opacity 200ms ease, transform 200ms ease;
+  animation: tooltip-fade-out 200ms ease both;
 }
 
 /* Placement-specific initial offsets (used by open animation) */

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

@@ -5,6 +5,7 @@ import { createPortal } from 'react-dom';
 import './Tooltip.css';
 import { FOCUSABLE_SELECTOR } from '../../hooks/useFocusTrap';
 import { pushEsc } from '../../hooks/escStack';
+import { usePrefersReducedMotion } from '../../hooks/usePrefersReducedMotion';
 /** @public */
 export default function Tooltip(props) {
     const { anchorRect, anchorEl, offset = 20, edgeMargin = 20, onClose, closeOnOutsideClick = true, className = '', role = 'dialog', ariaLabel = '', children, backdrop = false, isMobilePopup = false, useBorder = true, header, } = props || {};
@@ -202,6 +203,8 @@ export default function Tooltip(props) {
     // 불렸다. ref 로 "이미 닫는 중"을 즉시 표시해 한 번만 지나가게 한다(Popup 과 같은 방식).
     const closingRef = useRef(false);
     const 닫기타이머Ref = useRef(null);
+    /* '동작 줄이기' 면 닫기 대기를 0 으로(페이드가 없으니 기다릴 까닭도 없다) */
+    const 동작줄이기 = usePrefersReducedMotion();
     const startClose = useCallback((immediate = false) => {
         /* 닫기를 넘길 곳(onClose)이 없으면 아무것도 하지 않는다. 예전에는 그래도 is-closing 을
            붙여, 부모가 치우지 않는 툴팁이 **흐려진 채 사라진 것처럼** 그 자리에 남았다
@@ -237,8 +240,8 @@ export default function Tooltip(props) {
                 closingRef.current = false;
                 setClosing(false);
             }
-        }, 200);
-    }, [closing, onClose, setClosing]);
+        }, 동작줄이기 ? 0 : 200);
+    }, [closing, onClose, setClosing, 동작줄이기]);
     useEffect(() => () => { if (닫기타이머Ref.current)
         clearTimeout(닫기타이머Ref.current); }, []);
     useEffect(() => {

package/dist/packages/core/src/components/Tooltip/tooltipConstants.d.ts

@@ -15,12 +15,20 @@ export declare function getNoiseTypeOptions(t: TFunction): {
     value: string;
     icon: string;
 }[];
-/** @public */
+/**
+ * @deprecated 모듈을 처음 읽을 때의 언어로 **한 번만** 만든 라벨이라 언어를 바꿔도 따라가지 않는다
+ * (서버에서는 늘 기본 언어). `getNoiseLevelOptions(t)` 를 렌더 안에서 `useTranslation()` 의 t 로 부른다.
+ * @public
+ */
 export declare const NOISE_LEVEL_OPTIONS: {
     label: string;
     value: number;
 }[];
-/** @public */
+/**
+ * @deprecated 모듈을 처음 읽을 때의 언어로 **한 번만** 만든 라벨이라 언어를 바꿔도 따라가지 않는다
+ * (서버에서는 늘 기본 언어). `getNoiseTypeOptions(t)` 를 렌더 안에서 `useTranslation()` 의 t 로 부른다.
+ * @public
+ */
 export declare const NOISE_TYPE_OPTIONS: {
     label: string;
     value: string;

package/dist/packages/core/src/components/Tooltip/tooltipConstants.js

@@ -27,9 +27,17 @@ export function getNoiseTypeOptions(t) {
 }
 // Backwards-compat static exports (uses i18n singleton — labels won't react to runtime language changes)
 import i18n from '../../i18n';
-/** @public */
+/**
+ * @deprecated 모듈을 처음 읽을 때의 언어로 **한 번만** 만든 라벨이라 언어를 바꿔도 따라가지 않는다
+ * (서버에서는 늘 기본 언어). `getNoiseLevelOptions(t)` 를 렌더 안에서 `useTranslation()` 의 t 로 부른다.
+ * @public
+ */
 export const NOISE_LEVEL_OPTIONS = getNoiseLevelOptions(i18n.t.bind(i18n));
-/** @public */
+/**
+ * @deprecated 모듈을 처음 읽을 때의 언어로 **한 번만** 만든 라벨이라 언어를 바꿔도 따라가지 않는다
+ * (서버에서는 늘 기본 언어). `getNoiseTypeOptions(t)` 를 렌더 안에서 `useTranslation()` 의 t 로 부른다.
+ * @public
+ */
 export const NOISE_TYPE_OPTIONS = getNoiseTypeOptions(i18n.t.bind(i18n));
 export default {
     PLAYBACK_SPEED_OPTIONS,

package/dist/packages/core/src/components/TopBanner.d.ts

@@ -4,7 +4,7 @@ import './TopBanner.css';
 export interface TopBannerProps {
     /** 로테이션할 슬라이드들 — 각 자식이 슬라이드 한 장 */
     children: ReactNode;
-    /** 자동 롤링 간격(ms). `0`이면 자동 롤링 안 함 */
+    /** 자동 롤링 간격(ms). `0`이면 자동 롤링 안 함. OS '동작 줄이기' 가 켜져 있어도 자동 롤링하지 않는다(점으로 넘긴다). */
     interval?: number;
     /**
      * 슬라이드별 인디케이터 톤. 슬라이드 배경이 어두우면 `'light'`(흰 점),

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

@@ -1,8 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../utils/cx';
-import { Children, useEffect, useState } from 'react';
+import { Children, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { usePrefersReducedMotion } from '../hooks/usePrefersReducedMotion';
 import './TopBanner.css';
 /**
  * 페이지 상단 롤링 배너 컨테이너.
@@ -23,18 +24,75 @@ export default function TopBanner({ children, interval = 5000, dotTone, classNam
        inert 가 되고 포커스가 body 로 떨어졌다(반대로 마우스 아래에서 포커스만 나가도 넘어갔다) */
     const [hovered, setHovered] = useState(false);
     const [focused, setFocused] = useState(false);
-    const paused = hovered || focused;
-    // 슬라이드 수가 줄어도 범위를 벗어나지 않도록
-    const current = count > 0 ? index % count : 0;
+    /* 터치 — 누르는 동안과 뗀 뒤 5초는 멈춘다(배너 밖을 톡하면 곧바로 다시 돈다). 전에는 톡의 호환 mouseenter 로 멈추고 mouseleave 가
+       안 와 영영 멈추거나, 누르고 읽는 사이 장이 넘어갔다. 마지막 포인터가 터치면 mouseenter 는 멈춤으로 치지 않는다. */
+    const [touched, setTouched] = useState(false);
+    const 마지막포인터 = useRef(null);
+    const 터치타이머 = useRef(null);
+    const sectionRef = useRef(null);
+    /* '동작 줄이기' — 저절로 넘어가는 장은 움직임이고 읽는 사이 내용이 바뀐다(WCAG 2.2.2). 자동 롤링을 끈다 */
+    const 동작줄이기 = usePrefersReducedMotion();
+    const paused = hovered || focused || touched;
+    /* 슬라이드 수가 줄면 **지금 장을 범위 안으로 조인다** — `index % count` 는 3장 중 셋째(2)를 보다 2장이 되면 첫째(0)로 튀었다 */
+    const current = count > 0 ? Math.min(index, count - 1) : 0;
     useEffect(() => {
-        if (count < 2 || interval <= 0 || paused)
+        if (count < 2 || interval <= 0 || paused || 동작줄이기)
             return;
-        const id = window.setInterval(() => setIndex(i => (i + 1) % count), interval);
+        const id = window.setInterval(() => setIndex(i => (Math.min(i, count - 1) + 1) % count), interval);
         return () => window.clearInterval(id);
-    }, [count, interval, paused]);
+    }, [count, interval, paused, 동작줄이기]);
+    const 터치재개예약 = (ms) => {
+        if (터치타이머.current != null)
+            window.clearTimeout(터치타이머.current);
+        터치타이머.current = window.setTimeout(() => { 터치타이머.current = null; setTouched(false); }, ms);
+    };
+    useEffect(() => () => { if (터치타이머.current != null)
+        window.clearTimeout(터치타이머.current); }, []);
+    /* 배너 밖을 톡하면 곧바로 다시 돈다 */
+    useEffect(() => {
+        if (!touched)
+            return;
+        const 밖톡 = (e) => {
+            if (e.pointerType !== 'touch')
+                return;
+            if (sectionRef.current && sectionRef.current.contains(e.target))
+                return;
+            if (터치타이머.current != null) {
+                window.clearTimeout(터치타이머.current);
+                터치타이머.current = null;
+            }
+            setTouched(false);
+        };
+        document.addEventListener('pointerdown', 밖톡, true);
+        return () => document.removeEventListener('pointerdown', 밖톡, true);
+    }, [touched]);
     if (count === 0)
         return null;
-    return (_jsxs("section", { className: cx('top-banner', className), "aria-label": ariaLabel, "aria-roledescription": "carousel", onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onFocus: () => setFocused(true), onBlur: (e) => { if (!e.currentTarget.contains(e.relatedTarget))
+    return (_jsxs("section", { ref: sectionRef, className: cx('top-banner', className), "aria-label": ariaLabel, "aria-roledescription": "carousel", onPointerEnter: (e) => { 마지막포인터.current = e.pointerType; }, onPointerDown: (e) => {
+            마지막포인터.current = e.pointerType;
+            if (e.pointerType !== 'touch')
+                return;
+            if (터치타이머.current != null) {
+                window.clearTimeout(터치타이머.current);
+                터치타이머.current = null;
+            }
+            setTouched(true);
+        }, onPointerUp: (e) => { if (e.pointerType === 'touch')
+            터치재개예약(5000); }, onPointerCancel: (e) => { if (e.pointerType === 'touch')
+            터치재개예약(5000); }, onMouseEnter: () => { if (마지막포인터.current !== 'touch')
+            setHovered(true); }, onMouseLeave: () => setHovered(false), 
+        /* 포커스 멈춤은 **보이는 포커스(:focus-visible)** 일 때만 — 마우스로 누른 단추(점·배너 단추)에 남은 포커스로 멈추면
+           마우스가 떠난 뒤에도 영영 멈춰 있었다. 키보드로 들어온 포커스는 그대로 멈춘다(0545ddf) */
+        onFocus: (e) => {
+            let 보임 = true;
+            try {
+                보임 = e.target.matches(':focus-visible');
+            }
+            catch {
+                보임 = true;
+            }
+            setFocused(보임);
+        }, onBlur: (e) => { if (!e.currentTarget.contains(e.relatedTarget))
             setFocused(false); }, children: [_jsx("div", { className: "top-banner__viewport", children: _jsx("div", { className: "top-banner__track", style: { transform: `translateX(-${current * 100}%)` }, children: slides.map((slide, i) => (_jsx("div", { className: "top-banner__slide", "aria-hidden": i !== current, ...(i !== current ? { inert: true } : {}), children: slide }, i))) }) }), count > 1 && (_jsx("div", { className: `top-banner__dots${(dotTone?.[current] ?? 'light') === 'dark' ? ' top-banner__dots--dark' : ''}`, children: slides.map((_, i) => (_jsx("button", { type: "button", className: `top-banner__dot${i === current ? ' top-banner__dot--active' : ''}`, "aria-label": t('topBanner.dotAriaLabel', {
                         count, index: i + 1, defaultValue: `${count}개 중 ${i + 1}번째 배너`,
                     }), "aria-current": i === current, onClick: () => setIndex(i) }, i))) }))] }));

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

@@ -6,6 +6,7 @@ export default function WaveForm(props: {
     segments?: Segment[] | null;
     progress?: number;
     totalDuration?: number;
+    /** @deprecated 읽지 않는다 — 구간 이동은 재생기의 번호 단추가 맡는다. 넘겨도 아무 일도 없다(지우면 넘기던 쪽 타입이 깨져 남겨 둔다). */
     onSegmentClick?: (idx: number) => void;
     waveProgressRef?: MutableRefObject<HTMLDivElement | null>;
     noiseSrc?: string | null;

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

@@ -35,11 +35,32 @@ export default function WaveForm(props) {
     // 이전/다음 연타로 트랙이 연속 변경되면 fetch+decode가 병렬로 떠서, 늦게 도착한
     // 이전 트랙의 피크가 최신 파형을 덮어쓸 수 있다 — 세대 토큰으로 마지막 요청만 반영한다.
     const peaksGenRef = useRef(0);
-    const computePeaks = useCallback(async (url, barsParam) => {
+    /** 칸의 지금 폭으로 막대 수·간격을 잰다. 칸이 없거나 폭이 0(숨은 칸)이면 폭 100 으로 본다(전과 같다). */
+    const measureBars = useCallback(() => {
+        const el = waveformRef.current;
+        const parentEl = outerRef && outerRef.current ? outerRef.current : (el ? el.closest('.audio-player__wave') : null);
+        const rect = parentEl ? parentEl.getBoundingClientRect() : (el ? el.getBoundingClientRect() : null);
+        const rawWidth = rect ? rect.width : 0;
+        const width = rect ? Math.max(100, rect.width) : 320;
+        const height = rect ? rect.height : 0;
+        const bars = Math.max(MIN_BARS, Math.min(MAX_BARS, Math.floor((width + BAR_GAP) / (BAR_WIDTH + BAR_GAP))));
+        const usedBarWidth = bars * BAR_WIDTH;
+        const gapCount = Math.max(0, bars - 1);
+        const gap = Math.max(0, gapCount > 0 ? (width - usedBarWidth) / gapCount : BAR_GAP);
+        return { bars, gap, height, width: rawWidth };
+    }, []);
+    /* 지금 그리는 주소와 막대 수 — 폭이 바뀌어 다시 잴 때 쓴다 */
+    const urlRef = useRef(undefined);
+    const barsRef = useRef(null);
+    const computePeaks = useCallback(async (url, barsParam, { quiet = false } = {}) => {
         const gen = ++peaksGenRef.current;
         const fresh = () => peaksGenRef.current === gen;
         try {
-            setWaveReady(false);
+            /* quiet — 폭이 바뀌어 막대 수만 다시 뽑는 것. 이미 그려진 파형을 '준비 안 됨'으로 돌리지 않는다
+               (재생 중 파형이 꺼졌다 켜지거나 재생이 파형을 다시 기다리지 않게). */
+            if (!quiet)
+                setWaveReady(false);
+            urlRef.current = url;
             if (!url) {
                 if (fresh())
                     setWavePeaks(null);
@@ -54,23 +75,17 @@ export default function WaveForm(props) {
                         await new Promise((r) => requestAnimationFrame(r));
                     }
                     await new Promise((r) => requestAnimationFrame(r));
-                    const el = waveformRef.current;
-                    const parentEl = outerRef && outerRef.current ? outerRef.current : (el ? el.closest('.audio-player__wave') : null);
-                    const rect = parentEl ? parentEl.getBoundingClientRect() : (el ? el.getBoundingClientRect() : null);
-                    const width = rect ? Math.max(100, rect.width) : 320;
-                    const height = rect ? rect.height : 0;
-                    if (height > 0)
-                        setWaveHeightPx(height);
-                    bars = Math.max(MIN_BARS, Math.min(MAX_BARS, Math.floor((width + BAR_GAP) / (BAR_WIDTH + BAR_GAP))));
-                    const usedBarWidth = bars * BAR_WIDTH;
-                    const gapCount = Math.max(0, bars - 1);
-                    const computedGap = gapCount > 0 ? (width - usedBarWidth) / gapCount : BAR_GAP;
-                    setBarGap(Math.max(0, computedGap));
+                    const m = measureBars();
+                    if (m.height > 0)
+                        setWaveHeightPx(m.height);
+                    bars = m.bars;
+                    setBarGap(m.gap);
                 }
                 catch (e) {
                     bars = 120;
                 }
             }
+            barsRef.current = bars;
             const peaks = await computePeaksFromUrl(url, bars);
             if (!fresh())
                 return;
@@ -94,7 +109,42 @@ export default function WaveForm(props) {
             setWavePeaks(null);
             setWaveReady(false);
         }
-    }, [setWaveReady, setWavePeaks, setWaveHeightPx, setBarGap, setBarsTotal]);
+    }, [setWaveReady, setWavePeaks, setWaveHeightPx, setBarGap, setBarsTotal, measureBars]);
+    /* 막대 수는 칸 폭으로 정한다 — 전에는 처음 한 번만 재서, 숨은 칸(접힌 판·display:none 탭)에서 마운트되면
+       폭 0 → 17개로 굳어 칸이 드러난 뒤에도 성긴 파형이 남았다. 폭이 바뀌어 막대 수가 달라지면 다시 잰다.
+       ResizeObserver 가 없는 환경은 전처럼 처음 한 번만 잰다. */
+    useEffect(() => {
+        const el = outerRef.current;
+        if (!el || typeof ResizeObserver === 'undefined')
+            return;
+        let raf = null;
+        const ro = new ResizeObserver(() => {
+            if (raf !== null)
+                cancelAnimationFrame(raf);
+            raf = requestAnimationFrame(() => {
+                raf = null;
+                try {
+                    const m = measureBars();
+                    if (m.width <= 0)
+                        return; // 아직(또 다시) 숨어 있다 — 잴 수 없다
+                    if (m.height > 0)
+                        setWaveHeightPx(m.height);
+                    if (barsRef.current === null || m.bars === barsRef.current)
+                        return;
+                    const url = urlRef.current;
+                    setBarGap(m.gap);
+                    if (url)
+                        computePeaks(url, m.bars, { quiet: true }).catch(() => { });
+                    else
+                        barsRef.current = m.bars;
+                }
+                catch (e) { }
+            });
+        });
+        ro.observe(el);
+        return () => { ro.disconnect(); if (raf !== null)
+            cancelAnimationFrame(raf); };
+    }, [measureBars, computePeaks]);
     // src/segments 변경 시 파형을 다시 계산하는 의도된 fetch-kickoff이다
     /* eslint-disable react-hooks/set-state-in-effect */
     useEffect(() => {

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

@@ -12,8 +12,9 @@ export declare const NOISE_RATIO_MAX = 2;
 export declare const NOISE_RATIO_STEP = 0.1;
 /**
  * @public 설정의 소음 비율(배). `noiseRatio` 가 있으면 그것(0~2 로 자름), 없으면 **옛 값에서
- * 들리던 그대로** 옮긴다 — (level/9) ÷ mainVolume 을 0~2 로 자르고 0.1 단위 반올림.
- * mainVolume 이 0 이면 옛 값으로는 비율을 알 수 없어 1.
+ * 들리던 그대로** 옮긴다 — (level/9) ÷ mainVolume 을 **반올림 없이** 0.1~2 로 조인다(말귀 `noiseRatioOfPct` 와 같은 범위).
+ * 전에는 0.1 칸으로 반올림해 옛 소리와 최대 0.05배 달라졌다(2026-09-15 결정). level 0(옛날에 소음이 안 들리던 기록)은
+ * 0 그대로 — 0.1 로 올리면 없던 소음이 생긴다. mainVolume 이 0 이면 옛 값으로는 비율을 알 수 없어 1.
  */
 export declare function noiseRatioOf(settings: Pick<CoreNoiseSettings, 'level' | 'mainVolume'> & {
     noiseRatio?: number;

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

@@ -27,11 +27,15 @@ export const NOISE_RATIO_MAX = 2;
 /** @public 소음 비율 칸(배). */
 export const NOISE_RATIO_STEP = 0.1;
 const 비율자르기 = (r) => Math.min(NOISE_RATIO_MAX, Math.max(0, r));
-const 한칸반올림 = (r) => Math.round(r * 10) / 10;
+/** 옛 기록에서 옮긴 비율의 범위 — 말귀 noiseRatioOfPct 와 같다(0.1~2). */
+const 옛비율최소 = 0.1;
+/* 부동소수 찌꺼기만 턴다(0.30000000000000004 → 0.3) — 0.1 칸으로 반올림하지는 않는다 */
+const 찌꺼기털기 = (r) => Math.round(r * 1e6) / 1e6;
 /**
  * @public 설정의 소음 비율(배). `noiseRatio` 가 있으면 그것(0~2 로 자름), 없으면 **옛 값에서
- * 들리던 그대로** 옮긴다 — (level/9) ÷ mainVolume 을 0~2 로 자르고 0.1 단위 반올림.
- * mainVolume 이 0 이면 옛 값으로는 비율을 알 수 없어 1.
+ * 들리던 그대로** 옮긴다 — (level/9) ÷ mainVolume 을 **반올림 없이** 0.1~2 로 조인다(말귀 `noiseRatioOfPct` 와 같은 범위).
+ * 전에는 0.1 칸으로 반올림해 옛 소리와 최대 0.05배 달라졌다(2026-09-15 결정). level 0(옛날에 소음이 안 들리던 기록)은
+ * 0 그대로 — 0.1 로 올리면 없던 소음이 생긴다. mainVolume 이 0 이면 옛 값으로는 비율을 알 수 없어 1.
  */
 export function noiseRatioOf(settings) {
     const { noiseRatio } = settings;
@@ -41,7 +45,9 @@ export function noiseRatioOf(settings) {
     const 전체 = Number(settings.mainVolume);
     if (!(전체 > 0))
         return 1;
-    return 한칸반올림(비율자르기(소음 / 전체));
+    if (!(소음 > 0))
+        return 0;
+    return 찌꺼기털기(Math.min(NOISE_RATIO_MAX, Math.max(옛비율최소, 소음 / 전체)));
 }
 const 전체소리 = (settings) => Math.min(1, Math.max(0, Number(settings.mainVolume) || 0));
 /** @public 문제 소리 볼륨(0~1) = mainVolume. 비율과 상관없다. */

package/dist/packages/core/src/components/Training/TrainingBlockButton.css

@@ -392,3 +392,10 @@
   display: none;
 }
 
+/* 제거 배지 — 가리킬 수 있는 기기는 가리킬 때만, 터치 기기는 늘 보인다(색은 그대로). 늘 보이는 동안 같은 자리의 체크 배지는 숨긴다. */
+@media (hover: hover) {
+  .training-block-button__remove:not(.is-hover) { display: none; }
+}
+@media (hover: none) {
+  .training-block-button__check--removable { display: none; }
+}

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

@@ -184,7 +184,9 @@ export default function TrainingBlockButton(props) {
     // 타입 라벨이 실제로 렌더되는지(타이틀과 같으면 숨김) — 레이아웃 여백 정리에 사용.
     const typeLabelRendered = (!!showTypeLabel && !!type?.label && type.label !== String(itemTitle)) ||
         (isSmall && !!trainingTypeName && trainingTypeName !== String(itemTitle));
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: btnRef, className: `training-block-button${isList ? ' training-block-button--list' : ''}${isRow ? ' training-block-button--row' : ''}${isCompact ? ' training-block-button--compact' : ''}${isSmall ? ' training-block-button--small' : ''}${isCompleted ? ' training-block-button--completed' : ''}${isSelected ? ' training-block-button--selected' : ''}${typeLabelRendered && !isSmall ? ' training-block-button--withType' : ''}${isSmall && !typeLabelRendered ? ' training-block-button--no-type-label' : ''}`, onClick: handleActivate, onPointerEnter: handleBtnHoverOn, onPointerLeave: handleBtnHoverClose, role: "button", tabIndex: 0, onKeyDown: handleKeyDown, "aria-label": typeof ariaLabel === 'string' ? ariaLabel : (typeof itemTitle === 'string' ? itemTitle : undefined), children: [_jsxs("div", { className: "training-block-button__left", children: [showTypeLabel && type?.label && type.label !== String(itemTitle) && (_jsx("span", { className: "training-block-button__type-label caption-1", children: type.label })), isSmall && trainingTypeName && trainingTypeName !== String(itemTitle) && (_jsx("span", { className: "training-block-button__type-label caption-2", children: trainingTypeName })), _jsx(CategoryIcon, { icon: iconForBtn, label: itemTitle, tooltip: popupIconTooltip, wrapperStyle: wrapperStyle, iconSize: (isSmall || isCompact) ? 'small' : 'medium' }), !hideCheckBadge && (isCompleted || isSelected) && !(onRemove && btnHover) && (_jsx(Badge, { type: "dot", icon: "check", position: "top-left", size: "medium", "aria-label": isCompleted ? t('training.completed', '훈련 완료') : t('training.selected', '선택됨') })), onRemove && btnHover && (_jsx(Badge, { type: "dot", icon: "remove", position: "top-left", size: "medium", "aria-label": t('common.remove', '제거'), onClick: handleRemoveClick })), _jsx("div", { className: `training-block-button__title ${isCompact ? 'body-3' : isSmall ? 'body-3b' : 'h3'}`, children: String(itemTitle) }), _jsxs("div", { className: "training-block-button__description", children: [(() => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: btnRef, className: `training-block-button${isList ? ' training-block-button--list' : ''}${isRow ? ' training-block-button--row' : ''}${isCompact ? ' training-block-button--compact' : ''}${isSmall ? ' training-block-button--small' : ''}${isCompleted ? ' training-block-button--completed' : ''}${isSelected ? ' training-block-button--selected' : ''}${typeLabelRendered && !isSmall ? ' training-block-button--withType' : ''}${isSmall && !typeLabelRendered ? ' training-block-button--no-type-label' : ''}`, onClick: handleActivate, onPointerEnter: handleBtnHoverOn, onPointerLeave: handleBtnHoverClose, role: "button", tabIndex: 0, onKeyDown: handleKeyDown, "aria-label": typeof ariaLabel === 'string' ? ariaLabel : (typeof itemTitle === 'string' ? itemTitle : undefined), 
+                /* tooltipText 만 주고 useDescriptionTooltip 을 안 켜면 글이 어디에도 안 떴다 — 그때는 title(가리키면 뜨고 낭독기엔 설명)로 준다 */
+                title: !useDescriptionTooltip && tooltipText ? (Array.isArray(tooltipText) ? tooltipText.filter(Boolean).join('\n') : tooltipText) || undefined : undefined, children: [_jsxs("div", { className: "training-block-button__left", children: [showTypeLabel && type?.label && type.label !== String(itemTitle) && (_jsx("span", { className: "training-block-button__type-label caption-1", children: type.label })), isSmall && trainingTypeName && trainingTypeName !== String(itemTitle) && (_jsx("span", { className: "training-block-button__type-label caption-2", children: trainingTypeName })), _jsx(CategoryIcon, { icon: iconForBtn, label: itemTitle, tooltip: popupIconTooltip, wrapperStyle: wrapperStyle, iconSize: (isSmall || isCompact) ? 'small' : 'medium' }), !hideCheckBadge && (isCompleted || isSelected) && !(onRemove && btnHover) && (_jsx(Badge, { className: onRemove ? 'training-block-button__check--removable' : undefined, type: "dot", icon: "check", position: "top-left", size: "medium", "aria-label": isCompleted ? t('training.completed', '훈련 완료') : t('training.selected', '선택됨') })), onRemove && (_jsx(Badge, { className: `training-block-button__remove${btnHover ? ' is-hover' : ''}`, type: "dot", icon: "remove", position: "top-left", size: "medium", "aria-label": t('common.remove', '제거'), onClick: handleRemoveClick })), _jsx("div", { className: `training-block-button__title ${isCompact ? 'body-3' : isSmall ? 'body-3b' : 'h3'}`, children: String(itemTitle) }), _jsxs("div", { className: "training-block-button__description", children: [(() => {
                                         const countText = countLabelOverride !== undefined ? countLabelOverride : countLabel;
                                         // 정해진 문항수가 없으면(빈 값) 카운트 요소 자체를 그리지 않는다.
                                         return countText ? (_jsx("div", { className: `training-block-button__count ${isSmall ? 'caption-2' : 'caption-1'}`, children: countText })) : null;

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

@@ -2,6 +2,18 @@ import { type ReactNode, type FC, type CSSProperties, type RefObject, type Dispa
 import './TrainingPagePopup.css';
 import { type CoreNoiseSettings } from './NoisePlayerContext';
 import { Page, ListenStep, ConfirmStep, ConfirmWithTextStep, OrderListStep, CardStep, CardOrderStep } from './TrainingStepComponents';
+/** @public TrainingPagePopup `onComplete` 인자 */
+export type TrainingCompleteResult = {
+    correct: number | null;
+    total: number | null;
+    /** 이 창에서 몇 번째 판인지(1부터) */
+    attempt?: number;
+    /** 다시하기 전 판들의 결과(앞 판부터) */
+    previousAttempts?: Array<{
+        correct: number | null;
+        total: number | null;
+    }>;
+};
 /** @public */
 export type { ScenarioPage, ScenarioStep, FlowState } from './trainingScenario';
 import type { ScenarioPage, FlowState } from './trainingScenario';
@@ -39,11 +51,9 @@ export type TrainingPagePopupProps = {
     stepIndex?: number;
     stepCount?: number;
     onBack?: () => void;
-    /** 완료 시 호출. 결과 팝업이 계산한 정답/전체 문항 수를 함께 전달(호출부가 무시해도 무방하도록 옵셔널 인자). */
-    onComplete?: (result?: {
-        correct: number | null;
-        total: number | null;
-    }) => void;
+    /** 완료 시 호출. 결과 팝업이 계산한 정답/전체 문항 수를 함께 전달(호출부가 무시해도 무방하도록 옵셔널 인자).
+     *  `attempt` 는 이 창에서 몇 번째 판인지(1부터, 다시하기마다 +1), `previousAttempts` 는 다시하기 전 판들의 정답/전체 — 전에는 1회차 결과가 어디에도 남지 않았다. */
+    onComplete?: (result?: TrainingCompleteResult) => void;
     onNext?: () => void;
     onSettings?: () => void;
     /** 좌측 하단 훈련 설정 버튼 + 오디오 미터 토글 표시 여부. 기본 true — 모든 훈련에서 노출되며,
@@ -55,6 +65,7 @@ export type TrainingPagePopupProps = {
         panelRef: RefObject<PanelElement | null>;
         setResultOverlay: Dispatch<SetStateAction<unknown>>;
     }) => ReactNode);
+    /** 대화상자 이름(낭독기가 읽는 이름). 주면 title·label·시나리오 제목보다 이긴다 — 보이는 제목과 다른 이름이 필요할 때. 없으면 보이는 제목. */
     ariaLabel?: string;
     label?: string;
     buildResults?: (answers: Record<string, unknown>, meta?: Record<string, unknown>) => unknown;
@@ -85,6 +96,8 @@ export type TrainingPagePopupProps = {
         contextsLength?: number | null;
         onReplay?: () => void;
         onClose?: () => void;
+        /** 결과를 아직 계산하는 중(비동기 buildResults 등) — true 인 동안 '완료' 를 막아야 한다. 기본 결과 창(TrainingResultPopup)은 그대로 받아 막는다. */
+        pending?: boolean;
     }) => ReactNode;
 };
 /** @public */