23. 작성자(Author) 표시 - 점프 투 스프링부트(게시판 만들기)

해당 게시글은 점프 투 스프링부트 교재를 통한 개인 학습 용도이며 기초 세팅은 생략하였습니다.
자바 8, 스프링부트 2.7.7버전 입니다.

 

 

 

 

질문 목록

---

question_list.html 템플릿에 글쓴이를 표시해 보자.

(... 생략 ...)
<tr class="text-center">
    <th>번호</th>
    <th style="width:50%">제목</th>
    <th>글쓴이</th>
    <th>작성일시</th>
</tr>
(... 생략 ...)

<th>글쓴이</th> 항목을 추가했다. 그리고 th 엘리먼트를 가운데 정렬하도록 tr 태그에 text-center 클래스를 추가하고 제목의 너비가 전체에서 50%를 차지하도록 style="width:50%"도 지정해 주었다.

 

for 문에도 다음처럼 글쓴이를 적용하자.

question.list_html

(... 생략 ...)
<tr class="text-center" th:each="question, loop : ${paging}">
    <td th:text="${paging.getTotalElements - (paging.number * paging.size) - loop.index}"></td>
    <td class="text-start">
        <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><span th:if="${question.author != null}" th:text="${question.author.username}"></span></td>
    <td th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></td>
</tr>
(... 생략 ...)

<td> ... </td> 엘리먼트를 삽입하여 질문의 글쓴이를 표시했다. 작성자 정보 없이 저장된 이전의 질문들은 author 속성에 해당하는 데이터가 없으므로 author 속성의 값이 null이 아닌 경우만 표시하도록 했다. 그리고 테이블 내용을 가운데 정렬하도록 tr 엘리먼트에 text-center 클래스를 추가하고, 제목을 왼쪽 정렬하도록 text-start 클래스를 추가했다.

 

질문 목록 화면에 글쓴이가 추가되었다.

 

 

 

 

질문 상세

---

question_detail.html

 

 

(... 생략 ...)
<!-- 질문 -->
<h2 class="border-bottom py-2" th:text="${question.subject}"></h2>
<div class="card my-3">
    <div class="card-body">
        <div class="card-text" style="white-space: pre-line;" th:text="${question.content}"></div>
        <div class="d-flex justify-content-end">
            <div class="badge bg-light text-dark p-2 text-start">
                <div class="mb-2">
                    <span th:if="${question.author != null}" th:text="${question.author.username}"></span>
                </div>
                <div th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></div>
            </div>
        </div>
    </div>
</div>
(... 생략 ...)

글쓴이와 작성일시가 함께 보이도록 수정했다.

 

답변 부분도 글쓴이를 다음처럼 추가하자.

question_detail.html

(... 생략 ...)
<!-- 답변 반복 시작 -->
<div class="card my-3" th:each="answer : ${question.answerList}">
    <div class="card-body">
        <div class="card-text" style="white-space: pre-line;" th:text="${answer.content}"></div>
        <div class="d-flex justify-content-end">
            <div class="badge bg-light text-dark p-2 text-start">
                <div class="mb-2">
                    <span th:if="${answer.author != null}" th:text="${answer.author.username}"></span>
                </div>
                <div th:text="${#temporals.format(answer.createDate, 'yyyy-MM-dd HH:mm')}"></div>
            </div>
        </div>
    </div>
</div>
<!-- 답변 반복 끝  -->
(... 생략 ...)

마찬가지로 글쓴이와 작성일시가 함께 보이도록 수정했다

 

 

아주 잘 들어왔다