feat: 지도 카카오로 전환 + 확대/축소·현재위치 (네이버 코드 유지)
CI / build (push) Failing after 11m24s

홈 지도를 Kakao Maps JS SDK 로 교체. ZoomControl(확대/축소)과
현재위치 버튼(@capacitor/geolocation → 파란 점 표시) 추가.
naverMap.ts / NaverMap.vue 는 미사용으로 보존.
시뮬레이터에서 렌더·현재위치 확인.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
sb
2026-07-11 13:26:42 +09:00
parent b5f394a7bc
commit 0e69218710
8 changed files with 332 additions and 4 deletions
+41
View File
@@ -0,0 +1,41 @@
// 카카오 지도 JS SDK 동적 로더 (싱글턴)
// JavaScript 키는 Kakao Developers > 내 애플리케이션 > 앱 키 > JavaScript 키.
// .env 의 VITE_KAKAO_MAP_KEY 로 주입. 콘솔 > 플랫폼 > Web 에 서비스 도메인 등록 필요
// (개발: http://localhost:9000 / 라이브리로드 IP, 배포: 실제 도메인·capacitor 스킴).
let loadPromise: Promise<typeof kakao> | null = null
export function loadKakaoMaps(): Promise<typeof kakao> {
if (typeof window !== 'undefined' && window.kakao?.maps) {
return Promise.resolve(window.kakao)
}
if (loadPromise) {
return loadPromise
}
const appKey = import.meta.env.VITE_KAKAO_MAP_KEY
loadPromise = new Promise<typeof kakao>((resolve, reject) => {
if (!appKey) {
reject(new Error('VITE_KAKAO_MAP_KEY 가 설정되지 않았습니다.'))
return
}
const script = document.createElement('script')
// autoload=false → 스크립트 로드 후 kakao.maps.load 로 명시적으로 초기화한다.
script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${appKey}&autoload=false`
script.async = true
script.onload = () => {
// 키/도메인이 유효하지 않으면 load 콜백이 호출되지 않을 수 있어 타임아웃으로 방어.
const timer = setTimeout(
() => reject(new Error('카카오 지도 초기화 실패 · 키/도메인 등록을 확인하세요.')),
8000,
)
window.kakao.maps.load(() => {
clearTimeout(timer)
resolve(window.kakao)
})
}
script.onerror = () => reject(new Error('카카오 지도 SDK 를 불러오지 못했습니다.'))
document.head.appendChild(script)
})
return loadPromise
}