From ddc6cb53fd17a082d4af8cf7fc7bcb36d6cccea4 Mon Sep 17 00:00:00 2001 From: Leejin-Yang Date: Wed, 18 Oct 2023 19:55:36 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EB=B0=B0=EB=84=88=20=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=20API=20=EC=97=B0=EA=B2=B0=20=EC=BF=BC=EB=A6=AC=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/index.ts | 1 + frontend/src/hooks/queries/banner/index.ts | 1 + .../src/hooks/queries/banner/useBannerQuery.ts | 16 ++++++++++++++++ frontend/src/mocks/browser.ts | 4 +++- frontend/src/mocks/data/banners.json | 17 +++++++++++++++++ frontend/src/mocks/handlers/bannerHandlers.ts | 9 +++++++++ frontend/src/mocks/handlers/index.ts | 1 + frontend/src/types/banner.ts | 5 +++++ 8 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 frontend/src/hooks/queries/banner/index.ts create mode 100644 frontend/src/hooks/queries/banner/useBannerQuery.ts create mode 100644 frontend/src/mocks/data/banners.json create mode 100644 frontend/src/mocks/handlers/bannerHandlers.ts create mode 100644 frontend/src/types/banner.ts diff --git a/frontend/src/apis/index.ts b/frontend/src/apis/index.ts index 4df8ec8b4..c258c1615 100644 --- a/frontend/src/apis/index.ts +++ b/frontend/src/apis/index.ts @@ -10,3 +10,4 @@ export const recipeApi = new ApiClient('/recipes'); export const searchApi = new ApiClient('/search'); export const logoutApi = new ApiClient('/logout'); export const reviewApi = new ApiClient('/reviews'); +export const bannerApi = new ApiClient('/banners'); diff --git a/frontend/src/hooks/queries/banner/index.ts b/frontend/src/hooks/queries/banner/index.ts new file mode 100644 index 000000000..92fc0eb88 --- /dev/null +++ b/frontend/src/hooks/queries/banner/index.ts @@ -0,0 +1 @@ +export { default as useBannerQuery } from './useBannerQuery'; diff --git a/frontend/src/hooks/queries/banner/useBannerQuery.ts b/frontend/src/hooks/queries/banner/useBannerQuery.ts new file mode 100644 index 000000000..00fc09c42 --- /dev/null +++ b/frontend/src/hooks/queries/banner/useBannerQuery.ts @@ -0,0 +1,16 @@ +import { useSuspendedQuery } from '../useSuspendedQuery'; + +import { bannerApi } from '@/apis'; +import type { Banner } from '@/types/banner'; + +const fetchBanner = async () => { + const response = await bannerApi.get({}); + const data: Banner[] = await response.json(); + return data; +}; + +const useBannerQuery = () => { + return useSuspendedQuery(['banner'], () => fetchBanner()); +}; + +export default useBannerQuery; diff --git a/frontend/src/mocks/browser.ts b/frontend/src/mocks/browser.ts index f7bb4bf35..b0b74505b 100644 --- a/frontend/src/mocks/browser.ts +++ b/frontend/src/mocks/browser.ts @@ -9,6 +9,7 @@ import { recipeHandlers, searchHandlers, logoutHandlers, + bannerHandlers, } from './handlers'; export const worker = setupWorker( @@ -19,5 +20,6 @@ export const worker = setupWorker( ...memberHandlers, ...recipeHandlers, ...searchHandlers, - ...logoutHandlers + ...logoutHandlers, + ...bannerHandlers ); diff --git a/frontend/src/mocks/data/banners.json b/frontend/src/mocks/data/banners.json new file mode 100644 index 000000000..0883f4c22 --- /dev/null +++ b/frontend/src/mocks/data/banners.json @@ -0,0 +1,17 @@ +[ + { + "id": 3, + "link": "https://www.youtube.com/embed/3QlYJ0VY7zg", + "image": "https://i.ytimg.com/vi/3QlYJ0VY7zg/maxresdefault.jpg" + }, + { + "id": 2, + "link": "https://www.youtube.com/embed/3QlYJ0VY7zg", + "image": "https://i.ytimg.com/vi/3QlYJ0VY7zg/maxresdefault.jpg" + }, + { + "id": 1, + "link": "https://www.youtube.com/embed/3QlYJ0VY7zg", + "image": "https://i.ytimg.com/vi/3QlYJ0VY7zg/maxresdefault.jpg" + } +] diff --git a/frontend/src/mocks/handlers/bannerHandlers.ts b/frontend/src/mocks/handlers/bannerHandlers.ts new file mode 100644 index 000000000..20bf92f77 --- /dev/null +++ b/frontend/src/mocks/handlers/bannerHandlers.ts @@ -0,0 +1,9 @@ +import { rest } from 'msw'; + +import banners from '../data/banners.json'; + +export const bannerHandlers = [ + rest.get('/api/banners', (req, res, ctx) => { + return res(ctx.status(200), ctx.json(banners)); + }), +]; diff --git a/frontend/src/mocks/handlers/index.ts b/frontend/src/mocks/handlers/index.ts index c255590ef..b8c5b8b38 100644 --- a/frontend/src/mocks/handlers/index.ts +++ b/frontend/src/mocks/handlers/index.ts @@ -6,3 +6,4 @@ export * from './memberHandlers'; export * from './recipeHandlers'; export * from './searchHandlers'; export * from './logoutHandlers'; +export * from './bannerHandlers'; diff --git a/frontend/src/types/banner.ts b/frontend/src/types/banner.ts new file mode 100644 index 000000000..ae3ebad74 --- /dev/null +++ b/frontend/src/types/banner.ts @@ -0,0 +1,5 @@ +export interface Banner { + id: number; + link: string; + image: string; +} From 0cdc12f1fbce0e13236770f12c100deea5d6e8e0 Mon Sep 17 00:00:00 2001 From: Leejin-Yang Date: Wed, 18 Oct 2023 20:15:12 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EB=B0=B0=EB=84=88=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Common/Banner/Banner.tsx | 26 +++++++++++++++++++ frontend/src/components/Common/index.ts | 1 + frontend/src/pages/HomePage.tsx | 9 ++----- 3 files changed, 29 insertions(+), 7 deletions(-) create mode 100644 frontend/src/components/Common/Banner/Banner.tsx diff --git a/frontend/src/components/Common/Banner/Banner.tsx b/frontend/src/components/Common/Banner/Banner.tsx new file mode 100644 index 000000000..89af08c6c --- /dev/null +++ b/frontend/src/components/Common/Banner/Banner.tsx @@ -0,0 +1,26 @@ +import { Link } from '@fun-eat/design-system'; +import styled from 'styled-components'; + +import { useBannerQuery } from '@/hooks/queries/banner'; + +const Banner = () => { + const { data: banners } = useBannerQuery(); + const { link, image } = banners[Math.floor(Math.random() * banners.length)]; + + if (!link) { + return ; + } + + return ( + + + + ); +}; + +export default Banner; + +const BannerImage = styled.img` + width: 100%; + height: auto; +`; diff --git a/frontend/src/components/Common/index.ts b/frontend/src/components/Common/index.ts index 7d9a7c747..070263f54 100644 --- a/frontend/src/components/Common/index.ts +++ b/frontend/src/components/Common/index.ts @@ -24,3 +24,4 @@ export { default as CategoryItem } from './CategoryItem/CategoryItem'; export { default as CategoryFoodList } from './CategoryFoodList/CategoryFoodList'; export { default as CategoryStoreList } from './CategoryStoreList/CategoryStoreList'; export { default as Skeleton } from './Skeleton/Skeleton'; +export { default as Banner } from './Banner/Banner'; diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx index bb42cecba..d48e4a255 100644 --- a/frontend/src/pages/HomePage.tsx +++ b/frontend/src/pages/HomePage.tsx @@ -10,9 +10,9 @@ import { CategoryFoodList, CategoryStoreList, SvgIcon, + Banner, } from '@/components/Common'; import { ProductRankingList, ReviewRankingList, RecipeRankingList } from '@/components/Rank'; -import { IMAGE_URL } from '@/constants'; import channelTalk from '@/service/channelTalk'; export const HomePage = () => { @@ -28,7 +28,7 @@ export const HomePage = () => { return ( <>
- +
@@ -100,11 +100,6 @@ export const HomePage = () => { ); }; -const Banner = styled.img` - width: 100%; - height: auto; -`; - const SectionWrapper = styled.section` padding: 0 20px; `;