검색 뷰 개선

부트스트랩

• https://getbootstrap.com/docs/4.4/components/pagination/

                    <li class="page-item" th:classappend="${!studyPage.hasPrevious()}? disabled">
                        <a th:href="@{'/search/study?keyword=' + ${keyword} + '&sort=' + ${sortProperty} + ',desc&page=' + ${studyPage.getNumber() - 1}}"
                           class="page-link" tabindex="-1" aria-disabled="true">
                            Previous
                        </a>
                    </li>

studyPage.hasPrevious() 이전 페이지가 있느냐 없느냐를 알려줌, 없는 경우에 disabled class를 추가하는 것이다. 이전 페이지로 가는 링크는 다음과 같이 만들 수 있다.

• ${keyword} : 현재 화면에 전달받은 keyword
• ${sortProperty} : model로 전달 받을 것, 이 프로퍼티를 넣어줘야 함.
• desc : 정렬 방법
• ${studyPage.getNumber() : 현재 페이지 넘버를 리턴 받음, 현재 페이지보다 1개 작은 것으로 가면 이전 페이지로 감.
• next page도 마찬가지!

       <li class="page-item" th:classappend="${!studyPage.hasNext()}? disabled">
                        <a th:href="@{'/search/study?keyword=' + ${keyword} + '&sort=' + ${sortProperty} + ',desc&page=' + ${studyPage.getNumber() + 1}}"
                           class="page-link">
                            Next
                        </a>
                    </li>

studyPage에 hasNext() 라는 메서드가 있다. 다음 페이지가 있느냐 없느냐 알려줌. 다음 페이지가 없으면 disable 추가해준다.

페이지 개수를 돌아야 한다. th:each (루프 사용!) 0부터 페이지 개수만큼! 타임리프에 numbers 라는 유틸리티가 있음. numbers에 시퀀스를 사용하여 0부터 studyPage.getTotalPages() - 1 까지 루프를 돌면서 만들자. i 라는 값이 현재 studyPage.getNumber() 넘버와 같을 때는 active라는 클래스를 추가하여 선택되어짐을 표현한다.

정렬 조건 추가

• bootstrap dropdown 이용하기
• 스터디 공개 일시
• 멤버수

sortProperty 을 받아서 이 값이 publishedDateTime 이면 dropdown item 이 활성화된 상태로 보여준다.

서버 to do list

MainController.java

	@GetMapping("/search/study")
	public String searchStudy(String keyword, Model model, @PageableDefault(size = 9, sort = "publishedDateTime",
			direction = Sort.Direction.DESC)Pageable pageable) {
		Page<Study> studyPage  = studyRepository.findByKeyword(keyword, pageable);
		model.addAttribute("studyPage", studyPage );
		model.addAttribute("keyword",keyword); //화면에서 어떤 키워드로 조회했는지 알아야 하므로 keyword 넣어줌
		model.addAttribute("sortProperty", pageable.getSort().toString().contains("publishedDateTime") ? "publishedDateTime" :
				"memberCount");
		return "search";
	}

model.addAttribute("sortProperty" .. ) 를 추가해준다.

Sort를 String으로 내보내고, publishedDateTime 으로 되어있으면 Sort은 publish data time으로 한 것이고 이게 없으면 memberCount 로 한 것으로 ..

memberCount를 Study.java 에다가 만들기

쿼리를 멤버까지 하고 있는데 그 쿼리 개수를 조금이라도 줄이기 위해
멤버 목록을 가져오는 게 아니라 멤버 카운트를 가져오게 할 것이다. 멤버 카운트는 멤버들이 추가되거나 삭제 될때마다 ++1, --1 를 해주면 된다.

• null 값이여서 생성이 안되어서 수기로 설정해줬음.

• 검색 정렬에 따라 달라진다.
• 다른 유저로 알고리즘 뿌셔 스터디 참가를 누른 결과 1명 -> 2명으로 바귄 모습을 확인할 수 있다.

키워드 하이라이팅

• mark.js
• https://markjs.io/

npm install mark.js --save

• mark 라는 function 정의하고 호출함.
• keyword tag가 붙어있는 곳에서 값을 가져온다. 이 키워드에 해당하는 것을 하이라이팅을 해주는 것
• options은 하이라이팅에 관한 옵션, 150 초만큼 animate 할 것
• context 클래스가 있는 부분에 하이라이팅 함. search.html에서 기본적으로 card-title에 적용하고 있다.

More

• 하이라이팅 색깔 변경할 수 있!
• 정렬조건 더 여러개로 할 수 있!
• 쿼리를 더욱 극대화해야 하는 상황일 수도 있! (counting 하는 query 때문에 쿼리가 추가 발생함) -> 전체 개수를 가져올 때 발생하게 되는데 .. 이 전체 개수가 자주 변경되지 않으면 어딘가 캐싱을 해놓고 , totalSize가 있기 때문에 countquery를 보낼 필요 없다.

출처 : 인프런 백기선님의 스프링과 JPA 기반 웹 애플리케이션 개발