diff --git a/src/components/Header.js b/src/components/Header.js index bad859c..589a804 100644 --- 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 (
@@ -27,7 +28,7 @@ const Header = () => { onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > - {userName.user_name}님 환영합니다! + {userName}님 환영합니다! {isDropdownVisible && (
diff --git a/src/components/HeaderAlba.js b/src/components/HeaderAlba.js index 2a1daed..3b8dc84 100644 --- 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 && (
diff --git a/src/pages/company/CompanyList.js b/src/pages/company/CompanyList.js index 9bffeb2..ec95fa3 100644 --- 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 (
diff --git a/src/pages/main/Login.js b/src/pages/main/Login.js index a399da5..b810900 100644 --- 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: "jjjuyoa@gmail.com", 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() {