fix(space): recovery 트레이 모션 polish

2026-03-14 18:22:52 +09:00
parent cc3eafb2fa
commit caf53f0b68
8 changed files with 49 additions and 16 deletions
--- a/docs/12_core_loop_execution_roadmap.md
+++ b/docs/12_core_loop_execution_roadmap.md
@@ -304,6 +304,7 @@ Away / Return이 끼어들기 전, 다음으로 예정된 축은 아래 두 가
 - `Pause / Break / Return` separation polish
  - material 1차 분리 반영 완료
  - copy / CTA hierarchy 2차 분리 반영 완료
+  - motion polish 1차 반영 완료
  - 남은 것은 browser QA와 motion 미세 조정

 ### 다음 대기
--- a/docs/90_current_state.md
+++ b/docs/90_current_state.md
@@ -52,6 +52,10 @@ Last Updated: 2026-03-14
  - `Return(focus)`는 `멈춘 자리에서 이어가기`, `Return(break)`는 `지금부터 쉬기 / 다음 블록 이어가기` 중심으로 재서술
  - `Goal Complete`는 `다음 블록 이어가기 / 잠깐 쉬기 / 여기까지 끝내기` 순의 선택 tray를 먼저 보여주고, 다음 블록 입력은 이후 단계에서만 열리게 정리
  - choice/next view의 헤더와 설명도 각각 다른 감정 상태에 맞춰 분리
+- `/space` Pause / Break / Return motion polish 1차 구현:
+  - `Pause` tray는 빠르게 다시 붙잡는 recovery reveal로 조정
+  - `Return(focus)`는 짧은 re-entry settle motion으로, `Return(break)`는 더 느슨한 release reveal로 분리
+  - `Goal Complete`도 같은 recovery family 안에서 가장 느린 closure motion을 가지도록 조정

 - Focus Entry Surface / Execution Surface 재정의:
  - `/app`을 planning home이 아니라 hero-first focus entry surface로 재구성
--- a/docs/session_brief.md
+++ b/docs/session_brief.md
@@ -15,8 +15,8 @@ Last Updated: 2026-03-14
 ## 현재 우선순위

 1. `/space` Refocus + Return 브라우저 QA
-2. `Pause / Break / Return` motion polish
-3. `Weekly Review` 상세 기획
+2. `Weekly Review` 상세 기획
+3. `Premium Ambience System` 방향 정리

 ## 최근 세션 상태

@@ -56,6 +56,10 @@ Last Updated: 2026-03-14
  - `Pause`는 `멈춘 이유`보다 `다시 시작할 한 줄`에 집중하는 recovery tone으로 다시 썼다.
  - `Return(focus)`는 `이어가기`, `Return(break)`는 `지금부터 쉬기 / 다음 블록 이어가기` 중심으로 문구를 분리했다.
  - `Goal Complete`는 `마무리 / 쉬기 / 이어가기`의 선택 tray가 먼저 보이고, 다음 블록 입력은 이후 단계에서만 열리도록 더 선명해졌다.
+- `Pause / Break / Return`의 motion polish 1차를 반영했다.
+  - `Pause`는 빠르게 다시 붙잡는 recovery reveal로,
+  - `Return(focus)`는 재진입에 맞는 짧은 settle motion으로,
+  - `Return(break)`와 `Goal Complete`는 더 느슨한 release/closure reveal로 분리했다.
 - `/app`을 single-goal commitment gate로 다시 줄였다.
  - 2-step ritual setup을 제거했다.
  - current session이 있으면 `Resume` UI만 보여주고, `/space`로 이어가기만 제안한다.
--- a/docs/work.md
+++ b/docs/work.md
@@ -82,6 +82,7 @@
  - break는 release tone
  - return은 re-entry tone으로 분리된다
  - copy와 CTA hierarchy 2차 분리가 반영된다
+  - motion polish 1차가 반영된다
 - 검증:
  - 브라우저 수동 확인
  - motion 미세 조정
--- a/src/widgets/space-focus-hud/ui/GoalCompleteSheet.tsx
+++ b/src/widgets/space-focus-hud/ui/GoalCompleteSheet.tsx
@@ -10,6 +10,9 @@ import {
  HUD_OPTION_ROW,
  HUD_OPTION_ROW_BREAK,
  HUD_OPTION_ROW_PRIMARY,
+  HUD_REVEAL_BASE,
+  HUD_REVEAL_COMPLETE,
+  HUD_REVEAL_HIDDEN,
  HUD_TEXT_LINK,
  HUD_TEXT_LINK_STRONG,
  HUD_TRAY_HAIRLINE,
@@ -137,10 +140,8 @@ export const GoalCompleteSheet = ({
  return (
    <div
      className={cn(
-        'pointer-events-none w-full overflow-hidden transition-all duration-300 ease-out motion-reduce:duration-0',
-        open
-          ? 'max-h-[28rem] translate-y-0 opacity-100'
-          : 'pointer-events-none max-h-0 -translate-y-2 opacity-0',
+        HUD_REVEAL_BASE,
+        open ? HUD_REVEAL_COMPLETE : HUD_REVEAL_HIDDEN,
      )}
      aria-hidden={!open}
    >
--- a/src/widgets/space-focus-hud/ui/PauseRefocusPrompt.tsx
+++ b/src/widgets/space-focus-hud/ui/PauseRefocusPrompt.tsx
@@ -9,6 +9,9 @@ import {
  HUD_PAUSE_BODY,
  HUD_PAUSE_EYEBROW,
  HUD_PAUSE_TITLE,
+  HUD_REVEAL_BASE,
+  HUD_REVEAL_HIDDEN,
+  HUD_REVEAL_PAUSE,
  HUD_TRAY_HAIRLINE,
  HUD_TRAY_LAYER,
  HUD_TRAY_SHELL,
@@ -30,10 +33,8 @@ export const PauseRefocusPrompt = ({
  return (
    <div
      className={cn(
-        'pointer-events-none w-full overflow-hidden transition-all duration-200 ease-out motion-reduce:duration-0',
-        open
-          ? 'max-h-[26rem] translate-y-0 opacity-100'
-          : 'pointer-events-none max-h-0 -translate-y-2 opacity-0',
+        HUD_REVEAL_BASE,
+        open ? HUD_REVEAL_PAUSE : HUD_REVEAL_HIDDEN,
      )}
      aria-hidden={!open}
    >
--- a/src/widgets/space-focus-hud/ui/ReturnPrompt.tsx
+++ b/src/widgets/space-focus-hud/ui/ReturnPrompt.tsx
@@ -7,6 +7,10 @@ import {
  HUD_OPTION_ROW,
  HUD_OPTION_ROW_BREAK,
  HUD_OPTION_ROW_PRIMARY,
+  HUD_REVEAL_BASE,
+  HUD_REVEAL_HIDDEN,
+  HUD_REVEAL_RETURN_BREAK,
+  HUD_REVEAL_RETURN_FOCUS,
  HUD_RETURN_BODY,
  HUD_RETURN_TITLE,
  HUD_TRAY_HAIRLINE_BREAK,
@@ -41,13 +45,12 @@ export const ReturnPrompt = ({
  return (
    <div
      className={cn(
-        'pointer-events-none w-full overflow-hidden transition-all motion-reduce:duration-0',
+        HUD_REVEAL_BASE,
        open
-          ? 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',
+          ? isBreakReturn
+            ? HUD_REVEAL_RETURN_BREAK
+            : HUD_REVEAL_RETURN_FOCUS
+          : HUD_REVEAL_HIDDEN,
      )}
      aria-hidden={!open}
    >
--- a/src/widgets/space-focus-hud/ui/overlayStyles.ts
+++ b/src/widgets/space-focus-hud/ui/overlayStyles.ts
@@ -14,6 +14,24 @@ export const HUD_TRAY_HAIRLINE = 'pointer-events-none absolute inset-x-0 top-0 h

 export const HUD_TRAY_HAIRLINE_BREAK = 'pointer-events-none absolute inset-x-0 top-0 h-px bg-emerald-200/18';

+export const HUD_REVEAL_BASE =
+  'pointer-events-none w-full origin-top-left overflow-hidden transition-[max-height,opacity,transform] motion-reduce:transition-none';
+
+export const HUD_REVEAL_HIDDEN =
+  'pointer-events-none max-h-0 -translate-y-3 scale-[0.985] opacity-0';
+
+export const HUD_REVEAL_PAUSE =
+  'max-h-[26rem] translate-y-0 scale-100 opacity-100 duration-200 ease-[cubic-bezier(0.22,1,0.36,1)]';
+
+export const HUD_REVEAL_RETURN_FOCUS =
+  'max-h-[24rem] translate-y-0 scale-100 opacity-100 duration-220 ease-[cubic-bezier(0.2,0.9,0.2,1)]';
+
+export const HUD_REVEAL_RETURN_BREAK =
+  'max-h-[24rem] translate-y-0 scale-100 opacity-100 duration-320 ease-[cubic-bezier(0.16,1,0.3,1)]';
+
+export const HUD_REVEAL_COMPLETE =
+  'max-h-[28rem] translate-y-0 scale-100 opacity-100 duration-260 ease-[cubic-bezier(0.18,1,0.32,1)]';
+
 export const HUD_FIELD =
  'h-11 w-full rounded-[18px] border border-white/10 bg-black/14 px-3.5 text-[0.98rem] tracking-tight text-white placeholder:text-white/30 focus:border-white/20 focus:bg-black/20 focus:outline-none focus:ring-2 focus:ring-white/8';