From acc21b4ac7c0ea407b5757a9babc79a733b07922 Mon Sep 17 00:00:00 2001
From: sb <sbsb401824@gmail.com>
Date: Sat, 11 Jul 2026 09:22:03 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=84=A4=EC=9D=B4=EB=B2=84=20=EC=A7=80?=
 =?UTF-8?q?=EB=8F=84=20=EC=9D=B8=EC=A6=9D=20=EC=8B=A4=ED=8C=A8=20=ED=95=B8?=
 =?UTF-8?q?=EB=93=A4=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- navermap_authFailure 전역 콜백 등록 → 잘못된 키/미등록 도메인 시 지도 폴백에 원인 표시
- 키만 넣으면 실좌표 마커가 렌더되도록 정비

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/NaverMap.vue |  5 ++++-
 src/lib/naverMap.ts         | 11 +++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/NaverMap.vue b/src/components/NaverMap.vue
index 4c81697..f7cf4ef 100644
--- a/src/components/NaverMap.vue
+++ b/src/components/NaverMap.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { loadNaverMaps } from '@/lib/naverMap'
+import { loadNaverMaps, onNaverAuthFailure } from '@/lib/naverMap'
 import type { Spot } from '@/api/spots'
 
 const props = defineProps<{
@@ -32,6 +32,9 @@ let infoWindow: naver.maps.InfoWindow | null = null
 const markers = new Map<number, naver.maps.Marker>()
 
 onMounted(async () => {
+  onNaverAuthFailure(() => {
+    errorMsg.value = '지도 인증 실패 · NCP 키가 유효한지, 서비스 URL(localhost:9000)이 등록됐는지 확인하세요.'
+  })
   try {
     const nv = await loadNaverMaps()
     if (!mapEl.value) return
diff --git a/src/lib/naverMap.ts b/src/lib/naverMap.ts
index 527ead9..3056832 100644
--- a/src/lib/naverMap.ts
+++ b/src/lib/naverMap.ts
@@ -2,6 +2,12 @@
 // 키는 네이버 클라우드 플랫폼(Maps)에서 발급. .env 의 VITE_NAVER_MAP_CLIENT_ID 로 주입.
 let loadPromise: Promise<typeof naver> | null = null
 
+// 인증 실패(잘못된 키/미등록 도메인) 콜백. 네이버 SDK 가 전역 navermap_authFailure 를 호출.
+const authFailureHandlers: Array<() => void> = []
+export function onNaverAuthFailure(cb: () => void): void {
+  authFailureHandlers.push(cb)
+}
+
 export function loadNaverMaps(): Promise<typeof naver> {
   if (typeof window !== 'undefined' && window.naver?.maps) {
     return Promise.resolve(window.naver)
@@ -14,6 +20,11 @@ export function loadNaverMaps(): Promise<typeof naver> {
   // 신규 키는 ncpKeyId, 구형 키는 ncpClientId. 필요 시 env 로 전환.
   const authParam = import.meta.env.VITE_NAVER_MAP_AUTH_PARAM || 'ncpKeyId'
 
+  // 네이버 SDK 는 인증 실패 시 이 전역 함수를 호출한다.
+  ;(window as unknown as { navermap_authFailure?: () => void }).navermap_authFailure = () => {
+    authFailureHandlers.forEach((h) => h())
+  }
+
   loadPromise = new Promise<typeof naver>((resolve, reject) => {
     if (!clientId) {
       reject(new Error('VITE_NAVER_MAP_CLIENT_ID 가 설정되지 않았습니다.'))