240913 팀 프로젝트 몽글로드 2

🌏 카카오 맵 API - 선의 거리 계산하기
🌏 리액트 카카오 맵 API - 선의 거리 계산하기

🚕 초기 설정

const WalkPathPage = () => {
  return (
    <div>
      <WalkPath />
    </div>
  );
};

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/walkpath" element={<WalkPathPage />} />
      </Routes>
    </BrowserRouter>
  );
};

🚕 경로 저장

// json 서버에 저장하는 로직
export const getRouteInfo = async () => {
  const response = await axios.get(PATH_ROUTE_API_URL);
  return response.data;
};

// 경로를 저장하기 위한 값들 (패스값, 총 거리, 도보, 자전거 시간)을 저장한다
  const saveRouteInfo = async (paths, distances) => {
    const totalDistance = distances[distances.length - 1];
    const totalWalkkTime = (totalDistance / 67) | 0;
    const totalBycicleTime = (totalDistance / 227) | 0;

    const routeData = {
      paths,
      totalDistance,
      totalWalkkTime,
      totalBycicleTime
    };

    try {
      await createRouteInfo(routeData);
      alert('경로저장완료!');
      console.log('경로저장완료', routeData);
    } catch (error) {
      console.error('경로저장에러', error);
    }
  };

  const handleRightClick = (_map, _mouseEvent) => {
    setIsdrawing(false);
    
	// 클릭한 선이 있다면 값들을 저장  
    if (clickLine) {
      saveRouteInfo(paths, distances);
    }
  };

🚕 Esc로 리셋하기

마우스 우클릭 시, 선 그리기가 종료되고 오버레이가 뜨게 되는데 그 과정을 거치지 않고 ESC로 리셋하고 싶었다.

  useEffect(() => {
    // 선 그리기 리셋
    const handleInfoReset = (e) => {
      if (e.key === 'Escape') {
        setIsdrawing(false);
        setPaths([]);
        setDistances([]);
        console.log('esc누름');
      }
    };
    window.addEventListener('keydown', handleInfoReset);
    return () => {
      window.removeEventListener('keydown', handleInfoReset);
    };
  }, []);

🤬 트러블 발생 1

사실 이런식으로 버튼을 달아서 저장을 할 수 있게 하고 싶었는데, css 문제인지 버튼 클릭이 잘 되지 않는 상황이 발생했다. 1시간 정도 고민하다가 안 되는 것 같아서 일단 패스하고 우클릭으로 저장할 수 있게 짜놨는데 나중에 다시 버튼 클릭으로 저장할 수 있게 만들고 싶다!

🤬 트러블 발생 2

• ESC로 리셋하는 과정에서 처음엔 clickLine과 moveLine값도 리셋 해줬다.
  
  그랬더니 관련 값들을 찾을 수 없다고 오류가 뜨기 시작.

해결 과정

이런식으로 Polyline을 새로 생성해줬다.
=> 저 오류들은 사라지고 화면리셋도 정상적으로 잘 되는데 distances 값이 0으로 찍히는 경우가 발생. ㅎㅎ;;

해결

clickLine과 moveLine 값을 리셋 안 해주면 됨. 😡
특강 듣기 전에 이 에러떠서 특강도 제대로 못 듣고 이거에만 매달렸는데..... 😂

💬 추가 수정

• 기존 라이브러리 말고 새로운 라이브러리를 쓰게 되면서 라이브러리 기능을 가져와서 리셋해줌.

😳 기타

오늘 13일의 금요일이었다. 😨