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