위치기반 지도 띄우기 완료

노강호
Commit 9219c4d5bab433a1d4098b13862d7be3ad23a39d 9219c4d5 1 parent 376b2d47
Showing 8 changed files with 175 additions and 123 deletions
package-lock.json
package.json
public/index.html
src/components/Map.js
src/components/MapContainer.js
src/components/views/Landing/LandingPage.js
src/components/views/Landing/Sections/MapContainer.js
src/routes/Home.js
--- a/package-lock.json
View file @9219c4d
+++ b/package-lock.json
View file @9219c4d
@@ -1203,6 +1203,29 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "@eslint/eslintrc": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.1.tgz",
@@ -3273,6 +3296,22 @@
         "@babel/helper-define-polyfill-provider": "^0.2.1"
       }
     },
+    "babel-plugin-styled-components": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz",
+      "integrity": "sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-module-imports": "^7.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -3933,6 +3972,11 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
       "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg=="
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -4487,6 +4531,11 @@
         "postcss": "^7.0.5"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -4570,6 +4619,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -13499,6 +13558,11 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -14160,6 +14224,23 @@
         "schema-utils": "^2.7.0"
       }
     },
+    "styled-components": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.0.tgz",
+      "integrity": "sha512-bPJKwZCHjJPf/hwTJl6TbkSZg/3evha+XPEizrZUGb535jLImwDUdjTNxXqjjaASt2M4qO4AVfoHJNe3XB/tpQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
--- a/package.json
View file @9219c4d
+++ b/package.json
View file @9219c4d
@@ -12,6 +12,7 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "styled-components": "^5.3.0",
     "web-vitals": "^1.1.2"
   },
   "scripts": {
@@ -37,4 +38,3 @@
     ]
   }
 }
-
--- a/public/index.html
View file @9219c4d
+++ b/public/index.html
View file @9219c4d
 <!DOCTYPE html>
 <html lang="ko">
   <head>
-    <script
-      type="text/javascript"
-      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=059ebad3d5ccd28178357c542b8c80d1&libraries=services"
-    ></script>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -29,6 +25,8 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Momokji</title>
+    <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=059ebad3d5ccd28178357c542b8c80d1
+"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/src/components/Map.js
View file @9219c4d
+++ b/src/components/Map.js
View file @9219c4d
 /*global kakao*/
 import React, { useEffect } from "react";
-const Map = () => {
+const Location = () => {
   useEffect(() => {
-    var mapContainer = document.getElementById("map");
+    var container = document.getElementById("map");
-    var mapOption = {
+    var options = {
       center: new kakao.maps.LatLng(37.365264512305174, 127.10676860117488),
       level: 3,
     };
-
+    var map = new kakao.maps.Map(container, options);
-    var map = new kakao.maps.Map(mapContainer, mapOption);
-    var markerPosition = new kakao.maps.LatLng(
-      37.365264512305174,
-      127.10676860117488
-    );
-    var marker = new kakao.maps.Marker({
-      position: markerPosition,
-    });
-    marker.setMap(map);
   }, []);
-  return (
+  return <div></div>;
-    <div
-      id="map"
-      style="width: 100%; height: 100%; position: relative; overflow: hidden"
-    ></div>
-  );
 };
-export default Map;
+export default Location;
--- a/src/components/MapContainer.js 0 → 100644
View file @9219c4d
+++ b/src/components/MapContainer.js 0 → 100644
View file @9219c4d
+/*global kakao*/
+import React, { Component, useCallback } from "react";
+import styled from "styled-components";
+
+const { kakao } = window;
+
+var nowlat, nowlon;
+
+class MapContainer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isLoading: true,
+      lat: 37.506502,
+      lon: 127.053617,
+    };
+
+    this.getLocation = this.getLocation.bind(this);
+    this.getMap = this.getMap.bind(this);
+    this.componentDidMount = this.componentDidMount.bind(this);
+  }
+
+  sleep = (ms) => {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  };
+
+  getLocation = (callback) => {
+    if (navigator.geolocation) {
+      // GeoLocation을 이용해서 접속 위치를 얻어옵니다
+      navigator.geolocation.getCurrentPosition(function (position) {
+        nowlat = position.coords.latitude; // 위도
+        nowlon = position.coords.longitude; // 경도
+        console.log(nowlat, nowlon);
+        var locPosition = new kakao.maps.LatLng(nowlat, nowlon); // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
+        //message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
+
+        // 마커와 인포윈도우를 표시합니다
+        //displayMarker(locPosition, message);
+        callback();
+        //return locPosition;
+      });
+    } else {
+      // HTML5의 GeoLocation을 사용할 수 없을때 마
+      nowlat = 37.506502; // 위도
+      nowlon = 127.053617; // 경도커 표시 위치와 인포윈도우 내용을 설정합니다
+
+      var locPosition = new kakao.maps.LatLng(37.506502, 127.053617);
+      //message = "geolocation을 사용할수 없어요..";
+
+      //displayMarker(locPosition, message);
+      callback();
+    }
+  };
+
+  getMap = () => {
+    this.getLocation(() => {
+      this.setState({ lat: nowlat, lon: nowlon });
+      let container = document.getElementById("Mymap");
+      let options = {
+        center: new kakao.maps.LatLng(this.state.lat, this.state.lon),
+        level: 7,
+      };
+
+      const map = new window.kakao.maps.Map(container, options);
+    });
+  };
+
+  componentDidMount() {
+    this.getMap();
+  }
+
+  render() {
+    return <MapContents id="Mymap"></MapContents>; // 이부분이 지도를 띄우게 될 부분.
+  }
+}
+
+const MapContents = styled.div`
+  width: 500px;
+  height: 400px;
+`;
+
+export default MapContainer;
--- a/src/components/views/Landing/LandingPage.js deleted 100644 → 0
View file @376b2d4
+++ b/src/components/views/Landing/LandingPage.js deleted 100644 → 0
View file @376b2d4
-import React, { useState } from "react";
-import MapContainer from "./Sections/MapContainer";
-
-function LandingPage() {
-  const [InputText, setInputText] = useState("");
-  const [Place, setPlace] = useState("");
-
-  const onChange = (e) => {
-    setInputText(e.target.value);
-  };
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    setPlace(InputText);
-    setInputText("");
-  };
-
-  return (
-    <>
-      <form className="inputForm" onSubmit={handleSubmit}>
-        <input
-          placeholder="검색어를 입력하세요"
-          onChange={onChange}
-          value={InputText}
-        />
-        <button type="submit">검색</button>
-      </form>
-      <MapContainer searchPlace={Place} />
-    </>
-  );
-}
-
-export default LandingPage;
--- a/src/components/views/Landing/Sections/MapContainer.js deleted 100644 → 0
View file @376b2d4
+++ b/src/components/views/Landing/Sections/MapContainer.js deleted 100644 → 0
View file @376b2d4
-import React, { useEffect } from "react";
-
-const { kakao } = window;
-console.log(kakao);
-console.log(window);
-
-const MapContainer = ({ searchPlace }) => {
-  useEffect(() => {
-    var infowindow = new kakao.maps.InfoWindow({ zIndex: 1 });
-    const container = document.getElementById("myMap");
-    const options = {
-      center: new kakao.maps.LatLng(33.450701, 126.570667),
-      level: 3,
-    };
-    const map = new kakao.maps.Map(container, options);
-
-    const ps = new kakao.maps.services.Places();
-
-    ps.keywordSearch(searchPlace, placesSearchCB);
-
-    function placesSearchCB(data, status, pagination) {
-      if (status === kakao.maps.services.Status.OK) {
-        let bounds = new kakao.maps.LatLngBounds();
-
-        for (let i = 0; i < data.length; i++) {
-          displayMarker(data[i]);
-          bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
-        }
-
-        map.setBounds(bounds);
-      }
-    }
-
-    function displayMarker(place) {
-      let marker = new kakao.maps.Marker({
-        map: map,
-        position: new kakao.maps.LatLng(place.y, place.x),
-      });
-
-      // 마커에 클릭이벤트를 등록합니다
-      kakao.maps.event.addListener(marker, "click", function () {
-        // 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
-        infowindow.setContent(
-          '<div style="padding:5px;font-size:12px;">' +
-            place.place_name +
-            "</div>"
-        );
-        infowindow.open(map, marker);
-      });
-    }
-  }, [searchPlace]);
-
-  return (
-    <div
-      id="myMap"
-      style={{
-        width: "500px",
-        height: "500px",
-      }}
-    ></div>
-  );
-};
-
-export default MapContainer;
--- a/src/routes/Home.js
View file @9219c4d
+++ b/src/routes/Home.js
View file @9219c4d
 import React, { useEffect } from "react";
-import MapContainer from "../components/views/Landing/Sections/MapContainer";
+import MapContainer from "../components/MapContainer";
+import Map from "../components/Map";
 const Home = () => {
   return (