Refactor/#657: Swiper 0.9.4 버전 적용

[semnil5202]

📄 작업 내용

0.9.1 버전 적용 사항: map-befine-official/map-befine-swiper#2
0.9.3 버전 적용 사항: map-befine-official/map-befine-swiper#4

🙋🏻 주의 사항

헬로우~ 롱 타임 노씨~ 시간이 좀 남아서 Swiper 끄적여 봤습니다. 대표적으로 해결한 문제는 아래와 같고여.

• 반응형 오류 보완 (아래 스크린샷 참고)
• 불필요한 interface 대폭 제거
• 다형성 컴포넌트 적용

해결한 것 중에 체감으로 다가오는 것은 Swiper 반응형일듯여~ 스크린샷 적용 전 보시면 아시겠지만, 최초에 토픽 5개인데 브라우저 사이즈 줄였다 다시 원복하니까 4개가 되어 있져? 버그입니다,,,,

아마 브라우저 창을 줄일 상황이 많진 않아서 저런 버그가 있었나? 하실 수도? 아무튼 해당 로직을 수정해서 이제 잘 복원됩니다.

수정한 것을 간단하게 요약하면?

• 기존에는 Web API인 MatchMedia로 아래 기능 구현함. Media Query maxWidth 값을 number[]로 받아오고 이를 @media-query로 직접 삽입하는 방법이었는데 이 과정에서 문제가 있었다~
• 지금은 MatchMedia 안 쓰고 JS에서 모두 계산해서 직접 한 탭에 몇 개의 슬라이드를 표시할 건지 넣어주는 방식입니다.

(자세한 건 위 여기서 보시면 될 듯합니다~~ (코드 내에 console.log랑 cancel애니메이션 이제 봐서,, 지워 둘 예정입니다.))

스크린샷

적용 전

적용 후

📎 관련 이슈

close #657

[jiwonh423]

🎉