팀 프로젝트 종료 하루 전!!!!
기능 구현에서는 검색 기능을 마지막으로 구현 시킨 후 마무리하였다.
오후에는 CSS 쪽을 맡아 디자인 하였고
반응형까지 구현하는 걸 목표로 진행하였다.
슬라이드 부분에서는 swiper
를 통해 구현시켰다.
아래는 swiper를 사용한 일부 부분이고 breakpoint를 통해 슬라이드 부분을 반응형으로 구현시켰다.
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import 'swiper/css/autoplay';
import '../styles/Carousel.css';
import { Pagination, Navigation, Autoplay } from 'swiper/modules';
<Swiper
spaceBetween={5} //각 슬라이드 사이의 간격
loop={true} //슬라이드를 루프하여 계속 반복되도록 설정
autoplay={{ delay: 2000, disableOnInteraction: false }}
pagination={{
clickable: true //사용자가 페이지를 클릭하여 슬라이드를 이동
}}
navigation={true} // 슬라이드 이전 및 다음 버튼을 활성화
modules={[Pagination, Navigation, Autoplay]}
breakpoints={{
260: {
slidesPerView: 1,
spaceBetween: 29
},
360: {
slidesPerView: 2,
spaceBetween: 29
},
660: {
slidesPerView: 3,
spaceBetween: 36
},
760: {
slidesPerView: 5,
]spaceBetween: 57
}
}}
>
{review.map((book) => (
<StSwiperSlide key={book.itemId}>
<StyledLink to={`/detail/${book.itemId}`}>
<img src={book.coverSmallUrl} alt="대체이미지" />
<p>{book.title}</p>
</StyledLink>
<p>
{book.publisher}/{book.author}
</p>
</StSwiperSlide>
))}
</Swiper>