리액트 카카오 맵 API로 지도 위치 표시하기

안녕하세요

반갑습니딘.

 

제가 이번에 리액트 쓰면서 카카오맵 api 연동도 해봤는데요.

403의 늪에 빠져 엉엉 울다가

해결했기 때문에

기억하고자 씁니다

 

1. 비즈앱 생성

https://developers.kakao.com/

Kakao Developers

가입안한 사람은 가입하시고 

가입 하신분은 

메뉴바에 앱 누르시고

앱 생성을 해주셔야합니다요

각자 프로젝트 목적에 맞게 잘 작성해주시고요

저장까지 누르면 여기로 넘어옵니다

이미지가 있어야 비즈앱으로 전환가능

딱히 뭘 제출하거나 하진 않았고 그냥 바로 전환해줍니다

 

않이. 나는 리액트인데 바닐라 Js 기준으로 문서가 적혀있잖아! 라는 생각으로

찾아 보았는데요 멋진 개발자 선배님들께서 라이브러리를 만들어주셨습니다?

 

2. 사용하기

npm install react-kakao-maps-sdk
# or
yarn add react-kakao-maps-sdk

설치 해줍니다

 

https://react-kakao-maps-sdk.jaeseokim.dev/docs/intro

사실 여기 가면 다 나와있어요

tsconfig.json에 뭘 추가하라는데

저는 몰라서 안했습니다

잘 됩니다

 

그리고. 꼮!!!!

index.html에

<script
      type="text/javascript"
      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=본인이 발급받은javasrcipt키를 넣어주세요"
    ></script>

이 스크립트를 넣어줍니다

자바스크립트 키는 

앱>일반에 내리다보면 있습니다

여기서 자바스크립트 키 복사해서 넣으면 됩니다

 

import { usePlaceDetailQuery } from '@/api/place/placeHooks';
import Button from '@/components/common/Button';
import { Modal } from '@/components/common/Modal';
import Spinner from '@/components/common/Spinner';
import { parseOperatingHours } from '@/utils/timeUtils';
import { useTranslation } from 'react-i18next';
import { Map, MapMarker } from 'react-kakao-maps-sdk';

type PlaceDetailModalProps = {
  isOpen: boolean;
  onClose: () => void;
  placeId: number | null;
  lang: string;
};

const PlaceDetailModal = ({
  isOpen,
  onClose,
  placeId,
  lang,
}: PlaceDetailModalProps) => {
  const { t } = useTranslation();

  const { data: placeDetailData, isLoading } = usePlaceDetailQuery(
    { place_id: placeId, lang },
    { enabled: !!placeId && isOpen }
  );

  const place = placeDetailData?.place;
  console.log('디테일 모달입니당', place);
  const processedHours = place?.use_time
    ? parseOperatingHours(place.use_time)
    : [];
  const dayOfWeekMap = [
    '일요일',
    '월요일',
    '화요일',
    '수요일',
    '목요일',
    '금요일',
    '토요일',
  ];
  const todayName = dayOfWeekMap[new Date().getDay()];

  // const markerImageInfo = {
  //   src: '/pin.svg', // 마커 이미지 주소
  //   size: {
  //     width: 36,
  //     height: 52,
  //   }, // 마커 이미지의 크기
  //   options: {
  //     offset: {
  //       x: 18, // 마커의 가로 위치 (중앙으로 설정)
  //       y: 52, // 마커의 세로 위치 (하단으로 설정)
  //     },
  //   },
  // };

  if (isLoading) {
    return (
      <Modal isOpen={isOpen} onClose={onClose}>
        <Modal.Body>
          <div className='flex justify-center py-8'>
            <Spinner />
          </div>
        </Modal.Body>
      </Modal>
    );
  }

  if (!place) {
    return (
      <Modal isOpen={isOpen} onClose={onClose}>
        <Modal.Body>
          <div className='py-8 text-center text-gray-500'>
            명소 정보를 불러올 수 없습니다.
          </div>
        </Modal.Body>
      </Modal>
    );
  }
  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <Modal.Header>{place.name}</Modal.Header>
      <Modal.Body>
        <div className='h-[182px] w-full rounded-lg'>
          {place.latitude && place.longitude && (
            <Map
              center={{ lat: place.latitude, lng: place.longitude }} // 맵의 중심을 장소의 좌표로 설정
              style={{ width: '100%', height: '100%', borderRadius: '0.5rem' }}
              level={3} // 확대 레벨
            >
              <MapMarker
                position={{ lat: place.latitude, lng: place.longitude }}
                // image={markerImageInfo}
              />{' '}
              {/* 장소 위치에 마커 표시 */}
            </Map>
          )}
        </div>
        생략~~~~~
      </Modal.Body>
      <Modal.Footer>
        <Button className='mt-4'>{t('travel.add_to_plan')}</Button>
      </Modal.Footer>
    </Modal>
  );
};

export default PlaceDetailModal;

이건 제 코드인데요 진짜 별거 없어서 당황했습니다

위도 경도 넣어주고 마커까지 해주면 끝이었어요..

마커 커스텀도 됩니다 우하하하 주석한거 풀어서 쓰셔요

 

3. 403 에러

이렇게까지 햇는데 403이 뜨는겁니다

어..? 왜..??

등록을 안해줬거든요,.,,

프론트에서 개발하는 주소랑

실제 배포할 주소도 미리미리 써두십시오. 

앱> 일반에서 내리다보면 있어요

 

이렇게까지 했는데 403이 떠서 뭐가 문젠가.

하고 찾아봤더니

친절하게 알림도 보내주십니다.

 

상태 on으로 바꿔주면

 

이렇게 잘 뜹니다!

끝!

 

https://greed-yb.tistory.com/335

근데 저는 이분 글 보고 해결했어요,,

알림은 뒤늦게 봤습니다