[Next js] 현재 위치값을 카카오맵API에 연동 후 주소값 가져오기

이전에 Geolocation API 로 현재 위치의 위도와 경도를 구했다.
오늘은 카카오맵API를 연동해서 구한 위도와 경도를 넘겨주어서 주소값을 추출할것이다.

• 위도경도값이 잘 가져왔다면(setLocation에 저장된 후) getAddress함수(주소값불러오는 함수) 를 호출한다.
• 호출할 때 인자로 위도와 경도를 넘겨준다.
• 여기서 호출한 함수(주소가져오는함수)는 비동기함수로 await를 붙여서 호출한다.

getAddress(주소값불러오는 함수) - 카카오맵 연동

• https://dapi.kakao.com/v2/local/geo/coord2regioncode.json?x=${lng}&y=${lat} 처음 패치 주소를 이렇게 했는데 이건
  coord2regioncode => 이거는 전북특별자치도 전주시 완산구 까지만 나오는요청이다.
  

• coord2address => "전북특별자치도 전주시 완산구 경원동3가 105"로 주소 전체(구주소,도로명 포함)를 요청한다.
  

1. documents[0].address = 구주소(선택)
2. documents[0].road_address = 도로명(좌표찍어보니 도로명이 없는것도 있다..)
   이거를 캐치못하고 다시 수정해야한다..ㅎㅎ 다음엔 꼭 코드 짜기전에 체크하는걸루

'use client';

import { useEffect, useState } from 'react';

const StampActive = () => {
  const [location, setLocation] = useState<{ lat: number; lng: number } | null>(null); //위치상태
  const [error, setError] = useState<string | null>(null); //에러상태
  const [address, setAddress] = useState<{
    address_name: string;
    region_1depth_name: string;
    region_2depth_name: string;
    region_3depth_name: string;
  } | null>(null); //현재주소

  const getAddress = async (lat: number, lng: number) => {
    //주소가져오는함수
    try {
      //주소 데이터를 요청
      const res = await fetch(`https://dapi.kakao.com/v2/local/geo/coord2address.json?x=${lng}&y=${lat}`, {
        headers: {
          Authorization: `KakaoAK ${process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY}`
        }
      });
      const data = await res.json();
      if (data) {
        const addressData = data.documents[0].address;//지번
        setAddress({ //address 상태값 업뎃
          address_name: addressData.address_name, //전체 지번 주소
          region_1depth_name: addressData.region_1depth_name, //지역 1 Depth, 시도 단위
          region_2depth_name: addressData.region_2depth_name,//지역 2 Depth, 구 단위
          region_3depth_name: addressData.region_3depth_name//지역 3 Depth, 동 단위
        }); //주소넣어주기
      }
    } catch (error) {
      setError('주소를 가져오는 중 오류가 발생했습니다.');
    }
  };

  //가져오기 실패했을때 상황에 따른 에러메세지
  const showErrorMsg = (error: GeolocationPositionError) => {...};

  useEffect(() => {
    if ('geolocation' in navigator) {
      //현 브라우저가 Geolocation API를 지원하는지 확인
      navigator.geolocation.getCurrentPosition(
        //사용자의 현재 위치를 요청
        async (position) => { //구조분해할당으로 코드 변경
          const { latitude, longitude } = position.coords;
          setLocation({ lat: latitude, lng: longitude });
          await getAddress(latitude, longitude); //주소값 가져오는 함수에 위도경도 인자로 넘기기
        },
        (err) => {
          showErrorMsg(err.error);
        },
        {
          enableHighAccuracy: true, // 정확도 우선 모드 (이걸안넣으면 버정한정거장 정도 차이있는거같음)
          timeout: 60000, // 1분 이내에 응답 없으면 에러 발생
          maximumAge: 0 // 항상 최신 위치 정보 수집
        }
      );
    } else {
      setError('브라우저가 Geolocation을 지원하지 않습니다.');
    }
  }, []);

  return (
    <>
      <h1>내 위치</h1>
      {address ? (
        <p>주소 : {address.address_name}</p>
      ) : (
        <p>{error ? `Error: ${error}` : '위치를 가져오고있습니다...'}</p>
      )}
    </>
  );
};

export default StampActive;

카카오맵 API 참고한 부분 )

참고자료
kakao developers
Geolocation API로 현재 위치 가져오기