swiper (3) 썸네일형 리스트형 [트러블 슈팅] 스와이퍼가 메인 -> 지도 -> 메인 이동 시 사라지는 이슈 해결 발생한 오류 🔥메인 -> 지도 -> 메인 화면으로 이동했을 때 메인 화면에 있는 `Swiper` 컴포넌트가 사라지는 현상을 겪었습니다. 해결 과정 🔎스와이퍼가 정상적으로 렌더링 되지 않아 매우 당황했지만 그 이유에 대해서 분석을 해봤습니다. 기존 스타일 mapSwiper.css@tailwind base;@tailwind components;@tailwind utilities;.swiperWrapper { @apply fixed bottom-16 left-2/4 z-[99] flex h-[140px] w-[100vw] -translate-x-1/2 transform flex-col items-center justify-end bg-scrollButtonGradient leading-[27px] lg.. Next 카카오맵을 활용한 시도별 가로 스크롤 버튼 이동 구현 사용자 경험을 고려해 카카오맵 기반 지역별 필터링과 버튼 스크롤 시 지도 이동 기능을 구현했습니다. 가로 스크롤 버튼 구현 📖시, 도별 버튼이 화면 하단에 가로로 스크롤되며 버튼을 클릭하면 선택한 시, 도의 폴리곤이 지도에 렌더링 됩니다. `Swiper`라이브러리를 사용해 구현했습니다. 전체 {siDoName.map((sido) => ( {sido.name} ))} 시, 도 선택에 따른 지도 이동 및 폴리곤 렌더링 📖 선택한 시, 도 폴리곤 필터링사용자가 시, 도를 클릭하면 해당 시, 도의 좌표 데이터를 바탕으로 폴리곤 path를 업데이트 하고 지도를 그립니다.const updatePolygonPath = (path: PathType, index: number) => { setSele.. [TIL] 24.07.18 Swiper 슬라이드 Swiper ✨ 1. Swiper 란?Swiper는 하드웨어 가속 전환과 놀라운 네이티드 동작을 갖춘 무료 오픈 소스 슬라이더입니다. 사용 이유 ✨ 1. 간단한 사용법HTML, CSS, JS 코드로 반응형 슬라이드쇼 및 스와이퍼 기능을 쉽게 구현할 수 있어서 사용하게 되었습니다! 2. 다양한 슬라이드 유형Swiper는 일반적인 이미지 슬라이드뿐만 아니라 텍스트, 비디오, 오디오 등 다양한 유형의 슬라이드를 지원합니다! 3. 반응형 디자인반응형을 지원하기 때문에 데스크탑, 태블릿, 모바일 기기에서 사용자 경험을 제공할 수 있습니다! 사용 방법 📖1. NPM에서 설치NPM에서 Swiper를 설치할 수 있습니다.$ npm install swiper 기본적으로 Swiper는 추가 모듈 없이 핵심 버전만 내보.. 이전 1 다음
