[AUD-8] 마커 생성 및 삭제 기능 구현

[KimGaeun0806]

📃 변경사항

• env.template 업데이트
• 마커 생성 기능 추가
• 마커 삭제 기능 추가

🫨 고민한 부분

• 계속 GET https://apis.openapi.sk.com/tmap/vectorjs?version=1&appKey=앱키부분 에서 403 Forbidden 에러가 나네요 ㅠ
  찾아보니 403 Forbidden은 잘못된 앱키로 호출한거라는데 무엇이 문제인지 잘 모르겠네요..
  이 과정에서 앱키 한 번 재발급했으니 참고 부탁드립니다.
  그래서 일단 제대로 작동하는지 테스트는 못해본 상태입니다.

• 마커 삭제 부분에서 파라미터로 어떤 것을 받을지 잠시 고민했습니다.
  일단 위경도를 받아와서, 해당 위경도에 찍힌 마커를 삭제하는 식으로 구현했습니다.

💫 기타사항

• 에러나는부분 뭐가 문제인지 파악하고, 혹시 구현한 부분에 문제가 있으면 추후 수정하도록 하겠습니다.

[RookieAND]

마커 추가 및 삭제를 작업해주셔서 감사합니다.
다만 내부 로직을 살펴보니 같이 의논해야 할 사항이 하나 있고, 추가로 제안드릴 사항도 하나가 있어 보입니다.
하단의 코멘트로 의견을 남겼으니 찬찬히 읽어보시고 답장 부탁드립니다.

[RookieAND]

제거할 marker map에서 없앤 후에 #markers private 속성에도 반영되어야 할 것 같아요.

        this.#markers = this.#markers.filter(
            (marker) =>
                marker.getPosition().lat() !== latitude ||
                marker.getPosition().lng() !== longitude,
        );

[RookieAND]

추가로, 마커를 삭제할 때 인자를 lat, lng 형식이 아닌 index 로 받는 것은 어떨까요?
추후 개발 고도화 시 각 마커 간의 index (순서) 를 많이 쓰게 될 텐데, 그때도 좌표를 직접 받아 필터링하는 것보다는 현재 해당 마커가 등록된 순서를 기반으로 지우는 게 더 편하지 않을까 싶어서 제안드립니다.

[KimGaeun0806]

찍은 핀들을 어떻게 관리할 지 아직 확정되지 않아서, 일단 위경도를 받아서 삭제하는 식으로 구현해두었습니다.
저희가 어떻게 데이터를 관리할지 이야기한 후에 수정하면 좋을 것 같아요

[RookieAND]

사실 UI 상으로는 리스트로 관리되고 있기 때문에 Array로 관리하지 않을까? 라는게 제 생각이긴 했습니다.
월요일에 이 주제와 관련해서 논의가 이루어지면 좋을 것 같네요

[KimGaeun0806]

월요일 회의록 안건에 추가해두겠습니다

[RookieAND]

마커를 잘 추가했지만, 이후에 이를 제거하는 과정이 다소 어렵다고 생각합니다.
그 이유는 크게 아래 3가지로 기술합니다.

1. 마커가 생성된 후, 맵에 생성된 마커를 제거하기 위해서는 맵 위에 띄워진 마커를 클릭해야 한다.
2. 하지만 이때 ClickEvent 가 발동되는 주체는 Map 이기 때문에, 해당 Map 에서 클릭된 좌표와 마커가 생성된 위/경도가 정확히 일치해야 한다.
3. 이 경우 사용자는 마커 아이콘을 눌렀으니 마커가 제거될 것이라 생각하지만, 실제로는 마커 아이콘이 가리키는 하단의 아주 작은 점을 정확히 클릭해야 한다.

설명이 조금 길었으나 결론은 마커 생성 이후 "ClickEvent" 를 부착시켜서, 마커를 클릭할 시 다시 해당 마커가 제거되도록 관리하자는 게 포인트입니다.

다행히 API 에도 마커에 ClickEvent 를 부착할 수 있다는 단서를 주었고, 인자로 받은 event 를 콘솔에 찍어보니 아래와 같은 결과가 나왔습니다.

이를 기반으로 제가 생각한 코드는 아래와 같습니다. (event 인자는 타입 모듈이 없어 부득이하게 any 를 사용했습니다)

        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        marker.on('Click', (event: any) => {
            const [clickedMarkerLatitude, clickedMarkerLongitude] =
                event._marker_data.vsmMarker._lngLat;
            this.removeMarker({
                latitude: clickedMarkerLatitude,
                longitude: clickedMarkerLongitude,
            });
        });

        this.#markers.push(marker);

[KimGaeun0806]

마커를 삭제하기 위해서는 지도 위의 해당 마커를 다시 클릭하는게 아니라, 리스트에서 삭제 버튼을 눌러서만 삭제 가능한 것으로 알고 있습니다.

혹은 다른 분들과 상의하여 마커를 클릭했을 띄워지는 인포창 내에 삭제 버튼을 넣어도 좋을 것 같습니다.
지도에 특정 위치를 클릭했을 때 인포창이 뜨고, 해당 인포창 내의 핀 생성 버튼을 클릭해야 핀이 생성되니
비슷하게 핀 삭제도 인포창 내에 있는게 좋을 것 같습니다

[RookieAND]

그렇군요. 리스트에서 삭제 버튼을 눌렀을 때 해당 마커의 lat, lng까지 저장할 거라면 이 방법이 나은데,
그러려면 Marker 에서 getPosition 메서드로 LatLng 객체를 가져온 후에 lat, lng 속성에 접근해야 하는지라
다소 번거롭지 않을까? 라는게 제 생각이었습니다. 가은님의 의견은 어떠신가요?

[KimGaeun0806]

개발적인 측면을 떠나서, UX적인 관점에서 마커를 클릭했을 때 바로 삭제되는 것보다는 인포창의 삭제 버튼을 눌러서 삭제하는게 더 낫다고 생각했습니다.
사람마다 다르겠지만 보통 마커를 클릭했을 때 바로 삭제된다기보다는 마커에 관한 정보가 뜬다고 생각할 것 같아서요!
이 부분도 월요일에 다른 분들과 상의해서 정하면 좋을 것 같습니다

[RookieAND]

위에서 Tmapv3 를 비구조화 할당으로 꺼냈다면 여기도 반영해줘야 할 거 같아요.

[KimGaeun0806]

이부분은 발견을 못했네요.. 수정하겠습니다

[RookieAND]

LGTM, 고생하셨습니다!