TIL 32. 2024-02-13

팀 프로젝트 종료 하루 전!!!!
기능 구현에서는 검색 기능을 마지막으로 구현 시킨 후 마무리하였다.
오후에는 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>