diff --git a/src/App.js b/src/App.js index 0c9c72d..c3565f8 100644 --- 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 index 47404e3..eea0af1 100644 --- 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 index 2d2aaea..49e32b6 100644 --- 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 ( {open && (
-
{props.children}
+ + {message} +
+ {!actionMessage ? + setAlertModalOpen(false)}> + 확인 + : + <> + setAlertModalOpen(false)}>취소 + + {actionMessage} + + + + + + } + +
+
)} @@ -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 index 62b5d40..3d42d3c 100644 --- 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 ( {userStatus === "author" && ( @@ -84,10 +89,10 @@ const ApplyBtn = ({ myPostData }) => {

{applierCnt}명이 지원했어요!

 - )} + )} {deadline === false ? ( userStatus === "MEMBER" ? ( - + ) : userStatus === "applicant" ? ( ) : ( @@ -99,24 +104,18 @@ const ApplyBtn = ({ myPostData }) => { ) )} - - -

프로젝트 지원을 취소하시겠습니까?

-
- 닫기 - 지원취소 -
- - - - - -

프로젝트 지원 완료!

-
- 확인 -
- - + + + + {viewApply && ( )} @@ -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 index d0b4395..7629872 100644 --- 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 ( + LOGIN <span> 로그인</span> diff --git a/src/components/ParticipantList.js b/src/components/ParticipantList.js index 2bfb27b..fcdcfec 100644 --- 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 index bcd5a6f..0100130 100644 --- 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 index 0816591..f2fd4ca 100644 --- 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 index 1a16196..c733fbc 100644 --- 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"); diff --git a/src/shared/userOauth.js b/src/shared/userOauth.js index 729903d..a859dd2 100644 --- a/src/shared/userOauth.js +++ b/src/shared/userOauth.js @@ -3,32 +3,48 @@ import instance from "./axios"; let debounce = null; // 로그인 -export const login = (props) => { +export const login = (props) => { if (debounce) { clearTimeout(debounce); } - debounce = setTimeout(() => { - instance - .post("/user/login", props) - .then((res) => { - //console.log(res); - const accessToken = res.data.data.token.accessToken; - const refreshToken = res.data.data.token.refreshToken; - const id = res.data.data.userId; + debounce = setTimeout(async () => { + try{ + const response = await instance.post("/user/login", props); + 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(); - } - }) - .catch((err) => { - //console.log(err); - window.alert( - "이메일 혹은 비밀번호를 잘못 입력하셨거나 등록되지 않은 이메일 입니다." - ); - }); + } + if(response === 400) { + } + } + } catch (err){ + console.log(err) + } + // instance + // .post("/user/login", props) + // .then((res) => { + // //console.log(res); + // const accessToken = res.data.data.token.accessToken; + // const refreshToken = res.data.data.token.refreshToken; + // const id = res.data.data.userId; + // if (accessToken !== null) { + // localStorage.setItem("token", accessToken); + // localStorage.setItem("retoken", refreshToken); + // localStorage.setItem("id", id); + // window.location.reload(); + // } + // }) + // .catch((err) => { + // console.log(err) + // }); }, 500); }; diff --git a/src/styles/style.js b/src/styles/style.js index d41f5ba..a7268a1 100644 --- a/src/styles/style.js +++ b/src/styles/style.js @@ -146,6 +146,25 @@ export const LineBtn = styled.button` export const GrayLineBtn = styled(LineBtn)` border: 1px solid #777777; color: #777777; + :hover { + border: 1px solid transparent; + background-color: ${(props) => props.theme.textColor_sub}; + color: white; + } + :active { + border: 1px solid transparent; + background-color: ${(props) => props.theme.textColor_sub}; + color: white; + } +`; + +export const ModalBtn = styled(LineBtn)` +border: transparent; +background-color: ${(props) => props.theme.keyColor}; +color:${(props) => props.theme.textColor_btn}; +:hover{ + background-color: #ff891c; +} `; export const ListProfilePic = styled.img`