From e9556afa539e0ff6f4d14787bfc10c2355fb7db0 Mon Sep 17 00:00:00 2001 From: corpi Date: Sun, 1 Mar 2026 00:14:35 +0900 Subject: [PATCH] =?UTF-8?q?style(app-hub):=20=ED=97=A4=EB=8D=94=EC=99=80?= =?UTF-8?q?=20=EA=B3=B5=EA=B0=84=20=EC=B9=B4=EB=93=9C=20=EC=A0=84=ED=99=98?= =?UTF-8?q?=20=EB=94=94=ED=85=8C=EC=9D=BC=EC=9D=84=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 맥락: - /app 상단 헤더 배경과 로고 보조 배지가 시각적으로 무거워 현재 라이트 카드 톤과 어긋났다. - 카드 사진 크기와 배경 전환 시 resize처럼 보이는 체감이 있어 선택 전환 품질 보정이 필요했다. 변경사항: - AppTopBar에서 헤더 배경을 제거하고 로고 왼쪽 원형 V 배지를 삭제했다. - ViewerProfile에 membershipTier를 추가하고, 프로필 이름 왼쪽에 등급 배지(PRO/NORMAL/TEAM)를 노출했다. - RoomPreviewCard 높이를 고정해 카드 사진 크기를 통일했다. - AppHub 배경 레이어의 transition-all을 제거해 카드 선택 시 배경이 리사이징 애니메이션처럼 보이는 현상을 완화했다. - 세션 문서(90_current_state, session_brief)에 이번 작업 내역과 리스크를 반영했다. 검증: - npx tsc --noEmit 세션-상태: /app 헤더/프로필 배지/카드 전환 디테일 보정 완료 세션-다음: RoomSheet/도크 패널의 인원수 기반 표현을 분위기형 정보로 전환 세션-리스크: 헤더 배경 제거로 밝은 배경 구간에서 상단 텍스트 대비가 낮아질 수 있어 점검 필요 --- docs/90_current_state.md | 12 ++++++++++++ docs/session_brief.md | 5 +++++ src/entities/user/model/mockUser.ts | 1 + src/entities/user/model/types.ts | 3 +++ src/features/profile-menu/ui/ProfileMenu.tsx | 9 ++++++++- src/features/room-select/ui/RoomPreviewCard.tsx | 4 ++-- src/widgets/app-hub/ui/AppHubWidget.tsx | 2 +- src/widgets/app-top-bar/ui/AppTopBar.tsx | 5 +---- 8 files changed, 33 insertions(+), 8 deletions(-) diff --git a/docs/90_current_state.md b/docs/90_current_state.md index 477d6cc..56904d3 100644 --- a/docs/90_current_state.md +++ b/docs/90_current_state.md @@ -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 느낌이 완화됨 diff --git a/docs/session_brief.md b/docs/session_brief.md index dd20bad..7ff85c6 100644 --- a/docs/session_brief.md +++ b/docs/session_brief.md @@ -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 부담이 늘 수 있어 체감 성능 확인이 필요함 +- 헤더 배경 제거로 밝은 배경 구간에서 상단 텍스트 대비가 낮아질 수 있어 점검 필요함 ## 상세 원문 위치 diff --git a/src/entities/user/model/mockUser.ts b/src/entities/user/model/mockUser.ts index 36c7fb1..10b0b52 100644 --- a/src/entities/user/model/mockUser.ts +++ b/src/entities/user/model/mockUser.ts @@ -4,4 +4,5 @@ export const MOCK_VIEWER: ViewerProfile = { id: 'viewer-1', name: '민서', avatarLabel: 'MS', + membershipTier: 'pro', }; diff --git a/src/entities/user/model/types.ts b/src/entities/user/model/types.ts index 694ecb7..f8c314f 100644 --- a/src/entities/user/model/types.ts +++ b/src/entities/user/model/types.ts @@ -1,5 +1,8 @@ +export type MembershipTier = 'pro' | 'normal' | 'team'; + export interface ViewerProfile { id: string; name: string; avatarLabel: string; + membershipTier: MembershipTier; } diff --git a/src/features/profile-menu/ui/ProfileMenu.tsx b/src/features/profile-menu/ui/ProfileMenu.tsx index 36c1adb..afba532 100644 --- a/src/features/profile-menu/ui/ProfileMenu.tsx +++ b/src/features/profile-menu/ui/ProfileMenu.tsx @@ -7,6 +7,8 @@ interface ProfileMenuProps { } export const ProfileMenu = ({ user, onLogout }: ProfileMenuProps) => { + const tierLabel = user.membershipTier.toUpperCase(); + return ( { {user.avatarLabel} - {user.name} + + + {tierLabel} + + {user.name} + } > diff --git a/src/features/room-select/ui/RoomPreviewCard.tsx b/src/features/room-select/ui/RoomPreviewCard.tsx index d3b0c60..c14d71f 100644 --- a/src/features/room-select/ui/RoomPreviewCard.tsx +++ b/src/features/room-select/ui/RoomPreviewCard.tsx @@ -17,7 +17,7 @@ export const RoomPreviewCard = ({ type="button" onClick={() => onSelect(room.id)} className={cn( - 'group relative overflow-hidden rounded-2xl border p-4 text-left transition-all duration-250 motion-reduce:transition-none', + 'group relative h-[248px] overflow-hidden rounded-2xl border p-4 text-left transition-all duration-250 motion-reduce:transition-none', selected ? 'border-brand-dark/28 shadow-[0_0_0_1px_rgba(48,77,109,0.18)]' : 'border-brand-dark/16 hover:border-brand-dark/28', @@ -31,7 +31,7 @@ export const RoomPreviewCard = ({
-
+

{room.name}

{room.description}

diff --git a/src/widgets/app-hub/ui/AppHubWidget.tsx b/src/widgets/app-hub/ui/AppHubWidget.tsx index 710c832..605da33 100644 --- a/src/widgets/app-hub/ui/AppHubWidget.tsx +++ b/src/widgets/app-hub/ui/AppHubWidget.tsx @@ -95,7 +95,7 @@ export const AppHubWidget = () => {
{ return ( -
+
- - V -

VibeRoom