feat(goal-flow): Goal 1줄 앵커와 완료 시트 기반 다음 한 조각 플로우 적용

src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { cn } from '@/shared/lib/cn';
-import { useToast } from '@/shared/ui';
 import {
   RECOVERY_30S_MODE_LABEL,
   Restart30sAction,
@@ -14,6 +13,7 @@ interface SpaceTimerHudWidgetProps {
   className?: string;
   isImmersionMode?: boolean;
   onPlaybackStateChange?: (state: 'running' | 'paused') => void;
+  onGoalCompleteRequest?: () => void;
 }
 
 const HUD_ACTIONS = [
@@ -28,8 +28,8 @@ export const SpaceTimerHudWidget = ({
   className,
   isImmersionMode = false,
   onPlaybackStateChange,
+  onGoalCompleteRequest,
 }: SpaceTimerHudWidgetProps) => {
-  const { pushToast } = useToast();
   const { isBreatheMode, hintMessage, triggerRestart } = useRestart30s();
   const normalizedGoal = goal.trim().length > 0 ? goal.trim() : '이번 한 조각을 설정해 주세요.';
 
@@ -76,24 +76,18 @@ export const SpaceTimerHudWidget = ({
                 {timerLabel}
               </span>
             </div>
-            <div className="mt-1.5 min-w-0 rounded-lg border border-white/10 bg-black/16 px-2.5 py-1.5">
-              <div className="flex items-center justify-between gap-2">
-                <p className="text-[10px] font-medium uppercase tracking-[0.12em] text-white/55">Goal</p>
-                <button
-                  type="button"
-                  onClick={() => {
-                    pushToast({ title: '완료(더미) — 다음 조각으로 갈까요?' });
-                  }}
-                  className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-white/16 bg-white/[0.05] text-[10px] text-white/78 transition-colors hover:bg-white/[0.12]"
-                  aria-label="목표 완료"
-                  title="목표 완료"
-                >
-                  ✅
-                </button>
-              </div>
-              <p className={cn('mt-0.5 truncate text-sm', isImmersionMode ? 'text-white/90' : 'text-white/88')}>
-                {normalizedGoal}
+            <div className="mt-1.5 flex min-w-0 items-center gap-2">
+              <p className={cn('min-w-0 truncate text-sm', isImmersionMode ? 'text-white/88' : 'text-white/86')}>
+                <span className="text-white/62">이번 한 조각 · </span>
+                <span className="text-white/90">{normalizedGoal}</span>
               </p>
+              <button
+                type="button"
+                onClick={onGoalCompleteRequest}
+                className="shrink-0 rounded-full border border-white/16 bg-white/[0.04] px-2 py-0.5 text-[10px] text-white/70 transition-colors hover:bg-white/[0.1] hover:text-white/86"
+              >
+                완료
+              </button>
             </div>
             {hintMessage ? (
               <p className={cn('mt-1 truncate text-[10px]', isImmersionMode ? 'text-white/52' : 'text-white/52')}>