[Spring Boot] chatGPT를 활용한 AI 사이트 (4) - 기능 추가(페이징)

페이징 기능을 추가해서 포스팅 하려합니다.

 

페이징은 구글링 해보면 정말 많은 방법이 있는데 누군가에게 도움이 되길 바랍니다.

 

BoardRepository

@Query("SELECT b FROM BoardEntity b WHERE b.member.email = :email")
Page<BoardEntity> getMemberList(@Param("email") String email, Pageable pageable);

 

타입을 Page객체로 하고 파라미터에 로그인한 회원의 이메일과 Pageable을 추가합니다.

 

Pageable은Spring Data JPA 및 Spring Data MongoDB와 함께 사용하면, 데이터베이스에서 데이터를 쉽게 페이징하고 정렬할 수 있으며, 컨트롤러에서 이 정보를 받아 웹 페이지에 표시하는 데 사용할 수 있습니다.

---

BoardService

public Page<BoardEntity> getList1(String email,int page){
        Pageable pageable = PageRequest.of(page, 10);
        return boardRepository.getMemberList(email,pageable);
    }

 

getList1 메서드는 Page타입의 게시물 BoardEntity 목록을 반환하며, 페이지 번호와 페이지당 글 개수(코드에선 10개)를 기반으로 페이징 정보를 생성합니다.

---

BoardController

@GetMapping("/myPage")
public String list(HttpSession session, Model model, 
                   @RequestParam(value="page", defaultValue="0")int page) {

        Member member = (Member) session.getAttribute("SNSmember");
        boolean isLog = member == null ? false : true;
        Page<BoardEntity> paging = boardService.getList1(member.getEmail(),page);
        model.addAttribute("isLoggedIn", isLog);
        model.addAttribute("member",member);
        model.addAttribute("paging",paging);
        return "board/mypage";
    }

사용자의 이메일 주소와 페이지 번호를 전달하여 해당 사용자의 게시물 목록을 가져옵니다. 이 목록은 페이지네이션된 형태로 반환되어 페이지 정보와 함께 paging 변수에 할당되면 model에 담습니다. 

---

view - Thymeleaf

<!-- 페이징처리 시작 -->
<div th:if="${!paging.isEmpty()}">
	<ul class="pagination justify-content-center">
    	<li class="page-item" th:classappend="${!paging.hasPrevious} ? 'disabled'">
        	<a class="page-link" th:href="@{|?page=${paging.number-1}|}">
            	<span>이전</span>
            </a>
         </li>
         <li th:each="page: ${#numbers.sequence(1, paging.totalPages)}"
            th:if="${page >= paging.number-4 and page <= paging.number+4}"
            th:classappend="${page == paging.number + 1} ? 'active'"
            class="page-item">
            <a th:text="${page}" class="page-link" th:href="@{|?page=${page - 1}|}"></a>
         </li>
         <li class="page-item" th:classappend="${!paging.hasNext} ? 'disabled'">
            <a class="page-link" th:href="@{|?page=${paging.number+1}|}">
                <span>다음</span>
            </a>
         </li>
    </ul>
</div>
<!-- 페이징처리 끝 -->

Thymeleaf가 처음이신 분은 복잡해서 어렵게 보일 텐데 하나 하나 뜯어가며 설명하겠습니다.

 

<div th:if="${!paging.isEmpty()}"> 

• 페이징 처리 컴포넌트를 표시하기 전에 페이지 목록이 비어 있는지 확인합니다.
• 페이지 목록이 비어있지 않다면 (데이터가 존재하는 경우), 페이징 컴포넌트를 표시합니다.

<ul class="pagination justify-content-center">

• 페이지 번호 목록을 나타내는 ul 요소를 생성합니다. 

<li class="page-item" th:classappend="${!paging.hasPrevious} ? 'disabled'">

• 이전 페이지로 이동하는 버튼을 나타냅니다.
• th:classappend를 사용하여 이전 페이지가 없을 때(disabled) 버튼이 비활성화되도록 합니다.
• paging.hasPrevious는 이전 페이지가 있는지 여부를 나타내는 Thymeleaf 표현식입니다.

<a class="page-link" th:href="@{|?page=${paging.number-1}|}">

• 이전 페이지로 이동하는 링크를 생성합니다.
• th:href 속성을 사용하여 이전 페이지 번호로 이동하도록 링크를 설정합니다.

<li th:each="page: ${#numbers.sequence(1, paging.totalPages)}"

• 요소는 각 페이지 번호를 나타내며, th:each를 사용하여 페이지 목록을 순회합니다.
• #numbers.sequence(1, paging.totalPages)는 1부터 paging.totalPages까지의 숫자 시퀀스를 생성합니다.

th:if="${page >= paging.number-4 and page <= paging.number+4}"

• 현재 페이지 번호 주변에만 표시될 페이지 번호를 필터링하기 위해 th:if 조건을 사용합니다.
• 현재 페이지 번호 주변 4개의 페이지 번호만 표시됩니다.

th:classappend="${page == paging.number + 1} ? 'active'"

• 현재 페이지 번호는 "active" 클래스가 추가되어 활성화된 스타일로 표시됩니다.\
• paging.number에 +1을 함으로써 웹화면에 출력된 페이지 번호가 1부터 시작하게 합니다.

<a th:text="${page}" class="page-link" th:href="@{|?page=${page - 1}|}">

• 각 페이지 번호를 나타내는 텍스트를 설정하고 해당 페이지로 이동하는 링크를 생성합니다. 각 페이지 번호는 page 변수로부터 가져오며, th:href를 사용하여 해당 페이지 번호로 이동하도록 링크를 설정합니다.
• 화면에선 1부터 표시되지만 index는 0부터 시작하기에 -1을 함으로써 페이지 번호를 올바르게 전달합니다.
• 화면과 서버가 인식하는 페이지 번호를 다르게 하기 위함입니다.

<li class="page-item" th:classappend="${!paging.hasNext} ? 'disabled'">

• 다음 페이지로 이동하는 버튼을 나타냅니다. th:classappend를 사용하여 다음 페이지가 없을 때(disabled) 버튼이 비활성화되도록 합니다.
• paging.hasNext는 다음 페이지가 있는지 여부를 나타내는 Thymeleaf 표현식입니다.

<a class="page-link" th:href="@{|?page=${paging.number+1}|}">

• 다음 페이지로 이동하는 링크를 생성합니다. th:href 속성을 사용하여 다음 페이지 번호로 이동하도록 링크를 설정합니다.
• 다음 페이지 번호는 paging.number + 1로 계산됩니다.

이렇게 페이징 처리까지 보셨습니다. 추후 또 업데이트 되는대로 포스팅 하겠습니다.