fix(goal-flow): 완료 시트 즉시 오픈·엔터 제출·잠깐쉬기 5분 알림 적용

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

@@ -1,5 +1,6 @@
 'use client';
 
+import type { FormEvent } from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '@/shared/lib/cn';
 
@@ -54,6 +55,15 @@ export const GoalCompleteSheet = ({
   }, [currentGoal]);
 
   const canConfirm = draft.trim().length > 0;
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!canConfirm) {
+      return;
+    }
+
+    onConfirm(draft.trim());
+  };
 
   return (
     <div
@@ -80,7 +90,7 @@ export const GoalCompleteSheet = ({
           </button>
         </header>
 
-        <div className="mt-2.5 space-y-2.5">
+        <form className="mt-2.5 space-y-2.5" onSubmit={handleSubmit}>
           <input
             ref={inputRef}
             value={draft}
@@ -101,25 +111,24 @@ export const GoalCompleteSheet = ({
               </button>
             ))}
           </div>
-        </div>
 
-        <footer className="mt-3 flex items-center justify-end gap-2">
-          <button
-            type="button"
-            onClick={onRest}
-            className="rounded-full border border-white/18 bg-white/[0.05] px-3 py-1.5 text-xs text-white/74 transition-colors hover:bg-white/[0.11]"
-          >
-            잠깐 쉬기
-          </button>
-          <button
-            type="button"
-            disabled={!canConfirm}
-            onClick={() => onConfirm(draft.trim())}
-            className="rounded-full border border-sky-200/42 bg-sky-300/84 px-3.5 py-1.5 text-xs font-semibold text-slate-900 transition-colors hover:bg-sky-300 disabled:cursor-not-allowed disabled:border-white/16 disabled:bg-white/[0.08] disabled:text-white/48"
-          >
-            바로 다음 조각 시작
-          </button>
-        </footer>
+          <footer className="mt-3 flex items-center justify-end gap-2">
+            <button
+              type="button"
+              onClick={onRest}
+              className="rounded-full border border-white/18 bg-white/[0.05] px-3 py-1.5 text-xs text-white/74 transition-colors hover:bg-white/[0.11]"
+            >
+              잠깐 쉬기
+            </button>
+            <button
+              type="submit"
+              disabled={!canConfirm}
+              className="rounded-full border border-sky-200/42 bg-sky-300/84 px-3.5 py-1.5 text-xs font-semibold text-slate-900 transition-colors hover:bg-sky-300 disabled:cursor-not-allowed disabled:border-white/16 disabled:bg-white/[0.08] disabled:text-white/48"
+            >
+              바로 다음 조각 시작
+            </button>
+          </footer>
+        </form>
       </section>
     </div>
   );

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

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useReducedMotion } from '@/shared/lib/useReducedMotion';
-import { cn } from '@/shared/lib/cn';
 import { useToast } from '@/shared/ui';
 import { SpaceTimerHudWidget } from '@/widgets/space-timer-hud';
 import { GoalCompleteSheet } from './GoalCompleteSheet';
@@ -23,10 +22,9 @@ export const SpaceFocusHudWidget = ({
   const reducedMotion = useReducedMotion();
   const [flashVisible, setFlashVisible] = useState(false);
   const [sheetOpen, setSheetOpen] = useState(false);
-  const [completePulseVisible, setCompletePulseVisible] = useState(false);
   const playbackStateRef = useRef<'running' | 'paused'>('running');
   const flashTimerRef = useRef<number | null>(null);
-  const completePulseTimerRef = useRef<number | null>(null);
+  const restReminderTimerRef = useRef<number | null>(null);
 
   const triggerFlash = useCallback((durationMs: number) => {
     if (reducedMotion || !visible) {
@@ -51,9 +49,9 @@ export const SpaceFocusHudWidget = ({
         window.clearTimeout(flashTimerRef.current);
         flashTimerRef.current = null;
       }
-      if (completePulseTimerRef.current) {
-        window.clearTimeout(completePulseTimerRef.current);
-        completePulseTimerRef.current = null;
+      if (restReminderTimerRef.current) {
+        window.clearTimeout(restReminderTimerRef.current);
+        restReminderTimerRef.current = null;
       }
     };
   }, []);
@@ -88,34 +86,12 @@ export const SpaceFocusHudWidget = ({
   }
 
   const handleOpenCompleteSheet = () => {
-    setCompletePulseVisible(true);
-
-    if (completePulseTimerRef.current) {
-      window.clearTimeout(completePulseTimerRef.current);
-    }
-
-    completePulseTimerRef.current = window.setTimeout(() => {
-      setCompletePulseVisible(false);
-      setSheetOpen(true);
-      completePulseTimerRef.current = null;
-    }, 700);
+    setSheetOpen(true);
   };
 
   return (
     <>
       <GoalFlashOverlay goal={goal} visible={flashVisible} />
-      <div
-        className={cn(
-          'pointer-events-none fixed inset-x-0 z-20 flex justify-center px-4 transition-opacity duration-[240ms] ease-out motion-reduce:duration-0',
-          completePulseVisible ? 'opacity-100' : 'opacity-0',
-        )}
-        style={{ bottom: 'calc(env(safe-area-inset-bottom, 0px) + 5.1rem)' }}
-        aria-hidden
-      >
-        <div className="rounded-full border border-white/12 bg-black/24 px-3 py-1 text-xs text-white/84 backdrop-blur-md">
-          완료!
-        </div>
-      </div>
       <SpaceTimerHudWidget
         timerLabel={timerLabel}
         goal={goal}
@@ -141,7 +117,16 @@ export const SpaceFocusHudWidget = ({
         onClose={() => setSheetOpen(false)}
         onRest={() => {
           setSheetOpen(false);
-          pushToast({ title: '좋아요, 잠깐 쉬고 다시 이어가요.' });
+          pushToast({ title: '좋아요. 5분 뒤에 다시 알려드릴게요.' });
+
+          if (restReminderTimerRef.current) {
+            window.clearTimeout(restReminderTimerRef.current);
+          }
+
+          restReminderTimerRef.current = window.setTimeout(() => {
+            pushToast({ title: '5분이 지났어요. 다음 한 조각으로 돌아와요.' });
+            restReminderTimerRef.current = null;
+          }, 5 * 60 * 1000);
         }}
         onConfirm={(nextGoal) => {
           onGoalUpdate(nextGoal);