[ 🗺 Map ] 좌표 찍기

src/components/map/KakaoMap.tsx

@@ -1,11 +1,16 @@
 import { useEffect, useState } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import styled from 'styled-components';
 
-import { KakaoMapInfo } from '../../types/map';
+import MapCurrent from '../../asset/image/MapCurrent.png';
+import { floggingInfoState, mapLocationInfoState } from '../../recoil/atom';
+import { KakaoMapLocation } from '../../types/map';
+import { getDistanceKm } from '../../utils/getDistanceKm';
 
 const KakaoMap = () => {
-  const [map, setMap] = useState({});
-  const [kakaoMapInfo, setKakaoMapInfo] = useState<KakaoMapInfo>();
+  const mapLocationInfo = useRecoilValue(mapLocationInfoState);
+  const setFloggingInfo = useSetRecoilState(floggingInfoState);
+  const [kakaoMapInfo, setKakaoMapInfo] = useState<KakaoMapLocation>();
   const { kakao } = window;
 
   useEffect(() => {
@@ -23,7 +28,30 @@ const KakaoMap = () => {
         level: 3,
       };
 
-      setMap(new kakao.maps.Map(container, options));
+      const map = new kakao.maps.Map(container, options);
+
+      const markerImgSrc = MapCurrent;
+      const markerImgSize = new kakao.maps.Size(window.screen.width * 0.08, window.screen.width * 0.08);
+      const markerImg = new kakao.maps.MarkerImage(markerImgSrc, markerImgSize);
+      const markerPosition = new kakao.maps.LatLng(kakaoMapInfo.latitude, kakaoMapInfo.longitude);
+      const marker = new kakao.maps.Marker({
+        position: markerPosition,
+        image: markerImg,
+      });
+
+      const linePath = mapLocationInfo.map((location) => new kakao.maps.LatLng(location.latitude, location.longitude));
+      const kakaoPolyline = new kakao.maps.Polyline({
+        path: linePath,
+        strokeWeight: 5,
+        strokeColor: '#EF8D8A',
+        strokeOpacity: 0.7,
+        strokeStyle: 'solid',
+      });
+
+      marker.setMap(map);
+      kakaoPolyline.setMap(map);
+
+      setFloggingInfo((prev) => ({ ...prev, distance: getDistanceKm(mapLocationInfo) }));
     }
   }, [kakaoMapInfo]);
 

src/components/map/RunningControl.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 
 import { IcRunning } from '../../asset/icon';
 import useCouter from '../../lib/hooks/useCouter';
+import useCurrentLocation from '../../lib/hooks/useCurrentLocation';
 import { floggingInfoState } from '../../recoil/atom';
 import { getDateParse } from '../../utils/dateParse';
 import JupgoButton from './JupgoButton';
@@ -12,18 +13,23 @@ const RunningControl = () => {
   const [isFloggingPause, setIsFloggintPause] = useState(false);
   const [floggingInfo, setFloggingInfo] = useRecoilState(floggingInfoState);
   const { count, start, stop } = useCouter(0, 1000);
+  const { startRecordLocation, stopRecordLocation } = useCurrentLocation();
+
   const { distance, duration } = floggingInfo;
 
   const handleFloggingStart = () => {
     start();
+    startRecordLocation();
     setIsFloggintPause(!isFloggingPause);
   };
   const handleFloggingPause = () => {
     stop();
+    stopRecordLocation();
     setIsFloggintPause(!isFloggingPause);
   };
   const handleFloggingStop = () => {
     stop();
+    stopRecordLocation();
     setFloggingInfo({ ...floggingInfo });
   };
 

src/lib/hooks/useCurrentLocation.tsx

@@ -0,0 +1,34 @@
+import { useCallback, useRef } from 'react';
+import { useRecoilState } from 'recoil';
+
+import { mapLocationInfoState } from '../../recoil/atom';
+
+const useCurrentLocation = () => {
+  const [mapLocationInfo, setMapLocationInfo] = useRecoilState(mapLocationInfoState);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const startRecordLocation = useCallback(() => {
+    if (intervalRef.current) return;
+    intervalRef.current = setInterval(() => {
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(({ coords }) => {
+          const filterMapLocationInfo = mapLocationInfo.filter(
+            ({ latitude, longitude }) => coords.latitude !== latitude && coords.longitude !== longitude,
+          );
+          if (filterMapLocationInfo.length === mapLocationInfo.length)
+            setMapLocationInfo([...mapLocationInfo, { latitude: coords.latitude, longitude: coords.longitude }]);
+        });
+      }
+    }, 1000);
+  }, []);
+
+  const stopRecordLocation = useCallback(() => {
+    if (!intervalRef.current) return;
+    clearInterval(intervalRef.current);
+    intervalRef.current = null;
+  }, []);
+
+  return { startRecordLocation, stopRecordLocation };
+};
+
+export default useCurrentLocation;

src/recoil/atom.ts

@@ -2,6 +2,7 @@ import { atom } from 'recoil';
 import { recoilPersist } from 'recoil-persist';
 
 import { FloggingData } from '../types/flogging';
+import { KakaoMapLocation } from '../types/map';
 
 const { persistAtom } = recoilPersist();
 
@@ -16,3 +17,11 @@ export const floggingInfoState = atom<FloggingData>({
   },
   effects_UNSTABLE: [persistAtom],
 });
+
+export const mapLocationInfoState = atom<KakaoMapLocation[]>({
+  key: 'mapLocationInfo',
+  default: [
+    { latitude: 37.5017936, longitude: 126.8831826 },
+    { latitude: 37.5, longitude: 126.8841 },
+  ],
+});

src/types/map.ts

@@ -3,7 +3,7 @@ declare global {
     kakao: any;
   }
 }
-export interface KakaoMapInfo {
+export interface KakaoMapLocation {
   latitude: number;
   longitude: number;
 }

src/utils/getDistanceKm.ts

@@ -0,0 +1,23 @@
+import { KakaoMapLocation } from '../types/map';
+const RADIUS_EARTH_KM = 6371;
+const degreesToRadians = (deg: number) => {
+  return deg * (Math.PI / 180);
+};
+export const getDistanceKm = (mapLocationList: KakaoMapLocation[]) => {
+  return mapLocationList.reduce((distance, currentLocation, index) => {
+    if (index) {
+      const startLatRads = degreesToRadians(currentLocation.latitude);
+      const startLongRads = degreesToRadians(currentLocation.longitude);
+      const destLatRads = degreesToRadians(mapLocationList[index - 1].latitude);
+      const destLongRads = degreesToRadians(mapLocationList[index - 1].longitude);
+
+      const calDistance =
+        Math.acos(
+          Math.sin(startLatRads) * Math.sin(destLatRads) +
+            Math.cos(startLatRads) * Math.cos(destLatRads) * Math.cos(startLongRads - destLongRads),
+        ) * RADIUS_EARTH_KM;
+      return distance + Number(calDistance.toFixed(2));
+    }
+    return distance;
+  }, 0);
+};