refactor(review-write): 리뷰 쓰기 페이지 url 수정 (쿼리 파라미터로 id, 카테고리, 챌린지 전달)

KNU-HAEDAL · Oct 2, 2024 · 312b6ea · 312b6ea
1 parent 348cda5
commit 312b6ea
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 15 deletions.
diff --git a/src/pages/my-challenge-record/index.tsx b/src/pages/my-challenge-record/index.tsx
@@ -43,8 +43,16 @@ const MyChallengeRecord = () => {
     return () => window.removeEventListener('scroll', handleScroll);
   }, [loadMoreChallenges]);
 
-  const handleNavigate = (id: number) => {
-    navigate(`/challenge/${id}/review`);
+  const handleChallengeClick = (
+    challengeId: number,
+    title: string,
+    category?: string
+  ) => {
+    if (category) {
+      navigate(
+        `/challenge/write?id=${challengeId}&category=${category}&title=${title}`
+      );
+    } else navigate(`/challenge/write?id=${challengeId}&title=${title}`);
   };
 
   return (
@@ -67,7 +75,12 @@ const MyChallengeRecord = () => {
                 challengeTitle={challenge.challengeTitle}
                 userNickname={challenge.user.nickname}
                 profileImageUrl={challenge.user.profileImageUrl}
-                onClick={() => handleNavigate(challenge.challengeId)}
+                onClick={() =>
+                  handleChallengeClick(
+                    challenge.challengeId,
+                    challenge.challengeTitle
+                  )
+                }
               />
             ))
           ) : (

diff --git a/src/pages/review-write/index.tsx b/src/pages/review-write/index.tsx
@@ -1,13 +1,11 @@
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
 
 import { postReview } from '@/apis/review/review.api';
 import ChallengeTitle from '@/components/common/challenge-title';
 import CTA, { CTAContainer } from '@/components/common/cta';
 import Textarea from '@/components/common/form/textarea';
 import { StarRating } from '@/components/common/star-rating';
 import TopBar, { HEADER_HEIGHT } from '@/components/features/layout/top-bar';
-import { useChallengeStore } from '@/store/useChallengeStore';
 import {
   formatRating,
   formatDifficulty,
@@ -19,12 +17,11 @@ import styled from '@emotion/styled';
 const MIN_CONTENT_LENGTH = 20;
 
 const ReviewWrite = () => {
-  const { id } = useParams();
-  const challengeId = Number(id);
-  // const challengeGrouptitle = sessionStorage.getItem('challengeGroupTitle');
-  const categoryLabel = sessionStorage.getItem('categoryLabel');
-  const { challengeTitle } = useChallengeStore();
-  // const challengeGroupTitle = sessionStorage.getItem('challengeGroupTitle');
+  // 쿼리 파라미터 추출
+  const searchParams = new URLSearchParams(location.search);
+  const challengeId = Number(searchParams.get('id'));
+  const category = searchParams.get('category') || '';
+  const title = searchParams.get('title') || '';
 
   const [rating, setRating] = useState(0);
   const difficultyList = [1, 2, 3];
@@ -103,9 +100,8 @@ const ReviewWrite = () => {
     <>
       <TopBar title='리뷰 쓰기' backgroundColor='#fff' type='Page' />
       <Wrapper>
-        {categoryLabel && challengeTitle && (
-          <ChallengeTitle category={categoryLabel} title={challengeTitle} />
-        )}
+        <ChallengeTitle category={category} title={title} />
+
         <Inner>
           <FormItem alignItems='center' alignSelf='center'>
             <Box display='flex' flex-direction='row' alignItems='center'>

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -119,7 +119,7 @@ const router = createBrowserRouter([
         ),
       },
       {
-        path: `:id/${RouterPath.write}`,
+        path: `${RouterPath.write}`,
         element: (
           <ProtectedRoute>
             <ReviewWrite />