Merge pull request #93 from prgrms-web-devcourse/BM-394

[BM-394] 검색 페이지 무한 렌더링 버그 수정

components/common/ProductCard/index.tsx

@@ -3,7 +3,7 @@ import { Box, Flex, Text } from '@chakra-ui/react';
 import Link from 'next/link';
 
 import { CardProductData } from 'types/product';
-import { priceFormat, remainedTimeFormat, SVG_URL } from 'utils';
+import { priceFormat, remainedTimeFormat } from 'utils';
 
 import ProductCardImage from './ProductCardImage';
 

pages/auth/index.tsx

@@ -1,4 +1,3 @@
-import { Center, Spinner } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 

pages/index.tsx

@@ -26,13 +26,11 @@ const Home: NextPage = () => {
     if (isView && hasNextPage) {
       fetchNextPage();
     }
-  }, [isView, productPages]);
+  }, [isView, productPages, fetchNextPage, hasNextPage]);
 
   const handleFormSubmit = (event: React.FormEvent) => {
     event.preventDefault();
-    router.push(
-      `/products?title=${title}&sort=END_DATE_ASC&category=ALL&progressed=true&offset=0&limit=10`
-    );
+    router.push(`/products?title=${title}`);
   };
 
   if (!isAuthFinished) {
@@ -48,7 +46,6 @@ const Home: NextPage = () => {
         <form onSubmit={handleFormSubmit}>
           <SearchInput keyword={title} onChange={setTitle} />
         </form>
-        {/* @TODO 컴포넌트로 분리해보기 */}
         {productPages?.pages.map(({ data }, pageIndex) => {
           return data.map((product, productIndex) => {
             const lastPageIndex = productPages.pages.length - 1;

pages/products/index.tsx

@@ -23,18 +23,21 @@ export const getServerSideProps: GetServerSideProps = async ({ query }) => {
   return { props: { queryDatas: query } };
 };
 
+const initialSortOption = 'END_DATE_ASC';
+const initialCategoryOption = 'ALL';
+const initialProgressedOption = true;
+
 const Products = ({
-  queryDatas,
+  queryDatas: { title },
 }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
   const router = useRouter();
-  const { title, sort, category, progressed } = queryDatas;
   const [keyword, setKeyword] = useState<string>(title);
   const [selectedSortOption, setSelectedSortOption] =
-    useState<sortOptionsENType>(sort as sortOptionsENType);
+    useState<sortOptionsENType>(initialSortOption);
   const [selectedCategoryOption, setSelectedCategoryOption] =
-    useState<categoryOptionsENType>(category as categoryOptionsENType);
+    useState<categoryOptionsENType>(initialCategoryOption);
   const [isProgressed, setIsProgressed] = useState<boolean>(
-    Boolean(JSON.parse(progressed))
+    initialProgressedOption
   );
 
   // @TODO 쿼리스트링이 누락된 경우 메인페이지로 이동하는 예외처리
@@ -55,24 +58,15 @@ const Products = ({
     if (isView && hasNextPage) {
       fetchNextPage();
     }
-  }, [isView, productPages]);
-
-  useEffect(() => {
-    // @TODO router 주소 분리 작업 (for 가독성)
-    router.push(
-      `/products?title=${keyword}&sort=${selectedSortOption}&category=${selectedCategoryOption}&progressed=${isProgressed}&offset=0&limit=10`
-    );
-  }, [selectedSortOption, selectedCategoryOption, isProgressed]);
+  }, [isView, productPages, fetchNextPage, hasNextPage]);
 
   useEffect(() => {
     refetch();
-  }, [router.asPath]);
+  }, [selectedSortOption, selectedCategoryOption, isProgressed, refetch]);
 
   const handleFormSubmit = (event: React.FormEvent) => {
     event.preventDefault();
-    router.push(
-      `/products?title=${keyword}&sort=${selectedSortOption}&category=${selectedCategoryOption}&progressed=${isProgressed}&offset=0&limit=10`
-    );
+    router.push(`/products?title=${keyword}`);
   };
 
   // @TODO FilterButton과 함께 간결한 코드로 풀어낼 필요 (with Type)