From f07fd04c77565c5aca5141f4ac55f3dc68001bb3 Mon Sep 17 00:00:00 2001 From: jjjuyoa Date: Sun, 4 Jun 2023 14:54:50 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20api?= =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header.js | 9 ++-- src/components/HeaderAlba.js | 7 ++- src/pages/company/CompanyList.js | 3 ++ src/pages/main/Login.js | 88 ++++++++++++++++++++++++++------ src/redux-toolkit/store.js | 2 + src/redux-toolkit/userSlice.js | 25 +++++++++ 6 files changed, 112 insertions(+), 22 deletions(-) create mode 100644 src/redux-toolkit/userSlice.js 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 f579077..e38580f 100644 --- 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 (
diff --git a/src/pages/main/Login.js b/src/pages/main/Login.js index b9c1c8b..fc06cb1 100644 --- 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: "jjjuyoa@gmail.com", - password: "!as990422", -}; +import { setUser } 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(setUser(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() {