위치 기반 러닝 트래커 프로토타입 개발해보기

import { useEffect, useState } from "react"
import "./App.css"
import { Map, MapMarker, Polyline } from "react-kakao-maps-sdk"

interface PathType {
  lat: number
  lng: number
}

function App() {
  const geo: Geolocation = navigator.geolocation
  const [latitude, setLatitude] = useState<number>(0)
  const [longitude, setLongitude] = useState<number>(0)
  const [path, setPath] = useState<PathType[]>([])
  console.info(path)

  /** 마운트 시 위치 이벤트 리스너 등록 */
  useEffect(() => {
    const geoId = geo.watchPosition(g => {
      setLatitude(g.coords.latitude)
      setLongitude(g.coords.longitude)
    })

    return () => geo.clearWatch(geoId)
  }, [])

  /** 위치 바뀔 때마다 히스토리에 누적 */
  useEffect(() => {
    if (latitude === 0 || longitude === 0) return
    setPath(prev => [...prev, { lat: latitude, lng: longitude }])
  }, [latitude, longitude])

  return (
    <>
      <div style={{ width: "80vw" }}>
        <h3>Kakao Map.....</h3>
        {latitude === 0 || longitude === 0 ? undefined : (
          <Map
            center={{ lat: latitude, lng: longitude }}
            style={{ width: "100%", height: "500px" }}
          >
            <MapMarker position={{ lat: latitude, lng: longitude }}></MapMarker>
            <Polyline
              path={path}
              strokeWeight={5} // 선의 두께 입니다
              strokeColor={"#FFAE00"} // 선의 색깔입니다
              strokeOpacity={0.7} // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
              strokeStyle={"solid"} // 선의 스타일입니다
            />
          </Map>
        )}
      </div>
    </>
  )
}

export default App