feat(#7): 실종페이지에서 주소값 지오코딩 구현 완료

URECA-PODONG · Nov 4, 2024 · 69a551d · 69a551d
1 parent df0dd71
commit 69a551d
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
     <script type="module" src="/src/main.jsx"></script>
     <script
       type="text/javascript"
-      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=356aa1c57243e551c6ea0db569b098cf"
+      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=356aa1c57243e551c6ea0db569b098cf&libraries=services"
     ></script>
 
   </body>

diff --git a/src/pages/MyPage/RegisterMissing.jsx b/src/pages/MyPage/RegisterMissing.jsx
@@ -165,7 +165,7 @@ const RegisterMissing = () => {
   const [marker, setMarker] = useState(null); 
   const [latitude, setLatitude] = useState(37.5665); 
   const [longitude, setLongitude] = useState(126.978); 
-  const [previewImage, setPreviewImage] = useState(null); // 미리보기 이미지 상태 추가
+  const [previewImage, setPreviewImage] = useState(null);
 
   const today = new Date().toISOString().split("T")[0]; 
 
@@ -174,11 +174,11 @@ const RegisterMissing = () => {
     if (file) {
       const reader = new FileReader();
       reader.onloadend = () => {
-        setPreviewImage(reader.result); // 미리보기 이미지 설정
+        setPreviewImage(reader.result); 
       };
-      reader.readAsDataURL(file); // 파일을 Data URL로 읽음
+      reader.readAsDataURL(file); 
     } else {
-      setPreviewImage(null); // 이미지가 없으면 미리보기 초기화
+      setPreviewImage(null);
     }
   };
 
@@ -225,36 +225,67 @@ const RegisterMissing = () => {
     const container = document.getElementById('map'); 
     const options = {
       center: new window.kakao.maps.LatLng(latitude, longitude),
-      level: 1,
+      level: 3,
     };
 
     const newMap = new window.kakao.maps.Map(container, options);
     setMap(newMap);
-
+  
     const newMarker = new window.kakao.maps.Marker({
       position: new window.kakao.maps.LatLng(latitude, longitude),
     });
     newMarker.setMap(newMap);
     setMarker(newMarker);
-
+
+    const geocoder = new window.kakao.maps.services.Geocoder();
+
+    const searchAddrFromCoords = (coords, callback) => {
+      geocoder.coord2Address(coords.getLng(), coords.getLat(), callback);
+    };
+
     window.kakao.maps.event.addListener(newMap, 'click', (mouseEvent) => {
       const clickedPosition = mouseEvent.latLng;
       newMarker.setPosition(clickedPosition);
       setLatitude(clickedPosition.getLat());
       setLongitude(clickedPosition.getLng());
-      setLocationInput(`위도: ${clickedPosition.getLat().toFixed(6)}, 경도: ${clickedPosition.getLng().toFixed(6)}`);
+
+      searchAddrFromCoords(clickedPosition, function(result, status) {
+        if (status === window.kakao.maps.services.Status.OK) {
+          const addr = result[0].road_address ? result[0].road_address.address_name : result[0].address.address_name;
+          setLocationInput(`주소: ${addr}`);
+        }
+      });
     });
-  }, [latitude, longitude]); 
-
+
+    // 초기 위치의 주소 가져오기
+    searchAddrFromCoords(new window.kakao.maps.LatLng(latitude, longitude), function(result, status) {
+      if (status === window.kakao.maps.services.Status.OK) {
+        const addr = result[0].road_address ? result[0].road_address.address_name : result[0].address.address_name;
+        setLocationInput(`${addr}`);
+      }
+    });
+
+  }, [latitude, longitude]);
+
   const getCurrentLocation = () => {
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition((position) => {
         const { latitude, longitude } = position.coords;
         setLatitude(latitude);
         setLongitude(longitude);
-        setLocationInput(`위도: ${latitude}, 경도: ${longitude}`);
+
+        const geocoder = new window.kakao.maps.services.Geocoder();
+        const coord = new window.kakao.maps.LatLng(latitude, longitude);
+
+        geocoder.coord2Address(coord.getLng(), coord.getLat(), (result, status) => {
+          if (status === window.kakao.maps.services.Status.OK) {
+            const addr = result[0].road_address ? result[0].road_address.address_name : result[0].address.address_name;
+            setLocationInput(`주소: ${addr}`);
+          }
+        });
       }, (error) => {
         console.error("위치 정보에 접근할 수 없습니다.", error);
+        alert("위치 정보를 가져올 수 없습니다. 브라우저 설정을 확인해 주세요.");
       });
     } else {
       alert("이 브라우저는 Geolocation을 지원하지 않습니다.");