This commit is contained in:
focp212@naver.com
2025-10-15 14:59:43 +09:00
parent 8446ad91e3
commit 368b553bda

View File

@@ -24,10 +24,12 @@ export const HomeBannerList = () => {
}).finally(() => {
let items = [
{title: '배너 이미지1', imageUrl: IMAGE_ROOT + '/sample_banner_0.png', linkUrl: '', order: ''},
{title: '배너 이미지2', imageUrl: IMAGE_ROOT + '/home-banner01.png', linkUrl: 'link2', order: ''},
{title: '배너 이미지3', imageUrl: IMAGE_ROOT + '/home-banner01.png', linkUrl: '', order: ''},
{title: '배너 이미지1', imageUrl: IMAGE_ROOT + '/sample_banner_0.png', linkUrl: 'http://www.google.com', order: 3},
{title: '배너 이미지2', imageUrl: IMAGE_ROOT + '/home-banner01.png', linkUrl: 'http://www.naver.com', order: 1},
{title: '배너 이미지3', imageUrl: IMAGE_ROOT + '/home-banner01.png', linkUrl: 'http://www.daum.net', order: 2},
];
// sort 추가 한다
items.sort((a, b) => a.order - b.order);
setBannerList(items);
});
};
@@ -38,7 +40,7 @@ export const HomeBannerList = () => {
const onClickToMove = (linkUrl?: string) => {
if(!!linkUrl){
alert('open :: ' + linkUrl);
window.open(linkUrl);
}
};
@@ -50,35 +52,37 @@ export const HomeBannerList = () => {
return (
<>
<div className="swiper-banner">
<div className="banner-wrapper">
<Swiper
modules={[Pagination, Autoplay]}
slidesPerView={1}
pagination={ swiperPagination }
>
{
bannerList.map((value, index) => (
<SwiperSlide
key={ `banner-swiper-key-${index}` }
>
<img
src={ value.imageUrl }
alt={ value.title }
style={{
objectFit: 'contain',
width: '100%',
height: '100%'
}}
onClick={ () => onClickToMove(value.linkUrl) }
/>
</SwiperSlide>
))
}
</Swiper>
</div>
<div className="banner-pagination"></div>
</div>
{ bannerList && bannerList.length > 0 &&
<div className="swiper-banner">
<div className="banner-wrapper">
<Swiper
modules={[Pagination, Autoplay]}
slidesPerView={1}
pagination={ swiperPagination }
>
{
bannerList.map((value, index) => (
<SwiperSlide
key={ `banner-swiper-key-${index}` }
>
<img
src={ value.imageUrl }
alt={ value.title }
style={{
objectFit: 'contain',
width: '100%',
height: '100%'
}}
onClick={ () => onClickToMove(value.linkUrl) }
/>
</SwiperSlide>
))
}
</Swiper>
</div>
<div className="banner-pagination"></div>
</div>
}
</>
);
};