From a3ecb7b6c276e41c43d96699c1a6dc872fa4b7ae Mon Sep 17 00:00:00 2001 From: corpi Date: Sun, 1 Mar 2026 00:19:43 +0900 Subject: [PATCH] =?UTF-8?q?style(app-hub):=20=ED=97=A4=EB=8D=94=20?= =?UTF-8?q?=ED=86=A4=EA=B3=BC=20=ED=94=84=EB=A1=9C=ED=95=84=20=EB=93=B1?= =?UTF-8?q?=EA=B8=89=20=EB=B0=B0=EC=A7=80=20=EB=B0=B0=EC=B9=98=EB=A5=BC=20?= =?UTF-8?q?=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 맥락: - /app 헤더가 시작 카드 톤과 달라 시각 흐름이 끊기고, 멤버십 등급이 프로필 트리거 내부에 있어 위계가 어색했다. 변경사항: - AppTopBar를 Start Ritual 카드와 같은 라이트 톤(bg-white/78, text-brand-dark)으로 맞췄다. - 멤버십 등급을 독립 뷰로 분리하기 위해 entities/user에 MembershipTierBadge 컴포넌트를 추가했다. - ProfileMenu 트리거에서 등급 배지를 제거하고, 아바타+이름만 남겨 정보 위계를 단순화했다. - docs/session_brief.md, docs/90_current_state.md에 최신 상태를 반영했다. 검증: - npx tsc --noEmit 세션-상태: /app 헤더와 프로필 영역의 톤/위계 정렬을 완료했다. 세션-다음: RoomSheet 인원수 기반 UI를 큐레이션형 정보로 치환할지 확정이 필요하다. 세션-리스크: 밝은 사진 배경과 라이트 헤더 조합에서 상단 경계 인지가 약해질 수 있다. --- docs/90_current_state.md | 9 +++++++-- docs/session_brief.md | 7 +++++-- src/entities/user/index.ts | 1 + src/entities/user/ui/MembershipTierBadge.tsx | 21 ++++++++++++++++++++ src/features/profile-menu/ui/ProfileMenu.tsx | 13 ++++-------- src/widgets/app-top-bar/ui/AppTopBar.tsx | 13 +++++++----- 6 files changed, 46 insertions(+), 18 deletions(-) create mode 100644 src/entities/user/ui/MembershipTierBadge.tsx diff --git a/docs/90_current_state.md b/docs/90_current_state.md index 56904d3..a59e92d 100644 --- a/docs/90_current_state.md +++ b/docs/90_current_state.md @@ -76,6 +76,10 @@ Last Updated: 2026-02-28 - 프로필 트리거의 이름 왼쪽에 멤버십 등급(`PRO`/`NORMAL`/`TEAM`) 배지 노출 - 공간 카드 높이를 고정해 카드 사진 사이즈를 통일 - 배경 사진 전환 시 resize처럼 보이던 `transition-all` 제거 +- `/app` 헤더/프로필 시각 위계 재정렬: + - 헤더 배경/보더/텍스트를 Start Ritual 카드와 동일한 라이트 톤(`bg-white/78`, `text-brand-dark`)으로 통일 + - 멤버십 등급 뱃지를 프로필 드롭다운 트리거 외부로 분리해, 프로필 왼쪽 독립 뷰로 배치 + - 프로필 드롭다운 트리거는 아바타+이름만 유지하도록 단순화 - 몰입 모드 ON 시 `/space` 크롬 정리: - 상단 `Current Room` 블록 숨김 - 우상단 허브 버튼 소형 아이콘화 @@ -114,7 +118,7 @@ Last Updated: 2026-02-28 - 단색 팔레트가 일부 기기 색감에서 유사하게 보일 수 있어 실제 디스플레이 기준 재점검 필요 - 외부 이미지 URL(임시) 의존이라 소스 만료/속도 이슈 가능성이 있어 자가 호스팅 전환 필요 - 전체 배경 블러 강도 증가로 저사양 환경에서 GPU 부담이 늘 수 있어 실기기 체감 점검 필요 -- 헤더 배경 제거로 밝은 사진 구간에서 상단 텍스트 대비가 낮아질 수 있어 대비 점검 필요 +- 밝은 배경 사진과 라이트 헤더 조합에서 상단 경계 인지가 약해질 수 있어 대비 점검 필요 ## CHANGED FILES @@ -136,6 +140,7 @@ Last Updated: 2026-02-28 - `src/widgets/app-top-bar/ui/AppTopBar.tsx` - `src/entities/user/model/types.ts` - `src/entities/user/model/mockUser.ts` +- `src/entities/user/ui/MembershipTierBadge.tsx` - `src/features/profile-menu/ui/ProfileMenu.tsx` - `src/features/restart-30s/index.ts` - `src/features/restart-30s/model/useRestart30s.ts` @@ -199,5 +204,5 @@ Last Updated: 2026-02-28 9. `/app`: 오늘의 공간 카드가 룸별 단색으로 표시되고, 허브 배경도 선택 카드 색으로 동기화됨 10. `/app`: 오늘의 공간 카드가 실제 사진으로 표시되고, room 데이터에 Google 검색 링크/자가 이미지 전환 필드가 포함됨 11. `/app`: 첫 진입 시 첫 카드가 선택된 상태로 보이며, 배경도 해당 카드 사진 블러로 시작됨 -12. `/app`: 헤더 배경/로고 원형 배지가 제거되고, 프로필 이름 왼쪽에 등급 배지가 표시됨 +12. `/app`: 헤더가 시작 카드와 같은 라이트 톤으로 표시되고, 등급 배지가 프로필 왼쪽 독립 뷰로 노출됨 13. `/app`: 공간 카드가 동일 높이로 맞춰지고 카드 전환 시 배경 resize 느낌이 완화됨 diff --git a/docs/session_brief.md b/docs/session_brief.md index 7ff85c6..5038590 100644 --- a/docs/session_brief.md +++ b/docs/session_brief.md @@ -60,8 +60,11 @@ Last Updated: 2026-02-28 - `/app` 허브 배경을 선택 카드 사진 기반 블러로 조정했다. - 첫 진입 시 첫 카드가 선택된 상태를 명시해 배경/선택 테두리 기준을 고정했다. - `/app` 헤더와 프로필 트리거를 정리했다. - - 헤더 배경과 로고 왼쪽 `V` 원형 배지를 제거했다. + - 로고 왼쪽 `V` 원형 배지를 제거했다. - 사용자 이름 왼쪽에 멤버십 등급 배지(`PRO`/`NORMAL`/`TEAM`)를 추가했다. +- `/app` 헤더 톤을 시작 카드와 동일한 라이트 표면으로 재정렬했다. + - 헤더 배경/보더/텍스트를 `지금, 몰입을 시작해요` 카드 톤(`bg-white/78`, `text-brand-dark`)과 맞췄다. + - 멤버십 등급 배지는 프로필 트리거 내부가 아닌, 프로필 왼쪽의 독립 뷰로 분리했다. - 공간 카드 높이를 고정해 사진 사이즈를 통일하고, 배경 전환 시 resize처럼 보이던 애니메이션 느낌을 완화했다. - 몰입 모드 ON 시 상단 룸 블록 숨김, 레일 미니화, HUD 저대비, 비네팅 강화가 적용된다. - 이후 작업은 `docs/work.md`를 기준으로 실행한다. @@ -81,7 +84,7 @@ Last Updated: 2026-02-28 - 단색 팔레트가 일부 디스플레이에서 유사하게 보일 수 있어 기기별 색 분리도 점검이 필요함 - 외부 이미지 URL 의존으로 소스 만료/속도 이슈 가능성이 있어 자가 호스팅 전환이 필요함 - 배경 블러 강도 증가로 저사양 환경에서 GPU 부담이 늘 수 있어 체감 성능 확인이 필요함 -- 헤더 배경 제거로 밝은 배경 구간에서 상단 텍스트 대비가 낮아질 수 있어 점검 필요함 +- 밝은 배경 사진과 라이트 헤더가 겹칠 때 상단 요소 경계 인지가 약해질 수 있어 점검 필요함 ## 상세 원문 위치 diff --git a/src/entities/user/index.ts b/src/entities/user/index.ts index fc2a648..5d4d104 100644 --- a/src/entities/user/index.ts +++ b/src/entities/user/index.ts @@ -1,2 +1,3 @@ export * from './model/mockUser'; export * from './model/types'; +export * from './ui/MembershipTierBadge'; diff --git a/src/entities/user/ui/MembershipTierBadge.tsx b/src/entities/user/ui/MembershipTierBadge.tsx new file mode 100644 index 0000000..795c7a0 --- /dev/null +++ b/src/entities/user/ui/MembershipTierBadge.tsx @@ -0,0 +1,21 @@ +import type { MembershipTier } from '@/entities/user/model/types'; + +interface MembershipTierBadgeProps { + tier: MembershipTier; +} + +const TIER_STYLES: Record = { + pro: 'border-brand-primary/28 bg-brand-primary/12 text-brand-primary/82', + normal: 'border-brand-dark/18 bg-white/68 text-brand-dark/66', + team: 'border-emerald-600/28 bg-emerald-500/10 text-emerald-700', +}; + +export const MembershipTierBadge = ({ tier }: MembershipTierBadgeProps) => { + return ( + + {tier.toUpperCase()} + + ); +}; diff --git a/src/features/profile-menu/ui/ProfileMenu.tsx b/src/features/profile-menu/ui/ProfileMenu.tsx index afba532..d995711 100644 --- a/src/features/profile-menu/ui/ProfileMenu.tsx +++ b/src/features/profile-menu/ui/ProfileMenu.tsx @@ -7,21 +7,16 @@ interface ProfileMenuProps { } export const ProfileMenu = ({ user, onLogout }: ProfileMenuProps) => { - const tierLabel = user.membershipTier.toUpperCase(); - return ( - + + {user.avatarLabel} - - - {tierLabel} - - {user.name} + + {user.name} } diff --git a/src/widgets/app-top-bar/ui/AppTopBar.tsx b/src/widgets/app-top-bar/ui/AppTopBar.tsx index bf50f59..951c5c0 100644 --- a/src/widgets/app-top-bar/ui/AppTopBar.tsx +++ b/src/widgets/app-top-bar/ui/AppTopBar.tsx @@ -1,4 +1,4 @@ -import type { ViewerProfile } from '@/entities/user'; +import { MembershipTierBadge, type ViewerProfile } from '@/entities/user'; import { ProfileMenu } from '@/features/profile-menu'; interface AppTopBarProps { @@ -9,15 +9,18 @@ interface AppTopBarProps { export const AppTopBar = ({ user, oneLiner, onLogout }: AppTopBarProps) => { return ( -
+
-

VibeRoom

+

VibeRoom

-

{oneLiner}

+

{oneLiner}

- +
+ + +
);