feat(app-hub): 허브 도구 레일과 입장 동선을 정리

맥락:\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세션-리스크: 드로어 포커스 트랩/키보드 동선은 추가 접근성 점검이 필요합니다.
This commit is contained in:
2026-03-02 12:17:35 +09:00
parent 6dfa4677d9
commit a2bebb3485
16 changed files with 610 additions and 164 deletions

View File

@@ -1,12 +1,20 @@
import type { ViewerProfile } from '@/entities/user';
import { Dropdown, DropdownItem } from '@/shared/ui';
import { cn } from '@/shared/lib/cn';
interface ProfileMenuProps {
user: ViewerProfile;
onLogout: () => void;
onOpenBilling?: () => void;
}
export const ProfileMenu = ({ user, onLogout }: ProfileMenuProps) => {
const MEMBERSHIP_LABEL_MAP: Record<ViewerProfile['membershipTier'], string> = {
pro: 'PRO MEMBER',
normal: 'NORMAL',
team: 'TEAM',
};
export const ProfileMenu = ({ user, onLogout, onOpenBilling }: ProfileMenuProps) => {
return (
<Dropdown
align="right"
@@ -21,6 +29,20 @@ export const ProfileMenu = ({ user, onLogout }: ProfileMenuProps) => {
</span>
}
>
<div className="rounded-lg px-3 py-2">
<p className="text-[11px] uppercase tracking-[0.14em] text-white/48">Membership</p>
<p
className={cn(
'mt-1 text-xs font-medium',
user.membershipTier === 'pro' ? 'text-amber-200/88' : 'text-white/80',
)}
>
{MEMBERSHIP_LABEL_MAP[user.membershipTier]}
</p>
</div>
{onOpenBilling ? (
<DropdownItem onClick={onOpenBilling}>PRO </DropdownItem>
) : null}
<DropdownItem href="/stats">Stats</DropdownItem>
<DropdownItem href="/settings">Settings</DropdownItem>
<DropdownItem danger onClick={onLogout}>