맥락: - 몰입 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) 진행 로직이 분리되어 향후 규칙 변경 시 동시 점검 필요
2.4 KiB
2.4 KiB
Session Brief
Last Updated: 2026-02-27
세션 시작 시 항상 읽는 초소형 스냅샷 문서.
고정 규칙 (요약)
- 구현 범위는 UI 목업 + 더미 데이터 + 토스트로 제한한다.
page.tsx는 조합만 담당한다.- 비즈니스 로직은
features/entities로 이동한다. - 파일이 500줄 이상이면 분리한다.
- 커밋은 주제별 1커밋, 한국어 Conventional Commit으로 작성한다.
현재 우선순위
RoomSheetWidget/도크 패널의 인원 수 UI를 큐레이션형으로 전환- 몰입 모드에서 터치 환경 레일 발견성(미니 핸들 UX) 보완 여부 결정
/space헤더 최소화 스타일의 밝은 배경 대비 점검
최근 세션 상태
- 세션 복구용 문서/템플릿/스크립트가 준비되어 있다.
workFlow.md는 토큰 절약 모드를 사용한다./space하단 사운드 바를 제거하고 오른쪽🎧 Sound시트로 이동했다./space헤더 프레임을 축소하고 HUD를 하단 safe-area 기준으로 더 밀착시켰다.- 상단 우측 나가기 액션을 클릭형에서 1초 롱프레스형으로 전환했다.
- 0.05초에 진행률 20%까지 빠르게 상승하는 가속 진행을 적용했다.
- 몰입 OFF는 bar, 몰입 ON은 ring 형태로 진행률을 표시한다.
- 롱프레스 bar 진행 표시를 CSS keyframes 기반으로 교체해 즉시 가시성을 개선했다.
- 완료 후 fill이 0으로 역방향 축소되는 현상을 제거했다.
- fill 끝단은 직선 형태로 정리했다.
- 몰입 모드 ON 시 상단 룸 블록 숨김, 레일 미니화, HUD 저대비, 비네팅 강화가 적용된다.
- 이후 작업은
docs/work.md를 기준으로 실행한다.
리스크
- 네트워크 제한 환경에서는
npm run build시 Google Fonts fetch 실패 가능 - 터치 환경에서 레일 미니 상태가 발견성 낮을 수 있어 UX 보완이 필요할 수 있음
- safe-area가 작은 기기에서는 HUD 하단 간격 체감이 과도할 수 있어 미세 조정이 필요할 수 있음
- 롱프레스 인터랙션은 신규 사용자에게 즉시 인지되지 않을 수 있어 보조 카피가 필요할 수 있음
- bar/ring 진행 구현 방식이 달라 향후 진행 규칙 변경 시 회귀 확인이 필요함
상세 원문 위치
- 장문 상세 상태:
docs/90_current_state.md - 구조 규칙 상세:
docs/02_arch_fsd_rules.md - 커밋 규칙 상세:
docs/06_commit_convention.md