From 69a551db05d4eeb6e37744a1b33b384fd57c074b Mon Sep 17 00:00:00 2001
From: subinsong01 <haely97@naver.com>
Date: Mon, 4 Nov 2024 16:45:54 +0900
Subject: [PATCH] =?UTF-8?q?feat(#7):=20=EC=8B=A4=EC=A2=85=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EC=A3=BC=EC=86=8C?=
 =?UTF-8?q?=EA=B0=92=20=EC=A7=80=EC=98=A4=EC=BD=94=EB=94=A9=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                           |  2 +-
 src/pages/MyPage/RegisterMissing.jsx | 53 ++++++++++++++++++++++------
 2 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index ecc536f..4d5d3ce 100644
--- 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
index c78f491..d836a4c 100644
--- 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을 지원하지 않습니다.");