refactor(space): 단일 워크스페이스 Setup→Focus 전환 구조 도입

맥락: - 허브를 경유하는 흐름 대신 /space 한 화면에서 설정과 몰입을 이어서 처리할 필요가 있었습니다. - View 로직 분리와 파일 분할 기준을 지키면서 도크/시트 패턴을 통합해야 했습니다. 변경사항: - /space를 Setup(기본)과 Focus(시작 후) 2상태로 운영하는 space-workspace 위젯을 추가했습니다. - Setup Drawer를 추가해 Space 선택, Goal(필수), Sound(선택) 섹션과 하단 고정 CTA를 구성했습니다. - Goal 입력이 비어있으면 시작하기 버튼이 비활성화되도록 UI 검증을 반영했습니다. - Focus 상태에서 하단 HUD만 유지하고 우측 Tools Dock(🎧/📝/📨/📊/⚙) + 우측 시트 패턴을 적용했습니다. - Notes(쓰기)와 Inbox(읽기) 패널을 분리하고 더미 토스트 동작을 연결했습니다. - FSD 분리를 위해 features(space-select/session-goal/inbox)와 widgets(space-workspace/space-setup-drawer/space-focus-hud/space-sheet-shell)를 추가했습니다. - 기존 space-shell은 신규 워크스페이스로 연결되는 얇은 래퍼로 정리했습니다. 검증: - npx tsc --noEmit - npm run build 세션-상태: /space 단일 워크스페이스에서 Setup→Focus 전환이 동작합니다. 세션-다음: 진입 경로를 /space로 통일하고 레거시 /app 라우트를 정리합니다. 세션-리스크: useSearchParams 기반 초기값은 클라이언트 최초 렌더 기준으로만 반영됩니다.
2026-03-02 12:49:47 +09:00
parent a2bebb3485
commit 2718997735
24 changed files with 898 additions and 303 deletions
--- a/src/widgets/space-tools-dock/index.ts
+++ b/src/widgets/space-tools-dock/index.ts
@@ -1 +1,2 @@
+export * from './model/types';
 export * from './ui/SpaceToolsDockWidget';
--- a/src/widgets/space-tools-dock/model/types.ts
+++ b/src/widgets/space-tools-dock/model/types.ts
@@ -0,0 +1 @@
+export type SpaceToolPanelId = 'sound' | 'notes' | 'inbox' | 'stats' | 'settings';
--- a/src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx
+++ b/src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx
@@ -1,205 +1,161 @@
 'use client';

 import { useState } from 'react';
-import type { RoomPresence } from '@/entities/room';
-import { CHECK_IN_PHRASES, REACTION_OPTIONS } from '@/entities/session';
-import { useCheckIn } from '@/features/check-in';
-import { useSoundPresetSelection } from '@/features/sound-preset';
+import type { RecentThought } from '@/entities/session';
+import type { SoundTrackKey } from '@/features/sound-preset';
 import { useToast } from '@/shared/ui';
 import { cn } from '@/shared/lib/cn';
-import { NotesSheetWidget } from '@/widgets/notes-sheet';
-import { QuickSheetWidget } from '@/widgets/quick-sheet';
-import { RoomSheetWidget } from '@/widgets/room-sheet';
-import { SoundSheetWidget } from '@/widgets/sound-sheet';
-import { useSpaceToolsDock } from '../model/useSpaceToolsDock';
+import { SpaceSideSheet } from '@/widgets/space-sheet-shell';
+import type { SpaceToolPanelId } from '../model/types';
+import { InboxToolPanel } from './panels/InboxToolPanel';
+import { NotesToolPanel } from './panels/NotesToolPanel';
+import { SettingsToolPanel } from './panels/SettingsToolPanel';
+import { SoundToolPanel } from './panels/SoundToolPanel';
+import { StatsToolPanel } from './panels/StatsToolPanel';

 interface SpaceToolsDockWidgetProps {
-  roomName: string;
-  activeMembers: number;
-  presence: RoomPresence;
-  initialSoundPresetId?: string;
-  isImmersionMode: boolean;
-  onToggleImmersionMode: () => void;
-  onThoughtCaptured?: (note: string) => void;
+  isFocusMode: boolean;
+  thoughts: RecentThought[];
+  thoughtCount: number;
+  selectedPresetId: string;
+  onSelectPreset: (presetId: string) => void;
+  isMixerOpen: boolean;
+  onToggleMixer: () => void;
+  isMuted: boolean;
+  onMuteChange: (next: boolean) => void;
+  masterVolume: number;
+  onMasterVolumeChange: (next: number) => void;
+  trackKeys: readonly SoundTrackKey[];
+  trackLevels: Record<SoundTrackKey, number>;
+  onTrackLevelChange: (track: SoundTrackKey, level: number) => void;
+  onCaptureThought: (note: string) => void;
+  onClearInbox: () => void;
 }

-const TOOL_BUTTONS: Array<{
-  id: 'sound' | 'room' | 'notes' | 'quick';
+const TOOL_ITEMS: Array<{
+  id: SpaceToolPanelId;
  icon: string;
  label: string;
 }> = [
  { id: 'sound', icon: '🎧', label: 'Sound' },
-  { id: 'room', icon: '👥', label: 'Room' },
  { id: 'notes', icon: '📝', label: 'Notes' },
-  { id: 'quick', icon: '⚙️', label: 'Quick' },
+  { id: 'inbox', icon: '📨', label: 'Inbox' },
+  { id: 'stats', icon: '📊', label: 'Stats' },
+  { id: 'settings', icon: '⚙', label: 'Settings' },
 ];

+const PANEL_TITLE_MAP: Record<SpaceToolPanelId, string> = {
+  sound: '사운드',
+  notes: '생각 던지기',
+  inbox: '인박스',
+  stats: '집중 요약',
+  settings: '설정',
+};
+
 export const SpaceToolsDockWidget = ({
-  roomName,
-  activeMembers,
-  presence,
-  initialSoundPresetId,
-  isImmersionMode,
-  onToggleImmersionMode,
-  onThoughtCaptured,
+  isFocusMode,
+  thoughts,
+  thoughtCount,
+  selectedPresetId,
+  onSelectPreset,
+  isMixerOpen,
+  onToggleMixer,
+  isMuted,
+  onMuteChange,
+  masterVolume,
+  onMasterVolumeChange,
+  trackKeys,
+  trackLevels,
+  onTrackLevelChange,
+  onCaptureThought,
+  onClearInbox,
 }: SpaceToolsDockWidgetProps) => {
  const { pushToast } = useToast();
-  const { lastCheckIn, recordCheckIn } = useCheckIn();
-  const { activePanel, closePanel, togglePanel } = useSpaceToolsDock();
-  const [isRailExpanded, setRailExpanded] = useState(false);
-  const {
-    selectedPresetId,
-    setSelectedPresetId,
-    isMixerOpen,
-    setMixerOpen,
-    isMuted,
-    setMuted,
-    masterVolume,
-    setMasterVolume,
-    trackLevels,
-    setTrackLevel,
-    trackKeys,
-  } = useSoundPresetSelection(initialSoundPresetId);
-
-  const isDockExpanded = !isImmersionMode || isRailExpanded || activePanel !== null;
-
-  const handleClosePanel = () => {
-    closePanel();
-    if (isImmersionMode) {
-      setRailExpanded(false);
-    }
-  };
-
-  const handleCheckIn = (message: string) => {
-    recordCheckIn(message);
-    pushToast({ title: `체크인: ${message}` });
-  };
-
-  const handleReaction = (emoji: string) => {
-    pushToast({ title: `리액션: ${emoji}` });
-  };
-
-  const handleToolSelect = (panel: (typeof TOOL_BUTTONS)[number]['id']) => {
-    if (isImmersionMode) {
-      setRailExpanded(true);
-    }
-    togglePanel(panel);
-  };
+  const [activePanel, setActivePanel] = useState<SpaceToolPanelId | null>(null);

  return (
    <>
-      {activePanel ? (
-        <button
-          type="button"
-          aria-label="시트 닫기"
-          onClick={handleClosePanel}
-          className="fixed inset-0 z-30 bg-slate-950/10"
-        />
-      ) : null}
-
-      <div
-        className="fixed right-2 top-1/2 z-50 -translate-y-1/2"
-        onMouseEnter={() => {
-          if (isImmersionMode) {
-            setRailExpanded(true);
-          }
-        }}
-        onMouseLeave={() => {
-          if (isImmersionMode && activePanel === null) {
-            setRailExpanded(false);
-          }
-        }}
-      >
+      <div className="fixed right-3 top-1/2 z-30 -translate-y-1/2">
        <div
          className={cn(
-            'flex flex-col items-center gap-2 transition-all duration-200',
-            isDockExpanded
-              ? 'w-12 rounded-2xl border border-white/20 bg-slate-950/66 py-2 shadow-lg shadow-slate-950/60 backdrop-blur-xl'
-              : 'w-3 rounded-full border border-white/26 bg-slate-950/52 py-3',
+            'flex w-12 flex-col items-center gap-2 rounded-2xl border py-2 backdrop-blur-xl transition-opacity',
+            isFocusMode && activePanel === null
+              ? 'border-white/14 bg-slate-950/34 opacity-56 hover:opacity-100'
+              : 'border-white/18 bg-slate-950/50 opacity-100',
          )}
        >
-          {isDockExpanded ? (
-            TOOL_BUTTONS.map((tool) => (
+          {TOOL_ITEMS.map((item) => {
+            const selected = activePanel === item.id;
+
+            return (
              <button
-                key={tool.id}
+                key={item.id}
                type="button"
-                title={tool.label}
-                onClick={() => handleToolSelect(tool.id)}
+                title={item.label}
+                aria-label={item.label}
+                onClick={() => setActivePanel(item.id)}
                className={cn(
-                  'inline-flex h-9 w-9 items-center justify-center rounded-xl border text-base transition-colors',
-                  activePanel === tool.id
-                    ? 'border-sky-200/75 bg-sky-300/28'
-                    : 'border-white/20 bg-white/8 hover:bg-white/15',
+                  'relative inline-flex h-9 w-9 items-center justify-center rounded-xl border text-base transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75',
+                  selected
+                    ? 'border-sky-200/64 bg-sky-200/22'
+                    : 'border-white/18 bg-white/8 hover:bg-white/14',
                )}
              >
-                <span aria-hidden>{tool.icon}</span>
-                <span className="sr-only">{tool.label}</span>
+                <span aria-hidden>{item.icon}</span>
+                {item.id === 'inbox' && thoughtCount > 0 ? (
+                  <span className="absolute -right-1 -top-1 inline-flex min-w-[1rem] items-center justify-center rounded-full bg-sky-200/28 px-1 py-0.5 text-[9px] font-semibold text-sky-50">
+                    {thoughtCount > 99 ? '99+' : `${thoughtCount}`}
+                  </span>
+                ) : null}
              </button>
-            ))
-          ) : (
-            <button
-              type="button"
-              onClick={() => setRailExpanded(true)}
-              className="inline-flex flex-col items-center gap-1 py-1"
-            >
-              <span className="sr-only">도구 레일 펼치기</span>
-              <span aria-hidden className="h-1 w-1 rounded-full bg-white/74" />
-              <span aria-hidden className="h-1 w-1 rounded-full bg-white/58" />
-              <span aria-hidden className="h-1 w-1 rounded-full bg-white/44" />
-            </button>
-          )}
+            );
+          })}
        </div>
      </div>

-      {activePanel === 'sound' ? (
-        <SoundSheetWidget
-          onClose={handleClosePanel}
-          selectedPresetId={selectedPresetId}
-          onSelectPreset={setSelectedPresetId}
-          isMixerOpen={isMixerOpen}
-          onToggleMixer={() => setMixerOpen((current) => !current)}
-          isMuted={isMuted}
-          onMuteChange={setMuted}
-          masterVolume={masterVolume}
-          onMasterVolumeChange={setMasterVolume}
-          trackKeys={trackKeys}
-          trackLevels={trackLevels}
-          onTrackLevelChange={setTrackLevel}
-        />
-      ) : null}
+      <SpaceSideSheet
+        open={activePanel !== null}
+        title={activePanel ? PANEL_TITLE_MAP[activePanel] : ''}
+        onClose={() => setActivePanel(null)}
+      >
+        {activePanel === 'sound' ? (
+          <SoundToolPanel
+            selectedPresetId={selectedPresetId}
+            onSelectPreset={onSelectPreset}
+            isMixerOpen={isMixerOpen}
+            onToggleMixer={onToggleMixer}
+            isMuted={isMuted}
+            onMuteChange={onMuteChange}
+            masterVolume={masterVolume}
+            onMasterVolumeChange={onMasterVolumeChange}
+            trackKeys={trackKeys}
+            trackLevels={trackLevels}
+            onTrackLevelChange={onTrackLevelChange}
+          />
+        ) : null}

-      {activePanel === 'room' ? (
-        <RoomSheetWidget
-          roomName={roomName}
-          activeMembers={activeMembers}
-          presence={presence}
-          checkInPhrases={CHECK_IN_PHRASES}
-          reactions={REACTION_OPTIONS}
-          lastCheckIn={lastCheckIn}
-          onClose={handleClosePanel}
-          onCheckIn={handleCheckIn}
-          onReaction={(reaction) => handleReaction(reaction.emoji)}
-        />
-      ) : null}
+        {activePanel === 'notes' ? (
+          <NotesToolPanel
+            onCaptureThought={(note) => {
+              onCaptureThought(note);
+              pushToast({ title: '인박스에 주차했어요 (더미)' });
+            }}
+          />
+        ) : null}

-      {activePanel === 'notes' ? (
-        <NotesSheetWidget
-          onClose={handleClosePanel}
-          onNoteAdded={(note) => {
-            pushToast({ title: `노트 추가: ${note}` });
-            onThoughtCaptured?.(note);
-          }}
-          onNoteRemoved={() => pushToast({ title: '노트를 정리했어요' })}
-        />
-      ) : null}
+        {activePanel === 'inbox' ? (
+          <InboxToolPanel
+            thoughts={thoughts}
+            onClear={() => {
+              onClearInbox();
+              pushToast({ title: '인박스를 비웠어요 (더미)' });
+            }}
+          />
+        ) : null}

-      {activePanel === 'quick' ? (
-        <QuickSheetWidget
-          onClose={handleClosePanel}
-          isImmersionMode={isImmersionMode}
-          onToggleImmersionMode={onToggleImmersionMode}
-        />
-      ) : null}
+        {activePanel === 'stats' ? <StatsToolPanel /> : null}
+        {activePanel === 'settings' ? <SettingsToolPanel /> : null}
+      </SpaceSideSheet>
    </>
  );
 };
--- a/src/widgets/space-tools-dock/ui/panels/InboxToolPanel.tsx
+++ b/src/widgets/space-tools-dock/ui/panels/InboxToolPanel.tsx
@@ -0,0 +1,25 @@
+import type { RecentThought } from '@/entities/session';
+import { InboxList } from '@/features/inbox';
+
+interface InboxToolPanelProps {
+  thoughts: RecentThought[];
+  onClear: () => void;
+}
+
+export const InboxToolPanel = ({ thoughts, onClear }: InboxToolPanelProps) => {
+  return (
+    <div className="space-y-3.5">
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-xs text-white/58">나중에 모아보는 읽기 전용 인박스</p>
+        <button
+          type="button"
+          onClick={onClear}
+          className="rounded-full border border-white/20 bg-white/8 px-2.5 py-1 text-[11px] text-white/74 transition-colors hover:bg-white/14 hover:text-white"
+        >
+          모두 비우기
+        </button>
+      </div>
+      <InboxList thoughts={thoughts} />
+    </div>
+  );
+};
--- a/src/widgets/space-tools-dock/ui/panels/NotesToolPanel.tsx
+++ b/src/widgets/space-tools-dock/ui/panels/NotesToolPanel.tsx
@@ -0,0 +1,16 @@
+import { DistractionDumpNotesContent } from '@/features/distraction-dump';
+
+interface NotesToolPanelProps {
+  onCaptureThought: (note: string) => void;
+}
+
+export const NotesToolPanel = ({ onCaptureThought }: NotesToolPanelProps) => {
+  return (
+    <div className="space-y-3">
+      <p className="text-xs text-white/58">
+        집중 중 떠오른 생각을 잠깐 주차하세요. 저장 동작은 더미 토스트로만 처리됩니다.
+      </p>
+      <DistractionDumpNotesContent onNoteAdded={onCaptureThought} />
+    </div>
+  );
+};
--- a/src/widgets/space-tools-dock/ui/panels/SettingsToolPanel.tsx
+++ b/src/widgets/space-tools-dock/ui/panels/SettingsToolPanel.tsx
@@ -0,0 +1,65 @@
+'use client';
+
+import { useState } from 'react';
+import { DEFAULT_PRESET_OPTIONS } from '@/shared/config/settingsOptions';
+import { cn } from '@/shared/lib/cn';
+
+export const SettingsToolPanel = () => {
+  const [reduceMotion, setReduceMotion] = useState(false);
+  const [defaultPresetId, setDefaultPresetId] = useState<
+    (typeof DEFAULT_PRESET_OPTIONS)[number]['id']
+  >(DEFAULT_PRESET_OPTIONS[0].id);
+
+  return (
+    <div className="space-y-4">
+      <section className="rounded-2xl border border-white/14 bg-white/7 px-3.5 py-3">
+        <div className="flex items-center justify-between gap-3">
+          <div>
+            <p className="text-sm font-medium text-white">Reduce Motion</p>
+            <p className="mt-1 text-xs text-white/58">화면 전환을 조금 더 차분하게 표시합니다.</p>
+          </div>
+          <button
+            type="button"
+            role="switch"
+            aria-checked={reduceMotion}
+            onClick={() => setReduceMotion((current) => !current)}
+            className={cn(
+              'inline-flex w-14 items-center rounded-full border px-1 py-1 transition-colors',
+              reduceMotion
+                ? 'border-sky-200/44 bg-sky-200/24'
+                : 'border-white/24 bg-white/9',
+            )}
+          >
+            <span
+              className={cn(
+                'h-4.5 w-4.5 rounded-full bg-white transition-transform duration-200 motion-reduce:transition-none',
+                reduceMotion ? 'translate-x-7' : 'translate-x-0',
+              )}
+            />
+          </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">
+          {DEFAULT_PRESET_OPTIONS.map((preset) => (
+            <button
+              key={preset.id}
+              type="button"
+              onClick={() => setDefaultPresetId(preset.id)}
+              className={cn(
+                'rounded-full border px-3 py-1.5 text-xs transition-colors',
+                defaultPresetId === preset.id
+                  ? '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>
+    </div>
+  );
+};
--- a/src/widgets/space-tools-dock/ui/panels/SoundToolPanel.tsx
+++ b/src/widgets/space-tools-dock/ui/panels/SoundToolPanel.tsx
@@ -0,0 +1,48 @@
+import { SoundPresetControls, type SoundTrackKey } from '@/features/sound-preset';
+
+interface SoundToolPanelProps {
+  selectedPresetId: string;
+  onSelectPreset: (presetId: string) => void;
+  isMixerOpen: boolean;
+  onToggleMixer: () => void;
+  isMuted: boolean;
+  onMuteChange: (next: boolean) => void;
+  masterVolume: number;
+  onMasterVolumeChange: (next: number) => void;
+  trackKeys: readonly SoundTrackKey[];
+  trackLevels: Record<SoundTrackKey, number>;
+  onTrackLevelChange: (track: SoundTrackKey, level: number) => void;
+}
+
+export const SoundToolPanel = ({
+  selectedPresetId,
+  onSelectPreset,
+  isMixerOpen,
+  onToggleMixer,
+  isMuted,
+  onMuteChange,
+  masterVolume,
+  onMasterVolumeChange,
+  trackKeys,
+  trackLevels,
+  onTrackLevelChange,
+}: SoundToolPanelProps) => {
+  return (
+    <div className="space-y-3">
+      <p className="text-xs text-white/58">오디오 재생은 연결하지 않은 UI 목업입니다.</p>
+      <SoundPresetControls
+        selectedPresetId={selectedPresetId}
+        onSelectPreset={onSelectPreset}
+        isMixerOpen={isMixerOpen}
+        onToggleMixer={onToggleMixer}
+        isMuted={isMuted}
+        onMuteChange={onMuteChange}
+        masterVolume={masterVolume}
+        onMasterVolumeChange={onMasterVolumeChange}
+        trackKeys={trackKeys}
+        trackLevels={trackLevels}
+        onTrackLevelChange={onTrackLevelChange}
+      />
+    </div>
+  );
+};
--- a/src/widgets/space-tools-dock/ui/panels/StatsToolPanel.tsx
+++ b/src/widgets/space-tools-dock/ui/panels/StatsToolPanel.tsx
@@ -0,0 +1,26 @@
+import { TODAY_STATS, WEEKLY_STATS } from '@/entities/session';
+
+export const StatsToolPanel = () => {
+  const previewStats = [TODAY_STATS[0], TODAY_STATS[1], WEEKLY_STATS[0], WEEKLY_STATS[2]];
+
+  return (
+    <div className="space-y-4">
+      <p className="text-xs text-white/58">오늘 흐름과 최근 7일 리듬을 가볍게 확인하세요.</p>
+
+      <section className="grid gap-2.5 sm:grid-cols-2">
+        {previewStats.map((stat) => (
+          <article key={stat.id} className="rounded-2xl border border-white/14 bg-white/7 px-3.5 py-3">
+            <p className="text-[11px] text-white/58">{stat.label}</p>
+            <p className="mt-1 text-lg font-semibold text-white">{stat.value}</p>
+            <p className="mt-0.5 text-xs text-sky-100/78">{stat.delta}</p>
+          </article>
+        ))}
+      </section>
+
+      <section className="rounded-2xl border border-white/14 bg-white/6 p-3.5">
+        <div className="h-28 rounded-xl border border-dashed border-white/20 bg-[linear-gradient(180deg,rgba(148,163,184,0.14),rgba(148,163,184,0.02))]" />
+        <p className="mt-2 text-[11px] text-white/54">그래프 플레이스홀더</p>
+      </section>
+    </div>
+  );
+};
				`@@ -0,0 +1 @@`
				`export type SpaceToolPanelId = 'sound' \| 'notes' \| 'inbox' \| 'stats' \| 'settings';`