[Update] Modal-Edit (수정중)

teamDogpaw · Jul 31, 2022 · f1f450c · f1f450c
1 parent 7824e4a
commit f1f450c
Show file tree

Hide file tree

Showing 11 changed files with 181 additions and 83 deletions.
diff --git a/src/App.js b/src/App.js
@@ -19,10 +19,10 @@ function App() {
   const token = localStorage.getItem("token");
   const [user, setUser] = useRecoilState(UserInfoAtom);
 
-  console = {};
-  console.log = function(){};
-  console.warn = function(){};
-  console.error = function(){};
+  // console = {};
+  // console.log = function(){};
+  // console.warn = function(){};
+  // console.error = function(){};
 
   const GetUserInfo = async () => {
     if (token) {

diff --git a/src/api/user.js b/src/api/user.js
@@ -1,11 +1,11 @@
 import instance from "../shared/axios";
 
 export const userApis = {
+  login: async (data) => await instance.post(`/user/login`,data),
   signUp: async (data) => await instance.post(`/user/signup`, data),
   postApply: async (postId) => await instance.post(`/api/apply/${postId}`),
   putMyProfile: async (formData) => await instance.put(`/api/user/info`, formData, {
-      headers: { "Content-Type": "multipart/form-data" },
-    }),
+      headers: { "Content-Type": "multipart/form-data" }}),
   putMyProfileReset: async () => await instance.put(`/api/user/profile/basic`),
   withdrawParticipate: async (postId) =>
     await instance.delete(`/api/withdraw/team/${postId}`),

diff --git a/src/components/AlertModal.js b/src/components/AlertModal.js
@@ -1,13 +1,35 @@
 import styled, { css, keyframes } from "styled-components";
+import { Btn, GrayLineBtn, ModalBtn } from "../styles/style";
+import { Content } from "./ApplyBtn";
 
-const AlertModal = (props) => {
+const AlertModal = ({open, message, setAlertModalOpen, actionMessage, action}) => {
   ////console.log(props)
-  const { open } = props;
+  // const { open } = props;
+  // console.log(props)
   return (
     <Wrap open={open}>
       {open && (
         <Section>
-          <main>{props.children}</main>
+          <Content>
+          {message}
+          <div style={{ marginTop:"10px", display:"flex", gap:"10px"}}>
+            {!actionMessage ? 
+            <ModalBtn onClick={()=>setAlertModalOpen(false)}>
+            확인 
+            </ModalBtn> : 
+            <>
+            <GrayLineBtn onClick={()=>setAlertModalOpen(false)}>취소</GrayLineBtn>
+            <ModalBtn onClick={action}>
+              {actionMessage}
+              </ModalBtn>
+            </>
+
+
+
+              }
+
+          </div>
+          </Content>
         </Section>
       )}
     </Wrap>
@@ -53,7 +75,7 @@ const ModalBgShow = keyframes`
 
 `;
 
-const Section = styled.section`
+export const Section = styled.section`
   height:200px;
   margin: 0 auto;
   display:flex;

diff --git a/src/components/ApplyBtn.js b/src/components/ApplyBtn.js
@@ -25,12 +25,14 @@ const ApplyBtn = ({ myPostData }) => {
   const applyBtn = async () => {
    if (userStatus === "applicant") {
         await apply(id);
-        setModalOpen(false);
-      } else {
+        setModalOpen(true);
+        queryClient.invalidateQueries("detailPost");
+      } 
+      if (userStatus === "MEMBER") {
         await apply(id);
-        openApplyModal();
+        console.log('dhodkseho')
       }
-    queryClient.invalidateQueries("detailPost");
+
   };
 
   const deadlineBtn = async () => {
@@ -49,14 +51,17 @@ const ApplyBtn = ({ myPostData }) => {
     setModalOpen(false);
   };
 
-  const openApplyModal = () => {
+  const openApplyModal = () =>{
     setApplyModal(true);
+    applyBtn()
   }
 
   const closeApplyModal = () => {
     setApplyModal(false);
+queryClient.invalidateQueries("detailPost");
   }
 
+
   return (
     <Wrap>
       {userStatus === "author" && (
@@ -84,10 +89,10 @@ const ApplyBtn = ({ myPostData }) => {
           <Alert>
             <p>{applierCnt}명이 지원했어요!</p>
           </Alert>
-        )}
+        )} 
         {deadline === false ? (
           userStatus === "MEMBER" ? (
-            <Button onClick={applyBtn}>프로젝트 지원하기</Button>
+            <Button onClick={openApplyModal}>프로젝트 지원하기</Button>
           ) : userStatus === "applicant" ? (
             <Button onClick={openModal}>지원 취소하기</Button>
           ) : (
@@ -99,24 +104,18 @@ const ApplyBtn = ({ myPostData }) => {
           )
         )}
       </div>
-      <AlertModal open={modalOpen}>
-        <Content>
-          <h4>프로젝트 지원을 취소하시겠습니까?</h4>
-          <div>
-            <GrayLineBtn onClick={closeModal}> 닫기 </GrayLineBtn>
-            <Btn onClick={applyBtn}> 지원취소 </Btn>
-          </div>
-        </Content>
-      </AlertModal>
-
-      <AlertModal open={applyModal}>
-        <Content>
-          <h4>프로젝트 지원 완료!</h4>
-          <div>
-            <Btn onClick={closeApplyModal}> 확인 </Btn>
-          </div>
-        </Content>
-      </AlertModal>
+      <AlertModal 
+      open={modalOpen} 
+      setAlertModalOpen={closeModal} 
+      message={"프로젝트 지원을 취소하시겠습니까?"} 
+      action={applyBtn} 
+      actionMessage={"지원취소"}/>
+
+      <AlertModal 
+      open={applyModal} 
+      setAlertModalOpen={closeApplyModal} 
+      message={"프로젝트 지원 완료!"} />
+
       {viewApply && (
         <ViewApply viewApplyModal={viewApplyModal} myPostData={myPostData} />
       )}
@@ -210,7 +209,7 @@ export const Content = styled.div`
   }
   button {
     width: 100px;
-    margin-right: 10px;
+    
   }
 
   @media screen and (max-width: 500) {

diff --git a/src/components/Login.js b/src/components/Login.js
@@ -7,10 +7,15 @@ import { Btn } from "../styles/style";
 import { login } from "../shared/userOauth";
 import { useSetRecoilState } from "recoil";
 import { modalContentAtom } from "../atom/atom";
+import { userApis } from "../api/user";
+import Loading from "../shared/Loading";
+import AlertModal from "../components/AlertModal";
 
 const Login = () => {
   const setModalContent = useSetRecoilState(modalContentAtom);
-
+  const [alertModalOpen, setAlertModalOpen] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+  let debounce = null;
 
   //아이디, 비밀번호
   const [email, setEmail] = useState("");
@@ -63,8 +68,42 @@ const Login = () => {
 
   const KakaoURL = process.env.REACT_APP_SOCIAL_URL;
 
+
+const login =  (data) => {
+  if (debounce) {
+    clearTimeout(debounce);
+  }
+  debounce = setTimeout(async () => {
+    try{
+      const response = await userApis.login(data)
+      console.log(response)
+
+      if(response.status === 200){
+        const accessToken = response.data.data.token.accessToken;
+        const refreshToken = response.data.data.token.refreshToken;
+        const id = response.data.data.userId;
+        if (accessToken !== null) {
+          localStorage.setItem("token", accessToken);
+          localStorage.setItem("retoken", refreshToken);
+          localStorage.setItem("id", id);
+          window.location.reload();
+      }
+
+    }
+    if(response.status === 400) {
+      console.log(alertModalOpen)
+      setAlertModalOpen(true);
+      setErrorMessage(response.data.errorMessage)
+    }
+  } catch (err){
+      console.log(err)
+    }
+  }, 100);
+};
+
   return (
     <Wrap>
+      <AlertModal open={alertModalOpen} message={errorMessage} setAlertModalOpen={setAlertModalOpen}/>
       <Title>
         LOGIN
         <span> 로그인</span>

diff --git a/src/components/ParticipantList.js b/src/components/ParticipantList.js
@@ -73,7 +73,7 @@ const ParticipantList = ({ myPostId, currentTab, setViewApply }) => {
       {participantList.data.map((team) => {
         return (
           <ApplyListContent>
-            <Sections>
+            {/* <Sections> */}
               <User>
                 {team.profileImg === null ? (
                   <ListProfilePic src={profilepic} />
@@ -89,7 +89,7 @@ const ParticipantList = ({ myPostId, currentTab, setViewApply }) => {
                   return <Stack key={index}>#{stack}</Stack>;
                 })}
               </Stacks>
-            </Sections>
+            {/* </Sections> */}
             <Out>
               {currentTab === 2 ? null : (
                 <p
@@ -119,9 +119,9 @@ const ParticipantList = ({ myPostId, currentTab, setViewApply }) => {
   );
 };
 
-const Sections = styled(Section)`
-  width: 100%;
-`;
+// const Sections = styled(Section)`
+//   width: 100%;
+// `;
 const LeaveTeam = styled.div`
 color:${(props)=>props.theme.errorColor};
 font-size: 0.875rem;

diff --git a/src/hook/useApplyMutation.js b/src/hook/useApplyMutation.js
@@ -5,8 +5,8 @@ export function usePostApply() {
     const queryClient = useQueryClient();
     return useMutation(userApis.postApply, {
         onSuccess: () => {
-            queryClient.invalidateQueries("applyproject"); 
-            queryClient.invalidateQueries("detailPost"); 
+            // queryClient.invalidateQueries("applyproject"); 
+            // queryClient.invalidateQueries("detailPost"); 
           },
           onError:()=>{
             alert("해당 모집글의 정원이 다 찼습니다")

diff --git a/src/pages/Mypage.js b/src/pages/Mypage.js
@@ -67,13 +67,17 @@ const [nickMessage, setNickMessage] = useState("");
   ];
 
   useEffect(() => {
-    setMyData(userInfo);
-    setImagePreview(userInfo.profileImg);
-    //console.log(userInfo);
-    //console.log(myData);
+    console.log(userInfo);
+    console.log(myData);
+
+
+
 
     if (userInfo === undefined && !token) {
       setModalOpen(true);
+    } else {
+      setMyData(userInfo);
+      setImagePreview(userInfo.profileImg);
     }
 
     //widthHandler
@@ -176,31 +180,27 @@ const [nickMessage, setNickMessage] = useState("");
     setExitModalOpen(false);
   };
 
+  const needLoginUser = () =>{
+    navigate("/", { state: "needLogin" })
+  }
+
   if (userInfo === undefined && !token) {
     return (
-      <AlertModal open={modalOpen}>
-        <ModalContent>
-          <h4>⚠️ 로그인이 필요한 서비스입니다</h4>
-          <Btn onClick={() => navigate("/", { state: "needLogin" })}>
-            {" "}
-            메인으로 가기{" "}
-          </Btn>
-        </ModalContent>
-      </AlertModal>
+      <AlertModal open={modalOpen} 
+      setAlertModalOpen={needLoginUser}
+      message={"⚠️ 로그인이 필요한 서비스입니다"}
+      />
     );
   }
 
   return (
     <WholeBody>
-      <AlertModal open={exitModalOpen}>
-        <Content>
-          <h4>개발바닥에서 탈퇴하시겠습니까?</h4>
-          <div style={{ display: "flex" }}>
-            <GrayLineBtn onClick={exitBtnClose}> 취소 </GrayLineBtn>
-            <LineBtn onClick={withDraw}>회원 탈퇴하기</LineBtn>
-          </div>
-        </Content>
-      </AlertModal>
+      <AlertModal 
+      open={exitModalOpen} 
+      setAlertModalOpen={setExitModalOpen} 
+      message={"개발바닥에서 탈퇴하시겠습니까?"} 
+      action={withDraw} 
+      actionMessage={"회원탈퇴하기"}/>
 
       {isMobile ? (
         <Leftarrow

diff --git a/src/shared/axios.js b/src/shared/axios.js
@@ -53,6 +53,9 @@ instance.interceptors.response.use(
     if (response.status === 504 ){
       return (window.location.replace("/connectfail"))
     }
+    if (response.status === 400){
+      return response
+    }
     /* if (response.status === 403) {
       localStorage.removeItem("token");
       localStorage.removeItem("retoken");