4월28일(금) kakaoAPI DB저장 및 받아온 값으로 지도에 마커찍기.

전에 모달창에서 썼던 로직 이용하기로.

그런데 계속해서 오류.

우선 kakao undefined 에러. 많이 봤던건데, 지도를 처음 불러올 때 다른 방법 시도. 원래는 return값에 <'Map>태그 사용했는데 하나하니씩 불러오기로.

        const { kakao } = window;
        //지도를 담을 영역의 DOM 레퍼런스
        const container = document.getElementById('map'); 
        const options = { //지도를 생성할 때 필요한 기본 옵션
            center: new kakao.maps.LatLng(midPointProp?.lat, midPointProp?.lng), //지도의 중심좌표(중간지점props받은 값으로 해당지점 찍어줌)
            level: 3 //지도의 레벨(확대, 축소 정도)
        };
        //지도 생성 및 객체 리턴
        const map = new kakao.maps.Map(container, options); 

이런 식으로 하니까 에러 해결되었으나 <'Map>태그와 동시에 사용되어 지도가 겹쳐 2개로 됨. 그래서 <'Map>태그 지우고

<Map 
   id='map'
    center={{
     lat: midPointProp?.lat,
     lng: midPointProp?.lng
   }}
    level={3}
    style={{
      width: '690px',
      height: '803px',
    }}
>
<MapMarker
     position={{ lat: midPointProp?.lat, lng: midPointProp?.lng }}
     >
    <div style={{ color: "#000" }}>InfoWindow</div>
 </MapMarker>
</Map>

이 코드에서

<div id='map'
  center={{
    lat: midPointProp?.lat,
    lng: midPointProp?.lng
  }}
  level={3}
  style={{
    width: '690px',
    height: '803px',
  }}
/>

이 코드로 변경. 그런데 처음 페이지 랜더링되면 지도가 안 불러와짐. 그래서 useEffect사용하여 지도 불러오기. 근데 <'Map>태그 안의 <'MapMarker>도 사용할 수 없게 됨. 중간위치 주변의 술집은 데이터 받아서 쓰던 로직 그대로 사용하면 지도 위에 마커찍힘. 그런데 중간위치 태그는 스타일 다르게 해서 따로 찍어줘야는데 찍히지 않음.

<'MapMarker>이 태그쓰지않고 어떻게 찍을 지 고민필요.

카카오에 키워드 검색 부분은 지우고 거기에 맞게 데이터 들어가도록 코드 수정,
그리고 검색 리스트도 잘 나오지만 Pagination은 계속해서 에러.
또한

        const keywordSearchSubmitHandler = (e) => {
            e.preventDefault();
            // 검색어를 입력하고 검색 버튼을 클릭했을 때 실행되는 함수. 검색어를 상태 값으로 설정
            KeywordSearchFeat(kakaoApi)
        };

이 핸들러 실행하면 동작.

    const KeywordSearchFeat=() => {
        const { kakao } = window;
        //지도를 담을 영역의 DOM 레퍼런스
        const container = document.getElementById('map'); 
        const options = { //지도를 생성할 때 필요한 기본 옵션
            center: new kakao.maps.LatLng(midPointProp?.lat, midPointProp?.lng), //지도의 중심좌표(중간지점props받은 값으로 해당지점 찍어줌)
            level: 3 //지도의 레벨(확대, 축소 정도)
        };
        //지도 생성 및 객체 리턴
        const map = new kakao.maps.Map(container, options); 
        const ps = new kakao.maps.services.Places();

        //  인포윈도우 선언(카카오map api에서 부르기)
        const infowindow = new kakao.maps.InfoWindow({ zIndex: 1 });
        // // 마커를 담을 배열입니다
        let markers = [];
    
        const searchForm = document.getElementById('submit_btn');
        if (kakaoApi) {
            searchForm?.addEventListener('click', function (e) {
            e.preventDefault();
            //kakaoApi넣어줘야 작동
            @@@@showingOnMap(kakaoApi)@@@@@
            });
        }

@@@@showingOnMap(kakaoApi)@@@@@ 이 부분이 포인트다. 이 부분 없으면 작동하지 않는다. 이 함수는 마커 및 인포윈도우, pagination 나타내주는 함수.kakaoApi변수는 DB에서 받아온 kakaoApi값이다.

지금 마커 잘 찍히고 리스트는 잘 나오지만 여전히 해결해야 할 문제가 몇가지 있다.
1. 중간위치 마커 따로 찍기
2. 페이지 실행되자 마자 모든 동작 다 되도록 하기(현재 useEffect로 지도 불러오지만 모달창과 같이 keywordSearchSubmitHandler로 2번 이상 실행해야지 마커까지 찍힘. 버그 수정 필요)
3. Pagination 에러 해결 및 기능 구현
4. 리스트에서 장소 선택하고 값 저장하기

정도가 우선 순위로 수정하고 추가해야할 것들이다.
조급해하며 아무 계획도, 정확한 원인 파악도 없이 들이대지말자. 하나하나 차근차근 풀어가자.