refactor(space): simplify end session completion flow

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

@@ -1,138 +0,0 @@
-'use client';
-
-import { copy } from '@/shared/i18n';
-import { cn } from '@/shared/lib/cn';
-import type { CompletionResult } from '@/features/focus-session';
-
-interface CompletionResultModalProps {
-  open: boolean;
-  result: CompletionResult | null;
-  onClose: () => void;
-}
-
-const formatFocusedMinutes = (focusedSeconds: number) => {
-  const safeSeconds = Math.max(0, focusedSeconds);
-  return Math.round(safeSeconds / 60);
-};
-
-export const CompletionResultModal = ({
-  open,
-  result,
-  onClose,
-}: CompletionResultModalProps) => {
-  if (!result) {
-    return null;
-  }
-
-  const focusedMinutes = formatFocusedMinutes(result.focusedSeconds);
-  const hasThoughts = result.thoughts.length > 0;
-
-  return (
-    <div
-      className={cn(
-        'pointer-events-none fixed inset-0 z-[70] flex items-center justify-center px-4 transition-all duration-300 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(5,7,11,0.22)_0%,rgba(2,6,23,0.68)_52%,rgba(2,6,23,0.84)_100%)] backdrop-blur-[14px] transition-opacity duration-300',
-          open ? 'opacity-100' : 'opacity-0',
-        )}
-      />
-
-      <section
-        className={cn(
-          'relative w-full max-w-[38rem] overflow-hidden rounded-[32px] border border-white/12 bg-[linear-gradient(180deg,rgba(18,22,30,0.96)_0%,rgba(8,11,17,0.94)_100%)] text-white shadow-[0_30px_100px_rgba(2,6,23,0.5)] transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]',
-          open ? 'pointer-events-auto translate-y-0 scale-100' : 'pointer-events-none translate-y-4 scale-[0.975]',
-        )}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="completion-result-title"
-      >
-        <div
-          aria-hidden
-          className="pointer-events-none absolute inset-0 bg-[radial-gradient(100%_85%_at_50%_0%,rgba(255,255,255,0.12)_0%,rgba(255,255,255,0.02)_42%,rgba(255,255,255,0)_100%)]"
-        />
-        <div className="relative px-7 py-7 md:px-9 md:py-8">
-          <header className="text-center">
-            <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.06] shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]">
-              <span className="text-[20px] text-white/88">✦</span>
-            </div>
-            <p className="mt-5 text-[11px] font-medium tracking-[0.14em] text-white/34">
-              {copy.space.completionResult.eyebrow}
-            </p>
-            <h3
-              id="completion-result-title"
-              className="mx-auto mt-2 max-w-[24rem] text-[1.65rem] font-light leading-[1.16] tracking-[-0.03em] text-white/96 md:text-[1.9rem]"
-            >
-              {copy.space.completionResult.title}
-            </h3>
-            <p className="mx-auto mt-3 max-w-[28rem] text-[14px] leading-[1.7] text-white/56">
-              {copy.space.completionResult.description}
-            </p>
-          </header>
-
-          <div className="mt-7 grid gap-4">
-            <div className="rounded-[28px] border border-white/8 bg-black/16 px-5 py-5 text-center shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
-              <p className="text-[11px] font-medium uppercase tracking-[0.18em] text-white/34">
-                {copy.space.completionResult.focusedLabel}
-              </p>
-              <p className="mt-3 text-[2.6rem] font-light tracking-[-0.05em] text-white/96 md:text-[3.2rem]">
-                {copy.space.completionResult.focusedValue(focusedMinutes)}
-              </p>
-            </div>
-
-            <div className="rounded-[24px] border border-white/8 bg-black/14 px-5 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
-              <p className="text-[10px] font-medium uppercase tracking-[0.22em] text-white/34">
-                {copy.space.completionResult.goalLabel}
-              </p>
-              <p className="mt-2 text-[15px] font-medium leading-[1.45] tracking-[-0.01em] text-white/90">
-                {result.completedGoal}
-              </p>
-            </div>
-
-            {hasThoughts ? (
-              <div className="rounded-[24px] border border-white/8 bg-black/14 px-5 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
-                <div className="flex items-center justify-between gap-4">
-                  <p className="text-[10px] font-medium uppercase tracking-[0.22em] text-white/34">
-                    {copy.space.completionResult.thoughtsLabel}
-                  </p>
-                  <p className="text-[11px] text-white/38">
-                    {copy.space.completionResult.thoughtCount(result.thoughts.length)}
-                  </p>
-                </div>
-                <div className="mt-3 space-y-2.5">
-                  {result.thoughts.map((thought) => (
-                    <div
-                      key={thought.id}
-                      className="rounded-[18px] border border-white/7 bg-white/[0.04] px-4 py-3"
-                    >
-                      <p className="text-[13px] leading-[1.6] text-white/84">
-                        {thought.text}
-                      </p>
-                      <p className="mt-2 text-[10px] uppercase tracking-[0.16em] text-white/32">
-                        {thought.sceneName}
-                      </p>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            ) : null}
-          </div>
-
-          <footer className="mt-6 flex justify-center">
-            <button
-              type="button"
-              onClick={onClose}
-              className="inline-flex min-h-[3.5rem] min-w-[14rem] items-center justify-center rounded-[18px] border border-white/14 bg-white/[0.12] px-5 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white transition-all duration-200 hover:border-white/22 hover:bg-white/[0.17] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12"
-            >
-              {copy.space.completionResult.confirmButton}
-            </button>
-          </footer>
-        </div>
-      </section>
-    </div>
-  );
-};

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

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

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

@@ -1,13 +1,14 @@
 'use client';
 
 import { useMemo, useState } from 'react';
+import type { CompletionResult } from '@/features/focus-session';
 import { copy } from '@/shared/i18n';
 import { cn } from '@/shared/lib/cn';
 
 interface GoalCompleteSheetProps {
   open: boolean;
   currentGoal: string;
-  onFinish: () => Promise<boolean> | boolean;
+  onFinish: () => Promise<boolean | CompletionResult | null> | boolean | CompletionResult | null;
   onExtendTenMinutes?: () => Promise<boolean> | boolean;
   onClose: () => void;
 }

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

@@ -1,6 +1,7 @@
 import { copy } from "@/shared/i18n";
 import { cn } from "@/shared/lib/cn";
 import type { HudStatusLinePayload } from "@/shared/lib/useHudStatusLine";
+import type { CompletionResult } from "@/features/focus-session";
 import { useEffect, useRef, useState } from "react";
 import { EndSessionConfirmModal } from "./EndSessionConfirmModal";
 import { GoalCompleteSheet } from "./GoalCompleteSheet";
@@ -17,13 +18,14 @@ interface SpaceFocusHudWidgetProps {
   hasActiveSession?: boolean;
   playbackState?: "running" | "paused";
   sessionPhase?: "focus" | "break" | null;
+  completionResult?: CompletionResult | null;
   onIntentUpdate: (payload: {
     goal?: string;
     microStep?: string | null;
   }) => boolean | Promise<boolean>;
   onGoalUpdate: (nextGoal: string) => boolean | Promise<boolean>;
-  onGoalCompleteFinish: () => boolean | Promise<boolean>;
-  onTimerFinish: () => boolean | Promise<boolean>;
+  onGoalCompleteFinish: () => Promise<CompletionResult | null> | CompletionResult | null;
+  onTimerFinish: () => Promise<CompletionResult | null> | CompletionResult | null;
   onAddTenMinutes: () => boolean | Promise<boolean>;
   onStatusMessage: (payload: HudStatusLinePayload) => void;
   onCaptureThought: (note: string) => void;
@@ -40,6 +42,7 @@ export const SpaceFocusHudWidget = ({
   hasActiveSession = false,
   playbackState = "paused",
   sessionPhase = "focus",
+  completionResult = null,
   onIntentUpdate,
   onGoalUpdate,
   onGoalCompleteFinish,
@@ -66,12 +69,18 @@ export const SpaceFocusHudWidget = ({
       : null;
 
   useEffect(() => {
-    if (!hasActiveSession) {
+    if (completionResult && overlay === "none") {
+      setOverlay("end-session"); // Show the success stage automatically if data arrives
+    }
+  }, [completionResult, overlay]);
+
+  useEffect(() => {
+    if (!hasActiveSession && !completionResult) {
       setOverlay("none");
       setSavingIntent(false);
       timerPromptSignatureRef.current = null;
     }
-  }, [hasActiveSession]);
+  }, [hasActiveSession, completionResult]);
 
   useEffect(() => {
     if (!visibleRef.current && playbackState === "running") {
@@ -88,8 +97,8 @@ export const SpaceFocusHudWidget = ({
       return;
     }
 
-    setOverlay("none");
-  }, [overlay, timerCompletionSignature]);
+    if (!completionResult) setOverlay("none");
+  }, [overlay, timerCompletionSignature, completionResult]);
 
   useEffect(() => {
     if (!timerCompletionSignature) {
@@ -123,6 +132,8 @@ export const SpaceFocusHudWidget = ({
     }
   };
 
+  const isOverlayOpen = overlay !== "none";
+
   return (
     <>
       <ThoughtOrb
@@ -134,7 +145,7 @@ export const SpaceFocusHudWidget = ({
         <div
           className={cn(
             "pointer-events-auto flex flex-col items-center text-center max-w-4xl px-6 transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]",
-            overlay !== "none"
+            isOverlayOpen
               ? "opacity-0 scale-95 blur-md"
               : "opacity-100 scale-100 blur-0",
           )}
@@ -196,7 +207,13 @@ export const SpaceFocusHudWidget = ({
       <EndSessionConfirmModal
         open={overlay === "end-session"}
         currentGoal={goal}
-        onClose={() => setOverlay("none")}
+        onClose={() => {
+          if (completionResult) {
+            void onExitRequested();
+          } else {
+            setOverlay("none");
+          }
+        }}
         onAdvanceGoal={(nextGoal) => Promise.resolve(onGoalUpdate(nextGoal))}
         onFinishHere={() => Promise.resolve(onGoalCompleteFinish())}
         onEndSession={() => Promise.resolve(onExitRequested())}