[AUD-77] 마커 클러스터링 기능 구현

[KimGaeun0806]

📃 변경사항

• ClusterModule 추가
• tmapModule에 clusterMarkers, findClusters, findCluster 메서드 추가
• Cluster 컴포넌트 생성 (아직 디자인이 없어서 임시로 만들어두었습니다. )

🫨 고민한 부분

• 원래는 tmap vector v3를 raster v2로 마이그레이션하려 했으나 조금 해보니 상당히 많은 것이 틀어지는 바람에.. 그냥 클러스터링 기능을 직접 구현하는 쪽으로 방향을 틀었습니다.

• 클러스터링을 어떻게 구현해야 할 지 고민이 많았습니다....

• 특히 가장 고민이 많았던 부분은 어떤 기준을 가지고 마커들을 클러스터링할지였습니다.

  • 원래는 위경도를 기준으로 기존의 클러스터와 새로운 마커가 일정 거리 이상으로 가까워지면 클러스터링되도록 하려했고, 그 일정 거리를 줌 레벨에 따라 조정하도록 했습니다.
  • 근데 이렇게 하니 뭔가 좀 많이 이상하더라구요
  • 결과적으로는 위경도를 화면상 픽셀로 변환하고, 픽셀 기준으로 마커의 크기인 50px보다 가까워지면 클러스터링되도록 했습니다.
  • 이 부분에서 진짜 몇 시간을 썼네요 😩

• 그리고 현재 사용자가 줌을 할 때마다 clusterMarkers가 실행되도록 하고 있는데, 조금 비효율적인 것 같기도 하고요...

  • 사실 지금 새벽 4시라서 더 좋은 방법이 있을지 생각이 잘 안나네요. 최적화할 수 있을 것 같긴 한데
  • 좋은 방법이 있으면 코멘트주세요 ㅜ

🎇 동작 화면

2024-02-24.3.49.49.mov

💫 기타사항

진짜 이거 머리 싸매고 진짜 진짜 한참을 붙들고 있었습니다... 그래도 해결되어서 다행이네요 ㅜ

🎶🥁🎶 탱요틱탁 🎶🥁🎶 팅드로 동다락 딕닥택 팅트로 동다락 딕닥택 (어-!) 🎶🥁🎶 🎶🥁🎶 탱요틱탁 🎶🥁🎶 팅드로 동다락 딕닥택 팅트로 동다락 딕닥택 (어-!) 🎶 🎶🥁🎶 탱요틱탁 🎶🥁🎶 팅드로 동다락 딕닥택 팅트로 동다락 딕닥택 (어-!) 🎶🥁🎶 🎶🥁🎶 탱요틱탁 🎶🥁🎶 팅드로 동다락 딕닥택 팅트로 동다락 딕닥택 (어-!) 🎶

[RookieAND]

성능 이슈는 우선 출시가 얼마 남지 않았으나 과감하게 제끼고, 클러스터링 컴포넌트 스타일링만 Framer 에 맞춰서 수정 부탁드립니다.

[KimGaeun0806]

@RookieAND
어제 디자인 전달받은대로 수정했습니다!

성능 최적화 부분은 아까 이야기한대로 일단은 미뤄두고 나중에 다시 보는걸로 해요
이번주는 다른 것들도 성능부분은 모두 건들지 않는게 좋을 것 같습니다