design routing 개선, 청첩장 수정

LinkMarry · Jan 19, 2025 · e38c7c7 · e38c7c7
1 parent fec9643
commit e38c7c7
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 350 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -40,8 +40,8 @@ function App() {
                 <Route element={<InvitationLayout/>}>
                     <Route path={'dashboard'}>
                         <Route index={true} element={<InvitationDashboard/>}/>
-                        <Route path={'guest-comment'} element={<InvitationDashboardGuestComment/>}/>
-                        <Route path={'design'} element={<InvitationDesign/>}/>
+                        <Route path={'guest-comment/:url'} element={<InvitationDashboardGuestComment/>}/>
+                        <Route path={'design/:url'} element={<InvitationDesign/>}/>
                     </Route>
                     <Route path={'statistics'}>
                         <Route index={true} element={<InvitationStatistics/>}/>

diff --git a/src/page/invitation/dashboard/component/DashboardInvitationCell.tsx b/src/page/invitation/dashboard/component/DashboardInvitationCell.tsx
@@ -62,7 +62,7 @@ ${baseInfo.groomName}, ${baseInfo.brideName}님의 링크메리 모바일 청첩
                 onClick('edit');
                 break;
             case 'guestComment':
-                navigate(`guest-comment?url=${weddingInfo.url}`);
+                navigate(`guest-comment/${weddingInfo.url}`);
                 break;
             case 'remove':
                 onClick('remove');
@@ -95,7 +95,9 @@ ${baseInfo.groomName}, ${baseInfo.brideName}님의 링크메리 모바일 청첩
                     </Column>
                     <Row gap={10}>
                         <Button text={'워터마크 제거'} role={'assistive'} style={{background: colors.white, flex: 1}}/>
-                        <Button text={'수정하기'} role={'assistive'} style={{background: colors.white, flex: 1}}/>
+                        <Button text={'수정하기'} role={'assistive'} style={{background: colors.white, flex: 1}} onClick={() => {
+                            navigate(`/dashboard/design/${weddingInfo.url}`);
+                        }}/>
                     </Row>
                 </Column>
             </S.content>

diff --git a/src/page/invitation/dashboard/dialog/CreateDesignDialog.tsx b/src/page/invitation/dashboard/dialog/CreateDesignDialog.tsx
@@ -34,7 +34,7 @@ function CreateDesignDialog(
 
         try {
             await weddingApi.checkUrlConflict(url);
-            navigate(`/dashboard/design?url=${url}`);
+            navigate(`/dashboard/design/${url}`);
         } catch (error) {
             console.error(error);
             alert('이미 사용 중인 URL 입니다.');

diff --git a/src/page/invitation/dashboard/guestComment/InvitationDashboardGuestComment.tsx b/src/page/invitation/dashboard/guestComment/InvitationDashboardGuestComment.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import {useNavigate, useSearchParams} from "react-router-dom";
+import {useNavigate, useParams, useSearchParams} from "react-router-dom";
 import styled from "styled-components";
 import {Column} from "@designsystem/component/flexLayout";
 import colors from "@designsystem/foundation/colors";
@@ -10,8 +10,7 @@ import Comment from "@remote/value/Comment";
 import weddingApi from "@remote/api/WeddingApi";
 
 function InvitationDashboardGuestComment() {
-    const [searchParams] = useSearchParams();
-    const url = searchParams.get('url');
+    const {url} = useParams();
     const navigate = useNavigate();
     const [comments, setComments] = useState<Comment[]>();