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/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>
   );