From c9f3f27af565e5dc5070d3515923d3e85d97bd7a Mon Sep 17 00:00:00 2001
From: seoyeong <bsy0313@gmail.com>
Date: Tue, 23 Jan 2024 18:23:28 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A6=90=EA=B2=A8=EC=B0=BE=EA=B8=B0=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A0=9C=EC=9E=91=20#117?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/favorite/page.tsx | 108 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 105 insertions(+), 3 deletions(-)

diff --git a/src/app/favorite/page.tsx b/src/app/favorite/page.tsx
index 8d9f751f..11c6bdd7 100644
--- a/src/app/favorite/page.tsx
+++ b/src/app/favorite/page.tsx
@@ -1,10 +1,112 @@
-import BottomNav from '@/components/shared/bottom-nav/BottomNav';
+'use client';
+
+import { useForm } from 'react-hook-form';
+
+import classNames from 'classnames/bind';
+
+import { SEARCH_FILTER_MAP, SearchFilterType } from '@constants/searchByMap';
+import BottomNav from '@shared/bottom-nav/BottomNav';
+import Dropdown from '@shared/dropdown/Dropdown';
+import Header from '@shared/header/Header';
+import ProductArticle from '@shared/product-article/ProductArticle';
+import SearchBar from '@shared/search-bar/SearchBar';
+import Spacing from '@shared/spacing/Spacing';
+import Text from '@shared/text/Text';
+
+import styles from './page.module.scss';
+
+const cx = classNames.bind(styles);
+
+const productArticleData = [
+  {
+    brand: '카믹스',
+    category: '코팅제',
+    id: 1,
+    img: '/assets/profile.JPG',
+    name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
+    warningLevel: 'warning',
+  },
+  {
+    brand: '카믹스',
+    category: '코팅제',
+    id: 2,
+    img: '/assets/profile.JPG',
+    name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
+    warningLevel: 'warning',
+  },
+  {
+    brand: '카믹스',
+    category: '코팅제',
+    id: 3,
+    img: '/assets/profile.JPG',
+    name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
+    warningLevel: 'warning',
+  },
+  {
+    brand: '카믹스',
+    category: '코팅제',
+    id: 4,
+    img: '/assets/profile.JPG',
+    name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
+    warningLevel: 'warning',
+  }, {
+    brand: '카믹스',
+    category: '코팅제',
+    id: 5,
+    img: '/assets/profile.JPG',
+    name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
+    warningLevel: 'warning',
+  }, {
+    brand: '카믹스',
+    category: '코팅제',
+    id: 6,
+    img: '/assets/profile.JPG',
+    name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
+    warningLevel: 'warning',
+  },
+];
+
+const options = [
+  { label: '조회순', value: 'view' },
+  { label: '위반제품순', value: 'violations' },
+  { label: '최신순', value: 'latest' },
+  { label: '추천순', value: 'recommended' },
+];
 
 function FavoritePage() {
+  const { register, watch } = useForm({
+    defaultValues: {
+      filter: 'view',
+    },
+  });
+
+  // 스크롤 시 SearchBar 숨기기
+
   return (
-    <div>
+    <>
+      <Header isDisplayLogo={false}>즐겨찾기</Header>
+      <Spacing size={8} />
+      <main className={cx('mainContainer')}>
+        <div className={cx('hideWrapper')}>
+          <SearchBar />
+          <div className={cx('filterBox')}>
+            <Text typography="t6" color="gray300">{`총 ${productArticleData.length}개`}</Text>
+            <Dropdown
+              options={options}
+              selectedLabel={(SEARCH_FILTER_MAP[watch('filter') as SearchFilterType])}
+              type="favorite"
+              {...register('filter')}
+            />
+          </div>
+        </div>
+        <div className={cx('productArticleContainer')}>
+          {productArticleData.map((item) => {
+            return <ProductArticle key={item.id} itemData={item} />;
+          })}
+        </div>
+      </main>
       <BottomNav />
-    </div>
+    </>
   );
 }