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

src/pages/challenge-detail/index.tsx

@@ -38,7 +38,13 @@ const ChallengeDetailPage = () => {
     },
     {
       label: '리뷰',
-      panel: data ? <ReviewSection id={challengeGroupId} /> : null,
+      panel: data ? (
+        <ReviewSection
+          id={challengeGroupId}
+          category={data.category}
+          title={data.title}
+        />
+      ) : null,
     },
   ];
 
@@ -60,13 +66,6 @@ const ChallengeDetailPage = () => {
     fetchChallengeDetail();
   }, [challengeGroupId]);
 
-  // 챌린지 리뷰 페이지에 필요한 챌린지 제목 세션 스토리지에 저장
-  useEffect(() => {
-    if (data?.title) {
-      sessionStorage.setItem('challengeGroupTitle', data.title);
-    }
-  }, [data?.title]);
-
   return (
     <>
       <TopBar type='Page' title={'챌린지 상세 정보'} backgroundColor='#fff' />

src/pages/challenge-detail/review-section/index.tsx

@@ -7,14 +7,17 @@ import { getReview, getChallegeAvgScore } from '@/apis/review/review.api';
 import { type ReviewData } from '@/apis/review/review.response';
 import { StarRating } from '@/components/common/star-rating';
 import ReviewItem from '@/pages/review/components/review-item';
+import { RouterPath } from '@/routes/path';
 import * as Base from '@/styles/baseStyles';
 import { formatToFixed, formatWithComma } from '@/utils/formatters';
 
-interface Props {
+interface ReviewSectionProps {
   id: number;
+  category: string;
+  title: string;
 }
 
-export const ReviewSection = ({ id }: Props) => {
+export const ReviewSection = ({ id, category, title }: ReviewSectionProps) => {
   const DATA_SIZE = 5; // 가져올 리뷰 개수
   const [reviewList, setReviewList] = useState<ReviewData[]>([]);
   const [avgRating, setAvgRating] = useState<number | undefined>();
@@ -63,7 +66,11 @@ export const ReviewSection = ({ id }: Props) => {
             <S.AvgRating>{formattedAvgRating}</S.AvgRating>
             {avgRating && <StarRating rating={avgRating} />}
             <S.AllReviewButton
-              onClick={() => navigate(`/challenge/${id}/review`)}
+              onClick={() =>
+                navigate(
+                  `/${RouterPath.challenge}/review?id=${id}&category=${category}&title=${title}`
+                )
+              }
             >
               {formattedTotalRatings}개 모두 보기{' '}
               <IoIosArrowForward style={{ marginLeft: '4px' }} />

src/pages/review/index.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
-import { useParams } from 'react-router-dom';
 
 import ReviewItem from './components/review-item';
 import ReviewRating from './components/review-rating';
@@ -9,12 +8,16 @@ import type { ReviewData } from '@/apis/review/review.response';
 import ChallengeTitle from '@/components/common/challenge-title';
 import TopBar from '@/components/features/layout/top-bar';
 import * as Base from '@/styles/baseStyles';
+import { formatCategory } from '@/utils/formatters';
+// import { formatCategory } from '@/utils/formatters';
 import styled from '@emotion/styled';
 
 const Review = () => {
-  const { id } = useParams();
-  const challengeGroupId = Number(id);
-  const challengeGrouptitle = sessionStorage.getItem('challengeGroupTitle');
+  // 쿼리 파라미터 추출
+  const searchParams = new URLSearchParams(location.search);
+  const challengeGroupId = Number(searchParams.get('id'));
+  const category = searchParams.get('category') || '';
+  const title = searchParams.get('title') || '';
 
   const DATA_SIZE = 10; // 한번에 가져올 리뷰 개수
   const [reviewList, setReviewList] = useState<ReviewData[]>([]);
@@ -55,7 +58,7 @@ const Review = () => {
     <>
       <TopBar title='챌린지 리뷰' type='Page' backgroundColor='#fff' />
       <Wrapper>
-        <ChallengeTitle category='' title={challengeGrouptitle || ''} />
+        <ChallengeTitle category={formatCategory(category)} title={title} />
         <ReviewRating challengeGroupId={challengeGroupId} />
         {reviewList.length > 0 ? (
           // 리뷰 있을 때

src/routes/index.tsx

@@ -103,7 +103,7 @@ const router = createBrowserRouter([
         ),
       },
       {
-        path: `:id/${RouterPath.review}`,
+        path: `${RouterPath.review}`,
         element: (
           <ProtectedRoute>
             <Review />