Add login and logout functionality with admin dashboard access

Introduce a login modal for user authentication, implement user logout functionality, and display an "Admin Dashboard" button for authenticated users.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/jvFIdY3

client/src/pages/Home.tsx

@@ -1,14 +1,41 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useAuth } from "@/hooks/useAuth";
-import { Search, Settings } from "lucide-react";
+import { Search, Settings, User, LogOut } from "lucide-react";
+import { useState } from "react";
 import MainContent from "@/components/MainContent";
+import LoginModal from "@/components/LoginModal";
+import { useToast } from "@/hooks/use-toast";
+import { queryClient } from "@/lib/queryClient";
 
 export default function Home() {
-  const { user } = useAuth();
+  const { user, isAuthenticated } = useAuth();
+  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
+  const { toast } = useToast();
 
-  const handleLogout = () => {
-    window.location.href = "/api/logout";
+  const handleLogout = async () => {
+    try {
+      const response = await fetch("/api/logout", {
+        method: "POST",
+        credentials: "include",
+      });
+
+      if (response.ok) {
+        toast({
+          title: "로그아웃 완료",
+          description: "성공적으로 로그아웃되었습니다.",
+        });
+        
+        // Invalidate auth queries to refresh user state
+        queryClient.invalidateQueries({ queryKey: ["/api/auth/user"] });
+      }
+    } catch (error) {
+      toast({
+        title: "로그아웃 오류",
+        description: "로그아웃 중 오류가 발생했습니다.",
+        variant: "destructive",
+      });
+    }
   };
 
   const handleAdminPage = () => {
@@ -41,14 +68,43 @@ export default function Home() {
                 />
               </div>
               
-              <Button 
-                variant="ghost" 
-                size="sm"
-                onClick={handleAdminPage}
-                data-testid="button-admin"
-              >
-                관리자 페이지
-              </Button>
+              {isAuthenticated && user ? (
+                <>
+                  <Button 
+                    variant="ghost" 
+                    size="sm"
+                    onClick={handleAdminPage}
+                    data-testid="button-admin-dashboard"
+                  >
+                    Admin Dashboard
+                  </Button>
+                  
+                  <div className="flex items-center space-x-2 px-3 py-1 bg-gray-100 rounded-md">
+                    <User className="h-4 w-4 text-gray-600" />
+                    <span className="text-sm font-medium text-gray-700" data-testid="user-name">
+                      {user.firstName} {user.lastName}
+                    </span>
+                  </div>
+                  
+                  <Button 
+                    variant="ghost" 
+                    size="sm"
+                    onClick={handleLogout}
+                    data-testid="button-logout"
+                  >
+                    <LogOut className="h-4 w-4" />
+                  </Button>
+                </>
+              ) : (
+                <Button 
+                  variant="ghost" 
+                  size="sm"
+                  onClick={() => setIsLoginModalOpen(true)}
+                  data-testid="button-login"
+                >
+                  Login
+                </Button>
+              )}
               
               <Button 
                 variant="ghost" 
@@ -64,6 +120,12 @@ export default function Home() {
 
       {/* Main Content */}
       <MainContent />
+      
+      {/* Login Modal */}
+      <LoginModal 
+        isOpen={isLoginModalOpen} 
+        onClose={() => setIsLoginModalOpen(false)} 
+      />
     </div>
   );
 }