[ Feat ] 2차 QA 모달 추가

src/components/commons/Nav.tsx

@@ -3,13 +3,16 @@ 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();
   const location = useLocation();
 
   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 (
-    <Wrapper>
-      <TapContainer
-        onClick={() => userRole === 'JUNIOR' && handleOnClickNav('둘러보기')}
-        disabled={userRole === 'SENIOR'}>
-        <NaviLookBlackIcon isactive={(currNav === '/juniorPromise') + ''} />
-        <TapContent $isActive={currNav === '/juniorPromise'}>둘러보기</TapContent>
-      </TapContainer>
-      <TapContainer onClick={() => handleOnClickNav('나의 약속')}>
-        <NaviPromiseBlackIcon isactive={(currNav === '/promiseList') + ''} />
-        <TapContent $isActive={currNav === '/promiseList'}>나의 약속</TapContent>
-      </TapContainer>
-      <TapContainer onClick={() => userRole === 'JUNIOR' && handleOnClickNav('마이페이지')} disabled={true}>
-        <NaviMyBlackIcon isactive={(currNav === '마이페이지') + ''} />
-        <TapContent $isActive={currNav === '마이페이지'}>마이페이지</TapContent>
-      </TapContainer>
-    </Wrapper>
+    <>
+      <Wrapper>
+        <TapContainer onClick={() => handleOnClickNav('둘러보기')} $disabled={userRole === 'SENIOR'}>
+          <NaviLookBlackIcon isactive={(currNav === '/juniorPromise') + ''} />
+          <TapContent $isActive={currNav === '/juniorPromise'}>둘러보기</TapContent>
+        </TapContainer>
+        <TapContainer onClick={() => handleOnClickNav('나의 약속')}>
+          <NaviPromiseBlackIcon isactive={(currNav === '/promiseList') + ''} />
+          <TapContent $isActive={currNav === '/promiseList'}>나의 약속</TapContent>
+        </TapContainer>
+        <TapContainer onClick={() => handleOnClickNav('마이페이지')} $disabled={true}>
+          <NaviMyBlackIcon isactive={(currNav === '마이페이지') + ''} />
+          <TapContent $isActive={currNav === '마이페이지'}>마이페이지</TapContent>
+        </TapContainer>
+      </Wrapper>
+
+      <AutoCloseModal
+        text="아직 준비중인 기능이에요"
+        showModal={showModal}
+        handleShowModal={(show: boolean) => setShowModal(show)}>
+        <img src={ComingSoonImg} alt="준비중인 기능 모달" />
+      </AutoCloseModal>
+    </>
   );
 };
 
@@ -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 }>`

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;
 }

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<GetSeniorProfileResponse>(`/v1/senior/search?${queryString}`);
+    const response = await authAxios.get<GetSeniorProfileResponse>(`/api/v1/senior/search?${queryString}`);
 
     return response.data;
   } catch (error) {

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);

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);

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',

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',
       },

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] });
 };

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
     },

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,
     },

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,

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) => {

src/pages/onboarding/apis/searchAxios.ts

@@ -1,15 +1,15 @@
 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,
     },
   });
 };
 
 export const departmentAxios = (univName: string, deptName: string) => {
-  return axios.get('/v1/search/dept', {
+  return axios.get('/api/v1/search/dept', {
     params: {
       univName,
       deptName,

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,

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) {

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,

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,

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) {

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 (
     <>
-      <Header LeftSvg={HeaderLogoIc} RightSvg={AlarmIc} bgColor="gray" />
+      <Header LeftSvg={HeaderLogoIc} RightSvg={AlarmIc} onClickRight={() => setShowModal(true)} bgColor="gray" />
       <Wrapper>
         <RecentLayout>
           <Title nickname={myNickname} userRole={userRole} count={scheduled.length} />
@@ -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;
+`;

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) {

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) {

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}`
   )
 }

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}`
   )
 }

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,