반응형
Bootstrap의 카드(card) 컴포넌트와 다양한 유틸리티 클래스를 활용하면
질문 상세 내용과 답변(댓글) 리스트를
한눈에 보기 쉽고, 깔끔하게 디자인할 수 있습니다.
이번 강의에서는 작성 날짜, 댓글 개수, 각 답변의 작성 일시까지
정보를 풍부하게 표현하는 화면을 만들어봅니다.
📌 예제 코드 (question_detail.html)
<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container my-5">
<div class="card my-3">
<div class="card-body">
<!-- 제목 -->
<h1 class="border-bottom my-3 py-2" th:text="${question.subject}"></h1>
<!-- 작성 날짜 -->
<div class="d-flex justify-content-end">
<div class="badge bg-light text-dark p-2 text-start">
<div th:text="|작성 일자 : ${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm' )}|"></div>
</div>
</div>
<br>
<!-- 내용 -->
<div class="card-text" style="white-space: pre-line;" th:text="${question.content}"></div>
<br>
</div>
</div>
<!-- 댓글 목록 -->
<h5 class="border-bottom my-3 py-2" th:text="|${#lists.size(question.answerList)}개의 댓글이 있습니다.|"></h5>
<div class="card my-3" th:each="answer:${question.answerList}">
<div class="card-body">
<!-- 작성자명 -->
<table class="border-bottom my-1 py-0" style="width: 100%">
<tr>
<td>
<div class="fw-bold fs-5" th:text="작성자명"></div>
</td>
<td align="right">
<div class="badge bg-light text-dark p-2 text-start">
<div th:text="|작성 일자 : ${#temporals.format(answer.createDate, 'yyyy-MM-dd HH:mm' )}|"></div>
</div>
</td>
</tr>
</table>
<!-- 댓글 내용 -->
<div class="card-text" style="white-space: pre-line;" th:text="${answer.content}"></div>
</div>
</div>
<!-- 댓글 등록 -->
<form th:action="@{|/answer/create/${question.id}|}" method="post">
<textarea class="form-control" rows="3" name="content" id="content"></textarea>
<div class="d-flex justify-content-end">
<input class="btn btn-primary my-2" type="submit" value="답글 등록">
</div>
</form>
<!-- 돌아가기 -->
<a th:href="@{/question/list}">돌아가기</a>
</div>
</html>💬 코드 설명
- layout:decorate="~{layout}"
: 공통 레이아웃을 상속하여, 전체 디자인 일관성을 유지합니다. - 카드(card) 컴포넌트
: 질문 내용과 댓글을 Bootstrap 카드로 감싸
정보가 분리되어 보기가 좋고, 배경도 강조됩니다. - 작성 일시, 댓글 개수, 답변 작성일
: #temporals.format()을 활용해 날짜/시간을 보기 좋은 포맷으로 출력합니다.
댓글(답변) 개수도 #lists.size()로 동적으로 표시합니다. - 작성자명
: 실제 작성자 정보가 있다면 바인딩하여 출력 가능합니다.
(현재는 "작성자명"이라는 텍스트로 예시 표시) - form-control, btn, d-flex 등 Bootstrap 클래스
: 폼과 버튼, 레이아웃에 일관된 스타일을 입혀줍니다. - 돌아가기 링크
: 질문 목록 페이지로 쉽게 이동할 수 있습니다.
💡포인트 정리
- Bootstrap 카드/버튼/레이아웃 유틸리티로
웹페이지의 가독성과 시각적 완성도가 크게 높아진다. - Thymeleaf의 날짜/리스트 유틸리티를 활용하면
실시간으로 바뀌는 정보를 쉽게 표시할 수 있다. - 폼, 댓글, 제목 등 각 영역이 명확하게 구분되어
사용자 경험이 향상된다.
📌정리하자면, Bootstrap 카드 컴포넌트와
Thymeleaf 반복문, 유틸리티를 조합해
실제 서비스 수준의 질문 상세/댓글 화면을 만들어봤습니다.
앞으로 더 많은 정보(작성자, 수정/삭제 버튼 등)도
확장해서 추가해볼 수 있습니다.
'Spring > 실습 정리' 카테고리의 다른 글
| Spring Boot 19강 - 질문 등록에 Validation 적용하고 에러 메시지 출력하기 (0) | 2025.07.07 |
|---|---|
| Spring Boot 18강 - Validation을 활용한 답변 입력 검증과 에러 처리 (0) | 2025.07.07 |
| Spring Boot 17강 - 질문 등록(글쓰기) 기능 구현하기 (1) | 2025.07.03 |
| Spring Boot 15강 - Thymeleaf 레이아웃과 Bootstrap으로 게시판 화면 꾸미기 (1) | 2025.07.03 |
| Spring Boot 14강 - 상세 페이지에서 답변(댓글) 목록 출력하기 (1) | 2025.07.02 |
| Spring Boot 13강 - 답변 등록 로직 구현하기 (1) | 2025.07.02 |