[FE] Refactor/#613 지도 클러스터링 기능 추가 및 지도 상태 리팩토링

[semnil5202]

작업 대상

• Flex 공통 컴포넌트 interface 작업 (본문과는 관련없지만 에러 띄워진 상태가 지속되기에 리팩토링하였습니다.)
• 토픽 단일 조회 지도 클러스터링 (모아보기는 추후 진행)

📄 작업 내용

• Flex 공통 컴포넌트를 상속받은 로컬 스타일드 컴포넌트에 특정 타입을 제네릭으로 지정한 경우 발생하는 타입 오류 해결 (논의 필요)
• mapInstance 전역 상태로 완전 분리 및 모든 지도 커스텀 훅에 적용
• 지도에 dragEnd 및 zoomEnd 이벤트 등록
• 핀 사이즈 60px로 고정
• 토픽 단일 조회 페이지에 한하여 클러스터링 진행 및 클러스터링 디자인 적용
• 최고 줌인 상태에서 클러스터링 되었을 경우 infoWindow로 모든 핀 표현

🙋🏻 세부 사항

드디어 클러스터링을 완료했습니다. (단, 토픽 단일 조회페이지에만 적용했습니다.)

주 원리는 다음과 같습니다.

클러스터링 원리

위와 같이 현재 지도 사이즈의 실제 우상단 끝점 좌표, 좌하단 끝점 좌표를 얻어냅니다. Map API 중의 getBounds 라는 함수를 쓰면 얻어낼 수 있습니다. 우상단, 좌하단 끝점 좌표를 알면 모든 꼭짓점의 좌표를 알아낼 수 있겠죠?

알아낸 좌표를 가지고 지도 스크린 사이즈 만큼의 '실제 거리'를 알 수 있습니다. 이는 LatLng API 중에 distanceTo 라는 함수를 쓰면 두 좌표간의 거리 차이를 구할 수 있는데, 이를 사용해서 구할 수 있습니다.

그런 다음 이제 스크린 사이즈 즉, 지도의 width 값을 알아내야합니다. 이는 Map API 중에 realToScreen 함수를 사용하여 알아낼 수 있습니다. 실제 좌표를 스크린 좌표로 변환해줍니다. 이전에 지도 모서리의 모든 실제 좌표값을 알 수 있었으니, 스크린 사이즈의 좌표값도 쉽게 알아낼 수 있겠죠? 그 좌표값의 x 축 값 차이가 지도의 width가 됩니다.

이제 마지막으로 지도 위의 핀이 차지하는 실제 거리를 알아야하는데요, 핀이 차지하는 지도상 실제 거리는 지도의 줌 상태에 따라서 달라집니다. 줌을 최대로 확대하면 핀이 차지하는 실제 거리는 몇 m에 불과할 것이고, 최대로 축소하면 수십 km 가 될 수도 있겠죠. 이 정보를 백엔드에 넘겨주면 클러스터링을 진행하여 결과값을 반환해주고 이를 받아서 지도에 그리는 것입니다.

위에서 설명드린 로직이 바로 아래의 로직입니다.

// SelectedTopic Page 에서

const getDistanceOfPin = () => {
    if (!mapInstance) return;

    const mapBounds = mapInstance.getBounds();

    const leftWidth = new Tmapv3.LatLng(mapBounds._ne._lat, mapBounds._sw._lng);
    const rightWidth = new Tmapv3.LatLng(
      mapBounds._ne._lat,
      mapBounds._ne._lng,
    );

    const realDistanceOfScreen = leftWidth.distanceTo(rightWidth);
    const currentScreenSize =
      mapInstance.realToScreen(rightWidth).x -
      mapInstance.realToScreen(leftWidth).x;

    return (realDistanceOfScreen / currentScreenSize) * PIN_SIZE;
  };

지도 이벤트 관리

기존에는 토픽 카드 클릭 한 후에 Markers를 다시 그릴 일이 없었습니다. 그래서 최초에 한 번 get 한 이후에는 지도를 건드릴 일이 없었죠. 그런데 이제는 줌 레벨에 따라서 클러스터링 결과값이 달라지므로 줌 이벤트에 따라서 get 요청을 지속적으로 날려야합니다.

티맵 API 문서에는 안 나와 있지만.. Tmapv3를 console에 직접 찍어보시면 다음과 같은 다양한 이벤트가 있는 것을 확인해볼 수 있습니다.

우리는 여기서 ZoomEnd와 DragEnd 이벤트만 사용할 것입니다. 이벤트명 말 그대로 줌이 끝났을 때, 드래그가 끝났을 때 이벤트가 발생합니다. Zoom과 Drag 이벤트를 사용하게 되면 줌을 하는 동안, 드래그를 하는 동안에도 이벤트가 발생하므로 너무 많은 이벤트가 발생합니다. 디바운스를 걸어주었다고 한들 ZoomEnd와 같은, 특정 행동이 끝났을 때! 이벤트를 발생시킬 수 있는데 이 이벤트를 안 쓸 이유는 없겠죠. (End 이벤트를 썼다고 한들 디바운스는 여전히 걸어줍니다. 간헐적으로 End 이벤트가 짧은 시간에 여러번 발생하기도 해서 그렇습니다.)

아무튼 위 두 개의 이벤트를 지도가 Listen할 수 있도록 합니다. ZoomEnd 시에는 서버에서 새로운 클러스터링 핀 결과값을 받아와 지도를 다시 렌더링합니다. DragEnd 시에는 기존의 pin 배열을 새로운 배열에 전개연산하여 지도를 다시 렌더링합니다. (이 부분은 아래 화면 사이즈에서 보이는 핀만 렌더링하기 파트에서 설명하겠습니다.)

이를 코드로 표현한 것이 다음과 같습니다.

// SelectedTopic Page 에서

useEffect(() => {
    setClusteredCoordinates();

    const onDragEnd = (evt: evt) => {
      if (dragTimerIdRef.current) {
        clearTimeout(dragTimerIdRef.current);
      }

      dragTimerIdRef.current = setTimeout(() => {
        setPrevCoordinates();
      }, 100);
    };
    const onZoomEnd = (evt: evt) => {
      if (zoomTimerIdRef.current) {
        clearTimeout(zoomTimerIdRef.current);
      }

      zoomTimerIdRef.current = setTimeout(() => {
        setClusteredCoordinates();
      }, 100);
    };

    if (!mapInstance) return;

    mapInstance.on('DragEnd', onDragEnd);
    mapInstance.on('ZoomEnd', onZoomEnd);

    return () => {
      mapInstance.off('DragEnd', onDragEnd);
      mapInstance.off('ZoomEnd', onZoomEnd);
    };
  }, [topicDetail]);

참고로 on으로 이벤트 핸들러를 달아주고(add) off로 제거할(remove) 수 있습니다. 이거 찾는데 하루 걸렸던건 안 비밀.. (직접 티맵 소스코드 파서 알아냈습니다 ㅋㅋ)

화면 사이즈에서 보이는 핀만 렌더링하기

클러스터링을 적용했다고 한들 지도 최적화가 끝난 것은 아닙니다. 클러스터링의 목적은 중첩된 핀들이 너무 많아 지도를 볼 수 없던 문제를 해결하는 것이었죠. 줌 레벨이 확대되면 클러스터링이 해제되며 모든 핀들이 보이는 상태일 것입니다. 예를 들어, 붕어빵 지도는 지도 최대 축소 상태일땐 핀이 클러스터링 되어 20여개 찍혀있지만, 최대 확대 상태일 땐 800여개의 핀이 그대로 찍혀있습니다.

그 상태에서 지도를 움직이면 (드래그하면) 버벅이는 것은 똑같습니다. 화면 상에는 안 보이지만 800개의 핀이 계속해서 그려지고 있기 때문이죠. 그래서! 화면에 보이는 핀들만 렌더링 하도록합니다.

위에서 지도 모서리 꼭짓점 좌표를 다 얻어올 수 있었습니다. 그 말은 즉, 현재 유저의 화면 좌표 값도 알 수 있겠죠. 현재 화면 좌표값 내부에 포함되어 있는 핀들만 렌더링하도록 하여 버벅임 문제를 해결할 수 있었습니다.

줌을 할 때나 드래그를 할 때나 이 작업은 모두 진행되어야하므로 마커를 그리기 직전에 수행합니다. 로직으로 보면 아래와 같습니다.

// MarkerContext 중

  const createElementsInScreenSize = () => {
    if (!mapInstance) return;

    const mapBounds = mapInstance.getBounds();
    const northEast = mapBounds._ne;
    const southWest = mapBounds._sw;

    const coordinatesInScreenSize = coordinates.filter(
      (coordinate: any) =>
        coordinate.latitude <= northEast._lat &&
        coordinate.latitude >= southWest._lat &&
        coordinate.longitude <= northEast._lng &&
        coordinate.longitude >= southWest._lng,
    );

    return coordinatesInScreenSize;
  };

사이드바의 PinPreview를 클릭하면..

이 부분이 가장 애를 먹었던 부분입니다. 결과적으로 해결하였지만 아직 안정화가 덜 되어서 추가적으로 리팩토링이 필요해요.

위에서 지도에 달아준 이벤트는 ZoomEnd와 DragEnd 입니다. 하지만 사이드바의 핀프리뷰를 클릭하여 해당 핀으로 포커스 되는 이벤트는 해당되지 않습니다. 기존의 줌, 드래그 이벤트를 감지하면서, 사이드바의 핀프리뷰 포커스 이동까지 감지하는 이벤트는 MoveEnd 와 Idle 이란 이벤트 타입입니다만, 이전 이벤트가 중첩되는 문제가 있었습니다. 즉, 똑같은 마커가 두 번 세 번 그려져서 지워지지가 않는 이슈가 있었습니다. 또한 ZoomEnd 때만 서버에 요청을 보내야하는데 MoveEnd와 Idle 이벤트를 사용하면 드래그 상황에서도 서버에 불필요한 요청을 날리게 됩니다.

그래서 현재는 useAnimateClickedPin 이란 훅에서 클릭된 핀이 있을 경우 이전의 마커를 직접 지우고 지도 줌인 및 가운데로 초점 맞춘 뒤에 마커를 다시 그리는 작업을 수행하고 있습니다. 이 부분이 불안정한데, 가장 큰 문제는 공유하기를 통해 받은 URL 접속 시 해당 핀으로 포커스 작업이 진행되지 않습니다.

또한 useUpdateCoordinates 훅에서 좌표 상태값이 변경되면 알아서 기존 마커를 지우고 재생성하는데 이 부분과 분명 맞물리는 부분이 있을것으로 추정이되는데 실행 흐름순이 맞아서 그런지 문제가 없어보입니다. 최소한 마커 지우고 그리기를 두 번 이상 진행하는 비효율적인 과정인 있어보입니다.

아무튼 위 문제는 모아보기 작업과 동시에 안정화 작업을 진행할 예정입니다.

스크린샷

📎 관련 이슈

#613

레퍼런스

[GC-Park]

우워... 설명이 필요해...~~~