corpi
22ff9e6e41
맥락: - 오늘의 공간 카드가 이미지 기반 배경이라 색/질감이 복잡하게 보였고, 카드와 페이지 배경의 톤 연결이 약했다. - 룸 이름별로 분리된 단색 팔레트를 사용해 카드 가독성과 허브의 색 일관성을 높일 필요가 있었다. 변경사항: - entities/room 모델에 hubColor 필드를 추가하고 10개 룸에 겹치지 않는 단색 팔레트를 정의했다. - RoomPreviewCard를 이미지 배경 대신 룸 고유 단색 배경으로 렌더링하도록 변경했다. - RoomPreviewCard 내부 텍스트/칩 스타일을 단색 카드 대비에 맞춰 어두운 텍스트 중심으로 재정렬했다. - AppHub 배경을 선택 룸의 hubColor로 동기화해 카드 선택과 페이지 배경이 같은 색 계열로 연결되게 조정했다. - 세션 문서(90_current_state, session_brief)에 이번 작업 내역과 리스크를 반영했다. 검증: - npx tsc --noEmit 세션-상태: /app 오늘의 공간 카드/허브 배경 단색 팔레트 전환 완료 세션-다음: RoomSheet/도크 패널의 인원수 기반 표현을 분위기형 정보로 전환 세션-리스크: 일부 디스플레이에서 단색 팔레트 간 체감 차이가 작아 보일 수 있어 기기별 색 분리도 점검 필요
5.1 KiB
5.1 KiB
Session Brief
Last Updated: 2026-02-28
세션 시작 시 항상 읽는 초소형 스냅샷 문서.
고정 규칙 (요약)
- 구현 범위는 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 끝단은 직선 형태로 정리했다.
- 30초 복귀 액션을 감성 라운지 톤으로 리브랜딩했다.
- 버튼 라벨을
숨 고르기 30초로 변경했다. - HUD 모드 라벨은 진입 시
BREATHE로 표시된다. - 클릭 시 저자극 안내 문구를 HUD 미니 안내 + 토스트로 노출한다.
- 버튼 라벨을
/landing이후 앱 플로우 배경을 밝은 톤으로 조정했다./app허브/룸 카드 오버레이를 완화해 배경 노출을 늘렸다./space오버레이/비네팅 강도를 낮춰 전체 명도를 올렸다./stats,/settings는 라이트 팔레트 기반 패널로 전환했다.
/app룸 카드 hydration 에러를 수정했다.RoomPreviewCard의 중첩<button>구조를 제거했다.- 카드 내부 칩을 비인터랙티브 태그로 바꿔 콘솔 에러를 해소했다.
/app배경과 카드 가시성을 함께 보정했다.- 허브 배경에 blur + 밝기 보정 + 저채도 필터를 적용해 배경 복잡도를 낮췄다.
- 전역 오버레이를 밝은 워시 중심으로 조정하고 그레인 강도를 낮췄다.
RoomPreviewCard내부에 반투명 정보 패널을 추가해 텍스트 대비를 안정화했다.
- 커스텀 입장 모달을 허브 톤과 맞춰 밝게 정리했다.
공간/사운드/타이머탭 콘텐츠 영역을 고정 높이로 바꿔 전환 시 모달 크기 변화가 없게 했다.- 탭/옵션/입력 필드 스타일을 밝은 팔레트 기준으로 통일했다.
/app의 핵심 카드 2개를 라이트 카드 톤으로 전환했다.지금, 몰입을 시작해요와오늘의 공간컨테이너를 흰 표면 + 어두운 텍스트로 정리했다.- 허브 배경 블러를 강화해 카드 외곽은 가상 공간 배경이 부드럽게 보이도록 조정했다.
/app오늘의 공간 카드를 룸별 단색 팔레트로 전환했다.entities/room에hubColor를 추가해 카드별 고유 단색을 분리했다.- 허브 배경도 선택 룸의 같은 색으로 동기화해 톤 연결성을 높였다.
- 몰입 모드 ON 시 상단 룸 블록 숨김, 레일 미니화, HUD 저대비, 비네팅 강화가 적용된다.
- 이후 작업은
docs/work.md를 기준으로 실행한다.
리스크
- 네트워크 제한 환경에서는
npm run build시 Google Fonts fetch 실패 가능 - 터치 환경에서 레일 미니 상태가 발견성 낮을 수 있어 UX 보완이 필요할 수 있음
- safe-area가 작은 기기에서는 HUD 하단 간격 체감이 과도할 수 있어 미세 조정이 필요할 수 있음
- 롱프레스 인터랙션은 신규 사용자에게 즉시 인지되지 않을 수 있어 보조 카피가 필요할 수 있음
- bar/ring 진행 구현 방식이 달라 향후 진행 규칙 변경 시 회귀 확인이 필요함
- HUD 안내 문구와 목표 문구가 교체 노출되므로 정보 우선순위 점검이 필요함
- 밝은 배경 구간에서 white 텍스트 대비가 낮아질 수 있어 기기별 시인성 점검이 필요함
- 배경 blur/filter 적용으로 저사양 환경에서 렌더링 비용이 소폭 증가할 수 있음
- 모달 고정 높이로 인해 작은 화면에서는 탭 본문 내부 스크롤 사용 빈도가 늘 수 있음
- 룸 프리뷰 카드의 이미지 기반 다크 톤과 라이트 컨테이너 사이 미세한 톤 차이가 남을 수 있음
- 단색 팔레트가 일부 디스플레이에서 유사하게 보일 수 있어 기기별 색 분리도 점검이 필요함
상세 원문 위치
- 장문 상세 상태:
docs/90_current_state.md - 구조 규칙 상세:
docs/02_arch_fsd_rules.md - 커밋 규칙 상세:
docs/06_commit_convention.md