현재 질문과 답변을 등록할 때 오류가 발생하면 아래와 같이 표시했다.
<div class="alert alert-danger" role="alert" th:if="${#fields.hasAnyErrors()}">
<div th:each="err : ${#fields.allErrors()}" th:text="${err}" />
</div>앞으로 추가적으로 만들 템플릿들에도 위와 같이 오류를 표시하는 부분이 필요하다. 매번 반복적으로 소스를 작성하거나 복사를 하여 붙여넣게 되면 관리를 함에 있어서도 불편함이 생긴다.
그렇기 때문에 오류메세지를 출력하는 부분을 공통 템플릿으로 작성을 하고 필요한 곳에 삽입하여 사용해보겠다.
오류 메세지 공통 템플릿
form_errors.html 생성
<div th:fragment="formErrorsFragment" class="alert alert-danger"
role="alert" th:if="${#fields.hasAnyErrors()}">
<div th:each="err : ${#fields.allErrors()}" th:text="${err}" />
</div>출력할 오류메시지 부분에 th:fragment="formErrorsFragment" 속성을 추가했다.
질문 & 답변 등록 템플릿에 적용
question_form.html 수정
<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container">
<h5 class="my-3 border-bottom pb-2">질문등록</h5>
<form th:action="@{/question/create}" th:object="${questionForm}" method="post">
<!-- 소스수정 시작 -->
<div th:replace="form_errors :: formErrorsFragment"></div>
<!-- 소스수정 종료 -->
<div class="mb-3">
<label for="subject" class="form-label">제목</label>
<input type="text" th:field="*{subject}" class="form-control">
</div>
<div class="mb-3">
<label for="content" class="form-label">내용</label>
<textarea th:field="*{content}" class="form-control" rows="10"></textarea>
</div>
<input type="submit" value="저장하기" class="btn btn-primary my-2">
</form>
</div>
</html>
타임리프의 th:replace 속성을 사용하면 공통 템플릿을 템플릿 내에 삽입할수 있다.
<div th:replace="form_errors :: formErrorsFragment"></div> 의 의미는
div 엘리먼트를 form_errors.html 파일의 th:fragment 속성명이 formErrorsFragment 인 엘리먼트로
교체하라는 의미이다.
question_detail.html 수정
<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container my-3">
<!-- 질문 -->
<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 th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></div>
</div>
</div>
</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">
<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 th:text="${#temporals.format(answer.createDate, 'yyyy-MM-dd HH:mm')}"></div>
</div>
</div>
</div>
</div>
<!-- 답변 반복 끝 -->
<!-- 답변 작성 -->
<form th:action="@{|/answer/create/${question.id}|}" th:object="${answerForm}" method="post" class="my-3">
<!-- 수정 시작점 -->
<div th:replace="form_errors :: formErrorsFragment"></div>
<!-- 수정 종료점 -->
<textarea th:field="*{content}" rows="10" class="form-control"></textarea>
<input type="submit" value="답변등록" class="btn btn-primary my-2">
</form>
</div>
</html>
'Backend > Spring Boot' 카테고리의 다른 글
| [Spring Boot] Logger 사용법 & 팁 (0) | 2023.03.20 |
|---|---|
| [Spring Boot] 질문 등록 / 폼(form) (0) | 2022.08.24 |
| [Spring Boot] 템플릿 상속 (0) | 2022.08.24 |
| [Spring Boot] 스태틱 디렉터리와 스타일시트 / 부트스트랩 (0) | 2022.08.23 |
| [Spring Boot] 답변 등록(2/2) (0) | 2022.08.23 |