{"ast":null,"code":"var _jsxFileName = \"D:\\\\LDT\\\\000 Project\\\\LDT\\\\Client\\\\src\\\\components\\\\KakaoMap.js\",\n _s = $RefreshSig$();\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nexport default function KakaoMapPlus({\n latitude = 37.5665,\n longitude = 126.9780,\n initialMarkers = [],\n style = {\n width: \"100%\",\n height: \"600px\"\n }\n}) {\n _s();\n const mapRef = useRef(null);\n const [markers, setMarkers] = useState(initialMarkers);\n const [keyword, setKeyword] = useState(\"\");\n const [clustererRef, setClustererRef] = useState(null);\n\n // 지도 및 마커 그리기\n useEffect(() => {\n var _markers$0$lat, _markers$, _markers$0$lng, _markers$2;\n if (!window.kakao || !window.kakao.maps || !mapRef.current) return;\n const kakao = window.kakao;\n const map = new kakao.maps.Map(mapRef.current, {\n center: new kakao.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 level: 6\n });\n\n // 마커 생성\n const markerObjs = markers.map(m => {\n const image = m.icon ? new kakao.maps.MarkerImage(m.icon, new kakao.maps.Size(36, 36), {\n offset: new kakao.maps.Point(18, 36)\n }) : null;\n return new kakao.maps.Marker({\n position: new kakao.maps.LatLng(m.lat, m.lng),\n clickable: true,\n image\n });\n });\n\n // 클러스터러\n const clusterer = new kakao.maps.MarkerClusterer({\n map: map,\n markers: markerObjs,\n gridSize: 60,\n averageCenter: true,\n minLevel: 3,\n // 클러스터 스타일 커스텀 (예시)\n styles: [{\n width: \"40px\",\n height: \"40px\",\n background: \"#3887be\",\n color: \"#fff\",\n borderRadius: \"50%\",\n fontSize: \"16px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontWeight: \"bold\"\n }]\n });\n setClustererRef(clusterer);\n\n // 클러스터 클릭 시 확대\n kakao.maps.event.addListener(clusterer, \"clusterclick\", function (cluster) {\n const map = clusterer.getMap();\n map.setLevel(map.getLevel() - 1, {\n anchor: cluster.getCenter()\n });\n });\n\n // InfoWindow (마커 클릭)\n const infoWindows = markers.map((m, i) => new kakao.maps.InfoWindow({\n content: `\n ${m.title || \"\"}
${m.desc || \"\"}\n
`\n }));\n markerObjs.forEach((markerObj, idx) => {\n if (infoWindows[idx]) {\n // 클릭 시 팝업\n kakao.maps.event.addListener(markerObj, \"click\", () => {\n infoWindows.forEach(iw => iw.close());\n infoWindows[idx].open(map, markerObj);\n });\n }\n });\n\n // 지도 클릭시 좌표 팝업\n kakao.maps.event.addListener(map, \"click\", function (e) {\n const latlng = e.latLng;\n const tempWindow = new kakao.maps.InfoWindow({\n content: `\n 좌표: ${latlng.getLat().toFixed(6)}, ${latlng.getLng().toFixed(6)}\n
`,\n position: latlng\n });\n tempWindow.open(map);\n setTimeout(() => tempWindow.close(), 1000);\n });\n\n // Clean up\n return () => {\n clusterer && clusterer.clear();\n markerObjs.forEach(m => m.setMap(null));\n infoWindows.forEach(iw => iw.close());\n };\n }, [markers, latitude, longitude]);\n\n // 키워드 검색\n const searchPlace = () => {\n if (!window.kakao || !window.kakao.maps) return;\n if (!keyword.trim()) return alert(\"검색어를 입력하세요.\");\n const ps = new window.kakao.maps.services.Places();\n ps.keywordSearch(keyword, (data, status) => {\n if (status === window.kakao.maps.services.Status.OK) {\n const resultMarkers = data.map(d => ({\n lat: parseFloat(d.y),\n lng: parseFloat(d.x),\n title: d.place_name,\n desc: d.address_name\n }));\n setMarkers(resultMarkers);\n } else {\n alert(\"검색 결과가 없습니다.\");\n }\n });\n };\n return /*#__PURE__*/_jsxDEV(\"div\", {\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n style: {\n marginBottom: 10\n },\n children: [/*#__PURE__*/_jsxDEV(\"input\", {\n type: \"text\",\n value: keyword,\n placeholder: \"\\uC7A5\\uC18C \\uD0A4\\uC6CC\\uB4DC\",\n onChange: e => setKeyword(e.target.value),\n style: {\n width: 200\n }\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 130,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"button\", {\n onClick: searchPlace,\n style: {\n marginLeft: 5\n },\n children: \"\\uAC80\\uC0C9\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 137,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 129,\n columnNumber: 7\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n style: {\n position: \"relative\",\n ...style\n },\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n ref: mapRef,\n style: {\n width: \"100%\",\n height: \"100%\"\n }\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 141,\n columnNumber: 9\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 140,\n columnNumber: 7\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 127,\n columnNumber: 5\n }, this);\n}\n_s(KakaoMapPlus, \"N7fZD6qlL9t2xaj9JmtuE6UT3D4=\");\n_c = KakaoMapPlus;\nvar _c;\n$RefreshReg$(_c, \"KakaoMapPlus\");","map":{"version":3,"names":["React","useEffect","useRef","useState","jsxDEV","_jsxDEV","KakaoMapPlus","latitude","longitude","initialMarkers","style","width","height","_s","mapRef","markers","setMarkers","keyword","setKeyword","clustererRef","setClustererRef","_markers$0$lat","_markers$","_markers$0$lng","_markers$2","window","kakao","maps","current","map","Map","center","LatLng","lat","lng","level","markerObjs","m","image","icon","MarkerImage","Size","offset","Point","Marker","position","clickable","clusterer","MarkerClusterer","gridSize","averageCenter","minLevel","styles","background","color","borderRadius","fontSize","display","alignItems","justifyContent","fontWeight","event","addListener","cluster","getMap","setLevel","getLevel","anchor","getCenter","infoWindows","i","InfoWindow","content","title","desc","forEach","markerObj","idx","iw","close","open","e","latlng","latLng","tempWindow","getLat","toFixed","getLng","setTimeout","clear","setMap","searchPlace","trim","alert","ps","services","Places","keywordSearch","data","status","Status","OK","resultMarkers","d","parseFloat","y","x","place_name","address_name","children","marginBottom","type","value","placeholder","onChange","target","fileName","_jsxFileName","lineNumber","columnNumber","onClick","marginLeft","ref","_c","$RefreshReg$"],"sources":["D:/LDT/000 Project/LDT/Client/src/components/KakaoMap.js"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\r\n\r\nexport default function KakaoMapPlus({\r\n latitude = 37.5665,\r\n longitude = 126.9780,\r\n initialMarkers = [],\r\n style = { width: \"100%\", height: \"600px\" }\r\n}) {\r\n const mapRef = useRef(null);\r\n const [markers, setMarkers] = useState(initialMarkers);\r\n const [keyword, setKeyword] = useState(\"\");\r\n const [clustererRef, setClustererRef] = useState(null);\r\n\r\n // 지도 및 마커 그리기\r\n useEffect(() => {\r\n if (!window.kakao || !window.kakao.maps || !mapRef.current) return;\r\n\r\n const kakao = window.kakao;\r\n const map = new kakao.maps.Map(mapRef.current, {\r\n center: new kakao.maps.LatLng(\r\n markers[0]?.lat ?? latitude,\r\n markers[0]?.lng ?? longitude\r\n ),\r\n level: 6\r\n });\r\n\r\n // 마커 생성\r\n const markerObjs = markers.map((m) => {\r\n const image = m.icon\r\n ? new kakao.maps.MarkerImage(m.icon, new kakao.maps.Size(36, 36), {\r\n offset: new kakao.maps.Point(18, 36)\r\n })\r\n : null;\r\n\r\n return new kakao.maps.Marker({\r\n position: new kakao.maps.LatLng(m.lat, m.lng),\r\n clickable: true,\r\n image,\r\n });\r\n });\r\n\r\n // 클러스터러\r\n const clusterer = new kakao.maps.MarkerClusterer({\r\n map: map,\r\n markers: markerObjs,\r\n gridSize: 60,\r\n averageCenter: true,\r\n minLevel: 3,\r\n // 클러스터 스타일 커스텀 (예시)\r\n styles: [\r\n {\r\n width: \"40px\", height: \"40px\", background: \"#3887be\", color: \"#fff\",\r\n borderRadius: \"50%\", fontSize: \"16px\", display: \"flex\",\r\n alignItems: \"center\", justifyContent: \"center\", fontWeight: \"bold\"\r\n }\r\n ],\r\n });\r\n setClustererRef(clusterer);\r\n\r\n // 클러스터 클릭 시 확대\r\n kakao.maps.event.addListener(clusterer, \"clusterclick\", function (cluster) {\r\n const map = clusterer.getMap();\r\n map.setLevel(map.getLevel() - 1, { anchor: cluster.getCenter() });\r\n });\r\n\r\n // InfoWindow (마커 클릭)\r\n const infoWindows = markers.map((m, i) =>\r\n new kakao.maps.InfoWindow({\r\n content: `\r\n ${m.title || \"\"}
${m.desc || \"\"}\r\n
`\r\n })\r\n );\r\n\r\n markerObjs.forEach((markerObj, idx) => {\r\n if (infoWindows[idx]) {\r\n // 클릭 시 팝업\r\n kakao.maps.event.addListener(markerObj, \"click\", () => {\r\n infoWindows.forEach(iw => iw.close());\r\n infoWindows[idx].open(map, markerObj);\r\n });\r\n }\r\n });\r\n\r\n // 지도 클릭시 좌표 팝업\r\n kakao.maps.event.addListener(map, \"click\", function (e) {\r\n const latlng = e.latLng;\r\n const tempWindow = new kakao.maps.InfoWindow({\r\n content: `\r\n 좌표: ${latlng.getLat().toFixed(6)}, ${latlng.getLng().toFixed(6)}\r\n
`,\r\n position: latlng\r\n });\r\n tempWindow.open(map);\r\n setTimeout(() => tempWindow.close(), 1000);\r\n });\r\n\r\n // Clean up\r\n return () => {\r\n clusterer && clusterer.clear();\r\n markerObjs.forEach(m => m.setMap(null));\r\n infoWindows.forEach(iw => iw.close());\r\n };\r\n }, [markers, latitude, longitude]);\r\n\r\n // 키워드 검색\r\n const searchPlace = () => {\r\n if (!window.kakao || !window.kakao.maps) return;\r\n if (!keyword.trim()) return alert(\"검색어를 입력하세요.\");\r\n const ps = new window.kakao.maps.services.Places();\r\n ps.keywordSearch(keyword, (data, status) => {\r\n if (status === window.kakao.maps.services.Status.OK) {\r\n const resultMarkers = data.map(d => ({\r\n lat: parseFloat(d.y),\r\n lng: parseFloat(d.x),\r\n title: d.place_name,\r\n desc: d.address_name,\r\n }));\r\n setMarkers(resultMarkers);\r\n } else {\r\n alert(\"검색 결과가 없습니다.\");\r\n }\r\n });\r\n };\r\n\r\n return (\r\n \r\n {/* 키워드 검색 */}\r\n
\r\n setKeyword(e.target.value)}\r\n style={{ width: 200 }}\r\n />\r\n \r\n
\r\n {/* 지도 표시 */}\r\n
\r\n