하단 배너

src/entities/home/ui/home-bottom-banner.tsx

@@ -8,14 +8,19 @@ import { HomeBottomBannerProps } from '../model/types';
 import { useStore } from '@/shared/model/store';
 import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
 import { useEffect, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+import { Autoplay, Pagination } from 'swiper/modules';
 
 export const HomeBottomBanner = ({
   setBottomBannerOn,
-  bottomBannerOn
+  bottomBannerOn,
+  bannerList
 }: HomeBottomBannerProps) => {
   const { navigate } = useNavigate();
   
   const [isFirstOpen, setIsFirstOpen] = useState<boolean>(false);
+  const [currentSlide, setCurrentSlide] = useState<number>(1);
 
   const onClickToClose = () => {
     setBottomBannerOn(false);
@@ -30,6 +35,13 @@ export const HomeBottomBanner = ({
     onClickToClose();
   };
 
+  const swiperPagination = {
+    type: 'fraction',
+    currentClass: 'current',
+    totalClass: 'total',
+    el: '.banner-page'
+  };
+
   useEffect(() => {
     let bannerInfo = useStore.getState().BannerStore.bannerInfo;
     if(!!bannerInfo.HomneBottomBanner){
@@ -43,7 +55,7 @@ export const HomeBottomBanner = ({
 
   return (
     <>
-      {bottomBannerOn && isFirstOpen &&
+      { bottomBannerOn && isFirstOpen &&
         <div className="bg-dim"></div>
       }
       <motion.div 
@@ -54,14 +66,46 @@ export const HomeBottomBanner = ({
         transition={ BottomSheetMotionDuration }
       >
         <div className="bottomsheet-content">
-          <img 
-            src={ IMAGE_ROOT + '/sample_banner.png' }
-            alt="배너"
-          />
-          <div className="banner-page">
-            <span className="current">1</span>
+          <Swiper
+            modules={[Pagination, Autoplay]}
+            slidesPerView={ 1 }
+            pagination={{
+              type: 'fraction',
+              currentClass: 'current',
+              totalClass: 'total',
+              el: '.banner-page'
+            }}
+            style={{ height: '300px' }}
+          >
+            { bannerList.map((value, index) => (
+                <SwiperSlide key={ `favorite-slide-key-${index}` }>
+                  <img 
+                    src={ value.imageUrl } 
+                    alt={ value.title }
+                    style={{ 
+                      objectFit: 'contain',
+                      width: '100%',
+                      height: '100%'
+                    }}
+                  />
+                </SwiperSlide>
+              ))
+            }
+          </Swiper>
+          <div 
+            className="banner-page"
+            style={{ 
+              zIndex: 20,
+              bottom: 'unset',
+              top: '15px',
+              left: 'unset',
+              width: 'unset',
+              color: 'var(--color-999999)'
+            }}
+          >
+            <span className="current"></span>
             /
-            <span className="total">3</span>
+            <span className="total"></span>
           </div>
         </div>
         <div className="bottom-btn">