feat: 네이버 지도 연동 (스팟 마커)
- 네이버 지도 JS SDK 동적 로더(싱글턴) + @types/navermaps 타입 - NaverMap 컴포넌트: 스팟 실좌표 마커, 클릭 시 스팟 선택/정보창, 선택 시 중심 이동 - HomePage 지도 자리를 네이버 지도로 교체, 마커 선택 → 해당 스팟 한줄평/메이트 로드 - 키(VITE_NAVER_MAP_CLIENT_ID) 미설정 시 폴백 처리 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,30 @@
|
||||
// 네이버 지도 JS SDK 동적 로더 (싱글턴)
|
||||
// 키는 네이버 클라우드 플랫폼(Maps)에서 발급. .env 의 VITE_NAVER_MAP_CLIENT_ID 로 주입.
|
||||
let loadPromise: Promise<typeof naver> | null = null
|
||||
|
||||
export function loadNaverMaps(): Promise<typeof naver> {
|
||||
if (typeof window !== 'undefined' && window.naver?.maps) {
|
||||
return Promise.resolve(window.naver)
|
||||
}
|
||||
if (loadPromise) {
|
||||
return loadPromise
|
||||
}
|
||||
|
||||
const clientId = import.meta.env.VITE_NAVER_MAP_CLIENT_ID
|
||||
// 신규 키는 ncpKeyId, 구형 키는 ncpClientId. 필요 시 env 로 전환.
|
||||
const authParam = import.meta.env.VITE_NAVER_MAP_AUTH_PARAM || 'ncpKeyId'
|
||||
|
||||
loadPromise = new Promise<typeof naver>((resolve, reject) => {
|
||||
if (!clientId) {
|
||||
reject(new Error('VITE_NAVER_MAP_CLIENT_ID 가 설정되지 않았습니다.'))
|
||||
return
|
||||
}
|
||||
const script = document.createElement('script')
|
||||
script.src = `https://openapi.map.naver.com/openapi/v3/maps.js?${authParam}=${clientId}`
|
||||
script.async = true
|
||||
script.onload = () => resolve(window.naver)
|
||||
script.onerror = () => reject(new Error('네이버 지도 SDK 를 불러오지 못했습니다.'))
|
||||
document.head.appendChild(script)
|
||||
})
|
||||
return loadPromise
|
||||
}
|
||||
Reference in New Issue
Block a user