feat(space): unify session closure result variants
This commit is contained in:
@@ -42,7 +42,7 @@ interface RawCurrentSessionThought {
|
||||
interface RawCompletionResult {
|
||||
completedSessionId: string;
|
||||
completionSource: 'timer-complete' | 'manual-end' | 'goal-complete';
|
||||
completedGoal: string;
|
||||
goalText: string;
|
||||
focusedSeconds: number;
|
||||
thoughts: RawCurrentSessionThought[];
|
||||
}
|
||||
@@ -79,7 +79,7 @@ export interface CurrentSessionThought {
|
||||
export interface CompletionResult {
|
||||
completedSessionId: string;
|
||||
completionSource: 'timer-complete' | 'manual-end' | 'goal-complete';
|
||||
completedGoal: string;
|
||||
goalText: string;
|
||||
focusedSeconds: number;
|
||||
thoughts: CurrentSessionThought[];
|
||||
}
|
||||
|
||||
@@ -122,26 +122,47 @@ export const spaceEn = {
|
||||
endSession: {
|
||||
...koSpace.endSession,
|
||||
trigger: 'END SESSION',
|
||||
eyebrow: 'END SESSION',
|
||||
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.',
|
||||
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',
|
||||
unfinishedAnswer: 'No, not yet',
|
||||
nextBlockButton: 'Next block',
|
||||
finishHereButton: 'Finish here',
|
||||
endHereButton: 'End session',
|
||||
backButton: 'Back',
|
||||
nextGoalLabel: 'Next block',
|
||||
nextGoalPlaceholder: 'e.g. Refine the travel budget',
|
||||
nextGoalConfirmButton: 'Start next block',
|
||||
decision: {
|
||||
...koSpace.endSession.decision,
|
||||
eyebrow: 'END SESSION',
|
||||
title: 'Did you finish this goal?',
|
||||
description: 'Decide how you want to close this block first.',
|
||||
goalLabel: 'Current goal',
|
||||
finishedAnswer: 'Yes, I finished it',
|
||||
unfinishedAnswer: 'No, not yet',
|
||||
cancelButton: 'Keep focusing',
|
||||
},
|
||||
unfinishedConfirm: {
|
||||
...koSpace.endSession.unfinishedConfirm,
|
||||
eyebrow: 'SAVE PROGRESS',
|
||||
title: 'Save this session and leave?',
|
||||
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: {
|
||||
...koSpace.quickNotes,
|
||||
|
||||
@@ -114,26 +114,43 @@ export const space = {
|
||||
},
|
||||
endSession: {
|
||||
trigger: 'END SESSION',
|
||||
eyebrow: 'END SESSION',
|
||||
title: '이번 목표를 끝냈나요?',
|
||||
description: '이 블록에 맞는 길을 고르면, 세션을 닫을 때 결과를 요약해서 보여준 뒤 앱 입구로 돌아갑니다.',
|
||||
goalLabel: '현재 목표',
|
||||
finishedTitle: '좋아요. 이 블록을 어떻게 닫을까요?',
|
||||
finishedDescription: '다음 블록을 바로 열거나, 이 세션을 여기서 조용히 닫을 수 있어요.',
|
||||
unfinishedTitle: '괜찮아요. 이 세션을 어떻게 할까요?',
|
||||
unfinishedDescription: '목표를 다 끝내지 못했어도, 이 세션은 여기서 닫을 수 있어요.',
|
||||
finishedAnswer: '네, 끝냈어요',
|
||||
unfinishedAnswer: '아직 아니에요',
|
||||
nextBlockButton: '다음 블록',
|
||||
finishHereButton: '여기서 마무리하기',
|
||||
endHereButton: '세션 종료하기',
|
||||
backButton: '돌아가기',
|
||||
nextGoalLabel: '다음 블록',
|
||||
nextGoalPlaceholder: '예: 여행 예산 정리하기',
|
||||
cancelButton: '계속 집중하기',
|
||||
confirmButton: '종료하기',
|
||||
confirmPending: '종료 중…',
|
||||
nextGoalConfirmButton: '다음 블록 시작',
|
||||
decision: {
|
||||
eyebrow: 'END SESSION',
|
||||
title: '이번 목표를 끝냈나요?',
|
||||
description: '이 블록을 어떻게 닫을지 먼저 정해요.',
|
||||
goalLabel: '현재 목표',
|
||||
finishedAnswer: '네, 끝냈어요',
|
||||
unfinishedAnswer: '아직 아니에요',
|
||||
cancelButton: '계속 집중하기',
|
||||
},
|
||||
unfinishedConfirm: {
|
||||
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: {
|
||||
sectionTitles: {
|
||||
|
||||
@@ -1,56 +1,61 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
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 {
|
||||
open: boolean;
|
||||
currentGoal: string;
|
||||
completionResult?: CompletionResult | null;
|
||||
onClose: () => void;
|
||||
onAdvanceGoal: (nextGoal: string) => Promise<boolean> | boolean; // kept for compatibility if needed
|
||||
onFinishHere: () => Promise<CompletionResult | null> | CompletionResult | null; // User achieved goal -> returns result
|
||||
onEndSession: () => Promise<boolean> | boolean; // User did not achieve -> exit
|
||||
onFinishHere: () => Promise<CompletionResult | null> | CompletionResult | null;
|
||||
onSaveAndReturn: () => Promise<CompletionResult | null> | CompletionResult | null;
|
||||
onBackToLobby: () => void;
|
||||
}
|
||||
|
||||
const formatFocusedMinutes = (focusedSeconds: number) => {
|
||||
const safeSeconds = Math.max(0, focusedSeconds);
|
||||
return Math.round(safeSeconds / 60);
|
||||
return Math.max(1, Math.round(safeSeconds / 60));
|
||||
};
|
||||
|
||||
export const EndSessionConfirmModal = ({
|
||||
open,
|
||||
currentGoal,
|
||||
completionResult = null,
|
||||
onClose,
|
||||
onFinishHere,
|
||||
onEndSession,
|
||||
onSaveAndReturn,
|
||||
onBackToLobby,
|
||||
}: EndSessionConfirmModalProps) => {
|
||||
const [stage, setStage] = useState<EndSessionStage>('decision');
|
||||
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(() => {
|
||||
if (!open) {
|
||||
resetTimerRef.current = window.setTimeout(() => {
|
||||
setStage('decision');
|
||||
setResult(null);
|
||||
}, 500);
|
||||
setStage('decision');
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (resetTimerRef.current !== null) {
|
||||
window.clearTimeout(resetTimerRef.current);
|
||||
resetTimerRef.current = null;
|
||||
}
|
||||
|
||||
const handleEscape = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape' && !isSubmitting) {
|
||||
const allowEscape = !isSubmitting && !completionResult;
|
||||
const handleEscape = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && allowEscape) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
@@ -59,59 +64,46 @@ export const EndSessionConfirmModal = ({
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleEscape);
|
||||
};
|
||||
}, [open, isSubmitting, onClose]);
|
||||
}, [completionResult, isSubmitting, onClose, open]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (resetTimerRef.current !== null) {
|
||||
window.clearTimeout(resetTimerRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
const handleFinishHere = async () => {
|
||||
if (isSubmitting) {
|
||||
return;
|
||||
}
|
||||
|
||||
const handleFinish = async () => {
|
||||
if (isSubmitting) return;
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const completionResult = await onFinishHere();
|
||||
if (completionResult) {
|
||||
setResult(completionResult);
|
||||
setStage('success'); // Transition to the grand finale instead of closing
|
||||
}
|
||||
await onFinishHere();
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEnd = async () => {
|
||||
if (isSubmitting) return;
|
||||
const handleSaveAndReturn = async () => {
|
||||
if (isSubmitting) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const didEnd = await onEndSession();
|
||||
if (didEnd) onClose();
|
||||
await onSaveAndReturn();
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const hasThoughts = result && result.thoughts.length > 0;
|
||||
const focusedMinutes = result ? formatFocusedMinutes(result.focusedSeconds) : 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
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',
|
||||
)}
|
||||
aria-hidden={!open}
|
||||
>
|
||||
<div
|
||||
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',
|
||||
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',
|
||||
)}
|
||||
>
|
||||
{stage === 'decision' && (
|
||||
<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
|
||||
{!completionResult ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={isSubmitting}
|
||||
className="absolute right-0 top-0 p-2 text-white/40 transition-colors hover:text-white"
|
||||
aria-label="Close end session modal"
|
||||
>
|
||||
x
|
||||
</button>
|
||||
) : null}
|
||||
|
||||
{activeStage === 'decision' ? (
|
||||
<div className="flex w-full animate-fade-in-up flex-col items-center">
|
||||
<p className="mb-6 text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 drop-shadow-md">
|
||||
{endSessionCopy.decision.eyebrow}
|
||||
</p>
|
||||
<h3 className="text-3xl md:text-5xl font-light tracking-tight text-white mb-10 leading-tight">
|
||||
이번 세션의 목표를<br/>달성하셨나요?
|
||||
<h3
|
||||
id="end-session-title"
|
||||
className="mb-10 text-3xl font-light leading-tight tracking-tight text-white md:text-5xl"
|
||||
>
|
||||
{endSessionCopy.decision.title}
|
||||
</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}
|
||||
<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">
|
||||
<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 flex-col sm:flex-row w-full max-w-md gap-4">
|
||||
<div className="flex w-full max-w-md flex-col gap-4 sm:flex-row">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleFinish}
|
||||
onClick={handleFinishHere}
|
||||
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"
|
||||
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 ? '결산 중...' : '네, 해냈습니다'}
|
||||
{isSubmitting
|
||||
? copy.space.goalComplete.finishPending
|
||||
: endSessionCopy.decision.finishedAnswer}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setStage('unfinished')}
|
||||
onClick={() => setStage('unfinished-confirm')}
|
||||
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"
|
||||
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>
|
||||
|
||||
{/* The Subdued Cancel Action */}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
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="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}
|
||||
|
||||
{stage === 'success' && result && (
|
||||
<div className="flex flex-col items-center animate-fade-in-up w-full">
|
||||
{/* Glowing Success Icon */}
|
||||
<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">
|
||||
<span className="text-5xl">🏆</span>
|
||||
{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>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<p className="text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 mb-4 drop-shadow-md">
|
||||
Session Closed
|
||||
<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 className="text-4xl md:text-5xl font-light tracking-tight text-white mb-6 leading-tight">
|
||||
완벽합니다.
|
||||
<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="text-lg text-white/60 font-light mb-12 max-w-md leading-relaxed">
|
||||
성공적으로 목표를 완수했습니다.<br/>스스로에게 보상을 줄 시간입니다.
|
||||
<p className="mb-12 max-w-md text-lg font-light leading-relaxed text-white/60">
|
||||
{endSessionCopy.resultSuccess.description}
|
||||
</p>
|
||||
|
||||
<div className="w-full grid gap-4 max-w-lg mb-12 text-left">
|
||||
{/* Massive Time Stat */}
|
||||
<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">
|
||||
<p className="text-[11px] font-bold uppercase tracking-[0.2em] text-white/40 mb-2">
|
||||
Total Focus Time
|
||||
<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 md:text-7xl font-light tracking-tighter text-white drop-shadow-[0_0_30px_rgba(255,255,255,0.2)]">
|
||||
{focusedMinutes}<span className="text-3xl text-white/50 font-medium ml-2">m</span>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* Goal Card */}
|
||||
<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">
|
||||
Completed Goal
|
||||
<p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
|
||||
{endSessionCopy.resultSuccess.goalLabel}
|
||||
</p>
|
||||
<p className="text-lg font-medium text-white/90">
|
||||
{result.completedGoal}
|
||||
{completionResult.goalText}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Thoughts Dumped */}
|
||||
{hasThoughts ? (
|
||||
<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">
|
||||
Distractions Dumped
|
||||
{endSessionCopy.resultSuccess.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">
|
||||
{result.thoughts.length}
|
||||
{completionResult.thoughts.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{result.thoughts.map((thought) => (
|
||||
{completionResult.thoughts.map((thought) => (
|
||||
<div
|
||||
key={thought.id}
|
||||
className="rounded-2xl border border-white/5 bg-black/20 px-4 py-3"
|
||||
@@ -239,43 +285,96 @@ export const EndSessionConfirmModal = ({
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
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"
|
||||
onClick={onBackToLobby}
|
||||
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>
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
|
||||
{stage === 'unfinished' && (
|
||||
<div className="flex flex-col items-center animate-fade-in-up w-full">
|
||||
<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">
|
||||
<span className="text-4xl opacity-80">🌱</span>
|
||||
</div>
|
||||
<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/>이 흐름을 다음 세션에 이어서 해볼까요?
|
||||
{activeStage === 'result-saved' && completionResult ? (
|
||||
<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.09),transparent)] shadow-[0_0_28px_rgba(255,255,255,0.06)]" />
|
||||
<p className="mb-4 text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 drop-shadow-md">
|
||||
{endSessionCopy.resultSaved.eyebrow}
|
||||
</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
|
||||
type="button"
|
||||
onClick={handleEnd}
|
||||
disabled={isSubmitting}
|
||||
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"
|
||||
onClick={onBackToLobby}
|
||||
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"
|
||||
>
|
||||
{isSubmitting ? '저장 중...' : '저장하고 로비로 돌아가기'}
|
||||
</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"
|
||||
>
|
||||
뒤로가기
|
||||
{endSessionCopy.resultSaved.backToLobby}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -23,13 +23,13 @@ interface SpaceFocusHudWidgetProps {
|
||||
goal?: string;
|
||||
microStep?: string | null;
|
||||
}) => boolean | Promise<boolean>;
|
||||
onGoalUpdate: (nextGoal: string) => boolean | Promise<boolean>;
|
||||
onGoalCompleteFinish: () => Promise<CompletionResult | null> | CompletionResult | null;
|
||||
onTimerFinish: () => Promise<CompletionResult | null> | CompletionResult | null;
|
||||
onSaveAndReturn: () => Promise<CompletionResult | null> | CompletionResult | null;
|
||||
onAddTenMinutes: () => boolean | Promise<boolean>;
|
||||
onStatusMessage: (payload: HudStatusLinePayload) => void;
|
||||
onCaptureThought: (note: string) => void;
|
||||
onExitRequested: () => boolean | Promise<boolean>;
|
||||
onBackToLobby: () => void;
|
||||
}
|
||||
|
||||
export const SpaceFocusHudWidget = ({
|
||||
@@ -44,13 +44,13 @@ export const SpaceFocusHudWidget = ({
|
||||
sessionPhase = "focus",
|
||||
completionResult = null,
|
||||
onIntentUpdate,
|
||||
onGoalUpdate,
|
||||
onGoalCompleteFinish,
|
||||
onTimerFinish,
|
||||
onSaveAndReturn,
|
||||
onAddTenMinutes,
|
||||
onStatusMessage,
|
||||
onCaptureThought,
|
||||
onExitRequested,
|
||||
onBackToLobby,
|
||||
}: SpaceFocusHudWidgetProps) => {
|
||||
const [overlay, setOverlay] = useState<"none" | "end-session" | "timer-complete">("none");
|
||||
const [isSavingIntent, setSavingIntent] = useState(false);
|
||||
@@ -207,16 +207,13 @@ export const SpaceFocusHudWidget = ({
|
||||
<EndSessionConfirmModal
|
||||
open={overlay === "end-session"}
|
||||
currentGoal={goal}
|
||||
completionResult={completionResult}
|
||||
onClose={() => {
|
||||
if (completionResult) {
|
||||
void onExitRequested();
|
||||
} else {
|
||||
setOverlay("none");
|
||||
}
|
||||
setOverlay("none");
|
||||
}}
|
||||
onAdvanceGoal={(nextGoal) => Promise.resolve(onGoalUpdate(nextGoal))}
|
||||
onFinishHere={() => Promise.resolve(onGoalCompleteFinish())}
|
||||
onEndSession={() => Promise.resolve(onExitRequested())}
|
||||
onSaveAndReturn={() => Promise.resolve(onSaveAndReturn())}
|
||||
onBackToLobby={onBackToLobby}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -323,15 +323,12 @@ export const useSpaceWorkspaceSessionControls = ({
|
||||
]);
|
||||
|
||||
const handleManualEnd = useCallback(async () => {
|
||||
const trimmedCurrentGoal = goalInput.trim();
|
||||
|
||||
if (!currentSession) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const completionResult = await completeSession({
|
||||
completionType: 'manual-end',
|
||||
completedGoal: trimmedCurrentGoal || undefined,
|
||||
});
|
||||
|
||||
if (!completionResult) {
|
||||
@@ -348,7 +345,6 @@ export const useSpaceWorkspaceSessionControls = ({
|
||||
}, [
|
||||
completeSession,
|
||||
currentSession,
|
||||
goalInput,
|
||||
pushStatusLine,
|
||||
setPendingSessionEntryPoint,
|
||||
setPreviewPlaybackState,
|
||||
|
||||
@@ -298,8 +298,17 @@ export const SpaceWorkspaceWidget = () => {
|
||||
}
|
||||
return completionResult;
|
||||
}}
|
||||
onSaveAndReturn={async () => {
|
||||
const completionResult = await controls.handleManualEnd();
|
||||
|
||||
if (completionResult) {
|
||||
setPendingCompletionResult(completionResult);
|
||||
setCurrentSessionThoughts([]);
|
||||
}
|
||||
|
||||
return completionResult;
|
||||
}}
|
||||
onAddTenMinutes={() => controls.handleExtendCurrentPhase(10)}
|
||||
onGoalUpdate={controls.handleGoalAdvance}
|
||||
onStatusMessage={pushStatusLine}
|
||||
onCaptureThought={(note) => {
|
||||
void addThought(note, selection.selectedScene.name).then((savedThought) => {
|
||||
@@ -322,25 +331,10 @@ export const SpaceWorkspaceWidget = () => {
|
||||
});
|
||||
});
|
||||
}}
|
||||
onExitRequested={async () => {
|
||||
if (pendingCompletionResult) {
|
||||
setPendingCompletionResult(null);
|
||||
setCurrentSessionThoughts([]);
|
||||
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;
|
||||
onBackToLobby={() => {
|
||||
setPendingCompletionResult(null);
|
||||
setCurrentSessionThoughts([]);
|
||||
void router.replace('/app');
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
Reference in New Issue
Block a user