지도 위에 마커 생성하기

src 폴더 아래에 data 폴더 생성
data 폴더 안에 infos.ts 파일 생성
일단은 강의에서 제공한 더미데이터를 복붙해서 넣을 예정

export const infos = [
  {
    id: 1,
    addressName: "서울 용산구 동자동 43-205",
    placeName: "서울역",
    position: {
      lat: 37.5546788388674,
      lng: 126.970606917394,
    },
  },
  {
    id: 2,
    addressName: "서울 강남구 역삼동 858",
    placeName: "강남역 2호선",
    position: {
      lat: 37.49808633653005,
      lng: 127.02800140627488,
    },
  },
  {
    id: 3,
    addressName: "서울 관악구 봉천동 979-2",
    placeName: "서울대입구역 2호선",
    position: {
      lat: 37.4812845080678,
      lng: 126.952713197762,
    },
  },
];

특정 위치에 대한 이름을 나타내는..고런 데이터이다..

이 데이터에 대한 타입을 미리 설정해준다고 한다. 나중에 쓸 일이 많다고 함

src 폴더 밑에 types 폴더 생성
types 폴더 안에 info.ts 파일 생성

export type info = {
    id: number;
    addressName: string;
    placeName: string;
    position: {
      lat: number;
      lng: number;
    };
}

이렇게 아까 데이터의 요소들에 대한 데이터타입을 지정해준다...

src/components/common 폴더 안에 Marker 폴더 새로 생성하고
폴더 안에 index.tsx 파일 생성

rfce 해서 기본 포맷 만들고 안에 써있는걸 Marker로 통일한다.

import React from 'react';

function Marker() {
  return (
    <div>Marker</div>
  )
}

export default Marker;

그리고 네이버 공식문서를 활용해서 만들어보자~~!!

네이버지도 마커 문서

new naver.maps.Marker(options) 메서드를 활용하면 되고....
옵션들 중에서는

map, position, icon 정도만 활용할 것 같다.

각 옵션의 타입도 잘 확인해봐야 한다....

• position의 경우 Coord나 CoordLiteral을 사용해야 한다고 하고...문서 잘 읽어보면 될듯
  강의에서는 CoordLiteral 중 LatLngObjectLiteral을 사용한다고 한다. 왜냐하면 더미데이터의 Position과 동일하게 위도, 경도(Lat, Lng) 를 이용해서 좌표를 표시하기 때문임

• icon 같은 경우에도 다양한 타입을 사용할 수 있는데, 강의에서는 HtmlIcon을 활용할 예정이다.
  

HtmlIcon은 3개의 옵션(content, size, anchor)이 있고, 필수 옵션인 content의 경우 string 타입으로 받을 예정

이 내용 토대로 아까 만든 src/components/common/Marker/index.tsx 파일에 MarkerProps 인터페이스를 추가해준다.
그리고 마커를 클릭했을 때 뭐가 실행되어야 할 수도 있으니까(optional) onClick 메서드도 그 안에 추가해준다.

+ 마커를 클릭했을 때 그 마커의 중심점으로 지도를 이동하는 기능도 추가해준다고 한다....
=> PanTo(coord, transitionOptions): coord를 마커로 지정하면 됨

import React from 'react';

interface MarkerProps {
    map: naver.maps.Map;
    position: {
        lat: number;
        lng: number;
    };
    content: string;
    onClick?: () => void;
}

function Marker({ map, position, content, onClick }: MarkerProps) {
    useEffect(() => {
        let marker: naver.maps.Marker | null = null;
        
        if (map) {
            marker = new naver.maps.Marker({
                map,
                position: new naver.maps.LatLng(position),
                icon: {
                    content,
                },
            });
        }

        if (onClick) {
            naver.maps.Event.addListener(marker, "click", onClick);
            map.panTo(position);
        }

        return () => {
            marker?.setMap(null);
        };
    }, [map]);

  return null;
}

export default Marker;