{"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\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nexport default function NaverMap({\n latitude = 37.5665,\n longitude = 126.9780,\n markers = [],\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 _window$naver, _window$naver$maps, _markers$0$lat, _markers$, _markers$0$lng, _markers$2;\n if (!((_window$naver = window.naver) !== null && _window$naver !== void 0 && (_window$naver$maps = _window$naver.maps) !== null && _window$naver$maps !== void 0 && _window$naver$maps.MarkerClustering)) {\n // 모듈이 로드되지 않은 상태\n console.error(\"MarkerClustering 모듈이 로드되지 않았습니다.\");\n return;\n }\n if (!window.naver || !window.naver.maps || !window.naver.maps.MarkerClustering || !mapRef.current) return;\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 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 icon: marker.icon,\n title: marker.title || \"\"\n });\n markerObjs.push(markerObj);\n if (marker.title || marker.desc) {\n const infoWindow = new window.naver.maps.InfoWindow({\n content: `\n ${marker.title || \"\"}
\n ${marker.desc || \"\"}\n
`\n });\n infoWindows.push(infoWindow);\n window.naver.maps.Event.addListener(markerObj, \"click\", () => {\n infoWindows.forEach(iw => iw.close());\n infoWindow.open(map, markerObj);\n });\n }\n });\n\n // ⭐️ 클러스터러 생성\n const clusterer = new window.naver.maps.MarkerClustering({\n minClusterSize: 2,\n maxZoom: 17,\n map: map,\n markers: markerObjs,\n disableClickZoom: false,\n gridSize: 80,\n icons: [{\n html: '{n}
',\n size: window.naver.maps.Size ? new window.naver.maps.Size(36, 36) : undefined,\n anchor: window.naver.maps.Point ? new window.naver.maps.Point(18, 18) : undefined\n }]\n });\n window.naver.maps.Event.addListener(map, \"click\", e => {\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);\n });\n\n // cleanup\n return () => {\n markerObjs.forEach(marker => marker.setMap(null));\n infoWindows.forEach(iw => iw.close());\n if (clusterer) clusterer.setMap(null);\n };\n }, [markers, latitude, longitude]);\n return /*#__PURE__*/_jsxDEV(\"div\", {\n style: {\n position: \"relative\",\n ...style\n },\n children: [loading && /*#__PURE__*/_jsxDEV(\"div\", {\n children: /*#__PURE__*/_jsxDEV(\"h3\", {\n children: \"Map loading...\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 99,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 98,\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: 102,\n columnNumber: 7\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 96,\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","_window$naver","_window$naver$maps","_markers$0$lat","_markers$","_markers$0$lng","_markers$2","window","naver","maps","MarkerClustering","console","error","current","map","Map","center","LatLng","lat","lng","zoom","markerObjs","infoWindows","forEach","marker","idx","markerObj","Marker","position","icon","title","push","desc","infoWindow","InfoWindow","content","Event","addListener","iw","close","open","clusterer","minClusterSize","maxZoom","disableClickZoom","gridSize","icons","html","size","Size","undefined","anchor","Point","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\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?.maps?.MarkerClustering) {\r\n // 모듈이 로드되지 않은 상태\r\n console.error(\"MarkerClustering 모듈이 로드되지 않았습니다.\");\r\n return;\r\n }\r\n if (\r\n !window.naver ||\r\n !window.naver.maps ||\r\n !window.naver.maps.MarkerClustering ||\r\n !mapRef.current\r\n ) return;\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 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 icon: marker.icon,\r\n title: marker.title || \"\",\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 ${marker.title || \"\"}
\r\n ${marker.desc || \"\"}\r\n
`\r\n });\r\n infoWindows.push(infoWindow);\r\n\r\n window.naver.maps.Event.addListener(markerObj, \"click\", () => {\r\n infoWindows.forEach(iw => iw.close());\r\n infoWindow.open(map, markerObj);\r\n });\r\n }\r\n });\r\n\r\n // ⭐️ 클러스터러 생성\r\n const clusterer = new window.naver.maps.MarkerClustering({\r\n minClusterSize: 2,\r\n maxZoom: 17,\r\n map: map,\r\n markers: markerObjs,\r\n disableClickZoom: false,\r\n gridSize: 80,\r\n icons: [\r\n {\r\n html: '{n}
',\r\n size: window.naver.maps.Size ? new window.naver.maps.Size(36, 36) : undefined,\r\n anchor: window.naver.maps.Point ? new window.naver.maps.Point(18, 18) : undefined,\r\n }\r\n ]\r\n });\r\n\r\n window.naver.maps.Event.addListener(map, \"click\", (e) => {\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);\r\n });\r\n\r\n // cleanup\r\n return () => {\r\n markerObjs.forEach(marker => marker.setMap(null));\r\n infoWindows.forEach(iw => iw.close());\r\n if (clusterer) clusterer.setMap(null);\r\n };\r\n }, [markers, latitude, longitude]);\r\n\r\n return (\r\n \r\n {loading && (\r\n
\r\n
Map loading...
\r\n \r\n )}\r\n
\r\n