From fbaff6583732df2edecd1d0a37fb482bb0e2d82a Mon Sep 17 00:00:00 2001
From: wogha95 <wogha95@naver.com>
Date: Sat, 15 Oct 2022 00:53:52 +0900
Subject: [PATCH 1/2] =?UTF-8?q?[BM-394]=20=F0=9F=94=A5=20=EB=AF=B8?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/common/ProductCard/index.tsx | 2 +-
 pages/auth/index.tsx                    | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/common/ProductCard/index.tsx b/components/common/ProductCard/index.tsx
index a751232c..9f81d27c 100644
--- a/components/common/ProductCard/index.tsx
+++ b/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';
 
diff --git a/pages/auth/index.tsx b/pages/auth/index.tsx
index 041dc65e..f008b9bc 100644
--- a/pages/auth/index.tsx
+++ b/pages/auth/index.tsx
@@ -1,4 +1,3 @@
-import { Center, Spinner } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 

From fd0745da2afa7a0bab23bba72da450d7fe035126 Mon Sep 17 00:00:00 2001
From: wogha95 <wogha95@naver.com>
Date: Sat, 15 Oct 2022 00:56:13 +0900
Subject: [PATCH 2/2] =?UTF-8?q?[BM-394]=20=F0=9F=90=9B=20url=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=EB=B0=8F=20=EA=B2=80=EC=83=89=20router=20=EB=B2=84?=
 =?UTF-8?q?=EA=B7=B8=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.tsx          |  7 ++-----
 pages/products/index.tsx | 28 +++++++++++-----------------
 2 files changed, 13 insertions(+), 22 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index b7343c2a..07ad5496 100644
--- a/pages/index.tsx
+++ b/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;
diff --git a/pages/products/index.tsx b/pages/products/index.tsx
index 33483410..d943fd86 100644
--- a/pages/products/index.tsx
+++ b/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)