style(profile): 멤버십 배지를 Quiet Premium 톤으로 2차 고급화

맥락:
- 프로필 왼쪽 등급 칩에 고급스러운 대우감이 더 필요해 재질감/여백/위계를 추가 보정했다.

변경사항:
- MembershipTierBadge의 높이(h-9), 최소폭, 자간을 조정해 배지가 독립된 프리미엄 토큰처럼 보이도록 정렬했다.
- PRO는 모바일에서 PRO, 데스크톱에서 PRO MEMBER를 표시하도록 분리해 작은 화면 밀집을 줄였다.
- 등급별 표면을 샴페인/뉴트럴/틸 계열 저채도 그라데이션과 미세 하이라이트로 조정해 차분한 프리미엄 톤을 강화했다.
- AppTopBar 우측 그룹 간격을 gap-3으로 넓혀 배지와 프로필 트리거 간 시각 충돌을 완화했다.
- docs/session_brief.md, docs/90_current_state.md에 변경사항과 리스크를 갱신했다.

검증:
- npx tsc --noEmit

세션-상태: /app 헤더의 멤버십 배지를 조용한 프리미엄 위계로 고도화했다.
세션-다음: RoomSheet 인원수 기반 UI의 큐레이션형 치환 범위를 확정해야 한다.
세션-리스크: 등급 칩 최소폭 증가로 초소형 화면에서 헤더 가로 여유가 줄어들 수 있다.
This commit is contained in:
2026-03-01 12:39:27 +09:00
parent 6069457b4e
commit 85488f542e
4 changed files with 29 additions and 12 deletions

View File

@@ -17,7 +17,7 @@ export const AppTopBar = ({ user, oneLiner, onLogout }: AppTopBarProps) => {
<p className="hidden text-center text-sm text-brand-dark/64 md:block">{oneLiner}</p>
<div className="flex items-center gap-2">
<div className="flex items-center gap-3">
<MembershipTierBadge tier={user.membershipTier} />
<ProfileMenu user={user} onLogout={onLogout} />
</div>