[FE] 스와이퍼 리팩토링 및 프로젝트 적용

[semnil5202]

🛠️ 작업 대상

map-befine-swiper 를 대상으로 리팩토링을 진행합니다. 현재 스와이퍼는 Tab Index 컴포넌트에서 확장한 버전이며 그 과정에서 온전히 스와이퍼로 사용하기에는 다소 불편한 점들이 발견되었습니다. 결정적으로 모바일 환경에서 불완전한 반응형을 보인다는점과 suspense, skeleton UI 등을 적용하기 어렵다는 점에서 리팩토링이 필요합니다.

또한 topicCard 컴포넌트의 크기를 스와이퍼에 맞춰져있다보니 '내 지도에 저장하기', '핀 추가페이지에서 지도 선택' 등의 모달에서 topicCard의 형태가 정렬되지 않은 문제가 있습니다. 이 문제의 원인 역시 스와이퍼의 반응형 로직 때문입니다.

✅ 작업 내용

• [FE] Swiper 반응형 로직 안정화 및 불필요한 interface 제거 #657
• 스와이핑 (모바일 touch 이벤트) 최적화
• suspense, skeleton UI 적용 가능토록 변경
• 불필요한 interface 제거
• 가능하면 스타일드 컴포넌트 의존성 제거
• 프로젝트에 적용 (메인페이지, 이미지 조회 파트)

📎 참고 자료

변경하고 나면 셀럽잇 메인페이지와 비슷해질것으로 예측해봅니다.

⏰ 추정 시간

비관적 추정 : 7일
낙관적 추정 : 5일