style(app-hub): 헤더와 공간 카드 전환 디테일을 정리
맥락: - /app 상단 헤더 배경과 로고 보조 배지가 시각적으로 무거워 현재 라이트 카드 톤과 어긋났다. - 카드 사진 크기와 배경 전환 시 resize처럼 보이는 체감이 있어 선택 전환 품질 보정이 필요했다. 변경사항: - AppTopBar에서 헤더 배경을 제거하고 로고 왼쪽 원형 V 배지를 삭제했다. - ViewerProfile에 membershipTier를 추가하고, 프로필 이름 왼쪽에 등급 배지(PRO/NORMAL/TEAM)를 노출했다. - RoomPreviewCard 높이를 고정해 카드 사진 크기를 통일했다. - AppHub 배경 레이어의 transition-all을 제거해 카드 선택 시 배경이 리사이징 애니메이션처럼 보이는 현상을 완화했다. - 세션 문서(90_current_state, session_brief)에 이번 작업 내역과 리스크를 반영했다. 검증: - npx tsc --noEmit 세션-상태: /app 헤더/프로필 배지/카드 전환 디테일 보정 완료 세션-다음: RoomSheet/도크 패널의 인원수 기반 표현을 분위기형 정보로 전환 세션-리스크: 헤더 배경 제거로 밝은 배경 구간에서 상단 텍스트 대비가 낮아질 수 있어 점검 필요
This commit is contained in:
@@ -71,6 +71,11 @@ Last Updated: 2026-02-28
|
||||
- `/app` 배경을 카드 사진 기반 블러로 전환:
|
||||
- 허브 배경이 선택된 카드의 실제 사진을 블러 처리해 표시되도록 변경
|
||||
- 앱 첫 진입 시 `ROOM_THEMES[0]`를 초기 선택으로 명시해 배경/선택 테두리 기준을 고정
|
||||
- `/app` 헤더/프로필/공간 카드 디테일 조정:
|
||||
- AppTopBar 배경 제거 및 로고 왼쪽 원형 `V` 배지 제거
|
||||
- 프로필 트리거의 이름 왼쪽에 멤버십 등급(`PRO`/`NORMAL`/`TEAM`) 배지 노출
|
||||
- 공간 카드 높이를 고정해 카드 사진 사이즈를 통일
|
||||
- 배경 사진 전환 시 resize처럼 보이던 `transition-all` 제거
|
||||
- 몰입 모드 ON 시 `/space` 크롬 정리:
|
||||
- 상단 `Current Room` 블록 숨김
|
||||
- 우상단 허브 버튼 소형 아이콘화
|
||||
@@ -109,6 +114,7 @@ Last Updated: 2026-02-28
|
||||
- 단색 팔레트가 일부 기기 색감에서 유사하게 보일 수 있어 실제 디스플레이 기준 재점검 필요
|
||||
- 외부 이미지 URL(임시) 의존이라 소스 만료/속도 이슈 가능성이 있어 자가 호스팅 전환 필요
|
||||
- 전체 배경 블러 강도 증가로 저사양 환경에서 GPU 부담이 늘 수 있어 실기기 체감 점검 필요
|
||||
- 헤더 배경 제거로 밝은 사진 구간에서 상단 텍스트 대비가 낮아질 수 있어 대비 점검 필요
|
||||
|
||||
## CHANGED FILES
|
||||
|
||||
@@ -127,6 +133,10 @@ Last Updated: 2026-02-28
|
||||
- `src/entities/room/model/rooms.ts`
|
||||
- `src/features/room-select/ui/RoomPreviewCard.tsx`
|
||||
- `src/widgets/app-hub/ui/AppHubWidget.tsx`
|
||||
- `src/widgets/app-top-bar/ui/AppTopBar.tsx`
|
||||
- `src/entities/user/model/types.ts`
|
||||
- `src/entities/user/model/mockUser.ts`
|
||||
- `src/features/profile-menu/ui/ProfileMenu.tsx`
|
||||
- `src/features/restart-30s/index.ts`
|
||||
- `src/features/restart-30s/model/useRestart30s.ts`
|
||||
- `src/features/restart-30s/ui/Restart30sAction.tsx`
|
||||
@@ -189,3 +199,5 @@ Last Updated: 2026-02-28
|
||||
9. `/app`: 오늘의 공간 카드가 룸별 단색으로 표시되고, 허브 배경도 선택 카드 색으로 동기화됨
|
||||
10. `/app`: 오늘의 공간 카드가 실제 사진으로 표시되고, room 데이터에 Google 검색 링크/자가 이미지 전환 필드가 포함됨
|
||||
11. `/app`: 첫 진입 시 첫 카드가 선택된 상태로 보이며, 배경도 해당 카드 사진 블러로 시작됨
|
||||
12. `/app`: 헤더 배경/로고 원형 배지가 제거되고, 프로필 이름 왼쪽에 등급 배지가 표시됨
|
||||
13. `/app`: 공간 카드가 동일 높이로 맞춰지고 카드 전환 시 배경 resize 느낌이 완화됨
|
||||
|
||||
@@ -59,6 +59,10 @@ Last Updated: 2026-02-28
|
||||
- Google 이미지 검색 링크를 룸별로 보관하고, 추후 자가 이미지 경로로 전환 가능한 fallback 구조를 적용했다.
|
||||
- `/app` 허브 배경을 선택 카드 사진 기반 블러로 조정했다.
|
||||
- 첫 진입 시 첫 카드가 선택된 상태를 명시해 배경/선택 테두리 기준을 고정했다.
|
||||
- `/app` 헤더와 프로필 트리거를 정리했다.
|
||||
- 헤더 배경과 로고 왼쪽 `V` 원형 배지를 제거했다.
|
||||
- 사용자 이름 왼쪽에 멤버십 등급 배지(`PRO`/`NORMAL`/`TEAM`)를 추가했다.
|
||||
- 공간 카드 높이를 고정해 사진 사이즈를 통일하고, 배경 전환 시 resize처럼 보이던 애니메이션 느낌을 완화했다.
|
||||
- 몰입 모드 ON 시 상단 룸 블록 숨김, 레일 미니화, HUD 저대비, 비네팅 강화가 적용된다.
|
||||
- 이후 작업은 `docs/work.md`를 기준으로 실행한다.
|
||||
|
||||
@@ -77,6 +81,7 @@ Last Updated: 2026-02-28
|
||||
- 단색 팔레트가 일부 디스플레이에서 유사하게 보일 수 있어 기기별 색 분리도 점검이 필요함
|
||||
- 외부 이미지 URL 의존으로 소스 만료/속도 이슈 가능성이 있어 자가 호스팅 전환이 필요함
|
||||
- 배경 블러 강도 증가로 저사양 환경에서 GPU 부담이 늘 수 있어 체감 성능 확인이 필요함
|
||||
- 헤더 배경 제거로 밝은 배경 구간에서 상단 텍스트 대비가 낮아질 수 있어 점검 필요함
|
||||
|
||||
## 상세 원문 위치
|
||||
|
||||
|
||||
Reference in New Issue
Block a user