[feat] 관리페이지 route수정 & API요청 hook 작성

src/components/myPage/MyPageContainer.tsx

@@ -6,6 +6,7 @@ import { useLocation, useNavigate, Outlet } from 'react-router-dom';
 const MyPageContainerLayout = () => {
   const location = useLocation();
   const navigate = useNavigate();
+  const managePage = location.pathname.startsWith('/my-page/my-created-travel/manage-my-travel/');
 
   useEffect(() => {
     if (location.pathname === '/my-page/') {
@@ -14,19 +15,21 @@ const MyPageContainerLayout = () => {
   }, [location.pathname, navigate]);
 
   return (
-    <div css={myPageLayout}>
-      <MyPageSideMenu />
-      <section>
-        <Outlet />
-      </section>
+    <div css={myPageLayout(managePage)}>
+      {managePage ? null : <MyPageSideMenu />}
+      <Outlet />
     </div>
   );
 };
 
-const myPageLayout = css`
+const myPageLayout = (managePage: boolean) => css`
   display: flex;
   gap: 60px;
   position: relative;
+  ${managePage &&
+  `
+    display: block;
+  `}
 `;
 
 export default MyPageContainerLayout;

src/hooks/useManageTravelData.ts

@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+
+interface useManageTravelDataPM {
+  travelId: string;
+  enabled: boolean;
+}
+
+const useManageTravelData = ({ travelId, enabled }: useManageTravelDataPM) => {
+  return useQuery({
+    queryKey: ['manageTravel', travelId],
+    queryFn: async () => {
+      try {
+        const res = await axios.get(`/api/v1/travels/manage-my-travel/${travelId}`);
+        return res.data;
+      } catch (error) {
+        console.error('관리할 여행 데이터 로드 실패:', error);
+      }
+    },
+    enabled,
+  });
+};
+export default useManageTravelData;

src/layouts/Auth.tsx

@@ -9,7 +9,7 @@ import useLoginStore from '@/stores/useLoginStore';
 import * as Dialog from '@radix-ui/react-dialog';
 import useModalStore from '@/stores/useModalStore';
 import { X } from 'lucide-react';
-import logo from 'src/assets/logo-black.png';
+import logo from '/src/assets/logo-black.png';
 import googleLogo from '/src/assets/google-icon.svg';
 import kakaoLogo from '/src/assets/kakao-icon.svg';
 import basicProfile from '/src/assets/basicProfile.png';

src/layouts/Breadcrumb.tsx

@@ -13,6 +13,7 @@ const breadcrumbsMap: { [key: string]: string } = {
   'my-travel-list': '참여한 여행',
   'my-account': '계정',
   'my-created-travel': '내가 만든 여행',
+  'manage-my-travel': '내 여행 관리',
   'my-travel': '내 여행',
   'travel-detail': '여행 상세',
 };

src/pages/ManageMyTravel.tsx

@@ -5,25 +5,31 @@ import TravelTeam from '@/components/manageMyTravel/TravelTeam';
 import TravelManageHeader from '@/components/manageMyTravel/TravelManageHeader';
 import teamDataFilter from '@/utils/teamDataFilter';
 import usePageStore from '@/stores/usePageStore';
+import { useParams } from 'react-router-dom';
 
 const ManageMyTravel = () => {
   const [tab, setTab] = useState(true);
   const setMultiPagination = usePageStore((state) => state.setMultiPagination);
+  const { travelId } = useParams();
 
   useEffect(() => {
     const filterData = teamDataFilter(data, tab ? 'ongoing' : 'completed');
     setMultiPagination(filterData.length);
   }, [tab]);
 
+  if (data.id !== travelId) {
+    return;
+  }
+
   return (
-    <section css={{ color: '#333' }}>
+    <div css={{ color: '#333' }}>
       <TravelManageHeader travelData={data} tab={tab} setTab={setTab} />
       {tab ? (
         <TravelTeam data={teamDataFilter(data, 'ongoing')} />
       ) : (
         <TravelTeam data={teamDataFilter(data, 'completed')} />
       )}
-    </section>
+    </div>
   );
 };
 

src/pages/MyCreatedTravel.tsx

@@ -1,14 +1,21 @@
 import MyTravelContent from '@/components/myTravel/MyTravelContent';
 import MyTravelTab from '@/components/myTravel/MyTravelTab';
 import { useTabStore } from '@/stores/useTabStore';
+import { Outlet } from 'react-router-dom';
 
 const MyCreatedTravel = () => {
   const { selectedTab } = useTabStore();
+  const managePage = location.pathname.startsWith('/my-page/my-created-travel/manage-my-travel/');
 
   return (
     <div>
-      <MyTravelTab />
-      {selectedTab === '내가 만든 여행' && <MyTravelContent />}
+      {managePage ? null : (
+        <>
+          <MyTravelTab />
+          {selectedTab === '내가 만든 여행' && <MyTravelContent />}
+        </>
+      )}
+      <Outlet />
     </div>
   );
 };

src/routes/router.tsx

@@ -70,6 +70,12 @@ const router = createBrowserRouter([
                     <MyCreatedTravel />
                   </div>
                 ),
+                children: [
+                  {
+                    path: 'manage-my-travel/:travelId',
+                    element: <ManageMyTravel />,
+                  },
+                ],
               },
               {
                 path: 'my-reviews',
@@ -93,10 +99,6 @@ const router = createBrowserRouter([
               },
             ],
           },
-          {
-            path: 'manage-my-travel',
-            element: <ManageMyTravel />,
-          },
           {
             path: 'add-travel',
             element: <AddTravel />,