Merge pull request #69 from KUIT-Space/feat#18-login

api 연결

package.json

@@ -12,6 +12,7 @@
     "chat-mock" : "cd mock && npm i && npm run start"
   },
   "dependencies": {
+    "axios": "^1.7.4",
     "es-hangul": "^1.4.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/pages/ChatPage/ChatPage.tsx

@@ -1,8 +1,7 @@
+import TopBarText, { LeftEnum } from "@/components/TopBarText";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-
 import TopBarText, { LeftEnum } from "@/components/TopBarText";
-
 import { tempJson } from "./_testChatList";
 import { AddChatBtn } from "./ChatAddBtn.styled";
 import { ChatContainer, ChatListContainer } from "./ChatPage.styled";

src/pages/LoginPage/LoginPage.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-
 import { loginApi } from "@/apis";
 import google from "@/assets/Login/icon_google.svg";
 import kakao from "@/assets/Login/icon_kakao.svg";
 import naver from "@/assets/Login/icon_naver.svg";
+import axios from 'axios';
 import logoSpace from "@/assets/logo_space.svg";
 import {
   BtContainer,
@@ -24,57 +24,78 @@ const LoginPage = () => {
   const [password, setPassword] = useState("");
   const [isButtonActive, setIsButtonActive] = useState(false);
 
-  useEffect(() => {
-    setIsButtonActive(id.trim() !== "" && password.trim() !== "");
-  }, [id, password]);
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [isButtonActive, setIsButtonActive] = useState(false);
+
+	const validateEmail = (email:string) => {
+		const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+		return re.test(email);
+	};
+
+	const validatePassword = (password:string) => {
+		const re = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,16}$/;
+		return re.test(password);
+	};
+
+	useEffect(() => {
+		const isValid = validateEmail(email) && validatePassword(password);
+		setIsButtonActive(isValid);
+	}, [email, password]);
+
+	const handleLogin = async () => {
+		if (!isButtonActive) return;
+		try {
+			const response = await axios.post('/api/user/login', {
+				email: email,
+				password: password,
+			});
 
-  const handleLogin = () => {
-    loginApi(id, password).then((res) =>
-      res.status === "OK" ? navigate("/") : alert("login error: " + res.message),
-    );
-  };
+			if (response.status === 200) {
+				const token = response.headers.authorization;
+
+				localStorage.setItem('jwt', token);
+				navigate('/dashboard');
+			} else {
+				console.error('로그인 실패:', response.data.message);
+			}
+		 } catch (error) {
+    if (error instanceof Error) {
+      console.error('로그인 실패:', error.message);
+    } else {
+      console.error('로그인 실패:', error);
+    }
+  }
+	};
 
-  return (
-    <>
-      <Container>
-        <Logo>
-          <img src={logoSpace} style={{ width: "100%" }} alt="Logo" />
-        </Logo>
-        <Input
-          type="id"
-          placeholder="아이디"
-          value={id}
-          onChange={(e) => setId(e.target.value)}
-          style={{ marginTop: "10.37rem" }}
-        />
-        <Input
-          type="password"
-          placeholder="비밀번호"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-        />
-        <LoginButton onClick={handleLogin} $isActive={isButtonActive}>
-          로그인
-        </LoginButton>
-        <BtContainer>
-          <Button>아이디 찾기</Button>
-          <Button>비밀번호 찾기</Button>
-          <Button onClick={() => navigate("/signup")}>회원가입</Button>
-        </BtContainer>
-        <ScContainer>
-          <Social>
-            <img src={kakao} alt="kakao" />
-          </Social>
-          <Social>
-            <img src={google} alt="google" />
-          </Social>
-          <Social>
-            <img src={naver} alt="naver" />
-          </Social>
-        </ScContainer>
-      </Container>
-    </>
-  );
+	return (
+		<>
+			<Container>
+				<Logo>
+					<img src={logoSpace} style={{ width: "100%" }} alt="Logo" />
+				</Logo>
+				<Input type="email" placeholder="이메일" value={email} onChange={(e) => setEmail(e.target.value)} style={{ marginTop: "10.37rem" }} />
+				<Input type="password" placeholder="비밀번호" value={password} onChange={(e) => setPassword(e.target.value)} />
+				<LoginButton $isActive={isButtonActive} onClick={handleLogin}>로그인</LoginButton>
+				<BtContainer>
+					<Button>아이디 찾기</Button>
+					<Button>비밀번호 찾기</Button>
+					<Button onClick={() => navigate("/signup")}>회원가입</Button>
+				</BtContainer>
+				<ScContainer>
+					<Social>
+						<img src={kakao} alt="kakao" />
+					</Social>
+					<Social>
+						<img src={google} alt="google" />
+					</Social>
+					<Social>
+						<img src={naver} alt="naver" />
+					</Social>
+				</ScContainer>
+			</Container>
+		</>
+	);
 };
 
 export default LoginPage;

vite.config.ts

@@ -2,7 +2,6 @@ import react from "@vitejs/plugin-react-swc";
 import * as path from "path";
 import { defineConfig } from "vite";
 import vitePluginSvgr from "vite-plugin-svgr";
-
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), vitePluginSvgr()],