feat(space): recovery 카피와 CTA 위계 분리

src/shared/i18n/messages/space.ts

@@ -47,23 +47,23 @@ export const space = {
     refocusSaved: '이번 세션 방향을 다듬었어요.',
     refocusOpenOnPause: '잠시 멈춘 김에 다음 한 조각을 다시 맞춰볼까요?',
     pausePromptEyebrow: '잠깐 멈춤',
-    pausePromptTitle: '다시 붙잡을 한 조각만 정하면 돼요.',
-    pausePromptDescription: '왜 멈췄는지는 묻지 않아요. 다시 시작할 한 조각만 남겨요.',
+    pausePromptTitle: '다시 시작할 한 줄만 정하면 돼요.',
+    pausePromptDescription: '멈춘 이유를 정리하지 않아도 괜찮아요. 바로 손을 올릴 시작점만 다시 맞춥니다.',
     pausePromptRefocus: '한 조각 다시 잡기',
     pausePromptRefocusHint: '목표는 그대로 두고, 지금 다시 시작할 한 줄만 정리해요.',
-    pausePromptKeep: '이대로 이어가기',
-    pausePromptKeepHint: '지금 방향을 그대로 유지한 채 바로 이어서 시작해요.',
+    pausePromptKeep: '바로 이어가기',
+    pausePromptKeepHint: '지금 방향을 유지한 채, 멈춘 자리에서 다시 시작해요.',
     returnPromptEyebrow: '다시 돌아왔어요',
-    returnPromptFocusTitle: '이어서 갈까요?',
-    returnPromptFocusDescription: '흐름은 그대로 남아 있어요. 바로 이어가거나 한 조각만 다시 잡을 수 있어요.',
+    returnPromptFocusTitle: '흐름은 아직 남아 있어요.',
+    returnPromptFocusDescription: '멈춘 자리에서 바로 이어가거나, 다시 시작할 한 조각만 조용히 다듬을 수 있어요.',
     returnPromptBreakTitle: '자리를 비운 사이 이 블록이 끝났어요.',
-    returnPromptBreakDescription: '지금부터 쉬거나, 다음으로 이어갈 수 있어요.',
-    returnPromptContinue: '이어서 하기',
-    returnPromptContinueHint: '타이머와 흐름을 그대로 둔 채 다시 집중으로 돌아갑니다.',
+    returnPromptBreakDescription: '지금부터 쉬거나, 다음 블록으로 부드럽게 넘어갈 수 있어요.',
+    returnPromptContinue: '멈춘 자리에서 이어가기',
+    returnPromptContinueHint: '타이머와 현재 흐름을 그대로 두고 다시 집중으로 복귀합니다.',
     returnPromptRest: '지금부터 쉬기',
     returnPromptRestHint: '지금부터 break를 시작한 것처럼 천천히 숨을 고릅니다.',
-    returnPromptNext: '다음 목표 이어가기',
-    returnPromptNextHint: '다음 한 조각을 바로 정하고 흐름을 끊지 않고 잇습니다.',
+    returnPromptNext: '다음 블록 이어가기',
+    returnPromptNextHint: '다음 한 조각을 정하고, 같은 흐름 안에서 부드럽게 이어갑니다.',
     returnPromptRefocus: '한 조각 다시 잡기',
     returnPromptRefocusHint: '왜 멈췄는지는 건너뛰고, 지금 다시 시작할 한 줄만 남깁니다.',
     microStepCompleteAriaLabel: '현재 한 조각 완료',
@@ -80,18 +80,20 @@ export const space = {
     suggestions: ['리뷰 코멘트 2개 처리', '문서 1문단 다듬기', '이슈 1개 정리', '메일 2개 회신'],
     placeholderFallback: '다음 한 조각을 적어보세요',
     placeholderExample: (goal: string) => `예: ${goal}`,
-    title: '좋아요. 다음 한 조각은?',
-    description: '너무 크게 잡지 말고, 바로 다음 한 조각만.',
-    currentGoalLabel: '끝낸 목표',
-    nextGoalLabel: '다음 목표',
-    chooseNextButton: '다음 목표 이어가기',
-    chooseNextDescription: '바로 이어갈 다음 한 조각을 정하고 계속 갑니다.',
+    title: '이 블록을 어떻게 닫을까요?',
+    description: '지금은 끝내기, 쉬기, 이어가기 중 하나만 고르면 돼요.',
+    nextTitle: '좋아요. 다음 한 조각만 정해요.',
+    nextDescription: '너무 크게 잡지 말고, 바로 손을 올릴 한 줄만 남겨요.',
+    currentGoalLabel: '방금 끝낸 블록',
+    nextGoalLabel: '이어갈 다음 블록',
+    chooseNextButton: '다음 블록 이어가기',
+    chooseNextDescription: '다음 한 조각을 정하고 같은 흐름 안에서 계속 갑니다.',
     backButton: '돌아가기',
     closeAriaLabel: '닫기',
     finishButton: '여기까지 끝내기',
     finishDescription: '이 블록은 여기서 닫고, 다음 진입은 가볍게 남겨둡니다.',
     restButton: '잠깐 쉬기',
-    restDescription: '지금은 멈추고 숨을 고른 뒤 돌아올 여지를 남겨둡니다.',
+    restDescription: '이 블록은 닫고, 지금부터는 잠깐 쉬는 리듬으로 넘어갑니다.',
     confirmButton: '다음 목표로 바로 시작',
     confirmPending: '시작 중…',
     finishPending: '마무리 중…',

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

@@ -87,6 +87,14 @@ export const GoalCompleteSheet = ({
   const canConfirm = draft.trim().length > 0;
   const isSubmitting = submissionMode !== null;
   const trimmedCurrentGoal = currentGoal.trim();
+  const title =
+    view === 'next'
+      ? copy.space.goalComplete.nextTitle
+      : copy.space.goalComplete.title;
+  const description =
+    view === 'next'
+      ? copy.space.goalComplete.nextDescription
+      : copy.space.goalComplete.description;
 
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -143,8 +151,8 @@ export const GoalCompleteSheet = ({
         <header className="relative flex items-start justify-between gap-2">
           <div>
             <p className="text-[11px] font-medium tracking-[0.08em] text-white/38">목표 완료</p>
-            <h3 className="mt-1 text-[1rem] font-medium tracking-tight text-white/94">{copy.space.goalComplete.title}</h3>
-            <p className="mt-1 text-[12px] text-white/56">{copy.space.goalComplete.description}</p>
+            <h3 className="mt-1 max-w-[22rem] text-[1rem] font-medium tracking-tight text-white/94">{title}</h3>
+            <p className="mt-1 max-w-[21rem] text-[12px] leading-[1.55] text-white/56">{description}</p>
           </div>
           <button
             type="button"
@@ -171,18 +179,16 @@ export const GoalCompleteSheet = ({
             <footer className="mt-4 space-y-2">
               <button
                 type="button"
-                onClick={handleFinish}
+                onClick={() => setView('next')}
                 disabled={isSubmitting}
-                className={HUD_OPTION_ROW}
+                className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_PRIMARY)}
               >
-                <div>
-                  <p className="text-[13px] font-medium tracking-[0.01em] text-white/78">
-                    {submissionMode === 'finish'
-                      ? copy.space.goalComplete.finishPending
-                      : copy.space.goalComplete.finishButton}
+                <div className="max-w-[20.5rem]">
+                  <p className="text-[13px] font-semibold tracking-[0.01em] text-white/90">
+                    {copy.space.goalComplete.chooseNextButton}
                   </p>
-                  <p className="mt-1 text-[12px] text-white/44">
-                    {copy.space.goalComplete.finishDescription}
+                  <p className="mt-1 text-[12px] leading-[1.55] text-white/48">
+                    {copy.space.goalComplete.chooseNextDescription}
                   </p>
                 </div>
                 <span aria-hidden className={HUD_OPTION_CHEVRON}>→</span>
@@ -193,11 +199,11 @@ export const GoalCompleteSheet = ({
                 disabled={isSubmitting}
                 className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_BREAK)}
               >
-                <div>
+                <div className="max-w-[20.5rem]">
                   <p className="text-[13px] font-medium tracking-[0.01em] text-white/78">
                     {copy.space.goalComplete.restButton}
                   </p>
-                  <p className="mt-1 text-[12px] text-emerald-50/56">
+                  <p className="mt-1 text-[12px] leading-[1.55] text-emerald-50/56">
                     {copy.space.goalComplete.restDescription}
                   </p>
                 </div>
@@ -205,16 +211,18 @@ export const GoalCompleteSheet = ({
               </button>
               <button
                 type="button"
-                onClick={() => setView('next')}
+                onClick={handleFinish}
                 disabled={isSubmitting}
-                className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_PRIMARY)}
+                className={HUD_OPTION_ROW}
               >
-                <div>
-                  <p className="text-[13px] font-semibold tracking-[0.01em] text-white/90">
-                    {copy.space.goalComplete.chooseNextButton}
+                <div className="max-w-[20.5rem]">
+                  <p className="text-[13px] font-medium tracking-[0.01em] text-white/78">
+                    {submissionMode === 'finish'
+                      ? copy.space.goalComplete.finishPending
+                      : copy.space.goalComplete.finishButton}
                   </p>
-                  <p className="mt-1 text-[12px] text-white/48">
-                    {copy.space.goalComplete.chooseNextDescription}
+                  <p className="mt-1 text-[12px] leading-[1.55] text-white/44">
+                    {copy.space.goalComplete.finishDescription}
                   </p>
                 </div>
                 <span aria-hidden className={HUD_OPTION_CHEVRON}>→</span>

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

@@ -30,9 +30,9 @@ export const PauseRefocusPrompt = ({
   return (
     <div
       className={cn(
-        'pointer-events-none w-full overflow-hidden transition-all duration-300 ease-out motion-reduce:duration-0',
+        'pointer-events-none w-full overflow-hidden transition-all duration-200 ease-out motion-reduce:duration-0',
         open
-          ? 'max-h-[24rem] translate-y-0 opacity-100'
+          ? 'max-h-[26rem] translate-y-0 opacity-100'
           : 'pointer-events-none max-h-0 -translate-y-2 opacity-0',
       )}
       aria-hidden={!open}
@@ -59,15 +59,15 @@ export const PauseRefocusPrompt = ({
               disabled={isBusy}
               className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_PRIMARY)}
             >
-              <div className="min-w-0">
+              <div className="min-w-0 max-w-[20.5rem]">
                 <p className="text-[14px] font-semibold leading-[1.35] tracking-[-0.01em] text-white/92">
                   {copy.space.focusHud.pausePromptRefocus}
                 </p>
-                <p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-white/50">
+                <p className="mt-1.5 text-[12px] leading-[1.55] text-white/50">
                   {copy.space.focusHud.pausePromptRefocusHint}
                 </p>
               </div>
-              <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1')}>→</span>
+              <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
             </button>
             <button
               type="button"
@@ -75,15 +75,15 @@ export const PauseRefocusPrompt = ({
               disabled={isBusy}
               className={HUD_OPTION_ROW}
             >
-              <div className="min-w-0">
+              <div className="min-w-0 max-w-[20.5rem]">
                 <p className="text-[14px] font-medium leading-[1.35] tracking-[-0.01em] text-white/82">
                   {copy.space.focusHud.pausePromptKeep}
                 </p>
-                <p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-white/46">
+                <p className="mt-1.5 text-[12px] leading-[1.55] text-white/46">
                   {copy.space.focusHud.pausePromptKeepHint}
                 </p>
               </div>
-              <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1')}>→</span>
+              <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
             </button>
           </div>
         </div>

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

@@ -41,9 +41,12 @@ export const ReturnPrompt = ({
   return (
     <div
       className={cn(
-        'pointer-events-none w-full overflow-hidden transition-all duration-300 ease-out motion-reduce:duration-0',
+        'pointer-events-none w-full overflow-hidden transition-all motion-reduce:duration-0',
         open
-          ? 'max-h-[22rem] translate-y-0 opacity-100'
+          ? cn(
+              'max-h-[24rem] translate-y-0 opacity-100',
+              isBreakReturn ? 'duration-300 ease-out' : 'duration-220 ease-out',
+            )
           : 'pointer-events-none max-h-0 -translate-y-2 opacity-0',
       )}
       aria-hidden={!open}
@@ -70,7 +73,7 @@ export const ReturnPrompt = ({
               : copy.space.focusHud.returnPromptFocusDescription}
           </p>
 
-          <div className="mt-5 space-y-2.5 border-t pt-4 border-white/8">
+          <div className="mt-5 space-y-2.5 border-t border-white/8 pt-4">
             {isBreakReturn ? (
               <>
                 <button
@@ -79,15 +82,15 @@ export const ReturnPrompt = ({
                   disabled={isBusy}
                   className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_BREAK)}
                 >
-                  <div className="min-w-0">
+                  <div className="min-w-0 max-w-[20.5rem]">
                     <p className="text-[14px] font-semibold leading-[1.35] tracking-[-0.01em] text-white/92">
                       {copy.space.focusHud.returnPromptRest}
                     </p>
-                    <p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-emerald-50/56">
+                    <p className="mt-1.5 text-[12px] leading-[1.55] text-emerald-50/56">
                       {copy.space.focusHud.returnPromptRestHint}
                     </p>
                   </div>
-                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1 text-emerald-100/34 group-hover:text-emerald-100/58')}>→</span>
+                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px] text-emerald-100/34 group-hover:text-emerald-100/58')}>→</span>
                 </button>
                 <button
                   type="button"
@@ -95,15 +98,15 @@ export const ReturnPrompt = ({
                   disabled={isBusy}
                   className={HUD_OPTION_ROW}
                 >
-                  <div className="min-w-0">
+                  <div className="min-w-0 max-w-[20.5rem]">
                     <p className="text-[14px] font-medium leading-[1.35] tracking-[-0.01em] text-white/82">
                       {copy.space.focusHud.returnPromptNext}
                     </p>
-                    <p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-white/46">
+                    <p className="mt-1.5 text-[12px] leading-[1.55] text-white/46">
                       {copy.space.focusHud.returnPromptNextHint}
                     </p>
                   </div>
-                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1')}>→</span>
+                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
                 </button>
                 <button
                   type="button"
@@ -111,15 +114,15 @@ export const ReturnPrompt = ({
                   disabled={isBusy}
                   className={HUD_OPTION_ROW}
                 >
-                  <div className="min-w-0">
+                  <div className="min-w-0 max-w-[20.5rem]">
                     <p className="text-[14px] font-medium leading-[1.35] tracking-[-0.01em] text-white/82">
                       {copy.space.focusHud.returnPromptRefocus}
                     </p>
-                    <p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-white/46">
+                    <p className="mt-1.5 text-[12px] leading-[1.55] text-white/46">
                       {copy.space.focusHud.returnPromptRefocusHint}
                     </p>
                   </div>
-                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1')}>→</span>
+                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
                 </button>
               </>
             ) : (
@@ -130,15 +133,15 @@ export const ReturnPrompt = ({
                   disabled={isBusy}
                   className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_PRIMARY)}
                 >
-                  <div className="min-w-0">
+                  <div className="min-w-0 max-w-[20.5rem]">
                     <p className="text-[14px] font-semibold leading-[1.35] tracking-[-0.01em] text-white/92">
                       {copy.space.focusHud.returnPromptContinue}
                     </p>
-                    <p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-white/48">
+                    <p className="mt-1.5 text-[12px] leading-[1.55] text-white/48">
                       {copy.space.focusHud.returnPromptContinueHint}
                     </p>
                   </div>
-                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1')}>→</span>
+                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
                 </button>
                 <button
                   type="button"
@@ -146,15 +149,15 @@ export const ReturnPrompt = ({
                   disabled={isBusy}
                   className={HUD_OPTION_ROW}
                 >
-                  <div className="min-w-0">
+                  <div className="min-w-0 max-w-[20.5rem]">
                     <p className="text-[14px] font-medium leading-[1.35] tracking-[-0.01em] text-white/82">
                       {copy.space.focusHud.returnPromptRefocus}
                     </p>
-                    <p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-white/46">
+                    <p className="mt-1.5 text-[12px] leading-[1.55] text-white/46">
                       {copy.space.focusHud.returnPromptRefocusHint}
                     </p>
                   </div>
-                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1')}>→</span>
+                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
                 </button>
               </>
             )}