Descope 연동

viewer/src/components/UserProfileBox.tsx

@@ -1,11 +1,96 @@
-import { CircleUser } from "lucide-react";
+// src/components/UserProfileBox.tsx
+import { useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { useDescope, useSession, useUser } from "@descope/react-sdk";
+import { User } from "lucide-react";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "./ui/button";
+import { LoginModal } from "./LoginModal";
 
 export function UserProfileBox() {
+	const { isAuthenticated, isSessionLoading } = useSession();
+	const { user, isUserLoading } = useUser();
+	const sdk = useDescope();
+	const navigate = useNavigate();
+	const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
+
+	const handleLogout = useCallback(() => {
+		sdk.logout();
+		navigate("/");
+	}, [sdk, navigate]);
+
+	const handleLoginSuccess = () => {
+		setIsLoginModalOpen(false);
+	};
+
+	if (isSessionLoading || isUserLoading) {
+		return (
+			<div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center animate-pulse" />
+		);
+	}
+
 	return (
-		<Button variant="ghost" size="icon">
-			<CircleUser />
-			<span className="sr-only">사용자 프로필</span>
-		</Button>
+		<>
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<Button variant="ghost" className="relative h-8 w-8 rounded-full">
+						<Avatar className="h-8 w-8">
+							{isAuthenticated && user?.picture && (
+								<AvatarImage src={user.picture} alt={user.name ?? ""} />
+							)}
+							<AvatarFallback>
+								{isAuthenticated && user?.name ? (
+									user.name
+										.split(" ")
+										.map((chunk) => chunk[0])
+										.join("")
+										.toUpperCase()
+								) : (
+									<User className="h-5 w-5" />
+								)}
+							</AvatarFallback>
+						</Avatar>
+					</Button>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent className="w-56" align="end" forceMount>
+					{isAuthenticated ? (
+						<>
+							<DropdownMenuLabel className="font-normal">
+								<div className="flex flex-col space-y-1">
+									<p className="text-sm font-medium leading-none">
+										{user?.name}
+									</p>
+									<p className="text-xs leading-none text-muted-foreground">
+										{user?.email}
+									</p>
+								</div>
+							</DropdownMenuLabel>
+							<DropdownMenuSeparator />
+							<DropdownMenuItem onClick={() => navigate("/profile")}>
+								내 프로필
+							</DropdownMenuItem>
+							<DropdownMenuItem onClick={handleLogout}>로그아웃</DropdownMenuItem>
+						</>
+					) : (
+						<DropdownMenuItem onClick={() => setIsLoginModalOpen(true)}>
+							로그인
+						</DropdownMenuItem>
+					)}
+				</DropdownMenuContent>
+			</DropdownMenu>
+			<LoginModal
+				isOpen={isLoginModalOpen}
+				onOpenChange={setIsLoginModalOpen}
+				onSuccess={handleLoginSuccess}
+			/>
+		</>
 	);
 }