Circle 컴포넌트 마운트 후, onIdle 이벤트로 중심좌표 이동시 오류

[ziponia]

문제 재연

https://github.com/ziponia/kakao-map-react-issue

• /public/index.html 에 카카오 지도 api key 를 넣으세요
• 페이지를 띄운 후, 지도를 이동시켜야 합니다.

[JaeSeoKim]

확인해보겠습니다! 이슈 및 예시 레포 감사합니다~!!

[JaeSeoKim]

https://github.com/ziponia/kakao-map-react-issue/pull/1

해당 이슈의 경우 center 객체에 대해서 중복된 명칭으로 사용 되어서 문제가 발생 한 것 같습니다! 또한 getCenter() 의 반환값에 대해서 type를 any로 정의후 내부 변수에 대해서 접근하여 사용하고 있는데 이부분은 언제든지 kakao에서 수정이 가능하므로 LatLng 로 사용하고 안내하는 내부 함수들을 이용하는 것이 좋아보입니다! (https://apis.map.kakao.com/web/documentation/#Map_getCenter)

내부 type에서 현재 LatLng | Coords 로 되어 있는데 이 부분은 수정해서 LatLng 로 수정 하도록 하겠습니다!

-        onIdle={(e) => {
-          const center = e.getCenter() as any;
-          setCenter({
-            ...center,
-            mapX: center.La,
-            mapY: center.Ma,
-          });
+        onIdle={(mao) => {
+         const mapCenter = mao.getCenter() as kakao.maps.LatLng;
+          setCenter((prev) => ({
+            ...prev,
+            mapX: mapCenter.getLng(),
+            mapY: mapCenter.getLat(),
+          }));

[JaeSeoKim]

혹시 문제가 해결되지 않았거나 더 궁금하신 점 있으시면 추가로 질문 부탁드릴께요!

[JaeSeoKim]

^1.0.2 : type 수정을 하여 as 를 이용하여 Type를 강제 하지 않고 사용할 수 있도록 수정 하였습니다.

...
  return (
    <div className="App">
      <Map
        center={{ lat: center.mapY, lng: center.mapX }}
        style={{ width: "100%", height: "360px" }}
        onIdle={(mao) => {
          const mapCenter = mao.getCenter();
          setCenter((prev) => ({
            ...prev,
            mapX: mapCenter.getLng(),
            mapY: mapCenter.getLat(),
          }));
        }}
      >
...

[ziponia]

type 이 추가된건 굉장히 좋아보입니다!

근데, 예상되는 행동은, onIdle 을 통해서, center state 를 업데이트 하게 되면, Circle 컴포넌트의 중심좌표도 같이 이동되어야 한다고 생각하는데 맞나요???

https://github.com/JaeSeoKim/react-kakao-maps-sdk/issues/1#issuecomment-944909840

위에 피드백을 참고해서 제 레포를 수정했어요~! 😀

[JaeSeoKim]

헛... 도형 객체들에 대해서 position 객체를 setPosition 사용하는 로직을 추가를 하지 않았었네요.. 버그 이슈 제보 감사합니다 ㅠㅠ 이슈 예시의 주석을 제대로 읽지 않았었네요.

https://github.com/JaeSeoKim/react-kakao-maps-sdk/blob/main/src/components/Circle.tsx#L111-L118

  useEffect(() => {
    if (circle) circle.setPosition(circleCenter)
  }, [circle, circleCenter])

위와 같은 코드를 추가해서 1시간 내로 다시 배포를 해드릴께요! 버그 이슈 제보 감사합니다!

[JaeSeoKim]

^1.0.3 : 🐛 Fix: Circle, Ellipse 중심이 변경되지 않는 오류 수정 [#1]

수정 완료 했습니다! 해당 예제를 테스트 해본 결과 정상적으로 중심을 따라 다시 원이 그려질 수 있습니다!

[ziponia]

방금 확인했어요! 빠른피드백에 감사합니다 :)