style(space-hud): 30초 복귀 액션을 숨 고르기 톤으로 리브랜딩

맥락:
- /space 하단 HUD의 30초 복귀 액션을 저자극 감성 톤으로 정리해 복귀 행동의 심리적 부담을 낮춘다.

변경사항:
- restart-30s feature에 카피 상수(model/copy)를 추가하고 버튼/모드/안내 문구를 중앙 관리로 전환했다.
- useRestart30s에 더미 상태 전환(isBreatheMode, hintMessage)을 추가해 클릭 후 2초 내 안내 노출과 자동 복귀를 구현했다.
- HUD에서 30초 진입 중 상태 라벨을 BREATHE로 표시하고, 안내 문구를 목표 라인에 저대비로 잠깐 노출하도록 조정했다.
- 30초 액션 버튼을 "숨 고르기 30초" + 🌬️ 형태의 보조 액션 톤으로 변경했다.
- 세션 복구 문서(90_current_state, session_brief)에 이번 작업 상태/리스크를 반영했다.

검증:
- npx tsc --noEmit

세션-상태: /space 30초 복귀 액션 카피 리브랜딩 및 HUD 더미 안내 반영 완료
세션-다음: RoomSheet/도크 인원수 기반 카피를 큐레이션형 표현으로 전환
세션-리스크: HUD 목표 문구와 안내 문구가 교체 노출되어 정보 우선순위 점검 필요
This commit is contained in:
2026-02-27 14:58:35 +09:00
parent 20638b69a4
commit 313ef88961
7 changed files with 98 additions and 19 deletions

View File

@@ -36,6 +36,10 @@ Last Updated: 2026-02-27
- 눌렀을 때 즉시 fill이 보이도록 CSS keyframes 기반으로 교체
- 완료 후 fill이 0으로 역방향 축소되는 현상 제거(짧은 유지 후 언마운트)
- fill 끝단을 직선 형태로 정리(rounded 캡 제거)
- 30초 복귀 액션 카피를 감성 라운지 톤으로 리브랜딩:
- 버튼 라벨: `숨 고르기 30초`
- 진입 시 HUD 모드 라벨: `BREATHE`
- 클릭 시 저자극 안내 문구 노출(2초 이내 미니 안내 + 토스트)
- 몰입 모드 ON 시 `/space` 크롬 정리:
- 상단 `Current Room` 블록 숨김
- 우상단 허브 버튼 소형 아이콘화
@@ -56,6 +60,7 @@ Last Updated: 2026-02-27
3. `/space` 헤더 최소화 스타일을 테마별(밝은 배경) 대비 점검
4. 롱프레스 나가기 버튼의 터치 환경 힌트(첫 진입 안내) 필요 여부 판단
5. Room 시트 인원수 기반 카피를 분위기형 카피로 치환
6. 30초 복귀 안내 카피의 노출 위치(HUD 내 vs 토스트 전용) AB 점검
## RISKS
@@ -65,6 +70,7 @@ Last Updated: 2026-02-27
- safe-area 값이 작은 기기에서는 HUD가 너무 낮게 느껴질 수 있어 세부 조정 여지 존재
- 롱프레스 인터랙션은 첫 사용자에게 즉시 인지되지 않을 수 있어 시각적 힌트 필요 가능성 있음
- bar/ring 진행 표시는 서로 다른 구현(JS/CSS)이라 동기화 규칙 변경 시 회귀 점검이 필요
- 안내 카피가 HUD 목표 문구와 교체 표시되므로 정보 밀도 균형 점검 필요
## CHANGED FILES
@@ -107,6 +113,11 @@ Last Updated: 2026-02-27
- `src/features/exit-hold/model/useHoldToConfirm.ts`
- `src/features/exit-hold/ui/ExitHoldButton.tsx`
- `src/app/globals.css`
- `src/features/restart-30s/model/copy.ts`
- `src/features/restart-30s/model/useRestart30s.ts`
- `src/features/restart-30s/ui/Restart30sAction.tsx`
- `src/features/restart-30s/index.ts`
- `src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx`
## QUICK VERIFY