[FE] feat: 배너 조회 API 연결 및 배너 컴포넌트 작성 (#790)

* feat: 배너 조회 API 연결 쿼리 작성

* feat: 배너 컴포넌트 작성

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');

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 <BannerImage src={image} width={600} height={360} alt="배너" />;
+  }
+
+  return (
+    <Link href={link} isExternal>
+      <BannerImage src={image} width={600} height={360} alt="배너" />
+    </Link>
+  );
+};
+
+export default Banner;
+
+const BannerImage = styled.img`
+  width: 100%;
+  height: auto;
+`;

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';

frontend/src/hooks/queries/banner/index.ts

@@ -0,0 +1 @@
+export { default as useBannerQuery } from './useBannerQuery';

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;

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
 );

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"
+  }
+]

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));
+  }),
+];

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';

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 (
     <>
       <section>
-        <Banner src={`${IMAGE_URL}banner.png`} width={600} height={360} alt="이벤트 배너" />
+        <Banner />
       </section>
       <Spacing size={40} />
       <SectionWrapper>
@@ -100,11 +100,6 @@ export const HomePage = () => {
   );
 };
 
-const Banner = styled.img`
-  width: 100%;
-  height: auto;
-`;
-
 const SectionWrapper = styled.section`
   padding: 0 20px;
 `;

frontend/src/types/banner.ts

@@ -0,0 +1,5 @@
+export interface Banner {
+  id: number;
+  link: string;
+  image: string;
+}