fix(space): Quick Controls 사운드 복원과 HUD 피드백 정합성 수정

src/widgets/control-center-sheet/ui/ControlCenterSheetWidget.tsx

@@ -4,10 +4,11 @@ import { useMemo } from 'react';
 import type { PlanTier } from '@/entities/plan';
 import {
   PRO_LOCKED_ROOM_IDS,
+  PRO_LOCKED_SOUND_IDS,
   PRO_LOCKED_TIMER_LABELS,
 } from '@/entities/plan';
 import { getRoomCardBackgroundStyle, type RoomTheme } from '@/entities/room';
-import type { TimerPreset } from '@/entities/session';
+import { SOUND_PRESETS, type TimerPreset } from '@/entities/session';
 import { cn } from '@/shared/lib/cn';
 import { useReducedMotion } from '@/shared/lib/useReducedMotion';
 import { Toggle } from '@/shared/ui';
@@ -17,6 +18,7 @@ interface ControlCenterSheetWidgetProps {
   rooms: RoomTheme[];
   selectedRoomId: string;
   selectedTimerLabel: string;
+  selectedSoundPresetId: string;
   sceneRecommendedSoundLabel: string;
   sceneRecommendedTimerLabel: string;
   timerPresets: TimerPreset[];
@@ -24,6 +26,7 @@ interface ControlCenterSheetWidgetProps {
   onAutoHideControlsChange: (next: boolean) => void;
   onSelectRoom: (roomId: string) => void;
   onSelectTimer: (timerLabel: string) => void;
+  onSelectSound: (presetId: string) => void;
   onLockedClick: (source: string) => void;
   onResetToRecommended: () => void;
 }
@@ -50,6 +53,7 @@ export const ControlCenterSheetWidget = ({
   rooms,
   selectedRoomId,
   selectedTimerLabel,
+  selectedSoundPresetId,
   sceneRecommendedSoundLabel,
   sceneRecommendedTimerLabel,
   timerPresets,
@@ -57,6 +61,7 @@ export const ControlCenterSheetWidget = ({
   onAutoHideControlsChange,
   onSelectRoom,
   onSelectTimer,
+  onSelectSound,
   onLockedClick,
   onResetToRecommended,
 }: ControlCenterSheetWidgetProps) => {
@@ -155,6 +160,44 @@ export const ControlCenterSheetWidget = ({
         </div>
       </section>
 
+      <section className="space-y-2.5 rounded-2xl border border-white/12 bg-black/22 p-3.5 backdrop-blur-md">
+        <SectionTitle
+          title="Sound"
+          description={SOUND_PRESETS.find((preset) => preset.id === selectedSoundPresetId)?.label ?? '기본'}
+        />
+        <div className="grid grid-cols-3 gap-2">
+          {SOUND_PRESETS.slice(0, 6).map((preset) => {
+            const selected = preset.id === selectedSoundPresetId;
+            const locked = !isPro && PRO_LOCKED_SOUND_IDS.includes(preset.id);
+
+            return (
+              <button
+                key={preset.id}
+                type="button"
+                onClick={() => {
+                  if (locked) {
+                    onLockedClick(`사운드: ${preset.label}`);
+                    return;
+                  }
+
+                  onSelectSound(preset.id);
+                }}
+                className={cn(
+                  'relative rounded-xl border px-3 py-2 text-[11px]',
+                  colorMotionClass,
+                  selected
+                    ? 'border-sky-200/42 bg-sky-200/16 text-white'
+                    : 'border-white/18 bg-white/[0.04] text-white/74 hover:bg-white/[0.1]',
+                )}
+              >
+                {preset.label}
+                {locked ? <span className="ml-1 text-[9px] text-white/66">LOCK PRO</span> : null}
+              </button>
+            );
+          })}
+        </div>
+      </section>
+
       <div className="space-y-1.5 rounded-xl border border-white/12 bg-white/[0.03] px-3 py-2.5">
         <p className="text-[11px] text-white/58">추천: {sceneRecommendedSoundLabel} · {sceneRecommendedTimerLabel}</p>
         <button