페이지 기능: 홈페이지 쿼리훅 제작

src/components/shared/carousel/Banner.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { MOCK_BANNER_DATA } from '@mocks/homeHandler/mocks';
+
 import Banner from './Banner';
 
 const meta = {
@@ -20,17 +22,6 @@ type Story = StoryObj<typeof meta>;
 
 export const AdBanner: Story = {
   args: {
-    bannerData: [{
-      id: 1, link: '/', src: '/assets/banner.png', alt: '그림',
-    },
-    {
-      id: 2, link: '/', src: '/assets/banner.png', alt: '그림',
-    },
-    {
-      id: 3, link: '/', src: '/assets/banner.png', alt: '그림',
-    },
-    {
-      id: 4, link: '/', src: '/assets/banner.png', alt: '그림',
-    }],
+    bannerData: MOCK_BANNER_DATA,
   },
 };

src/components/shared/carousel/Banner.tsx

@@ -6,7 +6,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 
 import './Banner.scss';
-import { IBannerData } from './types/carousel.type';
+import { BannerType } from '@remote/api/types/home';
 
 const settings = {
   dots: true,
@@ -20,11 +20,13 @@ const settings = {
   arrows: false,
 };
 
-function Banner({ bannerData }: { bannerData: IBannerData[] }) {
+function Banner({ bannerData }: { bannerData: BannerType }) {
+  const bannerList = bannerData.value;
+
   return (
     <div className="container">
       <Slider {...settings} dotsClass="dotsCustom">
-        {bannerData.map((slide) => {
+        {bannerList.map((slide) => {
           return (
             <Link href={slide.link} key={slide.id}>
               <Image

src/components/shared/carousel/RecommendList.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { MOCK_RECOMMEND_PRODUCTS } from '@mocks/homeHandler/mocks';
+
 import RecommendList from './RecommendList';
 
 const meta = {
@@ -9,9 +11,6 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {
-    recommendListData: {
-      control: 'object',
-    },
   },
 } satisfies Meta<typeof RecommendList>;
 
@@ -20,53 +19,6 @@ type Story = StoryObj<typeof meta>;
 
 export const AdBanner: Story = {
   args: {
-    recommendListData: [
-      {
-        id: 1,
-        link: '/',
-        src: '/assets/recommendItem1.png',
-        alt: '그림',
-        productName: '카샴푸',
-      },
-      {
-        id: 2,
-        link: '/',
-        src: '/assets/recommendItem2.png',
-        alt: '그림',
-        productName: '휠 클리너',
-      },
-      {
-        id: 3,
-        link: '/',
-        src: '/assets/recommendItem3.png',
-        alt: '그림',
-        productName: '타올',
-
-      },
-      {
-        id: 4,
-        link: '/',
-        src: '/assets/recommendItem4.png',
-        alt: '그림',
-        productName: '먼지털이개',
-
-      },
-      {
-        id: 5,
-        link: '/',
-        src: '/assets/recommendItem4.png',
-        alt: '그림',
-        productName: '먼지털이개',
-
-      },
-      {
-        id: 6,
-        link: '/',
-        src: '/assets/recommendItem4.png',
-        alt: '그림',
-        productName: '먼지털이개',
-
-      },
-    ],
+    recommendProductsData: MOCK_RECOMMEND_PRODUCTS,
   },
 };

src/components/shared/carousel/RecommendList.tsx

@@ -5,11 +5,10 @@ import Slider from 'react-slick';
 import Image from 'next/image';
 import Link from 'next/link';
 
+import { RecommendProductsType } from '@remote/api/types/home';
 import Flex from '@shared/flex/Flex';
 import Text from '@shared/text/Text';
 
-import { IRecommendList } from './types/carousel.type';
-
 const settings = {
   dots: false,
   infinite: true,
@@ -22,10 +21,13 @@ const settings = {
   arrows: false,
 };
 
-function RecommendList({ recommendListData }: { recommendListData: IRecommendList[] }) {
+// eslint-disable-next-line max-len
+function RecommendList({ recommendProductsData }: { recommendProductsData: RecommendProductsType }) {
+  const recommendList = recommendProductsData.value;
+
   return (
     <Slider {...settings}>
-      {recommendListData?.map((slide) => {
+      {recommendList?.map((slide) => {
         return (
           <Flex justify="center" align="center" direction="column" key={slide.id}>
             <Link href={slide.link}>

src/components/shared/product-article/ProductArticle.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { MOCK_PRODUCT_LIST } from '@mocks/homeHandler/mocks';
+
 import ProductArticle from './ProductArticle';
 
 const meta: Meta = {
@@ -12,35 +14,21 @@ const meta: Meta = {
       control: 'object',
     },
   },
-}satisfies Meta<typeof ProductArticle>;
+} satisfies Meta<typeof ProductArticle>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const MainPage: Story = {
   args: {
     isRow: false,
-    itemData: {
-      id: 1,
-      img: '/assets/profile.JPG',
-      name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
-      brand: '카믹스',
-      category: '코팅제',
-      warningLevel: 'warning',
-    },
+    itemData: MOCK_PRODUCT_LIST,
   },
 };
 
 export const SearchPage: Story = {
   args: {
     isRow: true,
-    itemData: {
-      id: 2,
-      img: '/assets/profile.JPG',
-      name: '아머올 세차용품 스피드 왁스 스프레이 500ml',
-      brand: '카믹스',
-      category: '코팅제',
-      warningLevel: 'safe',
-    },
+    itemData: MOCK_PRODUCT_LIST,
   },
 };

src/components/shared/product-article/ProductArticle.tsx

@@ -2,14 +2,14 @@ import classNames from 'classnames/bind';
 import Image from 'next/image';
 
 import Heart from '@components/icons/Heart';
+import { IProduct } from '@remote/api/types/home';
 import Text from '@shared/text/Text';
 
 import styles from './ProductArticle.module.scss';
-import { IItemData } from './types/ProductArticleType';
 
 interface ProductArticleProps {
   isRow?: boolean;
-  itemData: IItemData
+  itemData: IProduct
 }
 
 const cx = classNames.bind(styles);

src/mocks/handlers.ts

@@ -1,5 +1,7 @@
 import { authHandlers } from './authHandler';
+import { homeHandlers } from './homeHandler';
 
 export const handlers = [
   ...authHandlers,
+  ...homeHandlers,
 ];

src/mocks/homeHandler/index.ts

@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { http, HttpResponse } from 'msw';
+
+import {
+  MOCK_BANNER_DATA, MOCK_PRODUCT_LIST, MOCK_RECOMMEND_PRODUCTS,
+} from './mocks';
+
+export const homeHandlers = [
+  /* ----- 배너 api ----- */
+  http.get(`${process.env.NEXT_PUBLIC_BASE_URL}/banner`, () => {
+    return HttpResponse.json(MOCK_BANNER_DATA);
+  }),
+
+  /* ----- 추천 제품 정보 api ----- */
+  http.get(`${process.env.NEXT_PUBLIC_BASE_URL}/recommend_products`, () => {
+    return HttpResponse.json(MOCK_RECOMMEND_PRODUCTS);
+  }),
+
+  /* ----- 제품 목록 정보 api ----- */
+  http.get(`${process.env.NEXT_PUBLIC_BASE_URL}/products?sortType=viewcnt_order`, () => {
+    return HttpResponse.json(MOCK_PRODUCT_LIST);
+  }),
+];