diff --git a/src/components/commons/Nav.tsx b/src/components/commons/Nav.tsx index fde536c1..53826968 100644 --- a/src/components/commons/Nav.tsx +++ b/src/components/commons/Nav.tsx @@ -3,6 +3,8 @@ import { useState, useEffect } from 'react'; import { useNavigate, useLocation } from 'react-router-dom'; import { NaviLookBlackIc, NaviPromiseBlackIc, NaviMyBlackIc } from '../../assets/svgs'; import { getRole } from '@utils/storage'; +import { AutoCloseModal } from './modal/AutoCloseModal'; +import { ComingSoonImg } from '@assets/images'; const Nav = () => { const navigate = useNavigate(); @@ -10,6 +12,7 @@ const Nav = () => { const userRole = getRole(); const [currNav, setCurrNav] = useState(location.pathname); + const [showModal, setShowModal] = useState(false); useEffect(() => { if (currNav !== location.pathname) { @@ -21,36 +24,43 @@ const Nav = () => { // 유저가 후배일 경우 접근 가능한 곳 : 둘러보기, 나의 약속 // 접근 불가능한 곳은 클릭 안되고, 라우팅 처리 안됨 const handleOnClickNav = (nav: string) => { - if (userRole === 'JUNIOR') { - if (nav === '둘러보기') { - setCurrNav('/juniorPromise'); - } else if (nav === '나의 약속') { + switch (nav) { + case '둘러보기': + userRole === 'JUNIOR' ? setCurrNav('/juniorPromise') : setShowModal(true); + break; + case '나의 약속': setCurrNav('/promiseList'); - } - } else if (userRole === 'SENIOR') { - if (nav === '나의 약속') { - setCurrNav('/promiseList'); - } + break; + case '마이페이지': + setShowModal(true); + break; } }; return ( - - userRole === 'JUNIOR' && handleOnClickNav('둘러보기')} - disabled={userRole === 'SENIOR'}> - - 둘러보기 - - handleOnClickNav('나의 약속')}> - - 나의 약속 - - userRole === 'JUNIOR' && handleOnClickNav('마이페이지')} disabled={true}> - - 마이페이지 - - + <> + + handleOnClickNav('둘러보기')} $disabled={userRole === 'SENIOR'}> + + 둘러보기 + + handleOnClickNav('나의 약속')}> + + 나의 약속 + + handleOnClickNav('마이페이지')} $disabled={true}> + + 마이페이지 + + + + setShowModal(show)}> + 준비중인 기능 모달 + + ); }; @@ -70,14 +80,14 @@ const Wrapper = styled.nav` background-color: ${({ theme }) => theme.colors.grayScaleWhite}; `; -const TapContainer = styled.div<{ disabled?: boolean }>` +const TapContainer = styled.div<{ $disabled?: boolean }>` display: flex; flex-direction: column; gap: 0.5rem; justify-content: center; align-items: center; - cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; + cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')}; `; const TapContent = styled.span<{ $isActive: boolean }>` diff --git a/src/components/commons/modal/AutoCloseModal.tsx b/src/components/commons/modal/AutoCloseModal.tsx index b0f47537..d6a3f0c2 100644 --- a/src/components/commons/modal/AutoCloseModal.tsx +++ b/src/components/commons/modal/AutoCloseModal.tsx @@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom'; interface AutoCloseModalPropType { text: string; showModal: boolean; - handleShowModal: (type: boolean) => void; + handleShowModal: (show: boolean) => void; children: React.ReactNode; path?: string; } diff --git a/src/pages/juniorPromise/apis/getSeniorProfile.ts b/src/pages/juniorPromise/apis/getSeniorProfile.ts index b6c563ad..f0132388 100644 --- a/src/pages/juniorPromise/apis/getSeniorProfile.ts +++ b/src/pages/juniorPromise/apis/getSeniorProfile.ts @@ -25,7 +25,7 @@ export const getSeniorProfile = async (fields: string[], positions: string[]): P const positionQuery = positions.map((position) => `position=${position}`).join('&'); const queryString = fieldQuery && positionQuery ? `${fieldQuery}&${positionQuery}` : `${fieldQuery}${positionQuery}`; try { - const response = await authAxios.get(`/v1/senior/search?${queryString}`); + const response = await authAxios.get(`/api/v1/senior/search?${queryString}`); return response.data; } catch (error) { diff --git a/src/pages/juniorPromiseRequest/apis/getSeniorTimeAxios.ts b/src/pages/juniorPromiseRequest/apis/getSeniorTimeAxios.ts index 3b6d7d45..f104f900 100644 --- a/src/pages/juniorPromiseRequest/apis/getSeniorTimeAxios.ts +++ b/src/pages/juniorPromiseRequest/apis/getSeniorTimeAxios.ts @@ -3,8 +3,8 @@ import { authAxios } from '@utils/apis'; export const getSeniorTimeAxios = async (seniorId: number) => { try { - const response = await authAxios.get(`/v1/senior/time/${seniorId}`); - // console.log(response.data.data.preferredTimeList); + const response = await authAxios.get(`/api/v1/senior/time/${seniorId}`); + return response.data.data.preferredTimeList; } catch (error) { console.log(error); diff --git a/src/pages/juniorPromiseRequest/apis/postAppointment.ts b/src/pages/juniorPromiseRequest/apis/postAppointment.ts index c052cb64..251e75fd 100644 --- a/src/pages/juniorPromiseRequest/apis/postAppointment.ts +++ b/src/pages/juniorPromiseRequest/apis/postAppointment.ts @@ -16,9 +16,8 @@ export interface postAppointmentType { export const postAppointment = async ({ seniorId, topic, personalTopic, timeList }: postAppointmentType) => { try { - const response = await authAxios.post('/v1/appointment', { seniorId, topic, personalTopic, timeList }); + const response = await authAxios.post('/api/v1/appointment', { seniorId, topic, personalTopic, timeList }); - // console.log(response.data); return response.data; } catch (error) { console.log(error); diff --git a/src/pages/login/apis/loginAxios.ts b/src/pages/login/apis/loginAxios.ts index e42631f3..1d45f605 100644 --- a/src/pages/login/apis/loginAxios.ts +++ b/src/pages/login/apis/loginAxios.ts @@ -2,7 +2,7 @@ import { axios } from '@utils/apis'; export const loginAxios = (authorizationCode: string) => { return axios.post( - '/v1/auth/login', + '/api/v1/auth/login', { redirectUri: import.meta.env.VITE_APP_GOOGLE_AUTH_REDIRECT_URI, socialType: 'GOOGLE', diff --git a/src/pages/onboarding/apis/businesscardAxios.ts b/src/pages/onboarding/apis/businesscardAxios.ts index c3164771..234a810c 100644 --- a/src/pages/onboarding/apis/businesscardAxios.ts +++ b/src/pages/onboarding/apis/businesscardAxios.ts @@ -5,7 +5,7 @@ export const businessCardAxios = async (file: File) => { const formData = new FormData(); formData.append('businessCardImage', file); - const response = await authAxios.patch('/v1/businesscard-image', formData, { + const response = await authAxios.patch('/api/v1/businesscard-image', formData, { headers: { 'Content-Type': 'multipart/form-data', }, diff --git a/src/pages/onboarding/apis/joinAxios.ts b/src/pages/onboarding/apis/joinAxios.ts index 07dbaf74..a92c3bdf 100644 --- a/src/pages/onboarding/apis/joinAxios.ts +++ b/src/pages/onboarding/apis/joinAxios.ts @@ -5,5 +5,5 @@ export const joinAxios = (requestBody: JoinPropType) => { // 불필요한 데이터 필터링 const { imageFile, ...request } = requestBody; - return authAxios.patch('/v1/auth/join', { ...request, isSubscribed: requestBody.isSubscribed[4] }); + return authAxios.patch('/api/v1/auth/join', { ...request, isSubscribed: requestBody.isSubscribed[4] }); }; diff --git a/src/pages/onboarding/apis/nicknameAxios.ts b/src/pages/onboarding/apis/nicknameAxios.ts index bf7915e3..fb048053 100644 --- a/src/pages/onboarding/apis/nicknameAxios.ts +++ b/src/pages/onboarding/apis/nicknameAxios.ts @@ -2,7 +2,7 @@ import { axios } from "@utils/apis" export const nicknameAxios = (nickname: string) => { return axios.post( - '/v1/nickname', + '/api/v1/nickname', { nickname }, diff --git a/src/pages/onboarding/apis/ocrAxios.ts b/src/pages/onboarding/apis/ocrAxios.ts index 19bf8990..2b29d8bd 100644 --- a/src/pages/onboarding/apis/ocrAxios.ts +++ b/src/pages/onboarding/apis/ocrAxios.ts @@ -2,7 +2,7 @@ import { axios } from '@utils/apis'; export const ocrUnivAxios = (imageFile: File) => { return axios.post( - '/v1/ocr/univ', + '/api/v1/ocr/univ', { imageFile, }, @@ -16,7 +16,7 @@ export const ocrUnivAxios = (imageFile: File) => { export const ocrNameCardAxios = (imageFile: File) => { return axios.post( - '/v1/ocr/business-card', + '/api/v1/ocr/business-card', { imageFile, }, diff --git a/src/pages/onboarding/apis/phoneAxios.ts b/src/pages/onboarding/apis/phoneAxios.ts index 548393d0..3162955e 100644 --- a/src/pages/onboarding/apis/phoneAxios.ts +++ b/src/pages/onboarding/apis/phoneAxios.ts @@ -2,7 +2,7 @@ import { axios } from "@utils/apis" export const phoneVerifyAxios = (phoneNumber: string) => { return axios.post( - '/v1/phone/verify', + '/api/v1/phone/verify', { phoneNumber, } @@ -16,7 +16,7 @@ export interface phoneVerifycodePropType { export const phoneVerifycodeAxios = ({ phoneNumber, verificationCode }: phoneVerifycodePropType) => { return axios.post( - '/v1/phone/verifycode', + '/api/v1/phone/verifycode', { phoneNumber, verificationCode, diff --git a/src/pages/onboarding/apis/profileImageAxios.ts b/src/pages/onboarding/apis/profileImageAxios.ts index 660d86ec..3442c665 100644 --- a/src/pages/onboarding/apis/profileImageAxios.ts +++ b/src/pages/onboarding/apis/profileImageAxios.ts @@ -1,7 +1,7 @@ import { authAxios, axios } from '@utils/apis'; export const presignedUrlAxios = () => { - return authAxios.get('/v1/image'); + return authAxios.get('/api/v1/image'); }; export const uploadProfileImageAxios = async (url: string, file: File) => { diff --git a/src/pages/onboarding/apis/searchAxios.ts b/src/pages/onboarding/apis/searchAxios.ts index cf3e83d8..4f48c8d5 100644 --- a/src/pages/onboarding/apis/searchAxios.ts +++ b/src/pages/onboarding/apis/searchAxios.ts @@ -1,7 +1,7 @@ import { axios } from '@utils/apis'; export const univNameAxios = (univName: string) => { - return axios.get('/v1/search/univ', { + return axios.get('/api/v1/search/univ', { params: { univName, }, @@ -9,7 +9,7 @@ export const univNameAxios = (univName: string) => { }; export const departmentAxios = (univName: string, deptName: string) => { - return axios.get('/v1/search/dept', { + return axios.get('/api/v1/search/dept', { params: { univName, deptName, diff --git a/src/pages/onboarding/apis/univAxios.ts b/src/pages/onboarding/apis/univAxios.ts index f442843b..bb81bab7 100644 --- a/src/pages/onboarding/apis/univAxios.ts +++ b/src/pages/onboarding/apis/univAxios.ts @@ -8,7 +8,7 @@ export interface univVerifyPropType { export const univVerifyAxios = ({ email, univName }: univVerifyPropType) => { return axios.post( - '/v1/univ/verify', + '/api/v1/univ/verify', { email, univName, @@ -19,7 +19,7 @@ export const univVerifyAxios = ({ email, univName }: univVerifyPropType) => { export const univVerifycodeAxios = ({ email, univName, code }: univVerifyPropType) => { return axios.post( - '/v1/univ/verifycode', + '/api/v1/univ/verifycode', { email, univName, diff --git a/src/pages/promiseDetail/apis/getPromiseDetail.ts b/src/pages/promiseDetail/apis/getPromiseDetail.ts index 342e6ad8..3f56ccb9 100644 --- a/src/pages/promiseDetail/apis/getPromiseDetail.ts +++ b/src/pages/promiseDetail/apis/getPromiseDetail.ts @@ -3,7 +3,7 @@ import { authAxios } from '@utils/apis'; export const getPromiseDetail = async (appointmentId: number) => { try { - const response = await authAxios.get(`/v1/appointment/${appointmentId}`); + const response = await authAxios.get(`/api/v1/appointment/${appointmentId}`); // console.log(response.data.data); return response.data.data; } catch (error) { diff --git a/src/pages/promiseDetail/apis/patchSeniorPromiseAccept.ts b/src/pages/promiseDetail/apis/patchSeniorPromiseAccept.ts index 85f08178..c75b6d36 100644 --- a/src/pages/promiseDetail/apis/patchSeniorPromiseAccept.ts +++ b/src/pages/promiseDetail/apis/patchSeniorPromiseAccept.ts @@ -15,7 +15,7 @@ export interface patchSeniorAcceptRequestType { export const patchSeniorAccept = async ({ appointmentId, googleMeetLink, timeList }: patchSeniorAcceptRequestType) => { try { - const response = await authAxios.patch('/v1/appointment/accept', { + const response = await authAxios.patch('/api/v1/appointment/accept', { appointmentId, googleMeetLink, timeList, diff --git a/src/pages/promiseDetail/apis/patchSeniorReject.ts b/src/pages/promiseDetail/apis/patchSeniorReject.ts index 8d79e781..3d1d095a 100644 --- a/src/pages/promiseDetail/apis/patchSeniorReject.ts +++ b/src/pages/promiseDetail/apis/patchSeniorReject.ts @@ -13,7 +13,7 @@ export const patchSeniorReject = async ({ rejectDetail, }: patchSeniorRejectRequestType) => { try { - const response = await authAxios.patch('/v1/appointment/reject', { + const response = await authAxios.patch('/api/v1/appointment/reject', { appointmentId, rejectReason, rejectDetail, diff --git a/src/pages/promiseDetail/apis/postGoogleMeetLink.ts b/src/pages/promiseDetail/apis/postGoogleMeetLink.ts index 8042a5ed..5e0d42a3 100644 --- a/src/pages/promiseDetail/apis/postGoogleMeetLink.ts +++ b/src/pages/promiseDetail/apis/postGoogleMeetLink.ts @@ -3,7 +3,7 @@ import { authAxios } from '@utils/apis'; export const postGoogleMeetLink = async () => { try { - const response = await authAxios.post('/v1/google-meet'); + const response = await authAxios.post('/api/v1/google-meet'); // console.log(response.data.data.googleMeet); return response.data.data.googleMeet; } catch (err) { diff --git a/src/pages/promiseList/PromiseListPage.tsx b/src/pages/promiseList/PromiseListPage.tsx index 86736879..61246a19 100644 --- a/src/pages/promiseList/PromiseListPage.tsx +++ b/src/pages/promiseList/PromiseListPage.tsx @@ -9,8 +9,12 @@ import { useGetPromiseList } from './hooks/queries'; import Loading from '@components/commons/Loading'; import { getRole } from '@utils/storage'; import ErrorPage from '@pages/errorPage/ErrorPage'; +import { AutoCloseModal } from '@components/commons/modal/AutoCloseModal'; +import { useState } from 'react'; +import img_modal_accept from '@assets/images/img_modal_accept.png'; const PromiseListPage = () => { + const [showModal, setShowModal] = useState(false); const userRole = getRole() + ''; const { myNickname, pending, scheduled, past, isLoading, isError } = useGetPromiseList(); @@ -20,7 +24,7 @@ const PromiseListPage = () => { return ( <> -
+
setShowModal(true)} bgColor="gray" /> @@ -34,6 +38,13 @@ const PromiseListPage = () => { <PromiseTap myNickname={myNickname} userRole={userRole} pending={pending} scheduled={scheduled} past={past} /> <Nav /> </Wrapper> + + <AutoCloseModal + text="알림은 문자를 확인해주세요 !" + showModal={showModal} + handleShowModal={(show: boolean) => setShowModal(show)}> + <ModalImg src={img_modal_accept} /> + </AutoCloseModal> </> ); }; @@ -56,3 +67,8 @@ const RecentLayout = styled.div` width: 100vw; padding: 1.5rem 2rem 0; `; + +const ModalImg = styled.img` + width: 27rem; + height: 17.2rem; +`; diff --git a/src/pages/promiseList/apis/getGoogleMeetLink.ts b/src/pages/promiseList/apis/getGoogleMeetLink.ts index b4d3022b..64970e99 100644 --- a/src/pages/promiseList/apis/getGoogleMeetLink.ts +++ b/src/pages/promiseList/apis/getGoogleMeetLink.ts @@ -3,7 +3,7 @@ import { authAxios } from '@utils/apis'; export const getGoogleMeetLink = async (appointmentId: number) => { try { - const response = await authAxios.get(`/v1/google-meet/${appointmentId}`); + const response = await authAxios.get(`/api/v1/google-meet/${appointmentId}`); // console.log(response.data.data.googleMeetLink); return response.data.data.googleMeetLink; } catch (error) { diff --git a/src/pages/promiseList/apis/getPromiseList.ts b/src/pages/promiseList/apis/getPromiseList.ts index 7ea5219f..ce4d762b 100644 --- a/src/pages/promiseList/apis/getPromiseList.ts +++ b/src/pages/promiseList/apis/getPromiseList.ts @@ -3,7 +3,7 @@ import { authAxios } from '@utils/apis'; export const getPromiseList = async () => { try { - const response = await authAxios.get(`/v1/appointment`); + const response = await authAxios.get(`/api/v1/appointment`); // console.log(response.data); return response.data.data; } catch (error) { diff --git a/src/pages/seniorProfile/apis/getSeniorProfileAxios.ts b/src/pages/seniorProfile/apis/getSeniorProfileAxios.ts index 826dcf3c..5590da05 100644 --- a/src/pages/seniorProfile/apis/getSeniorProfileAxios.ts +++ b/src/pages/seniorProfile/apis/getSeniorProfileAxios.ts @@ -2,6 +2,6 @@ import { authAxios } from "@utils/apis" export const getSeniorProfileAxios = (seniorId: string) => { return authAxios.get( - `/v1/senior/${seniorId}` + `/api/v1/senior/${seniorId}` ) } \ No newline at end of file diff --git a/src/pages/seniorProfile/apis/seniorCardAxios.ts b/src/pages/seniorProfile/apis/seniorCardAxios.ts index 203cb9bb..607ed31e 100644 --- a/src/pages/seniorProfile/apis/seniorCardAxios.ts +++ b/src/pages/seniorProfile/apis/seniorCardAxios.ts @@ -2,6 +2,6 @@ import { authAxios } from "@utils/apis" export const seniorCardAxios = (seniorId: string) => { return authAxios.get( - `/v1/senior/card/${seniorId}` + `/api/v1/senior/card/${seniorId}` ) } \ No newline at end of file diff --git a/src/pages/seniorProfile/apis/seniorProfileAxios.ts b/src/pages/seniorProfile/apis/seniorProfileAxios.ts index d1d7c1c5..b39d3473 100644 --- a/src/pages/seniorProfile/apis/seniorProfileAxios.ts +++ b/src/pages/seniorProfile/apis/seniorProfileAxios.ts @@ -2,7 +2,7 @@ import { seniorProfileAPIType } from '@pages/seniorProfile/types'; import { authAxios } from '@utils/apis'; export const seniorProfileAxios = ({ catchphrase, career, award, story, preferredTimeList }: seniorProfileAPIType) => { - return authAxios.patch('/v1/senior/profile', { + return authAxios.patch('/api/v1/senior/profile', { catchphrase, career, award, diff --git a/src/utils/apis/index.ts b/src/utils/apis/index.ts index 05884a51..35862b49 100644 --- a/src/utils/apis/index.ts +++ b/src/utils/apis/index.ts @@ -1,15 +1,17 @@ import { getToken } from '@utils/storage'; import * as _axios from 'axios'; +const baseUrl = import.meta.env.VITE_APP_API_BASE_URL; + export const axios = _axios.default.create({ - baseURL: '/api', + baseURL: `${baseUrl}`, headers: { 'Content-Type': 'application/json', }, }); export const authAxios = _axios.default.create({ - baseURL: '/api', + baseURL: `${baseUrl}`, headers: { 'Content-Type': 'application/json', },