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

refactor(space): simplify end session completion flow

Browse Source
This commit is contained in:
corpi
2026-03-17 18:13:28 +09:00
parent aff1a007b2
commit cd91ff9ae5
5 changed files with 163 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
src/widgets/space-focus-hud/ui/EndSessionConfirmModal.tsx
View File

@@ -2,6 +2,7 @@
import { useEffect, useState } from 'react';
import { cn } from '@/shared/lib/cn';
import type { CompletionResult } from '@/features/focus-session';
type EndSessionStage = 'decision' | 'success' | 'unfinished';
@@ -10,10 +11,15 @@ interface EndSessionConfirmModalProps {
currentGoal: string;
onClose: () => void;
onAdvanceGoal: (nextGoal: string) => Promise<boolean> | boolean; // kept for compatibility if needed
onFinishHere: () => Promise<boolean> | boolean; // User achieved goal -> exit
onFinishHere: () => Promise<CompletionResult | null> | CompletionResult | null; // User achieved goal -> returns result
onEndSession: () => Promise<boolean> | boolean; // User did not achieve -> exit
}
const formatFocusedMinutes = (focusedSeconds: number) => {
const safeSeconds = Math.max(0, focusedSeconds);
return Math.round(safeSeconds / 60);
};
export const EndSessionConfirmModal = ({
open,
currentGoal,
@@ -23,22 +29,39 @@ export const EndSessionConfirmModal = ({
}: EndSessionConfirmModalProps) => {
const [stage, setStage] = useState<EndSessionStage>('decision');
const [isSubmitting, setIsSubmitting] = useState(false);
const [result, setResult] = useState<CompletionResult | null>(null);
const trimmedGoal = currentGoal.trim() || '목표 없음';
useEffect(() => {
if (!open) {
setTimeout(() => setStage('decision'), 300); // Reset after close animation
setTimeout(() => {
setStage('decision');
setResult(null);
}, 500); // Reset after close animation
setIsSubmitting(false);
return;
}
}, [open]);
const handleEscape = (e: KeyboardEvent) => {
if (e.key === 'Escape' && !isSubmitting) {
onClose();
}
};
window.addEventListener('keydown', handleEscape);
return () => window.removeEventListener('keydown', handleEscape);
}, [open, isSubmitting, onClose]);
const handleFinish = async () => {
if (isSubmitting) return;
setIsSubmitting(true);
try {
const didFinish = await onFinishHere();
if (didFinish) onClose();
const completionResult = await onFinishHere();
if (completionResult) {
setResult(completionResult);
setStage('success'); // Transition to the grand finale instead of closing
}
} finally {
setIsSubmitting(false);
}
@@ -55,18 +78,24 @@ export const EndSessionConfirmModal = ({
}
};
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-500 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-700 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(0,0,0,0.6)_0%,rgba(0,0,0,0.95)_100%)] backdrop-blur-2xl transition-opacity duration-500',
'absolute inset-0 transition-all duration-700',
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'
)}
/>
@@ -76,16 +105,6 @@ export const EndSessionConfirmModal = ({
open ? 'pointer-events-auto translate-y-0 scale-100' : 'pointer-events-none translate-y-8 scale-95',
)}
>
<button
type="button"
onClick={onClose}
disabled={isSubmitting}
className="absolute right-0 top-0 p-2 text-white/40 hover:text-white transition-colors"
aria-label="닫기"
>
✕
</button>
{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">
@@ -107,40 +126,107 @@ export const EndSessionConfirmModal = ({
<div className="flex flex-col sm:flex-row w-full max-w-md gap-4">
<button
type="button"
onClick={() => setStage('success')}
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"
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')}
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={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
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"
>
취소하고 세션으로 돌아가기
</button>
</div>
)}
{stage === 'success' && (
{stage === 'success' && result && (
<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.2),transparent)] border border-white/20 shadow-[0_0_50px_rgba(255,255,255,0.2)]">
<span className="text-4xl">✨</span>
{/* 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>
</div>
<h3 className="text-4xl md:text-5xl font-light tracking-tight text-white mb-6">
<p className="text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 mb-4 drop-shadow-md">
Session Closed
</p>
<h3 className="text-4xl md:text-5xl font-light tracking-tight text-white mb-6 leading-tight">
완벽합니다.
</h3>
<p className="text-lg text-white/60 font-light mb-12 max-w-md leading-relaxed">
성공적으로 목표를 완수했습니다.<br/>스스로에게 보상을 줄 시간입니다.
</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
</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>
</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>
<p className="text-lg font-medium text-white/90">
{result.completedGoal}
</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">
<p className="text-[10px] font-semibold uppercase tracking-widest text-white/40">
Distractions Dumped
</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}
</span>
</div>
<div className="space-y-3">
{result.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={handleFinish}
disabled={isSubmitting}
className="rounded-full bg-white text-black px-10 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"
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"
>
{isSubmitting ? '저장 중...' : '로비로 돌아가기'}
로비로 돌아가기
</button>
</div>
)}
@@ -164,6 +250,14 @@ export const EndSessionConfirmModal = ({
>
{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"
>
뒤로가기
</button>
</div>
)}
</div>