Swiper
ThemePromotion에서 사용하는 Swiper 패턴 및 작업 방법 가이드
작업 패턴 설명
ThemePromotion에서 사용하는 Swiper 패턴은 다음과 같이 구성됩니다:
- Astro 파일 (.astro): 데이터를 정의하고 React 컴포넌트를 호출
- React 컴포넌트 (.tsx): Swiper 로직과 UI 구현
- 하위 컴포넌트: 배너, 상품 아이템 등 재사용 가능한 컴포넌트 분리
1. Astro 파일 구조
---
// 데이터 정의
const bannerSlides = [...]
const products = [...]
---
<SwiperComponent client:load bannerSlides={bannerSlides} products={products} />
- Astro frontmatter에서 데이터를 정의
- React 컴포넌트는
client:load디렉티브로 클라이언트 사이드에서 실행 - props로 데이터 전달
2. React 컴포넌트 구조
export function SwiperComponent({ bannerSlides, products }) {
// 상품을 3개씩 그룹화
const productGroups = []
for (let i = 0; i < products.length; i += 3) {
productGroups.push(products.slice(i, i + 3))
}
// 배너와 상품 그룹 매칭
const slides = bannerSlides.map((banner, index) => ({
banner,
products: productGroups[index % productGroups.length] || []
}))
return (
<Swiper
modules={[Navigation, Autoplay]}
loop={true}
navigation={{ addIcons: false }}
pagination={false}
autoplay={{ delay: 3000, disableOnInteraction: false }}
>
{slides.map((slide, index) => (
<SwiperSlide key={index}>
<BannerComponent banner={slide.banner} />
<ProductList products={slide.products} />
</SwiperSlide>
))}
</Swiper>
)
}
- 상품을 3개씩 그룹화하여 각 슬라이드에 배치
- 배너와 상품 그룹을 매칭하여 슬라이드 구성
- Swiper 설정:
navigation={{ addIcons: false }}(커스텀 네비게이션)
3. Swiper 설정
modules=[Navigation, Autoplay]- Navigation과 Autoplay 모듈 사용loop=- 무한 루프 활성화navigation={{ addIcons: false }}- 기본 네비게이션 아이콘 비활성화 (커스텀 아이콘 사용)pagination=- 페이지네이션 비활성화autoplay- 자동 재생 설정 (delay: 3000ms)
실제 구현 예제
ThemePromotion 패턴 (배너 + 상품 리스트)
파일 구조
src/mobile/page/home/
├── ThemePromotionContent.astro # Astro 진입점 (데이터 정의)
├── _ThemePromotionSwiper.tsx # Swiper 로직 컴포넌트
├── _ThemePromotionBanner.tsx # 배너 컴포넌트
└── _ThemePromotionProductItem.tsx # 상품 아이템 컴포넌트
- Astro 파일: 데이터 정의 및 레이아웃 구성
- React 컴포넌트:
_접두사로 시작 (Astro에서 직접 라우팅되지 않음) - 컴포넌트 분리: 재사용 가능한 단위로 분리