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:
@@ -1,5 +1,11 @@
|
||||
'use client';
|
||||
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
import { Restart30sAction } from '@/features/restart-30s';
|
||||
import {
|
||||
RECOVERY_30S_MODE_LABEL,
|
||||
Restart30sAction,
|
||||
useRestart30s,
|
||||
} from '@/features/restart-30s';
|
||||
|
||||
interface SpaceTimerHudWidgetProps {
|
||||
timerLabel: string;
|
||||
@@ -20,6 +26,8 @@ export const SpaceTimerHudWidget = ({
|
||||
className,
|
||||
isImmersionMode = false,
|
||||
}: SpaceTimerHudWidgetProps) => {
|
||||
const { isBreatheMode, hintMessage, triggerRestart } = useRestart30s();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
@@ -45,7 +53,7 @@ export const SpaceTimerHudWidget = ({
|
||||
isImmersionMode ? 'text-white/45' : 'text-white/62',
|
||||
)}
|
||||
>
|
||||
Focus
|
||||
{isBreatheMode ? RECOVERY_30S_MODE_LABEL : 'Focus'}
|
||||
</span>
|
||||
<span
|
||||
className={cn(
|
||||
@@ -59,9 +67,15 @@ export const SpaceTimerHudWidget = ({
|
||||
{timerLabel}
|
||||
</span>
|
||||
</div>
|
||||
<p className={cn('truncate text-[11px]', isImmersionMode ? 'text-white/44' : 'text-white/58')}>
|
||||
목표: {goal}
|
||||
</p>
|
||||
{hintMessage ? (
|
||||
<p className={cn('truncate text-[11px]', isImmersionMode ? 'text-white/54' : 'text-white/64')}>
|
||||
{hintMessage}
|
||||
</p>
|
||||
) : (
|
||||
<p className={cn('truncate text-[11px]', isImmersionMode ? 'text-white/44' : 'text-white/58')}>
|
||||
목표: {goal}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2.5">
|
||||
@@ -83,7 +97,7 @@ export const SpaceTimerHudWidget = ({
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<Restart30sAction />
|
||||
<Restart30sAction onTrigger={triggerRestart} />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user