[ Refactor ] JuniorPromiseRequest 라우팅 분리

src/Router.tsx

@@ -23,6 +23,7 @@ import JoinPage from '@pages/join/JoinPage';
 import ErrorPage from '@pages/errorPage/ErrorPage';
 import StepComplete from '@pages/onboarding/components/juniorOnboarding/StepComplete';
 import LoginCallback from '@pages/login/LoginCallback';
+import JuniorPromiseRequestPage from '@pages/juniorPromiseRequest/JuniorPromiseRequestPage';
 
 const router = createBrowserRouter([
   {
@@ -153,6 +154,10 @@ const router = createBrowserRouter([
         path: 'juniorPromise',
         element: <JuniorPromisePage />,
       },
+      {
+        path: 'juniorPromiseRequest',
+        element: <JuniorPromiseRequestPage />,
+      },
       {
         path: 'error',
         element: <ErrorPage />,

src/pages/juniorPromise/JuniorPromisePage.tsx

@@ -9,11 +9,14 @@ import { SeniorListBackground } from './components/SeniorListBackground';
 import seniorProfileQueries from '../../hooks/seniorProfileQueries';
 import PreView from '@pages/seniorProfile/components/preView';
 import { FullBtn } from '@components/commons/FullButton';
-import PromiseRequestPage from './components/promiseRequest/PromiseRequestPage';
 import Loading from '@components/commons/Loading';
 import { HbHomeMainSvg } from '@assets/svgs';
+import { useNavigate } from 'react-router-dom';
 
 const JuniorPromisePage = () => {
+
+  const navigate = useNavigate();
+
   // 바텀 시트 내 버튼& 내용 필터 버튼
   const [filterActiveBtn, setFilterActiveBtn] = useState('계열');
   // 바텀 시트 여는 동작
@@ -105,7 +108,6 @@ const JuniorPromisePage = () => {
   const myNickname = data?.data.myNickname;
 
   const [isSeniorCardClicked, setIsSeniorCardClicked] = useState(false);
-  const [isPromiseClicked, setIsPromisedClicked] = useState(false);
   const [seniorId, setSeniorId] = useState(0);
   const [seniorNickname, setSeniorNickname] = useState('');
   const handleSeniorCardClicked = (type: boolean, id: number, name: string) => {
@@ -115,7 +117,12 @@ const JuniorPromisePage = () => {
   };
 
   const handlePromiseClicked = () => {
-    setIsPromisedClicked(true);
+    navigate('/juniorPromiseRequest', {
+      state: {
+        seniorId,
+        seniorNickname,
+      },
+    });
   };
 
   if (isLoading) {
@@ -128,9 +135,7 @@ const JuniorPromisePage = () => {
 
   return (
     <>
-      {isPromiseClicked ? (
-        <PromiseRequestPage seniorId={seniorId} seniorNickname={seniorNickname} />
-      ) : isSeniorCardClicked ? (
+      {isSeniorCardClicked ? (
         <>
           <Header
             LeftSvg={ArrowLeftIc}

src/pages/juniorPromise/components/promiseRequest/PromiseRequestPage.tsx → src/pages/juniorPromiseRequest/JuniorPromiseRequestPage.tsx

@@ -1,37 +1,34 @@
 import ToggleButton from '@components/commons/ToggleButton';
 import styled from '@emotion/styled';
-import { useState, useEffect } from 'react';
-import CalendarBottomSheet from './CalendarBottomSheet';
-import WorryButtons from './WorryButtons';
-import WorryTextarea from './WorryTextarea';
-import ScheduleSelect from './ScheduleSelect';
+import { useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { usePostAppointment } from './hooks/queries';
+
+import CalendarBottomSheet from './components/CalendarBottomSheet';
+import WorryButtons from './components/WorryButtons';
+import WorryTextarea from './components/WorryTextarea';
+import ScheduleSelect from './components/ScheduleSelect';
 import { BtnCloseModal } from '@components/commons/modal/BtnModal';
-import CheckModalContent from './CheckModalContent';
-import RequestComplete from './RequestComplete';
+import CheckModalContent from './components/CheckModalContent';
+import RequestComplete from './components/RequestComplete';
 import { ArrowLeftIc, ImgHbpromiseIc } from '@assets/svgs';
 import { Header } from '@components/commons/Header';
-import { useNavigate } from 'react-router-dom';
-import Banner from './Banner';
-import { usePostAppointment } from '../../hooks/queries';
-import TitleBox from '../../../../components/commons/TitleBox';
-import { SELECT_JUNIOR_TITLE } from '@pages/juniorPromise/constants/constants';
-
-interface PromiseRequestPagePropType {
-  seniorId: number;
-  seniorNickname: string;
-}
-
-const PromiseRequestPage = ({ seniorId, seniorNickname }: PromiseRequestPagePropType) => {
+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('선택할래요');
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isAllSelected, setIsAllSelected] = useState(false);
   const [isAnyWorrySelected, setIsAnyWorrySelected] = useState(false);
   const [isTextareaFilled, setIsTextareaFilled] = useState(false);
   const [, setUnfilledFields] = useState<number[]>([]);
   const navigate = useNavigate();
+  const location = useLocation();
 
   // 약속 신청하기 눌렸는지 확인
-  const [isSubmitClicked, setIsSubmitCicked] = useState(false);
+  const [isSubmitClicked, setIsSubmitClicked] = useState(false);
   // 적용할래요 눌렀는지 확인
   const [isModalClicked, setIsModalClicked] = useState(false);
   // 캘린더 여닫기
@@ -46,6 +43,8 @@ const PromiseRequestPage = ({ seniorId, seniorNickname }: PromiseRequestPageProp
   const [btnId, setBtnId] = useState(0);
   // 선택한 고민 리스트
   const [selectedButtons, setSelectedButtons] = useState<string[]>([]);
+  // 선배 Id, 닉네임 useLocation에서 가져오기(구조분해할당)
+  const { seniorId, seniorNickname } = location.state || {};
 
   // onToggle 함수 정의
   const handleToggle = (button: string) => {
@@ -75,52 +74,41 @@ const PromiseRequestPage = ({ seniorId, seniorNickname }: PromiseRequestPageProp
   const handleAppointmentSendSuccess = () => {
     setIsModalClicked(true);
   };
-  const { mutate: postAppointment } = usePostAppointment(() => handleAppointmentSendSuccess());
 
-  const handlePostAppointment = () => {
-    if (isAllSelected) {
-      postAppointment({
-        seniorId: seniorId,
-        topic: activeButton === '선택할래요' ? selectedButtons : [],
-        personalTopic: activeButton === '선택할래요' ? '' : inputVal,
-        timeList: [
-          {
-            date: selectedTime[0].clickedDay,
-            startTime: selectedTime[0].selectedTime.split('-')[0],
-            endTime: selectedTime[0].selectedTime.split('-')[1],
-          },
-          {
-            date: selectedTime[1].clickedDay,
-            startTime: selectedTime[1].selectedTime.split('-')[0],
-            endTime: selectedTime[1].selectedTime.split('-')[1],
-          },
-          {
-            date: selectedTime[2].clickedDay,
-            startTime: selectedTime[2].selectedTime.split('-')[0],
-            endTime: selectedTime[2].selectedTime.split('-')[1],
-          },
-        ],
-      });
-    }
+  const handleAppointmentSendError = (error: string) => {
+    alert(error);
   };
 
-  // 버튼 클릭시 실행 함수
-  const handleSubmit = (isAllSelected: boolean) => {
-    setIsSubmitCicked(true);
-    isAllSelected && handleModalOpen(true);
+  const { mutate: postAppointment } = usePostAppointment(handleAppointmentSendSuccess, handleAppointmentSendError);
+
+  // 적용할래요 누르면 실행되는 함수
+  const handlePostAppointment = () => {
+    postAppointment({
+      seniorId,
+      topic: activeButton === '선택할래요' ? selectedButtons : [],
+      personalTopic: activeButton === '선택할래요' ? '' : inputVal,
+      timeList: selectedTime.map((item) => ({
+        date: item.clickedDay,
+        startTime: item.selectedTime.split('-')[0],
+        endTime: item.selectedTime.split('-')[1],
+      })),
+    });
   };
 
-  // isAllSelected 업데이트
-  useEffect(() => {
-    setIsAllSelected(
+  // 버튼 클릭시 실행 함수
+  const handleSubmit = () => {
+    setIsSubmitClicked(true);
+    const isAllSelected =
       selectedTime.every((item) => item.selectedTime !== '' && item.clickedDay !== '') &&
-        (isAnyWorrySelected || isTextareaFilled)
-    );
-  }, [selectedTime, isAnyWorrySelected, isTextareaFilled]);
+      (isAnyWorrySelected || isTextareaFilled);
+    if (isAllSelected) {
+      handleModalOpen(true);
+    }
+  };
 
   return (
     <Wrapper>
-      <Header LeftSvg={ArrowLeftIc} onClickLeft={() => navigate('/promiseList')} title={'약속 신청하기'} />
+      <Header LeftSvg={ArrowLeftIc} onClickLeft={() => navigate(-1)} title={'약속 신청하기'} />
       <Banner senior={`${seniorNickname} 선배`} />
       <ImgHbpromiseIcon />
 
@@ -141,17 +129,6 @@ const PromiseRequestPage = ({ seniorId, seniorNickname }: PromiseRequestPageProp
           activeButton={activeButton}
           onSetActiveButtonHandler={handleToggle}
         />
-        {isModalOpen && (
-          <BtnCloseModal
-            title={'약속 잡기 전 주의해주세요'}
-            isModalOpen={isModalOpen}
-            handleModalOpen={handleModalOpen}
-            handleBtnClick={handlePostAppointment}
-            btnText={'적용할래요'}>
-            <CheckModalContent />
-          </BtnCloseModal>
-        )}
-        {isModalClicked && <RequestComplete seniorNickname={seniorNickname} />}
         {activeButton === '선택할래요' ? (
           <WorryButtons
             selectedButtons={selectedButtons}
@@ -175,16 +152,33 @@ const PromiseRequestPage = ({ seniorId, seniorNickname }: PromiseRequestPageProp
             <Label>총 결제금액</Label>
             <Cost>0원</Cost>
           </CostWrapper>
-          <SubmitBtn type="button" onClick={() => handleSubmit(isAllSelected)} $isAllSelected={isAllSelected}>
+          <SubmitBtn
+            type="button"
+            onClick={handleSubmit}
+            $isAllSelected={
+              selectedTime.every((item) => item.selectedTime !== '' && item.clickedDay !== '') &&
+              (isAnyWorrySelected || isTextareaFilled)
+            }>
             약속 신청하기
           </SubmitBtn>
         </PageBottomBar>
       </Layout>
+      {isModalOpen && (
+        <BtnCloseModal
+          title={'약속 잡기 전 주의해주세요'}
+          isModalOpen={isModalOpen}
+          handleModalOpen={handleModalOpen}
+          handleBtnClick={handlePostAppointment}
+          btnText={'적용할래요'}>
+          <CheckModalContent />
+        </BtnCloseModal>
+      )}
+      {isModalClicked && <RequestComplete seniorNickname={seniorNickname} />}
     </Wrapper>
   );
 };
 
-export default PromiseRequestPage;
+export default JuniorPromiseRequestPage;
 
 const ImgHbpromiseIcon = styled(ImgHbpromiseIc)`
   position: absolute;

src/pages/juniorPromise/components/promiseRequest/CalendarBottomBar.tsx → src/pages/juniorPromiseRequest/components/CalendarBottomBar.tsx

@@ -1,8 +1,8 @@
 import { ReloadIc } from '@assets/svgs';
 import styled from '@emotion/styled';
 import React, { useEffect, useState } from 'react';
-import { formatCalDateToString } from '../../utils/formatCalDateToString';
-import { getTomorrow } from '../../utils/getTomorrow';
+import { formatCalDateToString } from '../utils/formatCalDateToString';
+import { getTomorrow } from '../utils/getTomorrow';
 
 interface CalendarBottomBarPropType {
   setIsCalendarOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -47,8 +47,8 @@ const CalendarBottomBar = ({
               selectedTime: selectedTimeMent[index],
               clickedDay: tomorrow,
             }
-          : time,
-      ),
+          : time
+      )
     );
   };
 

src/pages/juniorPromise/components/promiseRequest/CalendarBottomSheet.tsx → src/pages/juniorPromiseRequest/components/CalendarBottomSheet.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import CalendarBottomBar from './CalendarBottomBar';
 import CustomCalendar from './CustomCalendar';
 import TimeList from './TimeList';
-import { useSeniorTimeQuery } from '../../hooks/queries';
-import { getDayOfWeek } from '../../utils/getDay';
+import { useSeniorTimeQuery } from '../hooks/queries';
+import { getDayOfWeek } from '../utils/getDay';
 import Loading from '@components/commons/Loading';
 
 interface BottomSheetPropType {

src/pages/juniorPromise/components/promiseRequest/CustomCalendar.tsx → src/pages/juniorPromiseRequest/components/CustomCalendar.tsx

@@ -3,9 +3,9 @@ import styled from '@emotion/styled';
 import React, { useState } from 'react';
 import Calendar from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
-import { formatCalDateToString } from '../../utils/formatCalDateToString';
-import { getTomorrow } from '../../utils/getTomorrow';
-import { extractValidKeys } from '../../utils/getSeniorValidWeekOfDay';
+import { formatCalDateToString } from '../utils/formatCalDateToString';
+import { getTomorrow } from '../utils/getTomorrow';
+import { extractValidKeys } from '../utils/getSeniorValidWeekOfDay';
 
 interface CalendarTileProperties {
   date: Date;

src/pages/juniorPromise/components/promiseRequest/ScheduleSelect.tsx → src/pages/juniorPromiseRequest/components/ScheduleSelect.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
-import { formatBtnDateToString } from '../../utils/formatBtnDateToString';
-import { ButtonCheckIc } from '../../../../assets/svgs';
-import { TIME_SELECTION_BUTTON } from '../../constants/constants';
+import { formatBtnDateToString } from '../utils/formatBtnDateToString';
+import { ButtonCheckIc } from '../../../assets/svgs';
+import { TIME_SELECTION_BUTTON } from '../constants/constants';
 import WarnDescription from '@components/commons/WarnDescription';
 
 interface ScheduleSelectProps {

src/pages/juniorPromise/components/promiseRequest/TimeList.tsx → src/pages/juniorPromiseRequest/components/TimeList.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import React from 'react';
 import TimeListBtns from './TimeListBtns';
-import { splitTimeRange, isAMTime } from '../../utils/changeFormat30Min';
+import { splitTimeRange, isAMTime } from '../utils/changeFormat30Min';
 
 interface TimeListType {
   startTime: string;

src/pages/juniorPromise/components/promiseRequest/WorryButtons.tsx → src/pages/juniorPromiseRequest/components/WorryButtons.tsx

@@ -1,8 +1,8 @@
 import WarnDescription from '@components/commons/WarnDescription';
 import styled from '@emotion/styled';
 import React, { useEffect } from 'react';
-import { ButtonCheckIc } from '../../../../assets/svgs';
-import { WORRY_SELECTION_BUTTON } from '../../constants/constants';
+import { ButtonCheckIc } from '../../../assets/svgs';
+import { WORRY_SELECTION_BUTTON } from '../constants/constants';
 
 interface SelectJuniorWorryButtonProps {
   handleCheckWorrySelected: (isSelected: boolean) => void;
@@ -19,7 +19,7 @@ const SelectJuniorWorryButton = ({
     setSelectedButtons((prevSelectedButtons: string[]) =>
       prevSelectedButtons.includes(title)
         ? prevSelectedButtons.filter((buttonTitle) => buttonTitle !== title)
-        : [...prevSelectedButtons, title],
+        : [...prevSelectedButtons, title]
     );
   };
 

src/pages/juniorPromise/components/promiseRequest/WorryTextarea.tsx → src/pages/juniorPromiseRequest/components/WorryTextarea.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import Textarea from '../../../../components/commons/Textarea';
+import Textarea from '../../../components/commons/Textarea';
 import styled from '@emotion/styled';
 
 interface SelectJuniorWorryTextareaWrapperProps {