feat(space): unify session closure result variants

This commit is contained in:
2026-03-17 19:23:06 +09:00
parent fd1b7123e2
commit 3204609f3d
7 changed files with 330 additions and 206 deletions

View File

@@ -42,7 +42,7 @@ interface RawCurrentSessionThought {
interface RawCompletionResult { interface RawCompletionResult {
completedSessionId: string; completedSessionId: string;
completionSource: 'timer-complete' | 'manual-end' | 'goal-complete'; completionSource: 'timer-complete' | 'manual-end' | 'goal-complete';
completedGoal: string; goalText: string;
focusedSeconds: number; focusedSeconds: number;
thoughts: RawCurrentSessionThought[]; thoughts: RawCurrentSessionThought[];
} }
@@ -79,7 +79,7 @@ export interface CurrentSessionThought {
export interface CompletionResult { export interface CompletionResult {
completedSessionId: string; completedSessionId: string;
completionSource: 'timer-complete' | 'manual-end' | 'goal-complete'; completionSource: 'timer-complete' | 'manual-end' | 'goal-complete';
completedGoal: string; goalText: string;
focusedSeconds: number; focusedSeconds: number;
thoughts: CurrentSessionThought[]; thoughts: CurrentSessionThought[];
} }

View File

@@ -122,26 +122,47 @@ export const spaceEn = {
endSession: { endSession: {
...koSpace.endSession, ...koSpace.endSession,
trigger: 'END SESSION', trigger: 'END SESSION',
decision: {
...koSpace.endSession.decision,
eyebrow: 'END SESSION', eyebrow: 'END SESSION',
title: 'Did you finish this goal?', title: 'Did you finish this goal?',
description: 'Choose the path that matches this block. If you close the session, we will show the result summary before you head back.', description: 'Decide how you want to close this block first.',
goalLabel: 'Current goal', goalLabel: 'Current goal',
cancelButton: 'Keep focusing',
confirmButton: 'End session',
confirmPending: 'Ending…',
finishedTitle: 'Nice. How do you want to close it?',
finishedDescription: 'You can open the next block right away, or close this session here.',
unfinishedTitle: 'Okay. What do you want to do with this session?',
unfinishedDescription: 'If the goal is not done yet, you can still close the session here.',
finishedAnswer: 'Yes, I finished it', finishedAnswer: 'Yes, I finished it',
unfinishedAnswer: 'No, not yet', unfinishedAnswer: 'No, not yet',
nextBlockButton: 'Next block', cancelButton: 'Keep focusing',
finishHereButton: 'Finish here', },
endHereButton: 'End session', unfinishedConfirm: {
backButton: 'Back', ...koSpace.endSession.unfinishedConfirm,
nextGoalLabel: 'Next block', eyebrow: 'SAVE PROGRESS',
nextGoalPlaceholder: 'e.g. Refine the travel budget', title: 'Save this session and leave?',
nextGoalConfirmButton: 'Start next block', description: 'The goal is not finished yet, but your focused time and thought capsule will stay here for later.',
keepFocusingButton: 'Keep focusing',
saveAndReturnButton: 'Save and return',
saveAndReturnPending: 'Saving…',
},
resultSuccess: {
...koSpace.endSession.resultSuccess,
eyebrow: 'SESSION CLOSED',
title: 'You finished the block.',
description: 'Your focused time, completed goal, and thought capsule are all captured here.',
focusedLabel: 'Focused time',
goalLabel: 'Completed goal',
thoughtsLabel: 'Thought capsule',
backToLobby: 'Back to lobby',
},
resultSaved: {
...koSpace.endSession.resultSaved,
eyebrow: 'SESSION SAVED',
title: 'This session is saved.',
description: 'The goal is not finished yet, but your time and notes are kept for later.',
focusedLabel: 'Focused time',
goalStatusLabel: 'Goal status',
goalStatusValue: 'Not finished yet',
goalLabel: 'Current goal',
thoughtsLabel: 'Thought capsule',
backToLobby: 'Back to lobby',
},
}, },
quickNotes: { quickNotes: {
...koSpace.quickNotes, ...koSpace.quickNotes,

View File

@@ -114,26 +114,43 @@ export const space = {
}, },
endSession: { endSession: {
trigger: 'END SESSION', trigger: 'END SESSION',
decision: {
eyebrow: 'END SESSION', eyebrow: 'END SESSION',
title: '이번 목표를 끝냈나요?', title: '이번 목표를 끝냈나요?',
description: '이 블록에 맞는 길을 고르면, 세션을 닫을 때 결과를 요약해서 보여준 뒤 앱 입구로 돌아갑니다.', description: '이 블록을 어떻게 닫을지 먼저 정해요.',
goalLabel: '현재 목표', goalLabel: '현재 목표',
finishedTitle: '좋아요. 이 블록을 어떻게 닫을까요?',
finishedDescription: '다음 블록을 바로 열거나, 이 세션을 여기서 조용히 닫을 수 있어요.',
unfinishedTitle: '괜찮아요. 이 세션을 어떻게 할까요?',
unfinishedDescription: '목표를 다 끝내지 못했어도, 이 세션은 여기서 닫을 수 있어요.',
finishedAnswer: '네, 끝냈어요', finishedAnswer: '네, 끝냈어요',
unfinishedAnswer: '아직 아니에요', unfinishedAnswer: '아직 아니에요',
nextBlockButton: '다음 블록',
finishHereButton: '여기서 마무리하기',
endHereButton: '세션 종료하기',
backButton: '돌아가기',
nextGoalLabel: '다음 블록',
nextGoalPlaceholder: '예: 여행 예산 정리하기',
cancelButton: '계속 집중하기', cancelButton: '계속 집중하기',
confirmButton: '종료하기', },
confirmPending: '종료 중…', unfinishedConfirm: {
nextGoalConfirmButton: '다음 블록 시작', eyebrow: 'SAVE PROGRESS',
title: '이 세션을 저장하고 나갈까요?',
description: '목표는 아직 끝나지 않았지만, 이번 집중 시간과 생각 캡슐은 그대로 남겨둘 수 있어요.',
keepFocusingButton: '계속 집중하기',
saveAndReturnButton: '저장하고 로비로 돌아가기',
saveAndReturnPending: '저장 중…',
},
resultSuccess: {
eyebrow: 'SESSION CLOSED',
title: '이 블록을 끝냈어요.',
description: '이번 세션의 집중 시간, 완료한 목표, 생각 캡슐을 정리해뒀어요.',
focusedLabel: '집중한 시간',
goalLabel: '완료한 목표',
thoughtsLabel: '이번 세션 생각 캡슐',
backToLobby: '로비로 돌아가기',
},
resultSaved: {
eyebrow: 'SESSION SAVED',
title: '이 세션은 저장됐어요.',
description: '목표는 아직 끝나지 않았지만, 이번 집중 시간과 생각 캡슐은 다음을 위해 남겨뒀어요.',
focusedLabel: '집중한 시간',
goalStatusLabel: '목표 상태',
goalStatusValue: '아직 끝나지 않았어요',
goalLabel: '현재 목표',
thoughtsLabel: '이번 세션 생각 캡슐',
backToLobby: '로비로 돌아가기',
},
}, },
controlCenter: { controlCenter: {
sectionTitles: { sectionTitles: {

View File

@@ -1,56 +1,61 @@
'use client'; 'use client';
import { useEffect, useRef, useState } from 'react';
import { cn } from '@/shared/lib/cn';
import type { CompletionResult } from '@/features/focus-session'; import type { CompletionResult } from '@/features/focus-session';
import { copy } from '@/shared/i18n';
import { cn } from '@/shared/lib/cn';
import { useEffect, useState } from 'react';
type EndSessionStage = 'decision' | 'success' | 'unfinished'; type EndSessionStage = 'decision' | 'unfinished-confirm';
interface EndSessionConfirmModalProps { interface EndSessionConfirmModalProps {
open: boolean; open: boolean;
currentGoal: string; currentGoal: string;
completionResult?: CompletionResult | null;
onClose: () => void; onClose: () => void;
onAdvanceGoal: (nextGoal: string) => Promise<boolean> | boolean; // kept for compatibility if needed onFinishHere: () => Promise<CompletionResult | null> | CompletionResult | null;
onFinishHere: () => Promise<CompletionResult | null> | CompletionResult | null; // User achieved goal -> returns result onSaveAndReturn: () => Promise<CompletionResult | null> | CompletionResult | null;
onEndSession: () => Promise<boolean> | boolean; // User did not achieve -> exit onBackToLobby: () => void;
} }
const formatFocusedMinutes = (focusedSeconds: number) => { const formatFocusedMinutes = (focusedSeconds: number) => {
const safeSeconds = Math.max(0, focusedSeconds); const safeSeconds = Math.max(0, focusedSeconds);
return Math.round(safeSeconds / 60); return Math.max(1, Math.round(safeSeconds / 60));
}; };
export const EndSessionConfirmModal = ({ export const EndSessionConfirmModal = ({
open, open,
currentGoal, currentGoal,
completionResult = null,
onClose, onClose,
onFinishHere, onFinishHere,
onEndSession, onSaveAndReturn,
onBackToLobby,
}: EndSessionConfirmModalProps) => { }: EndSessionConfirmModalProps) => {
const [stage, setStage] = useState<EndSessionStage>('decision'); const [stage, setStage] = useState<EndSessionStage>('decision');
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [result, setResult] = useState<CompletionResult | null>(null);
const resetTimerRef = useRef<number | null>(null);
const trimmedGoal = currentGoal.trim() || '목표 없음'; const endSessionCopy = copy.space.endSession;
const trimmedGoal = currentGoal.trim() || copy.space.focusHud.goalFallback;
const activeStage = completionResult
? completionResult.completionSource === 'manual-end'
? 'result-saved'
: 'result-success'
: stage;
const focusedMinutes = completionResult
? formatFocusedMinutes(completionResult.focusedSeconds)
: 0;
const hasThoughts = Boolean(completionResult && completionResult.thoughts.length > 0);
useEffect(() => { useEffect(() => {
if (!open) { if (!open) {
resetTimerRef.current = window.setTimeout(() => {
setStage('decision'); setStage('decision');
setResult(null);
}, 500);
setIsSubmitting(false); setIsSubmitting(false);
return; return;
} }
if (resetTimerRef.current !== null) { const allowEscape = !isSubmitting && !completionResult;
window.clearTimeout(resetTimerRef.current); const handleEscape = (event: KeyboardEvent) => {
resetTimerRef.current = null; if (event.key === 'Escape' && allowEscape) {
}
const handleEscape = (e: KeyboardEvent) => {
if (e.key === 'Escape' && !isSubmitting) {
onClose(); onClose();
} }
}; };
@@ -59,59 +64,46 @@ export const EndSessionConfirmModal = ({
return () => { return () => {
window.removeEventListener('keydown', handleEscape); window.removeEventListener('keydown', handleEscape);
}; };
}, [open, isSubmitting, onClose]); }, [completionResult, isSubmitting, onClose, open]);
useEffect(() => { const handleFinishHere = async () => {
return () => { if (isSubmitting) {
if (resetTimerRef.current !== null) { return;
window.clearTimeout(resetTimerRef.current);
} }
};
}, []);
const handleFinish = async () => {
if (isSubmitting) return;
setIsSubmitting(true); setIsSubmitting(true);
try { try {
const completionResult = await onFinishHere(); await onFinishHere();
if (completionResult) {
setResult(completionResult);
setStage('success'); // Transition to the grand finale instead of closing
}
} finally { } finally {
setIsSubmitting(false); setIsSubmitting(false);
} }
}; };
const handleEnd = async () => { const handleSaveAndReturn = async () => {
if (isSubmitting) return; if (isSubmitting) {
return;
}
setIsSubmitting(true); setIsSubmitting(true);
try { try {
const didEnd = await onEndSession(); await onSaveAndReturn();
if (didEnd) onClose();
} finally { } finally {
setIsSubmitting(false); setIsSubmitting(false);
} }
}; };
const hasThoughts = result && result.thoughts.length > 0;
const focusedMinutes = result ? formatFocusedMinutes(result.focusedSeconds) : 0;
return ( return (
<div <div
className={cn( className={cn(
'pointer-events-none fixed inset-0 z-[70] flex items-center justify-center px-4 transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]', 'pointer-events-none fixed inset-0 z-[70] flex items-center justify-center px-4 transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]',
open ? 'opacity-100' : 'opacity-0', open ? 'opacity-100' : 'opacity-0',
)} )}
aria-hidden={!open} aria-hidden={!open}
> >
<div <div
className={cn( className={cn(
'absolute inset-0 transition-all duration-700', 'absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.95)_100%)] backdrop-blur-2xl transition-opacity duration-500',
open ? 'opacity-100' : 'opacity-0', open ? 'opacity-100' : 'opacity-0',
stage === 'success'
? 'bg-[radial-gradient(circle_at_center,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.95)_100%)] backdrop-blur-3xl'
: 'bg-[radial-gradient(circle_at_center,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.95)_100%)] backdrop-blur-2xl'
)} )}
/> />
@@ -121,108 +113,162 @@ export const EndSessionConfirmModal = ({
open ? 'pointer-events-auto translate-y-0 scale-100' : 'pointer-events-none translate-y-8 scale-95', open ? 'pointer-events-auto translate-y-0 scale-100' : 'pointer-events-none translate-y-8 scale-95',
)} )}
> >
{stage === 'decision' && ( {!completionResult ? (
<div className="flex flex-col items-center animate-fade-in-up w-full">
<p className="text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 mb-6 drop-shadow-md">
Session Review
</p>
<h3 className="text-3xl md:text-5xl font-light tracking-tight text-white mb-10 leading-tight">
<br/>?
</h3>
<div className="w-full max-w-lg rounded-3xl border border-white/10 bg-white/5 p-6 mb-12 backdrop-blur-md shadow-2xl">
<p className="text-[10px] font-semibold uppercase tracking-widest text-white/40 mb-3">
</p>
<p className="text-xl font-medium text-white/90">
{trimmedGoal}
</p>
</div>
<div className="flex flex-col sm:flex-row w-full max-w-md gap-4">
<button
type="button"
onClick={handleFinish}
disabled={isSubmitting}
className="flex-1 rounded-full bg-white text-black px-6 py-4 text-[15px] font-semibold shadow-[0_0_30px_rgba(255,255,255,0.3)] transition-all hover:scale-105 active:scale-95 disabled:opacity-50"
>
{isSubmitting ? '결산 중...' : '네, 해냈습니다'}
</button>
<button
type="button"
onClick={() => setStage('unfinished')}
disabled={isSubmitting}
className="flex-1 rounded-full border border-white/20 bg-black/40 text-white px-6 py-4 text-[15px] font-medium backdrop-blur-md transition-all hover:bg-white/10 hover:border-white/40 active:scale-95 disabled:opacity-50"
>
,
</button>
</div>
{/* The Subdued Cancel Action */}
<button <button
type="button" type="button"
onClick={onClose} onClick={onClose}
disabled={isSubmitting} disabled={isSubmitting}
className="mt-8 text-[12px] font-medium text-white/30 hover:text-white/70 transition-colors underline decoration-transparent hover:decoration-white/30 underline-offset-4 disabled:opacity-50" className="absolute right-0 top-0 p-2 text-white/40 transition-colors hover:text-white"
aria-label="Close end session modal"
> >
x
</button> </button>
</div> ) : null}
)}
{stage === 'success' && result && ( {activeStage === 'decision' ? (
<div className="flex flex-col items-center animate-fade-in-up w-full"> <div className="flex w-full animate-fade-in-up flex-col items-center">
{/* Glowing Success Icon */} <p className="mb-6 text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 drop-shadow-md">
<div className="mb-8 inline-flex h-24 w-24 items-center justify-center rounded-full bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.15),transparent)] border border-white/20 shadow-[0_0_60px_rgba(255,255,255,0.15)] animate-pulse"> {endSessionCopy.decision.eyebrow}
<span className="text-5xl">🏆</span>
</div>
<p className="text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 mb-4 drop-shadow-md">
Session Closed
</p> </p>
<h3
<h3 className="text-4xl md:text-5xl font-light tracking-tight text-white mb-6 leading-tight"> id="end-session-title"
. className="mb-10 text-3xl font-light leading-tight tracking-tight text-white md:text-5xl"
>
{endSessionCopy.decision.title}
</h3> </h3>
<p className="text-lg text-white/60 font-light mb-12 max-w-md leading-relaxed"> <div className="mb-12 w-full max-w-lg rounded-3xl border border-white/10 bg-white/5 p-6 backdrop-blur-md shadow-2xl">
.<br/> . <p className="mb-3 text-[10px] font-semibold uppercase tracking-widest text-white/40">
{endSessionCopy.decision.goalLabel}
</p>
<p className="text-xl font-medium text-white/90">{trimmedGoal}</p>
</div>
<div className="flex w-full max-w-md flex-col gap-4 sm:flex-row">
<button
type="button"
onClick={handleFinishHere}
disabled={isSubmitting}
className="flex-1 rounded-full bg-white px-6 py-4 text-[15px] font-semibold text-black shadow-[0_0_30px_rgba(255,255,255,0.3)] transition-all hover:scale-105 active:scale-95 disabled:opacity-50"
>
{isSubmitting
? copy.space.goalComplete.finishPending
: endSessionCopy.decision.finishedAnswer}
</button>
<button
type="button"
onClick={() => setStage('unfinished-confirm')}
disabled={isSubmitting}
className="flex-1 rounded-full border border-white/20 bg-black/40 px-6 py-4 text-[15px] font-medium text-white backdrop-blur-md transition-all hover:border-white/40 hover:bg-white/10 active:scale-95 disabled:opacity-50"
>
{endSessionCopy.decision.unfinishedAnswer}
</button>
</div>
<button
type="button"
onClick={onClose}
disabled={isSubmitting}
className="mt-8 text-[12px] font-medium text-white/30 underline decoration-transparent underline-offset-4 transition-colors hover:text-white/70 hover:decoration-white/30 disabled:opacity-50"
>
{endSessionCopy.decision.cancelButton}
</button>
</div>
) : null}
{activeStage === 'unfinished-confirm' ? (
<div className="flex w-full animate-fade-in-up flex-col items-center">
<div className="mb-8 inline-flex h-20 w-20 items-center justify-center rounded-full border border-white/10 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.12),transparent)] shadow-[0_0_32px_rgba(255,255,255,0.08)]" />
<p className="mb-4 text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 drop-shadow-md">
{endSessionCopy.unfinishedConfirm.eyebrow}
</p>
<h3
id="end-session-title"
className="mb-6 text-3xl font-light tracking-tight text-white md:text-4xl"
>
{endSessionCopy.unfinishedConfirm.title}
</h3>
<p className="mb-10 max-w-md text-[16px] font-light leading-relaxed text-white/60">
{endSessionCopy.unfinishedConfirm.description}
</p> </p>
<div className="w-full grid gap-4 max-w-lg mb-12 text-left"> <div className="mb-12 w-full max-w-lg rounded-3xl border border-white/10 bg-white/5 p-6 backdrop-blur-md shadow-2xl">
{/* Massive Time Stat */} <p className="mb-3 text-[10px] font-semibold uppercase tracking-widest text-white/40">
<div className="rounded-3xl border border-white/10 bg-[linear-gradient(145deg,rgba(255,255,255,0.05)_0%,transparent_100%)] px-8 py-8 flex flex-col items-center justify-center text-center shadow-2xl backdrop-blur-md transition-transform hover:scale-[1.02] hover:border-white/20"> {endSessionCopy.decision.goalLabel}
<p className="text-[11px] font-bold uppercase tracking-[0.2em] text-white/40 mb-2">
Total Focus Time
</p> </p>
<p className="text-6xl md:text-7xl font-light tracking-tighter text-white drop-shadow-[0_0_30px_rgba(255,255,255,0.2)]"> <p className="text-xl font-medium text-white/90">{trimmedGoal}</p>
{focusedMinutes}<span className="text-3xl text-white/50 font-medium ml-2">m</span> </div>
<div className="flex w-full max-w-md flex-col gap-4 sm:flex-row">
<button
type="button"
onClick={onClose}
disabled={isSubmitting}
className="flex-1 rounded-full border border-white/20 bg-black/40 px-6 py-4 text-[15px] font-medium text-white backdrop-blur-md transition-all hover:border-white/40 hover:bg-white/10 active:scale-95 disabled:opacity-50"
>
{endSessionCopy.unfinishedConfirm.keepFocusingButton}
</button>
<button
type="button"
onClick={handleSaveAndReturn}
disabled={isSubmitting}
className="flex-1 rounded-full bg-white px-6 py-4 text-[15px] font-semibold text-black shadow-[0_0_30px_rgba(255,255,255,0.18)] transition-all hover:scale-105 active:scale-95 disabled:opacity-50"
>
{isSubmitting
? endSessionCopy.unfinishedConfirm.saveAndReturnPending
: endSessionCopy.unfinishedConfirm.saveAndReturnButton}
</button>
</div>
</div>
) : null}
{activeStage === 'result-success' && completionResult ? (
<div className="flex w-full animate-fade-in-up flex-col items-center">
<p className="mb-4 text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 drop-shadow-md">
{endSessionCopy.resultSuccess.eyebrow}
</p>
<h3
id="end-session-title"
className="mb-6 text-4xl font-light leading-tight tracking-tight text-white md:text-5xl"
>
{endSessionCopy.resultSuccess.title}
</h3>
<p className="mb-12 max-w-md text-lg font-light leading-relaxed text-white/60">
{endSessionCopy.resultSuccess.description}
</p>
<div className="mb-12 grid w-full max-w-lg gap-4 text-left">
<div className="flex flex-col items-center justify-center rounded-3xl border border-white/10 bg-[linear-gradient(145deg,rgba(255,255,255,0.05)_0%,transparent_100%)] px-8 py-8 text-center shadow-2xl backdrop-blur-md transition-transform hover:scale-[1.02] hover:border-white/20">
<p className="mb-2 text-[11px] font-bold uppercase tracking-[0.2em] text-white/40">
{endSessionCopy.resultSuccess.focusedLabel}
</p>
<p className="text-6xl font-light tracking-tighter text-white drop-shadow-[0_0_30px_rgba(255,255,255,0.2)] md:text-7xl">
{focusedMinutes}
<span className="ml-2 text-3xl font-medium text-white/50">m</span>
</p> </p>
</div> </div>
{/* Goal Card */}
<div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 backdrop-blur-md"> <div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 backdrop-blur-md">
<p className="text-[10px] font-semibold uppercase tracking-widest text-white/40 mb-2"> <p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
Completed Goal {endSessionCopy.resultSuccess.goalLabel}
</p> </p>
<p className="text-lg font-medium text-white/90"> <p className="text-lg font-medium text-white/90">
{result.completedGoal} {completionResult.goalText}
</p> </p>
</div> </div>
{/* Thoughts Dumped */}
{hasThoughts ? ( {hasThoughts ? (
<div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 backdrop-blur-md"> <div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 backdrop-blur-md">
<div className="flex items-center justify-between mb-4"> <div className="mb-4 flex items-center justify-between">
<p className="text-[10px] font-semibold uppercase tracking-widest text-white/40"> <p className="text-[10px] font-semibold uppercase tracking-widest text-white/40">
Distractions Dumped {endSessionCopy.resultSuccess.thoughtsLabel}
</p> </p>
<span className="inline-flex items-center justify-center rounded-full bg-white/10 px-2 py-0.5 text-[10px] font-bold text-white/70"> <span className="inline-flex items-center justify-center rounded-full bg-white/10 px-2 py-0.5 text-[10px] font-bold text-white/70">
{result.thoughts.length} {completionResult.thoughts.length}
</span> </span>
</div> </div>
<div className="space-y-3"> <div className="space-y-3">
{result.thoughts.map((thought) => ( {completionResult.thoughts.map((thought) => (
<div <div
key={thought.id} key={thought.id}
className="rounded-2xl border border-white/5 bg-black/20 px-4 py-3" className="rounded-2xl border border-white/5 bg-black/20 px-4 py-3"
@@ -239,43 +285,96 @@ export const EndSessionConfirmModal = ({
<button <button
type="button" type="button"
onClick={onClose} onClick={onBackToLobby}
className="rounded-full bg-white text-black px-12 py-4 text-[15px] font-semibold shadow-[0_0_30px_rgba(255,255,255,0.3)] transition-all duration-300 hover:scale-105 hover:shadow-[0_0_50px_rgba(255,255,255,0.5)] active:scale-95" className="rounded-full bg-white px-12 py-4 text-[15px] font-semibold text-black shadow-[0_0_30px_rgba(255,255,255,0.3)] transition-all duration-300 hover:scale-105 hover:shadow-[0_0_50px_rgba(255,255,255,0.5)] active:scale-95"
> >
{endSessionCopy.resultSuccess.backToLobby}
</button> </button>
</div> </div>
)} ) : null}
{stage === 'unfinished' && ( {activeStage === 'result-saved' && completionResult ? (
<div className="flex flex-col items-center animate-fade-in-up w-full"> <div className="flex w-full animate-fade-in-up flex-col items-center">
<div className="mb-8 inline-flex h-20 w-20 items-center justify-center rounded-full bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.1),transparent)] border border-white/10"> <div className="mb-8 inline-flex h-20 w-20 items-center justify-center rounded-full border border-white/10 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.09),transparent)] shadow-[0_0_28px_rgba(255,255,255,0.06)]" />
<span className="text-4xl opacity-80">🌱</span> <p className="mb-4 text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 drop-shadow-md">
</div> {endSessionCopy.resultSaved.eyebrow}
<h3 className="text-3xl md:text-4xl font-light tracking-tight text-white mb-6">
.<br/> .
</h3>
<p className="text-[16px] text-white/60 font-light mb-12 max-w-md leading-relaxed">
.<br/> ?
</p> </p>
<h3
id="end-session-title"
className="mb-6 text-4xl font-light leading-tight tracking-tight text-white md:text-5xl"
>
{endSessionCopy.resultSaved.title}
</h3>
<p className="mb-12 max-w-md text-lg font-light leading-relaxed text-white/60">
{endSessionCopy.resultSaved.description}
</p>
<div className="mb-12 grid w-full max-w-lg gap-4 text-left">
<div className="flex flex-col items-center justify-center rounded-3xl border border-white/10 bg-[linear-gradient(145deg,rgba(255,255,255,0.04)_0%,transparent_100%)] px-8 py-8 text-center shadow-2xl backdrop-blur-md">
<p className="mb-2 text-[11px] font-bold uppercase tracking-[0.2em] text-white/40">
{endSessionCopy.resultSaved.focusedLabel}
</p>
<p className="text-6xl font-light tracking-tighter text-white md:text-7xl">
{focusedMinutes}
<span className="ml-2 text-3xl font-medium text-white/50">m</span>
</p>
</div>
<div className="grid gap-4 md:grid-cols-[0.9fr_1.1fr]">
<div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 backdrop-blur-md">
<p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
{endSessionCopy.resultSaved.goalStatusLabel}
</p>
<p className="text-sm font-medium uppercase tracking-[0.18em] text-white/78">
{endSessionCopy.resultSaved.goalStatusValue}
</p>
</div>
<div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 backdrop-blur-md">
<p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
{endSessionCopy.resultSaved.goalLabel}
</p>
<p className="text-lg font-medium text-white/90">
{completionResult.goalText}
</p>
</div>
</div>
{hasThoughts ? (
<div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 backdrop-blur-md">
<div className="mb-4 flex items-center justify-between">
<p className="text-[10px] font-semibold uppercase tracking-widest text-white/40">
{endSessionCopy.resultSaved.thoughtsLabel}
</p>
<span className="inline-flex items-center justify-center rounded-full bg-white/10 px-2 py-0.5 text-[10px] font-bold text-white/70">
{completionResult.thoughts.length}
</span>
</div>
<div className="space-y-3">
{completionResult.thoughts.map((thought) => (
<div
key={thought.id}
className="rounded-2xl border border-white/5 bg-black/20 px-4 py-3"
>
<p className="text-[14px] leading-relaxed text-white/80">
{thought.text}
</p>
</div>
))}
</div>
</div>
) : null}
</div>
<button <button
type="button" type="button"
onClick={handleEnd} onClick={onBackToLobby}
disabled={isSubmitting} className="rounded-full bg-white px-12 py-4 text-[15px] font-semibold text-black shadow-[0_0_30px_rgba(255,255,255,0.3)] transition-all duration-300 hover:scale-105 hover:shadow-[0_0_50px_rgba(255,255,255,0.45)] active:scale-95"
className="rounded-full border border-white/20 bg-white/10 text-white px-10 py-4 text-[15px] font-medium backdrop-blur-md transition-all hover:bg-white/20 active:scale-95 disabled:opacity-50"
> >
{isSubmitting ? '저장 중...' : '저장하고 로비로 돌아가기'} {endSessionCopy.resultSaved.backToLobby}
</button>
<button
type="button"
onClick={() => setStage('decision')}
disabled={isSubmitting}
className="mt-8 text-[12px] font-medium text-white/30 hover:text-white/70 transition-colors underline decoration-transparent hover:decoration-white/30 underline-offset-4 disabled:opacity-50"
>
</button> </button>
</div> </div>
)} ) : null}
</div> </div>
</div> </div>
); );

View File

@@ -23,13 +23,13 @@ interface SpaceFocusHudWidgetProps {
goal?: string; goal?: string;
microStep?: string | null; microStep?: string | null;
}) => boolean | Promise<boolean>; }) => boolean | Promise<boolean>;
onGoalUpdate: (nextGoal: string) => boolean | Promise<boolean>;
onGoalCompleteFinish: () => Promise<CompletionResult | null> | CompletionResult | null; onGoalCompleteFinish: () => Promise<CompletionResult | null> | CompletionResult | null;
onTimerFinish: () => Promise<CompletionResult | null> | CompletionResult | null; onTimerFinish: () => Promise<CompletionResult | null> | CompletionResult | null;
onSaveAndReturn: () => Promise<CompletionResult | null> | CompletionResult | null;
onAddTenMinutes: () => boolean | Promise<boolean>; onAddTenMinutes: () => boolean | Promise<boolean>;
onStatusMessage: (payload: HudStatusLinePayload) => void; onStatusMessage: (payload: HudStatusLinePayload) => void;
onCaptureThought: (note: string) => void; onCaptureThought: (note: string) => void;
onExitRequested: () => boolean | Promise<boolean>; onBackToLobby: () => void;
} }
export const SpaceFocusHudWidget = ({ export const SpaceFocusHudWidget = ({
@@ -44,13 +44,13 @@ export const SpaceFocusHudWidget = ({
sessionPhase = "focus", sessionPhase = "focus",
completionResult = null, completionResult = null,
onIntentUpdate, onIntentUpdate,
onGoalUpdate,
onGoalCompleteFinish, onGoalCompleteFinish,
onTimerFinish, onTimerFinish,
onSaveAndReturn,
onAddTenMinutes, onAddTenMinutes,
onStatusMessage, onStatusMessage,
onCaptureThought, onCaptureThought,
onExitRequested, onBackToLobby,
}: SpaceFocusHudWidgetProps) => { }: SpaceFocusHudWidgetProps) => {
const [overlay, setOverlay] = useState<"none" | "end-session" | "timer-complete">("none"); const [overlay, setOverlay] = useState<"none" | "end-session" | "timer-complete">("none");
const [isSavingIntent, setSavingIntent] = useState(false); const [isSavingIntent, setSavingIntent] = useState(false);
@@ -207,16 +207,13 @@ export const SpaceFocusHudWidget = ({
<EndSessionConfirmModal <EndSessionConfirmModal
open={overlay === "end-session"} open={overlay === "end-session"}
currentGoal={goal} currentGoal={goal}
completionResult={completionResult}
onClose={() => { onClose={() => {
if (completionResult) {
void onExitRequested();
} else {
setOverlay("none"); setOverlay("none");
}
}} }}
onAdvanceGoal={(nextGoal) => Promise.resolve(onGoalUpdate(nextGoal))}
onFinishHere={() => Promise.resolve(onGoalCompleteFinish())} onFinishHere={() => Promise.resolve(onGoalCompleteFinish())}
onEndSession={() => Promise.resolve(onExitRequested())} onSaveAndReturn={() => Promise.resolve(onSaveAndReturn())}
onBackToLobby={onBackToLobby}
/> />
</> </>
); );

View File

@@ -323,15 +323,12 @@ export const useSpaceWorkspaceSessionControls = ({
]); ]);
const handleManualEnd = useCallback(async () => { const handleManualEnd = useCallback(async () => {
const trimmedCurrentGoal = goalInput.trim();
if (!currentSession) { if (!currentSession) {
return null; return null;
} }
const completionResult = await completeSession({ const completionResult = await completeSession({
completionType: 'manual-end', completionType: 'manual-end',
completedGoal: trimmedCurrentGoal || undefined,
}); });
if (!completionResult) { if (!completionResult) {
@@ -348,7 +345,6 @@ export const useSpaceWorkspaceSessionControls = ({
}, [ }, [
completeSession, completeSession,
currentSession, currentSession,
goalInput,
pushStatusLine, pushStatusLine,
setPendingSessionEntryPoint, setPendingSessionEntryPoint,
setPreviewPlaybackState, setPreviewPlaybackState,

View File

@@ -298,8 +298,17 @@ export const SpaceWorkspaceWidget = () => {
} }
return completionResult; return completionResult;
}} }}
onSaveAndReturn={async () => {
const completionResult = await controls.handleManualEnd();
if (completionResult) {
setPendingCompletionResult(completionResult);
setCurrentSessionThoughts([]);
}
return completionResult;
}}
onAddTenMinutes={() => controls.handleExtendCurrentPhase(10)} onAddTenMinutes={() => controls.handleExtendCurrentPhase(10)}
onGoalUpdate={controls.handleGoalAdvance}
onStatusMessage={pushStatusLine} onStatusMessage={pushStatusLine}
onCaptureThought={(note) => { onCaptureThought={(note) => {
void addThought(note, selection.selectedScene.name).then((savedThought) => { void addThought(note, selection.selectedScene.name).then((savedThought) => {
@@ -322,25 +331,10 @@ export const SpaceWorkspaceWidget = () => {
}); });
}); });
}} }}
onExitRequested={async () => { onBackToLobby={() => {
if (pendingCompletionResult) {
setPendingCompletionResult(null); setPendingCompletionResult(null);
setCurrentSessionThoughts([]); setCurrentSessionThoughts([]);
void router.replace('/app'); void router.replace('/app');
return true;
}
const completionResult = await controls.handleManualEnd();
if (completionResult) {
setCurrentSessionThoughts([]);
void router.replace('/app');
return true;
} else {
if (!currentSession) {
void router.replace('/app');
}
}
return false;
}} }}
/> />
) : null} ) : null}