From e908ac1021af2bff53571e532046956813cd1b19 Mon Sep 17 00:00:00 2001 From: bottlewook Date: Mon, 29 Jan 2024 17:08:46 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=ED=99=88=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=BF=BC=EB=A6=AC=20=ED=9B=85=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/remote/queries/home/useBanner.ts | 10 ++++++++++ src/remote/queries/home/useProductList.ts | 9 +++++++++ src/remote/queries/home/useRecommendProducts.ts | 10 ++++++++++ 3 files changed, 29 insertions(+) create mode 100644 src/remote/queries/home/useBanner.ts create mode 100644 src/remote/queries/home/useProductList.ts create mode 100644 src/remote/queries/home/useRecommendProducts.ts 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..1e8a93ff --- /dev/null +++ b/src/remote/queries/home/useProductList.ts @@ -0,0 +1,9 @@ +import { useQuery } from '@tanstack/react-query'; + +import { getProductList } from '@remote/api/requests/home/home.get.api'; + +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; From d2623c9814235e7835596141fe10d5fb5d63f9c5 Mon Sep 17 00:00:00 2001 From: bottlewook Date: Mon, 29 Jan 2024 17:09:34 +0900 Subject: [PATCH 2/7] =?UTF-8?q?test:=20=ED=99=88=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EC=9A=A9=20msw=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mocks/handlers.ts | 2 + src/mocks/homeHandler/index.ts | 23 +++ src/mocks/homeHandler/mocks.ts | 256 +++++++++++++++++++++++++++++++++ 3 files changed, 281 insertions(+) create mode 100644 src/mocks/homeHandler/index.ts create mode 100644 src/mocks/homeHandler/mocks.ts 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', + }, + ], +}; From a1551786dd33fce21afb1e78a9bb6027dbcb1673 Mon Sep 17 00:00:00 2001 From: bottlewook Date: Mon, 29 Jan 2024 17:10:02 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=ED=99=88=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=BF=BC=EB=A6=AC=ED=95=A8=EC=88=98=20=EB=B0=8F=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/remote/api/requests/home/home.get.api.ts | 25 ++++++++++++++++++++ src/remote/api/types/common.ts | 6 +++++ src/remote/api/types/home.ts | 25 ++++++++++++++++++++ 3 files changed, 56 insertions(+) create mode 100644 src/remote/api/requests/home/home.get.api.ts create mode 100644 src/remote/api/types/common.ts create mode 100644 src/remote/api/types/home.ts 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..1fdb8630 --- /dev/null +++ b/src/remote/api/requests/home/home.get.api.ts @@ -0,0 +1,25 @@ +import { + BannerType, ProductListType, 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..bf4a8e1a --- /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 IProductList { + id: number + img: string + name: string + brand: string + category: string + warningLevel: string +} + +export type BannerType = ICommon; +export type RecommendProductsType = ICommon; +export type ProductListType = ICommon; From aa86083a845f0403bba6842dc8cbf4d64e984d7a Mon Sep 17 00:00:00 2001 From: bottlewook Date: Mon, 29 Jan 2024 17:16:10 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20response=EC=97=90=20=EB=94=B0?= =?UTF-8?q?=EB=A5=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/carousel/Banner.tsx | 8 +++++--- src/components/shared/carousel/RecommendList.tsx | 10 ++++++---- .../shared/product-article/ProductArticle.tsx | 4 ++-- .../shared/product-article/types/ProductArticleType.ts | 8 -------- 4 files changed, 13 insertions(+), 17 deletions(-) delete mode 100644 src/components/shared/product-article/types/ProductArticleType.ts 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 ( - {recommendListData?.map((slide) => { + {recommendList?.map((slide) => { return ( diff --git a/src/components/shared/product-article/ProductArticle.tsx b/src/components/shared/product-article/ProductArticle.tsx index fac5f03c..4d1c353a 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 { IProductList } 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: IProductList } 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 -} From bfdbd74b365f6d348eec1ac094f4683cd8677643 Mon Sep 17 00:00:00 2001 From: bottlewook Date: Mon, 29 Jan 2024 17:17:08 +0900 Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=ED=99=88=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=BF=BC=EB=A6=AC=ED=9B=85=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/page.tsx | 555 +++-------------------------------------------- 1 file changed, 25 insertions(+), 530 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index c3e2313a..f58aa766 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,10 +1,19 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ + +'use client'; + import classNames from 'classnames/bind'; +import { MOCK_BANNER_DATA, MOCK_PRODUCT_LIST, MOCK_RECOMMEND_PRODUCTS } from '@mocks/homeHandler/mocks'; +import useBanner from '@remote/queries/home/useBanner'; +import useProductList from '@remote/queries/home/useProductList'; +import useRecommendProducts from '@remote/queries/home/useRecommendProducts'; import BottomNav from '@shared/bottom-nav/BottomNav'; import Banner from '@shared/carousel/Banner'; import RecommendList from '@shared/carousel/RecommendList'; import Flex from '@shared/flex/Flex'; import Header from '@shared/header/Header'; +import Loader from '@shared/loader/Loader'; import ProductArticle from '@shared/product-article/ProductArticle'; import Radio from '@shared/radio/Radio'; import ScrollToTop from '@shared/scroll-to-top/ScrollToTop'; @@ -15,535 +24,19 @@ import styles from './page.module.scss'; const cx = classNames.bind(styles); -const 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: '그림', - }, -]; - -const 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: '먼지털이개', - - }, -]; +function Home() { + // TODO: 비로그인 회원과 부가정보를 입력하지 않은 회원은 부가정보 입력 배너 보이도록 UI 추가 + const { data: bannerData, isLoading: bannerLoading } = useBanner(); + const { + data: recommendProductsData, isLoading: + recommendProductsLoading, + } = useRecommendProducts(); + const { data: productListData, isLoading: productListLoading } = useProductList(); -const productArticleData = [ - { - 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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', - }, -]; + if (bannerLoading || recommendProductsLoading || productListLoading) { + return ; + } -export default function Home() { - // TODO: 비로그인 회원과 부가정보를 입력하지 않은 회원은 부가정보 입력 배너 보이도록 UI 추가 return ( <>
@@ -552,13 +45,13 @@ export default function Home() {
- +
추천 세차용품
- +
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; From 9bfa6250359c13bda42b686b62da49eb317d9f91 Mon Sep 17 00:00:00 2001 From: bottlewook Date: Mon, 29 Jan 2024 17:21:42 +0900 Subject: [PATCH 6/7] =?UTF-8?q?test:=20type=20=EB=B3=80=EA=B2=BD=EC=97=90?= =?UTF-8?q?=20=EB=94=B0=EB=A5=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EB=B3=84=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/carousel/Banner.stories.tsx | 15 ++---- .../shared/carousel/RecommendList.stories.tsx | 54 ++----------------- .../ProductArticle.stories.tsx | 22 ++------ 3 files changed, 11 insertions(+), 80 deletions(-) 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/RecommendList.stories.tsx b/src/components/shared/carousel/RecommendList.stories.tsx index d5afd231..675d222c 100644 --- a/src/components/shared/carousel/RecommendList.stories.tsx +++ b/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; @@ -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/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, }, }; From 8cc9799d8984d766b5f68d117173bb2aa515a1b4 Mon Sep 17 00:00:00 2001 From: bottlewook Date: Tue, 30 Jan 2024 14:20:25 +0900 Subject: [PATCH 7/7] =?UTF-8?q?chore:=20IProduct=20=EC=9D=B4=EB=A6=84=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/product-article/ProductArticle.tsx | 4 ++-- src/remote/api/requests/home/home.get.api.ts | 4 ++-- src/remote/api/types/home.ts | 4 ++-- src/remote/queries/home/useProductList.ts | 3 ++- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/shared/product-article/ProductArticle.tsx b/src/components/shared/product-article/ProductArticle.tsx index 4d1c353a..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 { IProductList } from '@remote/api/types/home'; +import { IProduct } from '@remote/api/types/home'; import Text from '@shared/text/Text'; import styles from './ProductArticle.module.scss'; interface ProductArticleProps { isRow?: boolean; - itemData: IProductList + itemData: IProduct } const cx = classNames.bind(styles); diff --git a/src/remote/api/requests/home/home.get.api.ts b/src/remote/api/requests/home/home.get.api.ts index 1fdb8630..fcbd6c57 100644 --- a/src/remote/api/requests/home/home.get.api.ts +++ b/src/remote/api/requests/home/home.get.api.ts @@ -1,5 +1,5 @@ import { - BannerType, ProductListType, RecommendProductsType, + BannerType, ProductType, RecommendProductsType, } from '../../types/home'; import { getRequest } from '../requests.api'; @@ -19,7 +19,7 @@ export const getRecommendProducts = async () => { /* ----- 제품 목록 정보 api ----- */ export const getProductList = async () => { - const response = await getRequest('/products?sortType=viewcnt_order'); + const response = await getRequest('/products?sortType=viewcnt_order'); return response; }; diff --git a/src/remote/api/types/home.ts b/src/remote/api/types/home.ts index bf4a8e1a..5cf257f0 100644 --- a/src/remote/api/types/home.ts +++ b/src/remote/api/types/home.ts @@ -11,7 +11,7 @@ export interface IRecommendProducts extends IBanner { productName: string } -export interface IProductList { +export interface IProduct { id: number img: string name: string @@ -22,4 +22,4 @@ export interface IProductList { export type BannerType = ICommon; export type RecommendProductsType = ICommon; -export type ProductListType = ICommon; +export type ProductType = ICommon; diff --git a/src/remote/queries/home/useProductList.ts b/src/remote/queries/home/useProductList.ts index 1e8a93ff..e7110dd9 100644 --- a/src/remote/queries/home/useProductList.ts +++ b/src/remote/queries/home/useProductList.ts @@ -1,9 +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 }); + return useQuery({ queryKey: ['productList'], queryFn: getProductList }); } export default useProductList;