Merge pull request #246 from Kernel360/feature-recommend-list-api

페이지 기능: 추천 상품 리스트 api 적용
Kernel360 · Mar 3, 2024 · f6d74bf · f6d74bf
2 parents 69059f3 + 6842cb8
commit f6d74bf
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 62 deletions.
diff --git a/public/assets/세정제.webp b/public/assets/세정제.webp
diff --git a/public/assets/코팅제.webp b/public/assets/코팅제.webp
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,15 +1,10 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
 import classNames from 'classnames/bind';
 
-import FilterGroup from '@components/home/filer-group/FilterGroup';
 import ProductList from '@components/home/product-list/ProductList';
-import { MOCK_BANNER_DATA, MOCK_RECOMMEND_PRODUCTS } from '@mocks/homeHandler/mocks';
-import useBanner from '@remote/queries/home/useBanner';
-import useRecommendProducts from '@remote/queries/home/useRecommendProducts';
+import { MOCK_BANNER_DATA } from '@mocks/homeHandler/mocks';
 import BottomNav from '@shared/bottom-nav/BottomNav';
 import Banner from '@shared/carousel/Banner';
-import RecommendList from '@shared/carousel/RecommendList';
+import RecommendListContainer from '@shared/carousel/RecommendListContainer';
 import Header from '@shared/header/Header';
 import ScrollToTop from '@shared/scroll-to-top/ScrollToTop';
 import Spacing from '@shared/spacing/Spacing';
@@ -20,20 +15,6 @@ import styles from './page.module.scss';
 const cx = classNames.bind(styles);
 
 function Home() {
-  // 테스트
-  // TODO: 비로그인 회원과 부가정보를 입력하지 않은 회원은 부가정보 입력 배너 보이도록 UI 추가
-  // const { data: bannerData, isLoading: bannerLoading } = useBanner();
-  // const {
-  //   data: recommendProductsData, isLoading:
-  //   recommendProductsLoading,
-  // } = useRecommendProducts();
-  // const { data: productListData, isLoading: productListLoading } = useProductList();
-  // asd
-  // if (bannerLoading || recommendProductsLoading || productListLoading) {
-  //   return <Loader />;
-  // asd
-  // }
-
   return (
     <>
       <Header className={cx('home')} type="home" />
@@ -44,7 +25,7 @@ function Home() {
         <div className={cx('recommendWrapper')}>
           <Text typography="t4" bold>추천 세차용품</Text>
           <Spacing size={16} />
-          <RecommendList recommendProductsData={MOCK_RECOMMEND_PRODUCTS} />
+          <RecommendListContainer />
         </div>
         <Spacing size={35} />
         <div className={cx('productListContainer')}>

diff --git a/src/components/shared/carousel/Banner.tsx b/src/components/shared/carousel/Banner.tsx
@@ -27,7 +27,7 @@ function Banner({ bannerData }: { bannerData: BannerType }) {
     <Slider {...settings} className="banner-slide">
       {bannerList.map((slide) => {
         return (
-          <Link href={slide.link} key={slide.id}>
+          <Link href={slide.productNo.toString()} key={slide.productNo}>
             <Image
               src={slide.imageSource}
               alt={slide.alt}

diff --git a/src/components/shared/carousel/RecommendList.stories.tsx b/src/components/shared/carousel/RecommendList.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { MOCK_RECOMMEND_PRODUCTS } from '@mocks/homeHandler/mocks';
+import { MOCK_RECOMMEND_PRODUCTS } from '@/mocks/homeHandler/mocks';
 
 import RecommendList from './RecommendList';
 
@@ -17,7 +17,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const AdBanner: Story = {
+export const DefaultRecommendList: Story = {
   args: {
     recommendProductsData: MOCK_RECOMMEND_PRODUCTS,
   },

diff --git a/src/components/shared/carousel/RecommendList.tsx b/src/components/shared/carousel/RecommendList.tsx
@@ -10,32 +10,36 @@ import { RecommendProductsType } from '@remote/api/types/home';
 import Text from '@shared/text/Text';
 
 const settings = {
-  dots: false,
-  infinite: false,
+  infinite: true,
   slidesToShow: 4,
   slidesToScroll: 2,
+  dots: false,
   adaptiveHeight: true,
+  autoplay: true,
   arrows: false,
+  speed: 2000,
+  autoplaySpeed: 5000,
 };
 
 // eslint-disable-next-line max-len
 function RecommendList({ recommendProductsData }: { recommendProductsData: RecommendProductsType }) {
-  const recommendList = recommendProductsData.value;
+  const recommendList = recommendProductsData?.value;
 
   return (
     <Slider {...settings} className="recommend-slide">
       {recommendList?.map((slide) => {
         return (
-          <Link href={slide.link} key={slide.id}>
+          <Link href={slide.productNo.toString()} key={slide.productNo}>
             <div className="img-container">
               <Image
-                src={slide.imageSource}
+                // src={slide.imageSource}
+                src={slide.item === '코팅제' ? '/assets/코팅제.webp' : '/assets/세정제.webp'}
                 alt={slide.alt}
                 width={60}
                 height={60}
               />
             </div>
-            <Text color="gray800" typography="t7">{slide.productName}</Text>
+            <Text color="gray800" typography="t7" className="ellipsis" css={{ height: '35px' }}>{slide.productName}</Text>
           </Link>
         );
       })}

diff --git a/src/components/shared/carousel/RecommendListContainer.tsx b/src/components/shared/carousel/RecommendListContainer.tsx
@@ -0,0 +1,16 @@
+'use client';
+
+import React from 'react';
+
+import useRecommendProducts from '@remote/queries/home/useRecommendProducts';
+
+import RecommendList from './RecommendList';
+
+function RecommendListContainer() {
+  const { data: recommendProductsData } = useRecommendProducts();
+  return (
+    <RecommendList recommendProductsData={recommendProductsData!} />
+  );
+}
+
+export default RecommendListContainer;
diff --git a/src/mocks/homeHandler/mocks.ts b/src/mocks/homeHandler/mocks.ts
@@ -5,28 +5,28 @@ export const MOCK_BANNER_DATA = {
   message: '추천제품정보 조회 성공',
   value: [
     {
-      id: 1,
-      link: '/',
+      productNo: 1,
       imageSource: '/assets/banner1.jpg',
       alt: '그림',
+      item: '세정제',
     },
     {
-      id: 2,
-      link: '/',
+      productNo: 2,
       imageSource: '/assets/banner2.jpg',
       alt: '그림',
+      item: '세정제',
     },
     {
-      id: 3,
-      link: '/',
+      productNo: 3,
       imageSource: '/assets/banner3.jpg',
       alt: '그림',
+      item: '세정제',
     },
     {
-      id: 4,
-      link: '/',
+      productNo: 4,
       imageSource: '/assets/banner4.jpg',
       alt: '그림',
+      item: '세정제',
     },
   ],
 };
@@ -38,75 +38,75 @@ export const MOCK_RECOMMEND_PRODUCTS = {
   message: '추천 제품 조회 성공',
   value: [
     {
-      id: 1,
-      link: '/',
+      productNo: 1,
+      item: '/',
       imageSource: '/assets/recommendItem1.png',
       alt: '그림',
       productName: '카샴푸',
     },
     {
-      id: 2,
-      link: '/',
+      productNo: 2,
+      item: '/',
       imageSource: '/assets/recommendItem2.png',
       alt: '그림',
       productName: '휠 클리너',
     },
     {
-      id: 3,
-      link: '/',
+      productNo: 3,
+      item: '/',
       imageSource: '/assets/recommendItem3.png',
       alt: '그림',
       productName: '타올',
 
     },
     {
-      id: 4,
-      link: '/',
+      productNo: 4,
+      item: '/',
       imageSource: '/assets/recommendItem4.png',
       alt: '그림',
       productName: '먼지털이개',
 
     },
     {
-      id: 5,
-      link: '/',
+      productNo: 5,
+      item: '/',
       imageSource: '/assets/recommendItem4.png',
       alt: '그림',
       productName: '먼지털이개',
 
     },
     {
-      id: 6,
-      link: '/',
+      productNo: 6,
+      item: '/',
       imageSource: '/assets/recommendItem1.png',
       alt: '그림',
       productName: '카샴푸',
     },
     {
-      id: 7,
-      link: '/',
+      productNo: 7,
+      item: '/',
       imageSource: '/assets/recommendItem1.png',
       alt: '그림',
       productName: '카샴푸',
     },
     {
-      id: 8,
-      link: '/',
+      productNo: 8,
+      item: '/',
       imageSource: '/assets/recommendItem2.png',
       alt: '그림',
       productName: '휠 클리너',
     },
     {
-      id: 9,
-      link: '/',
+      productNo: 9,
+      item: '/',
       imageSource: '/assets/recommendItem4.png',
       alt: '그림',
       productName: '먼지털이개',
 
     },
     {
-      id: 10,
-      link: '/',
+      productNo: 10,
+      item: '/',
       imageSource: '/assets/recommendItem3.png',
       alt: '그림',
       productName: '타올',

diff --git a/src/remote/api/requests/home/home.get.api.ts b/src/remote/api/requests/home/home.get.api.ts
@@ -14,7 +14,7 @@ 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;
 };

diff --git a/src/remote/api/types/home.ts b/src/remote/api/types/home.ts
@@ -1,10 +1,10 @@
 import { ICommon } from './common';
 
 export interface IBanner {
-  id: number
-  link: string
+  productNo: number
   imageSource: string
   alt: string
+  item: string
 }
 
 export interface IRecommendProducts extends IBanner {