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

 

 

🎯v1.1 업데이트 내용  

웹 사이트 주소 : https://www.ys2ys2.com/bbangmap/

 

💡가게 정보 입력 폼 수정 

✅ 붕어빵 가게 정보 저장 시, 현재 위치나 특정 좌표를 선택해서 추가할 수 있게 개선하였습니다. 

✅ 지도 클릭 시 클릭된 곳에 마커를 찍고, 입력 폼에는 클릭된 곳의 좌표를 제공하는 기능을 추가하였습니다.

 

 

 

 

 

 

---

📒업데이트 공부하기

 

초기에 데이터를 저장하는 방식을 고민했을 때, 사용자가 모바일 기기로 직접 붕어빵 가게까지 가서 저장하는 것으로 정하고 만들었었다.

실제로 반응형CSS를 통해서 내가 직접 돌아다니면서 붕어빵 가게로 가서 사진도 찍고 현재 위치를 실시간으로 받아서 저장이 되게 하였다.

하지만 날씨 등등 다른 제약사항이 생길 때는 움직여서 좌표를 구하고 저장할 수가 없는 상황이 생겼다.

그래서 카카오 지도 api에 있는 '클릭한 위치에 마커 표시하기'를 통해

지도의 어떤 부분을 클릭하면 마커를 생성하고, 해당 마커의 좌표를 제공하는 기능을 통해 고정된 곳에서도 데이터를 저장할 수 있게 개선하였다.

 

또한 이걸 선택값으로 둬서

현재 위치로 저장하거나(직접 돌아다니면서 저장할 경우)

선택된 좌표로 저장할 수 있게(좌표가 고정된 환경에서 저장할 경우)

사용자가 선택해서 데이터를 저장할 수 있게 하였다.

 

 

---

 

 

❗ 지도를 관리하는 KaKaoMap.js에 클릭 이벤트 추가

utils > KaKaoMap.js에 지도를 클릭하면 좌표를 전달하는 addMapClickListener 함수 추가

export const addMapClickListener = (map, onClick) => {
  if (!map || !onClick) return;

  const { kakao } = window;

  kakao.maps.event.addListener(map, "click", (mouseEvent) => {
    const lat = mouseEvent.latLng.getLat();
    const lng = mouseEvent.latLng.getLng();
    onClick(lat, lng); // 클릭한 좌표를 콜백 함수로 전달
  });
};

 

 

---

 

 

❗ 전달받은 좌표를 메인 화면에서 마커로 추가하기

 

좌표 값을 통해 inputForm.jsx에서 처리하고 있기 때문에 KaKaoMap.js에서 전달받은 좌표를 받아서

bbangmap.jsx에서 지도 위에 마커로 추가했다. 

loadKakaoMapScript(
  apiKey,
  () => {
    if (window.kakao && window.kakao.maps) {
      getUserLocation(
        (position) => {
          const { latitude, longitude } = position.coords;

          // 지도 초기화
          const map = initializeMap("map", latitude, longitude);
          mapRef.current = map;

          // 지도 컨트롤 추가
          const mapTypeControl = new window.kakao.maps.MapTypeControl();
          map.addControl(mapTypeControl, window.kakao.maps.ControlPosition.TOPRIGHT);

          const zoomControl = new window.kakao.maps.ZoomControl();
          map.addControl(zoomControl, window.kakao.maps.ControlPosition.RIGHT);

          // 실시간 위치 마커 생성
          createLiveMarker(map, latitude, longitude);

          // 실시간 위치 추적
          startTracking(map);

          // 지도 클릭 이벤트 추가
          addMapClickListener(map, (lat, lng) => {
            // 클릭 마커 생성 및 업데이트
            createClickedMarker(map, lat, lng);
            setSelectedCoords({ lat, lng }); // 클릭된 좌표 상태 업데이트
          });

 

const createClickedMarker = (map, lat, lng) => {
  if (clickedMarkerRef.current) {
    clickedMarkerRef.current.setMap(null); // 기존 마커 제거
  }

  const marker = new window.kakao.maps.Marker({
    position: new window.kakao.maps.LatLng(lat, lng), 
    map: map,
  });

  clickedMarkerRef.current = marker;
};

 

 

---

❗ 클릭된 좌표를 상태로 업데이트

 

사용자가 지도를 클릭하면 lat,lng가 setSelectedCoords를 통해 상태로 저장이 되고, InputForm 컴포넌트에 전달되어 폼 데이터와 UI를 업데이트 하게 했다.

 

addMapClickListener(map, (lat, lng) => {
  createClickedMarker(map, lat, lng); // 마커 생성
  setSelectedCoords({ lat, lng }); // 클릭된 좌표 상태 업데이트
});

 

 

---

 

❗ 전달받은 좌표와 주소 관리하기

 

선택한 좌표도 도로명 주소로 바꿔서 저장해야 하기 때문에 selectedCoords가 변경될 때 마다 Geocoder를 호출하게 하였다.

이렇게 변환된 주소는 address 상태와 storeAddress에 저장하게 했다. 뒤에 설명할 체크박스 기능도 고려해서 만들었다.

const handleCheckboxChange = (e) => {
  const isChecked = e.target.checked;
  setUseSelectedCoords(isChecked);

  if (isChecked && selectedCoords) {
    // 선택된 좌표의 주소 가져오기
    const geocoder = new window.kakao.maps.services.Geocoder();
    geocoder.coord2Address(
      selectedCoords.lng,
      selectedCoords.lat,
      (result, status) => {
        if (status === window.kakao.maps.services.Status.OK) {
          const roadAddress = result[0]?.road_address?.address_name;
          const jibunAddress = result[0]?.address?.address_name;
          const finalAddress = roadAddress || jibunAddress || "주소 없음";

          // 선택된 좌표로 주소 업데이트
          setAddress(finalAddress);
          setFormData((prevState) => ({
            ...prevState,
            storeX: selectedCoords.lat.toFixed(6),
            storeY: selectedCoords.lng.toFixed(6),
            storeAddress: finalAddress, // 선택된 주소 저장
          }));
        } else {
          alert("주소 변환 실패");
        }
      }
    );
  } else {
    // 체크 해제 시 현재 위치의 주소로 복원
    setAddress("주소 가져오는 중...");
    const geocoder = new window.kakao.maps.services.Geocoder();
    geocoder.coord2Address(
      currentPosition.lng,
      currentPosition.lat,
      (result, status) => {
        if (status === window.kakao.maps.services.Status.OK) {
          const roadAddress = result[0]?.road_address?.address_name;
          const jibunAddress = result[0]?.address?.address_name;
          const finalAddress = roadAddress || jibunAddress || "주소 없음";

          setAddress(finalAddress);
          setFormData((prevState) => ({
            ...prevState,
            storeX: currentPosition.lat.toFixed(6),
            storeY: currentPosition.lng.toFixed(6),
            storeAddress: finalAddress, // 현재 위치 주소 저장
          }));
        } else {
          alert("주소 복원 실패");
        }
      }
    );
  }
};

 

 

---

 

 

❗ 체크박스 추가

 

선택한 마커의 좌표와 주소지를 저장할 것인지, 현재 위치 기반의 좌표와 주소지를 저장할 것인지 체크박스를 주고 선택할 수 있게 했다.

체크박스가 활성화 되면 클릭된 좌표인 selectedCoords를 사용하고,

체크박스가 비활성화 되면 현재 좌표인 currentPosition를 사용하게 했다.

const handleCheckboxChange = (e) => {
  const isChecked = e.target.checked;
  setUseSelectedCoords(isChecked);

  if (!isChecked) {
    // 체크 해제 시 현재 위치 복원
    setAddress("주소 가져오는 중...");
    setFormData((prevState) => ({
      ...prevState,
      storeX: currentPosition.lat.toFixed(6),
      storeY: currentPosition.lng.toFixed(6),
      storeAddress: "현재 위치 주소",
    }));
  }
};