feat(space): 사운드 시트와 몰입 모드 크롬 정리 적용

맥락:

- /space 하단 사운드 바를 제거하고 도구를 우측 도크에 수납해 배경 몰입을 강화하며, 몰입 모드 ON 체감을 높이기 위해

변경사항:

- 하단 사운드 프리셋 바를 제거하고 도크에 🎧 Sound 패널을 추가

- features/sound-preset + widgets/sound-sheet를 추가해 프리셋 선택/믹서 UI(더미) 구성

- features/immersion-mode + shared/ui/Toggle을 추가하고 Quick 시트 토글과 연결

- 몰입 모드 ON 시 상단 Current Room 숨김, 허브 버튼 소형화, 레일 미니화, HUD 저대비, 비네팅/그레인 강화

- widgets/space-chrome를 신설해 /space 상단 크롬 렌더링을 분리

- docs/90_current_state.md, docs/session_brief.md 최신 상태로 갱신

검증:

- npx tsc --noEmit

세션-상태: /space는 사운드 시트 기반 도크 구조와 몰입 모드 UI를 제공함

세션-다음: RoomSheetWidget 인원수 기반 정보를 큐레이션 표현으로 전환

세션-리스크: 터치 환경에서 미니 레일 발견성이 낮을 수 있어 보조 힌트가 필요할 수 있음

src/widgets/quick-sheet/ui/QuickSheetWidget.tsx

@@ -1,13 +1,20 @@
 'use client';
 
 import { useState } from 'react';
+import { ImmersionModeToggle } from '@/features/immersion-mode';
+import { Toggle } from '@/shared/ui';
 
 interface QuickSheetWidgetProps {
   onClose: () => void;
+  isImmersionMode: boolean;
+  onToggleImmersionMode: () => void;
 }
 
-export const QuickSheetWidget = ({ onClose }: QuickSheetWidgetProps) => {
-  const [immersionMode, setImmersionMode] = useState(false);
+export const QuickSheetWidget = ({
+  onClose,
+  isImmersionMode,
+  onToggleImmersionMode,
+}: QuickSheetWidgetProps) => {
   const [minimalNotice, setMinimalNotice] = useState(false);
 
   return (
@@ -25,27 +32,19 @@ export const QuickSheetWidget = ({ onClose }: QuickSheetWidgetProps) => {
         </header>
 
         <div className="space-y-3 px-4 py-4">
-          <button
-            type="button"
-            role="switch"
-            aria-checked={immersionMode}
-            onClick={() => setImmersionMode((current) => !current)}
-            className="flex w-full items-center justify-between rounded-xl border border-white/16 bg-white/6 px-3 py-2 text-sm text-white/86"
-          >
-            <span>몰입 모드</span>
-            <span>{immersionMode ? 'ON' : 'OFF'}</span>
-          </button>
+          <ImmersionModeToggle
+            enabled={isImmersionMode}
+            onToggle={onToggleImmersionMode}
+          />
 
-          <button
-            type="button"
-            role="switch"
-            aria-checked={minimalNotice}
-            onClick={() => setMinimalNotice((current) => !current)}
-            className="flex w-full items-center justify-between rounded-xl border border-white/16 bg-white/6 px-3 py-2 text-sm text-white/86"
-          >
-            <span>알림 최소화</span>
-            <span>{minimalNotice ? 'ON' : 'OFF'}</span>
-          </button>
+          <div className="flex items-center justify-between rounded-xl border border-white/16 bg-white/6 px-3 py-2">
+            <span className="text-sm text-white/90">알림 최소화</span>
+            <Toggle
+              checked={minimalNotice}
+              onChange={setMinimalNotice}
+              ariaLabel="알림 최소화 토글"
+            />
+          </div>
 
           <p className="text-xs text-white/58">
             빠른 옵션 UI 목업입니다. 실제 동작은 연결하지 않았습니다.

src/widgets/sound-sheet/index.ts

@@ -0,0 +1 @@
+export * from './ui/SoundSheetWidget';

src/widgets/sound-sheet/ui/SoundSheetWidget.tsx

@@ -0,0 +1,70 @@
+import {
+  SoundPresetControls,
+  type SoundTrackKey,
+} from '@/features/sound-preset';
+
+interface SoundSheetWidgetProps {
+  onClose: () => void;
+  selectedPresetId: string;
+  onSelectPreset: (presetId: string) => void;
+  isMixerOpen: boolean;
+  onToggleMixer: () => void;
+  isMuted: boolean;
+  onMuteChange: (next: boolean) => void;
+  masterVolume: number;
+  onMasterVolumeChange: (next: number) => void;
+  trackKeys: readonly SoundTrackKey[];
+  trackLevels: Record<SoundTrackKey, number>;
+  onTrackLevelChange: (track: SoundTrackKey, level: number) => void;
+}
+
+export const SoundSheetWidget = ({
+  onClose,
+  selectedPresetId,
+  onSelectPreset,
+  isMixerOpen,
+  onToggleMixer,
+  isMuted,
+  onMuteChange,
+  masterVolume,
+  onMasterVolumeChange,
+  trackKeys,
+  trackLevels,
+  onTrackLevelChange,
+}: SoundSheetWidgetProps) => {
+  return (
+    <aside className="fixed bottom-4 right-16 top-4 z-40 w-[min(92vw,340px)] animate-[sheet-in_220ms_ease-out] motion-reduce:animate-none">
+      <div className="flex h-full flex-col overflow-hidden rounded-2xl border border-white/20 bg-slate-950/72 shadow-[0_18px_60px_rgba(2,6,23,0.52)] backdrop-blur-xl">
+        <header className="flex items-center justify-between border-b border-white/12 px-4 py-4">
+          <div>
+            <h2 className="text-base font-semibold text-white">Sound</h2>
+            <p className="text-[11px] text-white/56">오디오 재생은 연결하지 않은 UI 목업입니다.</p>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-lg border border-white/20 px-2 py-1 text-xs text-white/75 transition hover:bg-white/12 hover:text-white"
+          >
+            X
+          </button>
+        </header>
+
+        <div className="flex-1 overflow-y-auto px-4 py-4">
+          <SoundPresetControls
+            selectedPresetId={selectedPresetId}
+            onSelectPreset={onSelectPreset}
+            isMixerOpen={isMixerOpen}
+            onToggleMixer={onToggleMixer}
+            isMuted={isMuted}
+            onMuteChange={onMuteChange}
+            masterVolume={masterVolume}
+            onMasterVolumeChange={onMasterVolumeChange}
+            trackKeys={trackKeys}
+            trackLevels={trackLevels}
+            onTrackLevelChange={onTrackLevelChange}
+          />
+        </div>
+      </div>
+    </aside>
+  );
+};

src/widgets/space-chrome/index.ts

@@ -0,0 +1 @@
+export * from './ui/SpaceChromeWidget';

src/widgets/space-chrome/ui/SpaceChromeWidget.tsx

@@ -0,0 +1,56 @@
+import Link from 'next/link';
+import { cn } from '@/shared/lib/cn';
+
+interface SpaceChromeWidgetProps {
+  roomName: string;
+  vibeLabel: string;
+  isImmersionMode: boolean;
+}
+
+export const SpaceChromeWidget = ({
+  roomName,
+  vibeLabel,
+  isImmersionMode,
+}: SpaceChromeWidgetProps) => {
+  return (
+    <div className="px-4 pt-3 sm:px-6">
+      <header className="flex items-center justify-between rounded-xl border border-white/12 bg-slate-950/35 px-4 py-3 backdrop-blur-lg">
+        <div className="flex items-center gap-2">
+          <span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/30 bg-white/10 text-xs font-semibold">
+            V
+          </span>
+          <p className="text-sm font-semibold tracking-tight">VibeRoom</p>
+        </div>
+
+        <Link
+          href="/app"
+          className={cn(
+            'rounded-lg border border-white/30 text-white/85 transition hover:bg-white/10',
+            isImmersionMode
+              ? 'inline-flex h-7 w-7 items-center justify-center text-[11px]'
+              : 'px-3 py-1.5 text-xs',
+          )}
+        >
+          {isImmersionMode ? (
+            <>
+              <span aria-hidden>↩</span>
+              <span className="sr-only">허브로 돌아가기</span>
+            </>
+          ) : (
+            '허브로 돌아가기'
+          )}
+        </Link>
+      </header>
+
+      {!isImmersionMode ? (
+        <div className="mx-auto mt-6 w-full max-w-5xl">
+          <div className="space-y-1">
+            <p className="text-xs uppercase tracking-[0.14em] text-white/65">Current Room</p>
+            <p className="text-lg font-semibold text-white">{roomName}</p>
+            <p className="text-xs text-white/70">지금 분위기 · {vibeLabel}</p>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};

src/widgets/space-shell/ui/SpaceSkeletonWidget.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
-import Link from 'next/link';
+import { useMemo } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { getRoomBackgroundStyle, getRoomById, ROOM_THEMES } from '@/entities/room';
 import { SOUND_PRESETS } from '@/entities/session';
+import { useImmersionMode } from '@/features/immersion-mode';
 import { cn } from '@/shared/lib/cn';
+import { SpaceChromeWidget } from '@/widgets/space-chrome';
 import { SpaceTimerHudWidget } from '@/widgets/space-timer-hud';
 import { SpaceToolsDockWidget } from '@/widgets/space-tools-dock';
 
@@ -18,17 +19,11 @@ export const SpaceSkeletonWidget = () => {
   const soundFromQuery = searchParams.get('sound');
 
   const room = useMemo(() => getRoomById(roomId) ?? ROOM_THEMES[0], [roomId]);
-
-  const defaultSoundId =
+  const { isImmersionMode, toggleImmersionMode } = useImmersionMode();
+  const initialSoundPresetId =
     SOUND_PRESETS.find((preset) => preset.id === soundFromQuery)?.id ??
     SOUND_PRESETS[0].id;
 
-  const [selectedSoundId, setSelectedSoundId] = useState(defaultSoundId);
-
-  useEffect(() => {
-    setSelectedSoundId(defaultSoundId);
-  }, [defaultSoundId]);
-
   return (
     <div className="relative min-h-screen overflow-x-hidden overflow-y-hidden text-white">
       <div
@@ -36,70 +31,59 @@ export const SpaceSkeletonWidget = () => {
         className="absolute inset-0 w-full"
         style={getRoomBackgroundStyle(room)}
       />
-      <div aria-hidden className="absolute inset-0 w-full bg-slate-950/62" />
       <div
         aria-hidden
-        className="absolute inset-0 w-full opacity-35"
+        className={cn(
+          'absolute inset-0 w-full transition-colors',
+          isImmersionMode ? 'bg-slate-950/72' : 'bg-slate-950/62',
+        )}
+      />
+      <div
+        aria-hidden
+        className={cn(
+          'absolute inset-0 w-full transition-opacity',
+          isImmersionMode ? 'opacity-48' : 'opacity-35',
+        )}
         style={{
           backgroundImage:
             "url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 2px)",
         }}
       />
+      <div
+        aria-hidden
+        className={cn(
+          'absolute inset-0 w-full transition-opacity',
+          isImmersionMode ? 'opacity-88' : 'opacity-62',
+        )}
+        style={{
+          background:
+            'radial-gradient(120% 90% at 50% 50%, rgba(2,6,23,0) 24%, rgba(2,6,23,0.78) 100%)',
+        }}
+      />
 
       <div className="relative z-10 flex min-h-screen flex-col pr-14">
-        <header className="flex items-center justify-between border-b border-white/12 bg-slate-950/35 px-4 py-3 backdrop-blur-lg sm:px-6">
-          <div className="flex items-center gap-2">
-            <span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/30 bg-white/10 text-xs font-semibold">
-              V
-            </span>
-            <p className="text-sm font-semibold tracking-tight">VibeRoom</p>
-          </div>
+        <SpaceChromeWidget
+          roomName={room.name}
+          vibeLabel={room.vibeLabel}
+          isImmersionMode={isImmersionMode}
+        />
 
-          <Link
-            href="/app"
-            className="rounded-lg border border-white/30 px-3 py-1.5 text-xs text-white/85 transition hover:bg-white/10"
-          >
-            허브로 돌아가기
-          </Link>
-        </header>
-
-        <main className="flex-1 px-4 pt-6 sm:px-6">
-          <div className="mx-auto w-full max-w-5xl">
-            <div className="space-y-1">
-              <p className="text-xs uppercase tracking-[0.14em] text-white/65">Current Room</p>
-              <p className="text-lg font-semibold text-white">{room.name}</p>
-              <p className="text-xs text-white/70">현재 {room.activeMembers}명 함께 집중 중</p>
-            </div>
-          </div>
-        </main>
-
-        <footer className="border-t border-white/12 bg-slate-950/42 px-4 py-3 backdrop-blur-md sm:px-6">
-          <div className="mx-auto flex w-full max-w-5xl flex-wrap gap-2">
-            {SOUND_PRESETS.map((preset) => (
-              <button
-                key={preset.id}
-                type="button"
-                onClick={() => setSelectedSoundId(preset.id)}
-                className={cn(
-                  'rounded-full border px-3 py-1.5 text-xs transition-colors',
-                  selectedSoundId === preset.id
-                    ? 'border-sky-200/75 bg-sky-300/25 text-sky-50'
-                    : 'border-white/24 bg-white/8 text-white/82 hover:bg-white/14',
-                )}
-              >
-                {preset.label}
-              </button>
-            ))}
-          </div>
-        </footer>
+        <main className="flex-1" />
       </div>
 
-      <SpaceTimerHudWidget timerLabel={timerLabel} goal={goal} />
+      <SpaceTimerHudWidget
+        timerLabel={timerLabel}
+        goal={goal}
+        isImmersionMode={isImmersionMode}
+      />
 
       <SpaceToolsDockWidget
         roomName={room.name}
         activeMembers={room.activeMembers}
         presence={room.presence}
+        initialSoundPresetId={initialSoundPresetId}
+        isImmersionMode={isImmersionMode}
+        onToggleImmersionMode={toggleImmersionMode}
       />
     </div>
   );

src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx

@@ -5,6 +5,7 @@ interface SpaceTimerHudWidgetProps {
   timerLabel: string;
   goal: string;
   className?: string;
+  isImmersionMode?: boolean;
 }
 
 const HUD_ACTIONS = [
@@ -17,20 +18,44 @@ export const SpaceTimerHudWidget = ({
   timerLabel,
   goal,
   className,
+  isImmersionMode = false,
 }: SpaceTimerHudWidgetProps) => {
   return (
     <div className={cn('pointer-events-none fixed inset-x-0 bottom-[4.7rem] z-20 px-4 pr-16 sm:px-6', className)}>
       <div className="mx-auto w-full max-w-xl pointer-events-auto">
-        <section className="flex h-16 items-center justify-between gap-3 rounded-2xl border border-white/10 bg-black/25 px-3.5 backdrop-blur-sm">
+        <section
+          className={cn(
+            'flex h-16 items-center justify-between gap-3 rounded-2xl px-3.5 transition-colors',
+            isImmersionMode
+              ? 'border border-white/6 bg-black/16 backdrop-blur-md'
+              : 'border border-white/10 bg-black/25 backdrop-blur-sm',
+          )}
+        >
           <div className="min-w-0">
             <div className="flex items-baseline gap-2">
-              <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-white/62">
+              <span
+                className={cn(
+                  'text-[11px] font-semibold uppercase tracking-[0.16em]',
+                  isImmersionMode ? 'text-white/45' : 'text-white/62',
+                )}
+              >
                 Focus
               </span>
-              <span className="text-2xl font-semibold tracking-tight text-white">25:00</span>
-              <span className="text-[11px] text-white/62">{timerLabel}</span>
+              <span
+                className={cn(
+                  'text-2xl font-semibold tracking-tight',
+                  isImmersionMode ? 'text-white/72' : 'text-white',
+                )}
+              >
+                25:00
+              </span>
+              <span className={cn('text-[11px]', isImmersionMode ? 'text-white/42' : 'text-white/62')}>
+                {timerLabel}
+              </span>
             </div>
-            <p className="truncate text-[11px] text-white/58">목표: {goal}</p>
+            <p className={cn('truncate text-[11px]', isImmersionMode ? 'text-white/44' : 'text-white/58')}>
+              목표: {goal}
+            </p>
           </div>
 
           <div className="flex items-center gap-2.5">
@@ -40,7 +65,12 @@ export const SpaceTimerHudWidget = ({
                   key={action.id}
                   type="button"
                   title={action.label}
-                  className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/15 bg-white/8 text-sm text-white/82 transition-colors hover:bg-white/14 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200/80"
+                  className={cn(
+                    'inline-flex h-8 w-8 items-center justify-center rounded-full border text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200/80',
+                    isImmersionMode
+                      ? 'border-white/10 bg-white/5 text-white/64 hover:bg-white/10'
+                      : 'border-white/15 bg-white/8 text-white/82 hover:bg-white/14',
+                  )}
                 >
                   <span aria-hidden>{action.icon}</span>
                   <span className="sr-only">{action.label}</span>

src/widgets/space-tools-dock/model/useSpaceToolsDock.ts

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 
-export type SpaceToolPanel = 'room' | 'notes' | 'quick' | null;
+export type SpaceToolPanel = 'sound' | 'room' | 'notes' | 'quick' | null;
 
 export const useSpaceToolsDock = () => {
   const [activePanel, setActivePanel] = useState<SpaceToolPanel>(null);

src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx

@@ -1,26 +1,33 @@
 'use client';
 
+import { useState } from 'react';
 import type { RoomPresence } from '@/entities/room';
 import { CHECK_IN_PHRASES, REACTION_OPTIONS } from '@/entities/session';
 import { useCheckIn } from '@/features/check-in';
+import { useSoundPresetSelection } from '@/features/sound-preset';
 import { useToast } from '@/shared/ui';
 import { cn } from '@/shared/lib/cn';
 import { NotesSheetWidget } from '@/widgets/notes-sheet';
 import { QuickSheetWidget } from '@/widgets/quick-sheet';
 import { RoomSheetWidget } from '@/widgets/room-sheet';
+import { SoundSheetWidget } from '@/widgets/sound-sheet';
 import { useSpaceToolsDock } from '../model/useSpaceToolsDock';
 
 interface SpaceToolsDockWidgetProps {
   roomName: string;
   activeMembers: number;
   presence: RoomPresence;
+  initialSoundPresetId?: string;
+  isImmersionMode: boolean;
+  onToggleImmersionMode: () => void;
 }
 
 const TOOL_BUTTONS: Array<{
-  id: 'room' | 'notes' | 'quick';
+  id: 'sound' | 'room' | 'notes' | 'quick';
   icon: string;
   label: string;
 }> = [
+  { id: 'sound', icon: '🎧', label: 'Sound' },
   { id: 'room', icon: '👥', label: 'Room' },
   { id: 'notes', icon: '📝', label: 'Notes' },
   { id: 'quick', icon: '⚙️', label: 'Quick' },
@@ -30,10 +37,36 @@ export const SpaceToolsDockWidget = ({
   roomName,
   activeMembers,
   presence,
+  initialSoundPresetId,
+  isImmersionMode,
+  onToggleImmersionMode,
 }: SpaceToolsDockWidgetProps) => {
   const { pushToast } = useToast();
   const { lastCheckIn, recordCheckIn } = useCheckIn();
   const { activePanel, closePanel, togglePanel } = useSpaceToolsDock();
+  const [isRailExpanded, setRailExpanded] = useState(false);
+  const {
+    selectedPresetId,
+    setSelectedPresetId,
+    isMixerOpen,
+    setMixerOpen,
+    isMuted,
+    setMuted,
+    masterVolume,
+    setMasterVolume,
+    trackLevels,
+    setTrackLevel,
+    trackKeys,
+  } = useSoundPresetSelection(initialSoundPresetId);
+
+  const isDockExpanded = !isImmersionMode || isRailExpanded || activePanel !== null;
+
+  const handleClosePanel = () => {
+    closePanel();
+    if (isImmersionMode) {
+      setRailExpanded(false);
+    }
+  };
 
   const handleCheckIn = (message: string) => {
     recordCheckIn(message);
@@ -44,39 +77,95 @@ export const SpaceToolsDockWidget = ({
     pushToast({ title: `리액션: ${emoji}` });
   };
 
+  const handleToolSelect = (panel: (typeof TOOL_BUTTONS)[number]['id']) => {
+    if (isImmersionMode) {
+      setRailExpanded(true);
+    }
+    togglePanel(panel);
+  };
+
   return (
     <>
       {activePanel ? (
         <button
           type="button"
           aria-label="시트 닫기"
-          onClick={closePanel}
+          onClick={handleClosePanel}
           className="fixed inset-0 z-30 bg-slate-950/10"
         />
       ) : null}
 
-      <div className="fixed right-2 top-1/2 z-50 -translate-y-1/2">
-        <div className="flex w-12 flex-col items-center gap-2 rounded-2xl border border-white/20 bg-slate-950/66 py-2 shadow-lg shadow-slate-950/60 backdrop-blur-xl">
-          {TOOL_BUTTONS.map((tool) => (
+      <div
+        className="fixed right-2 top-1/2 z-50 -translate-y-1/2"
+        onMouseEnter={() => {
+          if (isImmersionMode) {
+            setRailExpanded(true);
+          }
+        }}
+        onMouseLeave={() => {
+          if (isImmersionMode && activePanel === null) {
+            setRailExpanded(false);
+          }
+        }}
+      >
+        <div
+          className={cn(
+            'flex flex-col items-center gap-2 transition-all duration-200',
+            isDockExpanded
+              ? 'w-12 rounded-2xl border border-white/20 bg-slate-950/66 py-2 shadow-lg shadow-slate-950/60 backdrop-blur-xl'
+              : 'w-3 rounded-full border border-white/26 bg-slate-950/52 py-3',
+          )}
+        >
+          {isDockExpanded ? (
+            TOOL_BUTTONS.map((tool) => (
+              <button
+                key={tool.id}
+                type="button"
+                title={tool.label}
+                onClick={() => handleToolSelect(tool.id)}
+                className={cn(
+                  'inline-flex h-9 w-9 items-center justify-center rounded-xl border text-base transition-colors',
+                  activePanel === tool.id
+                    ? 'border-sky-200/75 bg-sky-300/28'
+                    : 'border-white/20 bg-white/8 hover:bg-white/15',
+                )}
+              >
+                <span aria-hidden>{tool.icon}</span>
+                <span className="sr-only">{tool.label}</span>
+              </button>
+            ))
+          ) : (
             <button
-              key={tool.id}
               type="button"
-              title={tool.label}
-              onClick={() => togglePanel(tool.id)}
-              className={cn(
-                'inline-flex h-9 w-9 items-center justify-center rounded-xl border text-base transition-colors',
-                activePanel === tool.id
-                  ? 'border-sky-200/75 bg-sky-300/28'
-                  : 'border-white/20 bg-white/8 hover:bg-white/15',
-              )}
+              onClick={() => setRailExpanded(true)}
+              className="inline-flex flex-col items-center gap-1 py-1"
             >
-              <span aria-hidden>{tool.icon}</span>
-              <span className="sr-only">{tool.label}</span>
+              <span className="sr-only">도구 레일 펼치기</span>
+              <span aria-hidden className="h-1 w-1 rounded-full bg-white/74" />
+              <span aria-hidden className="h-1 w-1 rounded-full bg-white/58" />
+              <span aria-hidden className="h-1 w-1 rounded-full bg-white/44" />
             </button>
-          ))}
+          )}
         </div>
       </div>
 
+      {activePanel === 'sound' ? (
+        <SoundSheetWidget
+          onClose={handleClosePanel}
+          selectedPresetId={selectedPresetId}
+          onSelectPreset={setSelectedPresetId}
+          isMixerOpen={isMixerOpen}
+          onToggleMixer={() => setMixerOpen((current) => !current)}
+          isMuted={isMuted}
+          onMuteChange={setMuted}
+          masterVolume={masterVolume}
+          onMasterVolumeChange={setMasterVolume}
+          trackKeys={trackKeys}
+          trackLevels={trackLevels}
+          onTrackLevelChange={setTrackLevel}
+        />
+      ) : null}
+
       {activePanel === 'room' ? (
         <RoomSheetWidget
           roomName={roomName}
@@ -85,7 +174,7 @@ export const SpaceToolsDockWidget = ({
           checkInPhrases={CHECK_IN_PHRASES}
           reactions={REACTION_OPTIONS}
           lastCheckIn={lastCheckIn}
-          onClose={closePanel}
+          onClose={handleClosePanel}
           onCheckIn={handleCheckIn}
           onReaction={(reaction) => handleReaction(reaction.emoji)}
         />
@@ -93,13 +182,19 @@ export const SpaceToolsDockWidget = ({
 
       {activePanel === 'notes' ? (
         <NotesSheetWidget
-          onClose={closePanel}
+          onClose={handleClosePanel}
           onNoteAdded={(note) => pushToast({ title: `노트 추가: ${note}` })}
           onNoteRemoved={() => pushToast({ title: '노트를 정리했어요' })}
         />
       ) : null}
 
-      {activePanel === 'quick' ? <QuickSheetWidget onClose={closePanel} /> : null}
+      {activePanel === 'quick' ? (
+        <QuickSheetWidget
+          onClose={handleClosePanel}
+          isImmersionMode={isImmersionMode}
+          onToggleImmersionMode={onToggleImmersionMode}
+        />
+      ) : null}
     </>
   );
 };