fix(exit-hold): bar 진행 표시 즉시 반영 및 리셋 애니메이션 수정
맥락: - 몰입 OFF의 나가기 롱프레스 bar에서 진행 표시가 즉시 보이지 않고 완료 시 0으로 역방향 축소되는 문제를 해결하기 위해 변경사항: - bar 진행 표시를 JS width 갱신에서 CSS keyframes 기반으로 교체 - 키프레임에 가속 규칙 반영(0.05초 20%, 1.0초 100%) - 완료 후 100% 상태를 짧게 유지한 뒤 언마운트하도록 훅 상태(isCompleted) 보강 - progress fill의 rounded 캡을 제거해 끝단 직선화 - docs/90_current_state.md, docs/session_brief.md 최신 상태 반영 검증: - npx tsc --noEmit 세션-상태: bar 롱프레스 진행은 눌렀을 때 즉시 보이고 완료 리셋 시 역방향 축소가 사라짐 세션-다음: 롱프레스 인지성 보조 카피 도입 여부 검토 세션-리스크: bar(CSS)와 ring(JS) 진행 로직이 분리되어 향후 규칙 변경 시 동시 점검 필요
This commit is contained in:
@@ -32,6 +32,10 @@ Last Updated: 2026-02-27
|
||||
- 0.05초에 진행률 20%까지 빠르게 상승
|
||||
- 1초 유지 시 `나가기(더미)` 토스트 + 몰입 모드 OFF
|
||||
- 몰입 OFF: 좌→우 fill(bar), 몰입 ON: 원형 ring 진행 표시
|
||||
- 롱프레스 bar 진행 표시 버그 수정:
|
||||
- 눌렀을 때 즉시 fill이 보이도록 CSS keyframes 기반으로 교체
|
||||
- 완료 후 fill이 0으로 역방향 축소되는 현상 제거(짧은 유지 후 언마운트)
|
||||
- fill 끝단을 직선 형태로 정리(rounded 캡 제거)
|
||||
- 몰입 모드 ON 시 `/space` 크롬 정리:
|
||||
- 상단 `Current Room` 블록 숨김
|
||||
- 우상단 허브 버튼 소형 아이콘화
|
||||
@@ -51,6 +55,7 @@ Last Updated: 2026-02-27
|
||||
2. 몰입 모드에서 터치 환경(hover 없음) 레일 노출 UX를 보완할지 정책 확정
|
||||
3. `/space` 헤더 최소화 스타일을 테마별(밝은 배경) 대비 점검
|
||||
4. 롱프레스 나가기 버튼의 터치 환경 힌트(첫 진입 안내) 필요 여부 판단
|
||||
5. Room 시트 인원수 기반 카피를 분위기형 카피로 치환
|
||||
|
||||
## RISKS
|
||||
|
||||
@@ -59,6 +64,7 @@ Last Updated: 2026-02-27
|
||||
- 일부 시트(예: Room)는 아직 인원수 중심 문구가 남아 있어 톤 불일치 가능성 존재
|
||||
- safe-area 값이 작은 기기에서는 HUD가 너무 낮게 느껴질 수 있어 세부 조정 여지 존재
|
||||
- 롱프레스 인터랙션은 첫 사용자에게 즉시 인지되지 않을 수 있어 시각적 힌트 필요 가능성 있음
|
||||
- bar/ring 진행 표시는 서로 다른 구현(JS/CSS)이라 동기화 규칙 변경 시 회귀 점검이 필요
|
||||
|
||||
## CHANGED FILES
|
||||
|
||||
@@ -100,6 +106,7 @@ Last Updated: 2026-02-27
|
||||
- `src/features/exit-hold/index.ts`
|
||||
- `src/features/exit-hold/model/useHoldToConfirm.ts`
|
||||
- `src/features/exit-hold/ui/ExitHoldButton.tsx`
|
||||
- `src/app/globals.css`
|
||||
|
||||
## QUICK VERIFY
|
||||
|
||||
|
||||
Reference in New Issue
Block a user