diff --git a/src/widgets/control-center-sheet/ui/ControlCenterSheetWidget.tsx b/src/widgets/control-center-sheet/ui/ControlCenterSheetWidget.tsx index 4e5c958..814f13c 100644 --- a/src/widgets/control-center-sheet/ui/ControlCenterSheetWidget.tsx +++ b/src/widgets/control-center-sheet/ui/ControlCenterSheetWidget.tsx @@ -10,6 +10,7 @@ import { getRoomCardBackgroundStyle, type RoomTheme } from '@/entities/room'; import type { TimerPreset } from '@/entities/session'; import { cn } from '@/shared/lib/cn'; import { useReducedMotion } from '@/shared/lib/useReducedMotion'; +import { Toggle } from '@/shared/ui'; interface ControlCenterSheetWidgetProps { plan: PlanTier; @@ -19,6 +20,8 @@ interface ControlCenterSheetWidgetProps { sceneRecommendedSoundLabel: string; sceneRecommendedTimerLabel: string; timerPresets: TimerPreset[]; + autoHideControls: boolean; + onAutoHideControlsChange: (next: boolean) => void; onSelectRoom: (roomId: string) => void; onSelectTimer: (timerLabel: string) => void; onLockedClick: (source: string) => void; @@ -50,6 +53,8 @@ export const ControlCenterSheetWidget = ({ sceneRecommendedSoundLabel, sceneRecommendedTimerLabel, timerPresets, + autoHideControls, + onAutoHideControlsChange, onSelectRoom, onSelectTimer, onLockedClick, @@ -163,6 +168,21 @@ export const ControlCenterSheetWidget = ({ 추천으로 되돌리기 + +
+
+
+

컨트롤 자동 숨김

+

입력이 없으면 잠시 후 패널을 닫아요.

+
+ +
+
); }; diff --git a/src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx b/src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx index f69e191..f835f52 100644 --- a/src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx +++ b/src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx @@ -76,6 +76,7 @@ export const SpaceToolsDockWidget = ({ const { pushToast } = useToast(); const [openPopover, setOpenPopover] = useState(null); const [utilityPanel, setUtilityPanel] = useState(null); + const [autoHideControls, setAutoHideControls] = useState(true); const [noteDraft, setNoteDraft] = useState(''); const [volumeFeedback, setVolumeFeedback] = useState(null); const [plan, setPlan] = useState('normal'); @@ -158,6 +159,43 @@ export const SpaceToolsDockWidget = ({ }; }, [isFocusMode, openPopover, utilityPanel]); + useEffect(() => { + if (utilityPanel !== 'control-center' || !autoHideControls) { + return; + } + + let timerId: number | null = null; + const closeDelayMs = 8000; + + const armCloseTimer = () => { + if (timerId) { + window.clearTimeout(timerId); + } + + timerId = window.setTimeout(() => { + setUtilityPanel((current) => (current === 'control-center' ? null : current)); + }, closeDelayMs); + }; + + const resetTimer = () => { + armCloseTimer(); + }; + + armCloseTimer(); + window.addEventListener('pointermove', resetTimer); + window.addEventListener('pointerdown', resetTimer); + window.addEventListener('keydown', resetTimer); + + return () => { + if (timerId) { + window.clearTimeout(timerId); + } + window.removeEventListener('pointermove', resetTimer); + window.removeEventListener('pointerdown', resetTimer); + window.removeEventListener('keydown', resetTimer); + }; + }, [autoHideControls, utilityPanel]); + const openUtilityPanel = (panel: SpaceUtilityPanelId) => { setOpenPopover(null); setUtilityPanel(panel); @@ -414,6 +452,8 @@ export const SpaceToolsDockWidget = ({ sceneRecommendedSoundLabel={sceneRecommendedSoundLabel} sceneRecommendedTimerLabel={sceneRecommendedTimerLabel} timerPresets={timerPresets} + autoHideControls={autoHideControls} + onAutoHideControlsChange={setAutoHideControls} onSelectRoom={(roomId) => { onRoomSelect(roomId); }}