게시판 - 내 정보 화면 구현 2

질문과 답변에 관해서 페이징을 구현

• 내가 적은 질문의 리스트를 받을려면 필요한 것
  • findByAuthorId() -> question에 author의 id를 가지고있기 때문에 가능.
• Page에 표시할 데이터 수는 5개씩으로 제한
  • 10개를 걸게되면 답변쪽이 너무 밀리는 것을 확인하여 5개로 제한을 걸었다.

• 내 정보에서 보여주는 것들
  • 내가 작성한 질문과 답변 페이징으로 넣어서 받기
  • 페이징이 2개기 때문에 value이름을 page,page2로 진행
    • 이걸 어떻게 처리해야하나 검색을 해봤는데 value 이름을 바꿔주면 가능한 부분이였다.

@PreAuthorize("isAuthenticated()")
@GetMapping("/me")
public String me(Model model, @RequestParam(value = "page", defaultValue = "0") int page,
                 @RequestParam(value = "page2", defaultValue = "0") int page2, Principal principal) {
    SiteUser user = userService.getUser(principal.getName());

    Page<Question> paging = questionService.getUserQuestionList(page, user.getId());
    Page<Answer> answerPage = answerService.getUserAnswerList(page2, user.getId());
    model.addAttribute("SiteUser", user);
    model.addAttribute("paging", paging);
    model.addAttribute("answerPaging", answerPage);
    return "member_me";
}

내가 작성한 질문에 대해서 찾아오기 위해서 어디서 가져와야 할까 생각을 해보니 Questionrepository에 authorid를 통해서 리스트를 받아서 페이징 진행.

Page<Question> findByAuthorId(Pageable pageable,Long id);

내가 작성한 질문 페이징 처리 html 추가

    <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(0, paging.totalPages-1)}"
                th:if="${page >= paging.number-5 and page <= paging.number+5}"
                th:classappend="${page == paging.number} ? 'active'"
                class="page-item">
                <a th:text="${page}" class="page-link" th:href="@{|?page=${page}|}"></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>

답변 부분도 추가 진행

• 답변 부분에 있는 question을 통해서 question/detail에 접근할 수 있도록 진행
• 게시판 페이징 기능과 같은 형식
• 내 정보 페이지에는 페이징 처리가 되는 정보가 2가지기 때문에 page2해서 진행.

    <!--
    내가 작성한 답변들 리스트 나오게.
    -->
    <h3 class="text-center">내가 작성한 답변들</h3>
    <table class="table">
        <thead class="table-dark">
        <tr class="text-center">
            <th style="width:50%">내용</th>
            <th>글쓴이</th>
            <th>작성일시</th>
        </tr>
        </thead>
        <tbody>
        <tr class="text-center" th:each="answer, loop:${answerPaging}">
            <td class="text-start">
                <a th:href="@{|/question/detail/${answer.question.id}|}" th:utext="${answer.content}"></a>
            </td>
            <td><span th:text="${answer.author.username}"></span></td>
            <td th:text="${#temporals.format(answer.createDate, 'yyyy-MM-dd HH:mm')}"></td>
        </tr>
        </tbody>
    </table>
    <!-- 페이징처리 시작 -->
    <div th:if="${!answerPaging.isEmpty()}">
        <ul class="pagination justify-content-center">
            <li class="page-item" th:classappend="${!answerPaging.hasPrevious} ? 'disabled'">
                <a class="page-link"
                   th:href="@{|?page2=${answerPaging.number-1}|}">
                    <span>이전</span>
                </a>
            </li>
            <li th:each="page2: ${#numbers.sequence(0, answerPaging.totalPages-1)}"
                th:if="${page2 >= answerPaging.number-5 and page2 <= answerPaging.number+5}"
                th:classappend="${page2 == answerPaging.number} ? 'active'"
                class="page-item">
                <a th:text="${page2}" class="page-link" th:href="@{|?page2=${page2}|}"></a>
            </li>
            <li class="page-item" th:classappend="${!answerPaging.hasNext} ? 'disabled'">
                <a class="page-link" th:href="@{|?page2=${answerPaging.number+1}|}">
                    <span>다음</span>
                </a>
            </li>
        </ul>
    </div>
    <!-- 페이징처리 끝 -->
</div>

이렇게 내 정보 화면에서 간단한 내 정보와 내가한 질문 및 답변들을 페이징 형식으로 나오게 변경하였다.