Files
viberoom-web/docs/90_current_state.md
corpi 20638b69a4 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) 진행 로직이 분리되어 향후 규칙 변경 시 동시 점검 필요
2026-02-27 14:36:31 +09:00

117 lines
5.4 KiB
Markdown

# 90. Current State
Last Updated: 2026-02-27
## DONE
- 세션 복구 운영 문서 추가:
- `docs/06_commit_convention.md`
- `docs/07_session_recovery.md`
- 워크플로우 토큰 절약 모드 추가:
- `docs/context_core.md` 신설
- `docs/workFlow.md`를 기본 3문서 + 조건부 로드로 변경
- 워크플로우 기본 로드를 2파일로 축소:
- `docs/work.md`
- `docs/session_brief.md`
- 복구 스크립트 추가:
- `scripts/session/recover-context.sh`
- `npm run session:recover` 명령 추가
- `/app` Start Ritual에서 절차감을 높이던 `건너뛰기` 제거
- `/app`에서 `다시 시작(30초)` 제거
- `/space` HUD에 `features/restart-30s` 기반 `↻ 다시 시작 + 30초 배지` 추가
- `/space` 하단 사운드 프리셋 바 제거, 오른쪽 `🎧 Sound` 시트로 이동
- `features/sound-preset` + `widgets/sound-sheet` 추가
- `features/immersion-mode` 추가, Quick 시트에서 몰입 모드 토글 연결
- `/space` 상단 헤더 크롬 최소화:
- 헤더 프레임(border/강한 배경) 제거
- 패딩 축소로 배경 노출 증가
- 타이머 HUD 하단 위치를 safe-area 기반 최소 여백으로 조정
- 몰입 모드 ON 시 상단 액션을 `나가기` 버튼으로 전환
- 클릭 시 토스트 `나가기(더미)` 노출 + 몰입 모드 OFF
- `/space` 상단 우측 나가기 액션을 롱프레스(1초)로 변경
- 0.05초에 진행률 20%까지 빠르게 상승
- 1초 유지 시 `나가기(더미)` 토스트 + 몰입 모드 OFF
- 몰입 OFF: 좌→우 fill(bar), 몰입 ON: 원형 ring 진행 표시
- 롱프레스 bar 진행 표시 버그 수정:
- 눌렀을 때 즉시 fill이 보이도록 CSS keyframes 기반으로 교체
- 완료 후 fill이 0으로 역방향 축소되는 현상 제거(짧은 유지 후 언마운트)
- fill 끝단을 직선 형태로 정리(rounded 캡 제거)
- 몰입 모드 ON 시 `/space` 크롬 정리:
- 상단 `Current Room` 블록 숨김
- 우상단 허브 버튼 소형 아이콘화
- 오른쪽 아이콘 레일 기본 미니화(hover/click 시 확장)
- HUD 대비/불투명도 완화
- 비네팅/그레인 강화
- `/app` 룸 카드의 인원수 기반 정보 제거
- `entities/room`에 분위기/추천 필드 추가:
- `recommendedSound`
- `recommendedTime`
- `vibeLabel`
- 룸 카드 정보 표현을 큐레이션 중심으로 전환
## NEXT
1. `RoomSheetWidget`/도크 패널의 인원수 기반 UI를 큐레이션형 정보로 재정의
2. 몰입 모드에서 터치 환경(hover 없음) 레일 노출 UX를 보완할지 정책 확정
3. `/space` 헤더 최소화 스타일을 테마별(밝은 배경) 대비 점검
4. 롱프레스 나가기 버튼의 터치 환경 힌트(첫 진입 안내) 필요 여부 판단
5. Room 시트 인원수 기반 카피를 분위기형 카피로 치환
## RISKS
- `npm run build`는 네트워크 제한 시 Google Font fetch 실패 가능
- 터치 기기에서 레일 미니 상태가 발견성 낮을 수 있어 추가 힌트가 필요할 수 있음
- 일부 시트(예: Room)는 아직 인원수 중심 문구가 남아 있어 톤 불일치 가능성 존재
- safe-area 값이 작은 기기에서는 HUD가 너무 낮게 느껴질 수 있어 세부 조정 여지 존재
- 롱프레스 인터랙션은 첫 사용자에게 즉시 인지되지 않을 수 있어 시각적 힌트 필요 가능성 있음
- bar/ring 진행 표시는 서로 다른 구현(JS/CSS)이라 동기화 규칙 변경 시 회귀 점검이 필요
## CHANGED FILES
- `docs/06_commit_convention.md`
- `docs/07_session_recovery.md`
- `docs/context_core.md`
- `docs/session_brief.md`
- `docs/workFlow.md`
- `docs/README.md`
- `.gitmessage-session.txt`
- `scripts/session/recover-context.sh`
- `package.json`
- `src/widgets/start-ritual-widget/ui/StartRitualWidget.tsx`
- `src/widgets/app-hub/ui/AppHubWidget.tsx`
- `src/entities/room/model/types.ts`
- `src/entities/room/model/rooms.ts`
- `src/features/room-select/ui/RoomPreviewCard.tsx`
- `src/features/restart-30s/index.ts`
- `src/features/restart-30s/model/useRestart30s.ts`
- `src/features/restart-30s/ui/Restart30sAction.tsx`
- `src/features/immersion-mode/index.ts`
- `src/features/immersion-mode/model/useImmersionMode.ts`
- `src/features/immersion-mode/ui/ImmersionModeToggle.tsx`
- `src/features/sound-preset/index.ts`
- `src/features/sound-preset/model/useSoundPresetSelection.ts`
- `src/features/sound-preset/ui/SoundPresetControls.tsx`
- `src/shared/ui/Toggle.tsx`
- `src/widgets/sound-sheet/index.ts`
- `src/widgets/sound-sheet/ui/SoundSheetWidget.tsx`
- `src/widgets/space-chrome/index.ts`
- `src/widgets/space-chrome/ui/SpaceChromeWidget.tsx`
- `src/widgets/quick-sheet/ui/QuickSheetWidget.tsx`
- `src/widgets/space-shell/ui/SpaceSkeletonWidget.tsx`
- `src/widgets/space-tools-dock/model/useSpaceToolsDock.ts`
- `src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx`
- `src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx`
- `src/widgets/space-chrome/ui/SpaceChromeWidget.tsx`
- `src/features/immersion-mode/model/useImmersionMode.ts`
- `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
1. `/app`: 건너뛰기/다시 시작 노출 없음
2. `/app`: 룸 카드에 사람 수 문구 없음, 추천 정보 노출
3. `/space`: 하단 사운드 바 없음, 오른쪽 `🎧 Sound` 시트에서 프리셋 선택 가능
4. `/space`: 몰입 모드 ON 시 상단 룸 블록 숨김 + 레일 미니화 + HUD 저대비 적용