[3nd Project] 카카오 api로 주차장 구현하기 5

쾌걸춘향을 아시나요?

오늘의 첫 곡은 응급실입니다.

이 드라마의 최고 아웃풋 응급실.

(Tmi: 초딩 때 저 머리를 하고 싶어서 하고 다니다가

언니들한테 찍힌다고 친구가 겁줘서 튀는 머리 안했어요.

그래서 29살이지만 머리 땋기, 양갈래 이런거 해도 되는 장소에는 

내면의 욕구를 충족시키기 위해 하고 감요)

무튼 오늘은 나 무조건 80% 끝낼거야. 

오늘 해야 할 일

1. 필터링된 공공데이터 주차장 리스트에 출력하기

2. 지역 검색 필터 완벽 구현하기

3. 내 위치 찍히게 바꾸기 

4. 길찾기 부분 구현 해놓기

 

와 나 진짜 오늘 집중 빡할거야 그럴려고 아침에 빵 두 조각 냠냠굿

나 오늘도 실패로 돌아가면 SQLD고 뭐고 집 안감ㅠㅠ

 

해보자 예슬아

 

 

---

🥊fetchParkingLotData - 주차장 데이터 불러오기 

function fetchParkingLotData(tabName, province, city) {
    // 만약 이전에 주차장 데이터가 이미 불러와진 상태라면, 
    API 호출 없이 필터링과 렌더링 작업으로 바로 이동
    if (allParkingData.length > 0) {
        applyFilterAndRender(allParkingData, tabName, province, city);
        return;
    }

//allParkingData 배열에 데이터가 있다면 
추가 API 호출 없이 applyFilterAndRender 함수를 호출하여 데이터 필터링 및 렌더링

            allParkingData = data;
            applyFilterAndRender(allParkingData, tabName, province, city);
        },
        error: function(error) {
            console.error("주차장 데이터를 불러오는데 실패했습니다:", error);
        }
    });
}
//data 배열을 allParkingData에 저장
//applyFilterAndRender 함수로 데이터를 넘겨주어 필터링과 렌더링을 수행

 

🌵filterParkingDataByRegion - 지역별 필터링

function filterParkingDataByRegion(data, province, city) {
    return data.filter(item => {
        const address = item.address;
        if (!address) return false;

//filterParkingDataByRegion 함수는 address 필드를 기반으로 
//데이터에서 특정 지역(province와 city)에 해당하는 주차장만을 필터링
        let addressProvinceCity;
        if (address.includes(' ')) {
            const indexOfSecondSpace = address.indexOf(' ', address.indexOf(' ') + 1);
            addressProvinceCity = address.slice(0, indexOfSecondSpace);
        } else {
            addressProvinceCity = address;
        }
        const isMatch = addressProvinceCity === `${province} ${city}`;
        return isMatch;
    });
}
//주소 문자열에서 도/시와 구/군에 해당하는 정보 추출
//공백을 기준으로 문자열을 잘라 서울특별시 강남구와 같은 형식으로 만들기

//addressProvinceCity가 사용자가 선택한 지역과 일치하는지 
//일치하는 데이터만 필터링되어 최종 리스트

🌌applyFilterAndRender -데이터 필터링 및 렌더링

function applyFilterAndRender(data, tabName, province, city) {
    const filteredData = filterParkingDataByRegion(data, province, city);
    console.log("필터링된 데이터:", filteredData);
    renderParkingList(filteredData, tabName);
    displayMarkers(filteredData);
}

//applyFilterAndRender 함수는 받은 데이터를 지역별로 필터링하고, 
주차장 목록과 지도 마커 표시
filterParkingDataByRegion 함수는 지역 필터링을 수행하고, 
renderParkingList와 displayMarkers 함수는 필터링된 데이터를 이용해 화면 표시

 

💠renderParkingList -주차장 리스트 데이터 표시 함수

// 주차장 리스트 데이터 표시 함수
function renderParkingList(data, tabName) {
    const parkingList = document.getElementById(tabName).querySelector('.parking-list'); // 주차장 목록을 표시할 HTML 요소 선택
    parkingList.innerHTML = ''; // 기존 데이터를 초기화

    data.forEach(item => {
        const parkingItem = document.createElement('div');
        parkingItem.classList.add('parking-item');
        parkingItem.innerHTML = `
            <h3>${item.name}</h3>
            <div class="label-container">
                <span class="label_gubun">${item.prkplceSe}</span> <!-- 구분 라벨 -->
                <span class="label_type">${item.prkplceType}</span> <!-- 유형 라벨 -->
                <span class="label_charge">${item.parkingchrgeInfo}</span> <!-- 요금 라벨 -->
            </div>
            <p>주소: ${item.address}</p>
            <p>전화번호: ${item.phone}</p>
        `;
           // 주차장 항목 클릭 시 상세 정보 표시 이벤트 추가
        parkingItem.addEventListener('click', function() {
            console.log("주차장 항목 클릭됨:", item); // 클릭 로그 추가
            showParkingDetails(item); // 클릭 시 상세 정보 함수 호출
            moveToLocationAndShowMarker(item); // 클릭 시 마커와 지도 이동 함수 호출
        });
        parkingList.appendChild(parkingItem);
    });
    document.getElementById('page-number').innerText = currentPage; // 현재 페이지 번호 표시
}

 

🏆코드 흐름

fetchParkingLotData 함수 API로부터 데이터를 한 번만 가져옴
(이미 데이터가 있다면, applyFilterAndRender로 바로 이동하고, 없을 때만 API를 호출하여 데이터를 가져온다)
↓
데이터를 성공적으로 가져오면, 필터링 및 렌더링 함수인

applyFilterAndRender를 호출하여 다음 작업을 진행
↓
전달받은 데이터를 filterParkingDataByRegion 함수로 넘겨 필터링 수행

↓
필터링된 데이터를 renderParkingList 함수에 넘겨 화면에 표시

↓
필터링된 데이터로 지도 마커를 표시하는 displayMarkers 함수 호출

↓
filterParkingDataByRegion - province와 city를 기준으로 데이터를 필터링
↓
renderParkingList 
전달받은 filteredData를 tabName에 해당하는 HTML 요소에 표시
데이터가 forEach로 반복되며, 각 주차장 항목이 parkingItem이라는 div 요소로 생성
각 주차장 항목에 클릭 이벤트가 추가되어 

showParkingDetails와 moveToLocationAndShowMarker가 호출되면서

상세 정보와 지도 마커 이동을 수행

 

 

하지만 jsp에 출력이 되지 않고 있다. 왜냐면 jsp 검색하기 버튼을 클릭했을 때 사용자가 선택한 지역을 기반으로

주차장 데이터를 불러오고 필터링 하는 함수가 없어서!
추가 해보겠다.

 

🛒applyRegionFilter 

function applyRegionFilter() {
    // 사용자 입력을 읽어옴
    const province = document.getElementById('province-select').value; // 도/시 선택값
    const city = document.getElementById('city-select').value; // 구/군 선택값
    
    console.log("사용자가 선택한 도/시:", province);
    console.log("사용자가 선택한 구/군:", city);

    // fetchParkingLotData 함수를 호출하여 데이터를 가져온 뒤 필터링 및 렌더링 수행
    fetchParkingLotData('search', province, city);  // 'search' 탭에 데이터 렌더링
}

//province와 city 값이 바뀌었을 때 
새롭게 데이터를 불러오기 위해 fetchParkingLotData 함수를 호출
//fetchParkingLotData는 전체 데이터를 가져와 applyFilterAndRender 함수로 필터링 및 렌더링 진행

자 이렇게 해도 jsp에 출력이 되지 않아서 확인해봤는데 

탭 전환 함수에 내가 필터가 적용된 데이터를 받아오는게 아니라 전체 데이터를 받아와서 
입력 값과 매칭이 안돼서 출력이 안됐다. 
그 부분을 삭제하니까!!!!!!!!!!!

야호 무야호

 

 

아 진짜.. 두 번 엎고 삼일차에 드디어 제대로 가져오고 있습니다.

감사합니다. 무한 감사합니다.

사랑합니다.

 

 

1시간 안에 해결할 수 있을지 몰랐어요..

정말 공부하면서 정리하니까 되는걸까요?

 

나 앞으로 착하게 열심히 살게!

혼또니 아리가또

 

헤헤 

이제 고장난 기능들 하나 씩 고쳐봐야지 

 

대한민국 행정구역을 다 리스트에 넣으려면 HTML로 쉽게 노가다를 할 것인가..

자바스크립트로 조금 어렵지만 덜 고생하냐
기로에서 

 

자바스크립트로 덜 고생을 택했습니다.

왜냐면.. 자바스크립트를 믿거등여..

짜라랄ㄴ.. 노가다 완료 했더니 
강동구에 주차장이 안떠요 

16000개의 주차장에 서울시 강동구 주차장이 없는건 말이 안되니까요,, 

XML파일에는 강동구 주차장 있거든여?

천호역에 있어요. 

천호역 앞에 떠뽀끼 맛나요 핫도그도 맛나요 
천호 먹골에 있는 돼지곱창도 맛나여

숯불 닭갈비도 맛있어요
천호 쭈꾸미 골목에서 쭈꾸미를 먹어보지 못했네.. 
천호보안관이랑 쭈꾸미 부시러 가야겠어요

천호 등촌칼국수가 진짜 진또로 맛도리
방이점보다 맛있음
천호에서 잠옷바지 입고 자전거 타거나 당근하는 보안관을 보시면 저한테 알려주세요ㅎㅎ

 

무튼.. 

일단은 페이지네이션 고치고 나서 문제를 해결하려고 지금 페이지네이션 고치는데 나 이거 3시까지 할 수 있을까? .. 


기존에는 tabName으로 주차장 검색과 주차장 길찾기에서 

불러오게 했지만, 주차장 검색을 기본 로드로 해놓고 

검색 버튼을 누르면 바로 리스트가 출력되는 방법으로 바꾸는 과정을 거쳤다.

 

 

 

그리고 나서

   // 페이지네이션을 생성하는 함수
function displayPagination(totalItems) {
    const totalPages = Math.ceil(totalItems / itemsPerPage); // 전체 페이지 수 계산
    const paginationContainer = document.getElementById('pagination');
    paginationContainer.innerHTML = ''; // 기존 버튼 초기화

    // 페이지 번호 버튼 생성
    for (let i = 1; i <= totalPages; i++) {
        const pageButton = document.createElement('button');
        pageButton.innerText = i;
        pageButton.addEventListener('click', () => {
            currentPage = i; // 버튼이 클릭된 페이지 번호로 현재 페이지 변경
            loadPageData(filteredParkingData); // 현재 필터링된 데이터를 기반으로 페이지 로드
        });

        // 현재 페이지인 경우 버튼 강조
        if (i === currentPage) {
            pageButton.classList.add('active');
        }

        paginationContainer.appendChild(pageButton);
    }
}

한 리스트에 4개가 출력이 되고 있고, 4개 이상으로 넘어가면 하단에 숫자로 페이지네이션이 생기도록 했다.

 

    // 페이지 데이터 로드
function loadPageData(data) {
    console.log("loadPageData 호출됨"); // 함수 호출 로그


    const tabContent = document.getElementById('search'); // 검색 탭의 요소를 지정
    const parkingList = tabContent.querySelector('.parking-list');
    parkingList.innerHTML = ''; // 기존 데이터를 지우기
    
    // 페이지 시작 및 끝 인덱스 계산
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    const pageData = data.slice(startIndex, endIndex);
    console.log("페이지 데이터:", pageData); // 전달되는 데이터 확인
    renderParkingList(pageData);
    displayPagination(data.length);
}

 

 

 

짠...
초보는 이런 자잘 기능 고치는 것도 어려워요!!!

앞으로 1시간 동안은 팝업창에 불러오는 상세 정보가 일치되지 않는 문제를 고치고 6탄으로 돌아오겠습니다...

 

 

-
예슬 넋두리
상세정보 뜨는거랑, 길찾기랑, 정보 16000개 온전히 불러오기만 하면 진짜 88퍼센트 완료인데요

가장 어려워 보이는 거 3개 남았어요 !
그럼에도 해야겠죠,,? 할 수 있죠?
점심에 샐러드 먹고 과자 사먹는 사람 나야 나..
이럴거면 밥을 먹지 그래?!!!!