72 lines
2.6 KiB
TypeScript
72 lines
2.6 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { LogOut, User } from "lucide-react";
|
|
|
|
interface UserDropdownProps {
|
|
user: any;
|
|
onProfileClick: () => void;
|
|
onLogout: () => void;
|
|
}
|
|
|
|
/**
|
|
* 사용자 드롭다운 메뉴 컴포넌트
|
|
*/
|
|
export function UserDropdown({ user, onProfileClick, onLogout }: UserDropdownProps) {
|
|
if (!user) return null;
|
|
|
|
return (
|
|
<DropdownMenu modal={false}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="relative h-8 w-8 rounded-full">
|
|
<Avatar className="h-8 w-8">
|
|
{user.photo ? <AvatarImage src={user.photo} alt={user.userName || "User"} /> : null}
|
|
<AvatarFallback>{user.userName?.substring(0, 1) || "U"}</AvatarFallback>
|
|
</Avatar>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56" align="end">
|
|
<DropdownMenuLabel className="font-normal">
|
|
<div className="flex items-center space-x-3">
|
|
{/* 프로필 사진 표시 */}
|
|
<Avatar className="h-12 w-12">
|
|
{user.photo ? <AvatarImage src={user.photo} alt={user.userName || "User"} /> : null}
|
|
<AvatarFallback>{user.userName?.substring(0, 1) || "U"}</AvatarFallback>
|
|
</Avatar>
|
|
|
|
{/* 사용자 정보 */}
|
|
<div className="flex flex-col space-y-1">
|
|
<p className="text-sm leading-none font-medium">
|
|
{user.userName || "사용자"} ({user.userId || ""})
|
|
</p>
|
|
<p className="text-muted-foreground text-xs leading-none font-semibold">{user.email || ""}</p>
|
|
<p className="text-muted-foreground text-xs leading-none font-semibold">
|
|
{user.deptName && user.positionName
|
|
? `${user.deptName}, ${user.positionName}`
|
|
: user.deptName || user.positionName || "부서 정보 없음"}
|
|
</p>
|
|
{/* 사진 상태 표시 */}
|
|
</div>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={onProfileClick}>
|
|
<User className="mr-2 h-4 w-4" />
|
|
<span>프로필</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={onLogout}>
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
<span>로그아웃</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|