From 37626209000edc0a15b090c8d9b856554915e5b4 Mon Sep 17 00:00:00 2001
From: LEE <dlwodyd4529@gmail.com>
Date: Wed, 22 Nov 2023 22:26:23 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A3=BC=EC=86=8C=20=EA=B8=B0=EB=B0=98=20?=
=?UTF-8?q?=EA=B2=80=EC=83=89=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
frontend/package-lock.json | 19 +++++++++++++++++
frontend/package.json | 1 +
frontend/public/index.html | 2 ++
frontend/src/Search.js | 43 ++++++++++++++++++++++++++++----------
4 files changed, 54 insertions(+), 11 deletions(-)
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7d61652e..64974864 100644
--- a/frontend/package-lock.json
+++ b/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",
diff --git a/frontend/package.json b/frontend/package.json
index 4d6a8031..c45d5805 100644
--- a/frontend/package.json
+++ b/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"
},
diff --git a/frontend/public/index.html b/frontend/public/index.html
index aa069f27..2c0e77db 100644
--- a/frontend/public/index.html
+++ b/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.
diff --git a/frontend/src/Search.js b/frontend/src/Search.js
index 634b5b55..f4c0892c 100644
--- a/frontend/src/Search.js
+++ b/frontend/src/Search.js
@@ -1,4 +1,9 @@
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>
);
}
--
GitLab