feat : 로그인 api

_main/src/apis/auth.js

@@ -5,4 +5,4 @@ const router = "/auth";
 export const Login = async (data) => {
   const response = await instance.post(`${router}`, data);
   return response.data;
-};
+};

_main/src/pages/Login.jsx

@@ -5,16 +5,57 @@ import closeEye from "../assets/closeeye.svg";
 import { Pagefooter } from "../components/Pagefooter";
 import { GlobalStyle } from "../GlobalStyle";
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Login } from "../apis/auth";
 
-export const Login = () => {
-  const [id, setId] = useState("");
-  const [password, setPassword] = useState("");
+export const LoginPage = () => {
   const [showPw, setShowPw] = useState(false);
-
   const showPasswordFunc = () => {
     setShowPw(!showPw);
   };
 
+  const [inputValue, setInputValue] = useState({
+    id: "",
+    password: "",
+  });
+
+  const { id, password } = inputValue;
+  const navigate = useNavigate();
+
+  const onChange = (e) => {
+    const { value, name } = e.target;
+    setInputValue({
+      ...inputValue,
+      [name]: value,
+    });
+  };
+
+  // 서버쪽에서 받은 response 중 role은 역할(어드민, 유저)
+  const handleLogin = async () => {
+    try {
+      const response = await Login({ id, password });
+      if (response.success) {
+        if (response.role === "admin") {
+          navigate("/admin");
+        } else if (response.role === "user") {
+          navigate("/user");
+        } else {
+          alert("로그인에 실패하셨습니다", response.message);
+        }
+      }
+    } catch (error) {
+      if (error.response) {
+        if (error.response.status === 401) {
+          alert("이메일 또는 비밀번호가 일치하지 않습니다. 401");
+        } else if (error.response.status === 404) {
+          alert("유저를 찾을 수 없습니다. 404");
+        } else {
+          alert("로그인 요청 실패");
+        }
+      }
+    }
+  };
+
   return (
     <>
       <GlobalStyle />
@@ -23,18 +64,16 @@ export const Login = () => {
         <LoginText>로그인</LoginText>
         <Inputs>
           <Input
+            name="id"
             value={id}
-            onChange={(e) => {
-              setId(e.target.value);
-            }}
+            onChange={onChange}
             placeholder="아이디를 입력하세요"
           />
           <PasswordWrapper>
             <Input
+              name="password"
               value={password}
-              onChange={(e) => {
-                setPassword(e.target.value);
-              }}
+              onChange={onChange}
               className="pw"
               type={showPw ? "text" : "password"}
               placeholder="비밀번호를 입력하세요"
@@ -45,7 +84,9 @@ export const Login = () => {
               alt={showPw ? "비밀번호 숨기기" : "비밀번호 보기"}
             />
           </PasswordWrapper>
-          <LoginBtn>로그인</LoginBtn>
+          <LoginBtn onClick={handleLogin} style={{ cursor: "pointer" }}>
+            로그인
+          </LoginBtn>
         </Inputs>
       </LoginAll>
       <Pagefooter />

_main/src/router.jsx

@@ -1,11 +1,11 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import { Login } from "./pages/Login";
+import { LoginPage } from "./pages/Login";
 
 export const Router = () => {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<Login />} />
+        <Route path="/" element={<LoginPage />} />
       </Routes>
     </BrowserRouter>
   );

admin/src/router.jsx

@@ -16,15 +16,15 @@ export const Router = () => {
     <Container>
       <BrowserRouter>
         <Routes>
-          <Route path="/seeall" element={<SeeAll />} />
-          <Route path="/club" element={<ClubMain />} />
-          <Route path="/mypage" element={<MyPage />} />
-          <Route path="/add_introProject" element={<AddIntroProject />} />
-          <Route path="/edit_introProject" element={<EditIntroProject />} />
-          <Route path="/jopPosting" element={<JobPosting />} />
-          <Route path="/edit_JobPosting" element={<EditJobPosting />} />
-          <Route path="/add_clubintro" element={<WriteClubIntro />} />
-          <Route path="/edit_clubintro" element={<EditWriteClubIntro />} />
+          <Route path="/admin" element={<SeeAll />} />
+          <Route path="/admin/club" element={<ClubMain />} />
+          <Route path="/admin/mypage" element={<MyPage />} />
+          <Route path="/admin/add_introProject" element={<AddIntroProject />} />
+          <Route path="/admin/edit_introProject" element={<EditIntroProject />} />
+          <Route path="/admin/jopPosting" element={<JobPosting />} />
+          <Route path="/admin/edit_JobPosting" element={<EditJobPosting />} />
+          <Route path="/admin/add_clubintro" element={<WriteClubIntro />} />
+          <Route path="/admin/edit_clubintro" element={<EditWriteClubIntro />} />
         </Routes>
       </BrowserRouter>
     </Container>

user/package.json

@@ -17,7 +17,8 @@
     "react-router-dom": "^7.0.2",
     "route": "^0.2.5",
     "router": "^1.3.8",
-    "styled-components": "^6.1.13"
+    "styled-components": "^6.1.13",
+    "universal-cookie": "^7.2.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",

user/src/apis/axios.js

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { Cookie } from "../Utils/cookie";
+import { Cookie } from "../utils/cookie";
 
 export const instance = axios.create({
   baseURL: import.meta.env.VITE_APP_BASE_URL,

user/src/router.jsx

@@ -13,12 +13,12 @@ export const Router = () => {
     <Container>
       <BrowserRouter>
         <Routes>
-          <Route path="/SeeApply" element={<SeeApplicationForm />} />
-          <Route path="/Apply" element={<ApplicationForm />} />
-          <Route path="/seeall" element={<SeeAll />} />
-          <Route path="/club" element={<ClubMain />} />
-          <Route path="/mypage" element={<MyPage />} />
-          <Route path="/applicantlist" element={<ApplicantList />} />
+          <Route path="/user" element={<SeeAll />} />
+          <Route path="/user/SeeApply" element={<SeeApplicationForm />} />
+          <Route path="/user/Apply" element={<ApplicationForm />} />
+          <Route path="/user/club" element={<ClubMain />} />
+          <Route path="/user/mypage" element={<MyPage />} />
+          <Route path="/user/applicantlist" element={<ApplicantList />} />
         </Routes>
       </BrowserRouter>
     </Container>