Feat. authenticationNumber #78 비밀번호 변경 완료

Feat. authenticationNumber #78 비밀번호 변경 완료

Author: dong-fa

src/api/LoginApi.jsx

@@ -11,7 +11,8 @@ export const LoginApi = {
   },
 
   SendEmailAuthenticationNumber: async (payload) => {
-    return await instance.post("/auth/password", payload);
+    console.log(payload);
+    return await instance.post("/auth/password", { email: payload });
   },
 
   SendAuthenticationNumber: async (payload) => {

src/components/login/EmailLogin.jsx

@@ -6,12 +6,11 @@ import { KAKAO_AUTH_URL } from "../../shared/OAuth";
 import KakaoLogin from "./KakaoLogin";
 import "../style/login.css";
 import { __emailLogin } from "../../redux/modules/LoginSlice";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import NaverLogin from "../../page/NaverLoginPage";
 import Label from "../layout/Label";
 import LoginSignupInputBox from "../layout/input/LoginSignupInputBox";
 import gnimsLogo from "../../img/gnimslogo1.png";
-import { EventSourcePolyfill } from "event-source-polyfill";
 import { __closeModal } from "../../redux/modules/SingupSlice";
 
 const EmailLogin = () => {
@@ -200,7 +199,7 @@ const EmailLogin = () => {
             <div className="border-black border-solid border-r-[1px]">
               <button
                 className="text-textBlack text-[16px] font-[400] px-[30px] pr-[37px]"
-                onClick={() => navigate("/developing")}
+                onClick={() => navigate("/login/auth/InputEmail")}
               >
                 비밀번호 재설정
               </button>

src/components/login/InputEmail.jsx

@@ -3,15 +3,24 @@ import Label from "../layout/Label";
 import LoginSignupInputBox from "../layout/input/LoginSignupInputBox";
 import IsModal from "../modal/Modal";
 import { useRef } from "react";
-import { LoginApi } from "../../api/LoginApi";
 import { useNavigate } from "react-router";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  __sendEmail,
+  __NextPage,
+  resetCheck,
+} from "../../redux/modules/LoginSlice";
+import { __openModal, __closeModal } from "../../redux/modules/SingupSlice";
+import { useEffect } from "react";
 
 const InputEmail = () => {
   const navigator = useNavigate();
+  const dispatch = useDispatch();
+
   const emailRef = useRef();
   const authenticationNumberRef = useRef();
-  const emailRegulationExp =
-    /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
+
+  const { isLoading } = useSelector((state) => state.LoginSlice);
 
   const [style, setStyle] = useState({
     bgColorEmail: "bg-inputBox",
@@ -21,40 +30,38 @@ const InputEmail = () => {
     emailError: "",
     authenticationNumberError: "",
   });
-  const [isOpen, setOpen] = useState(false);
   const [ModalStr, setModalStr] = useState({
     modalTitle: "",
     modalMessage: "",
   });
-  const [isLoding, setIsLoding] = useState(false);
-  const [InputCheck, setInputCheck] = useState({ input: false, modal: false });
 
-  const onModalOpen = () => {
-    setOpen({ isOpen: true });
-  };
+  const { emailCheck, authenticationNumberCheck } = useSelector(
+    (state) => state.LoginSlice.check
+  );
   const onMoalClose = () => {
-    setOpen({ isOpen: false });
-    if (InputCheck.modal) {
+    dispatch(__closeModal());
+    if (authenticationNumberCheck) {
       navigator("/ChangePassword");
     }
   };
 
   const onInputColor = (event) => {
-    const { id } = event.target;
-    const emailRefCurrent = emailRef.current;
-    const authenticationNumberRefCurrent = authenticationNumberRef.current;
+    const { id, value } = event.target;
+    const emailRegulationExp =
+      /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
+
     if (id === "email") {
       setStyle(() => ({
         ...style,
         bgColorEmail: "bg-inputBoxFocus",
       }));
-      if (emailRefCurrent.value.trim() === "") {
+      if (value === "") {
         setStyle(() => ({
           ...style,
           bgColorEmail: "bg-inputBox",
         }));
       }
-      if (emailRegulationExp.test(emailRefCurrent.value)) {
+      if (emailRegulationExp.test(value)) {
         SetRegulation(() => ({
           ...regulation,
           emailError: "",
@@ -64,20 +71,20 @@ const InputEmail = () => {
           ...regulation,
           emailError: "올바른 이메일 형식이 아닙니다.",
         }));
-
-        emailRefCurrent.focus();
+        event.target.focus();
         return;
       }
     } else {
-      setStyle(() => ({
-        ...style,
-        bgColorAuthenticationNumber: "bg-inputBoxFocus",
-      }));
-      if (authenticationNumberRefCurrent.value.trim() === "") {
+      if (value.trim() === "") {
         setStyle(() => ({
           ...style,
           bgColorAuthenticationNumber: "bg-inputBox",
         }));
+      } else {
+        setStyle(() => ({
+          ...style,
+          bgColorAuthenticationNumber: "bg-inputBoxFocus",
+        }));
       }
     }
   };
@@ -98,33 +105,14 @@ const InputEmail = () => {
       }));
     }
 
-    sendEmail({ email: email.value });
-  };
-
-  const sendEmail = async (payload) => {
-    try {
-      setIsLoding(() => true);
-      onModalOpen();
-      const data = await LoginApi.SendEmailAuthenticationNumber(payload);
-      setIsLoding(() => false);
-      if (data.status === 200) {
-        sessionStorage.setItem("changePasswordEmail", payload.email);
-        setModalStr({
-          modalTitle: "이메일함을 확인해주세요",
-          modalMessage: "인증번호를 입력해주세요",
-        });
-        setInputCheck(() => ({ ...InputCheck, input: true }));
-      }
-    } catch (error) {
-      const { data } = error.response;
-      if (data.status === 400) {
-        setIsLoding(() => false);
-        setModalStr({
-          modalTitle: data.message,
-          modalMessage: "이메일을 확인해주세요.",
-        });
-      }
-    }
+    dispatch(
+      __sendEmail({
+        email: email.value,
+        dispatch: dispatch,
+        setModalStr: setModalStr,
+      })
+    );
+    dispatch(__openModal(dispatch));
   };
 
   const onSubmitNextPage = () => {
@@ -138,14 +126,17 @@ const InputEmail = () => {
       }));
       email.focus();
       return;
+    } else if (regulation.emailError) {
+      email.focus();
+      return;
     } else {
       SetRegulation(() => ({
         ...regulation,
         emailError: "",
       }));
     }
 
-    if (authenticationNumber.value.trim() === "") {
+    if (authenticationNumber.value === "") {
       SetRegulation(() => ({
         ...regulation,
         authenticationNumberError: "인증번호를 입력해주세요",
@@ -158,43 +149,32 @@ const InputEmail = () => {
         authenticationNumberError: "",
       }));
     }
-
-    if (InputCheck.input) {
-      onSubmitNextPageAxios({
-        email: email.value,
-        code: authenticationNumber.value,
-      });
-    }
-  };
-
-  const onSubmitNextPageAxios = async (payload) => {
-    try {
-      setIsLoding(() => true);
-      onModalOpen();
-      const { data } = await LoginApi.SendAuthenticationNumber(payload);
-      setIsLoding(() => false);
-
-      if (data.status === 200) {
-        setModalStr({
-          ...ModalStr,
-          modalTitle: data.message,
-          modalMessage: "",
-        });
-        setInputCheck(() => ({ ...InputCheck, modal: true }));
-      }
-    } catch (error) {
-      const { data } = error.response;
-      if (data.status === 400) {
-        setIsLoding(() => false);
-        setModalStr(() => ({
-          ...ModalStr,
-          modalTitle: "인증번호 실패",
-          modalMessage: `인증번호가 잘못 입력되었습니다. \n 인증요청을 재시도 해주세요.`,
-        }));
-      }
+    console.log(authenticationNumberCheck);
+    if (emailCheck && !authenticationNumberCheck) {
+      console.log("안녕");
+      dispatch(
+        __NextPage({
+          email: email.value,
+          code: authenticationNumber.value,
+          dispatch: dispatch,
+          setModalStr: setModalStr,
+        })
+      );
+    } else if (!emailCheck) {
+      SetRegulation(() => ({
+        ...regulation,
+        emailError: "이메일 중복확인을 해주세요.",
+      }));
+      email.focus();
     }
   };
 
+  useEffect(() => {
+    return () => {
+      dispatch(resetCheck());
+      console.log(emailCheck);
+    };
+  }, []);
   return (
     <div className="container ">
       <div className=" grid grid-flow-row ml-[20px] mr-[20px] mt-[55px]">
@@ -251,10 +231,9 @@ const InputEmail = () => {
           </div>
         </div>
         <IsModal
-          isModalOpen={isOpen.isOpen}
           onMoalClose={onMoalClose}
           message={{ ModalStr }}
-          isLoding={isLoding}
+          isLoding={isLoading}
         />
       </div>
     </div>

src/components/modal/Modal.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import Modal from "react-modal";
 import MoonLoader from "react-spinners/MoonLoader";
 import { useSelector } from "react-redux";
+import { useLayoutEffect } from "react";
 const IsModal = ({ onMoalClose, message, isLoding }) => {
   const modalStr = message.ModalStr;
   const modalState = useSelector((state) => state.SingupSlice.modal);
@@ -16,7 +17,6 @@ const IsModal = ({ onMoalClose, message, isLoding }) => {
       alignItems: "center",
       backgroundColor: "#53535339",
       zIndex: 10,
-      // width: "375px",
     },
     content: {
       justifyContent: "center",
@@ -33,6 +33,7 @@ const IsModal = ({ onMoalClose, message, isLoding }) => {
       padding: "16px",
     },
   };
+
   return (
     <Modal
       isOpen={modalState.isOpen}
@@ -42,7 +43,7 @@ const IsModal = ({ onMoalClose, message, isLoding }) => {
         labelledby: "heading",
         describedby: "full_description",
       }}
-      shouldCloseOnEsc={false}
+      shouldCloseOnEsc={true}
     >
       <div className="grid grid-flow-row gap-[20px] text-center">
         {isLoding ? (