하단 배너

src/entities/home/model/types.ts

@@ -6,6 +6,7 @@ import {
 export interface HomeBottomBannerProps {
 	setBottomBannerOn: (bottomBannerOn: boolean) => void;
 	bottomBannerOn: boolean;
+	bannerList: Array<BannerList>;
 };
 export interface AuthRegisterProps {
 	setAuthRegisterOn: (authRegisterOn: boolean) => void;
@@ -79,14 +80,20 @@ export interface HomeGroupsParams {
 export interface HomeGroupsResponse {
 	mids: Array<string>;
 };
-export interface HomeBannerListParams {};
+
+export enum BannerType {
+	MAIN = 'MAIN',
+	BOTTOM = 'BOTTOM'
+};
+export interface HomeBannerListParams {
+	bannerType: BannerType;
+};
 export interface HomeBannerListResponse {
 	bannerList: Array<BannerList>
 };
 export interface BannerList {
-	bannerId: number;
-	title: string;
-	imageUrl: string;
-	linkUrl: string;
-	priority: number;
+	title?: string;
+	imageUrl?: string;
+	linkUrl?: string;
+	order?: number;
 };

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

@@ -7,6 +7,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useHomeBannerListMutation } from '../api/use-home-banner-list-mutation';
 import { 
   BannerList,
+  BannerType,
   HomeBannerListParams,
   HomeBannerListResponse
 } from '../model/types';
@@ -18,7 +19,9 @@ export const HomeBannerList = () => {
   const [bannerList, setBannerList] = useState<Array<BannerList>>([]);
 
   const callHomeBannerList = () => {
-    let params: HomeBannerListParams = {};
+    let params: HomeBannerListParams = {
+      bannerType: BannerType.MAIN
+    };
 
     homeBannerList(params).then((rs: HomeBannerListResponse) => {
       console.log(rs);

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">