style(app-hub): 헤더와 공간 카드 전환 디테일을 정리
맥락: - /app 상단 헤더 배경과 로고 보조 배지가 시각적으로 무거워 현재 라이트 카드 톤과 어긋났다. - 카드 사진 크기와 배경 전환 시 resize처럼 보이는 체감이 있어 선택 전환 품질 보정이 필요했다. 변경사항: - AppTopBar에서 헤더 배경을 제거하고 로고 왼쪽 원형 V 배지를 삭제했다. - ViewerProfile에 membershipTier를 추가하고, 프로필 이름 왼쪽에 등급 배지(PRO/NORMAL/TEAM)를 노출했다. - RoomPreviewCard 높이를 고정해 카드 사진 크기를 통일했다. - AppHub 배경 레이어의 transition-all을 제거해 카드 선택 시 배경이 리사이징 애니메이션처럼 보이는 현상을 완화했다. - 세션 문서(90_current_state, session_brief)에 이번 작업 내역과 리스크를 반영했다. 검증: - npx tsc --noEmit 세션-상태: /app 헤더/프로필 배지/카드 전환 디테일 보정 완료 세션-다음: RoomSheet/도크 패널의 인원수 기반 표현을 분위기형 정보로 전환 세션-리스크: 헤더 배경 제거로 밝은 배경 구간에서 상단 텍스트 대비가 낮아질 수 있어 점검 필요
This commit is contained in:
@@ -4,4 +4,5 @@ export const MOCK_VIEWER: ViewerProfile = {
|
||||
id: 'viewer-1',
|
||||
name: '민서',
|
||||
avatarLabel: 'MS',
|
||||
membershipTier: 'pro',
|
||||
};
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
export type MembershipTier = 'pro' | 'normal' | 'team';
|
||||
|
||||
export interface ViewerProfile {
|
||||
id: string;
|
||||
name: string;
|
||||
avatarLabel: string;
|
||||
membershipTier: MembershipTier;
|
||||
}
|
||||
|
||||
@@ -7,6 +7,8 @@ interface ProfileMenuProps {
|
||||
}
|
||||
|
||||
export const ProfileMenu = ({ user, onLogout }: ProfileMenuProps) => {
|
||||
const tierLabel = user.membershipTier.toUpperCase();
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
align="right"
|
||||
@@ -15,7 +17,12 @@ export const ProfileMenu = ({ user, onLogout }: ProfileMenuProps) => {
|
||||
<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">
|
||||
{user.avatarLabel}
|
||||
</span>
|
||||
<span className="hidden sm:inline">{user.name}</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>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
|
||||
@@ -17,7 +17,7 @@ export const RoomPreviewCard = ({
|
||||
type="button"
|
||||
onClick={() => onSelect(room.id)}
|
||||
className={cn(
|
||||
'group relative overflow-hidden rounded-2xl border p-4 text-left transition-all duration-250 motion-reduce:transition-none',
|
||||
'group relative h-[248px] overflow-hidden rounded-2xl border p-4 text-left transition-all duration-250 motion-reduce:transition-none',
|
||||
selected
|
||||
? 'border-brand-dark/28 shadow-[0_0_0_1px_rgba(48,77,109,0.18)]'
|
||||
: 'border-brand-dark/16 hover:border-brand-dark/28',
|
||||
@@ -31,7 +31,7 @@ export const RoomPreviewCard = ({
|
||||
<div aria-hidden className="absolute inset-0 bg-slate-900/28" />
|
||||
<div aria-hidden className="absolute inset-0 bg-[linear-gradient(to_top,rgba(2,6,23,0.64),rgba(2,6,23,0.2))]" />
|
||||
|
||||
<div className="relative space-y-3 rounded-xl border border-white/20 bg-slate-950/22 p-3 backdrop-blur-[1.5px]">
|
||||
<div className="relative flex h-full flex-col justify-between space-y-3 rounded-xl border border-white/20 bg-slate-950/22 p-3 backdrop-blur-[1.5px]">
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-white">{room.name}</h3>
|
||||
<p className="mt-1 text-xs text-white/82">{room.description}</p>
|
||||
|
||||
@@ -95,7 +95,7 @@ export const AppHubWidget = () => {
|
||||
<div className="relative min-h-screen overflow-hidden text-white">
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 scale-[1.04] blur-[18px] transition-all duration-300"
|
||||
className="absolute inset-0 scale-[1.04] blur-[18px]"
|
||||
style={{
|
||||
...getRoomCardBackgroundStyle(selectedRoom),
|
||||
filter: 'brightness(1.05) saturate(0.9)',
|
||||
|
||||
@@ -9,12 +9,9 @@ interface AppTopBarProps {
|
||||
|
||||
export const AppTopBar = ({ user, oneLiner, onLogout }: AppTopBarProps) => {
|
||||
return (
|
||||
<header className="sticky top-0 z-20 border-b border-white/10 bg-slate-950/35 px-4 py-3 backdrop-blur-lg sm:px-6">
|
||||
<header className="sticky top-0 z-20 border-b border-white/18 px-4 py-3 sm:px-6">
|
||||
<div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/30 bg-white/10 text-xs font-semibold text-white">
|
||||
V
|
||||
</span>
|
||||
<p className="text-sm font-semibold tracking-tight text-white">VibeRoom</p>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user