feat(app-hub): 씬 중심 허브 화면으로 전면 리빌드

맥락: - /app 첫 화면의 정보량이 많아 LifeAt/Portal 같은 몰입형 경험과 거리가 있었습니다. - Start, 공간 선택, 메모 진입을 점진 노출 구조로 재정렬할 필요가 있었습니다. 변경사항: - AppHub를 데스크톱 2열(컨트롤/씬) 구조와 모바일 스택 구조로 재편했습니다. - Start CTA를 컴팩트 위계로 정리하고 커스텀 액션을 2순위 텍스트형으로 유지했습니다. - Room 영역을 선택 Hero 1개 + 추천 썸네일 스트립 + 더보기 시트 구조로 전면 변경했습니다. - 최근 생각은 단일 진입점 + 인박스 시트로 통합하고 localStorage 기반 thought inbox를 추가했습니다. - /space 종료 동선에 세션 요약 시트(최근 메모 3개)를 연결해 허브 복귀 흐름을 정리했습니다. - AppHub 기본 비주얼 모드를 cinematic으로 고정하고 배경 오버레이를 가독성 중심으로 재조정했습니다. 검증: - npx tsc --noEmit - npm run build 세션-상태: 씬 중심 허브 리빌드와 메모/시트 기반 점진 노출 구조 반영 완료 세션-다음: 실제 사용자 테스트 후 카드/텍스트 밀도 미세 조정 세션-리스크: 실디바이스 대비(특히 저사양 모바일)에서 배경/블러 렌더링 비용 확인 필요
2026-03-01 20:06:57 +09:00
parent 85488f542e
commit 47e80e59d2
20 changed files with 1034 additions and 131 deletions
--- a/src/entities/room/model/rooms.ts
+++ b/src/entities/room/model/rooms.ts
@@ -1,6 +1,16 @@
 import type { CSSProperties } from 'react';
 import type { RoomTheme } from './types';

+const HUB_CURATION_ORDER = [
+  'quiet-library',
+  'rain-window',
+  'dawn-cafe',
+  'green-forest',
+  'fireplace',
+] as const;
+
+const HUB_RECOMMENDED_ROOM_COUNT = 3;
+
 export const ROOM_THEMES: RoomTheme[] = [
  {
    id: 'rain-window',
@@ -228,3 +238,40 @@ export const getRoomBackgroundStyle = (room: RoomTheme): CSSProperties => {
    backgroundPosition: 'center, center',
  };
 };
+
+const uniqueByRoomId = (rooms: Array<RoomTheme | undefined>) => {
+  const seen = new Set<string>();
+
+  return rooms.filter((room): room is RoomTheme => {
+    if (!room || seen.has(room.id)) {
+      return false;
+    }
+
+    seen.add(room.id);
+    return true;
+  });
+};
+
+export const getHubRoomSections = (
+  rooms: RoomTheme[],
+  selectedRoomId: string,
+  recommendedCount = HUB_RECOMMENDED_ROOM_COUNT,
+) => {
+  const roomById = new Map(rooms.map((room) => [room.id, room] as const));
+  const selectedRoom = roomById.get(selectedRoomId);
+  const curatedRooms = HUB_CURATION_ORDER.map((id) => roomById.get(id));
+
+  const recommendedRooms = uniqueByRoomId([
+    selectedRoom,
+    ...curatedRooms,
+    ...rooms,
+  ]).slice(0, recommendedCount);
+
+  const recommendedRoomIds = new Set(recommendedRooms.map((room) => room.id));
+  const allRooms = [...recommendedRooms, ...rooms.filter((room) => !recommendedRoomIds.has(room.id))];
+
+  return {
+    recommendedRooms,
+    allRooms,
+  };
+};
--- a/src/entities/session/index.ts
+++ b/src/entities/session/index.ts
@@ -1,2 +1,3 @@
 export * from './model/mockSession';
 export * from './model/types';
+export * from './model/useThoughtInbox';
--- a/src/entities/session/model/mockSession.ts
+++ b/src/entities/session/model/mockSession.ts
@@ -2,6 +2,7 @@ import type {
  CheckInPhrase,
  FocusStatCard,
  GoalChip,
+  RecentThought,
  ReactionOption,
  SoundPreset,
  TimerPreset,
@@ -66,3 +67,30 @@ export const WEEKLY_STATS: FocusStatCard[] = [
  { id: 'week-best-day', label: '최고 몰입일', value: '수요일', delta: '3h 30m' },
  { id: 'week-consistency', label: '연속 달성', value: '4일', delta: '+1일' },
 ];
+
+export const RECENT_THOUGHTS: RecentThought[] = [
+  {
+    id: 'thought-1',
+    text: '내일 미팅 전에 제안서 첫 문단만 다시 다듬기',
+    roomName: '도서관',
+    capturedAt: '방금 전',
+  },
+  {
+    id: 'thought-2',
+    text: '기획 문서의 핵심 흐름을 한 문장으로 정리해두기',
+    roomName: '비 오는 창가',
+    capturedAt: '24분 전',
+  },
+  {
+    id: 'thought-3',
+    text: '오후에 확인할 이슈 번호만 메모하고 지금 작업 복귀',
+    roomName: '숲',
+    capturedAt: '1시간 전',
+  },
+  {
+    id: 'thought-4',
+    text: '리뷰 코멘트는 오늘 17시 이후에 한 번에 처리',
+    roomName: '벽난로',
+    capturedAt: '어제',
+  },
+];
--- a/src/entities/session/model/types.ts
+++ b/src/entities/session/model/types.ts
@@ -32,3 +32,10 @@ export interface FocusStatCard {
  value: string;
  delta: string;
 }
+
+export interface RecentThought {
+  id: string;
+  text: string;
+  roomName: string;
+  capturedAt: string;
+}
--- a/src/entities/session/model/useThoughtInbox.ts
+++ b/src/entities/session/model/useThoughtInbox.ts
@@ -0,0 +1,107 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { RecentThought } from './types';
+
+const THOUGHT_INBOX_STORAGE_KEY = 'viberoom:thought-inbox:v1';
+const MAX_THOUGHT_INBOX_ITEMS = 40;
+
+const readStoredThoughts = () => {
+  if (typeof window === 'undefined') {
+    return [];
+  }
+
+  const raw = window.localStorage.getItem(THOUGHT_INBOX_STORAGE_KEY);
+
+  if (!raw) {
+    return [];
+  }
+
+  try {
+    const parsed = JSON.parse(raw);
+
+    if (!Array.isArray(parsed)) {
+      return [];
+    }
+
+    return parsed.filter((thought): thought is RecentThought => {
+      return (
+        thought &&
+        typeof thought.id === 'string' &&
+        typeof thought.text === 'string' &&
+        typeof thought.roomName === 'string' &&
+        typeof thought.capturedAt === 'string'
+      );
+    });
+  } catch {
+    return [];
+  }
+};
+
+const persistThoughts = (thoughts: RecentThought[]) => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  window.localStorage.setItem(THOUGHT_INBOX_STORAGE_KEY, JSON.stringify(thoughts));
+};
+
+export const useThoughtInbox = () => {
+  const [thoughts, setThoughts] = useState<RecentThought[]>(() => readStoredThoughts());
+
+  useEffect(() => {
+    persistThoughts(thoughts);
+  }, [thoughts]);
+
+  useEffect(() => {
+    const handleStorage = (event: StorageEvent) => {
+      if (event.key !== THOUGHT_INBOX_STORAGE_KEY) {
+        return;
+      }
+
+      setThoughts(readStoredThoughts());
+    };
+
+    window.addEventListener('storage', handleStorage);
+
+    return () => {
+      window.removeEventListener('storage', handleStorage);
+    };
+  }, []);
+
+  const addThought = useCallback((text: string, roomName: string) => {
+    const trimmedText = text.trim();
+
+    if (!trimmedText) {
+      return;
+    }
+
+    setThoughts((current) => {
+      const next: RecentThought[] = [
+        {
+          id: `thought-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`,
+          text: trimmedText,
+          roomName,
+          capturedAt: '방금 전',
+        },
+        ...current,
+      ].slice(0, MAX_THOUGHT_INBOX_ITEMS);
+
+      return next;
+    });
+  }, []);
+
+  const clearThoughts = useCallback(() => {
+    setThoughts([]);
+  }, []);
+
+  const recentThoughts = useMemo(() => thoughts.slice(0, 3), [thoughts]);
+
+  return {
+    thoughts,
+    recentThoughts,
+    thoughtCount: thoughts.length,
+    addThought,
+    clearThoughts,
+  };
+};
--- a/src/features/room-select/ui/RoomPreviewCard.tsx
+++ b/src/features/room-select/ui/RoomPreviewCard.tsx
@@ -1,26 +1,44 @@
 import { getRoomCardBackgroundStyle, type RoomTheme } from '@/entities/room';
+import type { AppHubVisualMode } from '@/shared/config/appHubVisualMode';
 import { cn } from '@/shared/lib/cn';

 interface RoomPreviewCardProps {
  room: RoomTheme;
+  visualMode: AppHubVisualMode;
+  variant?: 'hero' | 'compact';
+  className?: string;
  selected: boolean;
  onSelect: (roomId: string) => void;
 }

 export const RoomPreviewCard = ({
  room,
+  visualMode,
+  variant = 'hero',
+  className,
  selected,
  onSelect,
 }: RoomPreviewCardProps) => {
+  const cinematic = visualMode === 'cinematic';
+  const compact = variant === 'compact';
+
  return (
    <button
      type="button"
      onClick={() => onSelect(room.id)}
      className={cn(
-        'group relative h-[248px] overflow-hidden rounded-2xl border p-4 text-left transition-all duration-250 motion-reduce:transition-none',
+        'group relative overflow-hidden rounded-3xl border text-left transition-all duration-250 motion-reduce:transition-none',
+        compact
+          ? 'h-[112px] min-w-[164px] snap-start p-2.5 sm:min-w-0 sm:aspect-[4/3]'
+          : 'h-[338px] p-3 sm:h-[420px] sm:p-4',
        selected
-          ? 'border-brand-dark/28 shadow-[0_0_0_1px_rgba(48,77,109,0.18)]'
-          : 'border-brand-dark/16 hover:border-brand-dark/28',
+          ? cinematic
+            ? 'border-sky-200/44 shadow-[0_0_0_1px_rgba(186,230,253,0.34),0_20px_50px_rgba(2,6,23,0.32)]'
+            : 'border-brand-dark/28 shadow-[0_0_0_1px_rgba(48,77,109,0.18),0_16px_40px_rgba(15,23,42,0.16)]'
+          : cinematic
+            ? 'border-white/16 hover:border-white/28'
+            : 'border-brand-dark/16 hover:border-brand-dark/26',
+        className,
      )}
    >
      <div
@@ -28,39 +46,59 @@ export const RoomPreviewCard = ({
        className="absolute inset-0"
        style={getRoomCardBackgroundStyle(room)}
      />
-      <div aria-hidden className="absolute inset-0 bg-slate-900/28" />
-      <div aria-hidden className="absolute inset-0 bg-[linear-gradient(to_top,rgba(2,6,23,0.64),rgba(2,6,23,0.2))]" />
+      <div
+        aria-hidden
+        className={cn(
+          'absolute inset-0',
+          cinematic ? 'bg-slate-950/32' : 'bg-slate-900/20',
+        )}
+      />
+      <div
+        aria-hidden
+        className={cn(
+          'absolute inset-0',
+          cinematic
+            ? 'bg-[linear-gradient(to_top,rgba(2,6,23,0.86),rgba(2,6,23,0.42),rgba(2,6,23,0.06))]'
+            : 'bg-[linear-gradient(to_top,rgba(2,6,23,0.58),rgba(2,6,23,0.12))]',
+        )}
+      />

-      <div className="relative flex h-full flex-col justify-between space-y-3 rounded-xl border border-white/20 bg-slate-950/22 p-3 backdrop-blur-[1.5px]">
-        <div>
-          <h3 className="text-base font-semibold text-white">{room.name}</h3>
-          <p className="mt-1 text-xs text-white/82">{room.description}</p>
-        </div>
+      <div
+        className={cn(
+          'relative flex h-full rounded-2xl',
+          cinematic
+            ? 'border border-white/14 bg-slate-950/16'
+            : 'border border-white/16 bg-slate-950/10',
+          compact ? 'items-end p-2.5' : 'items-end p-3 sm:p-4',
+        )}
+      >
+        {selected ? (
+          <span
+            className={cn(
+              'absolute left-3 top-3 inline-flex items-center rounded-full border px-2 py-1 text-[10px] font-medium',
+              cinematic
+                ? 'border-white/26 bg-slate-950/42 text-white/78'
+                : 'border-white/52 bg-white/70 text-brand-dark/74',
+            )}
+          >
+            선택됨
+          </span>
+        ) : null}

-        <div className="flex flex-wrap gap-2">
-          {room.tags.map((tag) => (
-            <span
-              key={tag}
-              className="inline-flex items-center gap-1 rounded-full bg-white/16 px-3 py-1.5 text-xs font-medium text-white/92 ring-1 ring-white/22"
-            >
-              {tag}
-            </span>
-          ))}
-        </div>
-
-        <div className="space-y-2">
-          <p className="text-xs text-white/84">
-            추천 사운드: <span className="font-medium text-white">{room.recommendedSound}</span>
-          </p>
-          <div className="flex flex-wrap gap-2">
-            <span className="inline-flex items-center gap-1 rounded-full bg-white/14 px-3 py-1.5 text-xs font-medium text-white/90 ring-1 ring-white/22">
-              추천 시간 · {room.recommendedTime}
-            </span>
-            <span className="inline-flex items-center gap-1 rounded-full bg-white/14 px-3 py-1.5 text-xs font-medium text-white/90 ring-1 ring-white/22">
-              지금 분위기 · {room.vibeLabel}
-            </span>
+        {compact ? (
+          <div className="w-full rounded-lg bg-slate-950/44 px-2.5 py-2">
+            <p className="truncate text-sm font-semibold text-white">{room.name}</p>
+            <p className="mt-0.5 truncate text-[11px] text-white/70">{room.vibeLabel}</p>
          </div>
-        </div>
+        ) : (
+          <div className="w-full max-w-[440px] rounded-2xl border border-white/14 bg-slate-950/46 px-4 py-3 backdrop-blur-md">
+            <p className="text-[11px] uppercase tracking-[0.16em] text-white/56">Selected Space</p>
+            <h3 className="mt-1 text-2xl font-semibold tracking-tight text-white sm:text-[2rem]">
+              {room.name}
+            </h3>
+            <p className="mt-1 text-sm text-white/74">{room.description}</p>
+          </div>
+        )}
      </div>
    </button>
  );
--- a/src/shared/config/appHubVisualMode.ts
+++ b/src/shared/config/appHubVisualMode.ts
@@ -0,0 +1,20 @@
+export type AppHubVisualMode = 'light' | 'cinematic';
+
+export const DEFAULT_APP_HUB_VISUAL_MODE: AppHubVisualMode = 'cinematic';
+
+export const APP_HUB_VISUAL_OPTIONS = [
+  {
+    id: 'light',
+    label: 'A안 · 라이트 감성',
+    description: '밝고 정돈된 무드',
+  },
+  {
+    id: 'cinematic',
+    label: 'B안 · 무드 시네마틱',
+    description: '깊고 몰입적인 무드',
+  },
+] as const satisfies ReadonlyArray<{
+  id: AppHubVisualMode;
+  label: string;
+  description: string;
+}>;
--- a/src/widgets/app-hub/ui/AppHubWidget.tsx
+++ b/src/widgets/app-hub/ui/AppHubWidget.tsx
@@ -8,16 +8,24 @@ import {
  SOUND_PRESETS,
  TIMER_PRESETS,
  TODAY_ONE_LINER,
+  useThoughtInbox,
  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 {
+  DEFAULT_APP_HUB_VISUAL_MODE,
+  type AppHubVisualMode,
+} from '@/shared/config/appHubVisualMode';
+import { cn } from '@/shared/lib/cn';
 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';
+import { ThoughtInboxSheet } from '@/widgets/thought-inbox-sheet';
+import { ThoughtSummaryEntryWidget } from '@/widgets/thought-summary-entry';

 const buildSpaceQuery = (
  roomId: string,
@@ -43,6 +51,7 @@ const buildSpaceQuery = (
 export const AppHubWidget = () => {
  const router = useRouter();
  const { pushToast } = useToast();
+  const { thoughts, thoughtCount, clearThoughts } = useThoughtInbox();
  const { selectedRoom, selectedRoomId, selectRoom } = useRoomSelection(
    ROOM_THEMES[0].id,
  );
@@ -50,6 +59,10 @@ export const AppHubWidget = () => {
  const [goalInput, setGoalInput] = useState('');
  const [selectedGoalId, setSelectedGoalId] = useState<string | null>(null);
  const [isCustomEntryOpen, setCustomEntryOpen] = useState(false);
+  const [isThoughtInboxOpen, setThoughtInboxOpen] = useState(false);
+
+  const visualMode: AppHubVisualMode = DEFAULT_APP_HUB_VISUAL_MODE;
+  const cinematic = visualMode === 'cinematic';

  const enterSpace = (soundPresetId: string, timerLabel: string) => {
    const query = buildSpaceQuery(
@@ -95,50 +108,85 @@ export const AppHubWidget = () => {
    <div className="relative min-h-screen overflow-hidden text-white">
      <div
        aria-hidden
-        className="absolute inset-0 scale-[1.04] blur-[18px]"
+        className={cn(
+          'absolute inset-0',
+          cinematic && 'scale-[1.01]',
+        )}
        style={{
          ...getRoomCardBackgroundStyle(selectedRoom),
-          filter: 'brightness(1.05) saturate(0.9)',
+          filter: cinematic
+            ? 'brightness(0.86) saturate(1.06) contrast(1.03)'
+            : 'brightness(0.94) saturate(0.96)',
        }}
      />
      <div
        aria-hidden
-        className="absolute inset-0 bg-[radial-gradient(circle_at_14%_0%,rgba(255,255,255,0.54),transparent_48%),radial-gradient(circle_at_86%_18%,rgba(255,255,255,0.36),transparent_46%),linear-gradient(165deg,rgba(248,250,252,0.26)_0%,rgba(226,232,240,0.22)_52%,rgba(203,213,225,0.3)_100%)]"
+        className={cn(
+          'absolute inset-0',
+          cinematic
+            ? 'bg-[linear-gradient(180deg,rgba(2,6,23,0.22)_0%,rgba(2,6,23,0.34)_50%,rgba(2,6,23,0.52)_100%)]'
+            : 'bg-[linear-gradient(180deg,rgba(248,250,252,0.44)_0%,rgba(241,245,249,0.22)_42%,rgba(15,23,42,0.3)_100%)]',
+        )}
      />
      <div
        aria-hidden
-        className="absolute inset-0 opacity-[0.14]"
+        className={cn(
+          'absolute inset-0',
+          cinematic ? 'opacity-[0.12]' : 'opacity-[0.06]',
+        )}
        style={{
          backgroundImage:
-            "url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 2px)",
+            "url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 2px)",
          mixBlendMode: 'soft-light',
        }}
      />
+      <div
+        aria-hidden
+        className="absolute inset-0 bg-[radial-gradient(circle_at_50%_74%,transparent_12%,rgba(2,6,23,0.32)_100%)]"
+      />

      <div className="relative z-10 flex min-h-screen flex-col">
        <AppTopBar
          user={MOCK_VIEWER}
          oneLiner={TODAY_ONE_LINER}
          onLogout={handleLogout}
+          visualMode={visualMode}
+          thoughtCount={thoughtCount}
+          onOpenThoughtInbox={() => setThoughtInboxOpen(true)}
+          onOpenBilling={() => router.push('/settings')}
        />

-        <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)}
-            />
+        <main className="mx-auto w-full max-w-6xl flex-1 px-4 pb-8 pt-5 sm:px-6 sm:pt-6 lg:px-8 lg:pb-10">
+          <div className="grid gap-4 lg:grid-cols-[minmax(0,360px)_minmax(0,1fr)] lg:gap-5">
+            <section className="order-1">
+              <StartRitualWidget
+                visualMode={visualMode}
+                goalInput={goalInput}
+                selectedGoalId={selectedGoalId}
+                goalChips={GOAL_CHIPS}
+                onGoalInputChange={handleGoalInputChange}
+                onGoalChipSelect={handleGoalChipSelect}
+                onQuickEnter={handleQuickEnter}
+                onOpenCustomEntry={() => setCustomEntryOpen(true)}
+              />
+            </section>

-            <RoomsGalleryWidget
-              rooms={ROOM_THEMES}
-              selectedRoomId={selectedRoomId}
-              onRoomSelect={selectRoom}
-            />
+            <section className="order-2 lg:row-span-2">
+              <RoomsGalleryWidget
+                visualMode={visualMode}
+                rooms={ROOM_THEMES}
+                selectedRoomId={selectedRoomId}
+                onRoomSelect={selectRoom}
+              />
+            </section>
+
+            <section className="order-3">
+              <ThoughtSummaryEntryWidget
+                visualMode={visualMode}
+                thoughtCount={thoughtCount}
+                onOpen={() => setThoughtInboxOpen(true)}
+              />
+            </section>
          </div>
        </main>
      </div>
@@ -150,6 +198,16 @@ export const AppHubWidget = () => {
        onClose={() => setCustomEntryOpen(false)}
        onEnter={handleCustomEnter}
      />
+
+      <ThoughtInboxSheet
+        isOpen={isThoughtInboxOpen}
+        thoughts={thoughts}
+        onClose={() => setThoughtInboxOpen(false)}
+        onClear={() => {
+          clearThoughts();
+          pushToast({ title: '메모 인박스를 비웠어요' });
+        }}
+      />
    </div>
  );
 };
--- a/src/widgets/app-top-bar/ui/AppTopBar.tsx
+++ b/src/widgets/app-top-bar/ui/AppTopBar.tsx
@@ -1,23 +1,101 @@
 import { MembershipTierBadge, type ViewerProfile } from '@/entities/user';
+import type { AppHubVisualMode } from '@/shared/config/appHubVisualMode';
+import { cn } from '@/shared/lib/cn';
 import { ProfileMenu } from '@/features/profile-menu';

 interface AppTopBarProps {
  user: ViewerProfile;
  oneLiner: string;
  onLogout: () => void;
+  visualMode?: AppHubVisualMode;
+  thoughtCount?: number;
+  onOpenThoughtInbox?: () => void;
+  onOpenBilling?: () => void;
 }

-export const AppTopBar = ({ user, oneLiner, onLogout }: AppTopBarProps) => {
+export const AppTopBar = ({
+  user,
+  oneLiner,
+  onLogout,
+  visualMode = 'light',
+  thoughtCount = 0,
+  onOpenThoughtInbox,
+  onOpenBilling,
+}: AppTopBarProps) => {
+  const cinematic = visualMode === 'cinematic';
+  const thoughtCountLabel = thoughtCount > 99 ? '99+' : `${thoughtCount}`;
+
  return (
-    <header className="sticky top-0 z-20 border-b border-brand-dark/12 bg-white/78 px-4 py-3 text-brand-dark backdrop-blur-md 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">
-          <p className="text-sm font-semibold tracking-tight text-brand-dark">VibeRoom</p>
+    <header className="relative z-20 px-4 pt-4 sm:px-6 lg:px-8">
+      <div
+        className={cn(
+          'mx-auto flex w-full max-w-6xl items-center justify-between gap-3 rounded-2xl border px-3.5 py-2.5 backdrop-blur-xl sm:px-4',
+          cinematic
+            ? 'border-white/18 bg-slate-950/44 text-white shadow-[0_16px_44px_rgba(2,6,23,0.36)]'
+            : 'border-brand-dark/12 bg-white/80 text-brand-dark shadow-[0_14px_40px_rgba(15,23,42,0.12)]',
+        )}
+      >
+        <div className="min-w-0">
+          <p
+            className={cn(
+              'text-sm font-semibold tracking-tight',
+              cinematic ? 'text-white/94' : 'text-brand-dark',
+            )}
+          >
+            VibeRoom
+          </p>
+          <p
+            className={cn(
+              'mt-0.5 hidden truncate text-xs sm:block',
+              cinematic ? 'text-white/62' : 'text-brand-dark/56',
+            )}
+          >
+            {oneLiner}
+          </p>
        </div>

-        <p className="hidden text-center text-sm text-brand-dark/64 md:block">{oneLiner}</p>
-
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2.5 sm:gap-3">
+          {onOpenBilling ? (
+            <button
+              type="button"
+              onClick={onOpenBilling}
+              className={cn(
+                'hidden text-xs font-medium transition-colors md:inline-flex',
+                cinematic
+                  ? 'text-white/62 hover:text-white/90'
+                  : 'text-brand-dark/56 hover:text-brand-dark/84',
+              )}
+            >
+              PRO 기능 보기
+            </button>
+          ) : null}
+          {onOpenThoughtInbox ? (
+            <button
+              type="button"
+              onClick={onOpenThoughtInbox}
+              className={cn(
+                'inline-flex h-8 items-center gap-1.5 rounded-full border px-2.5 text-[11px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75 sm:h-9 sm:px-3 sm:text-xs',
+                cinematic
+                  ? 'border-white/22 bg-white/10 text-white/86 hover:bg-white/16'
+                  : 'border-brand-dark/14 bg-white/72 text-brand-dark/80 hover:bg-white/90',
+              )}
+            >
+              <span aria-hidden>📝</span>
+              <span className="hidden sm:inline">메모</span>
+              {thoughtCount > 0 ? (
+                <span
+                  className={cn(
+                    'inline-flex min-w-[1.2rem] items-center justify-center rounded-full px-1.5 py-0.5 text-[10px] font-semibold',
+                    cinematic
+                      ? 'bg-sky-200/20 text-sky-100'
+                      : 'bg-brand-primary/14 text-brand-primary/86',
+                  )}
+                >
+                  {thoughtCountLabel}
+                </span>
+              ) : null}
+            </button>
+          ) : null}
          <MembershipTierBadge tier={user.membershipTier} />
          <ProfileMenu user={user} onLogout={onLogout} />
        </div>
--- a/src/widgets/rooms-gallery-widget/ui/RoomCatalogSheet.tsx
+++ b/src/widgets/rooms-gallery-widget/ui/RoomCatalogSheet.tsx
@@ -0,0 +1,132 @@
+import type { RoomTheme } from '@/entities/room';
+import type { AppHubVisualMode } from '@/shared/config/appHubVisualMode';
+import { cn } from '@/shared/lib/cn';
+import { Button } from '@/shared/ui';
+
+interface RoomCatalogSheetProps {
+  isOpen: boolean;
+  visualMode: AppHubVisualMode;
+  rooms: RoomTheme[];
+  selectedRoomId: string;
+  onClose: () => void;
+  onSelectRoom: (roomId: string) => void;
+}
+
+export const RoomCatalogSheet = ({
+  isOpen,
+  visualMode,
+  rooms,
+  selectedRoomId,
+  onClose,
+  onSelectRoom,
+}: RoomCatalogSheetProps) => {
+  const cinematic = visualMode === 'cinematic';
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label="공간 목록 닫기"
+        onClick={onClose}
+        className={cn(
+          'fixed inset-0 z-40 backdrop-blur-[1px]',
+          cinematic ? 'bg-slate-950/40' : 'bg-slate-950/24',
+        )}
+      />
+
+      <aside className="fixed inset-x-0 bottom-0 z-50 mx-auto w-full max-w-4xl px-4 pb-4 sm:px-6 sm:pb-6">
+        <div
+          className={cn(
+            'overflow-hidden rounded-3xl border shadow-[0_28px_90px_rgba(15,23,42,0.3)] backdrop-blur-xl',
+            cinematic
+              ? 'border-white/14 bg-slate-950/82'
+              : 'border-brand-dark/12 bg-[linear-gradient(160deg,rgba(248,250,252,0.95)_0%,rgba(226,232,240,0.9)_52%,rgba(203,213,225,0.92)_100%)]',
+          )}
+        >
+          <header
+            className={cn(
+              'flex items-center justify-between px-5 py-4 sm:px-6',
+              cinematic ? 'border-b border-white/12' : 'border-b border-brand-dark/12',
+            )}
+          >
+            <div>
+              <h2 className={cn('text-base font-semibold', cinematic ? 'text-white' : 'text-brand-dark')}>
+                전체 공간
+              </h2>
+              <p className={cn('mt-0.5 text-xs', cinematic ? 'text-white/56' : 'text-brand-dark/56')}>
+                공간 이름과 분위기를 보고 선택해보세요.
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={onClose}
+              className={cn(
+                'rounded-lg border px-2.5 py-1.5 text-xs transition',
+                cinematic
+                  ? 'border-white/18 bg-white/8 text-white/76 hover:bg-white/14 hover:text-white'
+                  : 'border-brand-dark/16 bg-white/66 text-brand-dark/72 hover:bg-white hover:text-brand-dark',
+              )}
+            >
+              닫기
+            </button>
+          </header>
+
+          <div className="max-h-[62vh] overflow-y-auto px-5 py-4 sm:px-6">
+            <ul className="space-y-2.5">
+              {rooms.map((room) => {
+                const selected = room.id === selectedRoomId;
+
+                return (
+                  <li
+                    key={room.id}
+                    className={cn(
+                      'rounded-2xl border px-4 py-3',
+                      cinematic
+                        ? 'border-white/12 bg-white/6'
+                        : 'border-brand-dark/12 bg-white/66',
+                    )}
+                  >
+                    <div className="flex items-start justify-between gap-3">
+                      <div>
+                        <p className={cn('text-sm font-semibold', cinematic ? 'text-white' : 'text-brand-dark')}>
+                          {room.name}
+                        </p>
+                        <p className={cn('mt-1 text-xs', cinematic ? 'text-white/72' : 'text-brand-dark/64')}>
+                          {room.description}
+                        </p>
+                        <p className={cn('mt-1 text-[11px]', cinematic ? 'text-white/56' : 'text-brand-dark/56')}>
+                          {room.vibeLabel} · {room.recommendedSound} · {room.recommendedTime}
+                        </p>
+                      </div>
+                      <Button
+                        size="sm"
+                        variant={selected ? 'secondary' : 'outline'}
+                        className={cn(
+                          '!h-8 whitespace-nowrap',
+                          cinematic &&
+                            (selected
+                              ? '!bg-sky-100 !text-slate-900'
+                              : '!bg-white/8 !text-white/84 !ring-white/20 hover:!bg-white/14'),
+                        )}
+                        onClick={() => {
+                          onSelectRoom(room.id);
+                          onClose();
+                        }}
+                      >
+                        {selected ? '선택됨' : '선택'}
+                      </Button>
+                    </div>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        </div>
+      </aside>
+    </>
+  );
+};
--- a/src/widgets/rooms-gallery-widget/ui/RoomsGalleryWidget.tsx
+++ b/src/widgets/rooms-gallery-widget/ui/RoomsGalleryWidget.tsx
@@ -1,38 +1,104 @@
-import type { RoomTheme } from '@/entities/room';
+import { useState } from 'react';
+import { getHubRoomSections, type RoomTheme } from '@/entities/room';
 import { RoomPreviewCard } from '@/features/room-select';
-import { GlassCard } from '@/shared/ui';
+import type { AppHubVisualMode } from '@/shared/config/appHubVisualMode';
+import { cn } from '@/shared/lib/cn';
+import { RoomCatalogSheet } from './RoomCatalogSheet';

 interface RoomsGalleryWidgetProps {
+  visualMode: AppHubVisualMode;
  rooms: RoomTheme[];
  selectedRoomId: string;
  onRoomSelect: (roomId: string) => void;
 }

 export const RoomsGalleryWidget = ({
+  visualMode,
  rooms,
  selectedRoomId,
  onRoomSelect,
 }: RoomsGalleryWidgetProps) => {
+  const [isCatalogOpen, setCatalogOpen] = useState(false);
+  const cinematic = visualMode === 'cinematic';
+  const selectedRoom = rooms.find((room) => room.id === selectedRoomId) ?? rooms[0];
+  const { recommendedRooms, allRooms } = getHubRoomSections(rooms, selectedRoom.id, 5);
+
  return (
-    <GlassCard
-      elevated
-      className="space-y-5 border-brand-dark/12 bg-white/78 p-5 text-brand-dark backdrop-blur-md sm:p-6"
-    >
-      <div className="space-y-1">
-        <h2 className="text-xl font-semibold text-brand-dark">오늘의 공간</h2>
-        <p className="text-sm text-brand-dark/68">감정에 맞는 분위기 하나만 고르면 충분해요.</p>
+    <section className="space-y-3.5">
+      <div className="flex items-end justify-between gap-3">
+        <div>
+          <p
+            className={cn(
+              'text-[11px] uppercase tracking-[0.14em]',
+              cinematic ? 'text-white/52' : 'text-brand-dark/48',
+            )}
+          >
+            Scene
+          </p>
+          <h2
+            className={cn(
+              'mt-1 text-xl font-semibold tracking-tight',
+              cinematic ? 'text-white' : 'text-brand-dark',
+            )}
+          >
+            오늘의 공간
+          </h2>
+        </div>
+        <button
+          type="button"
+          onClick={() => setCatalogOpen(true)}
+          className={cn(
+            'text-xs font-medium transition-colors',
+            cinematic
+              ? 'text-white/56 hover:text-white/84'
+              : 'text-brand-dark/56 hover:text-brand-dark/84',
+          )}
+        >
+          더 보기
+        </button>
      </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>
+      <RoomPreviewCard
+        room={selectedRoom}
+        visualMode={visualMode}
+        variant="hero"
+        selected
+        onSelect={onRoomSelect}
+      />
+
+      <section className="space-y-2.5">
+        <h3
+          className={cn(
+            'text-xs font-medium tracking-[0.06em]',
+            cinematic ? 'text-white/66' : 'text-brand-dark/60',
+          )}
+        >
+          추천 공간
+        </h3>
+        <div className="-mx-1 snap-x overflow-x-auto px-1 sm:mx-0 sm:overflow-visible sm:px-0">
+          <div className="flex gap-3 sm:grid sm:grid-cols-5">
+            {recommendedRooms.map((room) => (
+              <RoomPreviewCard
+                key={`recommended-${room.id}`}
+                room={room}
+                visualMode={visualMode}
+                variant="compact"
+                selected={room.id === selectedRoomId}
+                onSelect={onRoomSelect}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <RoomCatalogSheet
+        isOpen={isCatalogOpen}
+        visualMode={visualMode}
+        rooms={allRooms}
+        selectedRoomId={selectedRoomId}
+        onClose={() => setCatalogOpen(false)}
+        onSelectRoom={onRoomSelect}
+      />
+    </section>
  );
 };
--- a/src/widgets/space-exit-summary/index.ts
+++ b/src/widgets/space-exit-summary/index.ts
@@ -0,0 +1 @@
+export * from './ui/SpaceExitSummarySheet';
--- a/src/widgets/space-exit-summary/ui/SpaceExitSummarySheet.tsx
+++ b/src/widgets/space-exit-summary/ui/SpaceExitSummarySheet.tsx
@@ -0,0 +1,86 @@
+import type { RecentThought } from '@/entities/session';
+import { Button } from '@/shared/ui';
+
+interface SpaceExitSummarySheetProps {
+  isOpen: boolean;
+  roomName: string;
+  goal: string;
+  timerLabel: string;
+  recentThoughts: RecentThought[];
+  onContinue: () => void;
+  onMoveToHub: () => void;
+}
+
+export const SpaceExitSummarySheet = ({
+  isOpen,
+  roomName,
+  goal,
+  timerLabel,
+  recentThoughts,
+  onContinue,
+  onMoveToHub,
+}: SpaceExitSummarySheetProps) => {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label="세션 요약 닫기"
+        onClick={onContinue}
+        className="fixed inset-0 z-40 bg-slate-950/38 backdrop-blur-[2px]"
+      />
+
+      <aside className="fixed inset-x-0 bottom-0 z-50 mx-auto w-full max-w-2xl px-4 pb-4 sm:px-6 sm:pb-6">
+        <div className="overflow-hidden rounded-3xl border border-white/16 bg-slate-950/78 shadow-[0_28px_90px_rgba(2,6,23,0.58)] backdrop-blur-xl">
+          <header className="border-b border-white/12 px-5 py-4 sm:px-6">
+            <p className="text-xs uppercase tracking-[0.12em] text-white/52">Session Summary</p>
+            <h2 className="mt-1 text-lg font-semibold text-white">오늘의 집중을 정리해볼까요?</h2>
+            <p className="mt-1 text-sm text-white/66">
+              {roomName} · {timerLabel}
+            </p>
+          </header>
+
+          <div className="space-y-4 px-5 py-4 sm:px-6">
+            <section>
+              <p className="text-xs uppercase tracking-[0.08em] text-white/52">세션 목표</p>
+              <p className="mt-1 text-sm text-white/86">{goal}</p>
+            </section>
+
+            <section>
+              <p className="text-xs uppercase tracking-[0.08em] text-white/52">떠오른 생각 3개</p>
+              {recentThoughts.length === 0 ? (
+                <p className="mt-2 rounded-2xl border border-white/12 bg-white/5 px-3 py-2 text-sm text-white/66">
+                  이번 세션에 저장된 메모가 아직 없어요.
+                </p>
+              ) : (
+                <ul className="mt-2 space-y-2">
+                  {recentThoughts.map((thought) => (
+                    <li
+                      key={thought.id}
+                      className="rounded-2xl border border-white/12 bg-white/6 px-3 py-2.5"
+                    >
+                      <p className="text-sm text-white/88">{thought.text}</p>
+                      <p className="mt-1 text-[11px] text-white/56">
+                        {thought.roomName} · {thought.capturedAt}
+                      </p>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </section>
+          </div>
+
+          <footer className="flex items-center justify-end gap-2 border-t border-white/12 bg-white/5 px-5 py-3.5 sm:px-6">
+            <Button variant="ghost" className="!text-white/78 hover:!text-white" onClick={onContinue}>
+              계속 집중
+            </Button>
+            <Button onClick={onMoveToHub}>허브로 이동</Button>
+          </footer>
+        </div>
+      </aside>
+    </>
+  );
+};
--- a/src/widgets/space-shell/ui/SpaceSkeletonWidget.tsx
+++ b/src/widgets/space-shell/ui/SpaceSkeletonWidget.tsx
@@ -1,17 +1,21 @@
 'use client';

-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
 import { useSearchParams } from 'next/navigation';
 import { getRoomBackgroundStyle, getRoomById, ROOM_THEMES } from '@/entities/room';
-import { SOUND_PRESETS } from '@/entities/session';
+import { SOUND_PRESETS, useThoughtInbox, type RecentThought } from '@/entities/session';
 import { useImmersionMode } from '@/features/immersion-mode';
 import { cn } from '@/shared/lib/cn';
 import { SpaceChromeWidget } from '@/widgets/space-chrome';
+import { SpaceExitSummarySheet } from '@/widgets/space-exit-summary';
 import { SpaceTimerHudWidget } from '@/widgets/space-timer-hud';
 import { SpaceToolsDockWidget } from '@/widgets/space-tools-dock';

 export const SpaceSkeletonWidget = () => {
+  const router = useRouter();
  const searchParams = useSearchParams();
+  const { addThought } = useThoughtInbox();

  const roomId = searchParams.get('room') ?? ROOM_THEMES[0].id;
  const goal = searchParams.get('goal') ?? '오늘은 한 조각만 집중해요';
@@ -20,10 +24,32 @@ export const SpaceSkeletonWidget = () => {

  const room = useMemo(() => getRoomById(roomId) ?? ROOM_THEMES[0], [roomId]);
  const { isImmersionMode, toggleImmersionMode, exitImmersionMode } = useImmersionMode();
+  const [isExitSummaryOpen, setExitSummaryOpen] = useState(false);
+  const [sessionThoughts, setSessionThoughts] = useState<RecentThought[]>([]);
  const initialSoundPresetId =
    SOUND_PRESETS.find((preset) => preset.id === soundFromQuery)?.id ??
    SOUND_PRESETS[0].id;

+  const handleExitRequested = () => {
+    setExitSummaryOpen(true);
+    if (isImmersionMode) {
+      exitImmersionMode();
+    }
+  };
+
+  const handleThoughtCaptured = (note: string) => {
+    addThought(note, room.name);
+    setSessionThoughts((current) => [
+      {
+        id: `session-thought-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`,
+        text: note,
+        roomName: room.name,
+        capturedAt: '방금 전',
+      },
+      ...current,
+    ]);
+  };
+
  return (
    <div className="relative min-h-screen overflow-x-hidden overflow-y-hidden text-white">
      <div
@@ -77,7 +103,7 @@ export const SpaceSkeletonWidget = () => {
          roomName={room.name}
          vibeLabel={room.vibeLabel}
          isImmersionMode={isImmersionMode}
-          onExitRequested={exitImmersionMode}
+          onExitRequested={handleExitRequested}
        />

        <main className="flex-1" />
@@ -96,6 +122,17 @@ export const SpaceSkeletonWidget = () => {
        initialSoundPresetId={initialSoundPresetId}
        isImmersionMode={isImmersionMode}
        onToggleImmersionMode={toggleImmersionMode}
+        onThoughtCaptured={handleThoughtCaptured}
+      />
+
+      <SpaceExitSummarySheet
+        isOpen={isExitSummaryOpen}
+        roomName={room.name}
+        goal={goal}
+        timerLabel={timerLabel}
+        recentThoughts={sessionThoughts.slice(0, 3)}
+        onContinue={() => setExitSummaryOpen(false)}
+        onMoveToHub={() => router.push('/app')}
      />
    </div>
  );
--- a/src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx
+++ b/src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx
@@ -20,6 +20,7 @@ interface SpaceToolsDockWidgetProps {
  initialSoundPresetId?: string;
  isImmersionMode: boolean;
  onToggleImmersionMode: () => void;
+  onThoughtCaptured?: (note: string) => void;
 }

 const TOOL_BUTTONS: Array<{
@@ -40,6 +41,7 @@ export const SpaceToolsDockWidget = ({
  initialSoundPresetId,
  isImmersionMode,
  onToggleImmersionMode,
+  onThoughtCaptured,
 }: SpaceToolsDockWidgetProps) => {
  const { pushToast } = useToast();
  const { lastCheckIn, recordCheckIn } = useCheckIn();
@@ -183,7 +185,10 @@ export const SpaceToolsDockWidget = ({
      {activePanel === 'notes' ? (
        <NotesSheetWidget
          onClose={handleClosePanel}
-          onNoteAdded={(note) => pushToast({ title: `노트 추가: ${note}` })}
+          onNoteAdded={(note) => {
+            pushToast({ title: `노트 추가: ${note}` });
+            onThoughtCaptured?.(note);
+          }}
          onNoteRemoved={() => pushToast({ title: '노트를 정리했어요' })}
        />
      ) : null}
--- a/src/widgets/start-ritual-widget/ui/StartRitualWidget.tsx
+++ b/src/widgets/start-ritual-widget/ui/StartRitualWidget.tsx
@@ -1,7 +1,10 @@
 import type { GoalChip } from '@/entities/session';
+import type { AppHubVisualMode } from '@/shared/config/appHubVisualMode';
+import { cn } from '@/shared/lib/cn';
 import { Button, Chip, GlassCard } from '@/shared/ui';

 interface StartRitualWidgetProps {
+  visualMode: AppHubVisualMode;
  goalInput: string;
  selectedGoalId: string | null;
  goalChips: GoalChip[];
@@ -12,6 +15,7 @@ interface StartRitualWidgetProps {
 }

 export const StartRitualWidget = ({
+  visualMode,
  goalInput,
  selectedGoalId,
  goalChips,
@@ -20,60 +24,99 @@ export const StartRitualWidget = ({
  onQuickEnter,
  onOpenCustomEntry,
 }: StartRitualWidgetProps) => {
+  const cinematic = visualMode === 'cinematic';
+
  return (
    <GlassCard
      elevated
-      className="space-y-5 border-brand-dark/12 bg-white/78 p-5 text-brand-dark backdrop-blur-md sm:p-6"
+      className={cn(
+        'space-y-4 p-4 sm:p-5',
+        cinematic
+          ? 'border-white/16 bg-slate-950/48 text-white shadow-[0_20px_44px_rgba(2,6,23,0.36)] backdrop-blur-xl'
+          : 'border-brand-dark/10 bg-white/80 text-brand-dark shadow-[0_16px_40px_rgba(15,23,42,0.12)] backdrop-blur-md',
+      )}
    >
-      <div>
-        <h1 className="text-2xl font-semibold text-brand-dark">지금, 몰입을 시작해요</h1>
-        <p className="mt-2 text-sm leading-relaxed text-brand-dark/68">
-          공간은 들어가서 바꿔도 괜찮아요. 오늘은 한 조각만.
+      <div className="space-y-1.5">
+        <p
+          className={cn(
+            'text-[11px] uppercase tracking-[0.14em]',
+            cinematic ? 'text-white/48' : 'text-brand-dark/46',
+          )}
+        >
+          Start Ritual
+        </p>
+        <h1
+          className={cn(
+            'text-2xl font-semibold tracking-tight',
+            cinematic ? 'text-white' : 'text-brand-dark',
+          )}
+        >
+          한 줄 목표로 바로 시작
+        </h1>
+        <p
+          className={cn(
+            'text-sm',
+            cinematic ? 'text-white/72' : 'text-brand-dark/68',
+          )}
+        >
+          비어 있어도 괜찮아요. 필요하면 공간 안에서 수정할 수 있어요.
        </p>
      </div>

-      <section className="space-y-3">
-        <div className="space-y-3">
-          <input
-            value={goalInput}
-            onChange={(event) => onGoalInputChange(event.target.value)}
-            placeholder="이번 세션 딱 1가지만 (예: 견적서 1페이지)"
-            className="w-full rounded-xl border border-brand-dark/16 bg-white/86 px-3.5 py-3 text-sm text-brand-dark placeholder:text-brand-dark/42 focus:border-brand-primary/42 focus:outline-none"
-          />
+      <input
+        value={goalInput}
+        onChange={(event) => onGoalInputChange(event.target.value)}
+        placeholder="예: 계약서 1페이지 정리"
+        className={cn(
+          'w-full rounded-xl px-3.5 py-3 text-sm focus:outline-none',
+          cinematic
+            ? 'border border-white/18 bg-slate-900/56 text-white placeholder:text-white/40 focus:border-sky-200/42'
+            : 'border border-brand-dark/14 bg-white/90 text-brand-dark placeholder:text-brand-dark/40 focus:border-brand-primary/42',
+        )}
+      />

-          <div className="flex flex-wrap gap-2">
-            {goalChips.map((chip) => (
-              <Chip
-                key={chip.id}
-                active={selectedGoalId === chip.id}
-                onClick={() => onGoalChipSelect(chip)}
-                className="!bg-white/74 !text-brand-dark/82 !ring-brand-dark/16 hover:!bg-white"
-              >
-                {chip.label}
-              </Chip>
-            ))}
-          </div>
-        </div>
-      </section>
+      <div className="flex flex-wrap gap-2">
+        {goalChips.slice(0, 4).map((chip) => (
+          <Chip
+            key={chip.id}
+            active={selectedGoalId === chip.id}
+            onClick={() => onGoalChipSelect(chip)}
+            className={cn(
+              cinematic
+                ? '!bg-white/10 !text-white/74 !ring-white/20 hover:!bg-white/14'
+                : '!bg-white/72 !text-brand-dark/74 !ring-brand-dark/12 hover:!bg-white',
+            )}
+          >
+            {chip.label}
+          </Chip>
+        ))}
+      </div>

-      <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/72 !text-brand-dark !ring-brand-dark/16 hover:!bg-white"
-            onClick={onOpenCustomEntry}
-          >
-            <span aria-hidden>⚙</span>
-            설정하고 입장
-          </Button>
-        </div>
-      </section>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end">
+        <Button
+          className={cn(
+            'w-full px-6 sm:w-auto sm:min-w-[176px]',
+            cinematic &&
+              '!bg-sky-200 !text-slate-900 shadow-[0_12px_24px_rgba(125,211,252,0.22)] hover:!bg-sky-100',
+          )}
+          onClick={onQuickEnter}
+        >
+          바로 입장
+        </Button>
+        <button
+          type="button"
+          onClick={onOpenCustomEntry}
+          className={cn(
+            'inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-xl px-4 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75 sm:h-10 sm:w-auto',
+            cinematic
+              ? 'text-white/70 hover:bg-white/8 hover:text-white'
+              : 'text-brand-dark/64 hover:bg-brand-dark/5 hover:text-brand-dark',
+          )}
+        >
+          <span aria-hidden>⚙</span>
+          <span>설정하고 입장</span>
+        </button>
+      </div>
    </GlassCard>
  );
 };
--- a/src/widgets/thought-inbox-sheet/index.ts
+++ b/src/widgets/thought-inbox-sheet/index.ts
@@ -0,0 +1 @@
+export * from './ui/ThoughtInboxSheet';
--- a/src/widgets/thought-inbox-sheet/ui/ThoughtInboxSheet.tsx
+++ b/src/widgets/thought-inbox-sheet/ui/ThoughtInboxSheet.tsx
@@ -0,0 +1,83 @@
+import type { RecentThought } from '@/entities/session';
+import { cn } from '@/shared/lib/cn';
+
+interface ThoughtInboxSheetProps {
+  isOpen: boolean;
+  thoughts: RecentThought[];
+  onClose: () => void;
+  onClear: () => void;
+}
+
+export const ThoughtInboxSheet = ({
+  isOpen,
+  thoughts,
+  onClose,
+  onClear,
+}: ThoughtInboxSheetProps) => {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label="메모 인박스 닫기"
+        onClick={onClose}
+        className="fixed inset-0 z-40 bg-slate-950/24 backdrop-blur-[1px]"
+      />
+
+      <aside className="fixed inset-x-0 bottom-0 z-50 mx-auto w-full max-w-4xl px-4 pb-4 sm:px-6 sm:pb-6">
+        <div className="overflow-hidden rounded-3xl border border-brand-dark/12 bg-[linear-gradient(160deg,rgba(248,250,252,0.95)_0%,rgba(226,232,240,0.9)_52%,rgba(203,213,225,0.92)_100%)] shadow-[0_28px_90px_rgba(15,23,42,0.3)] backdrop-blur-xl">
+          <header className="flex items-center justify-between border-b border-brand-dark/12 px-5 py-4 sm:px-6">
+            <div>
+              <h2 className="text-base font-semibold text-brand-dark">메모 인박스</h2>
+              <p className="mt-0.5 text-xs text-brand-dark/56">가상공간에서 남긴 최근 메모</p>
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={onClear}
+                className="rounded-lg border border-brand-dark/16 bg-white/66 px-2.5 py-1.5 text-xs text-brand-dark/72 transition hover:bg-white hover:text-brand-dark"
+              >
+                비우기
+              </button>
+              <button
+                type="button"
+                onClick={onClose}
+                className="rounded-lg border border-brand-dark/16 bg-white/66 px-2.5 py-1.5 text-xs text-brand-dark/72 transition hover:bg-white hover:text-brand-dark"
+              >
+                닫기
+              </button>
+            </div>
+          </header>
+
+          <div className="max-h-[58vh] overflow-y-auto px-5 py-4 sm:px-6">
+            {thoughts.length === 0 ? (
+              <p className="rounded-2xl border border-brand-dark/10 bg-white/56 px-4 py-3 text-sm text-brand-dark/62">
+                아직 저장된 메모가 없어요. 공간에서 떠오른 생각을 남겨보세요.
+              </p>
+            ) : (
+              <ul className="space-y-2.5">
+                {thoughts.map((thought) => (
+                  <li
+                    key={thought.id}
+                    className={cn(
+                      'rounded-2xl border border-brand-dark/12 bg-white/66 px-4 py-3',
+                    )}
+                  >
+                    <p className="text-sm leading-relaxed text-brand-dark/86">{thought.text}</p>
+                    <div className="mt-2 flex items-center justify-between text-[11px] text-brand-dark/54">
+                      <span>{thought.roomName}</span>
+                      <span>{thought.capturedAt}</span>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+      </aside>
+    </>
+  );
+};
--- a/src/widgets/thought-summary-entry/index.ts
+++ b/src/widgets/thought-summary-entry/index.ts
@@ -0,0 +1 @@
+export * from './ui/ThoughtSummaryEntryWidget';
--- a/src/widgets/thought-summary-entry/ui/ThoughtSummaryEntryWidget.tsx
+++ b/src/widgets/thought-summary-entry/ui/ThoughtSummaryEntryWidget.tsx
@@ -0,0 +1,64 @@
+import type { AppHubVisualMode } from '@/shared/config/appHubVisualMode';
+import { cn } from '@/shared/lib/cn';
+
+interface ThoughtSummaryEntryWidgetProps {
+  visualMode: AppHubVisualMode;
+  thoughtCount: number;
+  onOpen: () => void;
+}
+
+export const ThoughtSummaryEntryWidget = ({
+  visualMode,
+  thoughtCount,
+  onOpen,
+}: ThoughtSummaryEntryWidgetProps) => {
+  const cinematic = visualMode === 'cinematic';
+
+  return (
+    <button
+      type="button"
+      onClick={onOpen}
+      className={cn(
+        'group flex w-full items-center justify-between rounded-2xl border px-4 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75',
+        cinematic
+          ? 'border-white/14 bg-slate-900/42 text-white hover:bg-slate-900/54'
+          : 'border-brand-dark/12 bg-white/76 text-brand-dark hover:bg-white/88',
+      )}
+    >
+      <div className="flex items-center gap-2.5">
+        <span
+          aria-hidden
+          className={cn(
+            'inline-flex h-8 w-8 items-center justify-center rounded-full text-sm',
+            cinematic ? 'bg-white/10 text-white/80' : 'bg-brand-dark/6 text-brand-dark/72',
+          )}
+        >
+          ✍
+        </span>
+        <div>
+          <p className={cn('text-sm font-semibold', cinematic ? 'text-white' : 'text-brand-dark')}>
+            최근 생각 보기
+          </p>
+          <p className={cn('text-xs', cinematic ? 'text-white/56' : 'text-brand-dark/52')}>
+            메모 인박스 열기
+          </p>
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <span
+          className={cn(
+            'inline-flex min-w-[1.7rem] items-center justify-center rounded-full px-2 py-1 text-[11px] font-semibold',
+            cinematic
+              ? 'bg-sky-200/20 text-sky-100'
+              : 'bg-brand-primary/14 text-brand-primary/86',
+          )}
+        >
+          {thoughtCount > 99 ? '99+' : `${thoughtCount}`}
+        </span>
+        <span className={cn('text-xs transition-transform group-hover:translate-x-0.5', cinematic ? 'text-white/58' : 'text-brand-dark/52')}>
+          열기 →
+        </span>
+      </div>
+    </button>
+  );
+};
				`@@ -0,0 +1 @@`
				`export * from './ui/SpaceExitSummarySheet';`
				`@@ -0,0 +1 @@`
				`export * from './ui/ThoughtSummaryEntryWidget';`