[#7] feat : restaurant map

payw-org · Feb 21, 2021 · 8f847ce · 8f847ce
1 parent 82b28bd
commit 8f847ce
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 0 deletions.
diff --git a/public/index.html b/public/index.html
@@ -8,4 +8,8 @@
   <body>
     <div id="app"></div>
   </body>
+  <script
+    type="text/javascript"
+    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c63e68df0973a2374ff305168c31910e"
+  ></script>
 </html>
diff --git a/src/components/Restaurant/RestaurantMap/index.tsx b/src/components/Restaurant/RestaurantMap/index.tsx
@@ -0,0 +1,43 @@
+/*global kakao */
+import React, { useEffect } from 'react'
+
+declare global {
+  interface Window {
+    kakao: any
+  }
+}
+
+export const RestaurantMap: React.FC<{}> = () => {
+  useEffect(() => {
+    RestaurantKakaoMap()
+  }, [])
+
+  const RestaurantKakaoMap = () => {
+    let container = document.getElementById('map')
+    let options = {
+      center: new window.kakao.maps.LatLng(
+        37.624915253753194,
+        127.15122688059974
+      ),
+      level: 5,
+    }
+    //map
+    const map = new window.kakao.maps.Map(container, options)
+
+    //마커가 표시 될 위치
+    let markerPosition = new window.kakao.maps.LatLng(
+      37.62197524055062,
+      127.16017523675508
+    )
+
+    // 마커를 생성
+    let marker = new window.kakao.maps.Marker({
+      position: markerPosition,
+    })
+
+    // 마커를 지도 위에 표시
+    marker.setMap(map)
+  }
+
+  return <div id="map" style={{ width: '100%', height: '100%' }}></div>
+}
diff --git a/src/components/Restaurant/RestaurantMap/style.scss b/src/components/Restaurant/RestaurantMap/style.scss