feat: HotItem UI 구현

Kernel360 · Apr 9, 2024 · ae6f004 · ae6f004
1 parent 356bfe5
commit ae6f004
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 46 deletions.
diff --git a/src/app/page.module.scss b/src/app/page.module.scss
@@ -13,4 +13,12 @@
   .productListContainer {
     padding: 0 var(--default-padding) 80px;
   }
+
+  .recommendListContainer {
+    padding: 0 var(--default-padding) 80px;
+  }
+
+  .hotItemContainer {
+    padding: 0 var(--default-padding) 80px;
+  }
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -9,10 +9,13 @@ import { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames/bind';
 import { useRouter } from 'next/navigation';
 
+import { Spinner } from '@/components/additional-info/spinner/Spinner';
+import HotItem from '@/components/home/hotItem/HotItem';
 import Caption from '@/components/icons/Caption';
 import Flex from '@/components/shared/flex/Flex';
 import HomeSearchBar from '@/components/shared/home-search-bar/HomeSearchBar';
 import ImgToText from '@/components/shared/ocr/Ocr';
+import { getProductDetails } from '@/remote/api/requests/product/product.get.api';
 import ProductList from '@components/home/product-list/ProductList';
 import { MOCK_BANNER_DATA } from '@mocks/homeHandler/mocks';
 import BottomNav from '@shared/bottom-nav/BottomNav';
@@ -32,26 +35,9 @@ import styles from './page.module.scss';
 const cx = classNames.bind(styles);
 
 function Home() {
-  // useEffect(() => {
-  //   const fetchData = async () => {
-  //     try {
-  //       const { Img } = await ImgToText();
-  //       const text = await Img();
-  //       console.log(text);
-  //     } catch (error) {
-  //       console.error(error);
-  //     }
-  //   };
-
-  //   fetchData();
-  // }, []);
-
+  const [isLoading, setIsLoading] = useState(false);
   const keywordRef = useRef<HTMLInputElement>(null);
   const router = useRouter();
-  // const [trigger, setTrigger] = useState(false);
-  // useEffect(() => {
-  //   Img();
-  // }, []);
   const handleSearch = () => {
     router.push(`/search?keyword=${keywordRef.current?.value}`);
   };
@@ -62,20 +48,19 @@ function Home() {
       <main className={cx('mainContainer')} style={{ position: 'relative' }}>
         <Banner bannerData={MOCK_BANNER_DATA} />
         <Spacing size={8} />
-        {/* <Spacing size={220} /> */}
         <div className={cx('recommendWrapper')}>
           <Flex justify="center">
-            <HomeSearchBar ref={keywordRef} handleSearch={handleSearch} />
-          </Flex>
-          <Spacing size={80} />
-
-          <Flex align="center">
-            <Text typography="t4" bold css={{ padding: '0 4px 0 24px' }}>
-              지금 HOT한 제품
-            </Text>
-            <Caption />
+            <HomeSearchBar
+              ref={keywordRef}
+              handleSearch={handleSearch}
+              setIsLoading={setIsLoading}
+            />
           </Flex>
-
+          <Spacing size={40} />
+          {isLoading ? <Spinner /> : null}
+          <div className={cx('hotItemContainer')}>
+            <HotItem />
+          </div>
           <Spacing size={10} />
           <Text typography="t4" bold>
             추천 세차용품
@@ -84,6 +69,15 @@ function Home() {
 
           <RecommendListContainer />
         </div>
+
+        <Spacing size={40} />
+
+        <div className={cx('recommendListContainer')}>
+          <Text typography="t4" bold>
+            이런 상품은 어때요?
+          </Text>
+        </div>
+
         <Spacing size={32} />
         <div className={cx('productListContainer')}>
           <Text typography="t4" bold>

diff --git a/src/components/home/filer-group/WashFilterGroup.tsx b/src/components/home/filer-group/WashFilterGroup.tsx
@@ -1,34 +1,42 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { SetStateAction } from 'react';
 
-import { SearchWashFilterType } from '@/constants/searchByMap';
+import { Cleaning } from '@/components/icons/Cleaning';
+import { Coating } from '@/components/icons/Coating';
+import {
+  SearchFilterType,
+  SearchWashFilterType,
+} from '@/constants/searchByMap';
 import Flex from '@shared/flex/Flex';
 import Radio from '@shared/radio/Radio';
 
 function WashFilterGroup({
   setFilter,
 }: {
-  setFilter: React.Dispatch<SetStateAction<SearchWashFilterType>>;
+  setFilter: React.Dispatch<SetStateAction<SearchFilterType>>;
 }) {
   const handleRadioValue = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const sortType = e.target.value as SearchWashFilterType;
+    const sortType = e.target.value as SearchFilterType;
     setFilter(sortType);
   };
 
   return (
     <Flex justify="space-between" align="center" gap={8}>
       <Radio
+        img={<Cleaning />}
         label="세정제"
-        name="filter"
-        type="filter"
-        value="viewCnt-order"
+        name="washFilter"
+        type="washFilter"
+        value="cleaning"
         defaultChecked
         onChange={handleRadioValue}
       />
       <Radio
+        img={<Coating />}
         label="코팅제"
-        name="filter"
-        type="filter"
-        value="violation-products"
+        name="washFilter"
+        type="washFilter"
+        value="coating"
         onChange={handleRadioValue}
       />
     </Flex>

diff --git a/src/components/home/hotItem/HotItem.tsx b/src/components/home/hotItem/HotItem.tsx
@@ -6,15 +6,18 @@ import React, { useState } from 'react';
 
 import classNames from 'classnames/bind';
 
+import Caption from '@/components/icons/Caption';
+import { Refresh } from '@/components/icons/Refresh';
+import Flex from '@/components/shared/flex/Flex';
 import HotItemArticle from '@/components/shared/hotItem-article/HotItemArticle';
 import useHotItemList from '@/remote/queries/home/useHotItemList';
 import useProductList from '@/remote/queries/home/useProductList';
 import WashFilterGroup from '@components/home/filer-group/WashFilterGroup';
 import { SearchWashFilterType, SearchFilterType } from '@constants/searchByMap';
 import Spacing from '@shared/spacing/Spacing';
+import Text from '@shared/text/Text';
 
 import styles from './HotItem.module.scss';
-import { Refresh } from '@/components/icons/Refresh';
 
 const cx = classNames.bind(styles);
 
@@ -30,9 +33,14 @@ function HotItem() {
 
   return (
     <>
-      {/* <WashFilterGroup setFilter={setFilter} /> */}
+      <WashFilterGroup setFilter={setFilter} />
       <Spacing size={16} />
-
+      <Flex align="center">
+        <Text typography="t4" bold>
+          지금 HOT한 제품
+        </Text>
+        <Caption />
+      </Flex>
       <div className={cx('productArticleContainer')}>
         {HotItemList?.map((item, index) => {
           return <HotItemArticle key={index} itemData={item} />;

diff --git a/src/remote/api/requests/home/home.get.api.ts b/src/remote/api/requests/home/home.get.api.ts
@@ -1,7 +1,12 @@
-import { SearchFilterType } from '@/constants/searchByMap';
+import {
+  SearchFilterType,
+  SearchWashFilterType,
+} from '@/constants/searchByMap';
 
 import {
-  BannerType, ProductListInfoType, RecommendProductsType,
+  BannerType,
+  ProductListInfoType,
+  RecommendProductsType,
 } from '../../types/home';
 import { getRequest } from '../requests.api';
 
@@ -14,14 +19,22 @@ export const getBanner = async () => {
 
 /* ----- 추천 제품 정보 api ----- */
 export const getRecommendProducts = async () => {
-  const response = await getRequest<RecommendProductsType>('/recommend-products');
+  const response = await getRequest<RecommendProductsType>(
+    '/recommend-products',
+  );
 
   return response;
 };
 
 /* ----- 제품 목록 정보 api ----- */
-export const getProductList = async (pageNum: number, size: number, sortType: SearchFilterType) => {
-  const response = await getRequest<ProductListInfoType>(`/products/rank?sortType=${sortType}&page=${pageNum}&size=${size}`);
+export const getProductList = async (
+  pageNum: number,
+  size: number,
+  sortType: SearchFilterType | SearchWashFilterType,
+) => {
+  const response = await getRequest<ProductListInfoType>(
+    `/products/rank?sortType=${sortType}&page=${pageNum}&size=${size}`,
+  );
 
   return response;
 };