From e199b993c9fe8de5261b7ed4e11b4014043f65e6 Mon Sep 17 00:00:00 2001
From: Leejin-Yang <ejin1996@gmail.com>
Date: Tue, 9 Apr 2024 22:50:21 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A6=AC=EB=B7=B0=20=EC=A0=95=EB=A0=AC?=
 =?UTF-8?q?=20=EB=B0=94=ED=85=80=EC=8B=9C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ProductDetailPage/ProductDetailPage.tsx   | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/pages/ProductDetailPage/ProductDetailPage.tsx b/src/pages/ProductDetailPage/ProductDetailPage.tsx
index 34369025..0367084c 100644
--- a/src/pages/ProductDetailPage/ProductDetailPage.tsx
+++ b/src/pages/ProductDetailPage/ProductDetailPage.tsx
@@ -1,6 +1,6 @@
-import { useBottomSheet } from '@fun-eat/design-system';
+import { BottomSheet, useBottomSheet } from '@fun-eat/design-system';
 import { useQueryErrorResetBoundary } from '@tanstack/react-query';
-import { useState, useRef, Suspense } from 'react';
+import { Suspense } from 'react';
 import { useParams, useLocation, useNavigate } from 'react-router-dom';
 
 import { main, registerButton, registerButtonWrapper, section, sortWrapper } from './productDetailPage.css';
@@ -13,15 +13,16 @@ import {
   ErrorBoundary,
   ErrorComponent,
   Loading,
-  ScrollButton,
+  SelectOptionList,
 } from '@/components/Common';
 import { ProductDetailItem, ProductRecipeList } from '@/components/Product';
 import { ReviewList } from '@/components/Review';
 import { PREVIOUS_PATH_LOCAL_STORAGE_KEY, REVIEW_SORT_OPTIONS } from '@/constants';
 import { PATH } from '@/constants/path';
-import { useGA, useSortOption } from '@/hooks/common';
+import { useGA, useSelect } from '@/hooks/common';
 import { useMemberQuery } from '@/hooks/queries/members';
 import { useProductDetailQuery } from '@/hooks/queries/product';
+import type { SortOption } from '@/types/common';
 import { setLocalStorage } from '@/utils/localStorage';
 
 export const ProductDetailPage = () => {
@@ -34,25 +35,15 @@ export const ProductDetailPage = () => {
 
   const { reset } = useQueryErrorResetBoundary();
 
-  const { selectedOption, selectSortOption } = useSortOption(REVIEW_SORT_OPTIONS[0]);
+  const [currentSortOption, setSortOption] = useSelect<SortOption>(REVIEW_SORT_OPTIONS[0]);
   const { isOpen, isClosing, handleOpenBottomSheet, handleCloseBottomSheet } = useBottomSheet();
-  const [activeSheet, setActiveSheet] = useState<'registerReview' | 'sortOption'>('sortOption');
   const { gaEvent } = useGA();
 
-  const productDetailPageRef = useRef<HTMLDivElement>(null);
-
   if (!productId) {
     return <NotFoundPage />;
   }
 
-  const handleOpenRegisterReviewSheet = () => {
-    setActiveSheet('registerReview');
-    handleOpenBottomSheet();
-    gaEvent({ category: 'button', action: '상품 리뷰 작성하기 버튼 클릭', label: '상품 리뷰 작성' });
-  };
-
   const handleOpenSortOptionSheet = () => {
-    setActiveSheet('sortOption');
     handleOpenBottomSheet();
     gaEvent({ category: 'button', action: '상품 리뷰 정렬 버튼 클릭', label: '상품 리뷰 정렬' });
   };
@@ -85,23 +76,32 @@ export const ProductDetailPage = () => {
         <section className={section}>
           <SectionHeader name="리뷰" />
           <div className={sortWrapper}>
-            <SortButton option={selectedOption} onClick={handleOpenSortOptionSheet} />
+            <SortButton option={currentSortOption} onClick={handleOpenSortOptionSheet} />
           </div>
           <div style={{ height: '24px' }} />
           <ErrorBoundary fallback={ErrorComponent} handleReset={reset}>
             <Suspense fallback={<Loading />}>
-              <ReviewList productId={Number(productId)} selectedOption={selectedOption} />
+              <ReviewList productId={Number(productId)} selectedOption={currentSortOption} />
             </Suspense>
           </ErrorBoundary>
         </section>
 
+        {/*로그인 여부에 따라 링크 경로*/}
         <div className={registerButtonWrapper}>
           <button type="button" className={member ? registerButton.active : registerButton.disabled}>
             {member ? '리뷰 작성하기' : '로그인하고 리뷰 작성하기'}
           </button>
         </div>
-        <ScrollButton targetRef={productDetailPageRef} />
       </main>
+
+      <BottomSheet isOpen={isOpen} isClosing={isClosing} maxWidth="400px" close={handleCloseBottomSheet}>
+        <SelectOptionList
+          options={REVIEW_SORT_OPTIONS}
+          currentOption={currentSortOption}
+          selectOption={setSortOption}
+          close={handleCloseBottomSheet}
+        />
+      </BottomSheet>
     </>
   );
 };