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

2026-03-05 16:24:53 +09:00
parent b1bafd5e9a
commit f3f0518588
5 changed files with 109 additions and 43 deletions
--- a/src/widgets/control-center-sheet/ui/ControlCenterSheetWidget.tsx
+++ b/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
--- a/src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx
+++ b/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: '구독 관리(더미)' })}
-            onRestore={() => pushToast({ title: '구매 복원(더미)' })}
+            onManage={() => onStatusMessage({ message: '구독 관리(더미)' })}
+            onRestore={() => onStatusMessage({ message: '구매 복원(더미)' })}
          />
        ) : null}
      </SpaceSideSheet>
--- a/src/widgets/space-workspace/ui/SpaceWorkspaceWidget.tsx
+++ b/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}