fix(map): NaverMapView 안정화 — divRef 항상 마운트 + ResizeObserver

- 이전: ready 가드로 첫 렌더 시 ref 누락 가능 → SDK가 div 못 잡음
- 명시적 width/height + 회색 배경(시각적 로딩 표시)
- ResizeObserver + rAF로 컨테이너 0×0 → 정상 크기 시 m.refresh
- try/catch + initError로 init 실패 가시화

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

CHANGELOG.md

@@ -6,6 +6,28 @@
 
 ## 2026-06-16
 
+### 🗺️ NaverMapView 안정화 + 재활성 (v0.1.57)
+- divRef 항상 마운트 (이전: ready 가드로 첫 렌더 ref 누락 가능)
+- 명시적 width/height + 회색 배경(시각적 로딩 표시)
+- ResizeObserver + requestAnimationFrame으로 컨테이너 0×0 → 정상 크기 시 refresh
+- try/catch + initError state로 init 실패 가시화
+- Naver 키 재활성
+
+### ⏪ NaverMap 임시 비활성, 한국도 GoogleMap fallback (v0.1.55)
+- NaverMapView 골격이 실 운영에서 지도/마커 렌더 실패 (정확한 원인 추후 진단)
+- NEXT_PUBLIC_NAVER_MAP_CLIENT_ID 빈 값으로 dispatcher가 GoogleMap fallback (회귀 0)
+- NaverMapView 코드는 유지 — 안정화 후 환경변수 채우면 재활성
+
+### 🐛 /api/stats/visits 500 — StatsMapper resultType int → long (v0.1.54)
+- StatsMapper interface는 `long` 반환인데 XML resultType이 `int` → Integer를 long에 cast 실패
+- ClassCastException: Integer → Long. resultType만 long으로 교정
+
+### 🐛 NaverMap 인증 파라미터 ncpClientId → ncpKeyId (v0.1.53)
+- NCLOUD 신 정책: `ncpKeyId` 사용 (옛 `ncpClientId`는 NAVER Developers용)
+- 인증 200/Failed의 진짜 원인 — 도메인 등록은 정확했으나 파라미터 이름 차이로 키 인식 실패
+- 새 NCLOUD Maps Client ID(`fg01bipxbo`)로 prod 재빌드
+- 참고: https://github.com/navermaps/maps.js.ncp/blob/master/index.html
+
 ### 🗺️ #363 메인 지도 SDK 국내(네이버)/해외(구글) 분기 (v0.1.52)
 - MapView를 dispatcher로 전환: 좌표가 KR bbox + NAVER_MAP_CLIENT_ID 설정 시 NaverMapView, 그 외 GoogleMapView
 - NaverMapView 신규 (네이버 v3 직접 wrapper, Supercluster 재사용, 마커/클러스터/flyTo)

backend-java/src/main/resources/mybatis/mapper/StatsMapper.xml

@@ -10,13 +10,13 @@
         WHEN NOT MATCHED THEN INSERT (visit_date, visit_count) VALUES (src.d, 1)
     </update>
 
-    <select id="getTodayVisits" resultType="int">
+    <select id="getTodayVisits" resultType="long">
         SELECT NVL(visit_count, 0)
         FROM site_visits
         WHERE visit_date = TRUNC(SYSDATE)
     </select>
 
-    <select id="getTotalVisits" resultType="int">
+    <select id="getTotalVisits" resultType="long">
         SELECT NVL(SUM(visit_count), 0)
         FROM site_visits
     </select>

frontend/src/components/NaverMapView.tsx

@@ -5,33 +5,29 @@ import Supercluster from "supercluster";
 import type { Restaurant } from "@/lib/api";
 import { getCuisineIcon } from "@/lib/cuisine-icons";
 import Icon from "@/components/Icon";
-import type { MapBounds, FlyTo, MapViewProps } from "@/components/MapView.types";
+import type { MapBounds, MapViewProps } from "@/components/MapView.types";
 
-// ---- naver maps v3 타입 최소 정의 (full 타입은 @types/navermaps 없음) ----
 declare global {
   interface Window {
-    naver?: {
-      maps: NaverMaps;
-    };
+    naver?: { maps: NaverMaps };
   }
 }
 type NaverMaps = {
   LatLng: new (lat: number, lng: number) => unknown;
   Map: new (el: HTMLElement, opts: Record<string, unknown>) => NaverMapInstance;
   Event: { addListener: (target: unknown, type: string, fn: (...args: unknown[]) => void) => unknown };
-  Position?: unknown;
-  MapTypeControlStyle?: unknown;
-  ZoomControlStyle?: unknown;
+  Size: new (w: number, h: number) => unknown;
 };
 type NaverMapInstance = {
   setCenter: (latlng: unknown) => void;
   setZoom: (zoom: number, useEffect?: boolean) => void;
-  getCenter: () => { lat: () => number; lng: () => number; x: number; y: number };
+  getCenter: () => { lat: () => number; lng: () => number };
   getZoom: () => number;
   getBounds: () => { getNE: () => { lat: () => number; lng: () => number }; getSW: () => { lat: () => number; lng: () => number } };
   getProjection: () => { fromCoordToOffset: (latlng: unknown) => { x: number; y: number } };
   panTo: (latlng: unknown, opts?: Record<string, unknown>) => void;
-  destroy?: () => void;
+  refresh: (noEffect?: boolean) => void;
+  setSize?: (size: unknown) => void;
 };
 
 const NAVER_CLIENT_ID = process.env.NEXT_PUBLIC_NAVER_MAP_CLIENT_ID || "";
@@ -41,10 +37,7 @@ function useNaverMaps(): { ready: boolean; error: string | null } {
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    if (!NAVER_CLIENT_ID) {
-      setError("NEXT_PUBLIC_NAVER_MAP_CLIENT_ID 미설정");
-      return;
-    }
+    if (!NAVER_CLIENT_ID) { setError("NEXT_PUBLIC_NAVER_MAP_CLIENT_ID 미설정"); return; }
     if (window.naver?.maps) { setReady(true); return; }
     const existing = document.querySelector<HTMLScriptElement>(`script[data-naver-maps]`);
     if (existing) {
@@ -52,7 +45,7 @@ function useNaverMaps(): { ready: boolean; error: string | null } {
       return;
     }
     const s = document.createElement("script");
-    s.src = `https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=${NAVER_CLIENT_ID}`;
+    s.src = `https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=${NAVER_CLIENT_ID}`;
     s.async = true;
     s.dataset.naverMaps = "1";
     s.onload = () => setReady(true);
@@ -109,11 +102,13 @@ export default function NaverMapView({
   const mapRef = useRef<NaverMapInstance | null>(null);
   const [bounds, setBounds] = useState<MapBounds | null>(null);
   const [zoom, setZoom] = useState(13);
+  const [initError, setInitError] = useState<string | null>(null);
   const { getClusters, getExpansionZoom } = useSupercluster(restaurants);
 
-  // 1) 지도 인스턴스 1회 생성
+  // 지도 1회 생성 — divRef 항상 마운트되므로 ready 시점에 안정적으로 잡힘
   useEffect(() => {
     if (!ready || !divRef.current || mapRef.current) return;
+    try {
       const n = window.naver!.maps;
       const initLat = flyTo?.lat ?? selected?.latitude ?? 37.5665;
       const initLng = flyTo?.lng ?? selected?.longitude ?? 126.978;
@@ -127,20 +122,40 @@ export default function NaverMapView({
         zoomControl: false,
       });
       mapRef.current = m;
+
+      // 컨테이너 크기 변경(예: flex layout 안에서 첫 마운트 시 0×0 → 실제 크기) → refresh
+      const ro = new ResizeObserver(() => {
+        try { m.refresh(true); } catch { /* noop */ }
+      });
+      ro.observe(divRef.current);
+
       const sync = () => {
+        try {
           const b = m.getBounds();
           const ne = b.getNE(), sw = b.getSW();
           const nb: MapBounds = { north: ne.lat(), south: sw.lat(), east: ne.lng(), west: sw.lng() };
           setBounds(nb);
           setZoom(m.getZoom());
           onBoundsChanged?.(nb);
+        } catch (e) {
+          console.warn("[NaverMap] sync failed", e);
+        }
       };
+      // 컨테이너 크기가 정해진 다음 sync (rAF로 다음 프레임)
+      requestAnimationFrame(() => {
+        try { m.refresh(true); } catch { /* noop */ }
         sync();
+      });
       n.Event.addListener(m, "bounds_changed", sync);
       n.Event.addListener(m, "zoom_changed", sync);
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : String(e);
+      console.error("[NaverMap] init failed", e);
+      setInitError(msg);
+    }
   }, [ready, flyTo, selected, onBoundsChanged]);
 
-  // 2) flyTo 변경 반영
+  // flyTo 변경 반영
   useEffect(() => {
     const m = mapRef.current;
     if (!m || !flyTo || !window.naver?.maps) return;
@@ -153,22 +168,38 @@ export default function NaverMapView({
     return getClusters(bounds, zoom);
   }, [bounds, zoom, getClusters]);
 
-  // 3) 좌표 → 화면 픽셀 변환 (네이버 projection)
   const toScreen = useCallback((lat: number, lng: number) => {
     const m = mapRef.current;
     if (!m || !window.naver?.maps) return null;
-    const p = m.getProjection().fromCoordToOffset(new window.naver.maps.LatLng(lat, lng));
-    return p;
+    try {
+      return m.getProjection().fromCoordToOffset(new window.naver.maps.LatLng(lat, lng));
+    } catch {
+      return null;
+    }
   }, []);
 
-  if (error) return <div className="w-full h-full flex items-center justify-center text-xs text-red-500">{error} — 새로고침 후에도 같으면 Google Map으로 폴백됩니다.</div>;
-  if (!ready) return <div className="w-full h-full flex items-center justify-center text-xs text-gray-400">네이버 지도 로딩 중…</div>;
-
   return (
     <div className="relative w-full h-full">
-      <div ref={divRef} className="absolute inset-0" />
+      {/* 지도 컨테이너 — 항상 마운트, 명시적 크기 보장 */}
+      <div
+        ref={divRef}
+        className="absolute inset-0"
+        style={{ width: "100%", height: "100%", backgroundColor: "#e5e7eb" }}
+      />
 
-      {/* 마커 overlay (좌표→픽셀 변환 + absolute positioned div) */}
+      {/* 로딩/에러 overlay */}
+      {(error || initError) && (
+        <div className="absolute inset-0 flex items-center justify-center text-xs text-red-600 bg-white/80 pointer-events-none">
+          {error ?? initError} — 새로고침 또는 GoogleMap로 fallback
+        </div>
+      )}
+      {!ready && !error && (
+        <div className="absolute inset-0 flex items-center justify-center text-xs text-gray-500 bg-white/80 pointer-events-none">
+          네이버 지도 로딩 중…
+        </div>
+      )}
+
+      {/* 마커 overlay */}
       {clusters.map((feature) => {
         const [lng, lat] = feature.geometry.coordinates;
         const pt = toScreen(lat, lng);
@@ -210,7 +241,6 @@ export default function NaverMapView({
         );
       })}
 
-      {/* 내 위치 버튼 */}
       {onMyLocation && (
         <button
           onClick={onMyLocation}