Merge branch 'main' of https://github.com/TeamWazard/wazard-front int…

…o feat/#80
TeamWazard · Jun 5, 2023 · 59cbcc0 · 59cbcc0
2 parents 13f61eb + 9aa1180
commit 59cbcc0
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 12 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
@@ -10,6 +10,15 @@ import { getCompanies } from "utils/apis/companyAPI";
 const CompanyList = () => {
   const navigate = useNavigate();
   const companies = useSelector((state) => state.companies);
+  // async function getCompanies = await axios.get('')
+  // useEffect(()=>{
+  //   const getCompanies = async () =>{
+  //     try{
+  //       const response = await axios.get('')
+  //     }
+  //   }
+  // })
+
   const user = useSelector((state) => state.user);
   console.log(user);
   async function handleGetCompanies() {
@@ -28,6 +37,8 @@ const CompanyList = () => {
     handleGetCompanies(); // 페이지 로드 시 함수 호출
   }, []);
 
+  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,18 +1,29 @@
 import React, { useEffect, useState, useRef } from "react";
 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";
-import { loginAPI } from "utils/apis/authAPI";
-import { useDispatch } from "react-redux";
-import { login } from "redux-toolkit/userSlice";
 
 const User = {
   email: "[email protected]",
   password: "!as990422",
 };
+import { loginAPI } from "utils/apis/authAPI";
+import { useDispatch } from "react-redux";
+import { login }
+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("");
 
@@ -30,6 +41,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 =
@@ -79,6 +133,21 @@ export default function Login() {
     }
   }
 
+  const onClickConfirmButton2 = () => {
+    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();
   const passwordInput = useRef();
 
@@ -93,7 +162,7 @@ export default function Login() {
           </div>
           <div className="inputWrap">
             <input
-              ref={emailInput}
+              ref={inputRefs.emailInput}
               className="input"
               type="text"
               value={email}
@@ -106,7 +175,7 @@ export default function Login() {
           </div>
           <div className="inputWrap">
             <input
-              ref={passwordInput}
+              ref={inputRefs.passwordInput}
               className="input"
               type="password"
               value={password}
@@ -116,7 +185,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";
 import { userSlice } from "./userSlice";
 

diff --git a/src/redux-toolkit/userSlice.js b/src/redux-toolkit/userSlice.js
@@ -1,3 +1,29 @@
+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;
+
 import { createSlice, current } from "@reduxjs/toolkit";
 
 export const userSlice = createSlice({