[Next] SCSS-Module + Swiper Pagenation Bullets Custom

현재 협업을 진행하며, ClassName이 충돌하는 문제를 방지하기 위해서 그리고 컴포넌트 단위의 스타일링을 하기 위해 SCSS-Module 방식을 사용하고 있다.
SCSS-Module을 사용하며, Swiper의 Pagenation Bullets에 Custom Stlye을 적용할 때, className을 찾지 못하는 Issue가 있었다. 

 

Module방식이 아닌, 일반적인 방식에서는 

      <Swiper
        modules={[Pagination]}
        pagination={{
          clickable: true,
          type: "bullets",
        }}
        className={styles.swiper}
        loop={false}
        slidesPerView={1}
        freeMode={true}
        initialSlide={0}
      >
        {_.map(products, (item) => (
          <SwiperSlide className={styles.slide_item} key={item.id}>
            <Package product={item} />
          </SwiperSlide>
        ))}
      </Swiper>

위와 같이 슬라이드와 Pagenation Bullet을 만들어 준 뒤, Elemen탭에서 bullet을 선택했을 때 확인할 수 있는

.swiper .swiper-pagination {
  position: absolute;
  bottom: 65px 
}
.swiper .swiper-pagination-bullet {
  background-color: #000;
  margin: 0 10px;
}

선택자에 접근해 스타일링을 해줬을것이다.

문제상황

Bullets는 module을 사용하는 경우 위 선택자에 접근이 불가능했다.

해결방안
Swiper의 공식 문서를 찾아보며, pagination으로 넘어가는 객체 안에 bullet의 className과 관련있는 props를 직접 넘겨줄 수 있는것을 확인했다. 
pagination의 여러 타입의 정의되어 있는 파일로 넘어가 pagination이 받는 props들과 설명을 참조하여

        pagination={{
          clickable: true,
          type: "bullets",
          horizontalClass:styles.custom_pagination,
          bulletClass:styles.custom_bullet,
          bulletActiveClass:styles.custom_bullet_active
        }}

직접 module에 딸려있는 className을 전달해주었다.

위 방법으로 bullets의 className을 직접 지정할 수 있었고 문제를 해결할 수 있었다.