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
2025-09-29 18:49:09 +00:00
parent 6d81e0281a
commit d6d8be8273
3 changed files with 195 additions and 12 deletions
--- a/client/src/components/LoginModal.tsx
+++ b/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>
+  );
+}