Files
viberoom-web/docs/90_current_state.md
corpi 23f103c7b7 style(app-theme): landing 이후 앱 배경 톤을 밝은 무드로 조정
맥락:
- /landing 이후 진입하는 앱 화면들의 배경이 전반적으로 어두워 초기 인상과 톤 연속성이 떨어졌다.
- 기존 감성/저자극 분위기를 유지하면서 배경 명도를 올려 부담을 낮출 필요가 있었다.

변경사항:
- /app 허브 배경 오버레이를 밝은 그라디언트 중심으로 조정하고 grain 강도를 낮췄다.
- 룸 카드 마스크 강도를 완화해 미리보기 이미지의 밝은 톤 노출을 늘렸다.
- /space 배경 오버레이, 그레인, 비네팅 강도를 단계적으로 낮춰 전체 명도를 상향했다.
- /space suspense fallback 배경을 라이트 그라디언트로 변경했다.
- /stats, /settings 페이지를 라이트 팔레트 기반 배경/패널 스타일로 전환했다.
- 세션 복구 문서(90_current_state, session_brief)에 이번 변경과 리스크를 반영했다.

검증:
- npx tsc --noEmit

세션-상태: /landing 이후 앱 플로우 배경이 밝은 톤으로 정리됨
세션-다음: RoomSheet/도크 패널의 인원수 기반 표현을 분위기형 정보로 전환
세션-리스크: 밝은 배경 구간에서 일부 white 텍스트 대비가 약해질 수 있어 기기별 시인성 점검 필요
2026-02-28 23:12:54 +09:00

139 lines
6.8 KiB
Markdown

# 90. Current State
Last Updated: 2026-02-28
## 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 캡 제거)
- 30초 복귀 액션 카피를 감성 라운지 톤으로 리브랜딩:
- 버튼 라벨: `숨 고르기 30초`
- 진입 시 HUD 모드 라벨: `BREATHE`
- 클릭 시 저자극 안내 문구 노출(2초 이내 미니 안내 + 토스트)
- `/landing` 이후 앱 플로우 배경 톤을 밝은 무드로 조정:
- `/app` 허브 배경 오버레이를 밝게 조정하고 룸 카드 어두운 마스크 강도 완화
- `/space` 배경 오버레이/비네팅 강도를 낮춰 배경 노출 증가
- `/stats`, `/settings` 배경/패널을 라이트 팔레트로 전환
- 몰입 모드 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 시트 인원수 기반 카피를 분위기형 카피로 치환
6. 30초 복귀 안내 카피의 노출 위치(HUD 내 vs 토스트 전용) AB 점검
## RISKS
- `npm run build`는 네트워크 제한 시 Google Font fetch 실패 가능
- 터치 기기에서 레일 미니 상태가 발견성 낮을 수 있어 추가 힌트가 필요할 수 있음
- 일부 시트(예: Room)는 아직 인원수 중심 문구가 남아 있어 톤 불일치 가능성 존재
- safe-area 값이 작은 기기에서는 HUD가 너무 낮게 느껴질 수 있어 세부 조정 여지 존재
- 롱프레스 인터랙션은 첫 사용자에게 즉시 인지되지 않을 수 있어 시각적 힌트 필요 가능성 있음
- bar/ring 진행 표시는 서로 다른 구현(JS/CSS)이라 동기화 규칙 변경 시 회귀 점검이 필요
- 안내 카피가 HUD 목표 문구와 교체 표시되므로 정보 밀도 균형 점검 필요
- 밝아진 배경 구간에서 일부 white 텍스트의 대비가 환경(디스플레이 밝기)에 따라 약해질 수 있음
## 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`
- `src/features/restart-30s/model/copy.ts`
- `src/features/restart-30s/model/useRestart30s.ts`
- `src/features/restart-30s/ui/Restart30sAction.tsx`
- `src/features/restart-30s/index.ts`
- `src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx`
- `src/widgets/app-hub/ui/AppHubWidget.tsx`
- `src/features/room-select/ui/RoomPreviewCard.tsx`
- `src/app/(app)/space/page.tsx`
- `src/widgets/space-shell/ui/SpaceSkeletonWidget.tsx`
- `src/widgets/stats-overview/ui/StatsOverviewWidget.tsx`
- `src/widgets/settings-panel/ui/SettingsPanelWidget.tsx`
## QUICK VERIFY
1. `/app`: 건너뛰기/다시 시작 노출 없음
2. `/app`: 룸 카드에 사람 수 문구 없음, 추천 정보 노출
3. `/space`: 하단 사운드 바 없음, 오른쪽 `🎧 Sound` 시트에서 프리셋 선택 가능
4. `/space`: 몰입 모드 ON 시 상단 룸 블록 숨김 + 레일 미니화 + HUD 저대비 적용