refactor(space): 단일 워크스페이스 Setup→Focus 전환 구조 도입
맥락: - 허브를 경유하는 흐름 대신 /space 한 화면에서 설정과 몰입을 이어서 처리할 필요가 있었습니다. - View 로직 분리와 파일 분할 기준을 지키면서 도크/시트 패턴을 통합해야 했습니다. 변경사항: - /space를 Setup(기본)과 Focus(시작 후) 2상태로 운영하는 space-workspace 위젯을 추가했습니다. - Setup Drawer를 추가해 Space 선택, Goal(필수), Sound(선택) 섹션과 하단 고정 CTA를 구성했습니다. - Goal 입력이 비어있으면 시작하기 버튼이 비활성화되도록 UI 검증을 반영했습니다. - Focus 상태에서 하단 HUD만 유지하고 우측 Tools Dock(🎧/📝/📨/📊/⚙) + 우측 시트 패턴을 적용했습니다. - Notes(쓰기)와 Inbox(읽기) 패널을 분리하고 더미 토스트 동작을 연결했습니다. - FSD 분리를 위해 features(space-select/session-goal/inbox)와 widgets(space-workspace/space-setup-drawer/space-focus-hud/space-sheet-shell)를 추가했습니다. - 기존 space-shell은 신규 워크스페이스로 연결되는 얇은 래퍼로 정리했습니다. 검증: - npx tsc --noEmit - npm run build 세션-상태: /space 단일 워크스페이스에서 Setup→Focus 전환이 동작합니다. 세션-다음: 진입 경로를 /space로 통일하고 레거시 /app 라우트를 정리합니다. 세션-리스크: useSearchParams 기반 초기값은 클라이언트 최초 렌더 기준으로만 반영됩니다.
This commit is contained in:
@@ -1,14 +1,14 @@
|
||||
import { Suspense } from 'react';
|
||||
import { SpaceSkeletonWidget } from '@/widgets/space-shell';
|
||||
import { SpaceWorkspaceWidget } from '@/widgets/space-workspace';
|
||||
|
||||
export default function SpacePage() {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="min-h-screen bg-[radial-gradient(circle_at_15%_0%,rgba(186,230,253,0.46),transparent_48%),linear-gradient(165deg,#f8fafc_0%,#e2e8f0_56%,#f1f5f9_100%)]" />
|
||||
<div className="min-h-screen bg-[linear-gradient(160deg,#0f172a_0%,#111827_48%,#0b1220_100%)]" />
|
||||
}
|
||||
>
|
||||
<SpaceSkeletonWidget />
|
||||
<SpaceWorkspaceWidget />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
1
src/features/inbox/index.ts
Normal file
1
src/features/inbox/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './ui/InboxList';
|
||||
38
src/features/inbox/ui/InboxList.tsx
Normal file
38
src/features/inbox/ui/InboxList.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import type { RecentThought } from '@/entities/session';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
|
||||
interface InboxListProps {
|
||||
thoughts: RecentThought[];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const InboxList = ({ thoughts, className }: InboxListProps) => {
|
||||
if (thoughts.length === 0) {
|
||||
return (
|
||||
<p
|
||||
className={cn(
|
||||
'rounded-2xl border border-white/14 bg-white/6 px-3.5 py-3 text-sm leading-relaxed text-white/74',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
지금은 비어 있어요. 집중 중 떠오른 생각을 여기로 주차할 수 있어요.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className={cn('space-y-2.5', className)}>
|
||||
{thoughts.slice(0, 10).map((thought) => (
|
||||
<li
|
||||
key={thought.id}
|
||||
className="rounded-2xl border border-white/14 bg-white/7 px-3.5 py-3"
|
||||
>
|
||||
<p className="text-sm leading-relaxed text-white/88">{thought.text}</p>
|
||||
<p className="mt-1.5 text-[11px] text-white/54">
|
||||
{thought.roomName} · {thought.capturedAt}
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
1
src/features/session-goal/index.ts
Normal file
1
src/features/session-goal/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './ui/SessionGoalField';
|
||||
57
src/features/session-goal/ui/SessionGoalField.tsx
Normal file
57
src/features/session-goal/ui/SessionGoalField.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import type { GoalChip } from '@/entities/session';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
|
||||
interface SessionGoalFieldProps {
|
||||
goalInput: string;
|
||||
selectedGoalId: string | null;
|
||||
goalChips: GoalChip[];
|
||||
onGoalChange: (value: string) => void;
|
||||
onGoalChipSelect: (chip: GoalChip) => void;
|
||||
}
|
||||
|
||||
export const SessionGoalField = ({
|
||||
goalInput,
|
||||
selectedGoalId,
|
||||
goalChips,
|
||||
onGoalChange,
|
||||
onGoalChipSelect,
|
||||
}: SessionGoalFieldProps) => {
|
||||
return (
|
||||
<div className="space-y-2.5">
|
||||
<div className="space-y-1.5">
|
||||
<label htmlFor="space-goal-input" className="text-xs font-medium text-white/86">
|
||||
목표 <span className="text-sky-100">(필수)</span>
|
||||
</label>
|
||||
<input
|
||||
id="space-goal-input"
|
||||
value={goalInput}
|
||||
onChange={(event) => onGoalChange(event.target.value)}
|
||||
placeholder="예: 계약서 1페이지 정리"
|
||||
className="h-11 w-full rounded-xl border border-white/18 bg-slate-950/48 px-3 text-sm text-white placeholder:text-white/42 focus:border-sky-200/58 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{goalChips.map((chip) => {
|
||||
const selected = chip.id === selectedGoalId;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={chip.id}
|
||||
type="button"
|
||||
onClick={() => onGoalChipSelect(chip)}
|
||||
className={cn(
|
||||
'rounded-full border px-2.5 py-1 text-xs transition-colors',
|
||||
selected
|
||||
? 'border-sky-200/56 bg-sky-200/20 text-sky-50'
|
||||
: 'border-white/18 bg-white/8 text-white/76 hover:bg-white/14',
|
||||
)}
|
||||
>
|
||||
{chip.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
1
src/features/space-select/index.ts
Normal file
1
src/features/space-select/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './ui/SpaceSelectCarousel';
|
||||
51
src/features/space-select/ui/SpaceSelectCarousel.tsx
Normal file
51
src/features/space-select/ui/SpaceSelectCarousel.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import { getRoomCardBackgroundStyle, type RoomTheme } from '@/entities/room';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
|
||||
interface SpaceSelectCarouselProps {
|
||||
rooms: RoomTheme[];
|
||||
selectedRoomId: string;
|
||||
onSelect: (roomId: string) => void;
|
||||
}
|
||||
|
||||
export const SpaceSelectCarousel = ({
|
||||
rooms,
|
||||
selectedRoomId,
|
||||
onSelect,
|
||||
}: SpaceSelectCarouselProps) => {
|
||||
return (
|
||||
<div className="-mx-1 overflow-x-auto px-1 pb-1">
|
||||
<div className="flex min-w-full gap-2.5">
|
||||
{rooms.map((room) => {
|
||||
const selected = room.id === selectedRoomId;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={room.id}
|
||||
type="button"
|
||||
onClick={() => onSelect(room.id)}
|
||||
className={cn(
|
||||
'group relative h-24 min-w-[138px] overflow-hidden rounded-xl border text-left sm:min-w-[148px]',
|
||||
selected
|
||||
? 'border-sky-200/62 shadow-[0_0_0_1px_rgba(186,230,253,0.4),0_0_18px_rgba(56,189,248,0.22)]'
|
||||
: 'border-white/18 hover:border-white/32',
|
||||
)}
|
||||
style={getRoomCardBackgroundStyle(room)}
|
||||
aria-label={`${room.name} 선택`}
|
||||
>
|
||||
<span className="absolute inset-0 bg-[linear-gradient(180deg,rgba(2,6,23,0.12)_0%,rgba(2,6,23,0.76)_100%)]" />
|
||||
{selected ? (
|
||||
<span className="absolute right-2 top-2 inline-flex h-5 w-5 items-center justify-center rounded-full border border-sky-200/64 bg-sky-200/24 text-[10px] font-semibold text-sky-50">
|
||||
✓
|
||||
</span>
|
||||
) : null}
|
||||
<div className="absolute inset-x-2 bottom-2">
|
||||
<p className="truncate text-sm font-semibold text-white">{room.name}</p>
|
||||
<p className="truncate text-[11px] text-white/72">{room.vibeLabel}</p>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
1
src/widgets/space-focus-hud/index.ts
Normal file
1
src/widgets/space-focus-hud/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './ui/SpaceFocusHudWidget';
|
||||
14
src/widgets/space-focus-hud/ui/SpaceFocusHudWidget.tsx
Normal file
14
src/widgets/space-focus-hud/ui/SpaceFocusHudWidget.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import { SpaceTimerHudWidget } from '@/widgets/space-timer-hud';
|
||||
|
||||
interface SpaceFocusHudWidgetProps {
|
||||
goal: string;
|
||||
visible: boolean;
|
||||
}
|
||||
|
||||
export const SpaceFocusHudWidget = ({ goal, visible }: SpaceFocusHudWidgetProps) => {
|
||||
if (!visible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <SpaceTimerHudWidget timerLabel="25/5" goal={goal} isImmersionMode className="pr-[4.2rem]" />;
|
||||
};
|
||||
1
src/widgets/space-setup-drawer/index.ts
Normal file
1
src/widgets/space-setup-drawer/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './ui/SpaceSetupDrawerWidget';
|
||||
123
src/widgets/space-setup-drawer/ui/SpaceSetupDrawerWidget.tsx
Normal file
123
src/widgets/space-setup-drawer/ui/SpaceSetupDrawerWidget.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import type { RoomTheme } from '@/entities/room';
|
||||
import type { GoalChip, SoundPreset } from '@/entities/session';
|
||||
import { SpaceSelectCarousel } from '@/features/space-select';
|
||||
import { SessionGoalField } from '@/features/session-goal';
|
||||
import { Button } from '@/shared/ui';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
import { SpaceSideSheet } from '@/widgets/space-sheet-shell';
|
||||
|
||||
interface SpaceSetupDrawerWidgetProps {
|
||||
open: boolean;
|
||||
rooms: RoomTheme[];
|
||||
selectedRoomId: string;
|
||||
goalInput: string;
|
||||
selectedGoalId: string | null;
|
||||
selectedSoundPresetId: string;
|
||||
goalChips: GoalChip[];
|
||||
soundPresets: SoundPreset[];
|
||||
canStart: boolean;
|
||||
onClose: () => void;
|
||||
onRoomSelect: (roomId: string) => void;
|
||||
onGoalChange: (value: string) => void;
|
||||
onGoalChipSelect: (chip: GoalChip) => void;
|
||||
onSoundSelect: (soundPresetId: string) => void;
|
||||
onStart: () => void;
|
||||
}
|
||||
|
||||
export const SpaceSetupDrawerWidget = ({
|
||||
open,
|
||||
rooms,
|
||||
selectedRoomId,
|
||||
goalInput,
|
||||
selectedGoalId,
|
||||
selectedSoundPresetId,
|
||||
goalChips,
|
||||
soundPresets,
|
||||
canStart,
|
||||
onClose,
|
||||
onRoomSelect,
|
||||
onGoalChange,
|
||||
onGoalChipSelect,
|
||||
onSoundSelect,
|
||||
onStart,
|
||||
}: SpaceSetupDrawerWidgetProps) => {
|
||||
return (
|
||||
<SpaceSideSheet
|
||||
open={open}
|
||||
title="Setup"
|
||||
subtitle="공간 선택 → 목표(필수) → 사운드(선택)"
|
||||
onClose={onClose}
|
||||
widthClassName="w-[min(360px,94vw)]"
|
||||
footer={(
|
||||
<Button
|
||||
type="button"
|
||||
size="full"
|
||||
onClick={onStart}
|
||||
disabled={!canStart}
|
||||
className={cn(
|
||||
'h-11 rounded-xl !bg-sky-300/85 !text-slate-900 shadow-[0_10px_24px_rgba(125,211,252,0.26)] hover:!bg-sky-300 disabled:!bg-white/12 disabled:!text-white/42',
|
||||
)}
|
||||
>
|
||||
시작하기
|
||||
</Button>
|
||||
)}
|
||||
>
|
||||
<div className="space-y-5">
|
||||
<section className="space-y-2">
|
||||
<div className="space-y-0.5">
|
||||
<p className="text-[11px] uppercase tracking-[0.16em] text-white/55">Space</p>
|
||||
<p className="text-xs text-white/62">오늘 머물 공간을 하나 고르세요.</p>
|
||||
</div>
|
||||
<SpaceSelectCarousel
|
||||
rooms={rooms}
|
||||
selectedRoomId={selectedRoomId}
|
||||
onSelect={onRoomSelect}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="space-y-2">
|
||||
<div className="space-y-0.5">
|
||||
<p className="text-[11px] uppercase tracking-[0.16em] text-white/55">Goal</p>
|
||||
<p className="text-xs text-white/62">스킵 없이 한 줄 목표를 남겨주세요.</p>
|
||||
</div>
|
||||
<SessionGoalField
|
||||
goalInput={goalInput}
|
||||
selectedGoalId={selectedGoalId}
|
||||
goalChips={goalChips}
|
||||
onGoalChange={onGoalChange}
|
||||
onGoalChipSelect={onGoalChipSelect}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="space-y-2">
|
||||
<div className="space-y-0.5">
|
||||
<p className="text-[11px] uppercase tracking-[0.16em] text-white/55">Sound</p>
|
||||
<p className="text-xs text-white/62">선택 항목이에요. 필요 없으면 그대로 시작해도 됩니다.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{soundPresets.map((preset) => {
|
||||
const selected = preset.id === selectedSoundPresetId;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={preset.id}
|
||||
type="button"
|
||||
onClick={() => onSoundSelect(preset.id)}
|
||||
className={cn(
|
||||
'rounded-xl border px-3 py-2 text-left text-xs transition-colors',
|
||||
selected
|
||||
? 'border-sky-200/64 bg-sky-200/20 text-sky-50'
|
||||
: 'border-white/18 bg-white/8 text-white/78 hover:bg-white/14',
|
||||
)}
|
||||
>
|
||||
{preset.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</SpaceSideSheet>
|
||||
);
|
||||
};
|
||||
1
src/widgets/space-sheet-shell/index.ts
Normal file
1
src/widgets/space-sheet-shell/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './ui/SpaceSideSheet';
|
||||
85
src/widgets/space-sheet-shell/ui/SpaceSideSheet.tsx
Normal file
85
src/widgets/space-sheet-shell/ui/SpaceSideSheet.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, type ReactNode } from 'react';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
|
||||
interface SpaceSideSheetProps {
|
||||
open: boolean;
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
onClose: () => void;
|
||||
children: ReactNode;
|
||||
footer?: ReactNode;
|
||||
widthClassName?: string;
|
||||
}
|
||||
|
||||
export const SpaceSideSheet = ({
|
||||
open,
|
||||
title,
|
||||
subtitle,
|
||||
onClose,
|
||||
children,
|
||||
footer,
|
||||
widthClassName,
|
||||
}: SpaceSideSheetProps) => {
|
||||
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={cn(
|
||||
'fixed inset-y-0 right-0 z-50 p-2 sm:p-3',
|
||||
widthClassName ?? 'w-[min(360px,92vw)]',
|
||||
)}
|
||||
>
|
||||
<div className="flex h-full flex-col overflow-hidden rounded-3xl border border-white/16 bg-slate-950/68 text-white shadow-[0_24px_70px_rgba(2,6,23,0.55)] backdrop-blur-2xl">
|
||||
<header className="flex items-start justify-between gap-3 border-b border-white/10 px-4 py-3 sm:px-5">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-white">{title}</h2>
|
||||
{subtitle ? <p className="mt-1 text-xs text-white/58">{subtitle}</p> : null}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
aria-label="닫기"
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/18 bg-white/8 text-sm text-white/80 transition-colors hover:bg-white/14 hover:text-white"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div className="min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-5">{children}</div>
|
||||
|
||||
{footer ? <footer className="border-t border-white/10 bg-white/4 px-4 py-3 sm:px-5">{footer}</footer> : null}
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,139 +1,5 @@
|
||||
'use client';
|
||||
|
||||
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, 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';
|
||||
import { SpaceWorkspaceWidget } from '@/widgets/space-workspace';
|
||||
|
||||
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') ?? '오늘은 한 조각만 집중해요';
|
||||
const timerLabel = searchParams.get('timer') ?? '25/5';
|
||||
const soundFromQuery = searchParams.get('sound');
|
||||
|
||||
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
|
||||
aria-hidden
|
||||
className="absolute inset-0 w-full"
|
||||
style={getRoomBackgroundStyle(room)}
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'absolute inset-0 w-full transition-colors',
|
||||
isImmersionMode ? 'bg-slate-900/52' : 'bg-slate-800/40',
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'absolute inset-0 w-full transition-opacity',
|
||||
isImmersionMode ? 'opacity-44' : 'opacity-58',
|
||||
)}
|
||||
style={{
|
||||
background:
|
||||
'radial-gradient(68% 54% at 18% 0%, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%), radial-gradient(82% 64% at 82% 10%, rgba(186,230,253,0.24) 0%, rgba(186,230,253,0) 100%)',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'absolute inset-0 w-full transition-opacity',
|
||||
isImmersionMode ? 'opacity-34' : 'opacity-24',
|
||||
)}
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 2px)",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'absolute inset-0 w-full transition-opacity',
|
||||
isImmersionMode ? 'opacity-60' : 'opacity-42',
|
||||
)}
|
||||
style={{
|
||||
background:
|
||||
'radial-gradient(120% 90% at 50% 50%, rgba(2,6,23,0) 24%, rgba(2,6,23,0.46) 100%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 flex min-h-screen flex-col pr-14">
|
||||
<SpaceChromeWidget
|
||||
roomName={room.name}
|
||||
vibeLabel={room.vibeLabel}
|
||||
isImmersionMode={isImmersionMode}
|
||||
onExitRequested={handleExitRequested}
|
||||
/>
|
||||
|
||||
<main className="flex-1" />
|
||||
</div>
|
||||
|
||||
<SpaceTimerHudWidget
|
||||
timerLabel={timerLabel}
|
||||
goal={goal}
|
||||
isImmersionMode={isImmersionMode}
|
||||
/>
|
||||
|
||||
<SpaceToolsDockWidget
|
||||
roomName={room.name}
|
||||
activeMembers={room.activeMembers}
|
||||
presence={room.presence}
|
||||
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>
|
||||
);
|
||||
return <SpaceWorkspaceWidget />;
|
||||
};
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
export * from './model/types';
|
||||
export * from './ui/SpaceToolsDockWidget';
|
||||
|
||||
1
src/widgets/space-tools-dock/model/types.ts
Normal file
1
src/widgets/space-tools-dock/model/types.ts
Normal file
@@ -0,0 +1 @@
|
||||
export type SpaceToolPanelId = 'sound' | 'notes' | 'inbox' | 'stats' | 'settings';
|
||||
@@ -1,205 +1,161 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import type { RoomPresence } from '@/entities/room';
|
||||
import { CHECK_IN_PHRASES, REACTION_OPTIONS } from '@/entities/session';
|
||||
import { useCheckIn } from '@/features/check-in';
|
||||
import { useSoundPresetSelection } from '@/features/sound-preset';
|
||||
import type { RecentThought } from '@/entities/session';
|
||||
import type { SoundTrackKey } from '@/features/sound-preset';
|
||||
import { useToast } from '@/shared/ui';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
import { NotesSheetWidget } from '@/widgets/notes-sheet';
|
||||
import { QuickSheetWidget } from '@/widgets/quick-sheet';
|
||||
import { RoomSheetWidget } from '@/widgets/room-sheet';
|
||||
import { SoundSheetWidget } from '@/widgets/sound-sheet';
|
||||
import { useSpaceToolsDock } from '../model/useSpaceToolsDock';
|
||||
import { SpaceSideSheet } from '@/widgets/space-sheet-shell';
|
||||
import type { SpaceToolPanelId } from '../model/types';
|
||||
import { InboxToolPanel } from './panels/InboxToolPanel';
|
||||
import { NotesToolPanel } from './panels/NotesToolPanel';
|
||||
import { SettingsToolPanel } from './panels/SettingsToolPanel';
|
||||
import { SoundToolPanel } from './panels/SoundToolPanel';
|
||||
import { StatsToolPanel } from './panels/StatsToolPanel';
|
||||
|
||||
interface SpaceToolsDockWidgetProps {
|
||||
roomName: string;
|
||||
activeMembers: number;
|
||||
presence: RoomPresence;
|
||||
initialSoundPresetId?: string;
|
||||
isImmersionMode: boolean;
|
||||
onToggleImmersionMode: () => void;
|
||||
onThoughtCaptured?: (note: string) => void;
|
||||
isFocusMode: boolean;
|
||||
thoughts: RecentThought[];
|
||||
thoughtCount: number;
|
||||
selectedPresetId: string;
|
||||
onSelectPreset: (presetId: string) => void;
|
||||
isMixerOpen: boolean;
|
||||
onToggleMixer: () => void;
|
||||
isMuted: boolean;
|
||||
onMuteChange: (next: boolean) => void;
|
||||
masterVolume: number;
|
||||
onMasterVolumeChange: (next: number) => void;
|
||||
trackKeys: readonly SoundTrackKey[];
|
||||
trackLevels: Record<SoundTrackKey, number>;
|
||||
onTrackLevelChange: (track: SoundTrackKey, level: number) => void;
|
||||
onCaptureThought: (note: string) => void;
|
||||
onClearInbox: () => void;
|
||||
}
|
||||
|
||||
const TOOL_BUTTONS: Array<{
|
||||
id: 'sound' | 'room' | 'notes' | 'quick';
|
||||
const TOOL_ITEMS: Array<{
|
||||
id: SpaceToolPanelId;
|
||||
icon: string;
|
||||
label: string;
|
||||
}> = [
|
||||
{ id: 'sound', icon: '🎧', label: 'Sound' },
|
||||
{ id: 'room', icon: '👥', label: 'Room' },
|
||||
{ id: 'notes', icon: '📝', label: 'Notes' },
|
||||
{ id: 'quick', icon: '⚙️', label: 'Quick' },
|
||||
{ id: 'inbox', icon: '📨', label: 'Inbox' },
|
||||
{ id: 'stats', icon: '📊', label: 'Stats' },
|
||||
{ id: 'settings', icon: '⚙', label: 'Settings' },
|
||||
];
|
||||
|
||||
const PANEL_TITLE_MAP: Record<SpaceToolPanelId, string> = {
|
||||
sound: '사운드',
|
||||
notes: '생각 던지기',
|
||||
inbox: '인박스',
|
||||
stats: '집중 요약',
|
||||
settings: '설정',
|
||||
};
|
||||
|
||||
export const SpaceToolsDockWidget = ({
|
||||
roomName,
|
||||
activeMembers,
|
||||
presence,
|
||||
initialSoundPresetId,
|
||||
isImmersionMode,
|
||||
onToggleImmersionMode,
|
||||
onThoughtCaptured,
|
||||
isFocusMode,
|
||||
thoughts,
|
||||
thoughtCount,
|
||||
selectedPresetId,
|
||||
onSelectPreset,
|
||||
isMixerOpen,
|
||||
onToggleMixer,
|
||||
isMuted,
|
||||
onMuteChange,
|
||||
masterVolume,
|
||||
onMasterVolumeChange,
|
||||
trackKeys,
|
||||
trackLevels,
|
||||
onTrackLevelChange,
|
||||
onCaptureThought,
|
||||
onClearInbox,
|
||||
}: SpaceToolsDockWidgetProps) => {
|
||||
const { pushToast } = useToast();
|
||||
const { lastCheckIn, recordCheckIn } = useCheckIn();
|
||||
const { activePanel, closePanel, togglePanel } = useSpaceToolsDock();
|
||||
const [isRailExpanded, setRailExpanded] = useState(false);
|
||||
const {
|
||||
selectedPresetId,
|
||||
setSelectedPresetId,
|
||||
isMixerOpen,
|
||||
setMixerOpen,
|
||||
isMuted,
|
||||
setMuted,
|
||||
masterVolume,
|
||||
setMasterVolume,
|
||||
trackLevels,
|
||||
setTrackLevel,
|
||||
trackKeys,
|
||||
} = useSoundPresetSelection(initialSoundPresetId);
|
||||
|
||||
const isDockExpanded = !isImmersionMode || isRailExpanded || activePanel !== null;
|
||||
|
||||
const handleClosePanel = () => {
|
||||
closePanel();
|
||||
if (isImmersionMode) {
|
||||
setRailExpanded(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCheckIn = (message: string) => {
|
||||
recordCheckIn(message);
|
||||
pushToast({ title: `체크인: ${message}` });
|
||||
};
|
||||
|
||||
const handleReaction = (emoji: string) => {
|
||||
pushToast({ title: `리액션: ${emoji}` });
|
||||
};
|
||||
|
||||
const handleToolSelect = (panel: (typeof TOOL_BUTTONS)[number]['id']) => {
|
||||
if (isImmersionMode) {
|
||||
setRailExpanded(true);
|
||||
}
|
||||
togglePanel(panel);
|
||||
};
|
||||
const [activePanel, setActivePanel] = useState<SpaceToolPanelId | null>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
{activePanel ? (
|
||||
<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 transition-opacity',
|
||||
isFocusMode && activePanel === null
|
||||
? 'border-white/14 bg-slate-950/34 opacity-56 hover:opacity-100'
|
||||
: 'border-white/18 bg-slate-950/50 opacity-100',
|
||||
)}
|
||||
>
|
||||
{TOOL_ITEMS.map((item) => {
|
||||
const selected = activePanel === item.id;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
aria-label="시트 닫기"
|
||||
onClick={handleClosePanel}
|
||||
className="fixed inset-0 z-30 bg-slate-950/10"
|
||||
/>
|
||||
title={item.label}
|
||||
aria-label={item.label}
|
||||
onClick={() => setActivePanel(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
|
||||
? 'border-sky-200/64 bg-sky-200/22'
|
||||
: 'border-white/18 bg-white/8 hover:bg-white/14',
|
||||
)}
|
||||
>
|
||||
<span aria-hidden>{item.icon}</span>
|
||||
{item.id === 'inbox' && thoughtCount > 0 ? (
|
||||
<span className="absolute -right-1 -top-1 inline-flex min-w-[1rem] items-center justify-center rounded-full bg-sky-200/28 px-1 py-0.5 text-[9px] font-semibold text-sky-50">
|
||||
{thoughtCount > 99 ? '99+' : `${thoughtCount}`}
|
||||
</span>
|
||||
) : null}
|
||||
|
||||
<div
|
||||
className="fixed right-2 top-1/2 z-50 -translate-y-1/2"
|
||||
onMouseEnter={() => {
|
||||
if (isImmersionMode) {
|
||||
setRailExpanded(true);
|
||||
}
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
if (isImmersionMode && activePanel === null) {
|
||||
setRailExpanded(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col items-center gap-2 transition-all duration-200',
|
||||
isDockExpanded
|
||||
? 'w-12 rounded-2xl border border-white/20 bg-slate-950/66 py-2 shadow-lg shadow-slate-950/60 backdrop-blur-xl'
|
||||
: 'w-3 rounded-full border border-white/26 bg-slate-950/52 py-3',
|
||||
)}
|
||||
>
|
||||
{isDockExpanded ? (
|
||||
TOOL_BUTTONS.map((tool) => (
|
||||
<button
|
||||
key={tool.id}
|
||||
type="button"
|
||||
title={tool.label}
|
||||
onClick={() => handleToolSelect(tool.id)}
|
||||
className={cn(
|
||||
'inline-flex h-9 w-9 items-center justify-center rounded-xl border text-base transition-colors',
|
||||
activePanel === tool.id
|
||||
? 'border-sky-200/75 bg-sky-300/28'
|
||||
: 'border-white/20 bg-white/8 hover:bg-white/15',
|
||||
)}
|
||||
>
|
||||
<span aria-hidden>{tool.icon}</span>
|
||||
<span className="sr-only">{tool.label}</span>
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setRailExpanded(true)}
|
||||
className="inline-flex flex-col items-center gap-1 py-1"
|
||||
>
|
||||
<span className="sr-only">도구 레일 펼치기</span>
|
||||
<span aria-hidden className="h-1 w-1 rounded-full bg-white/74" />
|
||||
<span aria-hidden className="h-1 w-1 rounded-full bg-white/58" />
|
||||
<span aria-hidden className="h-1 w-1 rounded-full bg-white/44" />
|
||||
</button>
|
||||
)}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SpaceSideSheet
|
||||
open={activePanel !== null}
|
||||
title={activePanel ? PANEL_TITLE_MAP[activePanel] : ''}
|
||||
onClose={() => setActivePanel(null)}
|
||||
>
|
||||
{activePanel === 'sound' ? (
|
||||
<SoundSheetWidget
|
||||
onClose={handleClosePanel}
|
||||
<SoundToolPanel
|
||||
selectedPresetId={selectedPresetId}
|
||||
onSelectPreset={setSelectedPresetId}
|
||||
onSelectPreset={onSelectPreset}
|
||||
isMixerOpen={isMixerOpen}
|
||||
onToggleMixer={() => setMixerOpen((current) => !current)}
|
||||
onToggleMixer={onToggleMixer}
|
||||
isMuted={isMuted}
|
||||
onMuteChange={setMuted}
|
||||
onMuteChange={onMuteChange}
|
||||
masterVolume={masterVolume}
|
||||
onMasterVolumeChange={setMasterVolume}
|
||||
onMasterVolumeChange={onMasterVolumeChange}
|
||||
trackKeys={trackKeys}
|
||||
trackLevels={trackLevels}
|
||||
onTrackLevelChange={setTrackLevel}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{activePanel === 'room' ? (
|
||||
<RoomSheetWidget
|
||||
roomName={roomName}
|
||||
activeMembers={activeMembers}
|
||||
presence={presence}
|
||||
checkInPhrases={CHECK_IN_PHRASES}
|
||||
reactions={REACTION_OPTIONS}
|
||||
lastCheckIn={lastCheckIn}
|
||||
onClose={handleClosePanel}
|
||||
onCheckIn={handleCheckIn}
|
||||
onReaction={(reaction) => handleReaction(reaction.emoji)}
|
||||
onTrackLevelChange={onTrackLevelChange}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{activePanel === 'notes' ? (
|
||||
<NotesSheetWidget
|
||||
onClose={handleClosePanel}
|
||||
onNoteAdded={(note) => {
|
||||
pushToast({ title: `노트 추가: ${note}` });
|
||||
onThoughtCaptured?.(note);
|
||||
<NotesToolPanel
|
||||
onCaptureThought={(note) => {
|
||||
onCaptureThought(note);
|
||||
pushToast({ title: '인박스에 주차했어요 (더미)' });
|
||||
}}
|
||||
onNoteRemoved={() => pushToast({ title: '노트를 정리했어요' })}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{activePanel === 'quick' ? (
|
||||
<QuickSheetWidget
|
||||
onClose={handleClosePanel}
|
||||
isImmersionMode={isImmersionMode}
|
||||
onToggleImmersionMode={onToggleImmersionMode}
|
||||
{activePanel === 'inbox' ? (
|
||||
<InboxToolPanel
|
||||
thoughts={thoughts}
|
||||
onClear={() => {
|
||||
onClearInbox();
|
||||
pushToast({ title: '인박스를 비웠어요 (더미)' });
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{activePanel === 'stats' ? <StatsToolPanel /> : null}
|
||||
{activePanel === 'settings' ? <SettingsToolPanel /> : null}
|
||||
</SpaceSideSheet>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
25
src/widgets/space-tools-dock/ui/panels/InboxToolPanel.tsx
Normal file
25
src/widgets/space-tools-dock/ui/panels/InboxToolPanel.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import type { RecentThought } from '@/entities/session';
|
||||
import { InboxList } from '@/features/inbox';
|
||||
|
||||
interface InboxToolPanelProps {
|
||||
thoughts: RecentThought[];
|
||||
onClear: () => void;
|
||||
}
|
||||
|
||||
export const InboxToolPanel = ({ thoughts, onClear }: InboxToolPanelProps) => {
|
||||
return (
|
||||
<div className="space-y-3.5">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="text-xs text-white/58">나중에 모아보는 읽기 전용 인박스</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClear}
|
||||
className="rounded-full border border-white/20 bg-white/8 px-2.5 py-1 text-[11px] text-white/74 transition-colors hover:bg-white/14 hover:text-white"
|
||||
>
|
||||
모두 비우기
|
||||
</button>
|
||||
</div>
|
||||
<InboxList thoughts={thoughts} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
16
src/widgets/space-tools-dock/ui/panels/NotesToolPanel.tsx
Normal file
16
src/widgets/space-tools-dock/ui/panels/NotesToolPanel.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { DistractionDumpNotesContent } from '@/features/distraction-dump';
|
||||
|
||||
interface NotesToolPanelProps {
|
||||
onCaptureThought: (note: string) => void;
|
||||
}
|
||||
|
||||
export const NotesToolPanel = ({ onCaptureThought }: NotesToolPanelProps) => {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs text-white/58">
|
||||
집중 중 떠오른 생각을 잠깐 주차하세요. 저장 동작은 더미 토스트로만 처리됩니다.
|
||||
</p>
|
||||
<DistractionDumpNotesContent onNoteAdded={onCaptureThought} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
65
src/widgets/space-tools-dock/ui/panels/SettingsToolPanel.tsx
Normal file
65
src/widgets/space-tools-dock/ui/panels/SettingsToolPanel.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { DEFAULT_PRESET_OPTIONS } from '@/shared/config/settingsOptions';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
|
||||
export const SettingsToolPanel = () => {
|
||||
const [reduceMotion, setReduceMotion] = useState(false);
|
||||
const [defaultPresetId, setDefaultPresetId] = useState<
|
||||
(typeof DEFAULT_PRESET_OPTIONS)[number]['id']
|
||||
>(DEFAULT_PRESET_OPTIONS[0].id);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<section className="rounded-2xl border border-white/14 bg-white/7 px-3.5 py-3">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">Reduce Motion</p>
|
||||
<p className="mt-1 text-xs text-white/58">화면 전환을 조금 더 차분하게 표시합니다.</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={reduceMotion}
|
||||
onClick={() => setReduceMotion((current) => !current)}
|
||||
className={cn(
|
||||
'inline-flex w-14 items-center rounded-full border px-1 py-1 transition-colors',
|
||||
reduceMotion
|
||||
? 'border-sky-200/44 bg-sky-200/24'
|
||||
: 'border-white/24 bg-white/9',
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
'h-4.5 w-4.5 rounded-full bg-white transition-transform duration-200 motion-reduce:transition-none',
|
||||
reduceMotion ? 'translate-x-7' : 'translate-x-0',
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-2xl border border-white/14 bg-white/7 px-3.5 py-3">
|
||||
<p className="text-sm font-medium text-white">기본 프리셋</p>
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
{DEFAULT_PRESET_OPTIONS.map((preset) => (
|
||||
<button
|
||||
key={preset.id}
|
||||
type="button"
|
||||
onClick={() => setDefaultPresetId(preset.id)}
|
||||
className={cn(
|
||||
'rounded-full border px-3 py-1.5 text-xs transition-colors',
|
||||
defaultPresetId === preset.id
|
||||
? 'border-sky-200/44 bg-sky-200/20 text-sky-100'
|
||||
: 'border-white/18 bg-white/8 text-white/80 hover:bg-white/14',
|
||||
)}
|
||||
>
|
||||
{preset.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
48
src/widgets/space-tools-dock/ui/panels/SoundToolPanel.tsx
Normal file
48
src/widgets/space-tools-dock/ui/panels/SoundToolPanel.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import { SoundPresetControls, type SoundTrackKey } from '@/features/sound-preset';
|
||||
|
||||
interface SoundToolPanelProps {
|
||||
selectedPresetId: string;
|
||||
onSelectPreset: (presetId: string) => void;
|
||||
isMixerOpen: boolean;
|
||||
onToggleMixer: () => void;
|
||||
isMuted: boolean;
|
||||
onMuteChange: (next: boolean) => void;
|
||||
masterVolume: number;
|
||||
onMasterVolumeChange: (next: number) => void;
|
||||
trackKeys: readonly SoundTrackKey[];
|
||||
trackLevels: Record<SoundTrackKey, number>;
|
||||
onTrackLevelChange: (track: SoundTrackKey, level: number) => void;
|
||||
}
|
||||
|
||||
export const SoundToolPanel = ({
|
||||
selectedPresetId,
|
||||
onSelectPreset,
|
||||
isMixerOpen,
|
||||
onToggleMixer,
|
||||
isMuted,
|
||||
onMuteChange,
|
||||
masterVolume,
|
||||
onMasterVolumeChange,
|
||||
trackKeys,
|
||||
trackLevels,
|
||||
onTrackLevelChange,
|
||||
}: SoundToolPanelProps) => {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs text-white/58">오디오 재생은 연결하지 않은 UI 목업입니다.</p>
|
||||
<SoundPresetControls
|
||||
selectedPresetId={selectedPresetId}
|
||||
onSelectPreset={onSelectPreset}
|
||||
isMixerOpen={isMixerOpen}
|
||||
onToggleMixer={onToggleMixer}
|
||||
isMuted={isMuted}
|
||||
onMuteChange={onMuteChange}
|
||||
masterVolume={masterVolume}
|
||||
onMasterVolumeChange={onMasterVolumeChange}
|
||||
trackKeys={trackKeys}
|
||||
trackLevels={trackLevels}
|
||||
onTrackLevelChange={onTrackLevelChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
26
src/widgets/space-tools-dock/ui/panels/StatsToolPanel.tsx
Normal file
26
src/widgets/space-tools-dock/ui/panels/StatsToolPanel.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { TODAY_STATS, WEEKLY_STATS } from '@/entities/session';
|
||||
|
||||
export const StatsToolPanel = () => {
|
||||
const previewStats = [TODAY_STATS[0], TODAY_STATS[1], WEEKLY_STATS[0], WEEKLY_STATS[2]];
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<p className="text-xs text-white/58">오늘 흐름과 최근 7일 리듬을 가볍게 확인하세요.</p>
|
||||
|
||||
<section className="grid gap-2.5 sm:grid-cols-2">
|
||||
{previewStats.map((stat) => (
|
||||
<article key={stat.id} className="rounded-2xl border border-white/14 bg-white/7 px-3.5 py-3">
|
||||
<p className="text-[11px] text-white/58">{stat.label}</p>
|
||||
<p className="mt-1 text-lg font-semibold text-white">{stat.value}</p>
|
||||
<p className="mt-0.5 text-xs text-sky-100/78">{stat.delta}</p>
|
||||
</article>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<section className="rounded-2xl border border-white/14 bg-white/6 p-3.5">
|
||||
<div className="h-28 rounded-xl border border-dashed border-white/20 bg-[linear-gradient(180deg,rgba(148,163,184,0.14),rgba(148,163,184,0.02))]" />
|
||||
<p className="mt-2 text-[11px] text-white/54">그래프 플레이스홀더</p>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
1
src/widgets/space-workspace/index.ts
Normal file
1
src/widgets/space-workspace/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './ui/SpaceWorkspaceWidget';
|
||||
216
src/widgets/space-workspace/ui/SpaceWorkspaceWidget.tsx
Normal file
216
src/widgets/space-workspace/ui/SpaceWorkspaceWidget.tsx
Normal file
@@ -0,0 +1,216 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import {
|
||||
getRoomBackgroundStyle,
|
||||
getRoomById,
|
||||
ROOM_THEMES,
|
||||
} from '@/entities/room';
|
||||
import {
|
||||
GOAL_CHIPS,
|
||||
SOUND_PRESETS,
|
||||
useThoughtInbox,
|
||||
type GoalChip,
|
||||
} from '@/entities/session';
|
||||
import { useSoundPresetSelection } from '@/features/sound-preset';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
import { useToast } from '@/shared/ui';
|
||||
import { SpaceFocusHudWidget } from '@/widgets/space-focus-hud';
|
||||
import { SpaceSetupDrawerWidget } from '@/widgets/space-setup-drawer';
|
||||
import { SpaceToolsDockWidget } from '@/widgets/space-tools-dock';
|
||||
|
||||
type WorkspaceMode = 'setup' | 'focus';
|
||||
|
||||
const resolveInitialRoomId = (roomIdFromQuery: string | null) => {
|
||||
if (roomIdFromQuery && getRoomById(roomIdFromQuery)) {
|
||||
return roomIdFromQuery;
|
||||
}
|
||||
|
||||
return ROOM_THEMES[0].id;
|
||||
};
|
||||
|
||||
const resolveInitialSoundPreset = (presetIdFromQuery: string | null) => {
|
||||
if (presetIdFromQuery && SOUND_PRESETS.some((preset) => preset.id === presetIdFromQuery)) {
|
||||
return presetIdFromQuery;
|
||||
}
|
||||
|
||||
return SOUND_PRESETS[0].id;
|
||||
};
|
||||
|
||||
export const SpaceWorkspaceWidget = () => {
|
||||
const searchParams = useSearchParams();
|
||||
const { pushToast } = useToast();
|
||||
const { thoughts, thoughtCount, addThought, clearThoughts } = useThoughtInbox();
|
||||
|
||||
const initialRoomId = resolveInitialRoomId(searchParams.get('room'));
|
||||
const initialGoal = searchParams.get('goal')?.trim() ?? '';
|
||||
const initialSoundPresetId = resolveInitialSoundPreset(searchParams.get('sound'));
|
||||
|
||||
const [workspaceMode, setWorkspaceMode] = useState<WorkspaceMode>('setup');
|
||||
const [isSetupDrawerOpen, setSetupDrawerOpen] = useState(true);
|
||||
const [selectedRoomId, setSelectedRoomId] = useState(initialRoomId);
|
||||
const [goalInput, setGoalInput] = useState(initialGoal);
|
||||
const [selectedGoalId, setSelectedGoalId] = useState<string | null>(null);
|
||||
|
||||
const {
|
||||
selectedPresetId,
|
||||
setSelectedPresetId,
|
||||
isMixerOpen,
|
||||
setMixerOpen,
|
||||
isMuted,
|
||||
setMuted,
|
||||
masterVolume,
|
||||
setMasterVolume,
|
||||
trackLevels,
|
||||
setTrackLevel,
|
||||
trackKeys,
|
||||
} = useSoundPresetSelection(initialSoundPresetId);
|
||||
|
||||
const selectedRoom = useMemo(() => {
|
||||
return getRoomById(selectedRoomId) ?? ROOM_THEMES[0];
|
||||
}, [selectedRoomId]);
|
||||
|
||||
const canStart = goalInput.trim().length > 0;
|
||||
const isFocusMode = workspaceMode === 'focus';
|
||||
|
||||
const handleGoalChipSelect = (chip: GoalChip) => {
|
||||
setSelectedGoalId(chip.id);
|
||||
setGoalInput(chip.label);
|
||||
};
|
||||
|
||||
const handleGoalChange = (value: string) => {
|
||||
setGoalInput(value);
|
||||
|
||||
if (value.trim().length === 0) {
|
||||
setSelectedGoalId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleStart = () => {
|
||||
if (!canStart) {
|
||||
return;
|
||||
}
|
||||
|
||||
setWorkspaceMode('focus');
|
||||
setSetupDrawerOpen(false);
|
||||
|
||||
pushToast({
|
||||
title: '집중을 시작했어요 (더미)',
|
||||
description: `${selectedRoom.name} · ${goalInput.trim()}`,
|
||||
});
|
||||
};
|
||||
|
||||
const handleOpenSetup = () => {
|
||||
setWorkspaceMode('setup');
|
||||
setSetupDrawerOpen(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen overflow-hidden text-white">
|
||||
<div aria-hidden className="absolute inset-0" style={getRoomBackgroundStyle(selectedRoom)} />
|
||||
<div
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'absolute inset-0 transition-colors',
|
||||
isFocusMode ? 'bg-slate-900/44' : 'bg-slate-900/36',
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'absolute inset-0 transition-opacity',
|
||||
isFocusMode ? 'opacity-58' : 'opacity-68',
|
||||
)}
|
||||
style={{
|
||||
background:
|
||||
'radial-gradient(108% 86% at 18% 0%, rgba(148,163,184,0.32) 0%, rgba(2,6,23,0) 46%), radial-gradient(96% 80% at 88% 12%, rgba(125,211,252,0.2) 0%, rgba(2,6,23,0) 54%), linear-gradient(180deg, rgba(2,6,23,0.18) 0%, rgba(2,6,23,0.62) 100%)',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className={cn('absolute inset-0', isFocusMode ? 'opacity-[0.16]' : 'opacity-[0.12]')}
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 2px)",
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 flex min-h-screen flex-col pr-[4.25rem]">
|
||||
<header className="flex items-start justify-between px-4 pt-4 sm:px-6">
|
||||
<div className="rounded-2xl border border-white/18 bg-slate-950/44 px-3.5 py-2 backdrop-blur-xl">
|
||||
<p className="text-sm font-semibold tracking-tight text-white/92">VibeRoom</p>
|
||||
<p className="text-[11px] text-white/62">
|
||||
{selectedRoom.name} · {selectedRoom.vibeLabel}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{!isSetupDrawerOpen ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleOpenSetup}
|
||||
className="rounded-full border border-white/20 bg-slate-950/44 px-3 py-1.5 text-xs text-white/80 transition-colors hover:bg-slate-950/62 hover:text-white"
|
||||
>
|
||||
Setup 열기
|
||||
</button>
|
||||
) : null}
|
||||
</header>
|
||||
|
||||
<main className="relative flex-1">
|
||||
{isFocusMode ? null : (
|
||||
<div className="pointer-events-none absolute inset-x-4 top-1/2 -translate-y-1/2 sm:inset-x-6">
|
||||
<div className="max-w-xl rounded-3xl border border-white/14 bg-slate-950/38 px-6 py-5 backdrop-blur-sm">
|
||||
<p className="text-xs uppercase tracking-[0.18em] text-white/56">Workspace</p>
|
||||
<h1 className="mt-2 text-2xl font-semibold tracking-tight text-white sm:text-3xl">
|
||||
공간을 고르고 시작하세요
|
||||
</h1>
|
||||
<p className="mt-2 text-sm text-white/68">
|
||||
오른쪽 Setup에서 목표를 입력하면 바로 몰입 화면으로 전환됩니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<SpaceSetupDrawerWidget
|
||||
open={isSetupDrawerOpen}
|
||||
rooms={ROOM_THEMES}
|
||||
selectedRoomId={selectedRoom.id}
|
||||
goalInput={goalInput}
|
||||
selectedGoalId={selectedGoalId}
|
||||
selectedSoundPresetId={selectedPresetId}
|
||||
goalChips={GOAL_CHIPS}
|
||||
soundPresets={SOUND_PRESETS}
|
||||
canStart={canStart}
|
||||
onClose={() => setSetupDrawerOpen(false)}
|
||||
onRoomSelect={setSelectedRoomId}
|
||||
onGoalChange={handleGoalChange}
|
||||
onGoalChipSelect={handleGoalChipSelect}
|
||||
onSoundSelect={setSelectedPresetId}
|
||||
onStart={handleStart}
|
||||
/>
|
||||
|
||||
<SpaceFocusHudWidget goal={goalInput.trim()} visible={isFocusMode} />
|
||||
|
||||
<SpaceToolsDockWidget
|
||||
isFocusMode={isFocusMode}
|
||||
thoughts={thoughts}
|
||||
thoughtCount={thoughtCount}
|
||||
selectedPresetId={selectedPresetId}
|
||||
onSelectPreset={setSelectedPresetId}
|
||||
isMixerOpen={isMixerOpen}
|
||||
onToggleMixer={() => setMixerOpen((current) => !current)}
|
||||
isMuted={isMuted}
|
||||
onMuteChange={setMuted}
|
||||
masterVolume={masterVolume}
|
||||
onMasterVolumeChange={setMasterVolume}
|
||||
trackKeys={trackKeys}
|
||||
trackLevels={trackLevels}
|
||||
onTrackLevelChange={setTrackLevel}
|
||||
onCaptureThought={(note) => addThought(note, selectedRoom.name)}
|
||||
onClearInbox={clearThoughts}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user