fix(space-ui): /space 포커스 앵커 잘림과 스크롤 문제 수정

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 = () => {
         </div>
       </section>
 
+      <section className="rounded-2xl border border-white/14 bg-white/7 px-3.5 py-3">
+        <p className="text-sm font-medium text-white">공간</p>
+        <p className="mt-1 text-xs text-white/58">몰입 중에도 공간을 바꿀 수 있어요.</p>
+        <div className="mt-2 flex flex-wrap gap-2">
+          {rooms.slice(0, 4).map((room) => {
+            const selected = room.id === selectedRoomId;
+
+            return (
+              <button
+                key={room.id}
+                type="button"
+                onClick={() => onSelectRoom(room.id)}
+                className={cn(
+                  'rounded-full border px-3 py-1.5 text-xs transition-colors',
+                  selected
+                    ? 'border-sky-200/44 bg-sky-200/20 text-sky-100'
+                    : 'border-white/18 bg-white/8 text-white/80 hover:bg-white/14',
+                )}
+              >
+                {room.name}
+              </button>
+            );
+          })}
+        </div>
+      </section>
+
+      <section className="rounded-2xl border border-white/14 bg-white/7 px-3.5 py-3">
+        <p className="text-sm font-medium text-white">타이머 프리셋</p>
+        <p className="mt-1 text-xs text-white/58">기본 프리셋만 빠르게 고를 수 있어요.</p>
+        <div className="mt-2 flex flex-wrap gap-2">
+          {timerPresets.slice(0, 3).map((preset) => {
+            const selected = preset.label === selectedTimerLabel;
+
+            return (
+              <button
+                key={preset.id}
+                type="button"
+                onClick={() => onSelectTimer(preset.label)}
+                className={cn(
+                  'rounded-full border px-3 py-1.5 text-xs transition-colors',
+                  selected
+                    ? 'border-sky-200/44 bg-sky-200/20 text-sky-100'
+                    : 'border-white/18 bg-white/8 text-white/80 hover:bg-white/14',
+                )}
+              >
+                {preset.label}
+              </button>
+            );
+          })}
+        </div>
+      </section>
+
       <section className="rounded-2xl border border-white/14 bg-white/7 px-3.5 py-3">
         <p className="text-sm font-medium text-white">기본 프리셋</p>
         <div className="mt-2 flex flex-wrap gap-2">