03D. ๋ต๋ณ ๊ฐ์ ํ์
03D. ๋ต๋ณ ๊ฐ์ ํ์ ๊ด๋ จ
์ด๋ฒ์๋ ์ง๋ฌธ ๋ชฉ๋ก์ "ํด๋น ์ง๋ฌธ์ ๋ฌ๋ฆฐ ๋ต๋ณ ๊ฐ์"๋ฅผ ํ์ํ ์ ์๋ ๊ธฐ๋ฅ์ ์ถ๊ฐํด ๋ณด์. ์ฝ๋์ ๋ถ๋์ ๋ง์ง ์์ง๋ง, ๊ฒ์ํ ์๋น์ค๋ฅผ ๋์ฑ ์๋น์ค๋ต๊ฒ ๋ง๋ค์ด ์ฃผ๋ ๊ธฐ๋ฅ์ด๋ค.
๋ต๋ณ ๊ฐ์๋ ๋ค์์ฒ๋ผ ๊ฒ์๋ฌผ ์ ๋ชฉ ๋ฐ๋ก ์ค๋ฅธ์ชฝ์ ํ์ํ์.
ํ์ผ๋ช :
/sbb/src/main/resources/templates/
question_list.html
<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container my-3">
<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>
<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="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></d>
</tr>
</tbody>
</table>
<!-- (... ์๋ต ...) -->
th:if="${#lists.size(question.answerList) > 0}"
๋ก ๋ต๋ณ์ด ์๋์ง ์กฐ์ฌํ๊ณ , th:text="${#lists.size(question.answerList)}"
๋ก ๋ต๋ณ ๊ฐ์๋ฅผ ํ์ํ๋ค.
#list.size(์ดํฐ๋ฌ๋ธ๊ฐ์ฒด)
๋ ์ดํฐ๋ฌ๋ธ ๊ฐ์ฒด์ ์ฌ์ด์ฆ๋ฅผ ๋ฐํํ๋ ํ์๋ฆฌํ์ ์ ํธ๋ฆฌํฐ์ด๋ค.
์ด์ ๋ต๋ณ์ด ์๋ ์ง๋ฌธ์ ๋ค์์ฒ๋ผ ์ ๋ชฉ ์ค๋ฅธ์ชฝ์ ๋นจ๊ฐ์(text-danger
) ์ซ์๊ฐ ์๊ฒ(small
) ์ผ์ชฝ ์ฌ๋ฐฑ(ms-2
)์ด ์ถ๊ฐ๋์ด ํ์๋๋ค.