[프로젝트 남은 TODOs]
- 조건별 추천검색어에서 '카페'라는 단어가 포함되어있다면 파싱하여 제외시켜 검색시키기
- 카페 좋아요
- 카페 스크랩
- 사용자 위치기반 카페와의 거리 표시(구현 x, 기능에서 제외)
- 검색창 - 메인페이지 하단
- 추천카페, 인기카페, 신규카페
- 제휴문의 (관리자에게 이메일보내기 기능) 구글폼 사용
- 마이페이지 (내가쓴글, 내가한 질문, 나의 댓글, 내가찜한카페 count 가져오기)
- 필터 다중조건 (다중선택)
- 필터 자잘한 오류 수정
- 선택 필터 색상 css 처리
해결 방법 정리하기
카페 searchList.jsp에서 카페리스트를 보여주는 JSTL 기능 삭제(주석처리) 후 ajax로 카페리스트 세팅 / view more -> pagination으로 원복
view more / pagination 문제 해결
- pagination을 view more 방식으로 변경 후 view more 기능을 구현 중 자꾸 1페이지에서 2페이지로 넘어갈때는 view more 방식이 안되는 문제가 있었다 (2페이지부터는 view more 기능이 잘 동작했다). 카페검색이라는 페이지에 최초 접속 시에 ajax로 카페리스팅을 하는 것 같다는 의심이 들어서 chat gpt 한테 페이지 접속시 바로 ajax가 실행 할 수 있는 방법을 물어봤고, window.onload라는 함수를 사용하는 방법이 있었다. 잘 실행이 되는지 alert창 하나 넣어서 확인도 해보니 잘 됨! 처음에 계획 했던대로 pagination 방법으로 원복하여 구현 할 수 있었다.
// 페이지 접속 시 최초 실행(onload) 함수
window.onload = function() {
// 페이지가 완전히 로드되면 이 함수가 실행
alert('페이지가 로드되었습니다!');
keyword = '${keyword}';
loadFilteredCafes(keyword, currentPage); // 카페검색 최초 리스팅
};
// 필터된 카페들을 불러오는 함수
function loadFilteredCafes(keyword, currentPage){
$.ajax({
url: "/usr/findcafe/filterCafes", // 요청할 URL
type: "POST", // POST 방식으로 요청
contentType: "application/json", // 요청 데이터의 타입
data: JSON.stringify({ // JSON 형태로 데이터 전송
keyword: keyword, // 키워드 전송
page: currentPage // 페이지 번호 전송
}),
success: function(dataMap) { // 요청이 성공했을 때의 콜백 함수
totalPages = Math.ceil(dataMap.cafesTotalCount / 5); // 전체 페이지 수 계산
updatePagination(currentPage, totalPages); // 페이지네이션 업데이트
updateCafeList(dataMap.cafesCurrentList); // 카페 리스트 업데이트
},
error: function(xhr, status, error) { // 요청이 실패했을 때의 콜백 함수
console.error("Ajax request failed:", status, error); // 에러 로그 출력
}
});
}function updatePagination(currentPage, totalPages) {
// 페이지네이션을 표시할 HTML 요소를 가져온다
var paginationElement = $(".pagination");
// 이전에 표시된 페이지네이션을 초기화
paginationElement.empty();
var paginationHTML = '';
// 페이지 번호 생성
for (var i = 1; i <= totalPages; i++) {
var activeClass = (i === currentPage) ? 'btn-active' : '';
paginationHTML += '<a class="btn btn-circle btn-ghost btn-xs ' + activeClass + '" href="?page=' + i + '">' + i + '</a>';
}
$('.pagination').html(paginationHTML); // 페이지네이션 업데이트
}AJAX로 받아온 데이터를 JSTL에서 사용하는 것은 불가능하다
- pagination을 해결 하고나니, 갑자기 그동안 잘 가져왔던 카페데이터가 제대로 보이지 않는 문제 발생. 나는 그동안 카페 목록을 jstl을 사용하여 보여주었었다.
ajax로 받아온 데이터를 jstl에서 사용하는 것은 불가능하다.. 서버의 작업 순서가 JAVA>JSTL>HTML>JavaScript 이기 때문이라고 한다. ☞ 참고
처음엔 내가 사용한 아래 코드를 .search-result부터 전부 주석처리했고,
<!-- 검색결과 -->
<section class="search-result" id="search-result">
<!-- <c:forEach var="cafe" items="${cafes}">
<a href="cafeDetail?id=${cafe.id}" class="linkbox１">
<div class="content-info-box" style="margin-bottom: 50px">
<div class="cafe-img-box">
<img src="${cafe.cafeImgUrl1}" alt="카페 이미지" />
</div>
<div class="name-address">
<div class="cafe-name">${cafe.name}</div>
<p class="cafe-address">${cafe.address}</p>
</div>
<div class="like-count">
<span class="material-symbols-outlined"> favorite </span>
<div class="like-count-num">${cafe.cafeScrapCount}</div>
</div>
<div class="review-count">
<div class="title-review">리뷰</div>
<div class="review-count-num">${cafe.reviewCount }</div>
</div>
<div class="hashtag">${cafe.hashtag}</div>
</div>
</a>
</c:forEach> -->
</section>- 아래처럼 자바스크립트로 카페리스트 업데이트하는 함수 사용하여 ajax 처리를 했더니, 아ㅏㅏㅏ무 것도 보이지가 않네.....? 내가 .search-result부터 전부 주석처리한 것이 문제 였었고 .search-result는 주석처리 하지 않고 틀은 유지해놨어야 함 (updateCafeList(cafeList) 함수에서도 .search-result 요소를 선택하여 불러오고있었는데 그것 마저 삭제하니 당연 안보이는였던거지)
// 카페 리스트 업데이트 함수
function updateCafeList(cafeList) {
var cafeListElement = $(".linkbox１"); // 카페 리스트 요소 선택
var searchResult = $("#search-result"); // 검색 결과 요소 선택
cafeListElement.empty(); // 카페 리스트 요소 비우기
cafeList.forEach(function(cafe) { // 각 카페에 대해 반복
var cafeItem = $(`
<div class="cafe-item">
<a href="cafeDetail?id=`+cafe.id+`" class="linkbox１">
<div class="content-info-box" style="margin-bottom: 50px">
<div class="cafe-img-box">
<img src="`+cafe.cafeImgUrl1+`" alt="카페 이미지" />
</div>
<div class="name-address">
<div class="cafe-name">`+cafe.name+`</div>
<p class="cafe-address">`+cafe.address+`</p>
</div>
<div class="like-count">
<span class="material-symbols-outlined"> favorite </span>
<div class="like-count-num">`+cafe.cafeScrapCount+`</div>
</div>
<div class="review-count">
<div class="title-review">리뷰</div>
<div class="review-count-num">`+cafe.reviewCount+`</div>
</div>
<div class="show-distance">
<div class="num-km-group">
<div class="km">km</div>
<div class="distance-num">1.8</div>
</div>
</div>
<div class="hashtag">`+cafe.hashtag+`</div>
</div>
</a>
</div>
`); // end var cafeItem
searchResult.append(cafeItem); // 카페 리스트에 카페 아이템 추가
});- 이렇게 삽질을 해가면서 카페 검색결과(필터)구현까지 아주 조금씩 서서히 가까워지는 중..
hello world