라우터 개선

LinkMarry · Jan 18, 2025 · 55a1c9a · 55a1c9a
1 parent d38e0fa
commit 55a1c9a
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 16 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -37,15 +37,15 @@ function App() {
                 {/*service*/}
                 <Route path={'login/oauth2/code/kakao'} element={<KakaoRedirectPage/>}/>
                 <Route path={''} element={<HomePage/>}/>
-                <Route path={'invitation'} element={<InvitationLayout/>}>
+                <Route element={<InvitationLayout/>}>
                     <Route path={'dashboard'}>
                         <Route index={true} element={<InvitationDashboard/>}/>
                         <Route path={'guest-comment'} element={<InvitationDashboardGuestComment/>}/>
                         <Route path={'design'} element={<InvitationDesign/>}/>
                     </Route>
                     <Route path={'statistics'}>
                         <Route index={true} element={<InvitationStatistics/>}/>
-                        <Route path={'detail'} element={<InvitationStatisticsDetail/>}/>
+                        <Route path={':url'} element={<InvitationStatisticsDetail/>}/>
                     </Route>
                 </Route>
                 <Route path={'my-page'} element={<MyPage/>}/>

diff --git a/src/page/invitation/InvitationLayout.tsx b/src/page/invitation/InvitationLayout.tsx
@@ -6,9 +6,9 @@ import HasHeader from "@designsystem/component/header/hasHeader";
 import {InvitationSideBarType} from "@page/invitation/component/InvitationSideBarType";
 
 function getSelectedSideBarType(pathname: string): InvitationSideBarType | null {
-    if (pathname.startsWith('/invitation/dashboard')) {
+    if (pathname.startsWith('/dashboard')) {
         return 'dashboard';
-    } else if (pathname.startsWith('/invitation/statistics')) {
+    } else if (pathname.startsWith('/statistics')) {
         return 'statistics';
     } else {
         return null;
@@ -20,11 +20,6 @@ function InvitationLayout() {
     const navigate = useNavigate();
     const sideBarType = getSelectedSideBarType(pathname);
 
-    if (['/invitation', '/invitation/'].includes(pathname)) {
-        window.location.href = '/invitation/dashboard';
-        return <></>;
-    }
-
     return (
         <HasHeader>
             <S.container>

diff --git a/src/page/invitation/dashboard/dialog/CreateDesignDialog.tsx b/src/page/invitation/dashboard/dialog/CreateDesignDialog.tsx
@@ -36,7 +36,7 @@ function CreateDesignDialog(
 
         try {
             await weddingApi.checkUrlConflict(url);
-            navigate(`/invitation/dashboard/design?url=${url}`);
+            navigate(`/dashboard/design?url=${url}`);
         } catch (error) {
             console.error(error);
             setIsError(true);

diff --git a/src/page/invitation/dashboard/guestComment/InvitationDashboardGuestComment.tsx b/src/page/invitation/dashboard/guestComment/InvitationDashboardGuestComment.tsx
@@ -31,7 +31,7 @@ function InvitationDashboardGuestComment() {
         <S.container>
             <Column gap={44} style={{marginLeft: 64, paddingTop: 64, width: 867}} $alignItems={'stretch'}>
                 <Icon type={IconType.ExpandArrow} tint={colors.g400} style={{cursor: 'pointer'}} onClick={() => {
-                    navigate('/invitation/dashboard');
+                    navigate('/dashboard');
                 }}/>
                 <Column>
                     <Text type={'h5'}>방명록</Text>

diff --git a/src/page/invitation/statistics/InvitationStatistics.tsx b/src/page/invitation/statistics/InvitationStatistics.tsx
@@ -33,7 +33,7 @@ function InvitationStatistics() {
                                 key={index}
                                 weddingInfo={weddingInfo}
                                 onClick={() => {
-                                    navigate(`detail?url=${weddingInfo.url}`);
+                                    navigate(`./${weddingInfo.url}`);
                                 }}
                             />
                         )

diff --git a/src/page/invitation/statistics/detail/InvitationStatisticsDetail.tsx b/src/page/invitation/statistics/detail/InvitationStatisticsDetail.tsx
@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
 import S from '@page/invitation/statistics/detail/InvitationStatisticsDetail.style';
-import {useNavigate, useSearchParams} from "react-router-dom";
+import {useNavigate, useParams, useSearchParams} from "react-router-dom";
 import {Column, Row} from "@designsystem/component/flexLayout";
 import Icon, {IconType} from "@designsystem/foundation/icon";
 import colors from "@designsystem/foundation/colors";
@@ -86,8 +86,7 @@ const options = {
 
 function InvitationStatisticsDetail() {
     const navigate = useNavigate();
-    const [searchParams] = useSearchParams();
-    const url = searchParams.get('url');
+    const {url} = useParams();
     const [weddingStatistics, setWeddingStatistics] = useState<WeddingStatistics>();
 
     useEffect(() => {
@@ -111,7 +110,7 @@ function InvitationStatisticsDetail() {
                     size={24}
                     style={{cursor: 'pointer'}}
                     onClick={() => {
-                        navigate('/invitation/statistics');
+                        navigate('/statistics');
                     }}
                 />
                 {weddingStatistics && (