Merge pull request #82 from TeamWazard/feat/#81

[Feat]로그인 api 적용 및 수정
TeamWazard · Jun 5, 2023 · 9aa1180 · 9aa1180
2 parents 12795c0 + 5db30f0
commit 9aa1180
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 22 deletions.
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -2,12 +2,14 @@ import "../App.scss";
 import React, { useEffect, useState } from "react";
 import { NavLink, useLocation } from "react-router-dom";
 import { useSelector } from "react-redux";
-
 import "../style/components/Header.scss";
 
 const Header = () => {
-  const userName = useSelector((state) => state.alba_contract);
+  const user = useSelector((state) => state.user);
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+  const userName = user.userName;
+
+  console.log(userName);
 
   const handleMouseEnter = () => {
     setIsDropdownVisible(true);
@@ -16,7 +18,6 @@ const Header = () => {
   const handleMouseLeave = () => {
     setIsDropdownVisible(false);
   };
-
   return (
     <div className="topbar">
       <NavLink to="/company_list">
@@ -27,7 +28,7 @@ const Header = () => {
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
       >
-        {userName.user_name}님 환영합니다!
+        {userName}님 환영합니다!
         {isDropdownVisible && (
           <div className="dropdown">
             <NavLink to="/my_account" className="dropdownItem">

diff --git a/src/components/HeaderAlba.js b/src/components/HeaderAlba.js
@@ -5,8 +5,11 @@ import { useSelector } from "react-redux";
 import "../style/components/Header.scss";
 
 const HeaderAlba = () => {
-  const userName = useSelector((state) => state.alba_contract);
+  const user = useSelector((state) => state.user);
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+  const userName = user.userName;
+
+  console.log(userName);
 
   const handleMouseEnter = () => {
     setIsDropdownVisible(true);
@@ -25,7 +28,7 @@ const HeaderAlba = () => {
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
       >
-        {userName.user_name}님 환영합니다!
+        {userName}님 환영합니다!
         {isDropdownVisible && (
           <div className="dropdown">
             <NavLink to="/my_account" className="dropdownItem">

diff --git a/src/pages/company/CompanyList.js b/src/pages/company/CompanyList.js
@@ -9,6 +9,7 @@ import { useEffect } from "react";
 const CompanyList = () => {
   const navigate = useNavigate();
   const companies = useSelector((state) => state.companies);
+  const user = useSelector((state) => state.user);
   // async function getCompanies = await axios.get('')
   // useEffect(()=>{
   //   const getCompanies = async () =>{
@@ -18,6 +19,8 @@ const CompanyList = () => {
   //   }
   // })
 
+  console.log(user);
+
   return (
     <div className="company_list_page">
       <Header />

diff --git a/src/pages/main/Login.js b/src/pages/main/Login.js
@@ -1,21 +1,29 @@
 import React, { useEffect, useState, useRef } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import { useDispatch } from "react-redux";
 import userIcon from "../../imgs/userIcon.svg";
 import passwordIcon from "../../imgs/passwordIcon.svg";
+import axios from "axios";
 import "./Login.scss";
-
-const User = {
-  email: "[email protected]",
-  password: "!as990422",
-};
+import { getUser } from "../../redux-toolkit/userSlice";
 
 export default function Login() {
+  const [user, setUser] = useState({
+    accountId: 1,
+    email: "",
+    userName: "",
+    role: "", // EMPLOYEE
+    accessToken: "",
+  });
+
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
 
   const [emailValid, setEmailValid] = useState(false);
   const [passwordValid, setPasswordValid] = useState(false);
   const [notAllow, setNotAllow] = useState(true);
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
 
   useEffect(() => {
     if (emailValid && passwordValid) {
@@ -25,6 +33,49 @@ export default function Login() {
     setNotAllow(true);
   }, [emailValid, passwordValid]);
 
+  const inputRefs = {
+    emailInput: useRef(),
+    passwordInput: useRef(),
+  };
+
+  //로그인 일단 200번 띄움
+  const loginAxios = () => {
+    const config = { "Content-Type": "application/json" };
+    axios
+      .post(
+        "http://wazard.shop:9000/account/login",
+        {
+          email: email,
+          password: password,
+        },
+        config
+      )
+      .then((response) => {
+        console.log(response);
+        if (response.status === 200) {
+          const userData = {
+            accountId: response.data.accountId,
+            email: response.data.email,
+            userName: response.data.userName,
+            role: response.data.role,
+          };
+          dispatch(getUser(userData));
+          localStorage.setItem("accessToken", response.data.accessToken);
+          alert(`${response.data.userName}님 어서오세요!`);
+
+          if (response.data.role === "EMPLOYER") {
+            navigate(`/company_list`);
+          } else if (response.data.role === "EMPLOYEE") {
+            navigate(`/alba_list`);
+          }
+        }
+      })
+      .catch((err) => {
+        alert("이메일, 비밀번호를 확인해주세요.");
+        console.log(err);
+      });
+  };
+
   const handleEmail = (e) => {
     setEmail(e.target.value);
     const regex =
@@ -46,13 +97,18 @@ export default function Login() {
     }
   };
   const onClickConfirmButton = () => {
-    if (email === "") {
-      emailInput.current.focus();
-    } else if (email === User.email && password === User.password) {
-      alert("로그인에 성공했습니다.");
-    } else {
-      alert("등록되지 않은 회원입니다.");
-    }
+    loginAxios();
+    // if (email === "") {
+    //   inputRefs.emailInput.current.focus();
+    // } else if (password === "") {
+    //   inputRefs.passwordInput.current.focus();
+    // } else if (email === user.email && password === user.password) {
+    //   console.log(email);
+    //   console.log(password);
+    //   alert("로그인에 성공했습니다.");
+    // } else {
+    //   alert("등록되지 않은 회원입니다.");
+    // }
   };
 
   const emailInput = useRef();
@@ -69,7 +125,7 @@ export default function Login() {
           </div>
           <div className="inputWrap">
             <input
-              ref={emailInput}
+              ref={inputRefs.emailInput}
               className="input"
               type="text"
               value={email}
@@ -82,7 +138,7 @@ export default function Login() {
           </div>
           <div className="inputWrap">
             <input
-              ref={passwordInput}
+              ref={inputRefs.passwordInput}
               className="input"
               type="password"
               value={password}
@@ -92,7 +148,7 @@ export default function Login() {
           <div>
             <button
               onClick={onClickConfirmButton}
-              disabled={notAllow}
+              // disabled={notAllow}
               className="loginButton"
             >
               LOGIN

diff --git a/src/redux-toolkit/store.js b/src/redux-toolkit/store.js
@@ -8,6 +8,7 @@ import { AlbaContractSlice } from "./albaModule/AlbaContractSlice";
 import { AlbaRecordListSlice } from "./albaModule/AlbaRecordListSlice";
 import { AlbaAttendance } from "./albaModule/AlbaAttendance";
 import { AlbaReplaceSlice } from "./albaModule/AlbaReplaceSlice";
+import { userSlice } from "./userSlice";
 import { albaWaitListSlice } from "./albaModule/AlbaWaitListSlice";
 
 const store = configureStore({
@@ -21,6 +22,7 @@ const store = configureStore({
     alba_attendance: AlbaAttendance.reducer,
     alba_replace: AlbaReplaceSlice.reducer,
     alba_waitlist: albaWaitListSlice.reducer,
+    user: userSlice.reducer,
   },
 });
 

diff --git a/src/redux-toolkit/userSlice.js b/src/redux-toolkit/userSlice.js
@@ -0,0 +1,25 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialValue = {
+  accountId: 1,
+  email: "",
+  userName: "",
+  role: "",
+};
+
+export const userSlice = createSlice({
+  name: "user",
+  initialState: initialValue,
+  reducers: {
+    getUser: (state, action) => {
+      state.accountId = action.payload.accountId;
+      state.email = action.payload.email;
+      state.userName = action.payload.userName;
+      state.role = action.payload.role;
+    },
+  },
+});
+
+export const { getUser } = userSlice.actions;
+
+export default userSlice.reducer;