WashPedia 랭킹
@@ -571,7 +64,7 @@ export default function Home() {
- {productArticleData.map((item) => {
+ {MOCK_PRODUCT_LIST?.value.map((item) => {
return
;
})}
@@ -582,3 +75,5 @@ export default function Home() {
);
}
+
+export default Home;
diff --git a/src/components/shared/carousel/Banner.stories.tsx b/src/components/shared/carousel/Banner.stories.tsx
index cdef9c83..f6e97c9f 100644
--- a/src/components/shared/carousel/Banner.stories.tsx
+++ b/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
;
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,
},
};
diff --git a/src/components/shared/carousel/Banner.tsx b/src/components/shared/carousel/Banner.tsx
index 9d8ec36f..4a2b0145 100644
--- a/src/components/shared/carousel/Banner.tsx
+++ b/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 (
- {bannerData.map((slide) => {
+ {bannerList.map((slide) => {
return (
;
@@ -20,53 +19,6 @@ type Story = StoryObj;
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,
},
};
diff --git a/src/components/shared/carousel/RecommendList.tsx b/src/components/shared/carousel/RecommendList.tsx
index 24dc3ac1..0b7ba42c 100644
--- a/src/components/shared/carousel/RecommendList.tsx
+++ b/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 (
- {recommendListData?.map((slide) => {
+ {recommendList?.map((slide) => {
return (
diff --git a/src/components/shared/product-article/ProductArticle.stories.tsx b/src/components/shared/product-article/ProductArticle.stories.tsx
index 012fc0f2..8f2e999b 100644
--- a/src/components/shared/product-article/ProductArticle.stories.tsx
+++ b/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,7 +14,7 @@ const meta: Meta = {
control: 'object',
},
},
-}satisfies Meta;
+} satisfies Meta;
export default meta;
type Story = StoryObj;
@@ -20,27 +22,13 @@ type Story = StoryObj;
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,
},
};
diff --git a/src/components/shared/product-article/ProductArticle.tsx b/src/components/shared/product-article/ProductArticle.tsx
index fac5f03c..5896b363 100644
--- a/src/components/shared/product-article/ProductArticle.tsx
+++ b/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);
diff --git a/src/components/shared/product-article/types/ProductArticleType.ts b/src/components/shared/product-article/types/ProductArticleType.ts
deleted file mode 100644
index b88793c9..00000000
--- a/src/components/shared/product-article/types/ProductArticleType.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface IItemData {
- id: number
- img: string
- name: string
- brand: string
- category: string
- warningLevel: string
-}
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 4c9df97b..fd9cf584 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -1,5 +1,7 @@
import { authHandlers } from './authHandler';
+import { homeHandlers } from './homeHandler';
export const handlers = [
...authHandlers,
+ ...homeHandlers,
];
diff --git a/src/mocks/homeHandler/index.ts b/src/mocks/homeHandler/index.ts
new file mode 100644
index 00000000..5cb857f3
--- /dev/null
+++ b/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);
+ }),
+];
diff --git a/src/mocks/homeHandler/mocks.ts b/src/mocks/homeHandler/mocks.ts
new file mode 100644
index 00000000..e5170576
--- /dev/null
+++ b/src/mocks/homeHandler/mocks.ts
@@ -0,0 +1,256 @@
+/* ----- 배너 정보 MOCK DATA ----- */
+export const MOCK_BANNER_DATA = {
+ status: 200,
+ code: 'PMB001',
+ message: '추천제품정보 조회 성공',
+ value: [
+ {
+ 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: '그림',
+ },
+ ],
+};
+
+/* ----- 추천 제품 정보 MOCK DATA ----- */
+export const MOCK_RECOMMEND_PRODUCTS = {
+ status: 200,
+ code: 'BMB001',
+ message: '배너정보 조회 성공',
+ value: [
+ {
+ 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: '먼지털이개',
+
+ },
+ ],
+};
+
+/* ----- 제품 목록 MOCK DATA ----- */
+export const MOCK_PRODUCT_LIST = {
+ status: 200,
+ code: 'PMB002',
+ message: '제품정보 조회 성공',
+ value: [
+ {
+ 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',
+ },
+ {
+ brand: '카믹스',
+ category: '코팅제',
+ id: 7,
+ img: '/assets/profile.JPG',
+ name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
+ warningLevel: 'warning',
+ },
+ {
+ brand: '카믹스',
+ category: '코팅제',
+ id: 8,
+ img: '/assets/profile.JPG',
+ name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
+ warningLevel: 'warning',
+ },
+ {
+ brand: '카믹스',
+ category: '코팅제',
+ id: 9,
+ img: '/assets/profile.JPG',
+ name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
+ warningLevel: 'warning',
+ },
+ {
+ brand: '카믹스',
+ category: '코팅제',
+ id: 10,
+ img: '/assets/profile.JPG',
+ name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
+ warningLevel: 'warning',
+ },
+ {
+ brand: '카믹스',
+ category: '코팅제',
+ id: 11,
+ img: '/assets/profile.JPG',
+ name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
+ warningLevel: 'warning',
+ },
+ {
+ brand: '카믹스',
+ category: '코팅제',
+ id: 12,
+ img: '/assets/profile.JPG',
+ name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
+ warningLevel: 'warning',
+ },
+ {
+ brand: '카믹스',
+ category: '코팅제',
+ id: 13,
+ img: '/assets/profile.JPG',
+ name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
+ warningLevel: 'warning',
+ },
+ {
+ brand: '카믹스',
+ category: '코팅제',
+ id: 14,
+ img: '/assets/profile.JPG',
+ name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
+ warningLevel: 'warning',
+ },
+ {
+ brand: '카믹스',
+ category: '코팅제',
+ id: 15,
+ img: '/assets/profile.JPG',
+ name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
+ warningLevel: 'warning',
+ },
+ {
+ brand: '카믹스',
+ category: '코팅제',
+ id: 16,
+ img: '/assets/profile.JPG',
+ name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
+ warningLevel: 'warning',
+ },
+ {
+ brand: '카믹스',
+ category: '코팅제',
+ id: 17,
+ img: '/assets/profile.JPG',
+ name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
+ warningLevel: 'warning',
+ },
+ {
+ brand: '카믹스',
+ category: '코팅제',
+ id: 18,
+ img: '/assets/profile.JPG',
+ name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
+ warningLevel: 'warning',
+ },
+ {
+ brand: '카믹스',
+ category: '코팅제',
+ id: 19,
+ img: '/assets/profile.JPG',
+ name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
+ warningLevel: 'warning',
+ },
+ {
+ brand: '카믹스',
+ category: '코팅제',
+ id: 20,
+ img: '/assets/profile.JPG',
+ name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml',
+ warningLevel: 'warning',
+ },
+ ],
+};
diff --git a/src/remote/api/requests/home/home.get.api.ts b/src/remote/api/requests/home/home.get.api.ts
new file mode 100644
index 00000000..fcbd6c57
--- /dev/null
+++ b/src/remote/api/requests/home/home.get.api.ts
@@ -0,0 +1,25 @@
+import {
+ BannerType, ProductType, RecommendProductsType,
+} from '../../types/home';
+import { getRequest } from '../requests.api';
+
+/* ----- 배너 api ----- */
+export const getBanner = async () => {
+ const response = await getRequest('/banner');
+
+ return response;
+};
+
+/* ----- 추천 제품 정보 api ----- */
+export const getRecommendProducts = async () => {
+ const response = await getRequest('/recommend_products');
+
+ return response;
+};
+
+/* ----- 제품 목록 정보 api ----- */
+export const getProductList = async () => {
+ const response = await getRequest('/products?sortType=viewcnt_order');
+
+ return response;
+};
diff --git a/src/remote/api/types/common.ts b/src/remote/api/types/common.ts
new file mode 100644
index 00000000..a3b3bb84
--- /dev/null
+++ b/src/remote/api/types/common.ts
@@ -0,0 +1,6 @@
+export interface ICommon {
+ status: number
+ code: string,
+ message: string,
+ value: T[]
+}
diff --git a/src/remote/api/types/home.ts b/src/remote/api/types/home.ts
new file mode 100644
index 00000000..5cf257f0
--- /dev/null
+++ b/src/remote/api/types/home.ts
@@ -0,0 +1,25 @@
+import { ICommon } from './common';
+
+export interface IBanner {
+ id: number
+ link: string
+ src: string
+ alt: string
+}
+
+export interface IRecommendProducts extends IBanner {
+ productName: string
+}
+
+export interface IProduct {
+ id: number
+ img: string
+ name: string
+ brand: string
+ category: string
+ warningLevel: string
+}
+
+export type BannerType = ICommon;
+export type RecommendProductsType = ICommon;
+export type ProductType = ICommon;
diff --git a/src/remote/queries/home/useBanner.ts b/src/remote/queries/home/useBanner.ts
new file mode 100644
index 00000000..42385daa
--- /dev/null
+++ b/src/remote/queries/home/useBanner.ts
@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getBanner } from '@remote/api/requests/home/home.get.api';
+import { BannerType } from '@remote/api/types/home';
+
+function useBanner() {
+ return useQuery({ queryKey: ['banner'], queryFn: getBanner });
+}
+
+export default useBanner;
diff --git a/src/remote/queries/home/useProductList.ts b/src/remote/queries/home/useProductList.ts
new file mode 100644
index 00000000..e7110dd9
--- /dev/null
+++ b/src/remote/queries/home/useProductList.ts
@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getProductList } from '@remote/api/requests/home/home.get.api';
+import { ProductType } from '@remote/api/types/home';
+
+function useProductList() {
+ return useQuery({ queryKey: ['productList'], queryFn: getProductList });
+}
+
+export default useProductList;
diff --git a/src/remote/queries/home/useRecommendProducts.ts b/src/remote/queries/home/useRecommendProducts.ts
new file mode 100644
index 00000000..209b247f
--- /dev/null
+++ b/src/remote/queries/home/useRecommendProducts.ts
@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getRecommendProducts } from '@remote/api/requests/home/home.get.api';
+import { RecommendProductsType } from '@remote/api/types/home';
+
+function useRecommendProducts() {
+ return useQuery({ queryKey: ['recommendProducts'], queryFn: getRecommendProducts });
+}
+
+export default useRecommendProducts;