[React-Responsive-Carousel] 스타일링 오버라이드 주의점

원래 react slick을 사용하려고 했으나 무슨 이유에서인지 우리 프로젝트(NextJS)에서 제대로 렌더링이 되지 않았다. 테스트용으로 만든 NextJS 프로젝트에서는 잘 됐었는데. React-Responsive-Carousel 라이브러리를 사용했는데 dots 편집이 자유롭지 않았다. 어쩔 수 없이 스타일링 코드를 깃허브에서 가져와 오버라이딩하는 형태로 커스터마이징을 했다. dots가 ul 태그로 되어 있었고 bottom:0 값이 들어가있었고 위치를 옮기기 위해 top: -65px를 주었다. 위치는 잘 변경되었다.

 

몇 시간이나 삽질하고 난 이후에 알았다. 기본으로 botttom:0이 적용된 엘리먼트에 top 값을 주었으니 엘리먼트 영역의 크기가 그만큼 커졌다는 걸. 오버라이드 하고 있었는데 주의깊지 못했다. bottom 값으로 위치를 조정해 해결했다. 이미지 안에 a 태그가 상단에만 걸리는 문제는 왜 그런지 잘 모르겠다. 그냥 div로 감싸 url을 받아 window.open(url)로 열어줬다.