Merge pull request #44 from pknu-wap/refactor/#43-slide-banner-image-…

…import Refactor/#43 slide banner image import
pknu-wap · Feb 2, 2025 · aa1523c · aa1523c
2 parents 13f4969 + e585c8a
commit aa1523c
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 2 deletions.
diff --git a/frontend/public/banner_desktop1.png → ...end/src/assets/images/banner_desktop1.png b/frontend/public/banner_desktop1.png → ...end/src/assets/images/banner_desktop1.png
diff --git a/frontend/public/banner_desktop2.png → ...end/src/assets/images/banner_desktop2.png b/frontend/public/banner_desktop2.png → ...end/src/assets/images/banner_desktop2.png
diff --git a/frontend/public/nextButton.png → frontend/src/assets/images/nextButton.png b/frontend/public/nextButton.png → frontend/src/assets/images/nextButton.png
diff --git a/frontend/public/prevButton.png → frontend/src/assets/images/prevButton.png b/frontend/public/prevButton.png → frontend/src/assets/images/prevButton.png
diff --git a/frontend/src/pages/MainPage/MainPage.tsx b/frontend/src/pages/MainPage/MainPage.tsx
@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import CategoryButtonList from '@/pages/MainPage/components/CategoryButtonList/CategoryButtonList';
+import Banner from '@/pages/MainPage/components/Banner/Banner';
+import { BannerImageList } from '@/utils/banners';
 
 const MainPage = () => {
   const [selectedCategory, setSelectedCategory] = useState<string>('all');
@@ -10,6 +12,7 @@ const MainPage = () => {
 
   return (
     <>
+      <Banner banners={BannerImageList} />
       <CategoryButtonList onCategorySelect={handleCategorySelect} />
     </>
   );

diff --git a/frontend/src/pages/MainPage/components/Banner/Banner.tsx b/frontend/src/pages/MainPage/components/Banner/Banner.tsx
@@ -1,6 +1,7 @@
 import React, { useRef, useState, useEffect } from 'react';
 import * as Styled from './Banner.styles';
 import { BannerProps } from './Banner.styles';
+import { SlideButton } from '@/utils/banners';
 
 interface BannerComponentProps {
   banners: BannerProps[];
@@ -30,10 +31,10 @@ const Banner = ({ banners }: BannerComponentProps) => {
       <Styled.BannerWrapper>
         <Styled.ButtonContainer>
           <Styled.SlideButton onClick={moveToPrevSlide}>
-            <img src='/prevButton.png' />
+            <img src={SlideButton[0]} />
           </Styled.SlideButton>
           <Styled.SlideButton onClick={moveToNextSlide}>
-            <img src='/nextButton.png' />
+            <img src={SlideButton[1]} />
           </Styled.SlideButton>
         </Styled.ButtonContainer>
         <Styled.SlideWrapper ref={slideRef}>

diff --git a/frontend/src/utils/banners.ts b/frontend/src/utils/banners.ts
@@ -0,0 +1,15 @@
+import FirstSlideImage from '../assets/images/banner_desktop1.png';
+import SecondSlideImage from '../assets/images/banner_desktop2.png';
+import PrevButton from '../assets/images/prevButton.png';
+import NextButton from '../assets/images/nextButton.png';
+
+export const BannerImageList = [
+  {
+    backgroundImage: FirstSlideImage,
+  },
+  {
+    backgroundImage: SecondSlideImage,
+  },
+];
+
+export const SlideButton = [PrevButton, NextButton];