Merge pull request #79 from TeamWazard/feat/#75

[Feat/#75] 고용주화면 - 초대 대기 목록 조회
TeamWazard · Jun 4, 2023 · 12795c0 · 12795c0
2 parents 2ed35b2 + 1f16d15
commit 12795c0
Show file tree

Hide file tree

Showing 7 changed files with 286 additions and 24 deletions.
diff --git 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: "[email protected]",
+      code: "24DW4Y89",
+      state: "대기",
+    },
+    {
+      id: 1,
+      name: "윤서영",
+      email: "[email protected]",
+      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 = () => {
             <h2>알바생 초대</h2>
           </div>
           <div className="main">
-            <h3>
+            {/* <h3>
               초대할 알바생의 <b>email 주소</b>를 입력하세요.
-            </h3>
+            </h3> */}
             <div className="emailform">
-              <div className="email-wrapper">
+              {/* <div className="email-wrapper">
                 <input
                   type="email"
                   value={userEmail}
@@ -54,12 +74,52 @@ const CompanyInvite = () => {
                   }}
                   placeholder="ex) [email protected] ..."
                 />
-              </div>
+              </div> */}
               <div className="btn-wrapper">
-                <button onClick={handlesubmit}>초대하기</button>
+                <button>초대하기</button>
               </div>
             </div>
           </div>
+          <div className="waitlist-container">
+            <div className="title">
+              <h2>초대 대기 목록</h2>
+            </div>
+            <div className="waitlist-wrapper">
+              {alba_waitlist.map((user) => (
+                <div className="waitlist-main">
+                  <div className="waitlist-set">
+                    <div className="waitlist-things">
+                      <div className="name waitlist-one">
+                        <label className="value">이름</label>
+                        <label>{user.user_name}</label>
+                      </div>
+                      <div className="email waitlist-one">
+                        <label className="value">이메일</label>
+                        <label>{user.email}</label>
+                      </div>
+                      <div className="inviteCode waitlist-one">
+                        <label className="value">초대코드</label>
+                        <label>{user.code}</label>
+                      </div>
+                    </div>
+                    <div className="invite-state">
+                      {user.state === "대기" && (
+                        <label className="wait state">대기</label>
+                      )}
+                      {user.state === "거절" && (
+                        <label className="disagee state">거절</label>
+                      )}
+                    </div>
+                  </div>
+                  {user.state == "거절" && (
+                    <div className="contract-wrapper">
+                      <button>계약정보 수정</button>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
       </div>
     </div>

diff --git 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
@@ -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,25 +311,40 @@ const SignUpChoose = () => {
               ref={emailInput}
               type="email"
               value={email}
-              placeholder="test@email.com"
+              placeholder="wazard123@email.com"
               onChange={onEmailHandler}
             />{" "}
             <button className="button_send" onClick={handledClickEmailBtn}>
               {" "}
               이메일 인증
             </button>
           </div>
-          <p className="message">{emailMessage}</p>
+          {isEmail ? (
+            <p className="message-succes">{emailMessage}</p>
+          ) : (
+            <p className="message">{emailMessage}</p>
+          )}
+
           <div className="Form">
             <div className="registerLabel">
               <label>이메일 인증번호</label>
             </div>
-            <input ref={emailCheckInput} className="refisterInputInBtn" />{" "}
+            <input
+              ref={emailCheckInput}
+              className="refisterInputInBtn"
+              onChange={onEmailCheckHandler}
+              value={emailCheck}
+            />{" "}
             <button className="button_send" onClick={handledClickEmailCheckBtn}>
               인증 확인
             </button>
           </div>
-          <p className="message">{emailCheckMessage}</p>
+          {isEmailCheck ? (
+            <p className="message-succes">{emailCheckMessage}</p>
+          ) : (
+            <p className="message">{emailCheckMessage}</p>
+          )}
+
           <div className="Form">
             <div className="registerLabel">
               <label>비밀번호</label>
@@ -291,7 +389,7 @@ const SignUpChoose = () => {
               <div className="gender_male">
                 <Radio
                   name="genderCheck"
-                  value="male"
+                  value="MALE"
                   onHandler={onGenderHandler}
                 >
                   남성
@@ -300,7 +398,7 @@ const SignUpChoose = () => {
               <div className="gender_female">
                 <Radio
                   name="genderCheck"
-                  value="female"
+                  value="FEMALE"
                   onHandler={onGenderHandler}
                 >
                   여성
@@ -314,10 +412,12 @@ const SignUpChoose = () => {
               <label>생년 월 일</label>
             </div>
             <input
+              ref={birthinput}
               type="date"
               value={birth}
               onChange={(e) => {
                 setBirth(e.target.value);
+                setIsBirth(true);
               }}
             />
           </div>

diff --git 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 {