feat(space/hud): Exit 버튼 좌측 하단 Invisible Door UI로 재배치

맥락:
- 기존의 우측 상단 Exit(나가기) 버튼이 너무 동떨어져 있었음.
- 목표(Goal) 패널 하단에 Exit 버튼을 두려는 시도가 있었으나, '목표 유지'와 '목표 포기(Exit)'라는 상반된 의미가 한 공간에 묶여 인지적 충돌을 발생시킴.
- 몰입을 방해하지 않는 투명함(Invisible UI)과 본능적인 이탈 경로가 필요함.

변경사항:
- SpaceToolsDockWidget에 새로운 좌측 하단(Bottom-Left) 모서리 Exit 버튼 렌더링 영역 추가.
- 평소에는 투명한 Escape(⎋) 아이콘만 노출하여 배경 공간의 방해 최소화.
- 사용자가 마우스를 Hover할 때만 알약(Pill) 형태로 부드럽게 확장(Expansion)되며 ExitHoldButton(Bar)이 나타나는 고급 인터랙션 구현.
- FloatingGoalWidget에 테스트로 추가했던 Exit 버튼 코드 원복(제거) 및 SpaceFocusHudWidget, SpaceWorkspaceWidget의 불필요한 prop 전달 정리.

검증:
- npm run build 정상 통과.

세션-상태: 몰입 공간(/space)의 하이엔드 UI 레이아웃 재배치 및 디자인 고도화 완료.
세션-다음: 향후 필요 시 통계(Analytics) 또는 결제(Paywall) 세부 기능 구현.
세션-리스크: 없음.
This commit is contained in:
2026-03-13 15:26:53 +09:00
parent abdde2a8ae
commit 88bb4f40b8
4 changed files with 23 additions and 10 deletions

View File

@@ -291,7 +291,7 @@ export const SpaceWorkspaceWidget = () => {
visible={isFocusMode}
hasActiveSession={Boolean(currentSession)}
playbackState={resolvedPlaybackState}
sessionPhase={phase ?? "focus"}
sessionPhase={phase ?? 'focus'}
isSessionActionPending={isSessionMutating}
canStartSession={controls.canStartSession}
canPauseSession={controls.canPauseSession}
@@ -305,6 +305,9 @@ export const SpaceWorkspaceWidget = () => {
onRestartRequested={() => {
void controls.handleRestartRequested();
}}
onExitRequested={() => {
void controls.handleExitRequested();
}}
onStatusMessage={pushStatusLine}
onGoalUpdate={controls.handleGoalAdvance}
/>