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

@@ -69,6 +69,10 @@ Last Updated: 2026-02-28
- 배지 텍스트를 `text-xs` 이상으로 상향하고 칩 높이/패딩을 키워 가독성과 존재감을 높였다.
- `PRO MEMBER` 기준으로 조용한 그라데이션 표면/내부 하이라이트/미세 그림자를 적용해 저자극 프리미엄 톤을 맞췄다.
- `NORMAL`/`TEAM`도 등급별 표면 톤과 점 마커를 분리해 위계를 명확히 했다.
- `/app` 멤버십 배지를 Quiet Premium 톤으로 2차 정리했다.
- 등급 칩 높이를 `h-9`로 올리고 최소폭/자간을 통일해 배지가 독립 오브젝트처럼 보이도록 보정했다.
- `PRO`는 모바일에서 짧은 라벨, 데스크톱에서 `PRO MEMBER`를 노출해 밀집을 줄이면서 위계를 유지했다.
- 헤더 우측에서 배지와 프로필 사이 간격을 넓혀( `gap-3` ) 프리미엄 배지의 존재감을 안정화했다.
- 공간 카드 높이를 고정해 사진 사이즈를 통일하고, 배경 전환 시 resize처럼 보이던 애니메이션 느낌을 완화했다.
- 몰입 모드 ON 시 상단 룸 블록 숨김, 레일 미니화, HUD 저대비, 비네팅 강화가 적용된다.
- 이후 작업은 `docs/work.md`를 기준으로 실행한다.
@@ -89,7 +93,7 @@ Last Updated: 2026-02-28
- 외부 이미지 URL 의존으로 소스 만료/속도 이슈 가능성이 있어 자가 호스팅 전환이 필요함
- 배경 블러 강도 증가로 저사양 환경에서 GPU 부담이 늘 수 있어 체감 성능 확인이 필요함
- 밝은 배경 사진과 라이트 헤더가 겹칠 때 상단 요소 경계 인지가 약해질 수 있어 점검 필요함
- 긴 멤버십 라벨(`PRO MEMBER`)이 작은 폭에서 프로필과 가까워 보일 수 있어 간격 점검이 필요함
- 등급 칩 최소폭 증가로 초소형 화면에서 헤더 가로 여유가 줄어들 수 있어 실기기 점검이 필요함
## 상세 원문 위치