feat(fsd): 허브·스페이스 중심 UI 목업 구조로 재편

맥락:

- 기존 라우트/컴포넌트 구조를 FSD 기준으로 정리하고, /app 허브와 /space 집중 화면 중심의 목업 흐름을 구성하기 위해

변경사항:

- App Router 구조를 /landing, /app, /space, /stats, /settings 중심으로 재배치

- entities/session/room/user 더미 데이터와 타입 정의 추가

- features(커스텀 입장, 룸 선택, 체크인, 리액션, 30초 리스타트 등) 단위로 로직 분리

- widgets(허브, 룸 갤러리, 타이머 HUD, 툴 도크 등) 조합형 UI 추가

- shared 공용 UI(Button/Chip/Modal/Toast 등) 및 유틸(cn/useReducedMotion) 정비

- 로그인 후 이동 경로를 /dashboard 에서 /app 으로 변경

- README를 현재 프로젝트 구조/라우트/구현 범위 기준으로 갱신

검증:

- npx tsc --noEmit

세션-상태: 허브·스페이스 목업이 FSD 레이어로 동작 가능하도록 정리됨

세션-다음: /space 상단 및 도크의 인원 수 카피를 분위기형 카피로 후속 정리

세션-리스크: build는 네트워크 환경에서 Google Fonts fetch 실패 가능

src/features/auth/hooks/useSocialLogin.ts

@@ -34,8 +34,8 @@ export const useSocialLogin = () => {
       // 2. 응답받은 VibeRoom 전용 토큰과 유저 정보를 전역 상태 및 쿠키에 저장
       useAuthStore.getState().setAuth(response);
 
-      // 3. 메인 대시보드 화면으로 이동
-      router.push("/dashboard");
+      // 3. 메인 허브 화면으로 이동
+      router.push("/app");
     } catch (err) {
       console.error(`[${provider}] 로그인 실패:`, err);
       setError("로그인에 실패했습니다. 다시 시도해 주세요.");
@@ -64,7 +64,20 @@ export const useSocialLogin = () => {
    */
   const loginWithApple = () => {
     try {
-      appleAuthHelpers.signIn({
+      const appleHelperBridge = appleAuthHelpers as unknown as {
+        signIn: (options: {
+          authOptions: {
+            clientId: string;
+            scope: string;
+            redirectURI: string;
+            usePopup: boolean;
+          };
+          onSuccess: (response: any) => void;
+          onError: (err: any) => void;
+        }) => void;
+      };
+
+      appleHelperBridge.signIn({
         authOptions: {
           clientId: process.env.NEXT_PUBLIC_APPLE_CLIENT_ID || "",
           scope: "email name",

src/features/check-in/index.ts

@@ -0,0 +1,3 @@
+export * from './model/useCheckIn';
+export * from './ui/CompactCheckInChips';
+export * from './ui/CheckInChips';

src/features/check-in/model/useCheckIn.ts

@@ -0,0 +1,16 @@
+'use client';
+
+import { useState } from 'react';
+
+export const useCheckIn = () => {
+  const [lastCheckIn, setLastCheckIn] = useState<string | null>(null);
+
+  const recordCheckIn = (message: string) => {
+    setLastCheckIn(message);
+  };
+
+  return {
+    lastCheckIn,
+    recordCheckIn,
+  };
+};

src/features/check-in/ui/CheckInChips.tsx

@@ -0,0 +1,32 @@
+import type { CheckInPhrase } from '@/entities/session';
+import { Chip } from '@/shared/ui';
+
+interface CheckInChipsProps {
+  phrases: CheckInPhrase[];
+  lastCheckIn: string | null;
+  onCheckIn: (message: string) => void;
+}
+
+export const CheckInChips = ({
+  phrases,
+  lastCheckIn,
+  onCheckIn,
+}: CheckInChipsProps) => {
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-wrap gap-2">
+        {phrases.map((phrase) => (
+          <Chip key={phrase.id} onClick={() => onCheckIn(phrase.text)}>
+            {phrase.text}
+          </Chip>
+        ))}
+      </div>
+      <p className="text-xs text-white/72">
+        마지막 체크인:{' '}
+        <span className="font-medium text-white">
+          {lastCheckIn ?? '아직 남기지 않았어요'}
+        </span>
+      </p>
+    </div>
+  );
+};

src/features/check-in/ui/CompactCheckInChips.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import type { CheckInPhrase } from '@/entities/session';
+import { Chip } from '@/shared/ui';
+
+interface CompactCheckInChipsProps {
+  phrases: CheckInPhrase[];
+  onCheckIn: (message: string) => void;
+  collapsedCount?: number;
+}
+
+export const CompactCheckInChips = ({
+  phrases,
+  onCheckIn,
+  collapsedCount = 3,
+}: CompactCheckInChipsProps) => {
+  const [showAll, setShowAll] = useState(false);
+
+  const visiblePhrases = useMemo(() => {
+    if (showAll) {
+      return phrases;
+    }
+
+    return phrases.slice(0, collapsedCount);
+  }, [collapsedCount, phrases, showAll]);
+
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap gap-1.5">
+        {visiblePhrases.map((phrase) => (
+          <Chip
+            key={phrase.id}
+            onClick={() => onCheckIn(phrase.text)}
+            className="!px-2.5 !py-1 text-[11px]"
+          >
+            {phrase.text}
+          </Chip>
+        ))}
+      </div>
+
+      {phrases.length > collapsedCount ? (
+        <button
+          type="button"
+          onClick={() => setShowAll((current) => !current)}
+          className="text-[11px] text-white/65 transition hover:text-white"
+        >
+          {showAll ? '접기' : '더보기'}
+        </button>
+      ) : null}
+    </div>
+  );
+};

src/features/custom-entry-modal/index.ts

@@ -0,0 +1,2 @@
+export * from './model/useCustomEntryForm';
+export * from './ui/CustomEntryModal';

src/features/custom-entry-modal/model/useCustomEntryForm.ts

@@ -0,0 +1,70 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { SOUND_PRESETS, TIMER_PRESETS } from '@/entities/session';
+
+export type CustomEntryTab = 'theme' | 'sound' | 'timer';
+
+export interface CustomEntrySelection {
+  soundId: string;
+  timerId: string;
+  timerLabel: string;
+}
+
+const getSafeNumber = (value: string, fallback: number) => {
+  const parsed = Number(value);
+
+  if (!Number.isFinite(parsed) || parsed <= 0) {
+    return fallback;
+  }
+
+  return Math.round(parsed);
+};
+
+export const useCustomEntryForm = () => {
+  const [activeTab, setActiveTab] = useState<CustomEntryTab>('theme');
+  const [selectedSoundId, setSelectedSoundId] = useState(SOUND_PRESETS[0].id);
+  const [selectedTimerId, setSelectedTimerId] = useState(TIMER_PRESETS[0].id);
+  const [customFocusMinutes, setCustomFocusMinutes] = useState('40');
+  const [customBreakMinutes, setCustomBreakMinutes] = useState('10');
+
+  const timerLabel = useMemo(() => {
+    if (selectedTimerId !== 'custom') {
+      return TIMER_PRESETS.find((preset) => preset.id === selectedTimerId)?.label ??
+        TIMER_PRESETS[0].label;
+    }
+
+    const focus = getSafeNumber(customFocusMinutes, 25);
+    const breakMinutes = getSafeNumber(customBreakMinutes, 5);
+
+    return `${focus}/${breakMinutes}`;
+  }, [customBreakMinutes, customFocusMinutes, selectedTimerId]);
+
+  const buildSelection = (): CustomEntrySelection => {
+    return {
+      soundId: selectedSoundId,
+      timerId: selectedTimerId,
+      timerLabel,
+    };
+  };
+
+  const resetTab = () => {
+    setActiveTab('theme');
+  };
+
+  return {
+    activeTab,
+    selectedSoundId,
+    selectedTimerId,
+    customFocusMinutes,
+    customBreakMinutes,
+    timerLabel,
+    setActiveTab,
+    setSelectedSoundId,
+    setSelectedTimerId,
+    setCustomFocusMinutes,
+    setCustomBreakMinutes,
+    buildSelection,
+    resetTab,
+  };
+};

src/features/custom-entry-modal/ui/CustomEntryModal.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import { ROOM_THEMES } from '@/entities/room';
+import { SOUND_PRESETS, TIMER_PRESETS } from '@/entities/session';
+import { Button, Chip, Modal, Tabs } from '@/shared/ui';
+import {
+  type CustomEntrySelection,
+  useCustomEntryForm,
+} from '../model/useCustomEntryForm';
+
+interface CustomEntryModalProps {
+  isOpen: boolean;
+  selectedRoomId: string;
+  onSelectRoom: (roomId: string) => void;
+  onClose: () => void;
+  onEnter: (selection: CustomEntrySelection) => void;
+}
+
+export const CustomEntryModal = ({
+  isOpen,
+  selectedRoomId,
+  onSelectRoom,
+  onClose,
+  onEnter,
+}: CustomEntryModalProps) => {
+  const {
+    activeTab,
+    selectedSoundId,
+    selectedTimerId,
+    customFocusMinutes,
+    customBreakMinutes,
+    setActiveTab,
+    setSelectedSoundId,
+    setSelectedTimerId,
+    setCustomFocusMinutes,
+    setCustomBreakMinutes,
+    buildSelection,
+    resetTab,
+  } = useCustomEntryForm();
+
+  const tabOptions = [
+    { value: 'theme', label: '공간' },
+    { value: 'sound', label: '사운드 프리셋' },
+    { value: 'timer', label: '타이머 프리셋' },
+  ];
+
+  const handleClose = () => {
+    resetTab();
+    onClose();
+  };
+
+  const handleEnter = () => {
+    onEnter(buildSelection());
+    resetTab();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      title="커스텀해서 입장"
+      description="선택은 가볍게, 입장 후에도 언제든 다시 바꿀 수 있어요."
+      onClose={handleClose}
+      footer={
+        <div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
+          <Button
+            variant="secondary"
+            className="!bg-white/10 !text-white hover:!bg-white/15"
+            onClick={handleClose}
+          >
+            닫기
+          </Button>
+          <Button onClick={handleEnter}>이 설정으로 입장</Button>
+        </div>
+      }
+    >
+      <div className="space-y-5">
+        <Tabs value={activeTab} options={tabOptions} onChange={(value) => setActiveTab(value as 'theme' | 'sound' | 'timer')} />
+
+        {activeTab === 'theme' ? (
+          <div className="grid gap-2 sm:grid-cols-2">
+            {ROOM_THEMES.map((room) => (
+              <button
+                key={room.id}
+                type="button"
+                onClick={() => onSelectRoom(room.id)}
+                className={`rounded-xl border px-3 py-3 text-left transition-colors ${
+                  selectedRoomId === room.id
+                    ? 'border-sky-200 bg-sky-300/22 text-sky-50'
+                    : 'border-white/16 bg-white/5 text-white/85 hover:bg-white/10'
+                }`}
+              >
+                <p className="text-sm font-medium">{room.name}</p>
+                <p className="mt-1 text-xs text-white/70">{room.description}</p>
+              </button>
+            ))}
+          </div>
+        ) : null}
+
+        {activeTab === 'sound' ? (
+          <div className="flex flex-wrap gap-2">
+            {SOUND_PRESETS.map((preset) => (
+              <Chip
+                key={preset.id}
+                active={selectedSoundId === preset.id}
+                onClick={() => setSelectedSoundId(preset.id)}
+              >
+                {preset.label}
+              </Chip>
+            ))}
+          </div>
+        ) : null}
+
+        {activeTab === 'timer' ? (
+          <div className="space-y-4">
+            <div className="flex flex-wrap gap-2">
+              {TIMER_PRESETS.map((preset) => (
+                <Chip
+                  key={preset.id}
+                  active={selectedTimerId === preset.id}
+                  onClick={() => setSelectedTimerId(preset.id)}
+                >
+                  {preset.label}
+                </Chip>
+              ))}
+            </div>
+
+            {selectedTimerId === 'custom' ? (
+              <div className="grid gap-3 sm:grid-cols-2">
+                <label className="space-y-1 text-sm text-white/75">
+                  <span>집중(분)</span>
+                  <input
+                    type="number"
+                    min={1}
+                    value={customFocusMinutes}
+                    onChange={(event) => setCustomFocusMinutes(event.target.value)}
+                    className="w-full rounded-xl border border-white/20 bg-slate-900/70 px-3 py-2 text-white placeholder:text-white/45"
+                    placeholder="25"
+                  />
+                </label>
+
+                <label className="space-y-1 text-sm text-white/75">
+                  <span>휴식(분)</span>
+                  <input
+                    type="number"
+                    min={1}
+                    value={customBreakMinutes}
+                    onChange={(event) => setCustomBreakMinutes(event.target.value)}
+                    className="w-full rounded-xl border border-white/20 bg-slate-900/70 px-3 py-2 text-white placeholder:text-white/45"
+                    placeholder="5"
+                  />
+                </label>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    </Modal>
+  );
+};

src/features/distraction-dump/index.ts

@@ -0,0 +1,4 @@
+export * from './model/useDistractionDump';
+export * from './model/useDistractionNotes';
+export * from './ui/DistractionDumpNotesContent';
+export * from './ui/DistractionDumpPanel';

src/features/distraction-dump/model/useDistractionDump.ts

@@ -0,0 +1,38 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { DISTRACTION_DUMP_PLACEHOLDER } from '@/entities/session';
+
+export const useDistractionDump = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [draft, setDraft] = useState('');
+  const [items, setItems] = useState<string[]>(DISTRACTION_DUMP_PLACEHOLDER);
+
+  const hasDraft = useMemo(() => draft.trim().length > 0, [draft]);
+
+  const toggle = () => {
+    setIsOpen((current) => !current);
+  };
+
+  const saveDraft = () => {
+    if (!hasDraft) {
+      return null;
+    }
+
+    const value = draft.trim();
+    setItems((current) => [value, ...current]);
+    setDraft('');
+
+    return value;
+  };
+
+  return {
+    isOpen,
+    draft,
+    items,
+    hasDraft,
+    setDraft,
+    toggle,
+    saveDraft,
+  };
+};

src/features/distraction-dump/model/useDistractionNotes.ts

@@ -0,0 +1,68 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { DISTRACTION_DUMP_PLACEHOLDER } from '@/entities/session';
+
+interface DistractionNote {
+  id: string;
+  text: string;
+  done: boolean;
+}
+
+const createInitialNotes = (): DistractionNote[] => {
+  return DISTRACTION_DUMP_PLACEHOLDER.slice(0, 5).map((text, index) => ({
+    id: `note-${index + 1}`,
+    text,
+    done: false,
+  }));
+};
+
+export const useDistractionNotes = () => {
+  const [draft, setDraft] = useState('');
+  const [notes, setNotes] = useState<DistractionNote[]>(createInitialNotes);
+
+  const canAdd = useMemo(() => draft.trim().length > 0, [draft]);
+
+  const addNote = () => {
+    if (!canAdd) {
+      return null;
+    }
+
+    const value = draft.trim();
+
+    setNotes((current) => [
+      {
+        id: `note-${Date.now()}`,
+        text: value,
+        done: false,
+      },
+      ...current,
+    ]);
+
+    setDraft('');
+
+    return value;
+  };
+
+  const toggleDone = (noteId: string) => {
+    setNotes((current) =>
+      current.map((note) =>
+        note.id === noteId ? { ...note, done: !note.done } : note,
+      ),
+    );
+  };
+
+  const removeNote = (noteId: string) => {
+    setNotes((current) => current.filter((note) => note.id !== noteId));
+  };
+
+  return {
+    draft,
+    notes,
+    canAdd,
+    setDraft,
+    addNote,
+    toggleDone,
+    removeNote,
+  };
+};

src/features/distraction-dump/ui/DistractionDumpNotesContent.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { Button } from '@/shared/ui';
+import { cn } from '@/shared/lib/cn';
+import { useDistractionNotes } from '../model/useDistractionNotes';
+
+interface DistractionDumpNotesContentProps {
+  onNoteAdded?: (note: string) => void;
+  onNoteRemoved?: () => void;
+}
+
+export const DistractionDumpNotesContent = ({
+  onNoteAdded,
+  onNoteRemoved,
+}: DistractionDumpNotesContentProps) => {
+  const { draft, notes, canAdd, setDraft, addNote, toggleDone, removeNote } =
+    useDistractionNotes();
+
+  const handleAdd = () => {
+    const note = addNote();
+
+    if (note && onNoteAdded) {
+      onNoteAdded(note);
+    }
+  };
+
+  const handleRemove = (noteId: string) => {
+    removeNote(noteId);
+
+    if (onNoteRemoved) {
+      onNoteRemoved();
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <textarea
+          value={draft}
+          onChange={(event) => setDraft(event.target.value)}
+          placeholder="지금 떠오른 생각을 잠깐 적어두기"
+          className="h-20 w-full resize-none rounded-xl border border-white/20 bg-slate-950/55 px-3 py-2 text-sm text-white placeholder:text-white/45 focus:border-sky-200/60 focus:outline-none"
+        />
+
+        <div className="flex items-center justify-between gap-2">
+          <p className="text-[11px] text-white/58">Enter 안내: 버튼으로만 동작하는 목업</p>
+          <Button size="sm" className="!h-8" onClick={handleAdd} disabled={!canAdd}>
+            추가
+          </Button>
+        </div>
+      </div>
+
+      <ul className="space-y-2">
+        {notes.slice(0, 5).map((note) => (
+          <li
+            key={note.id}
+            className="rounded-lg border border-white/12 bg-white/5 px-3 py-2"
+          >
+            <div className="flex items-start justify-between gap-2">
+              <p
+                className={cn(
+                  'text-sm text-white/88',
+                  note.done && 'text-white/45 line-through',
+                )}
+              >
+                {note.text}
+              </p>
+              <div className="flex items-center gap-1">
+                <button
+                  type="button"
+                  onClick={() => toggleDone(note.id)}
+                  className="rounded border border-white/20 px-2 py-0.5 text-[11px] text-white/75 transition hover:bg-white/12"
+                >
+                  {note.done ? '해제' : '완료'}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handleRemove(note.id)}
+                  className="rounded border border-white/20 px-2 py-0.5 text-[11px] text-white/75 transition hover:bg-white/12"
+                >
+                  삭제
+                </button>
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

src/features/distraction-dump/ui/DistractionDumpPanel.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { Button } from '@/shared/ui';
+import { useDistractionDump } from '../model/useDistractionDump';
+
+interface DistractionDumpPanelProps {
+  onSaved?: (note: string) => void;
+}
+
+export const DistractionDumpPanel = ({
+  onSaved,
+}: DistractionDumpPanelProps) => {
+  const { isOpen, draft, items, hasDraft, setDraft, toggle, saveDraft } =
+    useDistractionDump();
+
+  const handleSave = () => {
+    const value = saveDraft();
+
+    if (value && onSaved) {
+      onSaved(value);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <Button
+        variant="outline"
+        size="sm"
+        className="!border-white/30 !bg-white/5 !text-white hover:!bg-white/14"
+        onClick={toggle}
+      >
+        떠오른 생각 임시 저장
+      </Button>
+
+      {isOpen ? (
+        <div className="space-y-3 rounded-xl border border-white/20 bg-slate-900/45 p-3">
+          <textarea
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+            placeholder="방금 떠오른 할 일을 여기에 잠깐 보관하세요"
+            className="h-24 w-full resize-none rounded-lg border border-white/18 bg-slate-950/55 px-3 py-2 text-sm text-white placeholder:text-white/45 focus:border-sky-200/60 focus:outline-none"
+          />
+
+          <div className="flex items-center justify-between gap-2">
+            <p className="text-xs text-white/62">다시 보기 전까지 임시 보관됩니다.</p>
+            <Button
+              size="sm"
+              className="!h-8"
+              onClick={handleSave}
+              disabled={!hasDraft}
+            >
+              메모 추가
+            </Button>
+          </div>
+
+          <ul className="space-y-1.5 text-xs text-white/74">
+            {items.slice(0, 4).map((item) => (
+              <li key={item} className="rounded-md bg-white/6 px-2.5 py-1.5">
+                {item}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+    </div>
+  );
+};

src/features/profile-menu/index.ts

@@ -0,0 +1 @@
+export * from './ui/ProfileMenu';

src/features/profile-menu/ui/ProfileMenu.tsx

@@ -0,0 +1,29 @@
+import type { ViewerProfile } from '@/entities/user';
+import { Dropdown, DropdownItem } from '@/shared/ui';
+
+interface ProfileMenuProps {
+  user: ViewerProfile;
+  onLogout: () => void;
+}
+
+export const ProfileMenu = ({ user, onLogout }: ProfileMenuProps) => {
+  return (
+    <Dropdown
+      align="right"
+      trigger={
+        <span className="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-2.5 py-1.5 text-sm text-white/90">
+          <span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-sky-300/30 text-xs font-semibold text-sky-100">
+            {user.avatarLabel}
+          </span>
+          <span className="hidden sm:inline">{user.name}</span>
+        </span>
+      }
+    >
+      <DropdownItem href="/stats">Stats</DropdownItem>
+      <DropdownItem href="/settings">Settings</DropdownItem>
+      <DropdownItem danger onClick={onLogout}>
+        Logout
+      </DropdownItem>
+    </Dropdown>
+  );
+};

src/features/reactions/index.ts

@@ -0,0 +1,2 @@
+export * from './ui/ReactionIconRow';
+export * from './ui/ReactionButtons';

src/features/reactions/ui/ReactionButtons.tsx

@@ -0,0 +1,23 @@
+import type { ReactionOption } from '@/entities/session';
+import { Chip } from '@/shared/ui';
+
+interface ReactionButtonsProps {
+  reactions: ReactionOption[];
+  onReact: (reaction: ReactionOption) => void;
+}
+
+export const ReactionButtons = ({
+  reactions,
+  onReact,
+}: ReactionButtonsProps) => {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {reactions.map((reaction) => (
+        <Chip key={reaction.id} onClick={() => onReact(reaction)}>
+          <span className="text-sm">{reaction.emoji}</span>
+          <span>{reaction.label}</span>
+        </Chip>
+      ))}
+    </div>
+  );
+};

src/features/reactions/ui/ReactionIconRow.tsx

@@ -0,0 +1,31 @@
+import type { ReactionOption } from '@/entities/session';
+import { cn } from '@/shared/lib/cn';
+
+interface ReactionIconRowProps {
+  reactions: ReactionOption[];
+  onReact: (reaction: ReactionOption) => void;
+}
+
+export const ReactionIconRow = ({
+  reactions,
+  onReact,
+}: ReactionIconRowProps) => {
+  return (
+    <div className="flex flex-wrap items-center gap-1.5">
+      {reactions.map((reaction) => (
+        <button
+          key={reaction.id}
+          type="button"
+          title={reaction.label}
+          onClick={() => onReact(reaction)}
+          className={cn(
+            'inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/20 bg-white/10 text-base transition-colors',
+            'hover:bg-white/18 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200/80',
+          )}
+        >
+          {reaction.emoji}
+        </button>
+      ))}
+    </div>
+  );
+};

src/features/restart-30s/index.ts

@@ -0,0 +1 @@
+export * from './ui/Restart30sAction';

src/features/restart-30s/model/useRestart30s.ts

@@ -0,0 +1,18 @@
+'use client';
+
+import { useToast } from '@/shared/ui';
+
+export const useRestart30s = () => {
+  const { pushToast } = useToast();
+
+  const triggerRestart = () => {
+    pushToast({
+      title: '30초 리스타트(더미)',
+      description: '실제 리스타트 동작은 아직 연결되지 않았어요.',
+    });
+  };
+
+  return {
+    triggerRestart,
+  };
+};

src/features/restart-30s/ui/Restart30sAction.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { cn } from '@/shared/lib/cn';
+import { useRestart30s } from '../model/useRestart30s';
+
+interface Restart30sActionProps {
+  className?: string;
+}
+
+export const Restart30sAction = ({ className }: Restart30sActionProps) => {
+  const { triggerRestart } = useRestart30s();
+
+  return (
+    <button
+      type="button"
+      onClick={triggerRestart}
+      className={cn(
+        'inline-flex items-center gap-2 text-xs text-white/66 transition hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200/80',
+        className,
+      )}
+    >
+      <span aria-hidden className="text-[13px]">
+        ↻
+      </span>
+      <span>다시 시작</span>
+      <span className="rounded-full border border-white/25 bg-white/8 px-2 py-0.5 text-[10px] text-white/72">
+        30초
+      </span>
+    </button>
+  );
+};

src/features/room-select/index.ts

@@ -0,0 +1,2 @@
+export * from './model/useRoomSelection';
+export * from './ui/RoomPreviewCard';

src/features/room-select/model/useRoomSelection.ts

@@ -0,0 +1,20 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { getRoomById, ROOM_THEMES } from '@/entities/room';
+
+export const useRoomSelection = (initialRoomId?: string) => {
+  const [selectedRoomId, setSelectedRoomId] = useState(
+    initialRoomId ?? ROOM_THEMES[0].id,
+  );
+
+  const selectedRoom = useMemo(() => {
+    return getRoomById(selectedRoomId) ?? ROOM_THEMES[0];
+  }, [selectedRoomId]);
+
+  return {
+    selectedRoomId,
+    selectedRoom,
+    selectRoom: setSelectedRoomId,
+  };
+};

src/features/room-select/ui/RoomPreviewCard.tsx

@@ -0,0 +1,62 @@
+import type { RoomTheme } from '@/entities/room';
+import { getRoomBackgroundStyle } from '@/entities/room';
+import { Chip } from '@/shared/ui';
+import { cn } from '@/shared/lib/cn';
+
+interface RoomPreviewCardProps {
+  room: RoomTheme;
+  selected: boolean;
+  onSelect: (roomId: string) => void;
+}
+
+export const RoomPreviewCard = ({
+  room,
+  selected,
+  onSelect,
+}: RoomPreviewCardProps) => {
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(room.id)}
+      className={cn(
+        'group relative overflow-hidden rounded-2xl border p-4 text-left transition-all duration-250 motion-reduce:transition-none',
+        selected
+          ? 'border-sky-200/85 shadow-[0_0_0_1px_rgba(186,230,253,0.9)]'
+          : 'border-white/18 hover:border-white/35',
+      )}
+    >
+      <div aria-hidden className="absolute inset-0" style={getRoomBackgroundStyle(room)} />
+      <div aria-hidden className="absolute inset-0 bg-slate-950/54" />
+      <div aria-hidden className="absolute inset-0 bg-[linear-gradient(to_top,rgba(2,6,23,0.86),rgba(2,6,23,0.25))]" />
+
+      <div className="relative space-y-3">
+        <div>
+          <h3 className="text-base font-semibold text-white">{room.name}</h3>
+          <p className="mt-1 text-xs text-white/72">{room.description}</p>
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          {room.tags.map((tag) => (
+            <Chip key={tag} tone="muted" className="!cursor-default">
+              {tag}
+            </Chip>
+          ))}
+        </div>
+
+        <div className="space-y-2">
+          <p className="text-xs text-white/76">
+            추천 사운드: <span className="font-medium text-white">{room.recommendedSound}</span>
+          </p>
+          <div className="flex flex-wrap gap-2">
+            <Chip tone="accent" className="!cursor-default">
+              추천 시간 · {room.recommendedTime}
+            </Chip>
+            <Chip tone="neutral" className="!cursor-default">
+              지금 분위기 · {room.vibeLabel}
+            </Chip>
+          </div>
+        </div>
+      </div>
+    </button>
+  );
+};

src/features/space/components/FocusRoomScreen.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useFocusRoomViewModel } from "../hooks/useFocusRoomViewModel";
+
+export const FocusRoomScreen = () => {
+  const { goal, leaveRoom } = useFocusRoomViewModel();
+
+  return (
+    <div className="relative min-h-screen overflow-hidden bg-slate-900 text-white">
+      <div
+        aria-hidden
+        className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(90,149,201,0.35),transparent_45%),radial-gradient(circle_at_80%_30%,rgba(150,185,150,0.3),transparent_45%),linear-gradient(160deg,#223040,#17212e_50%,#121a24)]"
+      />
+
+      <div className="relative z-10 flex min-h-screen flex-col">
+        <header className="flex items-center justify-between px-5 py-4 sm:px-8 md:px-12">
+          <div className="flex items-center gap-2">
+            <span className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-white/30 bg-white/10 text-xs font-bold">
+              V
+            </span>
+            <p className="text-sm font-semibold tracking-tight">VibeRoom</p>
+          </div>
+
+          <button
+            type="button"
+            onClick={leaveRoom}
+            className="rounded-lg border border-white/25 px-3 py-1.5 text-xs font-semibold text-white/85 transition hover:border-white/40 hover:text-white"
+          >
+            나가기
+          </button>
+        </header>
+
+        <main className="relative flex flex-1">
+          <section className="flex flex-1 flex-col px-5 pb-24 pt-6 sm:px-8 md:px-12">
+            <div className="mx-auto mt-6 w-full max-w-2xl rounded-2xl border border-white/20 bg-black/25 px-5 py-4 text-center backdrop-blur-sm">
+              <p className="text-xs uppercase tracking-[0.14em] text-white/60">현재 목표</p>
+              <p className="mt-2 text-lg font-semibold text-white">{goal}</p>
+            </div>
+
+            <div className="mt-auto w-full max-w-sm rounded-2xl border border-white/20 bg-black/30 p-4 backdrop-blur-sm">
+              <p className="text-xs font-semibold uppercase tracking-[0.14em] text-white/60">
+                Distraction Dump
+              </p>
+              <textarea
+                placeholder="떠오른 생각을 잠깐 기록..."
+                className="mt-3 h-24 w-full resize-none rounded-xl border border-white/20 bg-white/10 px-3 py-2 text-sm text-white placeholder:text-white/45 focus:border-white/40 focus:outline-none"
+              />
+            </div>
+          </section>
+
+          <aside className="mr-5 hidden w-80 self-center rounded-2xl border border-white/20 bg-black/30 p-5 backdrop-blur-sm lg:mr-8 lg:block">
+            <p className="text-xs font-semibold uppercase tracking-[0.14em] text-white/60">
+              설정 패널
+            </p>
+            <ul className="mt-4 space-y-3 text-sm text-white/85">
+              <li>배경 선택</li>
+              <li>사운드 선택</li>
+              <li>볼륨 슬라이더</li>
+              <li>타이머(옵션)</li>
+            </ul>
+          </aside>
+        </main>
+
+        <footer className="border-t border-white/15 bg-black/30 px-5 py-3 backdrop-blur-sm sm:px-8 md:px-12">
+          <div className="flex flex-wrap items-center gap-2 text-xs sm:text-sm">
+            <button className="rounded-lg border border-white/25 px-3 py-2 text-white/90 transition hover:border-white/40">
+              시작/일시정지
+            </button>
+            <button className="rounded-lg border border-white/25 px-3 py-2 text-white/90 transition hover:border-white/40">
+              타이머 ON/OFF
+            </button>
+            <button className="rounded-lg border border-white/25 px-3 py-2 text-white/90 transition hover:border-white/40">
+              목표 수정
+            </button>
+            <button className="rounded-lg border border-white/25 px-3 py-2 text-white/90 transition hover:border-white/40">
+              전체화면
+            </button>
+          </div>
+        </footer>
+      </div>
+    </div>
+  );
+};
+

src/features/space/components/RoomEntryForm.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { useRoomEntry } from "../hooks/useRoomEntry";
+
+export const RoomEntryForm = () => {
+  const { focusGoal, setFocusGoal, canEnterRoom, handleSubmit } = useRoomEntry();
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="flex w-full flex-col gap-3 sm:flex-row sm:items-center"
+    >
+      <input
+        type="text"
+        value={focusGoal}
+        onChange={(event) => setFocusGoal(event.target.value)}
+        placeholder="오늘 무엇에 집중할까요?"
+        className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-4 text-sm text-brand-dark placeholder:text-brand-dark/45 focus:border-brand-primary/45 focus:bg-white focus:outline-none sm:flex-1"
+      />
+      <button
+        type="submit"
+        aria-label="가상공간 입장"
+        disabled={!canEnterRoom}
+        className="inline-flex h-11 w-11 items-center justify-center rounded-full bg-brand-primary text-white transition hover:bg-brand-primary/90 disabled:cursor-not-allowed disabled:bg-slate-300 sm:shrink-0"
+      >
+        <svg aria-hidden viewBox="0 0 20 20" fill="none" className="h-5 w-5">
+          <path
+            d="M5 10h10M11 6l4 4-4 4"
+            stroke="currentColor"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+    </form>
+  );
+};
+

src/features/space/hooks/useDashboardViewModel.ts

@@ -0,0 +1,30 @@
+"use client";
+
+import { useUserProfile } from "@/features/user";
+import { useAuthStore } from "@/store/useAuthStore";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export const useDashboardViewModel = () => {
+  const router = useRouter();
+  const { logout, isAuthenticated } = useAuthStore();
+  const { user, isLoading } = useUserProfile();
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      router.push("/login");
+    }
+  }, [isAuthenticated, router]);
+
+  const handleLogout = () => {
+    logout();
+    router.push("/login");
+  };
+
+  return {
+    user,
+    isLoading,
+    handleLogout,
+  };
+};
+

src/features/space/hooks/useFocusRoomViewModel.ts

@@ -0,0 +1,31 @@
+"use client";
+
+import { useAuthStore } from "@/store/useAuthStore";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useMemo } from "react";
+
+export const useFocusRoomViewModel = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      router.push("/login");
+    }
+  }, [isAuthenticated, router]);
+
+  const goal = useMemo(() => {
+    const fromQuery = searchParams.get("goal")?.trim();
+    return fromQuery?.length ? fromQuery : "오늘의 목표를 설정해 주세요";
+  }, [searchParams]);
+
+  const leaveRoom = () => {
+    router.push("/app");
+  };
+
+  return {
+    goal,
+    leaveRoom,
+  };
+};

src/features/space/hooks/useRoomEntry.ts

@@ -0,0 +1,33 @@
+"use client";
+
+import { FormEvent, useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+
+export const useRoomEntry = () => {
+  const router = useRouter();
+  const [focusGoal, setFocusGoal] = useState("");
+
+  const normalizedGoal = useMemo(() => focusGoal.trim(), [focusGoal]);
+  const canEnterRoom = normalizedGoal.length > 0;
+
+  const enterRoom = () => {
+    if (!canEnterRoom) {
+      return;
+    }
+
+    const query = new URLSearchParams({ goal: normalizedGoal }).toString();
+    router.push(`/space?${query}`);
+  };
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    enterRoom();
+  };
+
+  return {
+    focusGoal,
+    setFocusGoal,
+    canEnterRoom,
+    handleSubmit,
+  };
+};

src/features/space/index.ts

@@ -0,0 +1,4 @@
+export * from "./components/FocusRoomScreen";
+export * from "./components/RoomEntryForm";
+export * from "./hooks/useDashboardViewModel";
+