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

eslint.config.mjs

@@ -1,10 +1,15 @@
-// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
-import storybook from "eslint-plugin-storybook";
-
 import { defineConfig, globalIgnores } from "eslint/config";
 import nextVitals from "eslint-config-next/core-web-vitals";
 import nextTs from "eslint-config-next/typescript";
 
+let storybookConfig = [];
+
+try {
+  // Optional dependency: lint should still run when Storybook plugin is not installed.
+  const storybook = await import("eslint-plugin-storybook");
+  storybookConfig = storybook.default?.configs?.["flat/recommended"] ?? [];
+} catch {}
+
 const eslintConfig = defineConfig([
   ...nextVitals,
   ...nextTs,
@@ -16,7 +21,7 @@ const eslintConfig = defineConfig([
     "build/**",
     "next-env.d.ts",
   ]),
-  ...storybook.configs["flat/recommended"]
+  ...storybookConfig
 ]);
 
 export default eslintConfig;

src/features/restart-30s/model/useRestart30s.ts

@@ -1,32 +1,17 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
-import { useToast } from '@/shared/ui';
-import {
-  RECOVERY_30S_BUTTON_LABEL,
-  RECOVERY_30S_TOAST_MESSAGE,
-} from './copy';
-
 const MODE_DURATION_MS = 2000;
-const HINT_DURATION_MS = 1800;
 
 export const useRestart30s = () => {
-  const { pushToast } = useToast();
   const [isBreatheMode, setBreatheMode] = useState(false);
-  const [hintMessage, setHintMessage] = useState<string | null>(null);
   const resetTimerRef = useRef<number | null>(null);
-  const hintTimerRef = useRef<number | null>(null);
 
   const clearTimers = () => {
     if (resetTimerRef.current !== null) {
       window.clearTimeout(resetTimerRef.current);
       resetTimerRef.current = null;
     }
-
-    if (hintTimerRef.current !== null) {
-      window.clearTimeout(hintTimerRef.current);
-      hintTimerRef.current = null;
-    }
   };
 
   useEffect(() => {
@@ -38,16 +23,6 @@ export const useRestart30s = () => {
   const triggerRestart = () => {
     clearTimers();
     setBreatheMode(true);
-    setHintMessage(RECOVERY_30S_TOAST_MESSAGE);
-
-    pushToast({
-      title: RECOVERY_30S_BUTTON_LABEL,
-      description: RECOVERY_30S_TOAST_MESSAGE,
-    });
-
-    hintTimerRef.current = window.setTimeout(() => {
-      setHintMessage(null);
-    }, HINT_DURATION_MS);
 
     resetTimerRef.current = window.setTimeout(() => {
       setBreatheMode(false);
@@ -56,7 +31,6 @@ export const useRestart30s = () => {
 
   return {
     isBreatheMode,
-    hintMessage,
     triggerRestart,
   };
 };

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

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

@@ -7,7 +7,6 @@ import { ExitHoldButton } from '@/features/exit-hold';
 import { ManagePlanSheetContent, PaywallSheetContent } from '@/features/paywall-sheet';
 import { PlanPill } from '@/features/plan-pill';
 import type { HudStatusLinePayload } from '@/shared/lib/useHudStatusLine';
-import { useToast } from '@/shared/ui';
 import { cn } from '@/shared/lib/cn';
 import { ControlCenterSheetWidget } from '@/widgets/control-center-sheet';
 import { SpaceSideSheet } from '@/widgets/space-sheet-shell';
@@ -40,6 +39,7 @@ interface SpaceToolsDockWidgetProps {
   onDeleteThought: (thoughtId: string) => RecentThought | null;
   onSetThoughtCompleted: (thoughtId: string, isCompleted: boolean) => RecentThought | null;
   onRestoreThought: (thought: RecentThought) => void;
+  onRestoreThoughts: (thoughts: RecentThought[]) => void;
   onClearInbox: () => RecentThought[];
   onResetToSceneRecommended: () => void;
   onStatusMessage: (payload: HudStatusLinePayload) => void;
@@ -68,12 +68,12 @@ export const SpaceToolsDockWidget = ({
   onDeleteThought,
   onSetThoughtCompleted,
   onRestoreThought,
+  onRestoreThoughts,
   onClearInbox,
   onResetToSceneRecommended,
   onStatusMessage,
   onExitRequested,
 }: SpaceToolsDockWidgetProps) => {
-  const { pushToast } = useToast();
   const [openPopover, setOpenPopover] = useState<SpaceAnchorPopoverId | null>(null);
   const [utilityPanel, setUtilityPanel] = useState<SpaceUtilityPanelId | null>(null);
   const [autoHideControls, setAutoHideControls] = useState(true);
@@ -121,8 +121,23 @@ export const SpaceToolsDockWidget = ({
   }, [openPopover]);
 
   useEffect(() => {
-    if (!isFocusMode || openPopover || utilityPanel) {
+    if (isFocusMode) {
+      return;
+    }
+
+    const rafId = window.requestAnimationFrame(() => {
+      setOpenPopover(null);
+      setUtilityPanel(null);
       setIdle(false);
+    });
+
+    return () => {
+      window.cancelAnimationFrame(rafId);
+    };
+  }, [isFocusMode]);
+
+  useEffect(() => {
+    if (!isFocusMode || openPopover || utilityPanel) {
       return;
     }
 
@@ -197,6 +212,7 @@ export const SpaceToolsDockWidget = ({
   }, [autoHideControls, utilityPanel]);
 
   const openUtilityPanel = (panel: SpaceUtilityPanelId) => {
+    setIdle(false);
     setOpenPopover(null);
     setUtilityPanel(panel);
   };
@@ -260,7 +276,25 @@ export const SpaceToolsDockWidget = ({
   };
 
   const handleInboxClear = () => {
-    onClearInbox();
+    const snapshot = onClearInbox();
+
+    if (snapshot.length === 0) {
+      onStatusMessage({ message: '비울 항목이 없어요.' });
+      return;
+    }
+
+    onStatusMessage({
+      message: '모두 비워짐',
+      durationMs: 4200,
+      priority: 'undo',
+      action: {
+        label: '실행취소',
+        onClick: () => {
+          onRestoreThoughts(snapshot);
+          onStatusMessage({ message: '복원했어요.' });
+        },
+      },
+    });
   };
 
   const handlePlanPillClick = () => {
@@ -273,13 +307,13 @@ export const SpaceToolsDockWidget = ({
   };
 
   const handleLockedClick = (source: string) => {
-    pushToast({ title: `${source}은(는) PRO 기능이에요.` });
+    onStatusMessage({ message: `${source}은(는) PRO 기능이에요.` });
     openUtilityPanel('paywall');
   };
 
   const handleStartPro = () => {
     setPlan('pro');
-    pushToast({ title: '결제(더미)' });
+    onStatusMessage({ message: '결제(더미)' });
     openUtilityPanel('control-center');
   };
 
@@ -321,7 +355,7 @@ export const SpaceToolsDockWidget = ({
 
   return (
     <>
-      {openPopover ? (
+      {isFocusMode && openPopover ? (
         <button
           type="button"
           aria-label="팝오버 닫기"
@@ -364,7 +398,10 @@ export const SpaceToolsDockWidget = ({
               />
               <button
                 type="button"
-                onClick={() => setOpenPopover((current) => (current === 'notes' ? null : 'notes'))}
+                onClick={() => {
+                  setIdle(false);
+                  setOpenPopover((current) => (current === 'notes' ? null : 'notes'));
+                }}
                 className="inline-flex items-center gap-1.5 rounded-full border border-white/14 bg-black/24 px-2.5 py-1.5 text-[11px] text-white/88 backdrop-blur-md transition-opacity hover:opacity-100"
               >
                 <span aria-hidden className="text-white/82">{ANCHOR_ICON.notes}</span>
@@ -396,7 +433,10 @@ export const SpaceToolsDockWidget = ({
               />
               <button
                 type="button"
-                onClick={() => setOpenPopover((current) => (current === 'sound' ? null : 'sound'))}
+                onClick={() => {
+                  setIdle(false);
+                  setOpenPopover((current) => (current === 'sound' ? null : 'sound'));
+                }}
                 className="inline-flex items-center gap-1.5 rounded-full border border-white/14 bg-black/24 px-2.5 py-1.5 text-[11px] text-white/88 backdrop-blur-md transition-opacity hover:opacity-100"
               >
                 <span aria-hidden className="text-white/82">{ANCHOR_ICON.sound}</span>
@@ -431,7 +471,7 @@ export const SpaceToolsDockWidget = ({
       ) : null}
 
       <SpaceSideSheet
-        open={utilityPanel !== null}
+        open={isFocusMode && utilityPanel !== null}
         title={utilityPanel ? UTILITY_PANEL_TITLE[utilityPanel] : ''}
         subtitle={utilityPanel === 'control-center' ? '배경 · 타이머 · 사운드를 그 자리에서 바꿔요.' : undefined}
         headerAction={
@@ -449,6 +489,7 @@ export const SpaceToolsDockWidget = ({
             rooms={rooms}
             selectedRoomId={selectedRoomId}
             selectedTimerLabel={selectedTimerLabel}
+            selectedSoundPresetId={selectedPresetId}
             sceneRecommendedSoundLabel={sceneRecommendedSoundLabel}
             sceneRecommendedTimerLabel={sceneRecommendedTimerLabel}
             timerPresets={timerPresets}
@@ -460,6 +501,7 @@ export const SpaceToolsDockWidget = ({
             onSelectTimer={(label) => {
               onTimerSelect(label);
             }}
+            onSelectSound={onQuickSoundSelect}
             onLockedClick={handleLockedClick}
             onResetToRecommended={onResetToSceneRecommended}
           />
@@ -484,8 +526,8 @@ export const SpaceToolsDockWidget = ({
         {utilityPanel === 'manage-plan' ? (
           <ManagePlanSheetContent
             onClose={() => setUtilityPanel(null)}
-            onManage={() => pushToast({ title: '구독 관리(더미)' })}
+            onManage={() => onStatusMessage({ message: '구독 관리(더미)' })}
-            onRestore={() => pushToast({ title: '구매 복원(더미)' })}
+            onRestore={() => onStatusMessage({ message: '구매 복원(더미)' })}
           />
         ) : null}
       </SpaceSideSheet>

src/widgets/space-workspace/ui/SpaceWorkspaceWidget.tsx

@@ -149,6 +149,7 @@ export const SpaceWorkspaceWidget = () => {
     removeThought,
     clearThoughts,
     restoreThought,
+    restoreThoughts,
     setThoughtCompleted,
   } = useThoughtInbox();
 
@@ -409,6 +410,7 @@ export const SpaceWorkspaceWidget = () => {
         onDeleteThought={removeThought}
         onSetThoughtCompleted={setThoughtCompleted}
         onRestoreThought={restoreThought}
+        onRestoreThoughts={restoreThoughts}
         onClearInbox={clearThoughts}
         onStatusMessage={pushStatusLine}
         onExitRequested={handleExitRequested}