58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
import { useNavigate } from 'react-router'
|
|
import { Bell, LogOut } from 'lucide-react'
|
|
import { useLogoutMutation, useMeQuery } from '@/apis'
|
|
import { Logo } from '@/components'
|
|
import { cn, interactive } from '@/lib'
|
|
|
|
// 포털 상단 네비게이션 바 (목록 화면 전용).
|
|
export function PortalHeader() {
|
|
const navigate = useNavigate()
|
|
const { data: user } = useMeQuery()
|
|
const logout = useLogoutMutation()
|
|
|
|
const handleLogout = () =>
|
|
logout.mutate(undefined, { onSuccess: () => navigate('/') })
|
|
|
|
return (
|
|
<header className="sticky top-0 z-40 flex h-16 items-center justify-between border-b border-border bg-white/90 px-4 shadow-sm backdrop-blur sm:px-6">
|
|
<Logo size="md" />
|
|
|
|
<div className="flex items-center gap-2 sm:gap-3">
|
|
<button
|
|
type="button"
|
|
aria-label="알림"
|
|
className={cn(
|
|
'relative flex size-9 items-center justify-center rounded-xl text-neutral-70 hover:bg-neutral-10',
|
|
interactive,
|
|
)}
|
|
>
|
|
<Bell className="size-5" />
|
|
<span className="absolute right-2 top-2 size-1.5 rounded-full bg-brand-600" />
|
|
</button>
|
|
|
|
<div className="hidden min-w-0 flex-col items-end sm:flex">
|
|
<span className="max-w-[180px] truncate text-[13px] font-bold text-neutral-90">
|
|
{user?.supplierName ?? '-'}
|
|
</span>
|
|
<span className="text-[11px] text-neutral-60">{user?.name ?? '공급 파트너'}</span>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={handleLogout}
|
|
disabled={logout.isPending}
|
|
className={cn(
|
|
'flex items-center gap-1.5 rounded-xl border border-border px-3 py-1.5 text-xs font-bold text-neutral-70 hover:bg-neutral-10 disabled:opacity-50',
|
|
interactive,
|
|
)}
|
|
>
|
|
<LogOut className="size-3.5" />
|
|
<span className="hidden sm:inline">로그아웃</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|
|
|
|
export default PortalHeader
|