[점프투스프링부트] 3-09. 글쓴이 표시

 

점프투스프링부트 3-09

 

 

 

목표 : 질문 목록, 질문 상세 화면에 auther 속성을 이용하여 글쓴이 표시

 

 

 

 

 

1. 질문 목록

 

먼저 질문 목록 템플릿에 글쓴이를 표시해 보자.

다음과 같이 테이블 헤더에 글쓴이 항목을 추가하자.

 

[파일명:/sbb/src/main/resources/templates/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 문에도 다음처럼 글쓴이를 적용하자.

 

[파일명:/sbb/src/main/resources/templates/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 클래스를 추가했다.

 

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

변경된 질문 목록 화면은 다음 그림과 같다.

 

 

 

 

 

2. 질문 상세

 

질문 상세 템플릿도 다음과 같이 글쓴이를 추가하자.

 

[파일명: /sbb/src/main/resources/templates/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>
(... 생략 ...)

 

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

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

 

[파일명: /sbb/src/main/resources/templates/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>
<!-- 답변 반복 끝  -->
(... 생략 ...)

 

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

변경된 질문 상세 화면은 다음과 같다.