728x90
참고 링크 : https://wikidocs.net/book/7601
오라클DB와 intelliJ로 작업하였습니다
이번에는 질문 목록에 "해당 질문에 달린 답변 개수"를 표시할 수 있는 기능을 추가해 보자.
코드의 분량은 많지 않지만, 게시판 서비스를 더욱 서비스답게 만들어 주는 기능이다.
답변 개수는 다음처럼 게시물 제목 바로 오른쪽에 표시하자.
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.w3.org/1999/xhtml"
layout:decorate="~{layout}">
<!--layout:decorate 속성 : 템플릿의 레이아웃(부모템플릿)으로 사용할 템플릿을 설정-->
<div layout:fragment="content" class="container my-3"> <!--<th:block layout:fragment="content"></th:block>-->
<table class="table">
<thead class="table-dark">
<tr>
<th>번호</th>
<th>제목</th>
<th>작성일시</th>
</tr>
</thead>
<tbody>
<tr th:each="question, loop : ${paging}">
<td th:text="${paging.getTotalElements - (paging.number * paging.size) - loop.index}"></td>
<!--<td th:text="${loop.count}"></td>테이블항목에 번호추가-->
<td>
<a th:href="@{|/question/detail/${question.id}|}" th:text="${question.subject}"></a>
<!--해당질문에 달린답변개수 표시-->
<span class="text-danger small ms-2"
th:if="${#lists.size(question.answerList) > 0}"
th:text="${#lists.size(question.answerList)}"></span>
</td>
<!--날짜객체 날짜포맷에맞게 변환-->
<td th:text="${#dates.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></td>
</tr>
</tbody>
</table>
<!-- 페이징처리 시작 -->
<div th:if="${!paging.isEmpty()}"><!--paging.isEmpty:페이지존재여부(게시물있으면 false,없으면 true)-->
<ul class="pagination justify-content-center">
<li class="page-item" th:classappend="${!paging.hasPrevious} ? 'disabled'">
<!-- !paging.hasPrevious - disabled : 이전페이지가 없으면 비활성화-->
<a class="page-link" th:href="@{|?page=${paging.number-1}|}">
<!--이전페이지 링크-->
<span>이전</span>
</a>
</li>
<!--th:each :페이지 리스트 루프--> <!--#numbers.sequence(시작, 끝)-->
<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">
<!--page == paging.number : 현재페이지와 같으면 active 적용-->
<a th:text="${page}" class="page-link" th:href="@{|?page=${page}|}"></a>
</li>
<li class="page-item" th:classappend="${!paging.hasNext} ? 'disabled'">
<!-- !paging.hasNext - disabled : 다음페이지 없으면 비활성화-->
<a class="page-link" th:href="@{|?page=${paging.number+1}|}">
<!--다음페이지 링크-->
<span>다음</span>
</a>
</li>
</ul>
</div>
<!-- 페이징처리 끝 -->
<a th:href="@{/question/create}" class="btn btn-primary">질문 등록하기</a> <!--질문버튼추가 부트스트랩으로 버튼디자인!-->
</div>
</html>th:if="${#lists.size(question.answerList) > 0}"로 답변이 있는지 조사하고,
th:text="${#lists.size(question.answerList)}"로 답변 개수를 표시했다.
#list.size(이터러블객체)는 이터러블 객체의 사이즈를 반환하는 타임리프의 유틸리티이다.
이제 답변이 있는 질문은 다음처럼 제목 오른쪽에 빨간색(text-danger) 숫자가 작게(small) 왼쪽 여백(ms-2)이 추가되어 표시된다.
728x90