주소 기반 검색 구현

frontend/package-lock.json

@@ -18,6 +18,7 @@
         "jwt-decode": "^4.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-kakao-maps-sdk": "^1.1.24",
         "react-router-dom": "^6.18.0",
         "web-vitals": "^2.1.4"
       },
@@ -12935,6 +12936,11 @@
         "node": ">=18"
       }
     },
+    "node_modules/kakao.maps.d.ts": {
+      "version": "0.1.39",
+      "resolved": "https://registry.npmjs.org/kakao.maps.d.ts/-/kakao.maps.d.ts-0.1.39.tgz",
+      "integrity": "sha512-KXENJ8hHYtjb5G+0vf8TXx/PwWW4j5ndDiQTSMvGtF7EFWu2P3N/+Zivcj9/UKn3j29Iz/sIUaA7WL8Ug3IDGQ=="
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -15848,6 +15854,19 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-kakao-maps-sdk": {
+      "version": "1.1.24",
+      "resolved": "https://registry.npmjs.org/react-kakao-maps-sdk/-/react-kakao-maps-sdk-1.1.24.tgz",
+      "integrity": "sha512-leLbFwBj6zbTdDg6A9U7EwYT2oq0+2F+NHZSVTyCmmvyc4yt2zpRvUmcAt8I6h2SDUdgHbpvKAV1sZoRIxD4JQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.15",
+        "kakao.maps.d.ts": "^0.1.39"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",

frontend/package.json

@@ -13,6 +13,7 @@
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-kakao-maps-sdk": "^1.1.24",
     "react-router-dom": "^6.18.0",
     "web-vitals": "^2.1.4"
   },

frontend/public/index.html

@@ -15,6 +15,8 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAOMAP_API_KEY%&libraries=services&autoload=false"
+></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

frontend/src/Search.js

 import React, {useState} from "react";
+import { Map, MapMarker } from "react-kakao-maps-sdk";
+
+const {kakao} = window;
+
+//카카오 지도 API를 이용한 검색(예정)
 
 function SearchMap(props){
     // 아주대학교를 기본 위치로 설정
@@ -6,24 +11,43 @@ function SearchMap(props){
         center: { lat: 37.28238488648025, lng: 127.04350967609274 },
         isPanto: true,
     });
-    const [searchAddress, SetSearchAddress] = useState(); //주소
+    const [searchAddress, SetSearchAddress] = useState(); //주소 입력
 
     const handleInput = (e) => {
-        SetSearchAddress(e.target.value)
-      }
+        SetSearchAddress(e.target.value);
+    }
+
     const SearchStart = () => {
-        console.log('Start Search!');
+        console.log('Start Search!');// action test
+        // 주소를 기반으로 한 검색 구현(제주특별자치도 제주시 첨단로 242 를 입력하면 kakao가 나온다)
+        const geocoder = new kakao.maps.services.Geocoder();
+        let callback = function(result, status) {
+            if (status === kakao.maps.services.Status.OK) {
+            const newSearch = result[0]
+            setState({
+                center: { lat: newSearch.y, lng: newSearch.x }
+            })
+            }
+        };
+        geocoder.addressSearch(`${searchAddress}`, callback);
     }
-    
 
     return (
         <div className="UserInput">
-            {/* 주소를 입력할 수 있는 '검색'창 만들기 */}
-            <input onChange={handleInput}/>
+            <input  onChange={handleInput}/>
             <button onClick={SearchStart}>검색!</button>
+            <Map // 지도를 표시할 Container
+                center={state.center}
+                isPanto={state.isPanto}
+                style={{
+                    // 지도의 크기
+                    width: "100%",
+                    height: "450px",
+                    }}
+                level={3}>
+            </Map>
         </div>
     )
-    
 }
 
 function Search(props) {
@@ -31,9 +55,6 @@ function Search(props) {
 		<div className="search">
 			<h1>검색페이지입니다.</h1>
             <SearchMap/>
-			<div className="map">
-				맵이 나타날 그림
-			</div>
 		</div>
     );
 }