refactor: 지도 버전을 변경한다. (#242)

woowacourse-teams · Aug 8, 2023 · 6b5d291 · 6b5d291
1 parent 51670fd
commit 6b5d291
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 16 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -8,7 +8,7 @@
     <meta http-equiv="cache-control" content="max-age=31536000, no-cache" />
     <script
       script
-      src="https://apis.openapi.sk.com/tmap/jsv2??version=1&appKey=P2MX6F1aaf428AbAyahIl9L8GsIlES04aXS9hgxo"
+      src="https://apis.openapi.sk.com/tmap/vectorjs?version=1&&appKey=P2MX6F1aaf428AbAyahIl9L8GsIlES04aXS9hgxo"
     ></script>
     <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
     <title>괜찮을지도</title>

diff --git a/frontend/src/components/Layout/index.tsx b/frontend/src/components/Layout/index.tsx
@@ -15,20 +15,20 @@ type LayoutProps = {
 
 declare global {
   interface Window {
-    Tmapv2: any;
+    Tmapv3: any;
     daum: any;
   }
 }
 
 const Layout = ({ children }: LayoutProps) => {
-  const { Tmapv2 } = window;
+  const { Tmapv3 } = window;
   const mapContainer = useRef(null);
 
   const [map, setMap] = useState(null);
 
   useEffect(() => {
-    const map = new Tmapv2.Map(mapContainer.current, {
-      center: new Tmapv2.LatLng(37.5154, 127.1029),
+    const map = new Tmapv3.Map(mapContainer.current, {
+      center: new Tmapv3.LatLng(37.5154, 127.1029),
     });
     map.setZoomLimit(8, 17);
     setMap(map);

diff --git a/frontend/src/context/MarkerContext.tsx b/frontend/src/context/MarkerContext.tsx
@@ -36,8 +36,8 @@ const MarkerProvider = ({ children }: Props): JSX.Element => {
     if (clickedMarker) {
       clickedMarker.setMap(null);
     }
-    const marker = new window.Tmapv2.Marker({
-      position: new window.Tmapv2.LatLng(
+    const marker = new window.Tmapv3.Marker({
+      position: new window.Tmapv3.LatLng(
         clickedCoordinate.latitude,
         clickedCoordinate.longitude,
       ),
@@ -60,8 +60,8 @@ const MarkerProvider = ({ children }: Props): JSX.Element => {
         currentTopicId = coordinate.topicId;
       }
 
-      const marker = new window.Tmapv2.Marker({
-        position: new window.Tmapv2.LatLng(
+      const marker = new window.Tmapv3.Marker({
+        position: new window.Tmapv3.LatLng(
           coordinate.latitude,
           coordinate.longitude,
         ),

diff --git a/frontend/src/hooks/useAnimateClickedPin.ts b/frontend/src/hooks/useAnimateClickedPin.ts
@@ -10,9 +10,9 @@ const useAnimateClickedPin = (map: any, markers: any) => {
       if (marker) {
         map.setCenter(marker.getPosition());
         map.setZoom(17);
-        marker._marker_data.options.animation =
-          window.Tmapv2.MarkerOptions.ANIMATE_FLICKER;
-        marker._marker_data.options.animationLength = 350;
+        // marker._marker_data.options.animation =
+        //   window.Tmapv3.MarkerOptions.ANIMATE_FLICKER;
+        // marker._marker_data.options.animationLength = 350;
       }
     }
   }, [markers, map]);

diff --git a/frontend/src/hooks/useClickedCoordinate.ts b/frontend/src/hooks/useClickedCoordinate.ts
@@ -13,7 +13,7 @@ export default function useClickedCoordinate(map: any) {
     // 선택된 좌표가 있으면 해당 좌표로 지도의 중심을 이동
     if (clickedCoordinate.latitude && clickedCoordinate.longitude) {
       map.panTo(
-        new window.Tmapv2.LatLng(
+        new window.Tmapv3.LatLng(
           clickedCoordinate.latitude,
           clickedCoordinate.longitude,
         ),

diff --git a/frontend/src/hooks/useFocusToMarkers.ts b/frontend/src/hooks/useFocusToMarkers.ts
@@ -1,15 +1,15 @@
 import { useEffect, useRef } from 'react';
 
 const useFocusToMarker = (map: any, markers: any) => {
-  const bounds = useRef(new window.Tmapv2.LatLngBounds());
+  const bounds = useRef(new window.Tmapv3.LatLngBounds());
 
   useEffect(() => {
     if (markers.length === 1) {
       map.panTo(markers[0].getPosition());
     }
 
     if (markers.length > 1) {
-      bounds.current = new window.Tmapv2.LatLngBounds();
+      bounds.current = new window.Tmapv3.LatLngBounds();
       markers.forEach((marker: any) => {
         bounds.current.extend(marker.getPosition());
       });

diff --git a/frontend/src/types/index.d.ts b/frontend/src/types/index.d.ts
@@ -6,6 +6,6 @@ declare module '*.svg' {
 
 declare global {
   interface Window {
-    Tmapv2: Tmapv2;
+    Tmapv3: Tmapv3;
   }
 }