📅 2024-05-06
Crema 프로젝트(개인)
페이지네이션 에러 트러블슈팅
'카페찾기' 리스트에서,
- 필터로 키워드 검색 후 결과 리스트에서 페이지 이동시 페이지네이션 작동 ⭕
- 검색창에서 키워드 검색 후 결과리스트에서 페이지 이동 시 페이지네이션 풀림 ❌
구조파악
검색창과 필터의 차이점
검색창을 통해 들어온 검색어 키워드는 String으로 받아서 Array에 담아서 List로 형변환을 함
- 페이지네이션 풀림
필터를 통해 들어온 키워드는 Array에 담아서 List로 형변환
- 페이지네이션 정상 작동
검색창을 통해 들어오는 키워드값도 필터기능처럼 Array로 받을 수 있게 변경하기로 함.
var selectedKeywords = []; 지역변수였던 걸 전역변수 처리
keyword = "";
selectedKeywords.push("");해당 전역변수가 사용되기 전에 초기화 한번 해줘야 함
selectedKeywords = []; 안하면 검색창으로 검색 시 배열에 ["", "아늑한"]<- 이렇게 담김....
해주면 ["아늑한"] <- 이렇게 제대로 잘 담김.
검색창을 구현하는 html에서도 #keyword를 배열에 담아서 loadFilteredCafes 함수 실행
BEFORE
loadFilteredCafes( $("#keyword").val() , 1 ); -> loadFilteredCafes("아늑한", 1);AFTER
loadFilteredCafes( [$("#keyword").val()] , 1 ); -> loadFilteredCafes(["아늑한"], 1);검색창에서 키워드 검색 후 결과리스트에서 페이지 이동 시 페이지네이션 풀리는 문제는 해결.
이제 필터버튼이 먹통..
검색창 오류 해결을 위해 selectedKeywords 배열변수를 전역변수 뺀 이후
필터버튼을 눌러도 해당 버튼의 키워드의 카페 리스팅이 되지 않고 전체리스트만 보여주는 문제 발생.
필터버튼이 안됐을 때의 로직
window.onload = function() {
keyword = '${keyword}';
selectedKeywords.push(keyword); => selectedKeywords = [""] 전체검색
loadFilteredCafes(selectedKeywords, currentPage); // 카페검색 최초 리스팅
};- 카페찾기 페이지로 초기 접근했을 때 배열
selectedKeywords = [""]- 필터로 "유성구" 버튼 선택
selectedKeywords = ["", "유성구"]2번 모양대로 배열에 필터의 키워드가 담기면서 0번 인덱스의 ""값(전체보기)부터 보여지니 필터구현이 되지 않는 것처럼 보임.
if문 사용으로 문제를 해결
onload 실행되는 케이스
1. 메인 검색값 있을 때 : keyword = "아늑한"
2. '카페찾기' 바로 접근 할 때 : keyword = ""
window.onload = function() {
keyword = '${keyword}';
if(keyword != ""){ // 메인 검색창에 검색값이 있을 경우
selectedKeywords.push(keyword);
}
loadFilteredCafes(selectedKeywords, currentPage); // 카페검색 최초 리스팅
};- 카페찾기 페이지로 초기 접근했을 때 배열
selectedKeywords = []
// 전역변수 그대로 빈값으로 조회 -> 컨트롤러에서 isEmpty() 로 전체검색 되도록 세팅해놓음 (아래코드 참고)if (selectedKeywords.isEmpty()) {
cafesCount = cafeService.getCafesCount();
cafesList = cafeService.getForPrintCafes(itemsInAPage, page);
// 키워드가 선택 되지 않았을 경우에 대한 전체카페 리스팅
} else {
cafesCount = cafeService.getCafesCountKeyword(selectedKeywords);
cafesList = cafeService.getForPrintCafesKeyword(itemsInAPage, page, selectedKeywords);
// 키워드가 선택 되었을 경우에 대한 키워드별 카페 리스팅
}- 필터로 "유성구" 버튼 선택
selectedKeywords = ["유성구"]결론
- onload 함수 if문의 역할 ->
카페찾기로 접근 했을 때 selectedKeywords = [""]로 세팅이 되지 않도록 하기 위한 것.
왜? 유성구 필터 눌렀을 때 selectedKeywords = ["", "유성구"] 처럼 담기면 필터가 먹히지 않고 전체리스트만 보여주기 때문.
hello world