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/components/LoginModal.tsx

@@ -0,0 +1,121 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { useToast } from "@/hooks/use-toast";
+import { queryClient } from "@/lib/queryClient";
+
+interface LoginModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function LoginModal({ isOpen, onClose }: LoginModalProps) {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const { toast } = useToast();
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    try {
+      const response = await fetch("/api/login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        credentials: "include",
+        body: JSON.stringify({ username, password }),
+      });
+
+      if (response.ok) {
+        const user = await response.json();
+        toast({
+          title: "로그인 성공",
+          description: `환영합니다, ${user.firstName}님!`,
+        });
+        
+        // Invalidate auth queries to refresh user state
+        queryClient.invalidateQueries({ queryKey: ["/api/auth/user"] });
+        
+        // Reset form and close modal
+        setUsername("");
+        setPassword("");
+        onClose();
+      } else {
+        const error = await response.json();
+        toast({
+          title: "로그인 실패",
+          description: error.message || "잘못된 아이디 또는 비밀번호입니다.",
+          variant: "destructive",
+        });
+      }
+    } catch (error) {
+      toast({
+        title: "로그인 오류",
+        description: "로그인 중 오류가 발생했습니다.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[425px]" data-testid="login-modal">
+        <DialogHeader>
+          <DialogTitle>로그인</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleLogin} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="username">아이디</Label>
+            <Input
+              id="username"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="아이디를 입력하세요"
+              required
+              data-testid="input-username"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">비밀번호</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="비밀번호를 입력하세요"
+              required
+              data-testid="input-password"
+            />
+          </div>
+          <div className="flex space-x-2 pt-4">
+            <Button
+              type="submit"
+              className="flex-1"
+              disabled={isLoading}
+              data-testid="button-login-submit"
+            >
+              {isLoading ? "로그인 중..." : "로그인"}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onClose}
+              disabled={isLoading}
+              data-testid="button-login-cancel"
+            >
+              취소
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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 = () => {
+  const handleLogout = async () => {
-    window.location.href = "/api/logout";
+    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,15 +68,44 @@ export default function Home() {
                 />
               </div>
               
+              {isAuthenticated && user ? (
+                <>
                   <Button 
                     variant="ghost" 
                     size="sm"
                     onClick={handleAdminPage}
-                data-testid="button-admin"
+                    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" 
                 size="sm"
@@ -64,6 +120,12 @@ export default function Home() {
 
       {/* Main Content */}
       <MainContent />
+      
+      {/* Login Modal */}
+      <LoginModal 
+        isOpen={isLoginModalOpen} 
+        onClose={() => setIsLoginModalOpen(false)} 
+      />
     </div>
   );
 }