style(app-hub): 헤더 톤과 프로필 등급 배지 배치를 정리
맥락: - /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를 큐레이션형 정보로 치환할지 확정이 필요하다. 세션-리스크: 밝은 사진 배경과 라이트 헤더 조합에서 상단 경계 인지가 약해질 수 있다.
This commit is contained in:
@@ -7,21 +7,16 @@ interface ProfileMenuProps {
|
||||
}
|
||||
|
||||
export const ProfileMenu = ({ user, onLogout }: ProfileMenuProps) => {
|
||||
const tierLabel = user.membershipTier.toUpperCase();
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
align="right"
|
||||
trigger={
|
||||
<span className="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-2.5 py-1.5 text-sm text-white/90">
|
||||
<span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-sky-300/30 text-xs font-semibold text-sky-100">
|
||||
<span className="inline-flex items-center gap-2 rounded-full border border-brand-dark/14 bg-white/72 px-2.5 py-1.5 text-sm text-brand-dark/92 shadow-[0_12px_24px_rgba(15,23,42,0.08)] backdrop-blur-sm">
|
||||
<span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-brand-primary/14 text-xs font-semibold text-brand-primary/82">
|
||||
{user.avatarLabel}
|
||||
</span>
|
||||
<span className="hidden items-center gap-1.5 sm:inline-flex">
|
||||
<span className="inline-flex items-center rounded-full border border-sky-100/45 bg-sky-100/18 px-2 py-0.5 text-[10px] font-semibold tracking-[0.08em] text-sky-50">
|
||||
{tierLabel}
|
||||
</span>
|
||||
<span>{user.name}</span>
|
||||
<span className="hidden items-center sm:inline-flex">
|
||||
<span className="text-brand-dark/78">{user.name}</span>
|
||||
</span>
|
||||
</span>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user