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 실패 가능
2026-02-27 13:30:55 +09:00
parent 583837fb8d
commit cbd9017744
87 changed files with 2900 additions and 176 deletions
--- a/src/app/(app)/app/page.tsx
+++ b/src/app/(app)/app/page.tsx
@@ -0,0 +1,5 @@
+import { AppHubWidget } from '@/widgets/app-hub';
+
+export default function AppPage() {
+  return <AppHubWidget />;
+}
--- a/src/app/(app)/dashboard/page.tsx
+++ b/src/app/(app)/dashboard/page.tsx
@@ -1,106 +0,0 @@
-"use client";
-
-import { UserProfileSimple, useUserProfile } from "@/features/user";
-import { useAuthStore } from "@/store/useAuthStore";
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-
-export default function DashboardPage() {
-  const router = useRouter();
-  const { logout, isAuthenticated } = useAuthStore();
-  const { user, isLoading } = useUserProfile();
-  const [focusGoal, setFocusGoal] = useState("");
-
-  useEffect(() => {
-    if (!isAuthenticated) {
-      router.push("/login");
-    }
-  }, [isAuthenticated, router]);
-
-  const handleLogout = () => {
-    logout();
-    router.push("/login");
-  };
-
-  return (
-    <div className="min-h-screen bg-slate-100 text-brand-dark">
-      <div className="flex min-h-screen w-full flex-col px-5 pb-8 pt-5 sm:px-8 md:px-12">
-        <header className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <span className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-slate-300 bg-white text-xs font-bold text-brand-dark">
-              V
-            </span>
-            <p className="text-sm font-semibold tracking-tight">VibeRoom</p>
-          </div>
-
-          <div className="flex items-center gap-3">
-            <UserProfileSimple user={user} isLoading={isLoading} />
-            <button
-              onClick={handleLogout}
-              className="px-1 py-1 text-xs font-semibold text-brand-dark/70 transition hover:text-brand-primary"
-            >
-              로그아웃
-            </button>
-          </div>
-        </header>
-
-        <main className="relative flex flex-1 flex-col items-center justify-center py-10">
-          <div
-            aria-hidden
-            className="pointer-events-none absolute left-1/2 top-[-2rem] hidden -translate-x-1/2 select-none text-[14rem] font-semibold leading-none tracking-[-0.08em] text-brand-dark/[0.05] md:block"
-          >
-            V
-          </div>
-
-          <section className="relative z-10 w-full text-center">
-            <h1 className="text-4xl font-semibold tracking-tight text-brand-dark sm:text-5xl">
-              지금, 몰입을 시작해보세요
-            </h1>
-            <p className="mt-4 w-full text-sm leading-relaxed text-brand-dark/70 sm:text-base">
-              VibeRoom은 집중 루틴을 빠르게 시작하는 앱 홈입니다. 가상공간을
-              선택하고 바로 세션에 들어가세요.
-            </p>
-
-            <div className="mx-auto mt-9 w-[80%] overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-[0_6px_24px_rgba(48,77,109,0.08)]">
-              <div className="border-b border-slate-200 px-4 py-3 text-left text-sm font-medium text-brand-dark/70 sm:px-5">
-                여기서 집중해보세요! 세션 시작과 동시에 공간 톤과 사운드가
-                맞춰집니다.
-              </div>
-
-              <div className="mx-auto w-full max-w-2xl px-4 py-5 sm:px-5">
-                <div 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
-                    aria-label="가상공간 입장"
-                    className="inline-flex h-11 w-11 items-center justify-center rounded-full bg-brand-primary text-white transition hover:bg-brand-primary/90 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>
-                </div>
-              </div>
-            </div>
-          </section>
-        </main>
-      </div>
-    </div>
-  );
-}
--- a/src/app/(app)/settings/page.tsx
+++ b/src/app/(app)/settings/page.tsx
@@ -0,0 +1,5 @@
+import { SettingsPanelWidget } from '@/widgets/settings-panel';
+
+export default function SettingsPage() {
+  return <SettingsPanelWidget />;
+}
--- a/src/app/(app)/space/page.tsx
+++ b/src/app/(app)/space/page.tsx
@@ -0,0 +1,10 @@
+import { Suspense } from 'react';
+import { SpaceSkeletonWidget } from '@/widgets/space-shell';
+
+export default function SpacePage() {
+  return (
+    <Suspense fallback={<div className="min-h-screen bg-slate-950" />}>
+      <SpaceSkeletonWidget />
+    </Suspense>
+  );
+}
--- a/src/app/(app)/stats/page.tsx
+++ b/src/app/(app)/stats/page.tsx
@@ -0,0 +1,5 @@
+import { StatsOverviewWidget } from '@/widgets/stats-overview';
+
+export default function StatsPage() {
+  return <StatsOverviewWidget />;
+}
--- a/src/app/(marketing)/page.tsx
+++ b/src/app/(marketing)/page.tsx
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -15,3 +15,25 @@ body {
  background-color: theme('colors.slate.50'); /* #f8fafc */
  color: var(--color-brand-dark);
 }
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes sheet-in {
+  from {
+    opacity: 0;
+    transform: translateX(28px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import { Noto_Sans_KR } from 'next/font/google';
 import './globals.css';
+import { Providers } from './providers';

 // 1. Noto Sans KR 폰트 설정 (라틴어, 프랑스어, 한국어 등 다국어 지원 베이스)
 const notoSans = Noto_Sans_KR({
@@ -23,7 +24,7 @@ export default function RootLayout({
  return (
    <html lang="ko" className={notoSans.variable}>
      <body className="antialiased font-sans">
-        {children}
+        <Providers>{children}</Providers>
      </body>
    </html>
  );
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@@ -0,0 +1,8 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { ToastProvider } from '@/shared/ui';
+
+export const Providers = ({ children }: { children: ReactNode }) => {
+  return <ToastProvider>{children}</ToastProvider>;
+};
--- a/src/entities/room/index.ts
+++ b/src/entities/room/index.ts
@@ -0,0 +1,2 @@
+export * from './model/rooms';
+export * from './model/types';
--- a/src/entities/room/model/rooms.ts
+++ b/src/entities/room/model/rooms.ts
@@ -0,0 +1,157 @@
+import type { CSSProperties } from 'react';
+import type { RoomTheme } from './types';
+
+export const ROOM_THEMES: RoomTheme[] = [
+  {
+    id: 'rain-window',
+    name: '비 오는 창가',
+    description: '빗소리 위로 스탠드 조명이 부드럽게 번집니다.',
+    tags: ['저자극', '감성'],
+    recommendedSound: 'Rain Focus',
+    recommendedTime: '밤',
+    vibeLabel: '잔잔함',
+    activeMembers: 32,
+    presence: { focus: 23, break: 6, away: 3 },
+    previewImage: '/spaces/rain-window.jpg',
+    previewGradient:
+      'radial-gradient(120% 130% at 12% 8%, rgba(59,130,246,0.35) 0%, rgba(2,6,23,0) 48%), linear-gradient(160deg, rgba(15,23,42,0.96) 0%, rgba(2,6,23,0.92) 52%, rgba(10,10,20,0.96) 100%)',
+  },
+  {
+    id: 'dawn-cafe',
+    name: '새벽 카페',
+    description: '첫 커피 향처럼 잔잔하고 따뜻한 좌석.',
+    tags: ['감성', '딥워크'],
+    recommendedSound: 'Cafe Murmur',
+    recommendedTime: '새벽',
+    vibeLabel: '포근함',
+    activeMembers: 28,
+    presence: { focus: 18, break: 7, away: 3 },
+    previewImage: '/spaces/dawn-cafe.jpg',
+    previewGradient:
+      'radial-gradient(130% 120% at 18% 0%, rgba(251,191,36,0.38) 0%, rgba(15,23,42,0) 52%), linear-gradient(150deg, rgba(67,20,7,0.85) 0%, rgba(30,41,59,0.86) 58%, rgba(2,6,23,0.95) 100%)',
+  },
+  {
+    id: 'quiet-library',
+    name: '도서관',
+    description: '넘기는 종이 소리만 들리는 정돈된 책상.',
+    tags: ['저자극', '딥워크'],
+    recommendedSound: 'Deep White',
+    recommendedTime: '오후',
+    vibeLabel: '몰입',
+    activeMembers: 41,
+    presence: { focus: 31, break: 7, away: 3 },
+    previewImage: '/spaces/library.jpg',
+    previewGradient:
+      'radial-gradient(110% 100% at 20% 10%, rgba(14,116,144,0.36) 0%, rgba(30,41,59,0) 55%), linear-gradient(160deg, rgba(12,32,52,0.95) 0%, rgba(30,41,59,0.9) 52%, rgba(2,6,23,0.97) 100%)',
+  },
+  {
+    id: 'wave-sound',
+    name: '파도 소리',
+    description: '잔잔한 해변 위로 호흡을 고르는 공간.',
+    tags: ['움직임 적음', '감성'],
+    recommendedSound: 'Ocean Breath',
+    recommendedTime: '밤',
+    vibeLabel: '차분함',
+    activeMembers: 19,
+    presence: { focus: 13, break: 4, away: 2 },
+    previewImage: '/spaces/ocean.jpg',
+    previewGradient:
+      'radial-gradient(125% 125% at 75% 8%, rgba(56,189,248,0.4) 0%, rgba(15,23,42,0) 50%), linear-gradient(145deg, rgba(8,47,73,0.93) 0%, rgba(15,23,42,0.9) 55%, rgba(3,7,18,0.96) 100%)',
+  },
+  {
+    id: 'green-forest',
+    name: '숲',
+    description: '바람이 나뭇잎을 스치는 소리로 마음을 낮춥니다.',
+    tags: ['저자극', '움직임 적음'],
+    recommendedSound: 'Forest Hush',
+    recommendedTime: '오전',
+    vibeLabel: '맑음',
+    activeMembers: 26,
+    presence: { focus: 17, break: 6, away: 3 },
+    previewImage: '/spaces/forest.jpg',
+    previewGradient:
+      'radial-gradient(130% 110% at 15% 0%, rgba(74,222,128,0.3) 0%, rgba(2,6,23,0) 52%), linear-gradient(155deg, rgba(22,78,99,0.88) 0%, rgba(20,83,45,0.87) 48%, rgba(2,6,23,0.95) 100%)',
+  },
+  {
+    id: 'fireplace',
+    name: '벽난로',
+    description: '작은 불꽃이 주는 리듬으로 집중을 붙잡습니다.',
+    tags: ['감성', '저자극'],
+    recommendedSound: 'Fireplace',
+    recommendedTime: '밤',
+    vibeLabel: '온기',
+    activeMembers: 21,
+    presence: { focus: 15, break: 4, away: 2 },
+    previewImage: '/spaces/fireplace.jpg',
+    previewGradient:
+      'radial-gradient(125% 130% at 70% 0%, rgba(251,146,60,0.42) 0%, rgba(15,23,42,0) 55%), linear-gradient(150deg, rgba(69,26,3,0.9) 0%, rgba(31,41,55,0.86) 58%, rgba(2,6,23,0.95) 100%)',
+  },
+  {
+    id: 'city-night',
+    name: '도시 야경',
+    description: '유리창 너머 야경이 멀리 흐르는 고요한 밤.',
+    tags: ['딥워크', '감성'],
+    recommendedSound: 'Night Lo-fi',
+    recommendedTime: '심야',
+    vibeLabel: '고요함',
+    activeMembers: 34,
+    presence: { focus: 24, break: 7, away: 3 },
+    previewImage: '/spaces/city-night.jpg',
+    previewGradient:
+      'radial-gradient(120% 120% at 82% 12%, rgba(192,132,252,0.34) 0%, rgba(15,23,42,0) 50%), linear-gradient(160deg, rgba(12,18,48,0.96) 0%, rgba(30,41,59,0.9) 52%, rgba(2,6,23,0.98) 100%)',
+  },
+  {
+    id: 'snow-mountain',
+    name: '설산',
+    description: '차분한 공기와 선명한 수평선이 머리를 맑게 합니다.',
+    tags: ['움직임 적음', '딥워크'],
+    recommendedSound: 'Cold Wind',
+    recommendedTime: '새벽',
+    vibeLabel: '선명함',
+    activeMembers: 15,
+    presence: { focus: 11, break: 3, away: 1 },
+    previewImage: '/spaces/snow-mountain.jpg',
+    previewGradient:
+      'radial-gradient(120% 110% at 18% 0%, rgba(125,211,252,0.38) 0%, rgba(15,23,42,0) 52%), linear-gradient(165deg, rgba(15,23,42,0.9) 0%, rgba(30,41,59,0.9) 60%, rgba(2,6,23,0.97) 100%)',
+  },
+  {
+    id: 'sun-window',
+    name: '창가',
+    description: '햇살이 들어오는 간결한 책상, 부담 없는 시작.',
+    tags: ['저자극', '딥워크'],
+    recommendedSound: 'Soft Daylight',
+    recommendedTime: '오후',
+    vibeLabel: '가벼움',
+    activeMembers: 27,
+    presence: { focus: 18, break: 6, away: 3 },
+    previewImage: '/spaces/sun-window.jpg',
+    previewGradient:
+      'radial-gradient(115% 95% at 10% 0%, rgba(253,224,71,0.34) 0%, rgba(15,23,42,0) 52%), linear-gradient(150deg, rgba(30,58,138,0.86) 0%, rgba(30,41,59,0.86) 48%, rgba(2,6,23,0.96) 100%)',
+  },
+  {
+    id: 'outer-space',
+    name: '우주',
+    description: '별빛만 남긴 어둠 속에서 깊게 잠수합니다.',
+    tags: ['딥워크', '감성'],
+    recommendedSound: 'Deep Drone',
+    recommendedTime: '심야',
+    vibeLabel: '깊음',
+    activeMembers: 23,
+    presence: { focus: 17, break: 4, away: 2 },
+    previewImage: '/spaces/outer-space.jpg',
+    previewGradient:
+      'radial-gradient(120% 120% at 75% 15%, rgba(59,130,246,0.33) 0%, rgba(15,23,42,0) 56%), linear-gradient(155deg, rgba(15,23,42,0.98) 0%, rgba(49,46,129,0.85) 55%, rgba(2,6,23,0.98) 100%)',
+  },
+];
+
+export const getRoomById = (roomId: string) => {
+  return ROOM_THEMES.find((room) => room.id === roomId);
+};
+
+export const getRoomBackgroundStyle = (room: RoomTheme): CSSProperties => {
+  return {
+    backgroundImage: `${room.previewGradient}, url('${room.previewImage}')`,
+    backgroundSize: 'cover, cover',
+    backgroundPosition: 'center, center',
+  };
+};
--- a/src/entities/room/model/types.ts
+++ b/src/entities/room/model/types.ts
@@ -0,0 +1,21 @@
+export type RoomTag = '저자극' | '움직임 적음' | '딥워크' | '감성';
+
+export interface RoomPresence {
+  focus: number;
+  break: number;
+  away: number;
+}
+
+export interface RoomTheme {
+  id: string;
+  name: string;
+  description: string;
+  tags: RoomTag[];
+  recommendedSound: string;
+  recommendedTime: string;
+  vibeLabel: string;
+  activeMembers: number;
+  presence: RoomPresence;
+  previewImage: string;
+  previewGradient: string;
+}
--- a/src/entities/session/index.ts
+++ b/src/entities/session/index.ts
@@ -0,0 +1,2 @@
+export * from './model/mockSession';
+export * from './model/types';
--- a/src/entities/session/model/mockSession.ts
+++ b/src/entities/session/model/mockSession.ts
@@ -0,0 +1,68 @@
+import type {
+  CheckInPhrase,
+  FocusStatCard,
+  GoalChip,
+  ReactionOption,
+  SoundPreset,
+  TimerPreset,
+} from './types';
+
+export const TODAY_ONE_LINER = '오늘의 한 줄: 완벽보다 시작, 한 조각이면 충분해요.';
+
+export const GOAL_CHIPS: GoalChip[] = [
+  { id: 'mail-3', label: '메일 3개' },
+  { id: 'doc-1p', label: '문서 1p' },
+  { id: 'code-1-function', label: '코딩 1함수' },
+  { id: 'tidy-10m', label: '정리 10분' },
+  { id: 'reading-15m', label: '독서 15분' },
+  { id: 'resume-1paragraph', label: '이력서 1문단' },
+];
+
+export const CHECK_IN_PHRASES: CheckInPhrase[] = [
+  { id: 'arrived', text: '지금 들어왔어요' },
+  { id: 'sprint-25', text: '25분만 달릴게요' },
+  { id: 'on-break', text: '휴식 중' },
+  { id: 'back-focus', text: '다시 집중!' },
+  { id: 'slow-day', text: '오늘은 천천히' },
+];
+
+export const REACTION_OPTIONS: ReactionOption[] = [
+  { id: 'thumbs-up', emoji: '👍', label: '응원해요' },
+  { id: 'fire', emoji: '🔥', label: '집중 모드' },
+  { id: 'clap', emoji: '👏', label: '잘하고 있어요' },
+  { id: 'heart-hands', emoji: '🫶', label: '연결되어 있어요' },
+];
+
+export const SOUND_PRESETS: SoundPreset[] = [
+  { id: 'deep-white', label: 'Deep White' },
+  { id: 'rain-focus', label: 'Rain Focus' },
+  { id: 'cafe-work', label: 'Cafe Work' },
+  { id: 'ocean-calm', label: 'Ocean Calm' },
+  { id: 'fireplace', label: 'Fireplace' },
+  { id: 'silent', label: 'Silent' },
+];
+
+export const TIMER_PRESETS: TimerPreset[] = [
+  { id: '25-5', label: '25/5', focusMinutes: 25, breakMinutes: 5 },
+  { id: '50-10', label: '50/10', focusMinutes: 50, breakMinutes: 10 },
+  { id: '90-20', label: '90/20', focusMinutes: 90, breakMinutes: 20 },
+  { id: 'custom', label: '커스텀' },
+];
+
+export const DISTRACTION_DUMP_PLACEHOLDER = [
+  '디자인 QA 요청 확인',
+  '세금계산서 발행 메모',
+  '오후 미팅 질문 1개 정리',
+];
+
+export const TODAY_STATS: FocusStatCard[] = [
+  { id: 'today-focus', label: '오늘 집중 시간', value: '2h 40m', delta: '+35m' },
+  { id: 'today-cycles', label: '완료한 사이클', value: '5회', delta: '+1' },
+  { id: 'today-entry', label: '입장 횟수', value: '3회', delta: '유지' },
+];
+
+export const WEEKLY_STATS: FocusStatCard[] = [
+  { id: 'week-focus', label: '최근 7일 집중 시간', value: '14h 20m', delta: '+2h 10m' },
+  { id: 'week-best-day', label: '최고 몰입일', value: '수요일', delta: '3h 30m' },
+  { id: 'week-consistency', label: '연속 달성', value: '4일', delta: '+1일' },
+];
--- a/src/entities/session/model/types.ts
+++ b/src/entities/session/model/types.ts
@@ -0,0 +1,34 @@
+export interface GoalChip {
+  id: string;
+  label: string;
+}
+
+export interface CheckInPhrase {
+  id: string;
+  text: string;
+}
+
+export interface ReactionOption {
+  id: string;
+  emoji: string;
+  label: string;
+}
+
+export interface SoundPreset {
+  id: string;
+  label: string;
+}
+
+export interface TimerPreset {
+  id: string;
+  label: string;
+  focusMinutes?: number;
+  breakMinutes?: number;
+}
+
+export interface FocusStatCard {
+  id: string;
+  label: string;
+  value: string;
+  delta: string;
+}
--- a/src/entities/user/index.ts
+++ b/src/entities/user/index.ts
@@ -0,0 +1,2 @@
+export * from './model/mockUser';
+export * from './model/types';
--- a/src/entities/user/model/mockUser.ts
+++ b/src/entities/user/model/mockUser.ts
@@ -0,0 +1,7 @@
+import type { ViewerProfile } from './types';
+
+export const MOCK_VIEWER: ViewerProfile = {
+  id: 'viewer-1',
+  name: '민서',
+  avatarLabel: 'MS',
+};
--- a/src/entities/user/model/types.ts
+++ b/src/entities/user/model/types.ts
@@ -0,0 +1,5 @@
+export interface ViewerProfile {
+  id: string;
+  name: string;
+  avatarLabel: string;
+}
--- a/src/features/auth/hooks/useSocialLogin.ts
+++ b/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",
--- a/src/features/check-in/index.ts
+++ b/src/features/check-in/index.ts
@@ -0,0 +1,3 @@
+export * from './model/useCheckIn';
+export * from './ui/CompactCheckInChips';
+export * from './ui/CheckInChips';
--- a/src/features/check-in/model/useCheckIn.ts
+++ b/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,
+  };
+};
--- a/src/features/check-in/ui/CheckInChips.tsx
+++ b/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>
+  );
+};
--- a/src/features/check-in/ui/CompactCheckInChips.tsx
+++ b/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>
+  );
+};
--- a/src/features/custom-entry-modal/index.ts
+++ b/src/features/custom-entry-modal/index.ts
@@ -0,0 +1,2 @@
+export * from './model/useCustomEntryForm';
+export * from './ui/CustomEntryModal';
--- a/src/features/custom-entry-modal/model/useCustomEntryForm.ts
+++ b/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,
+  };
+};
--- a/src/features/custom-entry-modal/ui/CustomEntryModal.tsx
+++ b/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>
+  );
+};
--- a/src/features/distraction-dump/index.ts
+++ b/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';
--- a/src/features/distraction-dump/model/useDistractionDump.ts
+++ b/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,
+  };
+};
--- a/src/features/distraction-dump/model/useDistractionNotes.ts
+++ b/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,
+  };
+};
--- a/src/features/distraction-dump/ui/DistractionDumpNotesContent.tsx
+++ b/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>
+  );
+};
--- a/src/features/distraction-dump/ui/DistractionDumpPanel.tsx
+++ b/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>
+  );
+};
--- a/src/features/profile-menu/index.ts
+++ b/src/features/profile-menu/index.ts
@@ -0,0 +1 @@
+export * from './ui/ProfileMenu';
--- a/src/features/profile-menu/ui/ProfileMenu.tsx
+++ b/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>
+  );
+};
--- a/src/features/reactions/index.ts
+++ b/src/features/reactions/index.ts
@@ -0,0 +1,2 @@
+export * from './ui/ReactionIconRow';
+export * from './ui/ReactionButtons';
--- a/src/features/reactions/ui/ReactionButtons.tsx
+++ b/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>
+  );
+};
--- a/src/features/reactions/ui/ReactionIconRow.tsx
+++ b/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>
+  );
+};
--- a/src/features/restart-30s/index.ts
+++ b/src/features/restart-30s/index.ts
@@ -0,0 +1 @@
+export * from './ui/Restart30sAction';
--- a/src/features/restart-30s/model/useRestart30s.ts
+++ b/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,
+  };
+};
--- a/src/features/restart-30s/ui/Restart30sAction.tsx
+++ b/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>
+  );
+};
--- a/src/features/room-select/index.ts
+++ b/src/features/room-select/index.ts
@@ -0,0 +1,2 @@
+export * from './model/useRoomSelection';
+export * from './ui/RoomPreviewCard';
--- a/src/features/room-select/model/useRoomSelection.ts
+++ b/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,
+  };
+};
--- a/src/features/room-select/ui/RoomPreviewCard.tsx
+++ b/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>
+  );
+};
--- a/src/features/space/components/FocusRoomScreen.tsx
+++ b/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>
+  );
+};
+
--- a/src/features/space/components/RoomEntryForm.tsx
+++ b/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>
+  );
+};
+
--- a/src/features/space/hooks/useDashboardViewModel.ts
+++ b/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,
+  };
+};
+
--- a/src/features/space/hooks/useFocusRoomViewModel.ts
+++ b/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,
+  };
+};
--- a/src/features/space/hooks/useRoomEntry.ts
+++ b/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,
+  };
+};
--- a/src/features/space/index.ts
+++ b/src/features/space/index.ts
@@ -0,0 +1,4 @@
+export * from "./components/FocusRoomScreen";
+export * from "./components/RoomEntryForm";
+export * from "./hooks/useDashboardViewModel";
+
--- a/src/shared/config/settingsOptions.ts
+++ b/src/shared/config/settingsOptions.ts
@@ -0,0 +1,7 @@
+export const NOTIFICATION_INTENSITY_OPTIONS = ['조용함', '기본', '강함'] as const;
+
+export const DEFAULT_PRESET_OPTIONS = [
+  { id: 'balanced', label: 'Balanced 25/5 + Rain Focus' },
+  { id: 'deep-work', label: 'Deep Work 50/10 + Deep White' },
+  { id: 'gentle', label: 'Gentle 25/5 + Silent' },
+] as const;
--- a/src/shared/lib/cn.ts
+++ b/src/shared/lib/cn.ts
@@ -0,0 +1,3 @@
+export const cn = (...classes: Array<string | false | null | undefined>) => {
+  return classes.filter(Boolean).join(' ');
+};
--- a/src/shared/lib/useReducedMotion.ts
+++ b/src/shared/lib/useReducedMotion.ts
@@ -0,0 +1,23 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+const QUERY = '(prefers-reduced-motion: reduce)';
+
+export const useReducedMotion = () => {
+  const [reduced, setReduced] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(QUERY);
+    const update = () => setReduced(media.matches);
+
+    update();
+    media.addEventListener('change', update);
+
+    return () => {
+      media.removeEventListener('change', update);
+    };
+  }, []);
+
+  return reduced;
+};
--- a/src/shared/ui/Button.tsx
+++ b/src/shared/ui/Button.tsx
@@ -1,65 +1,65 @@
-import React, { ButtonHTMLAttributes } from 'react';
-import Link, { LinkProps } from 'next/link';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import Link from 'next/link';
+import { cn } from '@/shared/lib/cn';

-// 1. 버튼 Variant(스타일) 및 Size 타입 정의
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
 export type ButtonSize = 'sm' | 'md' | 'lg' | 'full';

-// 2. 공통 Props 인터페이스 정의 (HTML 버튼 속성 + Link 속성 혼합)
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface CommonButtonProps {
  variant?: ButtonVariant;
  size?: ButtonSize;
-  href?: string; // href가 주어지면 Next.js Link 컴포넌트로 렌더링
  className?: string;
-  children: React.ReactNode;
+  children: ReactNode;
 }

-/**
- * VibeRoom 공통 버튼 컴포넌트
- * (3-Color System 엄격 적용: #304d6d, #63adf2, #a7cced)
- */
-export const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
-  (
-    { variant = 'primary', size = 'md', href, className = '', children, ...props },
-    ref
-  ) => {
-    // 공통 베이스 스타일
-    const baseStyle = "inline-flex items-center justify-center font-bold rounded-xl transition-all duration-200";
+type LinkButtonProps = CommonButtonProps & {
+  href: string;
+};

-    // Variant별 테마 (VibeRoom 3-Color System)
-    const variants: Record<ButtonVariant, string> = {
-      primary: "bg-brand-primary text-white hover:bg-brand-primary/90 shadow-sm",
-      secondary: "bg-slate-50 text-brand-dark hover:bg-slate-100",
-      outline: "bg-white/50 text-brand-dark border border-brand-dark/20 hover:bg-white shadow-sm",
-      ghost: "bg-transparent text-brand-dark/80 hover:text-brand-primary",
-    };
+type NativeButtonProps = CommonButtonProps &
+  ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: undefined;
+  };

-    // 크기별 테마
-    const sizes: Record<ButtonSize, string> = {
-      sm: "px-4 py-2 text-sm",
-      md: "px-5 py-2.5 text-base",
-      lg: "px-8 py-4 text-lg",
-      full: "w-full py-3 px-4 text-base",
-    };
+export type ButtonProps = LinkButtonProps | NativeButtonProps;

-    const combinedClassName = `${baseStyle} ${variants[variant]} ${sizes[size]} ${className}`;
+const baseStyle =
+  'inline-flex items-center justify-center rounded-xl font-semibold transition-all duration-200 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300 disabled:cursor-not-allowed disabled:opacity-55';

-    // href 속성이 있으면 Next.js Link로 렌더링
-    if (href) {
-      return (
-        <Link href={href} className={combinedClassName} ref={ref as React.Ref<HTMLAnchorElement>}>
-          {children}
-        </Link>
-      );
-    }
+const variants: Record<ButtonVariant, string> = {
+  primary: 'bg-brand-primary text-white shadow-sm hover:bg-brand-primary/90',
+  secondary: 'bg-slate-100 text-brand-dark hover:bg-slate-200',
+  outline: 'bg-white/80 text-brand-dark ring-1 ring-slate-300 hover:bg-white',
+  ghost: 'bg-transparent text-brand-dark/80 hover:bg-brand-dark/8 hover:text-brand-dark',
+};

-    // 기본은 HTML Button
+const sizes: Record<ButtonSize, string> = {
+  sm: 'h-9 px-3 text-sm',
+  md: 'h-10 px-4 text-sm',
+  lg: 'h-12 px-5 text-base',
+  full: 'h-11 w-full px-4 text-sm',
+};
+
+export const Button = ({
+  variant = 'primary',
+  size = 'md',
+  className,
+  children,
+  ...props
+}: ButtonProps) => {
+  const style = cn(baseStyle, variants[variant], sizes[size], className);
+
+  if ('href' in props && props.href) {
    return (
-      <button className={combinedClassName} ref={ref as React.Ref<HTMLButtonElement>} {...props}>
+      <Link href={props.href} className={style}>
        {children}
-      </button>
+      </Link>
    );
  }
-);

-Button.displayName = 'Button';
+  return (
+    <button {...props} className={style}>
+      {children}
+    </button>
+  );
+};
--- a/src/shared/ui/Chip.tsx
+++ b/src/shared/ui/Chip.tsx
@@ -0,0 +1,42 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { cn } from '@/shared/lib/cn';
+
+type ChipTone = 'neutral' | 'accent' | 'muted';
+
+interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  active?: boolean;
+  tone?: ChipTone;
+  children: ReactNode;
+}
+
+const toneStyles: Record<ChipTone, string> = {
+  neutral:
+    'bg-white/10 text-white/90 ring-1 ring-white/20 hover:bg-white/16',
+  accent:
+    'bg-sky-300/25 text-sky-100 ring-1 ring-sky-200/55 hover:bg-sky-300/35',
+  muted:
+    'bg-slate-300/25 text-slate-100 ring-1 ring-slate-200/40 hover:bg-slate-300/32',
+};
+
+export const Chip = ({
+  active = false,
+  tone = 'neutral',
+  className,
+  children,
+  ...props
+}: ChipProps) => {
+  return (
+    <button
+      type="button"
+      {...props}
+      className={cn(
+        'inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-xs font-medium transition-colors duration-200 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200/80',
+        toneStyles[tone],
+        active && 'bg-sky-300/34 text-sky-50 ring-sky-100/85',
+        className,
+      )}
+    >
+      {children}
+    </button>
+  );
+};
--- a/src/shared/ui/Dropdown.tsx
+++ b/src/shared/ui/Dropdown.tsx
@@ -0,0 +1,102 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import Link from 'next/link';
+import { cn } from '@/shared/lib/cn';
+
+interface DropdownProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  align?: 'left' | 'right';
+}
+
+interface DropdownItemProps {
+  children: ReactNode;
+  href?: string;
+  onClick?: () => void;
+  danger?: boolean;
+}
+
+export const Dropdown = ({ trigger, children, align = 'right' }: DropdownProps) => {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const onPointerDown = (event: MouseEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+
+    const onEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', onPointerDown);
+    document.addEventListener('keydown', onEscape);
+
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown);
+      document.removeEventListener('keydown', onEscape);
+    };
+  }, [open]);
+
+  return (
+    <div ref={rootRef} className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen((current) => !current)}
+        className="rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70"
+      >
+        {trigger}
+      </button>
+
+      {open ? (
+        <div
+          onClick={() => setOpen(false)}
+          className={cn(
+            'absolute top-[calc(100%+0.5rem)] z-30 min-w-44 rounded-xl border border-white/15 bg-slate-950/95 p-1 shadow-2xl shadow-slate-950/70',
+            align === 'right' ? 'right-0' : 'left-0',
+          )}
+        >
+          {children}
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export const DropdownItem = ({
+  children,
+  href,
+  onClick,
+  danger = false,
+}: DropdownItemProps) => {
+  const className = cn(
+    'flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors',
+    danger
+      ? 'text-rose-200 hover:bg-rose-300/20'
+      : 'text-white/90 hover:bg-white/10 hover:text-white',
+  );
+
+  if (href) {
+    return (
+      <Link href={href} className={className}>
+        {children}
+      </Link>
+    );
+  }
+
+  return (
+    <button type="button" onClick={onClick} className={className}>
+      {children}
+    </button>
+  );
+};
--- a/src/shared/ui/GlassCard.tsx
+++ b/src/shared/ui/GlassCard.tsx
@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from 'react';
+import { cn } from '@/shared/lib/cn';
+
+interface GlassCardProps extends HTMLAttributes<HTMLDivElement> {
+  elevated?: boolean;
+}
+
+export const GlassCard = ({
+  elevated = false,
+  className,
+  children,
+  ...props
+}: GlassCardProps) => {
+  return (
+    <div
+      {...props}
+      className={cn(
+        'rounded-2xl border border-white/20 bg-slate-950/35 backdrop-blur-xl',
+        elevated && 'shadow-[0_24px_60px_rgba(15,23,42,0.42)]',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
--- a/src/shared/ui/Modal.tsx
+++ b/src/shared/ui/Modal.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { useEffect } from 'react';
+import { cn } from '@/shared/lib/cn';
+import { useReducedMotion } from '@/shared/lib/useReducedMotion';
+
+interface ModalProps {
+  isOpen: boolean;
+  title: string;
+  description?: string;
+  onClose: () => void;
+  children: ReactNode;
+  footer?: ReactNode;
+}
+
+export const Modal = ({
+  isOpen,
+  title,
+  description,
+  onClose,
+  children,
+  footer,
+}: ModalProps) => {
+  const reducedMotion = useReducedMotion();
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center">
+      <button
+        type="button"
+        aria-label="모달 닫기"
+        onClick={onClose}
+        className="absolute inset-0 bg-slate-950/78 backdrop-blur-sm"
+      />
+
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="custom-entry-modal-title"
+        className={cn(
+          'relative z-10 w-full max-w-3xl overflow-hidden rounded-3xl border border-white/20 bg-slate-950/92 shadow-[0_30px_100px_rgba(2,6,23,0.65)]',
+          reducedMotion
+            ? 'transition-none'
+            : 'transition-transform duration-300 ease-out motion-reduce:transition-none',
+        )}
+      >
+        <header className="border-b border-white/12 px-6 py-5 sm:px-7">
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <h2 id="custom-entry-modal-title" className="text-lg font-semibold text-white">
+                {title}
+              </h2>
+              {description ? (
+                <p className="mt-1 text-sm text-white/65">{description}</p>
+              ) : null}
+            </div>
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-lg border border-white/20 px-2.5 py-1.5 text-xs text-white/80 transition hover:bg-white/10 hover:text-white"
+            >
+              닫기
+            </button>
+          </div>
+        </header>
+
+        <div className="max-h-[68vh] overflow-y-auto px-6 py-5 sm:px-7">{children}</div>
+
+        {footer ? (
+          <footer className="border-t border-white/12 bg-slate-900/80 px-6 py-4 sm:px-7">{footer}</footer>
+        ) : null}
+      </div>
+    </div>
+  );
+};
--- a/src/shared/ui/Tabs.tsx
+++ b/src/shared/ui/Tabs.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { cn } from '@/shared/lib/cn';
+
+export interface TabOption {
+  value: string;
+  label: string;
+}
+
+interface TabsProps {
+  value: string;
+  options: TabOption[];
+  onChange: (value: string) => void;
+}
+
+export const Tabs = ({ value, options, onChange }: TabsProps) => {
+  return (
+    <div className="inline-flex w-full rounded-xl bg-white/6 p-1 ring-1 ring-white/15">
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          onClick={() => onChange(option.value)}
+          className={cn(
+            'flex-1 rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200 motion-reduce:transition-none',
+            option.value === value
+              ? 'bg-sky-300/22 text-sky-100'
+              : 'text-white/65 hover:bg-white/8 hover:text-white/90',
+          )}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+};
--- a/src/shared/ui/Toast.tsx
+++ b/src/shared/ui/Toast.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { cn } from '@/shared/lib/cn';
+
+interface ToastPayload {
+  title: string;
+  description?: string;
+}
+
+interface ToastItem extends ToastPayload {
+  id: number;
+}
+
+interface ToastContextValue {
+  pushToast: (payload: ToastPayload) => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+export const ToastProvider = ({ children }: { children: ReactNode }) => {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+
+  const pushToast = useCallback((payload: ToastPayload) => {
+    const id = Date.now() + Math.floor(Math.random() * 10000);
+
+    setToasts((current) => [...current, { id, ...payload }]);
+
+    window.setTimeout(() => {
+      setToasts((current) => current.filter((toast) => toast.id !== id));
+    }, 2400);
+  }, []);
+
+  const value = useMemo(() => ({ pushToast }), [pushToast]);
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <div className="pointer-events-none fixed bottom-4 right-4 z-[70] flex w-[min(92vw,340px)] flex-col gap-2">
+        {toasts.map((toast) => (
+          <div
+            key={toast.id}
+            className={cn(
+              'rounded-xl border border-white/15 bg-slate-950/92 px-4 py-3 text-sm text-white shadow-lg shadow-slate-950/60',
+              'animate-[toast-in_180ms_ease-out] motion-reduce:animate-none',
+            )}
+          >
+            <p className="font-medium">{toast.title}</p>
+            {toast.description ? (
+              <p className="mt-1 text-xs text-white/70">{toast.description}</p>
+            ) : null}
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+};
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+
+  if (!context) {
+    throw new Error('useToast must be used within ToastProvider');
+  }
+
+  return context;
+};
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -0,0 +1,7 @@
+export * from './Button';
+export * from './Chip';
+export * from './Dropdown';
+export * from './GlassCard';
+export * from './Modal';
+export * from './Tabs';
+export * from './Toast';
--- a/src/widgets/app-hub/index.ts
+++ b/src/widgets/app-hub/index.ts
@@ -0,0 +1 @@
+export * from './ui/AppHubWidget';
--- a/src/widgets/app-hub/ui/AppHubWidget.tsx
+++ b/src/widgets/app-hub/ui/AppHubWidget.tsx
@@ -0,0 +1,147 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { getRoomBackgroundStyle, ROOM_THEMES } from '@/entities/room';
+import {
+  GOAL_CHIPS,
+  SOUND_PRESETS,
+  TIMER_PRESETS,
+  TODAY_ONE_LINER,
+  type GoalChip,
+} from '@/entities/session';
+import { MOCK_VIEWER } from '@/entities/user';
+import { type CustomEntrySelection } from '@/features/custom-entry-modal';
+import { useRoomSelection } from '@/features/room-select';
+import { useToast } from '@/shared/ui';
+import { AppTopBar } from '@/widgets/app-top-bar/ui/AppTopBar';
+import { CustomEntryWidget } from '@/widgets/custom-entry-widget/ui/CustomEntryWidget';
+import { RoomsGalleryWidget } from '@/widgets/rooms-gallery-widget/ui/RoomsGalleryWidget';
+import { StartRitualWidget } from '@/widgets/start-ritual-widget/ui/StartRitualWidget';
+
+const buildSpaceQuery = (
+  roomId: string,
+  goalInput: string,
+  soundPresetId: string,
+  timerLabel: string,
+) => {
+  const params = new URLSearchParams({
+    room: roomId,
+    sound: soundPresetId,
+    timer: timerLabel,
+  });
+
+  const normalizedGoal = goalInput.trim();
+
+  if (normalizedGoal) {
+    params.set('goal', normalizedGoal);
+  }
+
+  return params.toString();
+};
+
+export const AppHubWidget = () => {
+  const router = useRouter();
+  const { pushToast } = useToast();
+  const { selectedRoom, selectedRoomId, selectRoom } = useRoomSelection();
+
+  const [goalInput, setGoalInput] = useState('');
+  const [selectedGoalId, setSelectedGoalId] = useState<string | null>(null);
+  const [isCustomEntryOpen, setCustomEntryOpen] = useState(false);
+
+  const enterSpace = (soundPresetId: string, timerLabel: string) => {
+    const query = buildSpaceQuery(
+      selectedRoomId,
+      goalInput,
+      soundPresetId,
+      timerLabel,
+    );
+
+    router.push(`/space?${query}`);
+  };
+
+  const handleGoalChipSelect = (chip: GoalChip) => {
+    setSelectedGoalId(chip.id);
+    setGoalInput(chip.label);
+  };
+
+  const handleGoalInputChange = (value: string) => {
+    setGoalInput(value);
+
+    if (selectedGoalId && value.trim() === '') {
+      setSelectedGoalId(null);
+    }
+  };
+
+  const handleQuickEnter = () => {
+    enterSpace(SOUND_PRESETS[0].id, TIMER_PRESETS[0].label);
+  };
+
+  const handleCustomEnter = (selection: CustomEntrySelection) => {
+    setCustomEntryOpen(false);
+    enterSpace(selection.soundId, selection.timerLabel);
+  };
+
+  const handleLogout = () => {
+    pushToast({
+      title: '로그아웃은 목업에서만 동작해요',
+      description: '실제 인증 로직은 연결하지 않았습니다.',
+    });
+  };
+
+  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 bg-slate-950/60" />
+      <div
+        aria-hidden
+        className="absolute inset-0 opacity-40"
+        style={{
+          backgroundImage:
+            "url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 2px)",
+          mixBlendMode: 'soft-light',
+        }}
+      />
+
+      <div className="relative z-10 flex min-h-screen flex-col">
+        <AppTopBar
+          user={MOCK_VIEWER}
+          oneLiner={TODAY_ONE_LINER}
+          onLogout={handleLogout}
+        />
+
+        <main className="mx-auto w-full max-w-7xl flex-1 px-4 pb-8 pt-6 sm:px-6 lg:px-8">
+          <div className="grid gap-6 xl:grid-cols-[minmax(320px,420px),1fr]">
+            <StartRitualWidget
+              goalInput={goalInput}
+              selectedGoalId={selectedGoalId}
+              goalChips={GOAL_CHIPS}
+              onGoalInputChange={handleGoalInputChange}
+              onGoalChipSelect={handleGoalChipSelect}
+              onQuickEnter={handleQuickEnter}
+              onOpenCustomEntry={() => setCustomEntryOpen(true)}
+            />
+
+            <RoomsGalleryWidget
+              rooms={ROOM_THEMES}
+              selectedRoomId={selectedRoomId}
+              onRoomSelect={selectRoom}
+            />
+          </div>
+        </main>
+      </div>
+
+      <CustomEntryWidget
+        isOpen={isCustomEntryOpen}
+        selectedRoomId={selectedRoomId}
+        onSelectRoom={selectRoom}
+        onClose={() => setCustomEntryOpen(false)}
+        onEnter={handleCustomEnter}
+      />
+    </div>
+  );
+};
--- a/src/widgets/app-top-bar/index.ts
+++ b/src/widgets/app-top-bar/index.ts
@@ -0,0 +1 @@
+export * from './ui/AppTopBar';
--- a/src/widgets/app-top-bar/ui/AppTopBar.tsx
+++ b/src/widgets/app-top-bar/ui/AppTopBar.tsx
@@ -0,0 +1,27 @@
+import type { ViewerProfile } from '@/entities/user';
+import { ProfileMenu } from '@/features/profile-menu';
+
+interface AppTopBarProps {
+  user: ViewerProfile;
+  oneLiner: string;
+  onLogout: () => void;
+}
+
+export const AppTopBar = ({ user, oneLiner, onLogout }: AppTopBarProps) => {
+  return (
+    <header className="sticky top-0 z-20 border-b border-white/10 bg-slate-950/35 px-4 py-3 backdrop-blur-lg sm:px-6">
+      <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4">
+        <div className="flex items-center gap-2">
+          <span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/30 bg-white/10 text-xs font-semibold text-white">
+            V
+          </span>
+          <p className="text-sm font-semibold tracking-tight text-white">VibeRoom</p>
+        </div>
+
+        <p className="hidden text-center text-sm text-white/75 md:block">{oneLiner}</p>
+
+        <ProfileMenu user={user} onLogout={onLogout} />
+      </div>
+    </header>
+  );
+};
--- a/src/widgets/custom-entry-widget/index.ts
+++ b/src/widgets/custom-entry-widget/index.ts
@@ -0,0 +1 @@
+export * from './ui/CustomEntryWidget';
--- a/src/widgets/custom-entry-widget/ui/CustomEntryWidget.tsx
+++ b/src/widgets/custom-entry-widget/ui/CustomEntryWidget.tsx
@@ -0,0 +1,30 @@
+import {
+  type CustomEntrySelection,
+  CustomEntryModal,
+} from '@/features/custom-entry-modal';
+
+interface CustomEntryWidgetProps {
+  isOpen: boolean;
+  selectedRoomId: string;
+  onSelectRoom: (roomId: string) => void;
+  onClose: () => void;
+  onEnter: (selection: CustomEntrySelection) => void;
+}
+
+export const CustomEntryWidget = ({
+  isOpen,
+  selectedRoomId,
+  onSelectRoom,
+  onClose,
+  onEnter,
+}: CustomEntryWidgetProps) => {
+  return (
+    <CustomEntryModal
+      isOpen={isOpen}
+      selectedRoomId={selectedRoomId}
+      onSelectRoom={onSelectRoom}
+      onClose={onClose}
+      onEnter={onEnter}
+    />
+  );
+};
--- a/src/widgets/notes-sheet/index.ts
+++ b/src/widgets/notes-sheet/index.ts
@@ -0,0 +1 @@
+export * from './ui/NotesSheetWidget';
--- a/src/widgets/notes-sheet/ui/NotesSheetWidget.tsx
+++ b/src/widgets/notes-sheet/ui/NotesSheetWidget.tsx
@@ -0,0 +1,37 @@
+import { DistractionDumpNotesContent } from '@/features/distraction-dump';
+
+interface NotesSheetWidgetProps {
+  onClose: () => void;
+  onNoteAdded?: (note: string) => void;
+  onNoteRemoved?: () => void;
+}
+
+export const NotesSheetWidget = ({
+  onClose,
+  onNoteAdded,
+  onNoteRemoved,
+}: NotesSheetWidgetProps) => {
+  return (
+    <aside className="fixed bottom-4 right-16 top-4 z-40 w-[min(92vw,340px)] animate-[sheet-in_220ms_ease-out] motion-reduce:animate-none">
+      <div className="flex h-full flex-col overflow-hidden rounded-2xl border border-white/20 bg-slate-950/72 shadow-[0_18px_60px_rgba(2,6,23,0.52)] backdrop-blur-xl">
+        <header className="flex items-center justify-between border-b border-white/12 px-4 py-4">
+          <h2 className="text-base font-semibold text-white">떠오른 생각</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-lg border border-white/20 px-2 py-1 text-xs text-white/75 transition hover:bg-white/12 hover:text-white"
+          >
+            X
+          </button>
+        </header>
+
+        <div className="flex-1 overflow-y-auto px-4 py-4">
+          <DistractionDumpNotesContent
+            onNoteAdded={onNoteAdded}
+            onNoteRemoved={onNoteRemoved}
+          />
+        </div>
+      </div>
+    </aside>
+  );
+};
--- a/src/widgets/quick-sheet/index.ts
+++ b/src/widgets/quick-sheet/index.ts
@@ -0,0 +1 @@
+export * from './ui/QuickSheetWidget';
--- a/src/widgets/quick-sheet/ui/QuickSheetWidget.tsx
+++ b/src/widgets/quick-sheet/ui/QuickSheetWidget.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import { useState } from 'react';
+
+interface QuickSheetWidgetProps {
+  onClose: () => void;
+}
+
+export const QuickSheetWidget = ({ onClose }: QuickSheetWidgetProps) => {
+  const [immersionMode, setImmersionMode] = useState(false);
+  const [minimalNotice, setMinimalNotice] = useState(false);
+
+  return (
+    <aside className="fixed bottom-4 right-16 top-4 z-40 w-[min(92vw,320px)] animate-[sheet-in_220ms_ease-out] motion-reduce:animate-none">
+      <div className="flex h-full flex-col overflow-hidden rounded-2xl border border-white/20 bg-slate-950/72 shadow-[0_18px_60px_rgba(2,6,23,0.52)] backdrop-blur-xl">
+        <header className="flex items-center justify-between border-b border-white/12 px-4 py-4">
+          <h2 className="text-base font-semibold text-white">Quick</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-lg border border-white/20 px-2 py-1 text-xs text-white/75 transition hover:bg-white/12 hover:text-white"
+          >
+            X
+          </button>
+        </header>
+
+        <div className="space-y-3 px-4 py-4">
+          <button
+            type="button"
+            role="switch"
+            aria-checked={immersionMode}
+            onClick={() => setImmersionMode((current) => !current)}
+            className="flex w-full items-center justify-between rounded-xl border border-white/16 bg-white/6 px-3 py-2 text-sm text-white/86"
+          >
+            <span>몰입 모드</span>
+            <span>{immersionMode ? 'ON' : 'OFF'}</span>
+          </button>
+
+          <button
+            type="button"
+            role="switch"
+            aria-checked={minimalNotice}
+            onClick={() => setMinimalNotice((current) => !current)}
+            className="flex w-full items-center justify-between rounded-xl border border-white/16 bg-white/6 px-3 py-2 text-sm text-white/86"
+          >
+            <span>알림 최소화</span>
+            <span>{minimalNotice ? 'ON' : 'OFF'}</span>
+          </button>
+
+          <p className="text-xs text-white/58">
+            빠른 옵션 UI 목업입니다. 실제 동작은 연결하지 않았습니다.
+          </p>
+        </div>
+      </div>
+    </aside>
+  );
+};
--- a/src/widgets/room-sheet/index.ts
+++ b/src/widgets/room-sheet/index.ts
@@ -0,0 +1 @@
+export * from './ui/RoomSheetWidget';
--- a/src/widgets/room-sheet/ui/RoomSheetWidget.tsx
+++ b/src/widgets/room-sheet/ui/RoomSheetWidget.tsx
@@ -0,0 +1,98 @@
+import type { RoomPresence } from '@/entities/room';
+import type { CheckInPhrase, ReactionOption } from '@/entities/session';
+import { CompactCheckInChips } from '@/features/check-in';
+import { ReactionIconRow } from '@/features/reactions';
+import { Chip } from '@/shared/ui';
+
+interface RoomSheetWidgetProps {
+  roomName: string;
+  activeMembers: number;
+  presence: RoomPresence;
+  checkInPhrases: CheckInPhrase[];
+  reactions: ReactionOption[];
+  lastCheckIn: string | null;
+  onClose: () => void;
+  onCheckIn: (message: string) => void;
+  onReaction: (reaction: ReactionOption) => void;
+}
+
+export const RoomSheetWidget = ({
+  roomName,
+  activeMembers,
+  presence,
+  checkInPhrases,
+  reactions,
+  lastCheckIn,
+  onClose,
+  onCheckIn,
+  onReaction,
+}: RoomSheetWidgetProps) => {
+  return (
+    <aside
+      className="fixed bottom-4 right-16 top-4 z-40 w-[min(92vw,340px)] animate-[sheet-in_220ms_ease-out] motion-reduce:animate-none"
+    >
+      <div className="flex h-full flex-col overflow-hidden rounded-2xl border border-white/20 bg-slate-950/72 shadow-[0_18px_60px_rgba(2,6,23,0.52)] backdrop-blur-xl">
+        <header className="space-y-3 border-b border-white/12 px-4 py-4">
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <h2 className="text-base font-semibold text-white">{roomName}</h2>
+              <p className="text-xs text-white/70">현재 {activeMembers}명 집중 중</p>
+            </div>
+
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-lg border border-white/20 px-2 py-1 text-xs text-white/75 transition hover:bg-white/12 hover:text-white"
+            >
+              X
+            </button>
+          </div>
+
+          <div className="flex flex-wrap gap-1.5">
+            <Chip tone="accent" className="!cursor-default !px-2 !py-1 text-[11px]">
+              Focus {presence.focus}
+            </Chip>
+            <Chip className="!cursor-default !px-2 !py-1 text-[11px]">
+              Break {presence.break}
+            </Chip>
+            <Chip className="!cursor-default !px-2 !py-1 text-[11px]">
+              Away {presence.away}
+            </Chip>
+          </div>
+
+          <div className="space-y-3 rounded-xl border border-white/12 bg-slate-900/45 p-3">
+            <div className="space-y-1">
+              <p className="text-[11px] font-medium uppercase tracking-[0.1em] text-white/58">
+                Check-in
+              </p>
+              <CompactCheckInChips
+                phrases={checkInPhrases}
+                onCheckIn={onCheckIn}
+                collapsedCount={3}
+              />
+            </div>
+
+            <div className="space-y-1">
+              <p className="text-[11px] font-medium uppercase tracking-[0.1em] text-white/58">
+                Reactions
+              </p>
+              <ReactionIconRow reactions={reactions} onReact={onReaction} />
+            </div>
+          </div>
+        </header>
+
+        <div className="flex-1 px-4 py-4">
+          <p className="text-xs text-white/70">
+            마지막 체크인:{' '}
+            <span className="font-medium text-white">
+              {lastCheckIn ?? '아직 체크인이 없습니다'}
+            </span>
+          </p>
+          <p className="mt-2 text-xs text-white/55">
+            채팅/사용자 리스트는 표시하지 않는 집중형 존재감 시트입니다.
+          </p>
+        </div>
+      </div>
+    </aside>
+  );
+};
--- a/src/widgets/rooms-gallery-widget/index.ts
+++ b/src/widgets/rooms-gallery-widget/index.ts
@@ -0,0 +1 @@
+export * from './ui/RoomsGalleryWidget';
--- a/src/widgets/rooms-gallery-widget/ui/RoomsGalleryWidget.tsx
+++ b/src/widgets/rooms-gallery-widget/ui/RoomsGalleryWidget.tsx
@@ -0,0 +1,35 @@
+import type { RoomTheme } from '@/entities/room';
+import { RoomPreviewCard } from '@/features/room-select';
+import { GlassCard } from '@/shared/ui';
+
+interface RoomsGalleryWidgetProps {
+  rooms: RoomTheme[];
+  selectedRoomId: string;
+  onRoomSelect: (roomId: string) => void;
+}
+
+export const RoomsGalleryWidget = ({
+  rooms,
+  selectedRoomId,
+  onRoomSelect,
+}: RoomsGalleryWidgetProps) => {
+  return (
+    <GlassCard elevated className="space-y-5 p-5 sm:p-6">
+      <div className="space-y-1">
+        <h2 className="text-xl font-semibold text-white">오늘의 공간</h2>
+        <p className="text-sm text-white/70">감정에 맞는 분위기 하나만 고르면 충분해요.</p>
+      </div>
+
+      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+        {rooms.map((room) => (
+          <RoomPreviewCard
+            key={room.id}
+            room={room}
+            selected={room.id === selectedRoomId}
+            onSelect={onRoomSelect}
+          />
+        ))}
+      </div>
+    </GlassCard>
+  );
+};
--- a/src/widgets/settings-panel/index.ts
+++ b/src/widgets/settings-panel/index.ts
@@ -0,0 +1 @@
+export * from './ui/SettingsPanelWidget';
--- a/src/widgets/settings-panel/ui/SettingsPanelWidget.tsx
+++ b/src/widgets/settings-panel/ui/SettingsPanelWidget.tsx
@@ -0,0 +1,110 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import {
+  DEFAULT_PRESET_OPTIONS,
+  NOTIFICATION_INTENSITY_OPTIONS,
+} from '@/shared/config/settingsOptions';
+import { cn } from '@/shared/lib/cn';
+
+export const SettingsPanelWidget = () => {
+  const [reduceMotion, setReduceMotion] = useState(false);
+  const [notificationIntensity, setNotificationIntensity] =
+    useState<(typeof NOTIFICATION_INTENSITY_OPTIONS)[number]>('기본');
+  const [defaultPresetId, setDefaultPresetId] = useState<
+    (typeof DEFAULT_PRESET_OPTIONS)[number]['id']
+  >(DEFAULT_PRESET_OPTIONS[0].id);
+
+  return (
+    <div className="min-h-screen bg-[radial-gradient(circle_at_80%_0%,rgba(34,211,238,0.16),transparent_48%),linear-gradient(170deg,#020617_0%,#111827_54%,#0f172a_100%)] text-white">
+      <div className="mx-auto w-full max-w-4xl px-4 pb-10 pt-6 sm:px-6">
+        <header className="mb-6 flex items-center justify-between rounded-xl border border-white/12 bg-white/6 px-4 py-3">
+          <h1 className="text-xl font-semibold">Settings</h1>
+          <Link
+            href="/app"
+            className="rounded-lg border border-white/24 px-3 py-1.5 text-xs text-white/85 transition hover:bg-white/10"
+          >
+            허브로
+          </Link>
+        </header>
+
+        <div className="space-y-4">
+          <section className="rounded-xl border border-white/15 bg-white/8 p-4">
+            <div className="flex items-center justify-between gap-3">
+              <div>
+                <h2 className="text-base font-semibold text-white">Reduce Motion</h2>
+                <p className="mt-1 text-sm text-white/70">
+                  전환 애니메이션을 최소화합니다. (UI 토글 목업)
+                </p>
+              </div>
+              <button
+                type="button"
+                role="switch"
+                aria-checked={reduceMotion}
+                onClick={() => setReduceMotion((current) => !current)}
+                className={cn(
+                  'inline-flex w-16 items-center rounded-full border px-1 py-1 transition-colors',
+                  reduceMotion
+                    ? 'border-sky-200/70 bg-sky-300/28'
+                    : 'border-white/30 bg-white/10',
+                )}
+              >
+                <span
+                  className={cn(
+                    'h-5 w-5 rounded-full bg-white transition-transform duration-200 motion-reduce:transition-none',
+                    reduceMotion ? 'translate-x-9' : 'translate-x-0',
+                  )}
+                />
+              </button>
+            </div>
+          </section>
+
+          <section className="rounded-xl border border-white/15 bg-white/8 p-4">
+            <h2 className="text-base font-semibold text-white">알림 강도</h2>
+            <p className="mt-1 text-sm text-white/70">집중 시작/종료 신호의 존재감을 선택합니다.</p>
+            <div className="mt-3 flex flex-wrap gap-2">
+              {NOTIFICATION_INTENSITY_OPTIONS.map((option) => (
+                <button
+                  key={option}
+                  type="button"
+                  onClick={() => setNotificationIntensity(option)}
+                  className={cn(
+                    'rounded-full border px-3 py-1.5 text-xs transition-colors',
+                    notificationIntensity === option
+                      ? 'border-sky-200/80 bg-sky-300/25 text-sky-50'
+                      : 'border-white/24 bg-white/8 text-white/82 hover:bg-white/14',
+                  )}
+                >
+                  {option}
+                </button>
+              ))}
+            </div>
+          </section>
+
+          <section className="rounded-xl border border-white/15 bg-white/8 p-4">
+            <h2 className="text-base font-semibold text-white">기본 프리셋</h2>
+            <p className="mt-1 text-sm text-white/70">입장 시 자동 선택될 추천 세트를 고릅니다.</p>
+            <div className="mt-3 space-y-2">
+              {DEFAULT_PRESET_OPTIONS.map((preset) => (
+                <button
+                  key={preset.id}
+                  type="button"
+                  onClick={() => setDefaultPresetId(preset.id)}
+                  className={cn(
+                    'w-full rounded-lg border px-3 py-2 text-left text-sm transition-colors',
+                    defaultPresetId === preset.id
+                      ? 'border-sky-200/75 bg-sky-300/20 text-sky-50'
+                      : 'border-white/18 bg-white/5 text-white/85 hover:bg-white/10',
+                  )}
+                >
+                  {preset.label}
+                </button>
+              ))}
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/src/widgets/space-shell/index.ts
+++ b/src/widgets/space-shell/index.ts
@@ -0,0 +1 @@
+export * from './ui/SpaceSkeletonWidget';
--- a/src/widgets/space-shell/ui/SpaceSkeletonWidget.tsx
+++ b/src/widgets/space-shell/ui/SpaceSkeletonWidget.tsx
@@ -0,0 +1,106 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import { getRoomBackgroundStyle, getRoomById, ROOM_THEMES } from '@/entities/room';
+import { SOUND_PRESETS } from '@/entities/session';
+import { cn } from '@/shared/lib/cn';
+import { SpaceTimerHudWidget } from '@/widgets/space-timer-hud';
+import { SpaceToolsDockWidget } from '@/widgets/space-tools-dock';
+
+export const SpaceSkeletonWidget = () => {
+  const searchParams = useSearchParams();
+
+  const roomId = searchParams.get('room') ?? ROOM_THEMES[0].id;
+  const goal = searchParams.get('goal') ?? '오늘은 한 조각만 집중해요';
+  const timerLabel = searchParams.get('timer') ?? '25/5';
+  const soundFromQuery = searchParams.get('sound');
+
+  const room = useMemo(() => getRoomById(roomId) ?? ROOM_THEMES[0], [roomId]);
+
+  const defaultSoundId =
+    SOUND_PRESETS.find((preset) => preset.id === soundFromQuery)?.id ??
+    SOUND_PRESETS[0].id;
+
+  const [selectedSoundId, setSelectedSoundId] = useState(defaultSoundId);
+
+  useEffect(() => {
+    setSelectedSoundId(defaultSoundId);
+  }, [defaultSoundId]);
+
+  return (
+    <div className="relative min-h-screen overflow-x-hidden overflow-y-hidden text-white">
+      <div
+        aria-hidden
+        className="absolute inset-0 w-full"
+        style={getRoomBackgroundStyle(room)}
+      />
+      <div aria-hidden className="absolute inset-0 w-full bg-slate-950/62" />
+      <div
+        aria-hidden
+        className="absolute inset-0 w-full opacity-35"
+        style={{
+          backgroundImage:
+            "url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 2px)",
+        }}
+      />
+
+      <div className="relative z-10 flex min-h-screen flex-col pr-14">
+        <header className="flex items-center justify-between border-b border-white/12 bg-slate-950/35 px-4 py-3 backdrop-blur-lg sm:px-6">
+          <div className="flex items-center gap-2">
+            <span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/30 bg-white/10 text-xs font-semibold">
+              V
+            </span>
+            <p className="text-sm font-semibold tracking-tight">VibeRoom</p>
+          </div>
+
+          <Link
+            href="/app"
+            className="rounded-lg border border-white/30 px-3 py-1.5 text-xs text-white/85 transition hover:bg-white/10"
+          >
+            허브로 돌아가기
+          </Link>
+        </header>
+
+        <main className="flex-1 px-4 pt-6 sm:px-6">
+          <div className="mx-auto w-full max-w-5xl">
+            <div className="space-y-1">
+              <p className="text-xs uppercase tracking-[0.14em] text-white/65">Current Room</p>
+              <p className="text-lg font-semibold text-white">{room.name}</p>
+              <p className="text-xs text-white/70">현재 {room.activeMembers}명 함께 집중 중</p>
+            </div>
+          </div>
+        </main>
+
+        <footer className="border-t border-white/12 bg-slate-950/42 px-4 py-3 backdrop-blur-md sm:px-6">
+          <div className="mx-auto flex w-full max-w-5xl flex-wrap gap-2">
+            {SOUND_PRESETS.map((preset) => (
+              <button
+                key={preset.id}
+                type="button"
+                onClick={() => setSelectedSoundId(preset.id)}
+                className={cn(
+                  'rounded-full border px-3 py-1.5 text-xs transition-colors',
+                  selectedSoundId === preset.id
+                    ? 'border-sky-200/75 bg-sky-300/25 text-sky-50'
+                    : 'border-white/24 bg-white/8 text-white/82 hover:bg-white/14',
+                )}
+              >
+                {preset.label}
+              </button>
+            ))}
+          </div>
+        </footer>
+      </div>
+
+      <SpaceTimerHudWidget timerLabel={timerLabel} goal={goal} />
+
+      <SpaceToolsDockWidget
+        roomName={room.name}
+        activeMembers={room.activeMembers}
+        presence={room.presence}
+      />
+    </div>
+  );
+};
--- a/src/widgets/space-timer-hud/index.ts
+++ b/src/widgets/space-timer-hud/index.ts
@@ -0,0 +1 @@
+export * from './ui/SpaceTimerHudWidget';
--- a/src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx
+++ b/src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx
@@ -0,0 +1,56 @@
+import { cn } from '@/shared/lib/cn';
+import { Restart30sAction } from '@/features/restart-30s';
+
+interface SpaceTimerHudWidgetProps {
+  timerLabel: string;
+  goal: string;
+  className?: string;
+}
+
+const HUD_ACTIONS = [
+  { id: 'start', label: '시작', icon: '▶' },
+  { id: 'pause', label: '일시정지', icon: '⏸' },
+  { id: 'reset', label: '리셋', icon: '↺' },
+] as const;
+
+export const SpaceTimerHudWidget = ({
+  timerLabel,
+  goal,
+  className,
+}: SpaceTimerHudWidgetProps) => {
+  return (
+    <div className={cn('pointer-events-none fixed inset-x-0 bottom-[4.7rem] z-20 px-4 pr-16 sm:px-6', className)}>
+      <div className="mx-auto w-full max-w-xl pointer-events-auto">
+        <section className="flex h-16 items-center justify-between gap-3 rounded-2xl border border-white/10 bg-black/25 px-3.5 backdrop-blur-sm">
+          <div className="min-w-0">
+            <div className="flex items-baseline gap-2">
+              <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-white/62">
+                Focus
+              </span>
+              <span className="text-2xl font-semibold tracking-tight text-white">25:00</span>
+              <span className="text-[11px] text-white/62">{timerLabel}</span>
+            </div>
+            <p className="truncate text-[11px] text-white/58">목표: {goal}</p>
+          </div>
+
+          <div className="flex items-center gap-2.5">
+            <div className="flex items-center gap-1.5">
+              {HUD_ACTIONS.map((action) => (
+                <button
+                  key={action.id}
+                  type="button"
+                  title={action.label}
+                  className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/15 bg-white/8 text-sm text-white/82 transition-colors hover:bg-white/14 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200/80"
+                >
+                  <span aria-hidden>{action.icon}</span>
+                  <span className="sr-only">{action.label}</span>
+                </button>
+              ))}
+            </div>
+            <Restart30sAction />
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+};
--- a/src/widgets/space-tools-dock/index.ts
+++ b/src/widgets/space-tools-dock/index.ts
@@ -0,0 +1 @@
+export * from './ui/SpaceToolsDockWidget';
--- a/src/widgets/space-tools-dock/model/useSpaceToolsDock.ts
+++ b/src/widgets/space-tools-dock/model/useSpaceToolsDock.ts
@@ -0,0 +1,23 @@
+'use client';
+
+import { useState } from 'react';
+
+export type SpaceToolPanel = 'room' | 'notes' | 'quick' | null;
+
+export const useSpaceToolsDock = () => {
+  const [activePanel, setActivePanel] = useState<SpaceToolPanel>(null);
+
+  const togglePanel = (panel: Exclude<SpaceToolPanel, null>) => {
+    setActivePanel((current) => (current === panel ? null : panel));
+  };
+
+  const closePanel = () => {
+    setActivePanel(null);
+  };
+
+  return {
+    activePanel,
+    togglePanel,
+    closePanel,
+  };
+};
--- a/src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx
+++ b/src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx
@@ -0,0 +1,105 @@
+'use client';
+
+import type { RoomPresence } from '@/entities/room';
+import { CHECK_IN_PHRASES, REACTION_OPTIONS } from '@/entities/session';
+import { useCheckIn } from '@/features/check-in';
+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 { useSpaceToolsDock } from '../model/useSpaceToolsDock';
+
+interface SpaceToolsDockWidgetProps {
+  roomName: string;
+  activeMembers: number;
+  presence: RoomPresence;
+}
+
+const TOOL_BUTTONS: Array<{
+  id: 'room' | 'notes' | 'quick';
+  icon: string;
+  label: string;
+}> = [
+  { id: 'room', icon: '👥', label: 'Room' },
+  { id: 'notes', icon: '📝', label: 'Notes' },
+  { id: 'quick', icon: '⚙️', label: 'Quick' },
+];
+
+export const SpaceToolsDockWidget = ({
+  roomName,
+  activeMembers,
+  presence,
+}: SpaceToolsDockWidgetProps) => {
+  const { pushToast } = useToast();
+  const { lastCheckIn, recordCheckIn } = useCheckIn();
+  const { activePanel, closePanel, togglePanel } = useSpaceToolsDock();
+
+  const handleCheckIn = (message: string) => {
+    recordCheckIn(message);
+    pushToast({ title: `체크인: ${message}` });
+  };
+
+  const handleReaction = (emoji: string) => {
+    pushToast({ title: `리액션: ${emoji}` });
+  };
+
+  return (
+    <>
+      {activePanel ? (
+        <button
+          type="button"
+          aria-label="시트 닫기"
+          onClick={closePanel}
+          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">
+        <div className="flex w-12 flex-col items-center gap-2 rounded-2xl border border-white/20 bg-slate-950/66 py-2 shadow-lg shadow-slate-950/60 backdrop-blur-xl">
+          {TOOL_BUTTONS.map((tool) => (
+            <button
+              key={tool.id}
+              type="button"
+              title={tool.label}
+              onClick={() => togglePanel(tool.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',
+              )}
+            >
+              <span aria-hidden>{tool.icon}</span>
+              <span className="sr-only">{tool.label}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {activePanel === 'room' ? (
+        <RoomSheetWidget
+          roomName={roomName}
+          activeMembers={activeMembers}
+          presence={presence}
+          checkInPhrases={CHECK_IN_PHRASES}
+          reactions={REACTION_OPTIONS}
+          lastCheckIn={lastCheckIn}
+          onClose={closePanel}
+          onCheckIn={handleCheckIn}
+          onReaction={(reaction) => handleReaction(reaction.emoji)}
+        />
+      ) : null}
+
+      {activePanel === 'notes' ? (
+        <NotesSheetWidget
+          onClose={closePanel}
+          onNoteAdded={(note) => pushToast({ title: `노트 추가: ${note}` })}
+          onNoteRemoved={() => pushToast({ title: '노트를 정리했어요' })}
+        />
+      ) : null}
+
+      {activePanel === 'quick' ? <QuickSheetWidget onClose={closePanel} /> : null}
+    </>
+  );
+};
--- a/src/widgets/start-ritual-widget/index.ts
+++ b/src/widgets/start-ritual-widget/index.ts
@@ -0,0 +1 @@
+export * from './ui/StartRitualWidget';
--- a/src/widgets/start-ritual-widget/ui/StartRitualWidget.tsx
+++ b/src/widgets/start-ritual-widget/ui/StartRitualWidget.tsx
@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import type { GoalChip } from '@/entities/session';
+import { Button, Chip, GlassCard } from '@/shared/ui';
+
+interface StartRitualWidgetProps {
+  goalInput: string;
+  selectedGoalId: string | null;
+  goalChips: GoalChip[];
+  onGoalInputChange: (value: string) => void;
+  onGoalChipSelect: (chip: GoalChip) => void;
+  onQuickEnter: () => void;
+  onOpenCustomEntry: () => void;
+}
+
+export const StartRitualWidget = ({
+  goalInput,
+  selectedGoalId,
+  goalChips,
+  onGoalInputChange,
+  onGoalChipSelect,
+  onQuickEnter,
+  onOpenCustomEntry,
+}: StartRitualWidgetProps) => {
+  const [isGoalOpen, setGoalOpen] = useState(true);
+
+  return (
+    <GlassCard elevated className="space-y-5 p-5 sm:p-6">
+      <div>
+        <h1 className="text-2xl font-semibold text-white">지금, 몰입을 시작해요</h1>
+        <p className="mt-2 text-sm leading-relaxed text-white/72">
+          공간은 들어가서 바꿔도 괜찮아요. 오늘은 한 조각만.
+        </p>
+      </div>
+
+      <section className="space-y-3">
+        <div className="flex items-center justify-between">
+          <label className="block text-xs font-medium uppercase tracking-[0.13em] text-white/65">
+            한 줄 메모(선택)
+          </label>
+          <button
+            type="button"
+            onClick={() => setGoalOpen((current) => !current)}
+            className="text-xs text-white/62 transition hover:text-white"
+          >
+            {isGoalOpen ? '접기' : '펼치기'}
+          </button>
+        </div>
+
+        {isGoalOpen ? (
+          <div className="space-y-3">
+            <input
+              value={goalInput}
+              onChange={(event) => onGoalInputChange(event.target.value)}
+              placeholder="이번 세션 딱 1가지만 (예: 견적서 1페이지)"
+              className="w-full rounded-xl border border-white/20 bg-slate-950/55 px-3.5 py-3 text-sm text-white placeholder:text-white/45 focus:border-sky-200/60 focus:outline-none"
+            />
+
+            <div className="flex flex-wrap gap-2">
+              {goalChips.map((chip) => (
+                <Chip
+                  key={chip.id}
+                  active={selectedGoalId === chip.id}
+                  onClick={() => onGoalChipSelect(chip)}
+                >
+                  {chip.label}
+                </Chip>
+              ))}
+            </div>
+          </div>
+        ) : null}
+      </section>
+
+      <section className="space-y-3">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end">
+          <Button
+            className="w-full px-6 sm:w-auto sm:min-w-[180px]"
+            onClick={onQuickEnter}
+          >
+            바로 입장
+          </Button>
+          <Button
+            variant="outline"
+            className="w-full sm:w-auto sm:min-w-[152px] !bg-white/6 !text-white/84 !ring-white/24 hover:!bg-white/12"
+            onClick={onOpenCustomEntry}
+          >
+            <span aria-hidden>⚙</span>
+            설정하고 입장
+          </Button>
+        </div>
+      </section>
+    </GlassCard>
+  );
+};
--- a/src/widgets/stats-overview/index.ts
+++ b/src/widgets/stats-overview/index.ts
@@ -0,0 +1 @@
+export * from './ui/StatsOverviewWidget';
--- a/src/widgets/stats-overview/ui/StatsOverviewWidget.tsx
+++ b/src/widgets/stats-overview/ui/StatsOverviewWidget.tsx
@@ -0,0 +1,59 @@
+import Link from 'next/link';
+import { TODAY_STATS, WEEKLY_STATS } from '@/entities/session';
+
+const StatSection = ({
+  title,
+  items,
+}: {
+  title: string;
+  items: Array<{ id: string; label: string; value: string; delta: string }>;
+}) => {
+  return (
+    <section className="space-y-3">
+      <h2 className="text-lg font-semibold text-white">{title}</h2>
+      <div className="grid gap-3 sm:grid-cols-3">
+        {items.map((item) => (
+          <article
+            key={item.id}
+            className="rounded-xl border border-white/16 bg-white/8 p-4"
+          >
+            <p className="text-xs text-white/62">{item.label}</p>
+            <p className="mt-2 text-xl font-semibold text-white">{item.value}</p>
+            <p className="mt-1 text-xs text-sky-200">{item.delta}</p>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export const StatsOverviewWidget = () => {
+  return (
+    <div className="min-h-screen bg-[radial-gradient(circle_at_20%_0%,rgba(56,189,248,0.18),transparent_45%),linear-gradient(170deg,#020617_0%,#0f172a_52%,#111827_100%)] text-white">
+      <div className="mx-auto w-full max-w-6xl px-4 pb-10 pt-6 sm:px-6">
+        <header className="mb-6 flex items-center justify-between rounded-xl border border-white/12 bg-white/6 px-4 py-3">
+          <h1 className="text-xl font-semibold">Stats</h1>
+          <Link
+            href="/app"
+            className="rounded-lg border border-white/24 px-3 py-1.5 text-xs text-white/85 transition hover:bg-white/10"
+          >
+            허브로
+          </Link>
+        </header>
+
+        <div className="space-y-6">
+          <StatSection title="오늘" items={TODAY_STATS} />
+          <StatSection title="최근 7일" items={WEEKLY_STATS} />
+
+          <section className="space-y-3">
+            <h2 className="text-lg font-semibold text-white">집중 흐름 그래프</h2>
+            <div className="rounded-xl border border-dashed border-white/25 bg-white/5 p-5">
+              <div className="h-52 rounded-lg border border-white/10 bg-[linear-gradient(180deg,rgba(148,163,184,0.08),rgba(148,163,184,0.02))]" />
+              <p className="mt-3 text-xs text-white/60">더미 그래프 플레이스홀더</p>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+};