From ef9cc63cc5dce80c8210e3205023a1e187289161 Mon Sep 17 00:00:00 2001
From: corpi <lj845854@gmail.com>
Date: Tue, 3 Mar 2026 14:27:14 +0900
Subject: [PATCH] =?UTF-8?q?style(space):=20=EB=A6=AC=EC=B6=94=EC=96=BC=20?=
 =?UTF-8?q?=EC=A7=84=EC=9E=85=20UX=EC=99=80=20=ED=8F=AC=EC=BB=A4=EC=8A=A4?=
 =?UTF-8?q?=20=EC=A0=84=ED=99=98=20=ED=9D=90=EB=A6=84=EC=9D=84=20=EA=B3=A0?=
 =?UTF-8?q?=EA=B8=89=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

맥락:
- /space 진입 경험이 설정 패널처럼 보여 몰입형 라운지 톤이 약했습니다.
- 목표 입력 후 시작 전환 동선을 더 빠르고 일관되게 만들 필요가 있었습니다.

변경사항:
- 도크 아이콘을 이모지에서 단일 라인 SVG 세트로 통일해 시각 언어 일관성을 맞췄습니다.
- Setup Drawer 밀도를 낮추고(타이포/테두리/칩 크기) 3-step 리추얼 흐름을 더 간결하게 정리했습니다.
- 목표 입력 필드 자동 포커스를 추가해 진입 즉시 타이핑이 가능하도록 했습니다.
- 시작 버튼을 form submit으로 연결해 Enter 입력과 버튼 클릭이 동일하게 동작하도록 변경했습니다.
- SpaceSideSheet에 300ms 닫힘 전환(오버레이/시트 opacity+translate) 애니메이션을 적용했습니다.
- Focus 진입 토스트 카피를 목표 중심 문구로 바꾸고 Setup 선택지를 최소 개수로 제한했습니다.
- 배경에 미세 stage-pan/light-drift 키프레임을 추가해 정적인 평면감을 줄였습니다.

검증:
- npx tsc --noEmit
- npm run build

세션-상태: /space에서 목표 입력 후 10초 내 Focus 전환 가능한 리추얼 흐름이 정리되었습니다.
세션-다음: 실제 브라우저에서 애니메이션 강도와 드로어 밀도 체감 QA를 진행합니다.
세션-리스크: 저사양 환경에서 배경 미세 모션이 과하게 느껴질 수 있어 추후 reduce-motion 강화를 검토할 수 있습니다.
---
 src/app/globals.css                           | 20 +++++
 .../session-goal/ui/SessionGoalField.tsx      | 50 ++++++------
 .../ui/SpaceSetupDrawerWidget.tsx             | 54 +++++++------
 .../space-sheet-shell/ui/SpaceSideSheet.tsx   | 76 +++++++++++++++---
 .../ui/SpaceToolsDockWidget.tsx               | 78 +++++++++++++++----
 .../ui/SpaceWorkspaceWidget.tsx               | 31 +++++---
 6 files changed, 226 insertions(+), 83 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 7e4990c..bcd9eee 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -49,3 +49,23 @@ body {
     transform: scaleX(1);
   }
 }
+
+@keyframes space-stage-pan {
+  0% {
+    transform: scale(1.02) translate3d(-0.4%, -0.25%, 0);
+  }
+  100% {
+    transform: scale(1.07) translate3d(0.55%, 0.35%, 0);
+  }
+}
+
+@keyframes space-light-drift {
+  0% {
+    transform: translate3d(-1.2%, -0.8%, 0);
+    opacity: 0.86;
+  }
+  100% {
+    transform: translate3d(1.2%, 0.9%, 0);
+    opacity: 1;
+  }
+}
diff --git a/src/features/session-goal/ui/SessionGoalField.tsx b/src/features/session-goal/ui/SessionGoalField.tsx
index 5627dfd..7ce85cb 100644
--- a/src/features/session-goal/ui/SessionGoalField.tsx
+++ b/src/features/session-goal/ui/SessionGoalField.tsx
@@ -1,10 +1,11 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import type { GoalChip } from '@/entities/session';
 import { cn } from '@/shared/lib/cn';
 
 interface SessionGoalFieldProps {
+  autoFocus?: boolean;
   goalInput: string;
   selectedGoalId: string | null;
   goalChips: GoalChip[];
@@ -13,40 +14,49 @@ interface SessionGoalFieldProps {
 }
 
 export const SessionGoalField = ({
+  autoFocus = false,
   goalInput,
   selectedGoalId,
   goalChips,
   onGoalChange,
   onGoalChipSelect,
 }: SessionGoalFieldProps) => {
-  const [expanded, setExpanded] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
 
-  const visibleChips = useMemo(() => {
-    if (expanded) {
-      return goalChips;
+  useEffect(() => {
+    if (!autoFocus) {
+      return;
     }
 
-    return goalChips.slice(0, 4);
-  }, [expanded, goalChips]);
+    const raf = window.requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
+
+    return () => {
+      window.cancelAnimationFrame(raf);
+    };
+  }, [autoFocus]);
 
   return (
-    <div className="space-y-2.5">
-      <div className="space-y-1.5">
-        <label htmlFor="space-goal-input" className="text-xs font-medium text-white/86">
+    <div className="space-y-2">
+      <div className="space-y-1">
+        <label htmlFor="space-goal-input" className="text-[12px] font-medium text-white/88">
           이번 25분, 딱 한 가지 <span className="text-sky-100">(필수)</span>
         </label>
         <input
+          ref={inputRef}
           id="space-goal-input"
+          autoFocus={autoFocus}
           value={goalInput}
           onChange={(event) => onGoalChange(event.target.value)}
           placeholder="예: 계약서 1페이지 정리"
-          className="h-11 w-full rounded-xl border border-white/18 bg-slate-950/48 px-3 text-sm text-white placeholder:text-white/42 focus:border-sky-200/58 focus:outline-none"
+          className="h-10 w-full rounded-xl border border-white/14 bg-slate-950/42 px-3 text-sm text-white placeholder:text-white/42 focus:border-sky-200/46 focus:outline-none"
         />
         <p className="text-[11px] text-white/54">크게 말고, 바로 다음 한 조각.</p>
       </div>
 
       <div className="flex flex-wrap gap-1.5">
-        {visibleChips.map((chip) => {
+        {goalChips.slice(0, 4).map((chip) => {
           const selected = chip.id === selectedGoalId;
 
           return (
@@ -55,26 +65,16 @@ export const SessionGoalField = ({
               type="button"
               onClick={() => onGoalChipSelect(chip)}
               className={cn(
-                'rounded-full border px-2.5 py-1 text-[11px] transition-colors',
+                'rounded-full border px-2.5 py-0.5 text-[10px] transition-colors',
                 selected
-                  ? 'border-sky-200/42 bg-sky-200/16 text-white/92'
-                  : 'border-white/16 bg-white/6 text-white/72 hover:bg-white/11',
+                  ? 'border-sky-200/34 bg-sky-200/12 text-white/90'
+                  : 'border-white/12 bg-white/[0.035] text-white/66 hover:bg-white/9',
               )}
             >
               {chip.label}
             </button>
           );
         })}
-
-        {goalChips.length > 4 ? (
-          <button
-            type="button"
-            onClick={() => setExpanded((current) => !current)}
-            className="rounded-full border border-white/14 bg-white/4 px-2.5 py-1 text-[11px] text-white/62 transition-colors hover:bg-white/10 hover:text-white/82"
-          >
-            {expanded ? '접기' : '+ 더보기'}
-          </button>
-        ) : null}
       </div>
     </div>
   );
diff --git a/src/widgets/space-setup-drawer/ui/SpaceSetupDrawerWidget.tsx b/src/widgets/space-setup-drawer/ui/SpaceSetupDrawerWidget.tsx
index 7f6728e..c21e074 100644
--- a/src/widgets/space-setup-drawer/ui/SpaceSetupDrawerWidget.tsx
+++ b/src/widgets/space-setup-drawer/ui/SpaceSetupDrawerWidget.tsx
@@ -1,3 +1,6 @@
+'use client';
+
+import type { FormEvent } from 'react';
 import type { RoomTheme } from '@/entities/room';
 import type { GoalChip, SoundPreset } from '@/entities/session';
 import { SpaceSelectCarousel } from '@/features/space-select';
@@ -43,6 +46,16 @@ export const SpaceSetupDrawerWidget = ({
   onSoundSelect,
   onStart,
 }: SpaceSetupDrawerWidgetProps) => {
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!canStart) {
+      return;
+    }
+
+    onStart();
+  };
+
   return (
     <SpaceSideSheet
       open={open}
@@ -52,17 +65,17 @@ export const SpaceSetupDrawerWidget = ({
       dismissible={dismissible}
       widthClassName="w-[min(360px,94vw)]"
       footer={(
-        <div className="space-y-2">
+        <div className="space-y-1.5">
           {!canStart ? (
-            <p className="text-[11px] text-white/58">목표를 적으면 시작할 수 있어요.</p>
+            <p className="text-[10px] text-white/56">목표를 적으면 시작할 수 있어요.</p>
           ) : null}
           <Button
-            type="button"
+            type="submit"
+            form="space-setup-ritual-form"
             size="full"
-            onClick={onStart}
             disabled={!canStart}
             className={cn(
-              'h-11 rounded-xl !bg-sky-300/85 !text-slate-900 shadow-[0_8px_20px_rgba(125,211,252,0.24)] hover:!bg-sky-300 disabled:!bg-white/12 disabled:!text-white/42',
+              'h-10 rounded-xl !bg-sky-300/84 !text-slate-900 shadow-[0_6px_14px_rgba(125,211,252,0.2)] hover:!bg-sky-300 disabled:!bg-white/10 disabled:!text-white/42',
             )}
           >
             시작하기
@@ -70,11 +83,9 @@ export const SpaceSetupDrawerWidget = ({
         </div>
       )}
     >
-      <div className="space-y-5">
-        <section className="space-y-2.5">
-          <div className="space-y-0.5">
-            <p className="text-sm font-medium text-white/84">공간</p>
-          </div>
+      <form id="space-setup-ritual-form" className="space-y-4" onSubmit={handleSubmit}>
+        <section className="space-y-2">
+          <p className="text-[12px] font-medium text-white/84">공간</p>
           <SpaceSelectCarousel
             rooms={rooms}
             selectedRoomId={selectedRoomId}
@@ -82,11 +93,10 @@ export const SpaceSetupDrawerWidget = ({
           />
         </section>
 
-        <section className="space-y-2.5">
-          <div className="space-y-0.5">
-            <p className="text-sm font-medium text-white/84">이번 세션 한 줄(필수)</p>
-          </div>
+        <section className="space-y-2 border-t border-white/8 pt-3">
+          <p className="text-[12px] font-medium text-white/84">이번 세션 한 줄(필수)</p>
           <SessionGoalField
+            autoFocus={open}
             goalInput={goalInput}
             selectedGoalId={selectedGoalId}
             goalChips={goalChips}
@@ -95,13 +105,11 @@ export const SpaceSetupDrawerWidget = ({
           />
         </section>
 
-        <section className="space-y-2.5">
-          <div className="space-y-0.5">
-            <p className="text-sm font-medium text-white/84">분위기(선택)</p>
-          </div>
+        <section className="space-y-2 border-t border-white/8 pt-3">
+          <p className="text-[12px] font-medium text-white/84">분위기(선택)</p>
 
           <div className="flex flex-wrap gap-1.5">
-            {soundPresets.map((preset) => {
+            {soundPresets.slice(0, 6).map((preset) => {
               const selected = preset.id === selectedSoundPresetId;
 
               return (
@@ -110,10 +118,10 @@ export const SpaceSetupDrawerWidget = ({
                   type="button"
                   onClick={() => onSoundSelect(preset.id)}
                   className={cn(
-                    'rounded-full border px-2.5 py-1 text-[11px] transition-colors',
+                    'rounded-full border px-2.5 py-0.5 text-[10px] transition-colors',
                     selected
-                      ? 'border-sky-200/36 bg-sky-200/14 text-white/92'
-                      : 'border-white/16 bg-white/6 text-white/72 hover:bg-white/11',
+                      ? 'border-sky-200/30 bg-sky-200/12 text-white/90'
+                      : 'border-white/12 bg-white/[0.03] text-white/66 hover:bg-white/8',
                   )}
                 >
                   {preset.label}
@@ -122,7 +130,7 @@ export const SpaceSetupDrawerWidget = ({
             })}
           </div>
         </section>
-      </div>
+      </form>
     </SpaceSideSheet>
   );
 };
diff --git a/src/widgets/space-sheet-shell/ui/SpaceSideSheet.tsx b/src/widgets/space-sheet-shell/ui/SpaceSideSheet.tsx
index 70226d9..7c7977a 100644
--- a/src/widgets/space-sheet-shell/ui/SpaceSideSheet.tsx
+++ b/src/widgets/space-sheet-shell/ui/SpaceSideSheet.tsx
@@ -1,8 +1,10 @@
 'use client';
 
-import { useEffect, type ReactNode } from 'react';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
 import { cn } from '@/shared/lib/cn';
 
+const SHEET_TRANSITION_MS = 300;
+
 interface SpaceSideSheetProps {
   open: boolean;
   title: string;
@@ -24,6 +26,41 @@ export const SpaceSideSheet = ({
   widthClassName,
   dismissible = true,
 }: SpaceSideSheetProps) => {
+  const closeTimerRef = useRef<number | null>(null);
+  const [shouldRender, setShouldRender] = useState(open);
+  const [visible, setVisible] = useState(open);
+
+  useEffect(() => {
+    if (closeTimerRef.current) {
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+
+    if (open) {
+      setShouldRender(true);
+      const raf = window.requestAnimationFrame(() => {
+        setVisible(true);
+      });
+
+      return () => {
+        window.cancelAnimationFrame(raf);
+      };
+    }
+
+    setVisible(false);
+    closeTimerRef.current = window.setTimeout(() => {
+      setShouldRender(false);
+      closeTimerRef.current = null;
+    }, SHEET_TRANSITION_MS);
+
+    return () => {
+      if (closeTimerRef.current) {
+        window.clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+    };
+  }, [open]);
+
   useEffect(() => {
     if (!open) {
       return;
@@ -42,7 +79,7 @@ export const SpaceSideSheet = ({
     };
   }, [open, onClose]);
 
-  if (!open) {
+  if (!shouldRender) {
     return null;
   }
 
@@ -53,39 +90,54 @@ export const SpaceSideSheet = ({
           type="button"
           aria-label="시트 닫기"
           onClick={onClose}
-          className="fixed inset-0 z-40 bg-slate-950/18 backdrop-blur-[1px]"
+          className={cn(
+            'fixed inset-0 z-40 bg-slate-950/14 backdrop-blur-[1px] transition-opacity duration-300',
+            visible ? 'opacity-100' : 'pointer-events-none opacity-0',
+          )}
         />
       ) : (
-        <div aria-hidden className="fixed inset-0 z-40 bg-slate-950/12 backdrop-blur-[1px]" />
+        <div
+          aria-hidden
+          className={cn(
+            'fixed inset-0 z-40 bg-slate-950/8 backdrop-blur-[1px] transition-opacity duration-300',
+            visible ? 'opacity-100' : 'opacity-0',
+          )}
+        />
       )}
 
       <aside
         className={cn(
-          'fixed inset-y-0 right-0 z-50 p-2 sm:p-3',
+          'fixed inset-y-0 right-0 z-50 p-2 transition-opacity duration-300 sm:p-3',
+          visible ? 'opacity-100' : 'pointer-events-none opacity-0',
           widthClassName ?? 'w-[min(360px,92vw)]',
         )}
       >
-        <div className="flex h-full flex-col overflow-hidden rounded-3xl border border-white/20 bg-slate-950/58 text-white shadow-[0_20px_60px_rgba(2,6,23,0.42)] backdrop-blur-2xl">
-          <header className="flex items-start justify-between gap-3 border-b border-white/10 px-4 py-3 sm:px-5">
+        <div
+          className={cn(
+            'flex h-full flex-col overflow-hidden rounded-3xl border border-white/14 bg-[linear-gradient(180deg,rgba(15,23,42,0.74)_0%,rgba(10,15,30,0.62)_100%)] text-white shadow-[0_18px_52px_rgba(2,6,23,0.34)] backdrop-blur-2xl transition-transform duration-300',
+            visible ? 'translate-x-0' : 'translate-x-8',
+          )}
+        >
+          <header className="flex items-start justify-between gap-3 border-b border-white/7 px-4 py-3 sm:px-5">
             <div>
-              <h2 className="text-base font-semibold text-white">{title}</h2>
-              {subtitle ? <p className="mt-1 text-xs text-white/58">{subtitle}</p> : null}
+              <h2 className="text-[1.05rem] font-semibold tracking-tight text-white">{title}</h2>
+              {subtitle ? <p className="mt-1 text-[11px] text-white/56">{subtitle}</p> : null}
             </div>
             {dismissible ? (
               <button
                 type="button"
                 onClick={onClose}
                 aria-label="닫기"
-                className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/18 bg-white/8 text-sm text-white/80 transition-colors hover:bg-white/14 hover:text-white"
+                className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-white/14 bg-white/6 text-[12px] text-white/72 transition-colors hover:bg-white/12 hover:text-white"
               >
                 ✕
               </button>
             ) : null}
           </header>
 
-          <div className="min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-5">{children}</div>
+          <div className="min-h-0 flex-1 overflow-y-auto px-4 py-3.5 sm:px-5">{children}</div>
 
-          {footer ? <footer className="border-t border-white/10 bg-white/4 px-4 py-3 sm:px-5">{footer}</footer> : null}
+          {footer ? <footer className="border-t border-white/8 bg-white/[0.02] px-4 py-3 sm:px-5">{footer}</footer> : null}
         </div>
       </aside>
     </>
diff --git a/src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx b/src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx
index 3d59336..7412521 100644
--- a/src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx
+++ b/src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx
@@ -34,14 +34,13 @@ interface SpaceToolsDockWidgetProps {
 
 const TOOL_ITEMS: Array<{
   id: SpaceToolPanelId;
-  icon: string;
   label: string;
 }> = [
-  { id: 'sound', icon: '🎧', label: 'Sound' },
-  { id: 'notes', icon: '📝', label: 'Notes' },
-  { id: 'inbox', icon: '📨', label: 'Inbox' },
-  { id: 'stats', icon: '📊', label: 'Stats' },
-  { id: 'settings', icon: '⚙', label: 'Settings' },
+  { id: 'sound', label: 'Sound' },
+  { id: 'notes', label: 'Notes' },
+  { id: 'inbox', label: 'Inbox' },
+  { id: 'stats', label: 'Stats' },
+  { id: 'settings', label: 'Settings' },
 ];
 
 const PANEL_TITLE_MAP: Record<SpaceToolPanelId, string> = {
@@ -52,6 +51,59 @@ const PANEL_TITLE_MAP: Record<SpaceToolPanelId, string> = {
   settings: '설정',
 };
 
+const DockIcon = ({ id }: { id: SpaceToolPanelId }) => {
+  const commonProps = {
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    className: 'h-4 w-4',
+    stroke: 'currentColor',
+    strokeWidth: 1.8,
+    strokeLinecap: 'round' as const,
+    strokeLinejoin: 'round' as const,
+  };
+
+  switch (id) {
+    case 'sound':
+      return (
+        <svg {...commonProps}>
+          <path d="M4 13V11a2 2 0 0 1 2-2h2l3-3h2v12h-2l-3-3H6a2 2 0 0 1-2-2Z" />
+          <path d="M16 9a4 4 0 0 1 0 6" />
+          <path d="M18 7a7 7 0 0 1 0 10" />
+        </svg>
+      );
+    case 'notes':
+      return (
+        <svg {...commonProps}>
+          <rect x="5" y="4" width="14" height="16" rx="2.5" />
+          <path d="M9 9h6M9 13h6M9 17h4" />
+        </svg>
+      );
+    case 'inbox':
+      return (
+        <svg {...commonProps}>
+          <path d="M4 7.5A2.5 2.5 0 0 1 6.5 5h11A2.5 2.5 0 0 1 20 7.5v9A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5v-9Z" />
+          <path d="M4 12h4l1.5 2h5L16 12h4" />
+        </svg>
+      );
+    case 'stats':
+      return (
+        <svg {...commonProps}>
+          <path d="M5 18V10M12 18V7M19 18v-5" />
+          <path d="M4 18h16" />
+        </svg>
+      );
+    case 'settings':
+      return (
+        <svg {...commonProps}>
+          <path d="M12 8.5A3.5 3.5 0 1 1 8.5 12 3.5 3.5 0 0 1 12 8.5Z" />
+          <path d="M12 3.5v2M12 18.5v2M20.5 12h-2M5.5 12h-2M18 6l-1.4 1.4M7.4 16.6 6 18M18 18l-1.4-1.4M7.4 7.4 6 6" />
+        </svg>
+      );
+    default:
+      return null;
+  }
+};
+
 export const SpaceToolsDockWidget = ({
   isFocusMode,
   thoughts,
@@ -78,10 +130,10 @@ export const SpaceToolsDockWidget = ({
       <div className="fixed right-3.5 top-1/2 z-30 -translate-y-1/2">
         <div
           className={cn(
-            'flex w-11 flex-col items-center gap-1.5 rounded-[18px] border py-1.5 backdrop-blur-lg transition-opacity',
+            'flex w-10 flex-col items-center gap-1.5 rounded-[18px] border py-1.5 backdrop-blur-lg transition-opacity',
             isFocusMode && activePanel === null
-              ? 'border-white/12 bg-slate-950/22 opacity-40 hover:opacity-92'
-              : 'border-white/16 bg-slate-950/34 opacity-92',
+              ? 'border-white/12 bg-slate-950/18 opacity-32 hover:opacity-86'
+              : 'border-white/14 bg-slate-950/28 opacity-86',
           )}
         >
           {TOOL_ITEMS.map((item) => {
@@ -95,13 +147,13 @@ export const SpaceToolsDockWidget = ({
                 aria-label={item.label}
                 onClick={() => setActivePanel(item.id)}
                 className={cn(
-                  'relative inline-flex h-8 w-8 items-center justify-center rounded-[10px] border text-[15px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75',
+                  'relative inline-flex h-8 w-8 items-center justify-center rounded-[10px] border text-white/80 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70',
                   selected
-                    ? 'border-sky-200/58 bg-sky-200/18 shadow-[0_0_0_1px_rgba(186,230,253,0.28)]'
-                    : 'border-white/14 bg-white/7 hover:bg-white/13',
+                    ? 'border-sky-200/44 bg-sky-200/14 text-white shadow-[0_0_0_1px_rgba(186,230,253,0.2)]'
+                    : 'border-white/12 bg-white/6 hover:bg-white/10',
                 )}
               >
-                <span aria-hidden>{item.icon}</span>
+                <DockIcon id={item.id} />
                 {item.id === 'inbox' && thoughtCount > 0 ? (
                   <span className="absolute -right-1 -top-1 inline-flex min-w-[0.95rem] items-center justify-center rounded-full bg-sky-200/26 px-1 py-0.5 text-[8px] font-semibold text-sky-50">
                     {thoughtCount > 99 ? '99+' : `${thoughtCount}`}
diff --git a/src/widgets/space-workspace/ui/SpaceWorkspaceWidget.tsx b/src/widgets/space-workspace/ui/SpaceWorkspaceWidget.tsx
index 5030c40..843fa99 100644
--- a/src/widgets/space-workspace/ui/SpaceWorkspaceWidget.tsx
+++ b/src/widgets/space-workspace/ui/SpaceWorkspaceWidget.tsx
@@ -69,6 +69,10 @@ export const SpaceWorkspaceWidget = () => {
   const selectedRoom = useMemo(() => {
     return getRoomById(selectedRoomId) ?? ROOM_THEMES[0];
   }, [selectedRoomId]);
+  const setupRooms = useMemo(() => {
+    const restRooms = ROOM_THEMES.filter((room) => room.id !== selectedRoom.id);
+    return [selectedRoom, ...restRooms].slice(0, 4);
+  }, [selectedRoom]);
 
   const canStart = goalInput.trim().length > 0;
   const isFocusMode = workspaceMode === 'focus';
@@ -95,8 +99,7 @@ export const SpaceWorkspaceWidget = () => {
     setSetupDrawerOpen(false);
 
     pushToast({
-      title: '집중을 시작했어요 (더미)',
-      description: `${selectedRoom.name} · ${goalInput.trim()}`,
+      title: `목표: ${goalInput.trim()} 시작해요.`,
     });
   };
 
@@ -106,18 +109,26 @@ export const SpaceWorkspaceWidget = () => {
 
   return (
     <div className="relative min-h-screen overflow-hidden text-white">
-      <div aria-hidden className="absolute inset-0" style={getRoomBackgroundStyle(selectedRoom)} />
       <div
         aria-hidden
-        className="absolute inset-0"
-        style={{
-          background:
-            'linear-gradient(180deg, rgba(15,23,42,0.16) 0%, rgba(15,23,42,0.32) 100%)',
-        }}
+        className="absolute inset-0 bg-cover bg-center will-change-transform animate-[space-stage-pan_42s_ease-in-out_infinite_alternate] motion-reduce:animate-none"
+        style={getRoomBackgroundStyle(selectedRoom)}
       />
       <div
         aria-hidden
-        className="absolute inset-0 opacity-[0.08]"
+        className="absolute inset-0 opacity-[0.2] bg-[radial-gradient(68%_54%_at_18%_12%,rgba(191,219,254,0.58)_0%,rgba(191,219,254,0)_72%)] animate-[space-light-drift_24s_ease-in-out_infinite_alternate] motion-reduce:animate-none"
+      />
+      <div
+        aria-hidden
+        className="absolute inset-0 opacity-[0.14] bg-[radial-gradient(62%_48%_at_82%_14%,rgba(125,211,252,0.5)_0%,rgba(125,211,252,0)_72%)] animate-[space-light-drift_30s_ease-in-out_infinite_alternate] motion-reduce:animate-none"
+      />
+      <div
+        aria-hidden
+        className="absolute inset-0 bg-[linear-gradient(180deg,rgba(15,23,42,0.08)_0%,rgba(15,23,42,0.24)_100%)]"
+      />
+      <div
+        aria-hidden
+        className="absolute inset-0 opacity-[0.06]"
         style={{
           backgroundImage:
             'repeating-linear-gradient(0deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 2px)',
@@ -151,7 +162,7 @@ export const SpaceWorkspaceWidget = () => {
       <SpaceSetupDrawerWidget
         open={isSetupDrawerOpen}
         dismissible={isFocusMode}
-        rooms={ROOM_THEMES}
+        rooms={setupRooms}
         selectedRoomId={selectedRoom.id}
         goalInput={goalInput}
         selectedGoalId={selectedGoalId}