Merge pull request #85 from haruharuganda/passwordChange

dong-fa · web-flow · commit 882c003dc362 · 2023-03-01T17:03:16.000+09:00
Feat. authenticationNumber #78 이메일 인증 기능,CSS완성 3차
diff --git a/src/api/UserApi.jsx b/src/api/UserApi.jsx
@@ -1,3 +1,4 @@
+import { async } from "q";
 import { instance } from "../shared/AxiosInstance";
 
 export const UserApi = {
@@ -9,7 +10,11 @@ export const UserApi = {
     return data;
   },
   editProfile: async (payload) => {
-    const data = instance.patch("users/profile", payload);
+    const data = await instance.patch("users/profile", payload);
+    return data;
+  },
+  passwordChange: async (payload) => {
+    const { data } = await instance.patch("/auth/password", payload);
     return data;
   },
 };
diff --git a/src/components/login/EmailLogin.jsx b/src/components/login/EmailLogin.jsx
@@ -136,7 +136,6 @@ const EmailLogin = () => {
     window.location.href = KAKAO_AUTH_URL;
   };
 
-  console.log({ style });
   return (
     <div className="container h-full md ">
       <div className="ml-[20px] mr-[20px] ">
diff --git a/src/components/login/InputEmail.jsx b/src/components/login/InputEmail.jsx
@@ -4,54 +4,82 @@ 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";
 
 const InputEmail = () => {
+  const navigator = useNavigate();
   const emailRef = useRef();
   const authenticationNumberRef = useRef();
+  const emailRegulationExp =
+    /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
+
   const [style, setStyle] = useState({
     bgColorEmail: "bg-inputBox",
     shadowEmail: "",
     bgColorAuthenticationNumber: "bg-inputBox",
     shadowAuthenticationNumber: "",
   });
-  const [regulation, setRegulation] = useState("");
+  const [regulation, SetRegulation] = useState({
+    emailError: "",
+    authenticationNumberError: "",
+  });
   const [isOpen, setOpen] = useState(false);
   const [ModalStr, setModalStr] = useState({
     modalTitle: "",
     modalMessage: "",
   });
   const [isLoding, setIsLoding] = useState(false);
-  const [InputCheck, setInputCheck] = useState(false);
+  const [InputCheck, setInputCheck] = useState({ input: false, modal: false });
+
   const onModalOpen = () => {
     setOpen({ isOpen: true });
   };
   const onMoalClose = () => {
     setOpen({ isOpen: false });
+    if (InputCheck.modal) {
+      navigator("/ChangePassword");
+    }
   };
 
   const onInputColor = (event) => {
-    const { id, value } = event.target;
+    const { id } = event.target;
+    const emailRefCurrent = emailRef.current;
+    const authenticationNumberRefCurrent = authenticationNumberRef.current;
     if (id === "email") {
       console.log("email입니다");
       setStyle(() => ({
         ...style,
         bgColorEmail: "bg-inputBoxFocus",
         shadowEmail: "drop-shadow-inputBoxShadow",
       }));
-      if (value.trim() === "") {
+      if (emailRefCurrent.value.trim() === "") {
         setStyle(() => ({
           ...style,
           bgColorEmail: "bg-inputBox",
           shadowEmail: "",
         }));
       }
+      if (emailRegulationExp.test(emailRefCurrent.value)) {
+        SetRegulation(() => ({
+          ...regulation,
+          emailError: "",
+        }));
+      } else {
+        SetRegulation(() => ({
+          ...regulation,
+          emailError: "올바른 이메일 형식이 아닙니다.",
+        }));
+
+        emailRefCurrent.focus();
+        return;
+      }
     } else {
       setStyle(() => ({
         ...style,
         bgColorAuthenticationNumber: "bg-inputBoxFocus",
         shadowAuthenticationNumber: "drop-shadow-inputBoxShadow",
       }));
-      if (value.trim() === "") {
+      if (authenticationNumberRefCurrent.value.trim() === "") {
         setStyle(() => ({
           ...style,
           bgColorAuthenticationNumber: "bg-inputBox",
@@ -64,10 +92,19 @@ const InputEmail = () => {
   const onSendEmail = () => {
     const email = emailRef.current;
     if (email.value.trim() === "") {
-      setRegulation(() => "이메일을 입력해주세요");
+      SetRegulation(() => ({
+        ...regulation,
+        emailError: "이메일을 입력해주세요",
+      }));
+      email.focus();
+      return;
     } else {
-      setRegulation(() => "");
+      SetRegulation(() => ({
+        ...regulation,
+        emailError: "",
+      }));
     }
+
     sendEmail({ email: email.value });
   };
 
@@ -77,11 +114,15 @@ const InputEmail = () => {
       onModalOpen();
       const data = await LoginApi.SendEmailAuthenticationNumber(payload);
       setIsLoding(() => false);
-      setModalStr({
-        modalTitle: "이메일함을 확인해주세요",
-        modalMessage: "인증번호를 입력해주세요",
-      });
-      setInputCheck(() => true);
+      console.log(data);
+      if (data.status === 200) {
+        sessionStorage.setItem("changePasswordEmail", payload.email);
+        setModalStr({
+          modalTitle: "이메일함을 확인해주세요",
+          modalMessage: "인증번호를 입력해주세요",
+        });
+        setInputCheck(() => ({ ...InputCheck, input: true }));
+      }
     } catch (error) {
       console.log(error.response);
       const { data } = error.response;
@@ -100,16 +141,34 @@ const InputEmail = () => {
     const authenticationNumber = authenticationNumberRef.current;
 
     if (email.value.trim() === "") {
-      setRegulation(() => "이메일을 입력해주세요");
+      SetRegulation(() => ({
+        ...regulation,
+        emailError: "이메일을 입력해주세요",
+      }));
       email.focus();
       return;
-    } else if (authenticationNumber.value.trim() === "") {
-      setRegulation(() => "인증번호를 입력해주세요");
+    } else {
+      SetRegulation(() => ({
+        ...regulation,
+        emailError: "",
+      }));
+    }
+
+    if (authenticationNumber.value.trim() === "") {
+      SetRegulation(() => ({
+        ...regulation,
+        authenticationNumberError: "인증번호를 입력해주세요",
+      }));
       authenticationNumber.focus();
       return;
+    } else {
+      SetRegulation(() => ({
+        ...regulation,
+        authenticationNumberError: "",
+      }));
     }
 
-    if (InputCheck) {
+    if (InputCheck.input) {
       onSubmitNextPageAxios({
         email: email.value,
         code: authenticationNumber.value,
@@ -121,18 +180,27 @@ const InputEmail = () => {
     try {
       setIsLoding(() => true);
       onModalOpen();
-      const data = await LoginApi.SendAuthenticationNumber(payload);
+      const { data } = await LoginApi.SendAuthenticationNumber(payload);
       setIsLoding(() => false);
       console.log(data);
+      if (data.status === 200) {
+        setModalStr({
+          ...ModalStr,
+          modalTitle: data.message,
+          modalMessage: "",
+        });
+        setInputCheck(() => ({ ...InputCheck, modal: true }));
+      }
     } catch (error) {
       console.log(error.response);
       const { data } = error.response;
       if (data.status === 400) {
         setIsLoding(() => false);
-        setModalStr({
+        setModalStr(() => ({
+          ...ModalStr,
           modalTitle: "인증번호 실패",
           modalMessage: `인증번호가 잘못 입력되었습니다. \n 인증요청을 재시도 해주세요.`,
-        });
+        }));
       }
     }
   };
@@ -157,14 +225,18 @@ const InputEmail = () => {
               />
               <div
                 onClick={onSendEmail}
+<<<<<<< Updated upstream
                 className=" bg-[#FFFFFF] flex items-center h-[50px] p-[5px] border-solid border-2 text-[16px] font-[600] border-[#002C51] rounded-[4px] leading-[28px] cursor-pointer"
+=======
+                className="bg-[#FFFFFF] h-[50px] flex items-center border-solid border-2 text-[16px] font-[600] border-[#002C51] p-[5px] rounded-[4px] cursor-pointer"
+>>>>>>> Stashed changes
               >
                 인증 요청
               </div>
             </div>
             <div className="flex items-center h-[20px]">
               <p className=" w-full font-[500] text-[16px]  text-[#DE0D0D] flex items-center">
-                {regulation}
+                {regulation.emailError}
               </p>
             </div>
             <div className="h-[full]">
@@ -178,6 +250,11 @@ const InputEmail = () => {
                 ref={authenticationNumberRef}
               />
             </div>
+            <div className="flex items-center h-[20px]">
+              <p className=" w-full font-[500] text-[16px]  text-[#DE0D0D] flex items-center">
+                {regulation.authenticationNumberError}
+              </p>
+            </div>
           </div>
           <div>
             <button
diff --git a/src/redux/modules/LoginSlice.jsx b/src/redux/modules/LoginSlice.jsx
@@ -108,6 +108,9 @@ const LoginSlice = createSlice({
     setMessage: (state, action) => {
       state.message = action.payload;
     },
+    setEmail: (state, action) => {
+      state.email = action.payload;
+    },
   },
   extraReducers: {
     //카카오 소셜로그인
diff --git a/src/shared/Router.jsx b/src/shared/Router.jsx
@@ -22,9 +22,9 @@ import ProfileEditPage from "../page/ProfileEditPage";
 import InfiniteScroll from "../components/main/InfiniteScroll";
 import PastEventsPage from "../page/PastEventsPage";
 import UserSearchPage from "../page/UserSearchPage";
-import ScheduleEditPage from "../page/ScheduleEditPage";
 import InputEmailPage from "../page/InputEmailPage";
 import FriendsMain from "../components/main/FriendsMain";
+import ChangePasswordPage from "../page/ChangePasswordPage";
 
 const Router = () => {
   return (
@@ -69,6 +69,7 @@ const Router = () => {
           <Route path="/follow" element={<FollowPage />} />
           <Route path="/pastEvents" element={<PastEventsPage />} />
           <Route path="/editProfile" element={<ProfileEditPage />} />
+          <Route path="/ChangePassword" element={<ChangePasswordPage />} />
           {/* 알람 */}
           <Route path="/notification" element={<NotificationsPage />} />
 
