corpi/viberoom-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(cleanup): 미사용 코드 정리 및 레거시 파일 삭제

Browse Source
This commit is contained in:
corpi
2026-03-03 19:41:31 +09:00
parent be16153bef
commit 60cd093308
80 changed files with 0 additions and 3270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/widgets/app-hub/index.ts
View File

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

202
src/widgets/app-hub/ui/AppHubWidget.tsx
View File

@@ -1,202 +0,0 @@
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { ROOM_THEMES } from '@/entities/room';
import {
GOAL_CHIPS,
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 {
AppUtilityRailWidget,
type AppUtilityPanelId,
} from '@/widgets/app-utility-rail';
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 { thoughts, thoughtCount, clearThoughts } = useThoughtInbox();
const { selectedRoomId, selectRoom } = useRoomSelection(
ROOM_THEMES[0].id,
);
const [goalInput, setGoalInput] = useState('');
const [selectedGoalId, setSelectedGoalId] = useState<string | null>(null);
const [isCustomEntryOpen, setCustomEntryOpen] = useState(false);
const [activeUtilityPanel, setActiveUtilityPanel] = useState<AppUtilityPanelId | null>(
null,
);
const visualMode: AppHubVisualMode = DEFAULT_APP_HUB_VISUAL_MODE;
const cinematic = visualMode === 'cinematic';
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={cn('absolute inset-0')}
style={{
backgroundImage: cinematic
? 'radial-gradient(132% 94% at 8% 0%, rgba(148,163,184,0.34) 0%, rgba(15,23,42,0) 46%), radial-gradient(116% 88% at 94% 6%, rgba(125,211,252,0.18) 0%, rgba(15,23,42,0) 52%), linear-gradient(162deg, #0f172a 0%, #111827 42%, #0b1220 100%)'
: 'radial-gradient(130% 92% at 8% 0%, rgba(148,163,184,0.22) 0%, rgba(248,250,252,0) 48%), radial-gradient(104% 86% at 90% 8%, rgba(125,211,252,0.2) 0%, rgba(248,250,252,0) 54%), linear-gradient(164deg, #f8fafc 0%, #e2e8f0 48%, #dbe7f5 100%)',
}}
/>
<div
aria-hidden
className={cn(
'absolute inset-0',
cinematic
? 'bg-[radial-gradient(circle_at_24%_16%,rgba(148,163,184,0.14),transparent_36%),radial-gradient(circle_at_78%_14%,rgba(125,211,252,0.1),transparent_34%),linear-gradient(180deg,rgba(2,6,23,0.16)_0%,rgba(2,6,23,0.32)_52%,rgba(2,6,23,0.5)_100%)]'
: 'bg-[radial-gradient(circle_at_20%_14%,rgba(148,163,184,0.16),transparent_38%),radial-gradient(circle_at_82%_16%,rgba(125,211,252,0.12),transparent_38%),linear-gradient(180deg,rgba(248,250,252,0.32)_0%,rgba(241,245,249,0.12)_40%,rgba(15,23,42,0.26)_100%)]',
)}
/>
<div
aria-hidden
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.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}
onOpenBilling={() => router.push('/settings')}
/>
<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">
<RoomsGalleryWidget
visualMode={visualMode}
rooms={ROOM_THEMES}
selectedRoomId={selectedRoomId}
onRoomSelect={selectRoom}
startPanel={(
<StartRitualWidget
visualMode={visualMode}
goalInput={goalInput}
selectedGoalId={selectedGoalId}
goalChips={GOAL_CHIPS}
onGoalInputChange={handleGoalInputChange}
onGoalChipSelect={handleGoalChipSelect}
onQuickEnter={handleQuickEnter}
onOpenCustomEntry={() => setCustomEntryOpen(true)}
inStage
/>
)}
/>
</main>
</div>
<CustomEntryWidget
isOpen={isCustomEntryOpen}
selectedRoomId={selectedRoomId}
onSelectRoom={selectRoom}
onClose={() => setCustomEntryOpen(false)}
onEnter={handleCustomEnter}
/>
<AppUtilityRailWidget
visualMode={visualMode}
activePanel={activeUtilityPanel}
thoughts={thoughts}
thoughtCount={thoughtCount}
onOpenPanel={setActiveUtilityPanel}
onClosePanel={() => setActiveUtilityPanel(null)}
onClearInbox={() => {
clearThoughts();
pushToast({ title: '메모 인박스를 비웠어요' });
}}
/>
</div>
);
};

1
src/widgets/app-top-bar/index.ts
View File

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

50
src/widgets/app-top-bar/ui/AppTopBar.tsx
View File

@@ -1,50 +0,0 @@
import 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;
onOpenBilling?: () => void;
}
export const AppTopBar = ({
user,
oneLiner,
onLogout,
visualMode = 'light',
onOpenBilling,
}: AppTopBarProps) => {
const cinematic = visualMode === 'cinematic';
return (
<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-base font-semibold tracking-tight',
cinematic ? 'text-white/94' : 'text-brand-dark',
)}
>
<span title={oneLiner}>VibeRoom</span>
</p>
</div>
<div className="flex items-center gap-2.5 sm:gap-3">
<ProfileMenu user={user} onLogout={onLogout} onOpenBilling={onOpenBilling} />
</div>
</div>
</header>
);
};

3
src/widgets/app-utility-rail/index.ts
View File

@@ -1,3 +0,0 @@
export * from './model/types';
export * from './ui/AppUtilityRailWidget';

2
src/widgets/app-utility-rail/model/types.ts
View File

@@ -1,2 +0,0 @@
export type AppUtilityPanelId = 'inbox' | 'stats' | 'settings';

91
src/widgets/app-utility-rail/ui/AppUtilityDrawer.tsx
View File

@@ -1,91 +0,0 @@
'use client';
import { useEffect, type ReactNode } from 'react';
import { cn } from '@/shared/lib/cn';
interface AppUtilityDrawerProps {
open: boolean;
title: string;
visualMode: 'light' | 'cinematic';
onClose: () => void;
children: ReactNode;
}
export const AppUtilityDrawer = ({
open,
title,
visualMode,
onClose,
children,
}: AppUtilityDrawerProps) => {
const cinematic = visualMode === 'cinematic';
useEffect(() => {
if (!open) {
return;
}
const handleEscape = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
onClose();
}
};
document.addEventListener('keydown', handleEscape);
return () => {
document.removeEventListener('keydown', handleEscape);
};
}, [open, onClose]);
if (!open) {
return null;
}
return (
<>
<button
type="button"
aria-label="도구 드로어 닫기"
onClick={onClose}
className="fixed inset-0 z-40 bg-slate-950/22 backdrop-blur-[1px]"
/>
<aside className="fixed inset-y-0 right-0 z-50 w-[min(360px,92vw)] animate-[sheet-in_220ms_ease-out] p-2 sm:p-3">
<div
className={cn(
'flex h-full flex-col overflow-hidden rounded-3xl border backdrop-blur-2xl',
cinematic
? 'border-white/16 bg-slate-950/64 text-white shadow-[0_24px_70px_rgba(2,6,23,0.55)]'
: 'border-brand-dark/14 bg-white/84 text-brand-dark shadow-[0_24px_70px_rgba(15,23,42,0.2)]',
)}
>
<header
className={cn(
'flex items-center justify-between border-b px-4 py-3 sm:px-5',
cinematic ? 'border-white/10' : 'border-brand-dark/12',
)}
>
<h2 className={cn('text-base font-semibold', cinematic ? 'text-white' : 'text-brand-dark')}>
{title}
</h2>
<button
type="button"
onClick={onClose}
className={cn(
'inline-flex h-8 w-8 items-center justify-center rounded-full border text-sm transition-colors',
cinematic
? 'border-white/18 bg-white/8 text-white/80 hover:bg-white/14 hover:text-white'
: 'border-brand-dark/14 bg-white/66 text-brand-dark/72 hover:bg-white hover:text-brand-dark',
)}
aria-label="닫기"
>
✕
</button>
</header>
<div className="min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-5">{children}</div>
</div>
</aside>
</>
);
};

121
src/widgets/app-utility-rail/ui/AppUtilityRailWidget.tsx
View File

@@ -1,121 +0,0 @@
'use client';
import type { RecentThought } from '@/entities/session';
import type { AppHubVisualMode } from '@/shared/config/appHubVisualMode';
import { cn } from '@/shared/lib/cn';
import { AppUtilityDrawer } from './AppUtilityDrawer';
import { type AppUtilityPanelId } from '../model/types';
import { InboxDrawerPanel } from './panels/InboxDrawerPanel';
import { SettingsDrawerPanel } from './panels/SettingsDrawerPanel';
import { StatsDrawerPanel } from './panels/StatsDrawerPanel';
interface AppUtilityRailWidgetProps {
visualMode: AppHubVisualMode;
activePanel: AppUtilityPanelId | null;
thoughts: RecentThought[];
thoughtCount: number;
onOpenPanel: (panel: AppUtilityPanelId) => void;
onClosePanel: () => void;
onClearInbox: () => void;
}
const RAIL_ITEMS: Array<{
id: AppUtilityPanelId;
icon: string;
label: string;
}> = [
{ id: 'inbox', icon: '📨', label: 'Inbox' },
{ id: 'stats', icon: '📊', label: 'Stats' },
{ id: 'settings', icon: '⚙', label: 'Settings' },
];
const PANEL_TITLE_MAP: Record<AppUtilityPanelId, string> = {
inbox: '임시 보관함',
stats: '집중 요약',
settings: '설정',
};
export const AppUtilityRailWidget = ({
visualMode,
activePanel,
thoughts,
thoughtCount,
onOpenPanel,
onClosePanel,
onClearInbox,
}: AppUtilityRailWidgetProps) => {
const cinematic = visualMode === 'cinematic';
return (
<>
<div className="fixed right-3 top-1/2 z-30 -translate-y-1/2">
<div
className={cn(
'flex w-12 flex-col items-center gap-2 rounded-2xl border py-2 backdrop-blur-xl',
cinematic
? 'border-white/18 bg-slate-950/34 shadow-[0_18px_32px_rgba(2,6,23,0.42)]'
: 'border-brand-dark/12 bg-white/54 shadow-[0_18px_32px_rgba(15,23,42,0.14)]',
)}
>
{RAIL_ITEMS.map((item) => {
const selected = activePanel === item.id;
return (
<button
key={item.id}
type="button"
title={item.label}
aria-label={item.label}
onClick={() => onOpenPanel(item.id)}
className={cn(
'relative inline-flex h-9 w-9 items-center justify-center rounded-xl border text-base transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75',
selected
? cinematic
? 'border-sky-200/64 bg-sky-200/22'
: 'border-brand-primary/44 bg-brand-primary/14'
: cinematic
? 'border-white/18 bg-white/8 hover:bg-white/14'
: 'border-brand-dark/14 bg-white/72 hover:bg-white',
)}
>
<span aria-hidden>{item.icon}</span>
{item.id === 'inbox' && thoughtCount > 0 ? (
<span
className={cn(
'absolute -right-1 -top-1 inline-flex min-w-[1rem] items-center justify-center rounded-full px-1 py-0.5 text-[9px] font-semibold',
cinematic
? 'bg-sky-200/28 text-sky-50'
: 'bg-brand-primary/18 text-brand-primary',
)}
>
{thoughtCount > 99 ? '99+' : `${thoughtCount}`}
</span>
) : null}
</button>
);
})}
</div>
</div>
<AppUtilityDrawer
open={activePanel !== null}
title={activePanel ? PANEL_TITLE_MAP[activePanel] : ''}
visualMode={visualMode}
onClose={onClosePanel}
>
{activePanel === 'inbox' ? (
<InboxDrawerPanel
visualMode={visualMode}
thoughts={thoughts}
onClear={onClearInbox}
/>
) : null}
{activePanel === 'stats' ? <StatsDrawerPanel visualMode={visualMode} /> : null}
{activePanel === 'settings' ? (
<SettingsDrawerPanel visualMode={visualMode} />
) : null}
</AppUtilityDrawer>
</>
);
};

78
src/widgets/app-utility-rail/ui/panels/InboxDrawerPanel.tsx
View File

@@ -1,78 +0,0 @@
import type { RecentThought } from '@/entities/session';
import { cn } from '@/shared/lib/cn';
interface InboxDrawerPanelProps {
visualMode: 'light' | 'cinematic';
thoughts: RecentThought[];
onClear: () => void;
}
export const InboxDrawerPanel = ({
visualMode,
thoughts,
onClear,
}: InboxDrawerPanelProps) => {
const cinematic = visualMode === 'cinematic';
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<p className={cn('text-xs', cinematic ? 'text-white/56' : 'text-brand-dark/54')}>
집중 중 떠오른 생각을 잠시 모아두는 공간
</p>
<button
type="button"
onClick={onClear}
className={cn(
'rounded-full border px-2.5 py-1 text-[11px] transition-colors',
cinematic
? 'border-white/20 bg-white/8 text-white/72 hover:bg-white/14 hover:text-white'
: 'border-brand-dark/14 bg-white/66 text-brand-dark/70 hover:bg-white hover:text-brand-dark',
)}
>
모두 비우기
</button>
</div>
{thoughts.length === 0 ? (
<p
className={cn(
'rounded-2xl border px-3.5 py-3 text-sm leading-relaxed',
cinematic
? 'border-white/14 bg-white/6 text-white/74'
: 'border-brand-dark/12 bg-white/70 text-brand-dark/72',
)}
>
지금은 비어 있어요. 집중 중 떠오른 생각을 여기로 주차할 수 있어요.
</p>
) : (
<ul className="space-y-2.5">
{thoughts.slice(0, 10).map((thought) => (
<li
key={thought.id}
className={cn(
'rounded-2xl border px-3.5 py-3',
cinematic
? 'border-white/14 bg-white/7'
: 'border-brand-dark/12 bg-white/72',
)}
>
<p className={cn('text-sm leading-relaxed', cinematic ? 'text-white/88' : 'text-brand-dark/84')}>
{thought.text}
</p>
<div
className={cn(
'mt-2 flex items-center justify-end text-[11px]',
cinematic ? 'text-white/54' : 'text-brand-dark/52',
)}
>
{thought.capturedAt}
</div>
</li>
))}
</ul>
)}
</div>
);
};

98
src/widgets/app-utility-rail/ui/panels/SettingsDrawerPanel.tsx
View File

@@ -1,98 +0,0 @@
'use client';
import { useState } from 'react';
import { DEFAULT_PRESET_OPTIONS } from '@/shared/config/settingsOptions';
import { cn } from '@/shared/lib/cn';
interface SettingsDrawerPanelProps {
visualMode: 'light' | 'cinematic';
}
export const SettingsDrawerPanel = ({ visualMode }: SettingsDrawerPanelProps) => {
const cinematic = visualMode === 'cinematic';
const [reduceMotion, setReduceMotion] = useState(false);
const [defaultPresetId, setDefaultPresetId] = useState<
(typeof DEFAULT_PRESET_OPTIONS)[number]['id']
>(DEFAULT_PRESET_OPTIONS[0].id);
return (
<div className="space-y-4">
<section
className={cn(
'rounded-2xl border px-3.5 py-3',
cinematic
? 'border-white/14 bg-white/7'
: 'border-brand-dark/12 bg-white/72',
)}
>
<div className="flex items-center justify-between gap-3">
<div>
<p className={cn('text-sm font-medium', cinematic ? 'text-white' : 'text-brand-dark')}>
Reduce Motion
</p>
<p className={cn('mt-1 text-xs', cinematic ? 'text-white/58' : 'text-brand-dark/54')}>
화면 전환을 조금 더 차분하게 표시합니다.
</p>
</div>
<button
type="button"
role="switch"
aria-checked={reduceMotion}
onClick={() => setReduceMotion((current) => !current)}
className={cn(
'inline-flex w-14 items-center rounded-full border px-1 py-1 transition-colors',
reduceMotion
? cinematic
? 'border-sky-200/42 bg-sky-200/24'
: 'border-brand-primary/45 bg-brand-soft/60'
: cinematic
? 'border-white/24 bg-white/9'
: 'border-brand-dark/20 bg-white/86',
)}
>
<span
className={cn(
'h-4.5 w-4.5 rounded-full bg-white transition-transform duration-200 motion-reduce:transition-none',
reduceMotion ? 'translate-x-7' : 'translate-x-0',
)}
/>
</button>
</div>
</section>
<section
className={cn(
'rounded-2xl border px-3.5 py-3',
cinematic
? 'border-white/14 bg-white/7'
: 'border-brand-dark/12 bg-white/72',
)}
>
<p className={cn('text-sm font-medium', cinematic ? 'text-white' : 'text-brand-dark')}>
기본 프리셋
</p>
<div className="mt-2 flex flex-wrap gap-2">
{DEFAULT_PRESET_OPTIONS.map((preset) => (
<button
key={preset.id}
type="button"
onClick={() => setDefaultPresetId(preset.id)}
className={cn(
'rounded-full border px-3 py-1.5 text-xs transition-colors',
defaultPresetId === preset.id
? cinematic
? 'border-sky-200/44 bg-sky-200/20 text-sky-100'
: 'border-brand-primary/45 bg-brand-soft/58 text-brand-dark'
: cinematic
? 'border-white/18 bg-white/8 text-white/80 hover:bg-white/14'
: 'border-brand-dark/16 bg-white/74 text-brand-dark/78 hover:bg-white',
)}
>
{preset.label}
</button>
))}
</div>
</section>
</div>
);
};

64
src/widgets/app-utility-rail/ui/panels/StatsDrawerPanel.tsx
View File

@@ -1,64 +0,0 @@
import { TODAY_STATS, WEEKLY_STATS } from '@/entities/session';
import { cn } from '@/shared/lib/cn';
interface StatsDrawerPanelProps {
visualMode: 'light' | 'cinematic';
}
export const StatsDrawerPanel = ({ visualMode }: StatsDrawerPanelProps) => {
const cinematic = visualMode === 'cinematic';
return (
<div className="space-y-4">
<p className={cn('text-xs', cinematic ? 'text-white/56' : 'text-brand-dark/54')}>
오늘 흐름과 최근 7일의 리듬을 가볍게 확인하세요.
</p>
<section className="grid gap-2.5 sm:grid-cols-2">
{[TODAY_STATS[0], TODAY_STATS[1], WEEKLY_STATS[0], WEEKLY_STATS[2]].map((stat) => (
<article
key={stat.id}
className={cn(
'rounded-2xl border px-3.5 py-3',
cinematic
? 'border-white/14 bg-white/7'
: 'border-brand-dark/12 bg-white/72',
)}
>
<p className={cn('text-[11px]', cinematic ? 'text-white/58' : 'text-brand-dark/54')}>
{stat.label}
</p>
<p className={cn('mt-1 text-lg font-semibold', cinematic ? 'text-white' : 'text-brand-dark')}>
{stat.value}
</p>
<p className={cn('mt-0.5 text-xs', cinematic ? 'text-sky-100/78' : 'text-brand-primary/86')}>
{stat.delta}
</p>
</article>
))}
</section>
<section
className={cn(
'rounded-2xl border p-3.5',
cinematic
? 'border-white/14 bg-white/6'
: 'border-brand-dark/12 bg-white/72',
)}
>
<div
className={cn(
'h-32 rounded-xl border border-dashed',
cinematic
? 'border-white/18 bg-[linear-gradient(180deg,rgba(148,163,184,0.14),rgba(148,163,184,0.02))]'
: 'border-brand-dark/16 bg-[linear-gradient(180deg,rgba(148,163,184,0.15),rgba(148,163,184,0.04))]',
)}
/>
<p className={cn('mt-2 text-[11px]', cinematic ? 'text-white/54' : 'text-brand-dark/52')}>
그래프 플레이스홀더
</p>
</section>
</div>
);
};

1
src/widgets/custom-entry-widget/index.ts
View File

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

30
src/widgets/custom-entry-widget/ui/CustomEntryWidget.tsx
View File

@@ -1,30 +0,0 @@
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}
/>
);
};

1
src/widgets/notes-sheet/index.ts
View File

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

37
src/widgets/notes-sheet/ui/NotesSheetWidget.tsx
View File

@@ -1,37 +0,0 @@
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>
);
};

1
src/widgets/quick-sheet/index.ts
View File

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

56
src/widgets/quick-sheet/ui/QuickSheetWidget.tsx
View File

@@ -1,56 +0,0 @@
'use client';
import { useState } from 'react';
import { ImmersionModeToggle } from '@/features/immersion-mode';
import { Toggle } from '@/shared/ui';
interface QuickSheetWidgetProps {
onClose: () => void;
isImmersionMode: boolean;
onToggleImmersionMode: () => void;
}
export const QuickSheetWidget = ({
onClose,
isImmersionMode,
onToggleImmersionMode,
}: QuickSheetWidgetProps) => {
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">
<ImmersionModeToggle
enabled={isImmersionMode}
onToggle={onToggleImmersionMode}
/>
<div className="flex items-center justify-between rounded-xl border border-white/16 bg-white/6 px-3 py-2">
<span className="text-sm text-white/90">알림 최소화</span>
<Toggle
checked={minimalNotice}
onChange={setMinimalNotice}
ariaLabel="알림 최소화 토글"
/>
</div>
<p className="text-xs text-white/58">
빠른 옵션 UI 목업입니다. 실제 동작은 연결하지 않았습니다.
</p>
</div>
</div>
</aside>
);
};

1
src/widgets/room-sheet/index.ts
View File

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

98
src/widgets/room-sheet/ui/RoomSheetWidget.tsx
View File

@@ -1,98 +0,0 @@
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>
);
};

1
src/widgets/rooms-gallery-widget/index.ts
View File

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

132
src/widgets/rooms-gallery-widget/ui/RoomCatalogSheet.tsx
View File

@@ -1,132 +0,0 @@
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>
</>
);
};

181
src/widgets/rooms-gallery-widget/ui/RoomsGalleryWidget.tsx
View File

@@ -1,181 +0,0 @@
import { useMemo, useState, type ReactNode } from 'react';
import {
getHubRoomSections,
getRoomCardBackgroundStyle,
type RoomTheme,
} from '@/entities/room';
import { RoomPreviewCard } from '@/features/room-select';
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;
startPanel: ReactNode;
}
export const RoomsGalleryWidget = ({
visualMode,
rooms,
selectedRoomId,
onRoomSelect,
startPanel,
}: RoomsGalleryWidgetProps) => {
const [isCatalogOpen, setCatalogOpen] = useState(false);
const [carouselOffset, setCarouselOffset] = useState(0);
const cinematic = visualMode === 'cinematic';
const selectedRoom = rooms.find((room) => room.id === selectedRoomId) ?? rooms[0];
const stableRecommendedBaseId = rooms[0]?.id ?? selectedRoom.id;
const { recommendedRooms, allRooms } = getHubRoomSections(
rooms,
stableRecommendedBaseId,
6,
);
const canRotate = recommendedRooms.length > 1;
const rotatedRecommendedRooms = useMemo(() => {
if (recommendedRooms.length === 0) {
return [];
}
const normalizedOffset =
((carouselOffset % recommendedRooms.length) + recommendedRooms.length) %
recommendedRooms.length;
return [
...recommendedRooms.slice(normalizedOffset),
...recommendedRooms.slice(0, normalizedOffset),
];
}, [carouselOffset, recommendedRooms]);
return (
<section className="space-y-3">
<div
className={cn(
'relative overflow-hidden rounded-[2rem] border',
cinematic
? 'border-white/16 bg-slate-950/34 shadow-[0_24px_70px_rgba(2,6,23,0.5)]'
: 'border-brand-dark/12 bg-white/78 shadow-[0_20px_64px_rgba(15,23,42,0.2)]',
)}
>
<div
aria-hidden
className="absolute inset-0"
style={getRoomCardBackgroundStyle(selectedRoom)}
/>
<div
aria-hidden
className={cn(
'absolute inset-0',
cinematic
? 'bg-[linear-gradient(180deg,rgba(2,6,23,0.22)_0%,rgba(2,6,23,0.44)_58%,rgba(2,6,23,0.84)_100%)]'
: 'bg-[linear-gradient(180deg,rgba(15,23,42,0.16)_0%,rgba(15,23,42,0.4)_56%,rgba(15,23,42,0.74)_100%)]',
)}
/>
<div
aria-hidden
className={cn(
'absolute inset-0',
cinematic
? 'bg-[radial-gradient(circle_at_20%_12%,rgba(125,211,252,0.14),transparent_35%),radial-gradient(circle_at_78%_10%,rgba(196,181,253,0.13),transparent_36%)]'
: 'bg-[radial-gradient(circle_at_20%_12%,rgba(148,163,184,0.14),transparent_35%),radial-gradient(circle_at_78%_10%,rgba(125,211,252,0.1),transparent_36%)]',
)}
/>
<div
aria-hidden
className="absolute inset-0 opacity-[0.16]"
style={{
backgroundImage:
"url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 2px)",
mixBlendMode: 'soft-light',
}}
/>
<div className="relative z-10 flex min-h-[640px] flex-col px-4 py-4 sm:px-6 sm:py-6 lg:px-7 lg:py-7">
<header className="flex items-start gap-3">
<div>
<p className="text-[11px] uppercase tracking-[0.16em] text-white/58">Hub Stage</p>
<h2 className="mt-1 text-2xl font-semibold tracking-tight text-white">오늘의 공간</h2>
</div>
</header>
<div className="mt-auto space-y-4">
<div className="max-w-[460px] rounded-xl border border-white/12 bg-slate-950/34 px-3.5 py-2 backdrop-blur-sm sm:px-4 sm:py-2.5">
<p className="text-[11px] uppercase tracking-[0.18em] text-white/56">Selected Space</p>
<h3 className="mt-0.5 text-[1.65rem] font-semibold tracking-tight text-white sm:text-[1.75rem]">
{selectedRoom.name}
</h3>
<p className="mt-0.5 text-sm text-white/74 truncate" title={selectedRoom.description}>
{selectedRoom.description}
</p>
</div>
<div className="grid gap-3 lg:grid-cols-[minmax(0,360px)_minmax(0,1fr)] lg:items-end">
<div className="lg:max-w-[360px]">{startPanel}</div>
<section className="rounded-2xl border border-white/14 bg-slate-950/44 p-3 backdrop-blur-md sm:p-3.5">
<div className="mb-2 flex items-center justify-between">
<h3 className="text-[11px] font-medium tracking-[0.12em] text-white/66">추천 공간</h3>
<div className="flex items-center gap-2">
<button
type="button"
onClick={() => setCatalogOpen(true)}
className="text-[11px] text-white/60 transition-colors hover:text-white/86"
>
공간 전체 보기
</button>
<div className="flex items-center gap-1">
<button
type="button"
disabled={!canRotate}
onClick={() => setCarouselOffset((current) => current - 1)}
className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-white/20 bg-white/8 text-sm text-white/82 transition hover:bg-white/14 disabled:cursor-not-allowed disabled:opacity-40"
aria-label="추천 공간 이전"
>
‹
</button>
<button
type="button"
disabled={!canRotate}
onClick={() => setCarouselOffset((current) => current + 1)}
className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-white/20 bg-white/8 text-sm text-white/82 transition hover:bg-white/14 disabled:cursor-not-allowed disabled:opacity-40"
aria-label="추천 공간 다음"
>
›
</button>
</div>
</div>
</div>
<div className="-mx-1 snap-x overflow-x-auto px-1 pb-1">
<div className="flex gap-2.5">
{rotatedRecommendedRooms.map((room) => (
<RoomPreviewCard
key={`recommended-${room.id}`}
room={room}
visualMode={visualMode}
variant="compact"
selected={room.id === selectedRoomId}
onSelect={onRoomSelect}
/>
))}
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<RoomCatalogSheet
isOpen={isCatalogOpen}
visualMode={visualMode}
rooms={allRooms}
selectedRoomId={selectedRoomId}
onClose={() => setCatalogOpen(false)}
onSelectRoom={onRoomSelect}
/>
</section>
);
};

1
src/widgets/sound-sheet/index.ts
View File

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

70
src/widgets/sound-sheet/ui/SoundSheetWidget.tsx
View File

@@ -1,70 +0,0 @@
import {
SoundPresetControls,
type SoundTrackKey,
} from '@/features/sound-preset';
interface SoundSheetWidgetProps {
onClose: () => void;
selectedPresetId: string;
onSelectPreset: (presetId: string) => void;
isMixerOpen: boolean;
onToggleMixer: () => void;
isMuted: boolean;
onMuteChange: (next: boolean) => void;
masterVolume: number;
onMasterVolumeChange: (next: number) => void;
trackKeys: readonly SoundTrackKey[];
trackLevels: Record<SoundTrackKey, number>;
onTrackLevelChange: (track: SoundTrackKey, level: number) => void;
}
export const SoundSheetWidget = ({
onClose,
selectedPresetId,
onSelectPreset,
isMixerOpen,
onToggleMixer,
isMuted,
onMuteChange,
masterVolume,
onMasterVolumeChange,
trackKeys,
trackLevels,
onTrackLevelChange,
}: SoundSheetWidgetProps) => {
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">
<div>
<h2 className="text-base font-semibold text-white">Sound</h2>
<p className="text-[11px] text-white/56">오디오 재생은 연결하지 않은 UI 목업입니다.</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>
</header>
<div className="flex-1 overflow-y-auto px-4 py-4">
<SoundPresetControls
selectedPresetId={selectedPresetId}
onSelectPreset={onSelectPreset}
isMixerOpen={isMixerOpen}
onToggleMixer={onToggleMixer}
isMuted={isMuted}
onMuteChange={onMuteChange}
masterVolume={masterVolume}
onMasterVolumeChange={onMasterVolumeChange}
trackKeys={trackKeys}
trackLevels={trackLevels}
onTrackLevelChange={onTrackLevelChange}
/>
</div>
</div>
</aside>
);
};

1
src/widgets/space-chrome/index.ts
View File

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

43
src/widgets/space-chrome/ui/SpaceChromeWidget.tsx
View File

@@ -1,43 +0,0 @@
import { ExitHoldButton } from '@/features/exit-hold';
interface SpaceChromeWidgetProps {
roomName: string;
vibeLabel: string;
isImmersionMode: boolean;
onExitRequested: () => void;
}
export const SpaceChromeWidget = ({
roomName,
vibeLabel,
isImmersionMode,
onExitRequested,
}: SpaceChromeWidgetProps) => {
return (
<div className="px-4 pt-2 sm:px-6">
<header className="flex items-center justify-between px-1 py-1">
<div className="flex items-center gap-2">
<span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-white/12 text-[11px] font-semibold text-white/90">
V
</span>
<p className="text-sm font-medium tracking-tight text-white/90">VibeRoom</p>
</div>
<ExitHoldButton
variant={isImmersionMode ? 'ring' : 'bar'}
onConfirm={onExitRequested}
/>
</header>
{!isImmersionMode ? (
<div className="mx-auto mt-4 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">{roomName}</p>
<p className="text-xs text-white/70">지금 분위기 · {vibeLabel}</p>
</div>
</div>
) : null}
</div>
);
};

1
src/widgets/space-exit-summary/index.ts
View File

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

86
src/widgets/space-exit-summary/ui/SpaceExitSummarySheet.tsx
View File

@@ -1,86 +0,0 @@
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>
</>
);
};

1
src/widgets/space-shell/index.ts
View File

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

5
src/widgets/space-shell/ui/SpaceSkeletonWidget.tsx
View File

@@ -1,5 +0,0 @@
import { SpaceWorkspaceWidget } from '@/widgets/space-workspace';
export const SpaceSkeletonWidget = () => {
return <SpaceWorkspaceWidget />;
};

23
src/widgets/space-tools-dock/model/useSpaceToolsDock.ts
View File

@@ -1,23 +0,0 @@
'use client';
import { useState } from 'react';
export type SpaceToolPanel = 'sound' | '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,
};
};

16
src/widgets/space-tools-dock/ui/panels/NotesToolPanel.tsx
View File

@@ -1,16 +0,0 @@
import { DistractionDumpNotesContent } from '@/features/distraction-dump';
interface NotesToolPanelProps {
onCaptureThought: (note: string) => void;
}
export const NotesToolPanel = ({ onCaptureThought }: NotesToolPanelProps) => {
return (
<div className="space-y-3">
<p className="text-xs text-white/58">
집중 중 떠오른 생각을 잠깐 주차하세요. 저장 동작은 더미 토스트로만 처리됩니다.
</p>
<DistractionDumpNotesContent onNoteAdded={onCaptureThought} />
</div>
);
};

48
src/widgets/space-tools-dock/ui/panels/SoundToolPanel.tsx
View File

@@ -1,48 +0,0 @@
import { SoundPresetControls, type SoundTrackKey } from '@/features/sound-preset';
interface SoundToolPanelProps {
selectedPresetId: string;
onSelectPreset: (presetId: string) => void;
isMixerOpen: boolean;
onToggleMixer: () => void;
isMuted: boolean;
onMuteChange: (next: boolean) => void;
masterVolume: number;
onMasterVolumeChange: (next: number) => void;
trackKeys: readonly SoundTrackKey[];
trackLevels: Record<SoundTrackKey, number>;
onTrackLevelChange: (track: SoundTrackKey, level: number) => void;
}
export const SoundToolPanel = ({
selectedPresetId,
onSelectPreset,
isMixerOpen,
onToggleMixer,
isMuted,
onMuteChange,
masterVolume,
onMasterVolumeChange,
trackKeys,
trackLevels,
onTrackLevelChange,
}: SoundToolPanelProps) => {
return (
<div className="space-y-3">
<p className="text-xs text-white/58">오디오 재생은 연결하지 않은 UI 목업입니다.</p>
<SoundPresetControls
selectedPresetId={selectedPresetId}
onSelectPreset={onSelectPreset}
isMixerOpen={isMixerOpen}
onToggleMixer={onToggleMixer}
isMuted={isMuted}
onMuteChange={onMuteChange}
masterVolume={masterVolume}
onMasterVolumeChange={onMasterVolumeChange}
trackKeys={trackKeys}
trackLevels={trackLevels}
onTrackLevelChange={onTrackLevelChange}
/>
</div>
);
};

1
src/widgets/start-ritual-widget/index.ts
View File

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

136
src/widgets/start-ritual-widget/ui/StartRitualWidget.tsx
View File

@@ -1,136 +0,0 @@
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[];
onGoalInputChange: (value: string) => void;
onGoalChipSelect: (chip: GoalChip) => void;
onQuickEnter: () => void;
onOpenCustomEntry: () => void;
inStage?: boolean;
}
export const StartRitualWidget = ({
visualMode,
goalInput,
selectedGoalId,
goalChips,
onGoalInputChange,
onGoalChipSelect,
onQuickEnter,
onOpenCustomEntry,
inStage = false,
}: StartRitualWidgetProps) => {
const cinematic = visualMode === 'cinematic';
const visibleGoalChips = inStage ? goalChips.slice(0, 2) : goalChips.slice(0, 3);
return (
<GlassCard
elevated
className={cn(
inStage ? 'space-y-3 p-3.5 sm:p-4' : 'space-y-3.5 p-4 sm:p-5',
cinematic
? inStage
? 'border-white/24 bg-slate-950/72 text-white shadow-[0_20px_44px_rgba(2,6,23,0.44),inset_0_1px_0_rgba(255,255,255,0.04)] backdrop-blur-xl'
: '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 className="space-y-1.5">
<p
className={cn(
'text-[11px] uppercase tracking-[0.14em]',
cinematic ? 'text-white/48' : 'text-brand-dark/46',
)}
>
{inStage ? 'Quick Entry' : 'Start Ritual'}
</p>
<h1
className={cn(
inStage ? 'text-xl font-semibold tracking-tight' : '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>
<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">
{visibleGoalChips.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>
<div
className={cn(
'flex flex-col items-stretch gap-2.5',
inStage ? 'sm:items-stretch' : 'sm:items-end',
)}
>
<Button
className={cn(
inStage
? 'w-full px-5 sm:min-w-[148px] sm:flex-1'
: 'w-full px-6 sm:w-auto sm:min-w-[168px]',
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(
inStage
? 'inline-flex h-9 items-center justify-center gap-1 rounded-lg px-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75 self-end'
: 'inline-flex h-9 items-center justify-center gap-1 rounded-lg px-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75 self-end',
cinematic
? 'text-white/66 hover:text-white'
: 'text-brand-dark/62 hover:text-brand-dark',
)}
>
<span aria-hidden>⚙</span>
<span className="whitespace-nowrap">설정하고 입장</span>
</button>
</div>
</GlassCard>
);
};

1
src/widgets/thought-inbox-sheet/index.ts
View File

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

83
src/widgets/thought-inbox-sheet/ui/ThoughtInboxSheet.tsx
View File

@@ -1,83 +0,0 @@
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>
</>
);
};

1
src/widgets/thought-summary-entry/index.ts
View File

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

95
src/widgets/thought-summary-entry/ui/ThoughtSummaryEntryWidget.tsx
View File

@@ -1,95 +0,0 @@
import type { AppHubVisualMode } from '@/shared/config/appHubVisualMode';
import { cn } from '@/shared/lib/cn';
interface ThoughtSummaryEntryWidgetProps {
visualMode: AppHubVisualMode;
thoughtCount: number;
onOpen: () => void;
compact?: boolean;
}
export const ThoughtSummaryEntryWidget = ({
visualMode,
thoughtCount,
onOpen,
compact = false,
}: ThoughtSummaryEntryWidgetProps) => {
const cinematic = visualMode === 'cinematic';
const countLabel = thoughtCount > 99 ? '99+' : `${thoughtCount}`;
if (compact) {
return (
<button
type="button"
onClick={onOpen}
className={cn(
'group inline-flex h-10 items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75',
cinematic
? 'border-white/18 bg-white/8 text-white/74 hover:bg-white/14'
: 'border-brand-dark/12 bg-white/66 text-brand-dark/68 hover:bg-white/82',
)}
>
<span aria-hidden className="text-sm">✍</span>
<span className="sr-only sm:not-sr-only sm:inline">메모</span>
<span
className={cn(
'inline-flex min-w-[1rem] items-center justify-center rounded-full px-1 py-0.5 text-[9px] font-semibold',
cinematic
? 'bg-sky-200/20 text-sky-100'
: 'bg-brand-primary/14 text-brand-primary/86',
)}
>
{countLabel}
</span>
</button>
);
}
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.4rem] 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',
)}
>
{countLabel}
</span>
<span className={cn('text-xs', cinematic ? 'text-white/58' : 'text-brand-dark/52')}>
열기
</span>
</div>
</button>
);
};