728x90
반응형
SMALL
예를 들어 오류 메시지를 출력하는 HTML 코드는 질문등록과 답변등록 페이지에서 모두 사용한다.
이렇게 반복적으로 사용하는 코드를 공통 템플릿으로 만들어보자.
<div class="alert alert-danger" role="alert" th:if="${#fields.hasAnyErrors()}"> <div th:each="err: ${#fields.allErrors()}" th:text="${err}"></div> </div>이와 같은 오류 메시지를 출력하는 부분을 공통 템플릿으로 만들어 필요한 곳에 삽입할 수 있도록 해보자.
오류 메시지 템플릿 만들기
/templates/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>
</div>th:fragment 속성을 추가했다.
다른 템플릿에서 이 div태그 영역을 사용할 수 있도록 이름을 설정한 것이다.
기존 템플릿에 적용하기
/templates/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>5행에 원래 중복됐던 코드 부분을
<div th:replace="~{form_errors :: formErrorsFragment}"></div> 코드로 수정했다.
/templates/question_detail.html
...
<!-- 답변 작성 -->
<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>
...
이렇게 모두 수정 후 제대로 동작하는지 확인해보자.
728x90
반응형
LIST
'IT > Spring Boot' 카테고리의 다른 글
| [Spring Boot] 20. 페이징 기능 (1)데이터 페이징 처리 (0) | 2024.05.02 |
|---|---|
| [Spring Boot] 19. 네비게이션 바(Nav bar) 추가하기 (0) | 2024.05.02 |
| [Spring Boot] 17. 폼(Form) 활용하기(2) (0) | 2024.04.30 |
| [Spring Boot] 16. 폼(Form) 활용하기(1) (0) | 2024.04.30 |
| [Spring Boot] 15. 질문 등록 기능 추가하기 (0) | 2024.04.30 |