[Spring][258] 더보기(No Offset) 기능 구현

[Hibernate] select b1_0.book_id,b1_0.apply_id,b1_0.book_author,b1_0.book_category_id, b1_0.book_donation_event_id,b1_0.book_name,b1_0.book_publish, b1_0.rent_id,b1_0.book_status from book b1_0 where b1_0.book_name like ? escape '!' order by b1_0.book_id limit ?,?

// 모듈화된 JS let currentPage = 0; // 페이지 로딩 시 $(document).ready(function() { window.goToNextPage = function() { // 서버에 다음 페이지 데이터 요청 $.ajax({ type: 'GET', url: '/search/loadMore', // 엔드포인트 변경 data: { bookCategoryName: $('#bookCategoryId').val(), keyword: $('#keyword').val(), page: currentPage + 1 // 다음 페이지로 이동 }, dataType: 'json', // 추가 success: function(data) { console.log(data); // books 배열에 접근하도록 수정 data[0].bookResponseDtos.forEach(book => { let bookHtml = `<tr> <td><input class="form-control" type="text" value="${book.bookName}" name="userId" readonly/></td> <td><input class="form-control" type="text" value="${book.bookAuthor}" name="username" readonly/></td> <td><input class="form-control" type="text" value="${book.bookPublish}" name="role" readonly/></td> <td><input class="form-control" type="text" value="${book.bookStatus}" name="role" readonly/></td> <td> <button type="button" class="btn btn-success rent-button" data-book-id="${book.bookId}">대출하기</button> <button type="button" class="btn btn-primary reserve-button" data-book-id="${book.bookId}">예약하기</button> </td> </tr>`; // 동적으로 생성된 HTML을 현재 테이블에 추가 $('#load-more-test').append(bookHtml); }); // 현재 페이지 업데이트 currentPageThymeleaf++; // 서버에서 받은 다음 페이지 값으로 업데이트 currentPage = currentPageThymeleaf; }, error: function(xhr, status, error) { // 오류 처리 로직 console.error(error); } }); } });

@Controller @RequiredArgsConstructor public class SearchMixedController { private final SearchService searchService; private final AdminCategoriesService adminCategoriesService; ... // 더보기 기능 구현 추가 페이지 로드 @GetMapping("/search/loadMore") @ResponseBody public ResponseEntity<List<BookResponseLoadMoreDto>> loadMoreResults( @RequestParam(value = "bookCategoryName", required = false) String bookCategoryName, @RequestParam(value = "keyword", required = false) String keyword, @RequestParam(value = "page", defaultValue = "0", required = false) Integer page) { long startTime = System.currentTimeMillis(); Slice<BookResponseDto> bookResponseDtoLoadMore = searchService.getMoreBooksByCategoryOrKeyword(bookCategoryName, keyword, page); long endTime = System.currentTimeMillis(); long durationTimeSec = endTime - startTime; System.out.println(durationTimeSec + "m/s"); List<BookResponseLoadMoreDto> responseList = Collections.singletonList( new BookResponseLoadMoreDto(bookResponseDtoLoadMore.getContent()) ); return ResponseEntity.ok(responseList); } ... }

@Service @RequiredArgsConstructor public class SearchService { private final BookRepository bookRepository; private final BookCategoryRepository bookCategoryRepository; private final CustomBookRepository customBookRepository; ... //더보기용 서비스 public Slice<BookResponseDto> getMoreBooksByCategoryOrKeyword(String bookCategoryName, String keyword, int page) { QBook qBook = QBook.book; BooleanBuilder builder = new BooleanBuilder(); List<BookCategory> bookCategories = new ArrayList<>(); // 초기화 if (bookCategoryName != null) { BookCategory bookCategory = bookCategoryRepository.findByBookCategoryName(bookCategoryName); if (bookCategory != null) { // null 체크 추가 bookCategories = saveAllCategories(bookCategory); } } if (keyword != null) builder.and(qBook.bookName.contains(keyword)); if (!bookCategories.isEmpty()) // 리스트가 비어있는지 확인 builder.and(qBook.bookCategory.in(bookCategories)); Sort sort = Sort.by(Sort.Direction.ASC, "bookId"); Pageable pageable = PageRequest.of(page, 20, sort); // Slice로 추가 로드 데이터 가져오기 Slice<BookResponseDto> bookList = customBookRepository.findAllSliceBooks(builder, pageable).map(BookResponseDto::new); System.out.println(bookList.hasNext()); return bookList; } ... }

@Repository public interface CustomBookRepository { Slice<Book> findAllSliceBooks(BooleanBuilder builder, Pageable pageable); }

@Repository public class CustomBookRepositoryImpl implements CustomBookRepository{ @Autowired private JPAQueryFactory queryFactory; @Override public Slice<Book> findAllSliceBooks(BooleanBuilder builder, Pageable pageable) { QBook book = QBook.book; List<Book> results = queryFactory.selectFrom(book) .where(builder) .limit(pageable.getPageSize()+1) .orderBy(book.bookId.asc()) .offset(pageable.getOffset()) .fetch(); boolean hasNext = false; if(results.size() > pageable.getPageSize()){ results.remove(results.size()-1); hasNext = true; } return new SliceImpl<>(results,pageable,hasNext); } }

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <!-- 헤드 레이아웃 적용 --> <head th:insert="~{layout :: head}"></head> <head> <!-- 나의 도서 대여 및 예약 관련 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="/js/users/bookSearchLM1.js"></script> </head> <body> <div th:replace="~{layout :: nav}"></div> <!-- 헤더 레이아웃 적용 --> <div th:replace="~{layout :: header}"></div> <div class="index-contents"> <!-- 컨텐츠(여기부터 삽입 됩니다.) --> ... <div class="mb-3"> <label class="form-label" for="keyword">book's Keyword</label> <input class="form-control" type="text" placeholder="Enter bookTitle" name="keyword" id="keyword"/> ... <table class="table table-striped"> <thead> <tr> <th>Book Name</th> <th>Book Author</th> <th>Published Year</th> <th>Status</th> </tr> </thead> <tbody> <tr th:each="book : ${books}"> <td><input class="form-control" type="text" th:value="${book.bookName}" name="userId" readonly/></td> ... </tbody> <tbody id="load-more-test"> <!-- 더보기로 로드된 항목이 이곳에 추가됩니다. --> </tbody> </table> <!-- Add more rows here --> <!-- Pagination links --> <div id="paging"> <button id="load-more-button" th:if="${hasNext}" onclick="goToNextPage()">더보기</button> </div> <!-- 컨텐츠(여기까지 삽입 됩니다.) --> </div> <!-- 푸터 레이아웃 적용 --> <div th:replace="~{layout :: footer}"></div> <!-- 페이지 번호를 저장하는 input --> <script th:inline="javascript"> /*<![CDATA[*/ let currentPageThymeleaf = [[${currentPage}]]; /*]]>*/ </script> </body> </html>