2. 메인 페이지 UI

📌 카카오맵 API 불러오기

• 리액트 카카오맵 패키지 설치

$ npm install react-kakao-maps-sd

 

• public > index.html
  • 카카오 api 스크립트 추가

<script
type="text/javascript"
src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=YOUR_APP_KEY&libraries=services">
</script>

 

• 다운 받은 패키지 import 코드 추가
  • jsx에서 사용법

// MainMap.jsx
import { Map, MapMarker } from "react-kakao-maps-sdk";

// Mainpage.jsx
import MainMap from "../components/MainMap";
...
<MainMap />
...

 

🔐 YOUR_APP_KEY 부분 ← 카카오 개발자 콘솔에서 발급 받은 JavaScript 키로 변경

• https://developers.kakao.com/
• 카카오 계정 로그인
• 내 어플리케이션 추가 → 생성한 앱 상단에 앱 키 탭 클릭 → JavaScript 키 복사

 

• 좌측 사이드바에서 "플랫폼" → "웹" 선택→ 사이트 도메인 등록
  
  • 실제 배포 시에는 배포된 URL도 등록해야 함 (예: https://myapp.vercel.app)

 

• 프로젝트 루트에 .env 파일 생성

VITE_KAKAO_MAP_API_KEY=f80a0259d3afd5dbe8a014ab127b63cc

 

---

💥 지도 API 관련 에러

• 코드에 오류 없고 콘솔 창에 뜨는 에러도 없는데 (위치 값 제대로 들어오는 지 확인 해봤을 때 콘솔에 잘 찍힘), 메인 화면에 지도 화면만 안 뜨는 문제 발생

🚀 해결 방법

 

→ 활성화 상태로 바꾸고 문제 해결.

 

---

💭 마커 위에 뜨는 하얀박스 없애기

 

 

🔎 원인 

<MapMarker> 내부에 작성한 children 요소 때문
카카오맵에서 이 children을 넣으면 자동으로 "말풍선 스타일 인포윈도우" 박스를 렌더링함 그래서 뜬 것

• MapMarker: 마커만 보여줌
• CustomOverlayMap: 내가 직접 디자인한 UI 요소를 지도 위 특정 위치에 붙임
• yAnchor={1.2}: 오버레이 위치를 마커 위로 띄우는 역할

🚀 해결방안
→ 마커 위에 말풍선 대신, 직접 만든 UI를 지도 위에 표시하면 됨 !

 

 

{/* 음식점 마커 수정 전*/}
        {restaurants.map((r) => (
          <MapMarker key={r.id} position={{ lat: r.lat, lng: r.lng }}>
            <div className="bg-white border-2 border-vintagePink text-black font-semibold px-4 py-2 rounded-md shadow text-xs">
              {r.name}
              <br />\ {r.price.toLocaleString()}원
            </div>
          </MapMarker>
        ))}

 

⬇️

{/* 음식점 마커 */}
        {restaurants.map((r) => (
          <React.Fragment key={r.id}>
            <MapMarker position={{ lat: r.lat, lng: r.lng }} />
            <CustomOverlayMap
              position={{ lat: r.lat, lng: r.lng }}
              yAnchor={1.2}
            >
              <div className="bg-white border-2 border-vintagePink text-black font-semibold px-4 py-2 rounded-md shadow text-xs whitespace-nowrap">
                {r.name}
                <br />₩ {r.price.toLocaleString()}원
              </div>
            </CustomOverlayMap>
          </React.Fragment>
        ))}