corpi
9b013f1843
- 중앙 모놀리스 영역에서 벗어나 화면 최하단의 플로팅 바 형식으로 UI 전면 개편 - 마우스 호버 시 알약(Pill) 형태로 변하고, 활성화 시 거대한 입력창으로 몰핑되는 부드러운 트랜지션 적용 - backdrop-filter 팝인 버그 수정을 위한 transition 개별 요소 적용 - Cmd+K (Mac) 및 Ctrl+K (Windows) 단축키 인식 오류 수정 및 전역 이벤트 리스너 리팩토링 - 마우스 호버 시 뷰가 부르르 떨리는 현상(Jittering)을 가상 요소(before) 히트박스로 원천 차단
336 lines
16 KiB
TypeScript
336 lines
16 KiB
TypeScript
'use client';
|
|
|
|
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' | 'unfinished-confirm';
|
|
|
|
interface EndSessionConfirmModalProps {
|
|
open: boolean;
|
|
currentGoal: string;
|
|
completionResult?: CompletionResult | null;
|
|
onClose: () => void;
|
|
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.max(1, Math.round(safeSeconds / 60));
|
|
};
|
|
|
|
export const EndSessionConfirmModal = ({
|
|
open,
|
|
currentGoal,
|
|
completionResult = null,
|
|
onClose,
|
|
onFinishHere,
|
|
onSaveAndReturn,
|
|
onBackToLobby,
|
|
}: EndSessionConfirmModalProps) => {
|
|
const [stage, setStage] = useState<EndSessionStage>('decision');
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
|
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) {
|
|
// Add a slight delay before resetting state so the fade-out animation can finish smoothly
|
|
const timer = setTimeout(() => {
|
|
setStage('decision');
|
|
setIsSubmitting(false);
|
|
}, 700);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
|
|
const allowEscape = !isSubmitting && !completionResult;
|
|
const handleEscape = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape' && allowEscape) {
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('keydown', handleEscape);
|
|
return () => {
|
|
window.removeEventListener('keydown', handleEscape);
|
|
};
|
|
}, [completionResult, isSubmitting, onClose, open]);
|
|
|
|
const handleFinishHere = async () => {
|
|
if (isSubmitting) return;
|
|
setIsSubmitting(true);
|
|
try {
|
|
await onFinishHere();
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const handleSaveAndReturn = async () => {
|
|
if (isSubmitting) return;
|
|
setIsSubmitting(true);
|
|
try {
|
|
await onSaveAndReturn();
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'pointer-events-none fixed inset-0 z-[70] flex items-center justify-center px-4',
|
|
)}
|
|
aria-hidden={!open}
|
|
>
|
|
{/* Abyssal Backdrop: Direct filter animation to prevent WebKit blur pop-in */}
|
|
<div
|
|
onClick={() => {
|
|
if (activeStage === 'decision' || activeStage === 'unfinished-confirm') {
|
|
onClose();
|
|
}
|
|
}}
|
|
className={cn(
|
|
'absolute inset-0 transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] transform-gpu',
|
|
open ? 'bg-black/80 backdrop-blur-[40px] pointer-events-auto' : 'bg-transparent backdrop-blur-none pointer-events-none',
|
|
)}
|
|
>
|
|
<div className={cn("absolute inset-0 bg-[url('/noise.png')] mix-blend-overlay pointer-events-none transition-opacity duration-1000", open ? "opacity-20" : "opacity-0")} />
|
|
<div className={cn("absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.03)_0%,transparent_70%)] pointer-events-none transition-opacity duration-1000", open ? "opacity-100" : "opacity-0")} />
|
|
</div>
|
|
|
|
<div
|
|
className={cn(
|
|
'relative flex w-full max-w-2xl flex-col items-center text-center transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)]',
|
|
'max-h-[100dvh] overflow-y-auto overscroll-y-contain py-12 sm:py-16 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]',
|
|
open ? 'pointer-events-auto translate-y-0 scale-100 opacity-100' : 'pointer-events-none translate-y-12 scale-[0.98] opacity-0',
|
|
)}
|
|
>
|
|
{activeStage === 'decision' ? (
|
|
<div className="flex w-full flex-col items-center animate-in fade-in slide-in-from-bottom-8 duration-1000">
|
|
<p className="mb-6 text-[10px] font-medium uppercase tracking-[0.4em] text-white/30 drop-shadow-sm">
|
|
{endSessionCopy.decision.eyebrow}
|
|
</p>
|
|
<h3
|
|
id="end-session-title"
|
|
className="mb-12 text-4xl font-extralight tracking-tight text-white/90 md:text-5xl drop-shadow-[0_0_40px_rgba(255,255,255,0.1)]"
|
|
>
|
|
{endSessionCopy.decision.title}
|
|
</h3>
|
|
|
|
{/* Volumetric Card */}
|
|
<div className="mb-14 w-full max-w-lg rounded-3xl border border-white/[0.04] bg-white/[0.02] p-8 shadow-[inset_0_0_20px_rgba(255,255,255,0.01),0_20px_40px_rgba(0,0,0,0.4)] backdrop-blur-md">
|
|
<p className="mb-4 text-[9px] font-semibold uppercase tracking-[0.3em] text-white/30">
|
|
{endSessionCopy.decision.goalLabel}
|
|
</p>
|
|
<p className="text-xl font-light leading-relaxed tracking-wide text-white/80">{trimmedGoal}</p>
|
|
</div>
|
|
|
|
<div className="flex w-full max-w-md flex-col gap-4 sm:flex-row">
|
|
{/* Primary CTA (The Pearl) */}
|
|
<button
|
|
type="button"
|
|
onClick={handleFinishHere}
|
|
disabled={isSubmitting}
|
|
className="group relative flex-1 overflow-hidden rounded-full bg-white px-6 py-4 text-[14px] font-medium text-black transition-all duration-500 hover:scale-[1.02] hover:shadow-[0_0_40px_rgba(255,255,255,0.2)] active:scale-[0.98] disabled:opacity-50"
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/5 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
|
<span className="relative z-10">
|
|
{isSubmitting
|
|
? copy.space.goalComplete.finishPending
|
|
: endSessionCopy.decision.finishedAnswer}
|
|
</span>
|
|
</button>
|
|
|
|
{/* Secondary CTA (Ghost Button) */}
|
|
<button
|
|
type="button"
|
|
onClick={() => setStage('unfinished-confirm')}
|
|
disabled={isSubmitting}
|
|
className="flex-1 rounded-full border border-white/10 bg-transparent px-6 py-4 text-[14px] font-light text-white/60 transition-all duration-500 hover:border-white/20 hover:bg-white/[0.03] hover:text-white/90 active:scale-[0.98] disabled:opacity-50"
|
|
>
|
|
{endSessionCopy.decision.unfinishedAnswer}
|
|
</button>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
disabled={isSubmitting}
|
|
className="mt-10 text-[11px] font-light uppercase tracking-widest text-white/20 transition-all duration-300 hover:text-white/60 disabled:opacity-50"
|
|
>
|
|
{endSessionCopy.decision.cancelButton}
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
|
|
{activeStage === 'unfinished-confirm' ? (
|
|
<div className="flex w-full flex-col items-center animate-in fade-in zoom-in-95 duration-700">
|
|
<div className="mb-10 inline-flex h-16 w-16 items-center justify-center rounded-full border border-white/5 bg-white/[0.02] shadow-[inset_0_0_15px_rgba(255,255,255,0.02)] backdrop-blur-md" />
|
|
<p className="mb-4 text-[10px] font-medium uppercase tracking-[0.4em] text-white/30">
|
|
{endSessionCopy.unfinishedConfirm.eyebrow}
|
|
</p>
|
|
<h3
|
|
id="end-session-title"
|
|
className="mb-6 text-3xl font-extralight tracking-tight text-white/90 md:text-4xl"
|
|
>
|
|
{endSessionCopy.unfinishedConfirm.title}
|
|
</h3>
|
|
<p className="mb-12 max-w-md text-[15px] font-light leading-relaxed text-white/50">
|
|
{endSessionCopy.unfinishedConfirm.description}
|
|
</p>
|
|
|
|
<div className="mb-14 w-full max-w-lg rounded-3xl border border-white/[0.04] bg-white/[0.02] p-8 shadow-[inset_0_0_20px_rgba(255,255,255,0.01),0_20px_40px_rgba(0,0,0,0.4)] backdrop-blur-md">
|
|
<p className="mb-4 text-[9px] font-semibold uppercase tracking-[0.3em] text-white/30">
|
|
{endSessionCopy.decision.goalLabel}
|
|
</p>
|
|
<p className="text-xl font-light leading-relaxed tracking-wide text-white/80">{trimmedGoal}</p>
|
|
</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/10 bg-transparent px-6 py-4 text-[14px] font-light text-white/60 transition-all duration-500 hover:border-white/20 hover:bg-white/[0.03] hover:text-white/90 active:scale-[0.98] disabled:opacity-50"
|
|
>
|
|
{endSessionCopy.unfinishedConfirm.keepFocusingButton}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleSaveAndReturn}
|
|
disabled={isSubmitting}
|
|
className="group relative flex-1 overflow-hidden rounded-full bg-white px-6 py-4 text-[14px] font-medium text-black transition-all duration-500 hover:scale-[1.02] hover:shadow-[0_0_40px_rgba(255,255,255,0.2)] active:scale-[0.98] disabled:opacity-50"
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/5 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
|
<span className="relative z-10">
|
|
{isSubmitting
|
|
? endSessionCopy.unfinishedConfirm.saveAndReturnPending
|
|
: endSessionCopy.unfinishedConfirm.saveAndReturnButton}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{(activeStage === 'result-success' || activeStage === 'result-saved') && completionResult ? (
|
|
<div className="flex w-full flex-col items-center">
|
|
{/* Stage dependent subtle glow */}
|
|
<div className={cn(
|
|
"mb-10 inline-flex h-16 w-16 items-center justify-center rounded-full border border-white/10 backdrop-blur-md animate-in fade-in zoom-in duration-1000",
|
|
activeStage === 'result-success'
|
|
? "bg-white/[0.04] shadow-[0_0_50px_rgba(255,255,255,0.1),inset_0_0_20px_rgba(255,255,255,0.05)]"
|
|
: "bg-white/[0.02] shadow-[inset_0_0_15px_rgba(255,255,255,0.02)]"
|
|
)} />
|
|
|
|
<p className="mb-4 text-[10px] font-medium uppercase tracking-[0.4em] text-white/30 animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-150 fill-mode-both">
|
|
{activeStage === 'result-success' ? endSessionCopy.resultSuccess.eyebrow : endSessionCopy.resultSaved.eyebrow}
|
|
</p>
|
|
<h3
|
|
id="end-session-title"
|
|
className="mb-8 text-4xl font-extralight tracking-tight text-white/90 md:text-5xl animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-300 fill-mode-both drop-shadow-[0_0_40px_rgba(255,255,255,0.1)]"
|
|
>
|
|
{activeStage === 'result-success' ? endSessionCopy.resultSuccess.title : endSessionCopy.resultSaved.title}
|
|
</h3>
|
|
<p className="mb-14 max-w-md text-[15px] font-light leading-relaxed text-white/50 animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-500 fill-mode-both">
|
|
{activeStage === 'result-success' ? endSessionCopy.resultSuccess.description : endSessionCopy.resultSaved.description}
|
|
</p>
|
|
|
|
<div className="mb-16 flex w-full max-w-lg flex-col gap-4 animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-700 fill-mode-both">
|
|
{/* The Hero Number */}
|
|
<div className="rounded-3xl border border-white/[0.04] bg-white/[0.01] px-6 py-10 text-center shadow-[inset_0_0_30px_rgba(255,255,255,0.01),0_20px_40px_rgba(0,0,0,0.3)] backdrop-blur-xl relative overflow-hidden">
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(255,255,255,0.05),transparent_50%)] pointer-events-none" />
|
|
<p className="mb-3 text-[9px] font-semibold uppercase tracking-[0.4em] text-white/30">
|
|
{endSessionCopy.resultSuccess.focusedLabel}
|
|
</p>
|
|
<div className="relative inline-block">
|
|
<div className="absolute inset-0 bg-white/20 blur-[40px] rounded-full" />
|
|
<p className="relative text-7xl font-thin tracking-tighter text-white drop-shadow-md md:text-8xl">
|
|
{focusedMinutes}
|
|
<span className="ml-2 text-4xl font-light text-white/30">m</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{activeStage === 'result-saved' && (
|
|
<div className="rounded-3xl border border-white/[0.03] bg-white/[0.01] px-8 py-6 text-left shadow-[0_10px_30px_rgba(0,0,0,0.2)] backdrop-blur-md">
|
|
<p className="mb-3 text-[9px] font-semibold uppercase tracking-[0.3em] text-white/30">
|
|
{endSessionCopy.resultSaved.goalStatusLabel}
|
|
</p>
|
|
<p className="text-[13px] font-light uppercase tracking-[0.2em] text-white/50">
|
|
{endSessionCopy.resultSaved.goalStatusValue}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="rounded-3xl border border-white/[0.03] bg-white/[0.01] px-8 py-7 text-left shadow-[0_10px_30px_rgba(0,0,0,0.2)] backdrop-blur-md">
|
|
<p className="mb-4 text-[9px] font-semibold uppercase tracking-[0.3em] text-white/30">
|
|
{endSessionCopy.resultSuccess.goalLabel}
|
|
</p>
|
|
<p className="text-[17px] font-light leading-relaxed tracking-wide text-white/80">
|
|
{completionResult.goalText}
|
|
</p>
|
|
</div>
|
|
|
|
{hasThoughts ? (
|
|
<div className="rounded-3xl border border-white/[0.03] bg-white/[0.01] px-8 py-7 text-left shadow-[0_10px_30px_rgba(0,0,0,0.2)] backdrop-blur-md">
|
|
<div className="mb-5 flex items-center justify-between">
|
|
<p className="text-[9px] font-semibold uppercase tracking-[0.3em] text-white/30">
|
|
{endSessionCopy.resultSuccess.thoughtsLabel}
|
|
</p>
|
|
<span className="inline-flex h-5 items-center justify-center rounded-full border border-white/10 bg-white/5 px-2.5 text-[9px] font-medium text-white/50">
|
|
{completionResult.thoughts.length}
|
|
</span>
|
|
</div>
|
|
<div className="space-y-3">
|
|
{completionResult.thoughts.map((thought) => (
|
|
<div
|
|
key={thought.id}
|
|
className="rounded-2xl border border-white/[0.02] bg-black/40 px-5 py-4"
|
|
>
|
|
<p className="text-[14px] font-light leading-relaxed text-white/70">
|
|
{thought.text}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-1000 fill-mode-both">
|
|
<button
|
|
type="button"
|
|
onClick={onBackToLobby}
|
|
className="group relative overflow-hidden rounded-full bg-white px-14 py-5 text-[14px] font-medium text-black transition-all duration-500 hover:scale-[1.03] hover:shadow-[0_0_50px_rgba(255,255,255,0.25)] active:scale-[0.98]"
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/5 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
|
<span className="relative z-10">
|
|
{activeStage === 'result-success' ? endSessionCopy.resultSuccess.backToLobby : endSessionCopy.resultSaved.backToLobby}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|