172 lines
6.8 KiB
TypeScript
172 lines
6.8 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { cn } from '@/shared/lib/cn';
|
|
|
|
type EndSessionStage = 'decision' | 'success' | 'unfinished';
|
|
|
|
interface EndSessionConfirmModalProps {
|
|
open: boolean;
|
|
currentGoal: string;
|
|
onClose: () => void;
|
|
onAdvanceGoal: (nextGoal: string) => Promise<boolean> | boolean; // kept for compatibility if needed
|
|
onFinishHere: () => Promise<boolean> | boolean; // User achieved goal -> exit
|
|
onEndSession: () => Promise<boolean> | boolean; // User did not achieve -> exit
|
|
}
|
|
|
|
export const EndSessionConfirmModal = ({
|
|
open,
|
|
currentGoal,
|
|
onClose,
|
|
onFinishHere,
|
|
onEndSession,
|
|
}: EndSessionConfirmModalProps) => {
|
|
const [stage, setStage] = useState<EndSessionStage>('decision');
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
|
const trimmedGoal = currentGoal.trim() || '목표 없음';
|
|
|
|
useEffect(() => {
|
|
if (!open) {
|
|
setTimeout(() => setStage('decision'), 300); // Reset after close animation
|
|
setIsSubmitting(false);
|
|
}
|
|
}, [open]);
|
|
|
|
const handleFinish = async () => {
|
|
if (isSubmitting) return;
|
|
setIsSubmitting(true);
|
|
try {
|
|
const didFinish = await onFinishHere();
|
|
if (didFinish) onClose();
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const handleEnd = async () => {
|
|
if (isSubmitting) return;
|
|
setIsSubmitting(true);
|
|
try {
|
|
const didEnd = await onEndSession();
|
|
if (didEnd) onClose();
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
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)]',
|
|
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',
|
|
open ? 'opacity-100' : 'opacity-0',
|
|
)}
|
|
/>
|
|
|
|
<div
|
|
className={cn(
|
|
'relative flex w-full max-w-2xl flex-col items-center text-center transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]',
|
|
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">
|
|
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={() => 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"
|
|
>
|
|
네, 해냈습니다
|
|
</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"
|
|
>
|
|
아뇨, 아직입니다
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{stage === 'success' && (
|
|
<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>
|
|
</div>
|
|
<h3 className="text-4xl md:text-5xl font-light tracking-tight text-white mb-6">
|
|
완벽합니다.
|
|
</h3>
|
|
<p className="text-lg text-white/60 font-light mb-12 max-w-md leading-relaxed">
|
|
성공적으로 목표를 완수했습니다.<br/>스스로에게 보상을 줄 시간입니다.
|
|
</p>
|
|
<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"
|
|
>
|
|
{isSubmitting ? '저장 중...' : '로비로 돌아가기'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{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/>이 흐름을 다음 세션에 이어서 해볼까요?
|
|
</p>
|
|
<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"
|
|
>
|
|
{isSubmitting ? '저장 중...' : '저장하고 로비로 돌아가기'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |