@ihabdevteam/core 0.119.0 → 0.121.0

package/dist/ihabdevteam-core.d.ts

@@ -1341,7 +1341,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.119.0";
+export declare const CORE_VERSION = "0.121.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -1356,11 +1356,19 @@ export default coreDefault;
 export declare type CoreNoiseSettings = {
     enabled: boolean;
     type: CoreNoiseType;
-    /** 0–9. 0이면 소음 비활성화. (소음 음원을 +7dB 증폭한 뒤 상한을 4→9로 확장 — 실제 volume = level/9) */
+    /**
+     * 옛 소음 크기 0–9(실제 volume = level/9). **이제 소리는 `noiseRatio` 로 정한다** — 이 값은
+     * `noiseRatio` 가 없는 옛 기록을 옮길 때만 읽는다(`noiseRatioOf`).
+     */
     level: number;
+    /**
+     * 소음 비율 — 문제 소리(`mainVolume`) 대비 배수, 0–2.0(0.1 칸). 1 = 소음과 문제 소리가 같은 크기.
+     * 실제 소음 볼륨 = min(1, mainVolume × noiseRatio). 없으면 `level` 에서 옮긴다.
+     */
+    noiseRatio?: number;
     /** 소음 재생 속도(playbackRate). 0.75–1.25, 기본 1. */
     speed: number;
-    /** 문장(메인) 재생 소리(볼륨). 0–1, 기본 1. 계정 설정("훈련" 패널)과 훈련 화면 툴팁이 함께 영속화한다. */
+    /** 전체 소리(= 문제 소리 볼륨). 0–1, 기본 1. 소음은 이 값 × `noiseRatio`. 계정 설정("훈련" 패널)과 훈련 화면 툴팁이 함께 영속화한다. */
     mainVolume: number;
     /** 문장(메인) 재생 속도(playbackRate). 0.5–1.5, 기본 1. 계정 설정("훈련" 패널)과 훈련 화면 툴팁이 함께 영속화한다. */
     mainSpeed: number;

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

@@ -9,7 +9,7 @@ export default function WaveForm(props: {
     onSegmentClick?: (idx: number) => void;
     waveProgressRef?: MutableRefObject<HTMLDivElement | null>;
     noiseSrc?: string | null;
-    noiseLevel?: number;
+    noiseVolume?: number;
     noiseSpeed?: number;
     mainVolume?: number;
     onReadyChange?: (ready: boolean) => void;

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

@@ -9,7 +9,7 @@ import './TrainingStepAudioPlayer.css';
  */
 const MIN_BAR_PX = 4;
 export default function WaveForm(props) {
-    const { src, segments, progress = 0, waveProgressRef, noiseSrc, noiseLevel = 0, noiseSpeed = 1, totalDuration = 0, mainVolume = 1, onReadyChange, showSoundWaveForm = true } = props;
+    const { src, segments, progress = 0, waveProgressRef, noiseSrc, noiseVolume = 0, noiseSpeed = 1, totalDuration = 0, mainVolume = 1, onReadyChange, showSoundWaveForm = true } = props;
     const waveformRef = useRef(null);
     const outerRef = useRef(null);
     const [wavePeaks, setWavePeaks] = useState(null);
@@ -144,9 +144,9 @@ export default function WaveForm(props) {
     // 하위 요소들의 CSS 변수(--bar-gap, 기본 3px)로 상속시킨다. 계산은 하되 값을 어디에도
     // 바인딩하지 않아 항상 하드코딩된 기본값(3px)으로만 그려지던 문제 — 실제로 적용한다.
     const outerStyle = { '--bar-gap': `${barGap}px` };
-    // 소음 바 높이 = (절대진폭 / 문장 최고치) × 실제 재생 볼륨(level/9 — TrainingStepAudioPlayer와 동일 공식).
+    // 소음 바 높이 = (절대진폭 / 문장 최고치) × 실제 소음 볼륨(effectiveNoiseVolume — 부모가 소리에 쓰는 값 그대로).
     // 문장과 같은 분모(sentenceMaxPeak)를 써서 문장 대비 소음 비율이 미터와 일치.
-    const noiseAmp = Math.max(0, Math.min(9, noiseLevel)) / 9;
+    const noiseAmp = Math.max(0, Math.min(1, noiseVolume));
     const noiseReady = !!noisePeaks;
     // 소음 연산은 문장 연산(barsTotal 확정) 이후에 시작돼 항상 더 늦게 끝난다 — 문장 바가 먼저 나타났다가
     // 소음 바만 뒤늦게 팝인하는 것을 막기 위해, 최초 등장 시엔 두 계산이 모두 끝난 뒤 함께 드러낸다.

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

@@ -6,6 +6,32 @@ export declare const LEVEL_MAX = 9;
 export declare const levelToPct: (level: number) => number;
 /** @public */
 export declare const pctToLevel: (pct: number) => number;
+/** @public 소음 비율 상한(배). */
+export declare const NOISE_RATIO_MAX = 2;
+/** @public 소음 비율 칸(배). */
+export declare const NOISE_RATIO_STEP = 0.1;
+/**
+ * @public 설정의 소음 비율(배). `noiseRatio` 가 있으면 그것(0~2 로 자름), 없으면 **옛 값에서
+ * 들리던 그대로** 옮긴다 — (level/9) ÷ mainVolume 을 0~2 로 자르고 0.1 단위 반올림.
+ * mainVolume 이 0 이면 옛 값으로는 비율을 알 수 없어 1.
+ */
+export declare function noiseRatioOf(settings: Pick<CoreNoiseSettings, 'level' | 'mainVolume'> & {
+    noiseRatio?: number;
+}): number;
+/** @public 실제 소음 볼륨(0~1) = min(1, mainVolume × noiseRatioOf(settings)). 켜짐 여부는 보지 않는다. */
+export declare function effectiveNoiseVolume(settings: Pick<CoreNoiseSettings, 'level' | 'mainVolume'> & {
+    noiseRatio?: number;
+}): number;
+/**
+ * @public 설정에 조각을 덮는다 — `{ ...base, ...patch }` 에 비율 규칙 하나를 더한 것.
+ *
+ * **조각에 `level` 은 있는데 `noiseRatio` 가 없으면** 그 조각은 옛 모양이다(저장된 옛 기록,
+ * 옛 `noiseOverride`). 그대로 덮으면 base 의 `noiseRatio`(기본값 1 등)가 남아 level 을 가려
+ * 버리므로, 덮은 결과의 level·mainVolume 으로 비율을 셈해 **그 자리에서 박아 둔다** —
+ * 박지 않고 비워 두면 뒤에 전체 소리만 바꿀 때 비율이 따라 변해 소음이 옛날처럼 제자리에 선다.
+ * `{ ...DEFAULT_NOISE_SETTINGS, ...saved }` 대신 이것을 쓴다.
+ */
+export declare function mergeNoiseSettings(base: CoreNoiseSettings, patch?: Partial<CoreNoiseSettings> | null): CoreNoiseSettings;
 /** @public */
 export type NoisePlayerContextValue = {
     settings: CoreNoiseSettings;
@@ -19,7 +45,7 @@ export type NoisePlayerContextValue = {
     /** 문장(메인) 재생 속도(playbackRate). 0.5–1.5, 기본 1. */
     playbackRate: number;
     setPlaybackRate: (rate: number) => void;
-    /** 문장(메인) 재생 소리(볼륨). 0–1, 기본 1. */
+    /** 전체 소리(= 문제 소리 볼륨). 0–1, 기본 1. 소음은 이 값 × 소음 비율로 따라 움직인다. */
     mainVolume: number;
     setMainVolume: (v: number) => void;
 };

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

@@ -10,10 +10,57 @@ export const LEVEL_MAX = 9;
 export const levelToPct = (level) => Math.round((Math.min(LEVEL_MAX, Math.max(0, level)) / LEVEL_MAX) * 100);
 /** @public */
 export const pctToLevel = (pct) => (pct / 100) * LEVEL_MAX;
+/* ── 소음 비율 ──────────────────────────────────────────────────────────────
+   전체 소리(`mainVolume` 0~1)가 문제 소리이고, 소음은 그에 대한 **비율**(`noiseRatio` 0~2배)로
+   정한다. 실제 소음 볼륨 = min(1, mainVolume × noiseRatio) — 전체 소리를 줄이면 소음도 따라
+   준다. 예전에는 소음 크기(level/9)가 전체 소리와 따로 움직였다. */
+/** @public 소음 비율 상한(배). */
+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;
+/**
+ * @public 설정의 소음 비율(배). `noiseRatio` 가 있으면 그것(0~2 로 자름), 없으면 **옛 값에서
+ * 들리던 그대로** 옮긴다 — (level/9) ÷ mainVolume 을 0~2 로 자르고 0.1 단위 반올림.
+ * mainVolume 이 0 이면 옛 값으로는 비율을 알 수 없어 1.
+ */
+export function noiseRatioOf(settings) {
+    const { noiseRatio } = settings;
+    if (typeof noiseRatio === 'number' && Number.isFinite(noiseRatio))
+        return 비율자르기(noiseRatio);
+    const 소음 = Math.min(LEVEL_MAX, Math.max(0, Number(settings.level) || 0)) / LEVEL_MAX;
+    const 전체 = Number(settings.mainVolume);
+    if (!(전체 > 0))
+        return 1;
+    return 한칸반올림(비율자르기(소음 / 전체));
+}
+/** @public 실제 소음 볼륨(0~1) = min(1, mainVolume × noiseRatioOf(settings)). 켜짐 여부는 보지 않는다. */
+export function effectiveNoiseVolume(settings) {
+    const 전체 = Math.min(1, Math.max(0, Number(settings.mainVolume) || 0));
+    return Math.min(1, 전체 * noiseRatioOf(settings));
+}
+/**
+ * @public 설정에 조각을 덮는다 — `{ ...base, ...patch }` 에 비율 규칙 하나를 더한 것.
+ *
+ * **조각에 `level` 은 있는데 `noiseRatio` 가 없으면** 그 조각은 옛 모양이다(저장된 옛 기록,
+ * 옛 `noiseOverride`). 그대로 덮으면 base 의 `noiseRatio`(기본값 1 등)가 남아 level 을 가려
+ * 버리므로, 덮은 결과의 level·mainVolume 으로 비율을 셈해 **그 자리에서 박아 둔다** —
+ * 박지 않고 비워 두면 뒤에 전체 소리만 바꿀 때 비율이 따라 변해 소음이 옛날처럼 제자리에 선다.
+ * `{ ...DEFAULT_NOISE_SETTINGS, ...saved }` 대신 이것을 쓴다.
+ */
+export function mergeNoiseSettings(base, patch) {
+    const merged = { ...base, ...(patch ?? {}) };
+    if (patch && 'level' in patch && !(typeof patch.noiseRatio === 'number')) {
+        merged.noiseRatio = noiseRatioOf({ level: merged.level, mainVolume: merged.mainVolume });
+    }
+    return merged;
+}
 export const DEFAULT_NOISE_SETTINGS = {
     enabled: true,
     type: 'defaultNoise',
-    level: 4.5, // 소음 크기 기본값 50% (levelToPct(4.5) === 50)
+    level: 4.5, // 옛 소음 크기 — 이제는 noiseRatio 가 이긴다(옛 기록 호환용으로 남김)
+    noiseRatio: 1, // 소음 = 문제 소리와 같은 크기
     speed: 1,
     mainVolume: 1,
     mainSpeed: 1,

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

@@ -9,10 +9,10 @@ import Slider from '../Slider';
 import Button from '../Button';
 import useMediaQuery from '../../hooks/useMediaQuery';
 import { getNoiseTypeOptions } from '../Tooltip/tooltipConstants';
-import { useNoisePlayer, levelToPct, pctToLevel } from './NoisePlayerContext';
+import { useNoisePlayer, noiseRatioOf, DEFAULT_NOISE_SETTINGS, NOISE_RATIO_MAX, NOISE_RATIO_STEP } from './NoisePlayerContext';
 import './NoiseSettingsTooltip.css';
 // 소음 종류 세그먼트의 "없음" — 별도 CoreNoiseType이 아니라 enabled=false를 의미(type은 마지막 값 유지).
-// enabled/level=0으로 이미 "무음"을 표현하고 있어(다른 곳의 소음 크기 "없음"과 동일 패턴), 새 타입을
+// enabled/소음 비율=0으로 이미 "무음"을 표현하고 있어(다른 곳의 소음 크기 "없음"과 동일 패턴), 새 타입을
 // 추가하는 대신 세그먼트 선택값만 enabled 여부로 매핑한다.
 const NONE_KEY = 'none';
 // 문장(메인) 재생 속도
@@ -34,10 +34,9 @@ export default function NoiseSettingsTooltip({ anchorRect, onClose }) {
     const isMobile = useMediaQuery('(max-width: 767px)');
     const sliderSize = isMobile ? 40 : 24;
     const noisePlayer = useNoisePlayer();
-    const level = noisePlayer?.settings.level ?? 0;
+    const ratio = noiseRatioOf(noisePlayer?.settings ?? DEFAULT_NOISE_SETTINGS);
     const noiseType = noisePlayer?.settings.type ?? 'defaultNoise';
     const noiseEnabled = noisePlayer?.settings.enabled ?? true;
-    const pct = levelToPct(level);
     const playbackRate = noisePlayer?.playbackRate ?? 1;
     const mainVolume = noisePlayer?.mainVolume ?? 1;
     const volPct = Math.round(mainVolume * 100);
@@ -53,13 +52,14 @@ export default function NoiseSettingsTooltip({ anchorRect, onClose }) {
         }
         catch (e) { }
     }, [noisePlayer]);
-    // 레벨만 반영 — enabled는 건드리지 않는다. 크기를 0으로 내려도 "소음 종류"가
+    // 비율만 반영 — enabled는 건드리지 않는다. 비율을 0으로 내려도 "소음 종류"가
     // "없음"으로 바뀌지 않아야 하므로(사용자가 종류는 유지한 채 잠깐 무음으로만 두려는 경우),
     // 끄고 켜는 것은 소음 종류 세그먼트(handleTypeChange)의 역할로만 남긴다.
-    const handleLevelChange = useCallback((nextPct) => {
-        const nextLevel = pctToLevel(nextPct);
+    // 0.1 칸을 부동소수(0.30000000000000004)로 저장하지 않게 한 칸 단위로 반올림한다.
+    const handleRatioChange = useCallback((next) => {
+        const r = Math.min(NOISE_RATIO_MAX, Math.max(0, Math.round(next * 10) / 10));
         try {
-            noisePlayer?.setSettings({ level: nextLevel });
+            noisePlayer?.setSettings({ noiseRatio: r });
         }
         catch (e) { }
     }, [noisePlayer]);
@@ -74,8 +74,8 @@ export default function NoiseSettingsTooltip({ anchorRect, onClose }) {
         }
         catch (e) { }
     }, [noisePlayer]);
-    return (_jsx(Tooltip, { anchorRect: anchorRect, offset: 12, onClose: onClose, ariaLabel: t('training.trainingSettingsTitle', '훈련 설정'), isMobilePopup: false, closeOnOutsideClick: false, header: _jsxs("div", { className: "noise-settings__header", children: [_jsx("span", { children: t('training.trainingSettingsTitle', '훈련 설정') }), _jsx(Button, { size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, ariaLabel: t('common.close', '닫기'), onClick: onClose })] }), children: _jsxs(Panel, { className: "noise-settings", useBorder: false, labelWidth: 72, children: [_jsx(SliderPanelRow, { title: t('training.playVolumeTitle', '재생 소리'), valueLabel: `${volPct}%`, value: volPct, min: 0, max: 100, step: 10, size: sliderSize, onChange: handlePlayVolumeChange }), _jsx(SliderPanelRow, { title: t('training.playSpeedTitle', '재생 속도'), valueLabel: `${playbackRate.toFixed(2)}x`, value: playbackRate, min: PLAY_SPEED_MIN, max: PLAY_SPEED_MAX, step: PLAY_SPEED_STEP, size: sliderSize, onChange: handlePlaySpeedChange }), _jsx(SliderPanelRow, { title: t('training.noiseLevelTitle', '소음 크기'), valueLabel: `${pct}%`, value: pct, min: 0, max: 100, step: 10, size: sliderSize, onChange: handleLevelChange }), _jsx(PanelRow, { variant: "custom", label: t('training.noiseTypeTitle', '소음 종류'), useFullWidth: true, children: _jsx(SegmentedControl, { ariaLabel: t('training.noiseTypeTitle', '소음 종류'), size: 40, shape: "rounded", options: [
+    return (_jsx(Tooltip, { anchorRect: anchorRect, offset: 12, onClose: onClose, ariaLabel: t('training.trainingSettingsTitle', '훈련 설정'), isMobilePopup: false, closeOnOutsideClick: false, header: _jsxs("div", { className: "noise-settings__header", children: [_jsx("span", { children: t('training.trainingSettingsTitle', '훈련 설정') }), _jsx(Button, { size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, ariaLabel: t('common.close', '닫기'), onClick: onClose })] }), children: _jsxs(Panel, { className: "noise-settings", useBorder: false, labelWidth: 72, children: [_jsx(SliderPanelRow, { title: t('training.playVolumeTitle', '전체 소리'), valueLabel: `${volPct}%`, value: volPct, min: 0, max: 100, step: 10, size: sliderSize, onChange: handlePlayVolumeChange }), _jsx(SliderPanelRow, { title: t('training.playSpeedTitle', '재생 속도'), valueLabel: `${playbackRate.toFixed(2)}x`, value: playbackRate, min: PLAY_SPEED_MIN, max: PLAY_SPEED_MAX, step: PLAY_SPEED_STEP, size: sliderSize, onChange: handlePlaySpeedChange }), _jsx(PanelRow, { variant: "custom", label: t('training.noiseTypeTitle', '소음 종류'), useFullWidth: true, children: _jsx(SegmentedControl, { ariaLabel: t('training.noiseTypeTitle', '소음 종류'), size: 40, shape: "rounded", options: [
                             { key: NONE_KEY, label: t('training.noise.type.none', '없음') },
                             ...getNoiseTypeOptions(t).map(opt => ({ key: opt.value, label: opt.label })),
-                        ], value: noiseEnabled ? noiseType : NONE_KEY, onChange: handleTypeChange }) })] }) }));
+                        ], value: noiseEnabled ? noiseType : NONE_KEY, onChange: handleTypeChange }) }), _jsx(SliderPanelRow, { title: t('training.noiseRatioTitle', '소음 비율'), valueLabel: t('training.noiseRatioValue', '{{ratio}}배', { ratio: ratio.toFixed(1) }), value: ratio, min: 0, max: NOISE_RATIO_MAX, step: NOISE_RATIO_STEP, size: sliderSize, onChange: handleRatioChange })] }) }));
 }

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

@@ -16,7 +16,7 @@ import TrainingStepListen from './TrainingStepListen';
 import TrainingStepOrderList from './TrainingStepOrderList';
 import { getPayloadTimestamp } from './trainingPopupUtils';
 import { TrainingPagePopupContext } from './TrainingPagePopupContext';
-import { NoisePlayerContext, DEFAULT_NOISE_SETTINGS } from './NoisePlayerContext';
+import { NoisePlayerContext, DEFAULT_NOISE_SETTINGS, mergeNoiseSettings } from './NoisePlayerContext';
 import { lockBodyScrollWithPadding } from '../../hooks/bodyScrollLock';
 import { Page, ListenStep, ConfirmStep, ConfirmWithTextStep, OrderListStep, CardStep, CardOrderStep } from './TrainingStepComponents';
 import TrainingResultPopup from '../Popup/TrainingResultPopup';
@@ -129,7 +129,8 @@ function TrainingPagePopupInner(props) {
             if (cancelled)
                 return;
             // 저장된 설정이 있으면 병합, 없으면 진짜 기본값으로 확정 — 어느 쪽이든 이제부터 재생 허용.
-            const merged = saved ? { ...noiseSettingsRef.current, ...saved } : { ...DEFAULT_NOISE_SETTINGS };
+            // mergeNoiseSettings — noiseRatio 가 없는 옛 기록은 기본값 비율(1)에 가리지 않고 level 에서 옮긴다.
+            const merged = saved ? mergeNoiseSettings(noiseSettingsRef.current, saved) : { ...DEFAULT_NOISE_SETTINGS };
             noiseSettingsRef.current = merged;
             setNoisePart(merged);
             reportAppliedNoiseSettings(merged);
@@ -137,7 +138,7 @@ function TrainingPagePopupInner(props) {
             const override = noiseOverrideRef.current;
             if (override) {
                 const patch = typeof override === 'function' ? override(merged) : override;
-                const applied = { ...merged, ...patch };
+                const applied = mergeNoiseSettings(merged, patch);
                 noiseSettingsRef.current = applied;
                 setNoisePart(applied);
                 reportAppliedNoiseSettings(applied);
@@ -156,7 +157,7 @@ function TrainingPagePopupInner(props) {
     }, []);
     // noiseSettings에 병합 + 영속화(fire-and-forget) — setSettings/setPlaybackRate/setMainVolume가 공유
     const mergeAndSaveSettings = useCallback((next) => {
-        const merged = { ...noiseSettingsRef.current, ...next };
+        const merged = mergeNoiseSettings(noiseSettingsRef.current, next);
         noiseSettingsRef.current = merged;
         setNoisePart(merged);
         // noiseOverride 판은 저장하지 않는다 — 판 중에 바꾼 것도 이 판에만.

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

@@ -7,7 +7,7 @@ import { useTranslation } from "react-i18next";
 import { downloadSound, getSignedOrPublicUrl, resolveSoundPath } from '../../utils/storage';
 import { getTTSUrlResolver } from '../../utils/ttsConfig';
 import { getElementAnalyser, resumeAudioMeter } from '../../utils/audioMeter';
-import { useNoisePlayer } from './NoisePlayerContext';
+import { useNoisePlayer, effectiveNoiseVolume } from './NoisePlayerContext';
 import { useNoiseFade } from './useNoiseFade';
 import { useTTSPlayback } from './useTTSPlayback';
 import './TrainingStepAudioPlayer.css';
@@ -97,6 +97,8 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
     // 문장(메인) 재생 속도·볼륨 — 하단 소음설정 툴팁과 공유(NoisePlayerContext)
     const playbackRate = noisePlayer?.playbackRate ?? 1.0;
     const mainVolume = noisePlayer?.mainVolume ?? 1.0;
+    // 실제 소음 볼륨 — 전체 소리 × 소음 비율(상한 1). 파형의 소음 막대도 이 값으로 그린다.
+    const noiseVolume = noisePlayer ? effectiveNoiseVolume(noisePlayer.settings) : 0;
     const [fillCompletionPhase, setFillCompletionPhase] = useState('idle');
     const [noticeMessage, setNoticeMessage] = useState("");
     const [noticePosition] = useState("top");
@@ -207,8 +209,8 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
             catch (e) { }
             // 소음 동기 시작
             const ns = noiseSettingsRef.current;
-            if (ns?.enabled && (ns?.level ?? 0) > 0) {
-                fadeInNoise(ns.level / 9);
+            if (ns?.enabled && (ns?.volume ?? 0) > 0) {
+                fadeInNoise(ns.volume);
             }
         };
         const onPause = () => {
@@ -967,5 +969,5 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
                         onFocus: showListenTip, onBlur: hideListenTip, children: _jsx("span", { ref: listenBtnRef, className: "audio-player__button-triangle-wrap", children: _jsx("svg", { className: "audio-player__button-triangle", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { ref: triPathRef, d: "M13.2 7.7 L16.5 9.85 Q20.2 12 16.5 14.15 L10 18.3 Q7 19.7 7 16.3 L7 7.7 Q7 4.3 10 5.7 L13.2 7.7" }) }) }) })) : null, listenBtnRect && (_jsx(InfoTooltip, { anchorRect: listenBtnRect, text: typeof label === 'string' && label ? label : t('training.listenLabel', '문장 듣기'), offset: 8 })), _jsxs("div", { className: `audio-player__play ${stateLocal === "playMode" || displayedPlaying ? "is-visible" : ""}`, children: [_jsxs("div", { ref: btnsRef, className: "audio-player__buttons", children: [_jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "skip-back", onClick: handlePrev, ariaLabel: t('training.prev', '이전'), width: "60px", variant: "transparent-white", "aria-hidden": "true", tabIndex: -1, disabled: stateLocal !== 'playMode' }), _jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: displayedPlaying ? "pause" : "play", onClick: handleToggle, ariaLabel: t('common.playPause', '재생 / 멈춤'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' }), _jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "square", onClick: handleStop, ariaLabel: t('training.stop', '정지'), width: "60px", variant: "transparent-white", "aria-hidden": "true", tabIndex: -1, disabled: stateLocal !== 'playMode' }), sourceButtonCount > 1 ? (_jsx("div", { ref: sourceButtonsRef, className: "audio-player__source-buttons", children: Array.from({ length: sourceButtonCount }).map((_, idx) => (_jsx(Button, { size: 32, type: "dot", shape: "pill", useBorder: false, label: String(idx + 1), onClick: () => { try {
                                                 handleJumpTo(idx);
                                             }
-                                            catch (e) { } }, ariaLabel: t('training.sourcePlay', { n: idx + 1 }), variant: "transparent-white", selected: 구간표시 && currentIndex === idx, disabled: stateLocal !== 'playMode' || !(Array.isArray(sources) && sources[idx]), showTooltipInfo: true }, idx))) })) : null, (!Array.isArray(sources) || sources.length <= 1) ? (_jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "repeat", onClick: handleReplay, ariaLabel: t('common.replay', '다시듣기'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' })) : null, _jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "skip-forward", onClick: handleNext, ariaLabel: t('training.next', '다음'), width: "60px", variant: "transparent-white", "aria-hidden": true, tabIndex: -1, disabled: stateLocal !== 'playMode' }), _jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "check", onClick: handleEnd, ariaLabel: t('common.done', '완료'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' })] }), _jsxs("div", { className: "audio-player__slider", children: [_jsx("div", { className: fillClass, ref: fillRef, style: { left: `${fillLeftPercent}%` }, "aria-hidden": "true" }), (showSoundWaveForm || showNoiseWaveForm) && (_jsx(WaveForm, { segments: currentSegments, progress: progress, totalDuration: totalDuration, onSegmentClick: handleJumpTo, waveProgressRef: waveProgressRef, showSoundWaveForm: showSoundWaveForm, noiseSrc: (showNoiseWaveForm && noisePlayer?.settings.enabled && (noisePlayer?.settings.level ?? 0) > 0) ? activeNoiseUrl : null, noiseLevel: noisePlayer?.settings.level ?? 0, noiseSpeed: noisePlayer?.settings.speed ?? 1, mainVolume: mainVolume, onReadyChange: handleWaveReadyChange }))] })] }), _jsx("audio", { ref: audioRef, crossOrigin: "anonymous", preload: "auto" })] }), !showSoundWaveForm && (_jsxs("p", { className: "audio-player__no-waveform caption-1", children: [_jsx(Icon, { icon: "triangle-alert", size: 14 }), t('training.noSoundWaveform', '소리 비교 문제는 웨이브폼을 표현하지 않습니다.')] })), _jsx(Toast, { message: noticeMessage, position: noticePosition, onClose: handleClearNotice })] }));
+                                            catch (e) { } }, ariaLabel: t('training.sourcePlay', { n: idx + 1 }), variant: "transparent-white", selected: 구간표시 && currentIndex === idx, disabled: stateLocal !== 'playMode' || !(Array.isArray(sources) && sources[idx]), showTooltipInfo: true }, idx))) })) : null, (!Array.isArray(sources) || sources.length <= 1) ? (_jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "repeat", onClick: handleReplay, ariaLabel: t('common.replay', '다시듣기'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' })) : null, _jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "skip-forward", onClick: handleNext, ariaLabel: t('training.next', '다음'), width: "60px", variant: "transparent-white", "aria-hidden": true, tabIndex: -1, disabled: stateLocal !== 'playMode' }), _jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "check", onClick: handleEnd, ariaLabel: t('common.done', '완료'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' })] }), _jsxs("div", { className: "audio-player__slider", children: [_jsx("div", { className: fillClass, ref: fillRef, style: { left: `${fillLeftPercent}%` }, "aria-hidden": "true" }), (showSoundWaveForm || showNoiseWaveForm) && (_jsx(WaveForm, { segments: currentSegments, progress: progress, totalDuration: totalDuration, onSegmentClick: handleJumpTo, waveProgressRef: waveProgressRef, showSoundWaveForm: showSoundWaveForm, noiseSrc: (showNoiseWaveForm && noisePlayer?.settings.enabled && noiseVolume > 0) ? activeNoiseUrl : null, noiseVolume: noiseVolume, noiseSpeed: noisePlayer?.settings.speed ?? 1, mainVolume: mainVolume, onReadyChange: handleWaveReadyChange }))] })] }), _jsx("audio", { ref: audioRef, crossOrigin: "anonymous", preload: "auto" })] }), !showSoundWaveForm && (_jsxs("p", { className: "audio-player__no-waveform caption-1", children: [_jsx(Icon, { icon: "triangle-alert", size: 14 }), t('training.noSoundWaveform', '소리 비교 문제는 웨이브폼을 표현하지 않습니다.')] })), _jsx(Toast, { message: noticeMessage, position: noticePosition, onClose: handleClearNotice })] }));
 }

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

@@ -1,5 +1,5 @@
 import { type RefObject } from 'react';
-import type { NoisePlayerContextValue } from './NoisePlayerContext';
+import { type NoisePlayerContextValue } from './NoisePlayerContext';
 type PlaybackState = 'stopped' | 'playing' | 'paused';
 /**
  * TrainingStepAudioPlayer에서 분리 — 소음(noise) 오디오 엘리먼트 생성/페이드인/페이드아웃/워치독을
@@ -14,7 +14,7 @@ export declare function useNoiseFade({ noisePlayer, audioRef, playbackStateRef,
     activeNoiseUrl: string | null;
     noiseSettingsRef: RefObject<{
         enabled: boolean;
-        level: number;
+        volume: number;
         type: string;
     } | null>;
     cancelNoiseFade: () => void;

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

@@ -2,6 +2,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { noiseAssets } from '../../sounds/noiseAssets';
 import { getElementAnalyser, resumeAudioMeter } from '../../utils/audioMeter';
+import { effectiveNoiseVolume } from './NoisePlayerContext';
 function generateNoiseUrl(type) {
     const rand = Math.floor(Math.random() * 10);
     switch (type) {
@@ -23,6 +24,7 @@ export function useNoiseFade({ noisePlayer, audioRef, playbackStateRef, }) {
     // 실제 로드된(재생되는) 소음 파일 URL — waveform이 화면=청취 일치하도록 이 src를 그린다.
     const [activeNoiseUrl, setActiveNoiseUrl] = useState(null);
     const noiseTypeLoadedRef = useRef(null);
+    // volume = 실제 소음 볼륨(effectiveNoiseVolume — 전체 소리 × 소음 비율, 상한 1)
     const noiseSettingsRef = useRef(null);
     const noiseFadeRafRef = useRef(null);
     // 페이드 세대 토큰 — 하드스톱 타이머가 발화 시점에 "그 사이 새 페이드가 시작됐는지"를
@@ -155,10 +157,11 @@ export function useNoiseFade({ noisePlayer, audioRef, playbackStateRef, }) {
     // 개별 레이스를 전부 틀어막는 대신, 잘못된 상태를 주기적으로 감지해 회수한다.
     // 두 번 연속(약 0.8초) 확인 후에 정지 — 멀티소스 트랙 전환처럼 메인이 잠깐 멈추는
     // 정상 구간에서 소음이 출렁이지 않게 하기 위한 유예다.
-    const noiseInUse = !!noisePlayer?.settings.enabled && (noisePlayer?.settings.level ?? 0) > 0;
+    const noiseVolume = noisePlayer ? effectiveNoiseVolume(noisePlayer.settings) : 0;
+    const noiseInUse = !!noisePlayer?.settings.enabled && noiseVolume > 0;
     useEffect(() => {
         // 소음이 이번 재생 세션에서 아예 꺼져 있으면(noiseInUse=false) noiseEl은 절대
-        // 재생되지 않으므로(모든 fadeInNoise 호출부가 동일한 enabled/level 조건으로 감싸져
+        // 재생되지 않으므로(모든 fadeInNoise 호출부가 동일한 enabled/volume 조건으로 감싸져
         // 있음) 이 감시 자체가 no-op이다 — 타이머를 아예 돌리지 않는다.
         if (!noiseInUse)
             return;
@@ -208,20 +211,20 @@ export function useNoiseFade({ noisePlayer, audioRef, playbackStateRef, }) {
     // noiseSettingsRef 최신화 (재생 이벤트 핸들러 클로저에서 사용)
     useEffect(() => {
         noiseSettingsRef.current = noisePlayer
-            ? { enabled: noisePlayer.settings.enabled, level: noisePlayer.settings.level, type: noisePlayer.settings.type }
+            ? { enabled: noisePlayer.settings.enabled, volume: noiseVolume, type: noisePlayer.settings.type }
             : null;
-    }, [noisePlayer, noisePlayer?.settings.enabled, noisePlayer?.settings.level, noisePlayer?.settings.type]);
+    }, [noisePlayer, noisePlayer?.settings.enabled, noiseVolume, noisePlayer?.settings.type]);
     // 소음 설정 변경 → 오디오 반영
     useEffect(() => {
         const ns = noisePlayer?.settings;
         const noiseEl = noiseAudioRef.current;
         if (!noiseEl)
             return;
-        if (!ns || !ns.enabled || ns.level === 0) {
+        const volume = ns ? effectiveNoiseVolume(ns) : 0;
+        if (!ns || !ns.enabled || volume === 0) {
             fadeOutNoise();
             return;
         }
-        const volume = Math.min(1, ns.level / 9);
         if (noiseTypeLoadedRef.current !== ns.type) {
             // 타입 변경: 새 파일 로드
             const url = generateNoiseUrl(ns.type);
@@ -246,7 +249,7 @@ export function useNoiseFade({ noisePlayer, audioRef, playbackStateRef, }) {
             }
         }
         else {
-            // 레벨만 변경(또는 mainVolume/mainSpeed 변경으로 settings 객체 참조만 바뀐 경우):
+            // 볼륨만 변경(소음 비율 또는 전체 소리 — 둘 다 소음 볼륨을 움직인다. mainSpeed 변경으로 settings 객체 참조만 바뀐 경우도):
             // 볼륨 반영은 메인이 실제로 재생 중일 때만. 재생 소리/속도가 같은 noiseSettings 객체에
             // 저장되면서, 문장 재생이 끝난 뒤 이 슬라이더만 바꿔도 이 useEffect가 재실행되는데
             // — 그때 noiseEl이 아직(레이스 등으로) paused가 아니면 볼륨만 올려버려 소음이 계속
@@ -281,7 +284,7 @@ export function useNoiseFade({ noisePlayer, audioRef, playbackStateRef, }) {
                 }
             }
         }
-    }, [noisePlayer?.settings, noisePlayer?.settings.enabled, noisePlayer?.settings.level, noisePlayer?.settings.type, cancelNoiseFade, fadeInNoise, fadeOutNoise, audioRef]);
+    }, [noisePlayer?.settings, noisePlayer?.settings.enabled, noiseVolume, noisePlayer?.settings.type, cancelNoiseFade, fadeInNoise, fadeOutNoise, audioRef]);
     // 소음 재생 속도(playbackRate) 반영 — 0.75~1.25. 엘리먼트 속성이라 src 변경에도 유지됨
     useEffect(() => {
         const el = noiseAudioRef.current;

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

@@ -18,7 +18,7 @@ export declare function useTTSPlayback({ ttsText, playbackRate, mainVolume, fill
     fadeOutNoise: (durationMs?: number, onComplete?: () => void) => void;
     noiseSettingsRef: RefObject<{
         enabled: boolean;
-        level: number;
+        volume: number;
         type: string;
     } | null>;
     onDoneRef: RefObject<((ok?: boolean) => void) | undefined>;

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

@@ -75,8 +75,8 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
             setStateLocal('playMode');
             // TTS 시작 시 소음 동기 재생
             const ns = noiseSettingsRef.current;
-            if (ns?.enabled && (ns?.level ?? 0) > 0) {
-                fadeInNoise(ns.level / 9);
+            if (ns?.enabled && (ns?.volume ?? 0) > 0) {
+                fadeInNoise(ns.volume);
             }
             const tick = () => {
                 try {

package/dist/packages/core/src/i18n/locales/en.json

@@ -333,7 +333,8 @@
         "countSentences": "{{n}} sentences",
         "comingSoon": "Coming Soon",
         "nextQuestion": "Next",
-        "noiseLevelTitle": "Noise Level",
+        "noiseRatioTitle": "Noise Ratio",
+        "noiseRatioValue": "{{ratio}}×",
         "noiseTypeTitle": "Noise Type",
         "playVolumeTitle": "Volume",
         "playSpeedTitle": "Speed",

package/dist/packages/core/src/i18n/locales/ko.json

@@ -331,9 +331,10 @@
         "countSentences": "{{n}}문장",
         "comingSoon": "준비 중",
         "nextQuestion": "다음 문제",
-        "noiseLevelTitle": "소음 크기",
+        "noiseRatioTitle": "소음 비율",
+        "noiseRatioValue": "{{ratio}}배",
         "noiseTypeTitle": "소음 종류",
-        "playVolumeTitle": "재생 소리",
+        "playVolumeTitle": "전체 소리",
         "playSpeedTitle": "재생 속도",
         "meter": {
             "sentence": "재생",

package/dist/packages/core/src/types/training.d.ts

@@ -9,11 +9,19 @@ export type CoreNoiseType = 'defaultNoise' | 'street' | 'restaurant' | 'buzz';
 export type CoreNoiseSettings = {
     enabled: boolean;
     type: CoreNoiseType;
-    /** 0–9. 0이면 소음 비활성화. (소음 음원을 +7dB 증폭한 뒤 상한을 4→9로 확장 — 실제 volume = level/9) */
+    /**
+     * 옛 소음 크기 0–9(실제 volume = level/9). **이제 소리는 `noiseRatio` 로 정한다** — 이 값은
+     * `noiseRatio` 가 없는 옛 기록을 옮길 때만 읽는다(`noiseRatioOf`).
+     */
     level: number;
+    /**
+     * 소음 비율 — 문제 소리(`mainVolume`) 대비 배수, 0–2.0(0.1 칸). 1 = 소음과 문제 소리가 같은 크기.
+     * 실제 소음 볼륨 = min(1, mainVolume × noiseRatio). 없으면 `level` 에서 옮긴다.
+     */
+    noiseRatio?: number;
     /** 소음 재생 속도(playbackRate). 0.75–1.25, 기본 1. */
     speed: number;
-    /** 문장(메인) 재생 소리(볼륨). 0–1, 기본 1. 계정 설정("훈련" 패널)과 훈련 화면 툴팁이 함께 영속화한다. */
+    /** 전체 소리(= 문제 소리 볼륨). 0–1, 기본 1. 소음은 이 값 × `noiseRatio`. 계정 설정("훈련" 패널)과 훈련 화면 툴팁이 함께 영속화한다. */
     mainVolume: number;
     /** 문장(메인) 재생 속도(playbackRate). 0.5–1.5, 기본 1. 계정 설정("훈련" 패널)과 훈련 화면 툴팁이 함께 영속화한다. */
     mainSpeed: number;

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

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

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

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