corpi
a2bebb3485
맥락:\n- 상단 헤더 요소가 많아 허브의 핵심 흐름(공간 선택 → 목표 입력 → 입장)이 분산되었습니다.\n- 메모/통계/설정 진입을 상단이 아닌 보조 동선으로 옮겨 감성 톤을 유지할 필요가 있었습니다.\n\n변경사항:\n- 우측 아이콘 레일과 우측 드로어를 추가해 Inbox/Stats/Settings를 동일 패턴으로 제공했습니다.\n- TopBar에서 메모 버튼을 제거하고, 멤버십/PRO 동선은 ProfileMenu 드롭다운으로 정리했습니다.\n- Selected Space 박스를 슬림화하고 설명을 1줄로 제한해 시선 분산을 줄였습니다.\n- 추천 공간 카드에 텍스트 가독성 오버레이와 선택 표시(은은한 테두리/체크)를 적용했습니다.\n- Quick Entry에서 커스텀 CTA 무게를 낮추고 전체 톤을 가볍게 조정했습니다.\n- docs/work.template.md를 추가하고 docs/work.md의 현재 작업 지시를 갱신했습니다.\n\n검증:\n- npm run build\n- npx tsc --noEmit\n\n세션-상태: /app 허브가 상단 과밀 없이 레일+드로어 보조 동선으로 정리되었습니다.\n세션-다음: 드로어 패널의 실제 데이터 연결 시 도메인 상태와 연동을 진행합니다.\n세션-리스크: 드로어 포커스 트랩/키보드 동선은 추가 접근성 점검이 필요합니다.
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import type { ViewerProfile } from '@/entities/user';
|
|
import type { AppHubVisualMode } from '@/shared/config/appHubVisualMode';
|
|
import { cn } from '@/shared/lib/cn';
|
|
import { ProfileMenu } from '@/features/profile-menu';
|
|
|
|
interface AppTopBarProps {
|
|
user: ViewerProfile;
|
|
oneLiner: string;
|
|
onLogout: () => void;
|
|
visualMode?: AppHubVisualMode;
|
|
onOpenBilling?: () => void;
|
|
}
|
|
|
|
export const AppTopBar = ({
|
|
user,
|
|
oneLiner,
|
|
onLogout,
|
|
visualMode = 'light',
|
|
onOpenBilling,
|
|
}: AppTopBarProps) => {
|
|
const cinematic = visualMode === 'cinematic';
|
|
|
|
return (
|
|
<header className="relative z-20 px-4 pt-4 sm:px-6 lg:px-8">
|
|
<div
|
|
className={cn(
|
|
'mx-auto flex w-full max-w-6xl items-center justify-between gap-3 rounded-2xl border px-3.5 py-2.5 backdrop-blur-xl sm:px-4',
|
|
cinematic
|
|
? 'border-white/18 bg-slate-950/44 text-white shadow-[0_16px_44px_rgba(2,6,23,0.36)]'
|
|
: 'border-brand-dark/12 bg-white/80 text-brand-dark shadow-[0_14px_40px_rgba(15,23,42,0.12)]',
|
|
)}
|
|
>
|
|
<div className="min-w-0">
|
|
<p
|
|
className={cn(
|
|
'text-base font-semibold tracking-tight',
|
|
cinematic ? 'text-white/94' : 'text-brand-dark',
|
|
)}
|
|
>
|
|
<span title={oneLiner}>VibeRoom</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2.5 sm:gap-3">
|
|
<ProfileMenu user={user} onLogout={onLogout} onOpenBilling={onOpenBilling} />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|