style(app-hub): 오늘의 공간 카드를 룸별 단색 팔레트로 전환
맥락: - 오늘의 공간 카드가 이미지 기반 배경이라 색/질감이 복잡하게 보였고, 카드와 페이지 배경의 톤 연결이 약했다. - 룸 이름별로 분리된 단색 팔레트를 사용해 카드 가독성과 허브의 색 일관성을 높일 필요가 있었다. 변경사항: - entities/room 모델에 hubColor 필드를 추가하고 10개 룸에 겹치지 않는 단색 팔레트를 정의했다. - RoomPreviewCard를 이미지 배경 대신 룸 고유 단색 배경으로 렌더링하도록 변경했다. - RoomPreviewCard 내부 텍스트/칩 스타일을 단색 카드 대비에 맞춰 어두운 텍스트 중심으로 재정렬했다. - AppHub 배경을 선택 룸의 hubColor로 동기화해 카드 선택과 페이지 배경이 같은 색 계열로 연결되게 조정했다. - 세션 문서(90_current_state, session_brief)에 이번 작업 내역과 리스크를 반영했다. 검증: - npx tsc --noEmit 세션-상태: /app 오늘의 공간 카드/허브 배경 단색 팔레트 전환 완료 세션-다음: RoomSheet/도크 패널의 인원수 기반 표현을 분위기형 정보로 전환 세션-리스크: 일부 디스플레이에서 단색 팔레트 간 체감 차이가 작아 보일 수 있어 기기별 색 분리도 점검 필요
This commit is contained in:
@@ -60,6 +60,10 @@ Last Updated: 2026-02-28
|
||||
- `지금, 몰입을 시작해요` / `오늘의 공간` 컨테이너를 흰 표면 + 어두운 텍스트 톤으로 조정
|
||||
- 입력/칩/보조 버튼 색상도 라이트 카드 기준으로 재정렬
|
||||
- 허브 배경은 가상 공간 이미지를 더 강한 blur로 노출해 카드 외곽 배경으로 유지
|
||||
- `/app` 오늘의 공간 카드/배경을 룸별 단색 팔레트로 전환:
|
||||
- `entities/room`에 룸별 `hubColor`를 추가하고 색이 서로 겹치지 않도록 분리
|
||||
- 오늘의 공간 카드는 이미지 대신 룸 고유 단색 배경으로 렌더링
|
||||
- 허브 페이지 배경도 선택된 룸의 동일 색으로 전환되도록 연결
|
||||
- 몰입 모드 ON 시 `/space` 크롬 정리:
|
||||
- 상단 `Current Room` 블록 숨김
|
||||
- 우상단 허브 버튼 소형 아이콘화
|
||||
@@ -95,6 +99,7 @@ Last Updated: 2026-02-28
|
||||
- 배경 필터/블러 적용으로 저사양 환경에서 스크롤 시 미세한 페인팅 비용 증가 가능성 존재
|
||||
- 모달 본문 고정 높이 적용으로 작은 화면에서 내부 스크롤 의존도가 이전보다 높아질 수 있음
|
||||
- 룸 프리뷰 카드 내부는 이미지 기반 다크 텍스트 체계라 컨테이너와 톤 차이가 남아 추가 톤 정리가 필요할 수 있음
|
||||
- 단색 팔레트가 일부 기기 색감에서 유사하게 보일 수 있어 실제 디스플레이 기준 재점검 필요
|
||||
|
||||
## CHANGED FILES
|
||||
|
||||
@@ -157,6 +162,9 @@ Last Updated: 2026-02-28
|
||||
- `src/widgets/start-ritual-widget/ui/StartRitualWidget.tsx`
|
||||
- `src/widgets/rooms-gallery-widget/ui/RoomsGalleryWidget.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`
|
||||
|
||||
## QUICK VERIFY
|
||||
|
||||
@@ -168,3 +176,4 @@ Last Updated: 2026-02-28
|
||||
6. `/app`: 숲/벽난로처럼 텍스처가 많은 룸 선택 시에도 카드 내부 텍스트 시인성이 유지됨
|
||||
7. 커스텀 입장 모달 탭 전환(공간/사운드/타이머) 시 외곽 모달 크기가 유지됨
|
||||
8. `/app`: 시작 카드/공간 카드가 흰 표면 + 어두운 텍스트로 표시되고, 카드 밖 배경은 블러된 가상 공간으로 노출됨
|
||||
9. `/app`: 오늘의 공간 카드가 룸별 단색으로 표시되고, 허브 배경도 선택 카드 색으로 동기화됨
|
||||
|
||||
@@ -51,6 +51,9 @@ Last Updated: 2026-02-28
|
||||
- `/app`의 핵심 카드 2개를 라이트 카드 톤으로 전환했다.
|
||||
- `지금, 몰입을 시작해요`와 `오늘의 공간` 컨테이너를 흰 표면 + 어두운 텍스트로 정리했다.
|
||||
- 허브 배경 블러를 강화해 카드 외곽은 가상 공간 배경이 부드럽게 보이도록 조정했다.
|
||||
- `/app` 오늘의 공간 카드를 룸별 단색 팔레트로 전환했다.
|
||||
- `entities/room`에 `hubColor`를 추가해 카드별 고유 단색을 분리했다.
|
||||
- 허브 배경도 선택 룸의 같은 색으로 동기화해 톤 연결성을 높였다.
|
||||
- 몰입 모드 ON 시 상단 룸 블록 숨김, 레일 미니화, HUD 저대비, 비네팅 강화가 적용된다.
|
||||
- 이후 작업은 `docs/work.md`를 기준으로 실행한다.
|
||||
|
||||
@@ -66,6 +69,7 @@ Last Updated: 2026-02-28
|
||||
- 배경 blur/filter 적용으로 저사양 환경에서 렌더링 비용이 소폭 증가할 수 있음
|
||||
- 모달 고정 높이로 인해 작은 화면에서는 탭 본문 내부 스크롤 사용 빈도가 늘 수 있음
|
||||
- 룸 프리뷰 카드의 이미지 기반 다크 톤과 라이트 컨테이너 사이 미세한 톤 차이가 남을 수 있음
|
||||
- 단색 팔레트가 일부 디스플레이에서 유사하게 보일 수 있어 기기별 색 분리도 점검이 필요함
|
||||
|
||||
## 상세 원문 위치
|
||||
|
||||
|
||||
Reference in New Issue
Block a user