Feat: 카카오맵 연결 & 지도 플로우 구현

[doyn511]

close #33

✅ 완료 태스크

• 카카오맵 api 연결
• geolocation 통해 사용자의 현재위치 받아오기
• 보여지는 지도 기준 주변 여행지 검색 (위치기반관광정보조회 공공api 연결
• 핀 클릭 시 바텀시트를 통해 해당 지역 상세정보 보여주기

🔎 PR 내용

1. 카카오맵 api 연결

const { kakao } = window;

export const createKakaoMap = (loc: locType | undefined, level: number) => {
  if (loc?.lat && loc?.lng) {
    const container = document.getElementById('map');
    const options = {
      center: new kakao.maps.LatLng(loc.lat, loc.lng),
      level: level,
    };
    const kakaoMap = new kakao.maps.Map(container, options);
    return kakaoMap;
  }
};

• return하는 값을 해당 뷰의 최상단 MapPage.tsx에서 state로 관리합니다.
• level(현재 화면에서 지도가 얼마나 축소/확대 되는지의 값)이나 중심 좌표 값이 바뀔 때마다 map 상태를 업데이트 시켜줍니다.

2. geolocation을 통한 사용자의 현위치 받아오기

const getCurrentLoc = () => {
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const latlng = new kakao.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude,
          );
          if (map) {
            clearMarker();
            map.setCenter(latlng);
            map.setLevel(4);
          }
          setGetLocActive(true);
        },
        (err) => {
          alert('동의 거부 - 권한 재설정 필요');
          console.log(err);
        },
      );
    } else {
      //브라우저가 geolocation 지원 X
      alert('해당 브라우저에서 현재 위치를 가져올 수 없습니다.');
    }
  };

• 사용자가 동의를 거부하면 err 함수가 동작합니다 (아직 어떻게 처리할지 상의하지 못해 일단 alert창 띄워주기로 구현)
• 검색 기능을 이용한 뒤, 다시 현위치 버튼을 클릭하면 검색 결과로 보이던 핀은 사라지고 (clearMarker( )) 현위치를 기준으로 지도가 다시 그려집니다.

3. 주변 여행지 검색 버튼

  const onClickSearch = async () => {
    const response = await getMapCenter(map);

    if (map && response && response.item) {
      clearMarker();

      apiRes.current = response.item;

      const { curMarkers } = createMapPin(
        apiRes.current,
        map,
        setBottomSheetContent,
        openBottomSheet,
      );

      if (curMarkers) {
        curMarkers.forEach((marker) => {
          marker.setMap(map);
        });

        setMarkers(curMarkers);
        map.setLevel(6);
      }
    }
  };

• getCenter(map)에서 공공api를 이용해 주변 여행지를 검색합니다.
• createMapPin(...)을 통해 결과값에 해당하는 마커를 생성합니다.
• 위에서 생성된 마커를 지도에 그려줍니다 (forEach 부분!)

그 외 더 참고할만한 사항

/** 저장된 유저 정보로 default 위도, 경도 검색 */
export const setDefaultLocation = (city: string, town: string) => {
  const currentCity = POSITION_LATLNG.find((item) => item.city === city);
  const currentTown = currentCity?.town.find((item) => item.key === town);

  return currentTown;
};

• 현재 사용자 기본 위치에 대한 위도, 경도 값을 constants 파일로 따로 만들어 /map 진입 시, 검색하는 과정을 거치고 있습니다..!
• 아예 서버에서 api를 받아올 때 사용자의 기본 위치 값을 '서울특별시', '강남구'와 같이 string값이 아닌, 아예 위도/경도 값을 받아온다면 검색 과정을 거치지 않고 바로 state의 초기값으로 지정할 수 있어서 그렇게 해달라고 일단 가형이한테 요청한 상태입니다..! 까먹을까봐 여기에도 남겨요!

논의하고 싶은 사항 & 나중에 수정할 부분

• 지도 위의 마커 클릭 시, 클릭된 마커를 제외한 나머지 마커들은 사라지도록 .. 혹은 클릭된 핀의 사이즈가 좀 더 커지도록..추후에 구현하겠습니다.
• 공공api를 한번만 사용하려면 바텀시트에 넣을 수 있는 내용은 이미지, 타이틀, 주소 까지이고, 운영시간은 알 수 없더라고요. 일단은 없이 구현했는데 만약 너무 디자인이 허전한 것 같다면 (1. 디자인 수정 / 2. 다른 공공 api 함께 사용) 둘 중 한가지 방법으로 가야할 것 같습니다.
• 바텀시트 애니메이션 .. 나중에 넣어보도록 하겠습니다..
• 저장한 여행지에 대한 내용은 나중에 서버 api 연결되면 구현하겠습니다 ..
• 바텀시트에서 장소의 이름이 너무 긴 경우 일단 말 줄임표를 이용하도록 구현해두었습니다.

📷 스크린샷

[초기화면]

[ 주변 여행지 검색 결과 ]

[ 마커 클릭 시 & 말줄임표 ]

[ 전체적인 플로우 ]

2024-09-22.2.07.05.mov

2024-09-22.2.07.34.mov

2024-09-22.2.08.14.mov