From ae6f004172835390d6f721725de17346581b146c Mon Sep 17 00:00:00 2001 From: eunhak Date: Tue, 9 Apr 2024 23:11:38 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20HotItem=20UI=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/page.module.scss | 8 +++ src/app/page.tsx | 52 ++++++++----------- .../home/filer-group/WashFilterGroup.tsx | 26 ++++++---- src/components/home/hotItem/HotItem.tsx | 14 +++-- src/remote/api/requests/home/home.get.api.ts | 23 ++++++-- 5 files changed, 77 insertions(+), 46 deletions(-) diff --git a/src/app/page.module.scss b/src/app/page.module.scss index 91d0f34b..352db010 100644 --- 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 index 19e4a266..86aded56 100644 --- 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(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() {
- {/* */}
- - - - - - - 지금 HOT한 제품 - - + - + + {isLoading ? : null} +
+ +
추천 세차용품 @@ -84,6 +69,15 @@ function Home() {
+ + + +
+ + 이런 상품은 어때요? + +
+
diff --git a/src/components/home/filer-group/WashFilterGroup.tsx b/src/components/home/filer-group/WashFilterGroup.tsx index e7dee92f..e5c492f8 100644 --- 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>; + setFilter: React.Dispatch>; }) { const handleRadioValue = (e: React.ChangeEvent) => { - const sortType = e.target.value as SearchWashFilterType; + const sortType = e.target.value as SearchFilterType; setFilter(sortType); }; return ( } label="세정제" - name="filter" - type="filter" - value="viewCnt-order" + name="washFilter" + type="washFilter" + value="cleaning" defaultChecked onChange={handleRadioValue} /> } label="코팅제" - name="filter" - type="filter" - value="violation-products" + name="washFilter" + type="washFilter" + value="coating" onChange={handleRadioValue} /> diff --git a/src/components/home/hotItem/HotItem.tsx b/src/components/home/hotItem/HotItem.tsx index 0cf50f9f..b774e8c1 100644 --- 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 ( <> - {/* */} + - + + + 지금 HOT한 제품 + + +
{HotItemList?.map((item, index) => { return ; diff --git a/src/remote/api/requests/home/home.get.api.ts b/src/remote/api/requests/home/home.get.api.ts index 440f1777..3c89af7e 100644 --- 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('/recommend-products'); + const response = await getRequest( + '/recommend-products', + ); return response; }; /* ----- 제품 목록 정보 api ----- */ -export const getProductList = async (pageNum: number, size: number, sortType: SearchFilterType) => { - const response = await getRequest(`/products/rank?sortType=${sortType}&page=${pageNum}&size=${size}`); +export const getProductList = async ( + pageNum: number, + size: number, + sortType: SearchFilterType | SearchWashFilterType, +) => { + const response = await getRequest( + `/products/rank?sortType=${sortType}&page=${pageNum}&size=${size}`, + ); return response; };