Files
vexplor_dev/frontend/components/messenger/MessengerFAB.tsx

26 lines
904 B
TypeScript

"use client";
import { MessageSquare } from "lucide-react";
import { useMessengerContext } from "@/contexts/MessengerContext";
export function MessengerFAB() {
const { isOpen, openMessenger, unreadCount } = useMessengerContext();
if (isOpen) return null;
return (
<button
onClick={() => openMessenger()}
className="fixed bottom-6 right-6 z-[9999] flex h-14 w-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg hover:bg-primary/90 transition-colors"
aria-label="메신저 열기"
>
<MessageSquare className="h-6 w-6" />
{unreadCount > 0 && (
<span className="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1 text-[11px] font-bold text-destructive-foreground">
{unreadCount > 99 ? "99+" : unreadCount}
</span>
)}
</button>
);
}