FEAT : 지도 적용

Team-hangout · Nov 24, 2023 · 7b4d697 · 7b4d697
1 parent 5293a68
commit 7b4d697
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -10,6 +10,9 @@
     <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId="></script>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
-
+    <script
+      type="text/javascript"
+      src="http://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=x0sq9y5sub"
+    ></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@tanstack/react-query": "^4.35.7",
     "@tanstack/react-query-devtools": "^4.35.3",
     "@tinymce/tinymce-react": "^4.3.0",
+    "@types/navermaps": "^3.7.2",
     "@types/styled-components": "^5.1.26",
     "autoprefixer": "^10.4.14",
     "aws-sdk": "^2.1390.0",

diff --git a/src/pages/post/CreatePostPage.tsx b/src/pages/post/CreatePostPage.tsx
@@ -10,8 +10,7 @@ import { useForm } from 'react-hook-form';
 import { PostType } from '@/types/post';
 import { useNavigate } from 'react-router-dom';
 import cookie from 'react-cookies';
-import styled from 'styled-components';
-import backgroundImg from '@/assets/image/Background.jpg'
+import Map from '@/pages/post/naverMap';
 
 interface ICreatePostFormData {
   // 여행 지역, 기간,인원
@@ -200,9 +199,10 @@ const CreatePostPage = () => {
             type="submit"
             children={'작성완료'}
           />
-        </CreateFlex>
-      </PostFlex>
-    </PostLayout>
+        </div>
+      </div>
+      <Map />
+    </div>
   );
 };
 

diff --git a/src/pages/post/naverMap.tsx b/src/pages/post/naverMap.tsx
@@ -0,0 +1,40 @@
+import React, { useEffect } from 'react';
+import vectorIcon from '../../assets/image/detailHeart.png';
+
+const NaverMap = () => {
+  useEffect(() => {
+    let map = null;
+    let marker = null;
+    const initMap = () => {
+      map = new naver.maps.Map('map', {
+        //지도 추가, 좌표를 기점으로 주변 지도가 추가된다.
+        center: new naver.maps.LatLng(35.8, 128.839573),
+        zoom: 7,
+      });
+
+      marker = new naver.maps.Marker({
+        position: new naver.maps.LatLng(35.8, 128.839573), //Marker 추가, 좌표에 마커가 찍힌다.
+        map: map,
+      });
+
+      naver.maps.Event.addListener(map, 'click', function (e) {
+        marker.setPosition(e.latlng);
+        console.log(e.latlng);
+      });
+    };
+    initMap();
+  }, []);
+
+  const mapStyle = {
+    width: '70vw',
+    height: '32vw',
+  };
+
+  return (
+    <div>
+      <div id="map" style={mapStyle} />
+    </div>
+  );
+};
+
+export default NaverMap;