feat(space): unify session closure result variants

src/widgets/space-focus-hud/ui/EndSessionConfirmModal.tsx

@@ -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>
   );