맥락: - /app에서 핵심 카드(지금 몰입/오늘의 공간)가 배경 이미지와 함께 어둡게 겹쳐 보이며 시인성이 떨어졌다. - 배경은 가상 공간을 유지하되 카드 표면은 stats와 유사한 흰 톤으로 분리해 정보 가독성을 높일 필요가 있었다. 변경사항: - StartRitualWidget과 RoomsGalleryWidget 컨테이너를 흰 표면 + 어두운 텍스트 라이트 카드 톤으로 조정했다. - StartRitual 입력/칩/보조 버튼 색상을 라이트 카드 팔레트에 맞춰 재정렬했다. - AppHub 배경 이미지의 blur/밝기 보정을 강화하고 다크 오버레이를 완화해 카드 외곽에서 가상 공간 배경이 부드럽게 보이도록 조정했다. - 세션 문서(90_current_state, session_brief)에 이번 작업 내역과 리스크를 반영했다. 검증: - npx tsc --noEmit 세션-상태: /app 핵심 카드 라이트 톤 전환 및 배경 블러 강화 반영 완료 세션-다음: RoomSheet/도크 패널의 인원수 기반 표현을 분위기형 정보로 전환 세션-리스크: 룸 프리뷰 카드는 이미지 기반 다크 톤이라 라이트 컨테이너와 미세한 톤 차이가 남을 수 있음
171 lines
9.5 KiB
Markdown
171 lines
9.5 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` 배경/패널을 라이트 팔레트로 전환
|
|
- `/app` 룸 카드 hydration 에러 수정:
|
|
- `RoomPreviewCard`의 중첩 `<button>` 구조 제거
|
|
- 카드 내부 칩을 비인터랙티브 `span`으로 변경해 HTML 규칙 위반 해소
|
|
- `/app` 허브 배경/카드 가시성 안정화 패치:
|
|
- 허브 배경에 blur + 밝기 보정 + 저채도 필터를 적용해 배경 복잡도 완화
|
|
- 허브 전역 오버레이를 밝은 워시 중심으로 조정하고 그레인 강도 축소
|
|
- `RoomPreviewCard` 내부 콘텐츠 영역에 반투명 패널을 추가해 배경 변동과 텍스트 대비를 분리
|
|
- `GlassCard` 표면을 조금 더 밝고 가벼운 글래스 톤으로 보정
|
|
- 커스텀 입장 모달 톤/레이아웃 안정화:
|
|
- 모달 표면/오버레이를 허브 밝은 톤과 유사한 저대비 글래스로 전환
|
|
- `공간/사운드/타이머` 탭 콘텐츠 영역을 고정 높이로 통일해 전환 시 모달 크기 흔들림 제거
|
|
- 탭/옵션 버튼과 입력 필드를 밝은 팔레트로 정리해 가독성 개선
|
|
- `/app` 핵심 카드(시작/공간) 라이트 카드 전환:
|
|
- `지금, 몰입을 시작해요` / `오늘의 공간` 컨테이너를 흰 표면 + 어두운 텍스트 톤으로 조정
|
|
- 입력/칩/보조 버튼 색상도 라이트 카드 기준으로 재정렬
|
|
- 허브 배경은 가상 공간 이미지를 더 강한 blur로 노출해 카드 외곽 배경으로 유지
|
|
- 몰입 모드 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`
|
|
- `src/shared/ui/GlassCard.tsx`
|
|
- `src/widgets/app-hub/ui/AppHubWidget.tsx`
|
|
- `src/features/room-select/ui/RoomPreviewCard.tsx`
|
|
- `src/shared/ui/Modal.tsx`
|
|
- `src/shared/ui/Tabs.tsx`
|
|
- `src/features/custom-entry-modal/ui/CustomEntryModal.tsx`
|
|
- `src/widgets/start-ritual-widget/ui/StartRitualWidget.tsx`
|
|
- `src/widgets/rooms-gallery-widget/ui/RoomsGalleryWidget.tsx`
|
|
- `src/widgets/app-hub/ui/AppHubWidget.tsx`
|
|
|
|
## QUICK VERIFY
|
|
|
|
1. `/app`: 건너뛰기/다시 시작 노출 없음
|
|
2. `/app`: 룸 카드에 사람 수 문구 없음, 추천 정보 노출
|
|
3. `/space`: 하단 사운드 바 없음, 오른쪽 `🎧 Sound` 시트에서 프리셋 선택 가능
|
|
4. `/space`: 몰입 모드 ON 시 상단 룸 블록 숨김 + 레일 미니화 + HUD 저대비 적용
|
|
5. `/app`: 콘솔에 `button cannot be a descendant of button` hydration 에러가 재발하지 않음
|
|
6. `/app`: 숲/벽난로처럼 텍스처가 많은 룸 선택 시에도 카드 내부 텍스트 시인성이 유지됨
|
|
7. 커스텀 입장 모달 탭 전환(공간/사운드/타이머) 시 외곽 모달 크기가 유지됨
|
|
8. `/app`: 시작 카드/공간 카드가 흰 표면 + 어두운 텍스트로 표시되고, 카드 밖 배경은 블러된 가상 공간으로 노출됨
|