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 인원수 기반 정보를 큐레이션 표현으로 전환 세션-리스크: 터치 환경에서 미니 레일 발견성이 낮을 수 있어 보조 힌트가 필요할 수 있음
2026-02-27 14:14:12 +09:00
parent f0efd74af3
commit ce1664f472
19 changed files with 640 additions and 114 deletions
--- a/docs/90_current_state.md
+++ b/docs/90_current_state.md
@@ -19,6 +19,15 @@ Last Updated: 2026-02-27
 - `/app` Start Ritual에서 절차감을 높이던 `건너뛰기` 제거
 - `/app`에서 `다시 시작(30초)` 제거
 - `/space` HUD에 `features/restart-30s` 기반 `↻ 다시 시작 + 30초 배지` 추가
+- `/space` 하단 사운드 프리셋 바 제거, 오른쪽 `🎧 Sound` 시트로 이동
+- `features/sound-preset` + `widgets/sound-sheet` 추가
+- `features/immersion-mode` 추가, Quick 시트에서 몰입 모드 토글 연결
+- 몰입 모드 ON 시 `/space` 크롬 정리:
+  - 상단 `Current Room` 블록 숨김
+  - 우상단 허브 버튼 소형 아이콘화
+  - 오른쪽 아이콘 레일 기본 미니화(hover/click 시 확장)
+  - HUD 대비/불투명도 완화
+  - 비네팅/그레인 강화
 - `/app` 룸 카드의 인원수 기반 정보 제거
 - `entities/room`에 분위기/추천 필드 추가:
  - `recommendedSound`
@@ -28,14 +37,14 @@ Last Updated: 2026-02-27

 ## NEXT

-1. `/space` 상단 카피의 인원수 문구(`현재 n명`)를 분위기형 문구로 전환
-2. `RoomSheetWidget`/도크 패널의 인원수 기반 UI를 큐레이션형 정보로 재정의할지 정책 확정
+1. `RoomSheetWidget`/도크 패널의 인원수 기반 UI를 큐레이션형 정보로 재정의
+2. 몰입 모드에서 터치 환경(hover 없음) 레일 노출 UX를 보완할지 정책 확정

 ## RISKS

 - `npm run build`는 네트워크 제한 시 Google Font fetch 실패 가능
- 현재 워크트리는 다수 파일이 수정/추가된 상태라 커밋 단위 분리가 중요
- 일부 문구가 여전히 실시간 지표처럼 읽힐 수 있으므로 카피 가이드 지속 점검 필요
+- 터치 기기에서 레일 미니 상태가 발견성 낮을 수 있어 추가 힌트가 필요할 수 있음
+- 일부 시트(예: Room)는 아직 인원수 중심 문구가 남아 있어 톤 불일치 가능성 존재

 ## CHANGED FILES

@@ -56,10 +65,26 @@ Last Updated: 2026-02-27
 - `src/features/restart-30s/index.ts`
 - `src/features/restart-30s/model/useRestart30s.ts`
 - `src/features/restart-30s/ui/Restart30sAction.tsx`
+- `src/features/immersion-mode/index.ts`
+- `src/features/immersion-mode/model/useImmersionMode.ts`
+- `src/features/immersion-mode/ui/ImmersionModeToggle.tsx`
+- `src/features/sound-preset/index.ts`
+- `src/features/sound-preset/model/useSoundPresetSelection.ts`
+- `src/features/sound-preset/ui/SoundPresetControls.tsx`
+- `src/shared/ui/Toggle.tsx`
+- `src/widgets/sound-sheet/index.ts`
+- `src/widgets/sound-sheet/ui/SoundSheetWidget.tsx`
+- `src/widgets/space-chrome/index.ts`
+- `src/widgets/space-chrome/ui/SpaceChromeWidget.tsx`
+- `src/widgets/quick-sheet/ui/QuickSheetWidget.tsx`
+- `src/widgets/space-shell/ui/SpaceSkeletonWidget.tsx`
+- `src/widgets/space-tools-dock/model/useSpaceToolsDock.ts`
+- `src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx`
 - `src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx`

 ## QUICK VERIFY

 1. `/app`: 건너뛰기/다시 시작 노출 없음
 2. `/app`: 룸 카드에 사람 수 문구 없음, 추천 정보 노출
-3. `/space`: HUD 근처 `↻ 다시 시작` 클릭 시 토스트 노출
+3. `/space`: 하단 사운드 바 없음, 오른쪽 `🎧 Sound` 시트에서 프리셋 선택 가능
+4. `/space`: 몰입 모드 ON 시 상단 룸 블록 숨김 + 레일 미니화 + HUD 저대비 적용
--- a/docs/session_brief.md
+++ b/docs/session_brief.md
@@ -14,19 +14,21 @@ Last Updated: 2026-02-27

 ## 현재 우선순위

-1. `/space` 상단의 인원 수 카피를 분위기형 카피로 전환
-2. `RoomSheetWidget`/도크 패널의 인원 수 UI를 큐레이션형으로 재정의할지 결정
+1. `RoomSheetWidget`/도크 패널의 인원 수 UI를 큐레이션형으로 전환
+2. 몰입 모드에서 터치 환경 레일 발견성(미니 핸들 UX) 보완 여부 결정

 ## 최근 세션 상태

 - 세션 복구용 문서/템플릿/스크립트가 준비되어 있다.
 - `workFlow.md`는 토큰 절약 모드를 사용한다.
+- `/space` 하단 사운드 바를 제거하고 오른쪽 `🎧 Sound` 시트로 이동했다.
+- 몰입 모드 ON 시 상단 룸 블록 숨김, 레일 미니화, HUD 저대비, 비네팅 강화가 적용된다.
 - 이후 작업은 `docs/work.md`를 기준으로 실행한다.

 ## 리스크

 - 네트워크 제한 환경에서는 `npm run build` 시 Google Fonts fetch 실패 가능
- 작업 범위가 넓을 때 커밋 단위가 커질 수 있으므로 주제 분리 점검 필요
+- 터치 환경에서 레일 미니 상태가 발견성 낮을 수 있어 UX 보완이 필요할 수 있음

 ## 상세 원문 위치

--- a/src/features/immersion-mode/index.ts
+++ b/src/features/immersion-mode/index.ts
@@ -0,0 +1,2 @@
+export * from './model/useImmersionMode';
+export * from './ui/ImmersionModeToggle';
--- a/src/features/immersion-mode/model/useImmersionMode.ts
+++ b/src/features/immersion-mode/model/useImmersionMode.ts
@@ -0,0 +1,16 @@
+'use client';
+
+import { useState } from 'react';
+
+export const useImmersionMode = () => {
+  const [isImmersionMode, setImmersionMode] = useState(false);
+
+  const toggleImmersionMode = () => {
+    setImmersionMode((current) => !current);
+  };
+
+  return {
+    isImmersionMode,
+    toggleImmersionMode,
+  };
+};
--- a/src/features/immersion-mode/ui/ImmersionModeToggle.tsx
+++ b/src/features/immersion-mode/ui/ImmersionModeToggle.tsx
@@ -0,0 +1,25 @@
+import { Toggle } from '@/shared/ui';
+
+interface ImmersionModeToggleProps {
+  enabled: boolean;
+  onToggle: () => void;
+}
+
+export const ImmersionModeToggle = ({
+  enabled,
+  onToggle,
+}: ImmersionModeToggleProps) => {
+  return (
+    <div className="flex items-center justify-between rounded-xl border border-white/16 bg-white/6 px-3 py-2">
+      <div>
+        <p className="text-sm text-white/90">몰입 모드</p>
+        <p className="text-[11px] text-white/56">배경 우선으로 화면 요소를 최소화합니다.</p>
+      </div>
+      <Toggle
+        checked={enabled}
+        onChange={onToggle}
+        ariaLabel="몰입 모드 토글"
+      />
+    </div>
+  );
+};
--- a/src/features/sound-preset/index.ts
+++ b/src/features/sound-preset/index.ts
@@ -0,0 +1,2 @@
+export * from './model/useSoundPresetSelection';
+export * from './ui/SoundPresetControls';
--- a/src/features/sound-preset/model/useSoundPresetSelection.ts
+++ b/src/features/sound-preset/model/useSoundPresetSelection.ts
@@ -0,0 +1,50 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { SOUND_PRESETS } from '@/entities/session';
+
+const TRACK_KEYS = ['white', 'rain', 'cafe', 'wave', 'fan'] as const;
+
+export type SoundTrackKey = (typeof TRACK_KEYS)[number];
+
+const DEFAULT_TRACK_LEVELS: Record<SoundTrackKey, number> = {
+  white: 62,
+  rain: 55,
+  cafe: 48,
+  wave: 44,
+  fan: 40,
+};
+
+const DEFAULT_MASTER_VOLUME = 68;
+
+export const useSoundPresetSelection = (initialPresetId?: string) => {
+  const safeInitialPresetId = useMemo(() => {
+    const hasPreset = SOUND_PRESETS.some((preset) => preset.id === initialPresetId);
+    return hasPreset && initialPresetId ? initialPresetId : SOUND_PRESETS[0].id;
+  }, [initialPresetId]);
+
+  const [selectedPresetId, setSelectedPresetId] = useState(safeInitialPresetId);
+  const [isMixerOpen, setMixerOpen] = useState(false);
+  const [isMuted, setMuted] = useState(false);
+  const [masterVolume, setMasterVolume] = useState(DEFAULT_MASTER_VOLUME);
+  const [trackLevels, setTrackLevels] =
+    useState<Record<SoundTrackKey, number>>(DEFAULT_TRACK_LEVELS);
+
+  const setTrackLevel = (track: SoundTrackKey, level: number) => {
+    setTrackLevels((current) => ({ ...current, [track]: level }));
+  };
+
+  return {
+    selectedPresetId,
+    setSelectedPresetId,
+    isMixerOpen,
+    setMixerOpen,
+    isMuted,
+    setMuted,
+    masterVolume,
+    setMasterVolume,
+    trackLevels,
+    setTrackLevel,
+    trackKeys: TRACK_KEYS,
+  };
+};
--- a/src/features/sound-preset/ui/SoundPresetControls.tsx
+++ b/src/features/sound-preset/ui/SoundPresetControls.tsx
@@ -0,0 +1,128 @@
+import { SOUND_PRESETS } from '@/entities/session';
+import { Chip, Toggle } from '@/shared/ui';
+import type { SoundTrackKey } from '../model/useSoundPresetSelection';
+
+interface SoundPresetControlsProps {
+  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;
+}
+
+const TRACK_LABELS: Record<SoundTrackKey, string> = {
+  white: 'White',
+  rain: 'Rain',
+  cafe: 'Cafe',
+  wave: 'Wave',
+  fan: 'Fan',
+};
+
+const clampSliderValue = (value: number) => Math.max(0, Math.min(100, value));
+
+export const SoundPresetControls = ({
+  selectedPresetId,
+  onSelectPreset,
+  isMixerOpen,
+  onToggleMixer,
+  isMuted,
+  onMuteChange,
+  masterVolume,
+  onMasterVolumeChange,
+  trackKeys,
+  trackLevels,
+  onTrackLevelChange,
+}: SoundPresetControlsProps) => {
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <p className="text-xs uppercase tracking-[0.11em] text-white/58">Preset</p>
+        <div className="grid grid-cols-2 gap-2">
+          {SOUND_PRESETS.map((preset) => (
+            <button
+              key={preset.id}
+              type="button"
+              onClick={() => onSelectPreset(preset.id)}
+              className={`rounded-xl border px-3 py-2 text-left text-xs transition-colors ${
+                selectedPresetId === preset.id
+                  ? 'border-sky-200/76 bg-sky-300/24 text-sky-50'
+                  : 'border-white/18 bg-white/7 text-white/82 hover:bg-white/13'
+              }`}
+            >
+              {preset.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <button
+        type="button"
+        onClick={onToggleMixer}
+        className="inline-flex items-center gap-2 text-xs text-white/70 transition hover:text-white"
+      >
+        <span>{isMixerOpen ? 'Mixer 접기' : 'Mixer 펼치기'}</span>
+        <Chip tone="neutral" className="!cursor-pointer !px-2 !py-0.5 text-[10px]">
+          더미
+        </Chip>
+      </button>
+
+      {isMixerOpen ? (
+        <div className="space-y-3 rounded-xl border border-white/14 bg-white/6 p-3">
+          <div className="flex items-center justify-between">
+            <span className="text-xs text-white/78">마스터 볼륨</span>
+            <span className="text-[11px] text-white/58">{masterVolume}%</span>
+          </div>
+          <input
+            type="range"
+            min={0}
+            max={100}
+            value={masterVolume}
+            onChange={(event) =>
+              onMasterVolumeChange(clampSliderValue(Number(event.target.value)))
+            }
+            className="w-full accent-sky-300/80"
+          />
+
+          <div className="flex items-center justify-between border-t border-white/12 pt-2">
+            <p className="text-xs text-white/78">뮤트</p>
+            <Toggle
+              checked={isMuted}
+              onChange={onMuteChange}
+              ariaLabel="마스터 뮤트 토글"
+            />
+          </div>
+
+          <div className="space-y-2 border-t border-white/12 pt-2">
+            {trackKeys.map((track) => (
+              <div key={track} className="space-y-1">
+                <div className="flex items-center justify-between">
+                  <span className="text-[11px] text-white/72">{TRACK_LABELS[track]}</span>
+                  <span className="text-[11px] text-white/50">{trackLevels[track]}%</span>
+                </div>
+                <input
+                  type="range"
+                  min={0}
+                  max={100}
+                  value={trackLevels[track]}
+                  onChange={(event) =>
+                    onTrackLevelChange(
+                      track,
+                      clampSliderValue(Number(event.target.value)),
+                    )
+                  }
+                  className="w-full accent-sky-200/70"
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};
--- a/src/shared/ui/Toggle.tsx
+++ b/src/shared/ui/Toggle.tsx
@@ -0,0 +1,39 @@
+import { cn } from '@/shared/lib/cn';
+
+interface ToggleProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  ariaLabel: string;
+  className?: string;
+}
+
+export const Toggle = ({
+  checked,
+  onChange,
+  ariaLabel,
+  className,
+}: ToggleProps) => {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      aria-label={ariaLabel}
+      onClick={() => onChange(!checked)}
+      className={cn(
+        'inline-flex w-11 items-center rounded-full border px-1 py-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200/80',
+        checked
+          ? 'border-sky-200/70 bg-sky-300/24'
+          : 'border-white/28 bg-white/9',
+        className,
+      )}
+    >
+      <span
+        className={cn(
+          'h-4 w-4 rounded-full bg-white transition-transform duration-200 motion-reduce:transition-none',
+          checked ? 'translate-x-5' : 'translate-x-0',
+        )}
+      />
+    </button>
+  );
+};
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -5,3 +5,4 @@ export * from './GlassCard';
 export * from './Modal';
 export * from './Tabs';
 export * from './Toast';
+export * from './Toggle';
--- a/src/widgets/quick-sheet/ui/QuickSheetWidget.tsx
+++ b/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 목업입니다. 실제 동작은 연결하지 않았습니다.
--- a/src/widgets/sound-sheet/index.ts
+++ b/src/widgets/sound-sheet/index.ts
@@ -0,0 +1 @@
+export * from './ui/SoundSheetWidget';
--- a/src/widgets/sound-sheet/ui/SoundSheetWidget.tsx
+++ b/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>
+  );
+};
--- a/src/widgets/space-chrome/index.ts
+++ b/src/widgets/space-chrome/index.ts
@@ -0,0 +1 @@
+export * from './ui/SpaceChromeWidget';
--- a/src/widgets/space-chrome/ui/SpaceChromeWidget.tsx
+++ b/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>
+  );
+};
--- a/src/widgets/space-shell/ui/SpaceSkeletonWidget.tsx
+++ b/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>
  );
--- a/src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx
+++ b/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>
--- a/src/widgets/space-tools-dock/model/useSpaceToolsDock.ts
+++ b/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);
--- a/src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx
+++ b/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}
    </>
  );
 };