[ Fix ] self QA - 뒤로가기 버튼 수정, 약속신청 모달 위치 조정, 이미 있는 약속 신청시 alert

src/pages/juniorPromiseRequest/JuniorPromiseRequestPage.tsx

@@ -16,6 +16,7 @@ import { Header } from '@components/commons/Header';
 import Banner from './components/Banner';
 import TitleBox from '@components/commons/TitleBox';
 import { SELECT_JUNIOR_TITLE } from './constants/constants';
+import axios from 'axios';
 
 const JuniorPromiseRequestPage = () => {
   const [activeButton, setActiveButton] = useState('선택할래요');
@@ -28,7 +29,7 @@ const JuniorPromiseRequestPage = () => {
   const location = useLocation();
 
   // 약속 신청하기 눌렸는지 확인
-  const [isSubmitClicked, setIsSubmitCicked] = useState(false);
+  const [isSubmitClicked, setIsSubmitClicked] = useState(false);
   // 적용할래요 눌렀는지 확인
   const [isModalClicked, setIsModalClicked] = useState(false);
   // 캘린더 여닫기
@@ -74,7 +75,12 @@ const JuniorPromiseRequestPage = () => {
   const handleAppointmentSendSuccess = () => {
     setIsModalClicked(true);
   };
-  const { mutate: postAppointment } = usePostAppointment(() => handleAppointmentSendSuccess());
+
+  const handleAppointmentSendError = (error: string) => {
+    alert(error);
+  };
+
+  const { mutate: postAppointment } = usePostAppointment(handleAppointmentSendSuccess, handleAppointmentSendError);
 
   const handlePostAppointment = () => {
     if (isAllSelected) {
@@ -105,7 +111,7 @@ const JuniorPromiseRequestPage = () => {
 
   // 버튼 클릭시 실행 함수
   const handleSubmit = (isAllSelected: boolean) => {
-    setIsSubmitCicked(true);
+    setIsSubmitClicked(true);
     isAllSelected && handleModalOpen(true);
   };
 
@@ -119,7 +125,7 @@ const JuniorPromiseRequestPage = () => {
 
   return (
     <Wrapper>
-      <Header LeftSvg={ArrowLeftIc} onClickLeft={() => navigate('/')} title={'약속 신청하기'} />
+      <Header LeftSvg={ArrowLeftIc} onClickLeft={() => navigate(-1)} title={'약속 신청하기'} />
       <Banner senior={`${seniorNickname} 선배`} />
       <ImgHbpromiseIcon />
 
@@ -140,17 +146,6 @@ const JuniorPromiseRequestPage = () => {
           activeButton={activeButton}
           onSetActiveButtonHandler={handleToggle}
         />
-        {isModalOpen && (
-          <BtnCloseModal
-            title={'약속 잡기 전 주의해주세요'}
-            isModalOpen={isModalOpen}
-            handleModalOpen={handleModalOpen}
-            handleBtnClick={handlePostAppointment}
-            btnText={'적용할래요'}>
-            <CheckModalContent />
-          </BtnCloseModal>
-        )}
-        {isModalClicked && <RequestComplete seniorNickname={seniorNickname} />}
         {activeButton === '선택할래요' ? (
           <WorryButtons
             selectedButtons={selectedButtons}
@@ -179,6 +174,17 @@ const JuniorPromiseRequestPage = () => {
           </SubmitBtn>
         </PageBottomBar>
       </Layout>
+      {isModalOpen && (
+        <BtnCloseModal
+          title={'약속 잡기 전 주의해주세요'}
+          isModalOpen={isModalOpen}
+          handleModalOpen={handleModalOpen}
+          handleBtnClick={handlePostAppointment}
+          btnText={'적용할래요'}>
+          <CheckModalContent />
+        </BtnCloseModal>
+      )}
+      {isModalClicked && <RequestComplete seniorNickname={seniorNickname} />}
     </Wrapper>
   );
 };

src/pages/juniorPromiseRequest/hooks/queries.ts

@@ -3,13 +3,14 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 import { postAppointment } from '../apis/postAppointment';
 import { postAppointmentType } from '../apis/postAppointment';
 import { getSeniorTimeAxios } from '../apis/getSeniorTimeAxios';
+import axios from 'axios';
 
 export const QUERY_KEY_JUNIOR_PROMISE_SEND = {
   postAppointment: postAppointment,
   getSeniorTimeAxios: getSeniorTimeAxios,
 };
 
-export const usePostAppointment = (onSuccessCallback?: () => void) => {
+export const usePostAppointment = (onSuccessCallback?: () => void, onErrorCallback?: (error: string) => void) => {
   const { mutate, data } = useMutation({
     mutationKey: [QUERY_KEY_JUNIOR_PROMISE_SEND.postAppointment],
     mutationFn: ({ seniorId, topic, personalTopic, timeList }: postAppointmentType) =>
@@ -19,6 +20,19 @@ export const usePostAppointment = (onSuccessCallback?: () => void) => {
         onSuccessCallback();
       }
     },
+    onError: (error) => {
+      let errorMessage = '알 수 없는 오류가 발생했습니다.';
+      if (axios.isAxiosError(error) && error.response) {
+        if (error.response?.status === 403 || error.response?.status === 400) {
+          errorMessage = '이미 약속을 신청한 선배입니다.';
+        } else {
+          errorMessage = '약속 신청에 실패했습니다.';
+        }
+      }
+      if (onErrorCallback) {
+        onErrorCallback(errorMessage);
+      }
+    },
   });
 
   return { mutate, data };