{"ast":null,"code":"var _jsxFileName = \"D:\\\\LDT\\\\000 Project\\\\LDT\\\\Client\\\\src\\\\components\\\\NaverMap.js\",\n _s = $RefreshSig$();\nimport React, { useEffect, useRef, useState } from \"react\";\n\n// 마커 데이터 예시 [{lat: ..., lng: ..., title: ..., icon: ...}]\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nexport default function NaverMap({\n latitude = 37.5665,\n longitude = 126.9780,\n markers = [],\n // 여러 마커 배열\n style = {\n width: \"100%\",\n height: \"600px\"\n }\n}) {\n _s();\n const mapRef = useRef(null);\n const [loading, setLoading] = useState(true);\n useEffect(() => {\n var _markers$0$lat, _markers$, _markers$0$lng, _markers$2;\n if (!window.naver || !window.naver.maps || !mapRef.current) return;\n\n // 지도 생성\n const map = new window.naver.maps.Map(mapRef.current, {\n center: new window.naver.maps.LatLng((_markers$0$lat = (_markers$ = markers[0]) === null || _markers$ === void 0 ? void 0 : _markers$.lat) !== null && _markers$0$lat !== void 0 ? _markers$0$lat : latitude, (_markers$0$lng = (_markers$2 = markers[0]) === null || _markers$2 === void 0 ? void 0 : _markers$2.lng) !== null && _markers$0$lng !== void 0 ? _markers$0$lng : longitude),\n zoom: 13\n });\n setLoading(false);\n\n // 마커 & InfoWindow 관리\n const markerObjs = [];\n const infoWindows = [];\n markers.forEach((marker, idx) => {\n const markerObj = new window.naver.maps.Marker({\n position: new window.naver.maps.LatLng(marker.lat, marker.lng),\n map,\n icon: marker.icon // 마커 이미지 커스텀 가능\n });\n markerObjs.push(markerObj);\n if (marker.title || marker.desc) {\n const infoWindow = new window.naver.maps.InfoWindow({\n content: `\n \n ${marker.title || \"\"}
\n ${marker.desc || \"\"}\n
\n `\n });\n\n // 마커 클릭 시 InfoWindow 표시\n window.naver.maps.Event.addListener(markerObj, \"click\", () => {\n infoWindows.forEach(iw => iw.close()); // 기존 info 닫기\n infoWindow.open(map, markerObj);\n });\n infoWindows.push(infoWindow);\n }\n });\n\n // 지도 클릭 시 InfoWindow 열기\n window.naver.maps.Event.addListener(map, \"click\", e => {\n // 예시: 클릭한 위치에 InfoWindow 표시\n const tempWindow = new window.naver.maps.InfoWindow({\n content: `좌표: ${e.coord.lat().toFixed(6)}, ${e.coord.lng().toFixed(6)}
`\n });\n tempWindow.open(map, e.coord);\n setTimeout(() => tempWindow.close(), 2000); // 2초 후 자동 닫기\n });\n\n // Clean up\n return () => {\n markerObjs.forEach(marker => marker.setMap(null));\n infoWindows.forEach(iw => iw.close());\n };\n }, [markers]);\n return /*#__PURE__*/_jsxDEV(\"div\", {\n style: {\n position: \"relative\",\n ...style\n },\n children: [loading && /*#__PURE__*/_jsxDEV(\"div\", {\n children: /*#__PURE__*/_jsxDEV(\"h2\", {\n children: \"\\uC9C0\\uB3C4 \\uC900\\uBE44\\uC911...\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 79,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 78,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n ref: mapRef,\n style: {\n width: \"100%\",\n height: \"100%\"\n }\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 83,\n columnNumber: 7\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 76,\n columnNumber: 5\n }, this);\n}\n_s(NaverMap, \"TZFGDAfS7ZPPjP6zz2xL/p/oo5Q=\");\n_c = NaverMap;\nvar _c;\n$RefreshReg$(_c, \"NaverMap\");","map":{"version":3,"names":["React","useEffect","useRef","useState","jsxDEV","_jsxDEV","NaverMap","latitude","longitude","markers","style","width","height","_s","mapRef","loading","setLoading","_markers$0$lat","_markers$","_markers$0$lng","_markers$2","window","naver","maps","current","map","Map","center","LatLng","lat","lng","zoom","markerObjs","infoWindows","forEach","marker","idx","markerObj","Marker","position","icon","push","title","desc","infoWindow","InfoWindow","content","Event","addListener","iw","close","open","e","tempWindow","coord","toFixed","setTimeout","setMap","children","fileName","_jsxFileName","lineNumber","columnNumber","ref","_c","$RefreshReg$"],"sources":["D:/LDT/000 Project/LDT/Client/src/components/NaverMap.js"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\r\n\r\n// 마커 데이터 예시 [{lat: ..., lng: ..., title: ..., icon: ...}]\r\nexport default function NaverMap({\r\n latitude = 37.5665, longitude = 126.9780,\r\n markers = [], // 여러 마커 배열\r\n style = { width: \"100%\", height: \"600px\" }\r\n}) {\r\n const mapRef = useRef(null);\r\n const [loading, setLoading] = useState(true);\r\n\r\n useEffect(() => {\r\n\r\n if (!window.naver || !window.naver.maps || !mapRef.current) return;\r\n\r\n // 지도 생성\r\n const map = new window.naver.maps.Map(mapRef.current, {\r\n center: new window.naver.maps.LatLng(\r\n markers[0]?.lat ?? latitude,\r\n markers[0]?.lng ?? longitude\r\n ),\r\n zoom: 13,\r\n });\r\n\r\n setLoading(false);\r\n\r\n // 마커 & InfoWindow 관리\r\n const markerObjs = [];\r\n const infoWindows = [];\r\n\r\n markers.forEach((marker, idx) => {\r\n const markerObj = new window.naver.maps.Marker({\r\n position: new window.naver.maps.LatLng(marker.lat, marker.lng),\r\n map,\r\n icon: marker.icon // 마커 이미지 커스텀 가능\r\n });\r\n markerObjs.push(markerObj);\r\n\r\n if (marker.title || marker.desc) {\r\n const infoWindow = new window.naver.maps.InfoWindow({\r\n content: `\r\n \r\n ${marker.title || \"\"}
\r\n ${marker.desc || \"\"}\r\n
\r\n `\r\n });\r\n\r\n // 마커 클릭 시 InfoWindow 표시\r\n window.naver.maps.Event.addListener(markerObj, \"click\", () => {\r\n infoWindows.forEach(iw => iw.close()); // 기존 info 닫기\r\n infoWindow.open(map, markerObj);\r\n });\r\n infoWindows.push(infoWindow);\r\n }\r\n });\r\n\r\n // 지도 클릭 시 InfoWindow 열기\r\n window.naver.maps.Event.addListener(map, \"click\", (e) => {\r\n // 예시: 클릭한 위치에 InfoWindow 표시\r\n const tempWindow = new window.naver.maps.InfoWindow({\r\n content: `좌표: ${e.coord.lat().toFixed(6)}, ${e.coord.lng().toFixed(6)}
`\r\n });\r\n tempWindow.open(map, e.coord);\r\n setTimeout(() => tempWindow.close(), 2000); // 2초 후 자동 닫기\r\n });\r\n\r\n // Clean up\r\n return () => {\r\n markerObjs.forEach(marker => marker.setMap(null));\r\n infoWindows.forEach(iw => iw.close());\r\n };\r\n }, [markers]);\r\n\r\n return (\r\n \r\n {loading && (\r\n
\r\n
지도 준비중...
\r\n \r\n )}\r\n {/* 지도 영역 */}\r\n
\r\n {/* 로딩/팝업 */}\r\n\r\n