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

feat(space): 종료 결과 모달과 current session thought 복원 추가

Browse Source
This commit is contained in:
corpi
2026-03-16 20:08:50 +09:00
parent 6194c19f3b
commit 1d2ce85cfd
10 changed files with 401 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
src/widgets/space-focus-hud/ui/CompletionResultModal.tsx Normal file
View File

@@ -0,0 +1,138 @@
'use client';
import { copy } from '@/shared/i18n';
import { cn } from '@/shared/lib/cn';
import type { CompletionResult } from '@/features/focus-session';
interface CompletionResultModalProps {
open: boolean;
result: CompletionResult | null;
onClose: () => void;
}
const formatFocusedMinutes = (focusedSeconds: number) => {
const safeSeconds = Math.max(0, focusedSeconds);
return Math.round(safeSeconds / 60);
};
export const CompletionResultModal = ({
open,
result,
onClose,
}: CompletionResultModalProps) => {
if (!result) {
return null;
}
const focusedMinutes = formatFocusedMinutes(result.focusedSeconds);
const hasThoughts = result.thoughts.length > 0;
return (
<div
className={cn(
'pointer-events-none fixed inset-0 z-[70] flex items-center justify-center px-4 transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]',
open ? 'opacity-100' : 'opacity-0',
)}
aria-hidden={!open}
>
<div
className={cn(
'absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(5,7,11,0.22)_0%,rgba(2,6,23,0.68)_52%,rgba(2,6,23,0.84)_100%)] backdrop-blur-[14px] transition-opacity duration-300',
open ? 'opacity-100' : 'opacity-0',
)}
/>
<section
className={cn(
'relative w-full max-w-[38rem] overflow-hidden rounded-[32px] border border-white/12 bg-[linear-gradient(180deg,rgba(18,22,30,0.96)_0%,rgba(8,11,17,0.94)_100%)] text-white shadow-[0_30px_100px_rgba(2,6,23,0.5)] transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]',
open ? 'pointer-events-auto translate-y-0 scale-100' : 'pointer-events-none translate-y-4 scale-[0.975]',
)}
role="dialog"
aria-modal="true"
aria-labelledby="completion-result-title"
>
<div
aria-hidden
className="pointer-events-none absolute inset-0 bg-[radial-gradient(100%_85%_at_50%_0%,rgba(255,255,255,0.12)_0%,rgba(255,255,255,0.02)_42%,rgba(255,255,255,0)_100%)]"
/>
<div className="relative px-7 py-7 md:px-9 md:py-8">
<header className="text-center">
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.06] shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]">
<span className="text-[20px] text-white/88">✦</span>
</div>
<p className="mt-5 text-[11px] font-medium tracking-[0.14em] text-white/34">
{copy.space.completionResult.eyebrow}
</p>
<h3
id="completion-result-title"
className="mx-auto mt-2 max-w-[24rem] text-[1.65rem] font-light leading-[1.16] tracking-[-0.03em] text-white/96 md:text-[1.9rem]"
>
{copy.space.completionResult.title}
</h3>
<p className="mx-auto mt-3 max-w-[28rem] text-[14px] leading-[1.7] text-white/56">
{copy.space.completionResult.description}
</p>
</header>
<div className="mt-7 grid gap-4">
<div className="rounded-[28px] border border-white/8 bg-black/16 px-5 py-5 text-center shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
<p className="text-[11px] font-medium uppercase tracking-[0.18em] text-white/34">
{copy.space.completionResult.focusedLabel}
</p>
<p className="mt-3 text-[2.6rem] font-light tracking-[-0.05em] text-white/96 md:text-[3.2rem]">
{copy.space.completionResult.focusedValue(focusedMinutes)}
</p>
</div>
<div className="rounded-[24px] border border-white/8 bg-black/14 px-5 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
<p className="text-[10px] font-medium uppercase tracking-[0.22em] text-white/34">
{copy.space.completionResult.goalLabel}
</p>
<p className="mt-2 text-[15px] font-medium leading-[1.45] tracking-[-0.01em] text-white/90">
{result.completedGoal}
</p>
</div>
{hasThoughts ? (
<div className="rounded-[24px] border border-white/8 bg-black/14 px-5 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
<div className="flex items-center justify-between gap-4">
<p className="text-[10px] font-medium uppercase tracking-[0.22em] text-white/34">
{copy.space.completionResult.thoughtsLabel}
</p>
<p className="text-[11px] text-white/38">
{copy.space.completionResult.thoughtCount(result.thoughts.length)}
</p>
</div>
<div className="mt-3 space-y-2.5">
{result.thoughts.map((thought) => (
<div
key={thought.id}
className="rounded-[18px] border border-white/7 bg-white/[0.04] px-4 py-3"
>
<p className="text-[13px] leading-[1.6] text-white/84">
{thought.text}
</p>
<p className="mt-2 text-[10px] uppercase tracking-[0.16em] text-white/32">
{thought.sceneName}
</p>
</div>
))}
</div>
</div>
) : null}
</div>
<footer className="mt-6 flex justify-center">
<button
type="button"
onClick={onClose}
className="inline-flex min-h-[3.5rem] min-w-[14rem] items-center justify-center rounded-[18px] border border-white/14 bg-white/[0.12] px-5 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white transition-all duration-200 hover:border-white/22 hover:bg-white/[0.17] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12"
>
{copy.space.completionResult.confirmButton}
</button>
</footer>
</div>
</section>
</div>
);
};

36
src/widgets/space-workspace/model/useSpaceWorkspaceSessionControls.ts
View File

@@ -1,7 +1,7 @@
'use client';
import { useCallback, useEffect, useRef } from 'react';
import type { FocusSession } from '@/features/focus-session';
import type { CompletionResult, FocusSession } from '@/features/focus-session';
import { copy } from '@/shared/i18n';
import type { HudStatusLinePayload } from '@/shared/lib/useHudStatusLine';
import { findAtmosphereOptionForSelection } from '@/widgets/focus-dashboard/model/atmosphereEntry';
@@ -47,7 +47,7 @@ interface UseSpaceWorkspaceSessionControlsParams {
completedGoal?: string;
focusScore?: number;
distractionCount?: number;
}) => Promise<FocusSession | null>;
}) => Promise<CompletionResult | null>;
advanceGoal: (input: {
completedGoal: string;
nextGoal: string;
@@ -313,39 +313,33 @@ export const useSpaceWorkspaceSessionControls = ({
const trimmedCurrentGoal = goalInput.trim();
if (!currentSession) {
return false;
return null;
}
const completedSession = await completeSession({
const completionResult = await completeSession({
completionType: 'goal-complete',
completedGoal: trimmedCurrentGoal || undefined,
});
if (!completedSession) {
if (!completionResult) {
pushStatusLine({
message: copy.space.workspace.goalCompleteSyncFailed,
});
return false;
return null;
}
setGoalInput('');
setLinkedFocusPlanItemId(null);
setSelectedGoalId(null);
setShowResumePrompt(false);
setPendingSessionEntryPoint('space-setup');
setPreviewPlaybackState('paused');
setWorkspaceMode('setup');
return true;
return completionResult;
}, [
completeSession,
currentSession,
goalInput,
pushStatusLine,
setGoalInput,
setLinkedFocusPlanItemId,
setPendingSessionEntryPoint,
setPreviewPlaybackState,
setSelectedGoalId,
setShowResumePrompt,
setWorkspaceMode,
]);
@@ -354,39 +348,33 @@ export const useSpaceWorkspaceSessionControls = ({
const trimmedCurrentGoal = goalInput.trim();
if (!currentSession) {
return false;
return null;
}
const completedSession = await completeSession({
const completionResult = await completeSession({
completionType: 'timer-complete',
completedGoal: trimmedCurrentGoal || undefined,
});
if (!completedSession) {
if (!completionResult) {
pushStatusLine({
message: copy.space.workspace.timerCompleteSyncFailed,
});
return false;
return null;
}
setGoalInput('');
setLinkedFocusPlanItemId(null);
setSelectedGoalId(null);
setShowResumePrompt(false);
setPendingSessionEntryPoint('space-setup');
setPreviewPlaybackState('paused');
setWorkspaceMode('setup');
return true;
return completionResult;
}, [
completeSession,
currentSession,
goalInput,
pushStatusLine,
setGoalInput,
setLinkedFocusPlanItemId,
setPendingSessionEntryPoint,
setPreviewPlaybackState,
setSelectedGoalId,
setShowResumePrompt,
setWorkspaceMode,
]);

105
src/widgets/space-workspace/ui/SpaceWorkspaceWidget.tsx
View File

@@ -9,7 +9,12 @@ import {
import { usePlanTier } from "@/entities/plan";
import { getSceneById, SCENE_THEMES } from "@/entities/scene";
import { GOAL_CHIPS, SOUND_PRESETS, useThoughtInbox } from "@/entities/session";
import { useFocusSessionEngine } from "@/features/focus-session";
import {
focusSessionApi,
type CompletionResult,
type CurrentSessionThought,
useFocusSessionEngine,
} from "@/features/focus-session";
import { useFocusStats } from "@/features/stats";
import {
useSoundPlayback,
@@ -19,6 +24,7 @@ import { useHudStatusLine } from "@/shared/lib/useHudStatusLine";
import { copy } from "@/shared/i18n";
import { SpaceFocusHudWidget } from "@/widgets/space-focus-hud";
import { SpaceSetupDrawerWidget } from "@/widgets/space-setup-drawer";
import { CompletionResultModal } from "@/widgets/space-focus-hud/ui/CompletionResultModal";
import {
findAtmosphereOptionForSelection,
getRecommendedDurationMinutes,
@@ -83,6 +89,8 @@ export const SpaceWorkspaceWidget = () => {
const [pendingSessionEntryPoint, setPendingSessionEntryPoint] =
useState<SessionEntryPoint>("space-setup");
const [showReviewTeaserAfterComplete, setShowReviewTeaserAfterComplete] = useState(false);
const [, setCurrentSessionThoughts] = useState<CurrentSessionThought[]>([]);
const [pendingCompletionResult, setPendingCompletionResult] = useState<CompletionResult | null>(null);
const {
selectedPresetId,
@@ -107,10 +115,12 @@ export const SpaceWorkspaceWidget = () => {
advanceGoal,
abandonSession,
} = useFocusSessionEngine();
const isCompletionResultOpen = pendingCompletionResult !== null;
const isFocusMode = workspaceMode === "focus";
const resolvedPlaybackState = currentSession?.state ?? previewPlaybackState;
const shouldPlaySound = isFocusMode && resolvedPlaybackState === "running";
const currentSessionId = currentSession?.id ?? null;
const { activeStatus, pushStatusLine, runActiveAction } =
useHudStatusLine(isFocusMode);
@@ -207,10 +217,10 @@ export const SpaceWorkspaceWidget = () => {
: undefined;
useEffect(() => {
if (!isBootstrapping && !currentSession) {
if (!isBootstrapping && !currentSession && !pendingCompletionResult) {
router.replace("/app");
}
}, [isBootstrapping, currentSession, router]);
}, [isBootstrapping, currentSession, pendingCompletionResult, router]);
useEffect(() => {
if (isBootstrapping || didResolveEntryRouteRef.current) {
@@ -224,6 +234,41 @@ export const SpaceWorkspaceWidget = () => {
}
}, [currentSession, isBootstrapping]);
useEffect(() => {
let mounted = true;
const syncCurrentSessionThoughts = async () => {
if (!currentSessionId) {
if (!pendingCompletionResult && mounted) {
setCurrentSessionThoughts([]);
}
return;
}
try {
const thoughts = await focusSessionApi.getCurrentSessionThoughts();
if (!mounted) {
return;
}
setCurrentSessionThoughts(thoughts);
} catch {
if (!mounted) {
return;
}
setCurrentSessionThoughts([]);
}
};
void syncCurrentSessionThoughts();
return () => {
mounted = false;
};
}, [currentSessionId, pendingCompletionResult]);
useEffect(() => {
const preferMobile =
typeof window !== "undefined"
@@ -258,7 +303,7 @@ export const SpaceWorkspaceWidget = () => {
</div>
<SpaceSetupDrawerWidget
open={!isFocusMode}
open={!isFocusMode && !isCompletionResultOpen}
scenes={selection.setupScenes}
sceneAssetMap={sceneAssetMap}
selectedSceneId={selection.selectedScene.id}
@@ -322,23 +367,63 @@ export const SpaceWorkspaceWidget = () => {
sessionPhase={phase ?? 'focus'}
onIntentUpdate={controls.handleIntentUpdate}
onGoalFinish={async () => {
const didFinish = await controls.handleGoalComplete();
const completionResult = await controls.handleGoalComplete();
if (didFinish) {
setShowReviewTeaserAfterComplete(true);
if (completionResult) {
setPendingCompletionResult(completionResult);
setCurrentSessionThoughts([]);
}
return didFinish;
return Boolean(completionResult);
}}
onTimerFinish={async () => {
const completionResult = await controls.handleTimerComplete();
if (completionResult) {
setPendingCompletionResult(completionResult);
setCurrentSessionThoughts([]);
}
return Boolean(completionResult);
}}
onTimerFinish={controls.handleTimerComplete}
onAddTenMinutes={() => controls.handleExtendCurrentPhase(10)}
onGoalUpdate={controls.handleGoalAdvance}
onStatusMessage={pushStatusLine}
onCaptureThought={(note) => addThought(note, selection.selectedScene.name)}
onCaptureThought={(note) => {
void addThought(note, selection.selectedScene.name).then((savedThought) => {
if (!savedThought) {
return;
}
setCurrentSessionThoughts((current) => {
if (current.some((thought) => thought.id === savedThought.id)) {
return current;
}
return [...current, {
id: savedThought.id,
text: savedThought.text,
sceneName: savedThought.sceneName,
capturedAt: savedThought.capturedAt,
isCompleted: savedThought.isCompleted ?? false,
}];
});
});
}}
onExitRequested={() => void controls.handleExitRequested()}
/>
) : null}
<CompletionResultModal
open={isCompletionResultOpen}
result={pendingCompletionResult}
onClose={() => {
setPendingCompletionResult(null);
setCurrentSessionThoughts([]);
router.replace('/app');
}}
/>
<FocusTopToast
visible={isFocusMode && Boolean(activeStatus)}
message={activeStatus?.message ?? ""}