붕어빵 프로젝트 업데이트 v1.0

 

 

🎯v1.0 업데이트 내용  

기능적인 부분들이 추가돼서 버전을 업데이트 했습니다.

 

 

 

💡거리뷰 기능 추가  

✅ 해당 가게에 대한 거리뷰 기능이 추가되었습니다.

 

💡길 찾기 기능 추가  

✅ 해당 가게까지의 길 찾기 기능이 추가되었습니다. 길찾기 기능은 다양한 환경(웹 및 모바일)에서 작동되게 구현했습니다.

자동차, 버스, 도보, 자전거 등 여러 운송수단 중 원하는 방식을 선택하여 경로를 확인할 수 있습니다.

 

웹

모바일

 

 

 

 

 

 

 

 

---

 

📒업데이트 공부하기

 

❗ 거리뷰

거리뷰 기능을 추가했다.

DB에 저장된 x,y좌표를 가지고 해당 좌표에 마커를 그리는 컴포넌트는 bbangmap이다.

axios 요청으로 가져온 DB값은 fishstores에 상태가 저장되고, 가져온 값의 좌표를 통해 마커를 찍은 후

찍힌 마커를 클릭하면 해당 가게의 정보인 store는 selectedStore 상태로 저장된다.

그 후 selectedStore를 storeInfo컴포넌트로 전달해서 해당 가게의 상세 정보를 표시하게 했다.

 

이 때 bbangmap 컴포넌트는 storeinfo 컴포넌트한테 storeX,storeY값을 넘겨주고 그 좌표를 이용해서 kakao maps의 RoadviewClient API를 통해 로드뷰를 만들게 된다.

거리뷰 컨테이너를 만들어서 초기에는 display:none으로 두고, 거리뷰 버튼을 누르면 나타나게 스타일링 했다.

 

---

 

 

흐름 정리하기

 

1️⃣ axios 요청을 통해 서버에 get 요청, 가져온 데이터로 마커 추가하기

apiClient
    .get("/fishstore") 
    .then((response) => {
      const fishstores = response.data;

      addStoreMarkers(fishstores, map);
})

 

 

2️⃣ 마커 클릭 시 이벤트 추가

window.kakao.maps.event.addListener(marker, "click", () => {
    handleStoreClick(store);
});

 

 

3️⃣ storeInfo 컴포넌트와 store 데이터 전달하기

const handleStoreClick = (store) => {
  setSelectedStore(store);
};

{selectedStore && (
  <StoreInfo
    store={selectedStore}
    onClose={() => setSelectedStore(null)}
  />
)}

 

 

4️⃣ storeInfo.jsx에서 storeX, storeY를 이용해서 거리뷰 초기화

useEffect(() => {
  if (showStreetView && isKakaoLoaded) {
    const position = new window.kakao.maps.LatLng(store.storeX, store.storeY); // 전달받은 storeX, storeY 좌표 사용
    const roadview = new window.kakao.maps.Roadview(streetViewContainerRef.current);
    const roadviewClient = new window.kakao.maps.RoadviewClient();

    roadviewClient.getNearestPanoId(position, 50, (panoId) => {
      if (panoId) {
        roadview.setPanoId(panoId, position);
      } else {
        console.error("근처 로드뷰를 찾을 수 없습니다.");
      }
    });
  }
}, [showStreetView, isKakaoLoaded]);

 

 

5️⃣ 거리뷰 컨테이너 제공

{/* 거리뷰 컨테이너 */}
    {showStreetView && (
    <div
      ref={streetViewContainerRef}
      id="roadview-container"
      className="streetview-container"
    ></div>
)}

 

 

기본 가게 표시

거리뷰 눌렀을때 상태

 

 

 

---

 

 

❗ 길 찾기

 

길 찾기 기능은 카카오 지도 API에 있는 URL Scheme를 활용했다.

웹으로 서비스중이지만 반응형을 통해 모바일 기기로도 쉽게 접근할 수 있기 때문에,

바로 지도에 경로를 나타내고 각 경로별 네비게이션을 제공하는것 보다는 카카오 지도 API에 있는 URL Scheme를 활용하는게 더 사용자 관점에서 편리할 것 같았다.

 

카카오 지도 API

(참고 : https://apis.map.kakao.com/web/guide/#routeurl)

 

출발지, 목적지 이름과 해당 좌표를 포함한 URL을 만들어주면 카카오 지도로 출발지와 목적지가 세팅되고 길찾기 기능을 제공해준다.

 

현재 위치는 navigator.geolocation를 이용해서 가져오고 있기 때문에 이걸 활용하고, 목적지에 해당하는 가게 좌표는

DB에 저장된 storeX, storeY를 사용했다. 길 찾기 기능은 storeinfo 컴포넌트에 추가했다.

 

길 찾기 버튼을 누르면 새 창으로 카카오 지도 길찾기 기능에 출발지와 목적지가 설정되어 표시되게 하였다.

모바일에서는 카카오 맵 어플과 연결이 되거나, 어플이 없을 경우 웹으로 열 수 있게 제공되고 있었다.

 

 

---

 

 

흐름 정리하기

 

1️⃣ navigator.geolocation를 통해 현재 위치 가져오고 useEffect로 위치 정보 저장하기

 

현재 위치를 가져온 후 위도와 경도를 currentPosition에 저장했다.

useEffect(() => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const { latitude, longitude } = position.coords;
        const newPosition = { lat: latitude, lng: longitude };
        setCurrentPosition(newPosition);
      },
      (error) => {
        console.error("현재 위치를 가져오는 데 실패했습니다:", error.message);
      },
      { enableHighAccuracy: true, maximumAge: 0 }
    );
  } else {
    console.error("이 브라우저는 Geolocation API를 지원하지 않습니다.");
  }
}, []);

 

 

2️⃣ 길 찾기 URL 만들기

 

현재 위치와 가게 위치를 확인 후 카카오 지도 URL Scheme 조건에 맞게 만들었다.

encodeURIComponent를 이용해서 출발지와 목적지 이름을 URL-safe 형식으로 변환하고 새 창으로 열리게 했다.

 

const drawWalkingRoute = async () => {
  if (!currentPosition.lat || !currentPosition.lng) {
    alert("현재 위치 정보를 가져오는 중입니다. 잠시 후 다시 시도해주세요.");
    return;
  }

  if (!store.storeX || !store.storeY) {
    alert("가게 위치 정보가 유효하지 않습니다.");
    return;
  }

  try {
    const startName = "내 위치";
    const startLat = currentPosition.lat;
    const startLng = currentPosition.lng;

    const destinationName = store.storeName || "목적지";
    const destinationLat = store.storeX;
    const destinationLng = store.storeY;

    const kakaoMapUrl = `https://map.kakao.com/link/from/${encodeURIComponent(
      startName
    )},${startLat},${startLng}/to/${encodeURIComponent(
      destinationName
    )},${destinationLat},${destinationLng}`;

    window.open(kakaoMapUrl, "_blank");
  } catch (error) {
    console.error("길찾기 중 오류 발생:", error.message);
    alert("길찾기 URL을 생성하는 데 실패했습니다.");
  }
};

 

길 찾기 버튼

 

웹

모바일 버전

 

길 찾기 누르면 나오는 화면

어플 길 찾기

모바일에서 웹을 이용한 길 찾기

 

 

---