diff --git a/src/pages/company/inCompany/CompanyInvite.js b/src/pages/company/inCompany/CompanyInvite.js index a9fb7e2..4971753 100644 --- a/src/pages/company/inCompany/CompanyInvite.js +++ b/src/pages/company/inCompany/CompanyInvite.js @@ -1,13 +1,33 @@ import Header from "components/Header"; import { useNavigate, useParams } from "react-router-dom"; import LeftMenuCeo from "components/LeftMenuCeo"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import "../../../style/company/company.scss"; +import { useSelector } from "react-redux"; const CompanyInvite = () => { const [userEmail, setUserEmail] = useState(""); const [isValid, setIsValid] = useState(false); + const [isState, setIsState] = useState(true); + const invite_user = [ + { + id: 0, + name: "김민규", + email: "hello123@naver.com", + code: "24DW4Y89", + state: "대기", + }, + { + id: 1, + name: "윤서영", + email: "seoyoung7623@naver.com", + code: "DE32S5DU", + state: "거절", + }, + ]; + const alba_waitlist = useSelector((state) => state.alba_waitlist); + useEffect(() => {}, [invite_user]); const validateEmail = (input) => { const regex = @@ -41,11 +61,11 @@ const CompanyInvite = () => {

알바생 초대

-

+ {/*

초대할 알바생의 email 주소를 입력하세요. -

+ */}
-
+ {/*
{ }} placeholder="ex) wazard123@gmail.com ..." /> -
+
*/}
- +
+
+
+

초대 대기 목록

+
+
+ {alba_waitlist.map((user) => ( +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ {user.state === "대기" && ( + + )} + {user.state === "거절" && ( + + )} +
+
+ {user.state == "거절" && ( +
+ +
+ )} +
+ ))} +
+
diff --git a/src/pages/main/ButtonChoose.js b/src/pages/main/ButtonChoose.js index 86e9dca..206ec88 100644 --- a/src/pages/main/ButtonChoose.js +++ b/src/pages/main/ButtonChoose.js @@ -6,11 +6,11 @@ import { useNavigate } from "react-router-dom"; const ButtonChoose = () => { const navigate = useNavigate(); const onClickPJButton = () => { - navigate("/signup", { state: { userType: "PJ" } }); + navigate("/signup", { state: { userType: "EMPLOYEE" } }); }; const onClickCEOButton = () => { - navigate("/signup", { state: { userType: "CEO" } }); + navigate("/signup", { state: { userType: "EMPLOYER" } }); }; return ( diff --git a/src/pages/main/SignUpChoose.js b/src/pages/main/SignUpChoose.js index 78c0234..192dd3f 100644 --- a/src/pages/main/SignUpChoose.js +++ b/src/pages/main/SignUpChoose.js @@ -3,11 +3,14 @@ import { useLocation, useNavigate } from "react-router-dom"; import "./SignUpChoose.scss"; import Radio from "./../../components/Radio"; +import axios from "axios"; const SignUpChoose = () => { const location = useLocation(); - // const userType = location.state.userType; + const userType = location.state.userType; const navigate = useNavigate(); + + // 회원가입 입력 값 const [email, setEmail] = useState(""); const [emailCheck, setEmailCheck] = useState(""); const [password, setPassword] = useState(""); @@ -20,6 +23,7 @@ const SignUpChoose = () => { secNum: "", thrNum: "", }); + const [authenticationCode, setAuthenticationCode] = useState(""); // console.log(userType); @@ -28,6 +32,7 @@ const SignUpChoose = () => { const passwordInput = useRef(); const passwordConfirmInput = useRef(); const nameInput = useRef(); + const birthinput = useRef(); const genderInput = useRef(); const phoneNumInput_1 = useRef(); const phoneNumInput_2 = useRef(); @@ -53,6 +58,56 @@ const SignUpChoose = () => { const [nameMessage, setNameMessage] = useState(""); const [genderMessage, setGenderMessage] = useState(""); + //API 회원가입 + const registeraxios = () => { + const config = { "Content-Type": "application/json" }; + axios + .post( + "http://wazard.shop:9000/account/join", + { + email: email, + password: password, + userName: name, + gender: gender, + birth: birth, + phoneNumber: `${phoneNumber.fstNum}-${phoneNumber.secNum}-${phoneNumber.thrNum}`, + role: userType, + }, + config + ) + .then((response) => { + console.log(response); + alert("회원가입성공"); + if ((response.status = 200)) { + return navigate(-1); + } + }) + .catch((err) => { + alert("회원가입이 되지 않았습니다."); + console.log(err); + }); + }; + //API 이메일 인증 + const emailauth = () => { + const config = { "Content-Type": "application/json" }; + axios + .post( + "http://wazard.shop:9000/mail/auth", + { + email: email, + }, + config + ) + .then((response) => { + setEmailMessage("이메일을 전송하였습니다."); + setAuthenticationCode(response.data.authenticationCode); + }) + .catch((err) => { + setEmailMessage("이메일 전송에 실패하였습니다."); + // console.log(err); + }); + }; + const onEmailHandler = (e) => { const currentEmail = e.target.value; setEmail(currentEmail); @@ -146,17 +201,25 @@ const SignUpChoose = () => { setIsPhoneNum_3(currentPhoneNum.length === 4); }; + //이메일 코드 전송 const handledClickEmailBtn = (e) => { if (isEmail === false) { setEmailMessage("이메일형식이 올바르지 않습니다."); } else { setEmailMessage(""); + // alert("이메일 전송 완료 (api실행 x)"); + emailauth(); } }; + // 이메일 인증 코드 확인 const handledClickEmailCheckBtn = (e) => { - // 인증 번호 확인 - setEmailCheckMessage("인증번호가 올바르지 않습니다."); + if (authenticationCode !== "" && emailCheck === authenticationCode) { + setIsEmailCheck(true); + setEmailCheckMessage("✅ 이메일 인증이 성공적으로 완료되었습니다."); + } else { + setEmailCheckMessage("인증번호가 올바르지 않습니다."); + } }; const onSubmitHandler = (event) => { @@ -165,15 +228,34 @@ const SignUpChoose = () => { } else { setGenderMessage(""); } + if ( + isEmail === true && + isEmailCheck === true && + isConfirmPassword == true && + isName === true && + isGender === true && + isBirth === true + ) { + alert("회원가입 완료"); + // console.log({ + // email: email, + // password: password, + // userName: name, + // gender: gender, + // birth: birth, + // phoneNumber: `${phoneNumber.fstNum}-${phoneNumber.secNum}-${phoneNumber.thrNum}`, + // role: userType, + // }); + // registeraxios(); + event.preventDefault(); + } if (isEmail === false) { emailInput.current.focus(); return; - } - // else if (isEmailCheck === false) { - // emailCheckInput.current.focus(); - // return; - // } - else if (isPassword === false) { + } else if (isEmailCheck === false) { + emailCheckInput.current.focus(); + return; + } else if (isPassword === false) { passwordInput.current.focus(); return; } else if (isConfirmPassword === false) { @@ -182,6 +264,8 @@ const SignUpChoose = () => { } else if (isName === false) { nameInput.current.focus(); return; + } else if (isBirth === false) { + birthinput.current.focus(); } else if (isPhoneNum_1 === false) { phoneNumInput_1.current.focus(); return; @@ -192,7 +276,6 @@ const SignUpChoose = () => { phoneNumInput_3.current.focus(); return; } - event.preventDefault(); // let body = { // email: email, @@ -228,7 +311,7 @@ const SignUpChoose = () => { ref={emailInput} type="email" value={email} - placeholder="test@email.com" + placeholder="wazard123@email.com" onChange={onEmailHandler} />{" "} -

{emailMessage}

+ {isEmail ? ( +

{emailMessage}

+ ) : ( +

{emailMessage}

+ )} +
- {" "} + {" "}
-

{emailCheckMessage}

+ {isEmailCheck ? ( +

{emailCheckMessage}

+ ) : ( +

{emailCheckMessage}

+ )} +
@@ -291,7 +389,7 @@ const SignUpChoose = () => {
남성 @@ -300,7 +398,7 @@ const SignUpChoose = () => {
여성 @@ -314,10 +412,12 @@ const SignUpChoose = () => {
{ setBirth(e.target.value); + setIsBirth(true); }} />
diff --git a/src/pages/main/SignUpChoose.scss b/src/pages/main/SignUpChoose.scss index cf24772..8063334 100644 --- a/src/pages/main/SignUpChoose.scss +++ b/src/pages/main/SignUpChoose.scss @@ -147,6 +147,12 @@ width: 100vh; font-size: 13px; } +.message-succes { + color: #424242; + margin-left: 50px; + width: 100vh; + font-size: 13px; +} // button .button_send { diff --git a/src/redux-toolkit/albaModule/AlbaWaitListSlice.js b/src/redux-toolkit/albaModule/AlbaWaitListSlice.js new file mode 100644 index 0000000..e4cf836 --- /dev/null +++ b/src/redux-toolkit/albaModule/AlbaWaitListSlice.js @@ -0,0 +1,32 @@ +import { createSlice } from "@reduxjs/toolkit"; + +// 수정 필요 +let nextId = 0; +const initialValue = [ + { + alba_id: 0, + company_id: 1, + user_id: 0, + user_name: "김민규", + email: "hello123@naver.com", + code: "24DW4Y89", + state: "대기", + }, + { + alba_id: 1, + company_id: 1, + user_id: 1, + user_name: "윤서영", + email: "seoyoung7623@naver.com", + code: "DE32S5DU", + state: "거절", + }, +]; + +export const albaWaitListSlice = createSlice({ + name: "alba_waitlist", + initialState: initialValue, + reducers: {}, +}); + +export default albaWaitListSlice.reducer; diff --git a/src/redux-toolkit/store.js b/src/redux-toolkit/store.js index b74b61a..6435c8c 100644 --- 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 { albaWaitListSlice } from "./albaModule/AlbaWaitListSlice"; const store = configureStore({ reducer: { @@ -19,6 +20,7 @@ const store = configureStore({ alba_record: AlbaRecordListSlice.reducer, alba_attendance: AlbaAttendance.reducer, alba_replace: AlbaReplaceSlice.reducer, + alba_waitlist: albaWaitListSlice.reducer, }, }); diff --git a/src/style/company/company.scss b/src/style/company/company.scss index 1c8fc42..199b5a4 100644 --- a/src/style/company/company.scss +++ b/src/style/company/company.scss @@ -363,6 +363,68 @@ } } } + .waitlist-wrapper { + margin: 30px; + .waitlist-main { + display: flex; + align-items: center; + } + + .waitlist-set { + background-color: rgba(17, 26, 215, 0.05); + width: 900px; + height: 100px; + display: flex; + justify-content: center; + align-items: center; + margin: 10px; + border-radius: 20px; + .waitlist-things { + display: flex; + .waitlist-one { + width: 150px; + font-size: 18px; + .value { + margin-right: 10px; + font-weight: bold; + } + } + .email { + width: 320px; + } + .inviteCode { + width: 200px; + } + } + .invite-state { + .state { + font-size: 20px; + padding: 3px 10px 3px 10px; + border-radius: 8px; + } + .wait { + border: 2px solid green; + color: green; + } + .disagee { + border: 2px solid #ff4343; + color: #ff4343; + } + } + } + .contract-wrapper { + button { + background-color: #4a52ff; + height: 100px; + padding: 10px; + border: none; + border-radius: 15px; + font-size: 14px; + width: 60px; + color: #ffffff; + } + } + } } // QR 조회 화면 -> 알바생 출퇴근 기록 화면