fix(space): break와 recovery 상태의 완료 경로 복구

2026-03-15 23:10:29 +09:00
parent 728330bf74
commit 3c5154178d
8 changed files with 104 additions and 1 deletions
--- a/src/shared/i18n/messages/space.ts
+++ b/src/shared/i18n/messages/space.ts
@@ -62,6 +62,8 @@ export const space = {
    pausePromptRefocusHint: '목표는 그대로 두고, 지금 다시 시작할 한 줄만 정리해요.',
    pausePromptKeep: '바로 이어가기',
    pausePromptKeepHint: '지금 방향을 유지한 채, 멈춘 자리에서 다시 시작해요.',
+    pausePromptFinish: '여기서 마무리하기',
+    pausePromptFinishHint: '다시 이어가기보다, 지금 블록을 여기서 조용히 닫습니다.',
    returnPromptEyebrow: '다시 돌아왔어요',
    returnPromptFocusTitle: '흐름은 아직 남아 있어요.',
    returnPromptFocusDescription: '멈춘 자리에서 바로 이어가거나, 다시 시작할 한 조각만 조용히 다듬을 수 있어요.',
@@ -75,6 +77,8 @@ export const space = {
    returnPromptNextHint: '다음 한 조각을 정하고, 같은 흐름 안에서 부드럽게 이어갑니다.',
    returnPromptRefocus: '한 조각 다시 잡기',
    returnPromptRefocusHint: '왜 멈췄는지는 건너뛰고, 지금 다시 시작할 한 줄만 남깁니다.',
+    returnPromptFinish: '여기서 마무리하기',
+    returnPromptFinishHint: '이 흐름은 여기서 닫고, 다음 진입은 가볍게 남겨둡니다.',
    microStepCompleteAriaLabel: '현재 한 조각 완료',
    microStepPromptEyebrow: '다음 단계',
    microStepPromptTitle: '바로 이어서 할 다음 단계가 있나요?',
@@ -83,6 +87,8 @@ export const space = {
    microStepPromptKeepHint: '다음 단계는 비워두고, 같은 목표 안에서 이어서 집중해요.',
    microStepPromptDefine: '다음 단계 적기',
    microStepPromptDefineHint: '바로 손을 움직일 수 있는 가장 작은 다음 행동을 한 줄로 남겨요.',
+    microStepPromptFinish: '이 목표는 여기서 마무리하기',
+    microStepPromptFinishHint: '다음 단계를 늘리지 않고, 지금 블록을 깔끔하게 닫습니다.',
    microStepCleared: '지금 할 한 조각을 비우고 목표만 유지해요.',
    completeAction: '이번 목표 완료',
  },
--- a/src/widgets/space-focus-hud/ui/NextMicroStepPrompt.tsx
+++ b/src/widgets/space-focus-hud/ui/NextMicroStepPrompt.tsx
@@ -22,6 +22,7 @@ interface NextMicroStepPromptProps {
  error: string | null;
  onKeepGoalOnly: () => void;
  onDefineNext: () => void;
+  onFinish: () => void;
 }

 export const NextMicroStepPrompt = ({
@@ -31,6 +32,7 @@ export const NextMicroStepPrompt = ({
  error,
  onKeepGoalOnly,
  onDefineNext,
+  onFinish,
 }: NextMicroStepPromptProps) => {
  const trimmedGoal = goal.trim();

@@ -106,6 +108,20 @@ export const NextMicroStepPrompt = ({
              <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
            </button>
          </div>
+
+          <div className="mt-4 border-t border-white/8 pt-3">
+            <button
+              type="button"
+              onClick={onFinish}
+              disabled={isSubmitting}
+              className="text-[12px] font-medium tracking-[0.08em] text-white/58 underline decoration-white/12 underline-offset-4 transition-colors hover:text-white/82 hover:decoration-white/24 disabled:cursor-default disabled:text-white/26 disabled:no-underline"
+            >
+              {copy.space.focusHud.microStepPromptFinish}
+            </button>
+            <p className="mt-1.5 max-w-[20.5rem] text-[12px] leading-[1.55] text-white/42">
+              {copy.space.focusHud.microStepPromptFinishHint}
+            </p>
+          </div>
        </div>
      </section>
    </div>
--- a/src/widgets/space-focus-hud/ui/PauseRefocusPrompt.tsx
+++ b/src/widgets/space-focus-hud/ui/PauseRefocusPrompt.tsx
@@ -23,6 +23,7 @@ interface PauseRefocusPromptProps {
  isBusy: boolean;
  onRefocus: () => void;
  onKeepCurrent: () => void;
+  onFinish: () => void;
 }

 export const PauseRefocusPrompt = ({
@@ -30,6 +31,7 @@ export const PauseRefocusPrompt = ({
  isBusy,
  onRefocus,
  onKeepCurrent,
+  onFinish,
 }: PauseRefocusPromptProps) => {
  return (
    <div
@@ -88,6 +90,20 @@ export const PauseRefocusPrompt = ({
              <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
            </button>
          </div>
+
+          <div className="mt-4 border-t border-white/8 pt-3">
+            <button
+              type="button"
+              onClick={onFinish}
+              disabled={isBusy}
+              className="text-[12px] font-medium tracking-[0.08em] text-white/58 underline decoration-white/12 underline-offset-4 transition-colors hover:text-white/82 hover:decoration-white/24 disabled:cursor-default disabled:text-white/26 disabled:no-underline"
+            >
+              {copy.space.focusHud.pausePromptFinish}
+            </button>
+            <p className="mt-1.5 max-w-[20.5rem] text-[12px] leading-[1.55] text-white/42">
+              {copy.space.focusHud.pausePromptFinishHint}
+            </p>
+          </div>
        </div>
      </section>
    </div>
--- a/src/widgets/space-focus-hud/ui/ReturnPrompt.tsx
+++ b/src/widgets/space-focus-hud/ui/ReturnPrompt.tsx
@@ -30,6 +30,7 @@ interface ReturnPromptProps {
  onRefocus: () => void;
  onRest?: () => void;
  onNextGoal?: () => void;
+  onFinish: () => void;
 }

 export const ReturnPrompt = ({
@@ -40,6 +41,7 @@ export const ReturnPrompt = ({
  onRefocus,
  onRest,
  onNextGoal,
+  onFinish,
 }: ReturnPromptProps) => {
  const isBreakReturn = mode === 'break';

@@ -166,6 +168,30 @@ export const ReturnPrompt = ({
              </>
            )}
          </div>
+
+          <div className="mt-4 border-t border-white/8 pt-3">
+            <button
+              type="button"
+              onClick={onFinish}
+              disabled={isBusy}
+              className={cn(
+                'text-[12px] font-medium tracking-[0.08em] underline underline-offset-4 transition-colors disabled:cursor-default disabled:no-underline',
+                isBreakReturn
+                  ? 'text-emerald-50/68 decoration-emerald-100/18 hover:text-emerald-50/92 hover:decoration-emerald-100/32 disabled:text-emerald-50/28'
+                  : 'text-white/58 decoration-white/12 hover:text-white/82 hover:decoration-white/24 disabled:text-white/26',
+              )}
+            >
+              {copy.space.focusHud.returnPromptFinish}
+            </button>
+            <p
+              className={cn(
+                'mt-1.5 max-w-[20.5rem] text-[12px] leading-[1.55]',
+                isBreakReturn ? 'text-emerald-50/46' : 'text-white/42',
+              )}
+            >
+              {copy.space.focusHud.returnPromptFinishHint}
+            </p>
+          </div>
        </div>
      </section>
    </div>
--- a/src/widgets/space-focus-hud/ui/SpaceFocusHudWidget.tsx
+++ b/src/widgets/space-focus-hud/ui/SpaceFocusHudWidget.tsx
@@ -285,7 +285,7 @@ export const SpaceFocusHudWidget = ({
          goal={normalizedGoal}
          microStep={microStep}
          canRefocus={Boolean(hasActiveSession)}
-          canComplete={hasActiveSession && sessionPhase === 'focus'}
+          canComplete={hasActiveSession && (sessionPhase === 'focus' || sessionPhase === 'break')}
          showActions={!isIntentOverlayOpen}
          onOpenRefocus={() => openRefocus('goal', 'manual')}
          onMicroStepDone={() => {
@@ -317,6 +317,10 @@ export const SpaceFocusHudWidget = ({
            handleDismissReturnPrompt();
            handleOpenCompleteSheet('next');
          }}
+          onFinish={() => {
+            handleDismissReturnPrompt();
+            handleOpenCompleteSheet('choice');
+          }}
        />
        <PauseRefocusPrompt
          open={isPausedPromptOpen}
@@ -326,6 +330,10 @@ export const SpaceFocusHudWidget = ({
            setOverlay('none');
            onStartRequested?.();
          }}
+          onFinish={() => {
+            setOverlay('none');
+            handleOpenCompleteSheet('choice');
+          }}
        />
        <RefocusSheet
          open={isRefocusOpen}
@@ -362,6 +370,10 @@ export const SpaceFocusHudWidget = ({
            void handleKeepGoalOnly();
          }}
          onDefineNext={handleDefineNextMicroStep}
+          onFinish={() => {
+            setIntentError(null);
+            handleOpenCompleteSheet('choice');
+          }}
        />
        <GoalCompleteSheet
          open={isCompleteOpen}