-
- {TOOL_ITEMS.map((item) => {
- const selected = activePanel === item.id;
+ {openPopover ? (
+
+
+
+ {isFocusMode ? (
+ <>
+
+
+
+
+
+ {openPopover === 'notes' ? (
+
+
떠오른 생각을 잠깐 주차해요
+
+ setNoteDraft(event.target.value)}
+ placeholder="한 줄 메모"
+ className="h-8 min-w-0 flex-1 rounded-lg border border-white/14 bg-white/[0.04] px-2.5 text-xs text-white placeholder:text-white/38 focus:border-sky-200/42 focus:outline-none"
+ />
+
+
+
+ {thoughts.slice(0, 3).map((thought) => (
+ -
+ {thought.text}
+
+ ))}
+ {thoughts.length === 0 ? (
+ -
+ 아직 메모가 없어요.
+
+ ) : null}
+
+
+
+
+
+
+
+ ) : null}
+
+
+
+
+
+
+
+
+ {openPopover === 'sound' ? (
+
+
사운드 프리셋
+
+ {SOUND_PRESETS.slice(0, 6).map((preset) => {
+ const selected = preset.id === selectedPresetId;
+
+ return (
+
+ );
+ })}
+
+
+
+
+
+ ) : null}
+
+
+
+ ) : null}
+
setActivePanel(null)}
+ open={utilityPanel !== null}
+ title={utilityPanel ? UTILITY_PANEL_TITLE[utilityPanel] : ''}
+ onClose={() => setUtilityPanel(null)}
>
- {activePanel === 'sound' ? (
-
- ) : null}
-
- {activePanel === 'notes' ? (
- {
- onCaptureThought(note);
- pushToast({ title: '인박스에 주차했어요 (더미)' });
- }}
- />
- ) : null}
-
- {activePanel === 'inbox' ? (
+ {utilityPanel === 'inbox' ? (
{
@@ -205,8 +373,23 @@ export const SpaceToolsDockWidget = ({
/>
) : null}
- {activePanel === 'stats' ? : null}
- {activePanel === 'settings' ? : null}
+ {utilityPanel === 'stats' ? : null}
+ {utilityPanel === 'settings' ? (
+ {
+ onRoomSelect(roomId);
+ pushToast({ title: '공간을 바꿨어요.' });
+ }}
+ onSelectTimer={(label) => {
+ onTimerSelect(label);
+ pushToast({ title: `타이머를 ${label}로 바꿨어요.` });
+ }}
+ />
+ ) : null}
);
diff --git a/src/widgets/space-tools-dock/ui/panels/SettingsToolPanel.tsx b/src/widgets/space-tools-dock/ui/panels/SettingsToolPanel.tsx
index 58767b5..d1ec011 100644
--- a/src/widgets/space-tools-dock/ui/panels/SettingsToolPanel.tsx
+++ b/src/widgets/space-tools-dock/ui/panels/SettingsToolPanel.tsx
@@ -1,10 +1,28 @@
'use client';
import { useState } from 'react';
+import type { RoomTheme } from '@/entities/room';
+import type { TimerPreset } from '@/entities/session';
import { DEFAULT_PRESET_OPTIONS } from '@/shared/config/settingsOptions';
import { cn } from '@/shared/lib/cn';
-export const SettingsToolPanel = () => {
+interface SettingsToolPanelProps {
+ rooms: RoomTheme[];
+ selectedRoomId: string;
+ selectedTimerLabel: string;
+ timerPresets: TimerPreset[];
+ onSelectRoom: (roomId: string) => void;
+ onSelectTimer: (timerLabel: string) => void;
+}
+
+export const SettingsToolPanel = ({
+ rooms,
+ selectedRoomId,
+ selectedTimerLabel,
+ timerPresets,
+ onSelectRoom,
+ onSelectTimer,
+}: SettingsToolPanelProps) => {
const [reduceMotion, setReduceMotion] = useState(false);
const [defaultPresetId, setDefaultPresetId] = useState<
(typeof DEFAULT_PRESET_OPTIONS)[number]['id']
@@ -40,6 +58,58 @@ export const SettingsToolPanel = () => {