From 6069457b4e3fbf3f23fdb51c89fb541312962817 Mon Sep 17 00:00:00 2001 From: corpi Date: Sun, 1 Mar 2026 11:32:03 +0900 Subject: [PATCH] =?UTF-8?q?style(profile):=20=EB=A9=A4=EB=B2=84=EC=8B=AD?= =?UTF-8?q?=20=EB=93=B1=EA=B8=89=20=EC=B9=A9=EC=9D=84=20=EC=A0=80=EC=9E=90?= =?UTF-8?q?=EA=B7=B9=20=ED=94=84=EB=A6=AC=EB=AF=B8=EC=97=84=20=ED=86=A4?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 맥락: - 프로필 왼쪽 등급 칩의 글자가 작아 위계가 약했고, 유료 멤버 대우가 직관적으로 전달되지 않았다. 변경사항: - MembershipTierBadge의 타이포를 text-xs 이상으로 상향하고 칩 높이/패딩을 키워 가독성을 개선했다. - PRO는 PRO MEMBER 라벨과 조용한 그라데이션/내부 하이라이트/부드러운 그림자를 적용해 프리미엄 톤을 강화했다. - NORMAL/TEAM도 등급별 표면 톤과 점 마커를 분리해 차분한 위계를 유지했다. - docs/session_brief.md, docs/90_current_state.md에 이번 변경 내역과 리스크를 반영했다. 검증: - npx tsc --noEmit 세션-상태: 멤버십 배지의 크기와 재질감을 상향해 대우받는 인상을 강화했다. 세션-다음: RoomSheet 인원수 기반 UI의 큐레이션형 치환 범위를 확정해야 한다. 세션-리스크: PRO MEMBER 라벨이 작은 폭에서 프로필과 밀집해 보일 수 있어 실제 기기 간격 점검이 필요하다. --- docs/90_current_state.md | 5 +++ docs/session_brief.md | 5 +++ src/entities/user/ui/MembershipTierBadge.tsx | 33 ++++++++++++++++---- 3 files changed, 37 insertions(+), 6 deletions(-) diff --git a/docs/90_current_state.md b/docs/90_current_state.md index a59e92d..19cc061 100644 --- a/docs/90_current_state.md +++ b/docs/90_current_state.md @@ -80,6 +80,10 @@ Last Updated: 2026-02-28 - 헤더 배경/보더/텍스트를 Start Ritual 카드와 동일한 라이트 톤(`bg-white/78`, `text-brand-dark`)으로 통일 - 멤버십 등급 뱃지를 프로필 드롭다운 트리거 외부로 분리해, 프로필 왼쪽 독립 뷰로 배치 - 프로필 드롭다운 트리거는 아바타+이름만 유지하도록 단순화 +- `/app` 멤버십 등급 배지의 프리미엄 톤 강화: + - 배지 타이포를 `text-xs` 이상으로 상향하고 칩 높이/패딩을 키워 가독성과 존재감을 개선 + - `PRO MEMBER` 라벨과 저채도 그라데이션/내부 하이라이트/부드러운 그림자로 유료 멤버 위계를 강화 + - `NORMAL`/`TEAM`도 등급별 표면 톤과 마커를 분리해 동일 구조 안에서 차분한 구분을 제공 - 몰입 모드 ON 시 `/space` 크롬 정리: - 상단 `Current Room` 블록 숨김 - 우상단 허브 버튼 소형 아이콘화 @@ -119,6 +123,7 @@ Last Updated: 2026-02-28 - 외부 이미지 URL(임시) 의존이라 소스 만료/속도 이슈 가능성이 있어 자가 호스팅 전환 필요 - 전체 배경 블러 강도 증가로 저사양 환경에서 GPU 부담이 늘 수 있어 실기기 체감 점검 필요 - 밝은 배경 사진과 라이트 헤더 조합에서 상단 경계 인지가 약해질 수 있어 대비 점검 필요 +- 긴 멤버십 라벨(`PRO MEMBER`)이 좁은 폭에서 프로필과 밀집해 보일 수 있어 간격 점검 필요 ## CHANGED FILES diff --git a/docs/session_brief.md b/docs/session_brief.md index 5038590..0da9818 100644 --- a/docs/session_brief.md +++ b/docs/session_brief.md @@ -65,6 +65,10 @@ Last Updated: 2026-02-28 - `/app` 헤더 톤을 시작 카드와 동일한 라이트 표면으로 재정렬했다. - 헤더 배경/보더/텍스트를 `지금, 몰입을 시작해요` 카드 톤(`bg-white/78`, `text-brand-dark`)과 맞췄다. - 멤버십 등급 배지는 프로필 트리거 내부가 아닌, 프로필 왼쪽의 독립 뷰로 분리했다. +- `/app` 멤버십 등급 배지의 프리미엄 표현을 강화했다. + - 배지 텍스트를 `text-xs` 이상으로 상향하고 칩 높이/패딩을 키워 가독성과 존재감을 높였다. + - `PRO MEMBER` 기준으로 조용한 그라데이션 표면/내부 하이라이트/미세 그림자를 적용해 저자극 프리미엄 톤을 맞췄다. + - `NORMAL`/`TEAM`도 등급별 표면 톤과 점 마커를 분리해 위계를 명확히 했다. - 공간 카드 높이를 고정해 사진 사이즈를 통일하고, 배경 전환 시 resize처럼 보이던 애니메이션 느낌을 완화했다. - 몰입 모드 ON 시 상단 룸 블록 숨김, 레일 미니화, HUD 저대비, 비네팅 강화가 적용된다. - 이후 작업은 `docs/work.md`를 기준으로 실행한다. @@ -85,6 +89,7 @@ Last Updated: 2026-02-28 - 외부 이미지 URL 의존으로 소스 만료/속도 이슈 가능성이 있어 자가 호스팅 전환이 필요함 - 배경 블러 강도 증가로 저사양 환경에서 GPU 부담이 늘 수 있어 체감 성능 확인이 필요함 - 밝은 배경 사진과 라이트 헤더가 겹칠 때 상단 요소 경계 인지가 약해질 수 있어 점검 필요함 +- 긴 멤버십 라벨(`PRO MEMBER`)이 작은 폭에서 프로필과 가까워 보일 수 있어 간격 점검이 필요함 ## 상세 원문 위치 diff --git a/src/entities/user/ui/MembershipTierBadge.tsx b/src/entities/user/ui/MembershipTierBadge.tsx index 795c7a0..7ff2236 100644 --- a/src/entities/user/ui/MembershipTierBadge.tsx +++ b/src/entities/user/ui/MembershipTierBadge.tsx @@ -4,18 +4,39 @@ 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', +const TIER_META: Record< + MembershipTier, + { label: string; surfaceClass: string; dotClass: string } +> = { + pro: { + label: 'PRO MEMBER', + surfaceClass: + 'border-amber-700/34 bg-[linear-gradient(120deg,rgba(254,243,199,0.88)_0%,rgba(250,230,170,0.7)_55%,rgba(244,216,125,0.6)_100%)] text-amber-900 shadow-[inset_0_1px_0_rgba(255,255,255,0.62),0_8px_20px_rgba(120,82,20,0.14)]', + dotClass: 'bg-amber-700/72', + }, + normal: { + label: 'NORMAL', + surfaceClass: + 'border-brand-dark/16 bg-white/76 text-brand-dark/68 shadow-[inset_0_1px_0_rgba(255,255,255,0.55),0_6px_16px_rgba(15,23,42,0.08)]', + dotClass: 'bg-brand-dark/34', + }, + team: { + label: 'TEAM', + surfaceClass: + 'border-cyan-900/24 bg-[linear-gradient(120deg,rgba(224,242,254,0.86)_0%,rgba(209,250,229,0.68)_56%,rgba(186,230,253,0.64)_100%)] text-cyan-900 shadow-[inset_0_1px_0_rgba(255,255,255,0.58),0_8px_18px_rgba(8,78,99,0.12)]', + dotClass: 'bg-cyan-900/52', + }, }; export const MembershipTierBadge = ({ tier }: MembershipTierBadgeProps) => { + const tierMeta = TIER_META[tier]; + return ( - {tier.toUpperCase()} + + {tierMeta.label} ); };