타임리프에서 input 요소같은 것들도 은근 변경되는 경우가 많아서, component화가 필요했었다는 설명

component 화 fragment.html

<!--/*
    인풋 디스플레이 전용 요소
    icon : 아이콘
    name : 필드명
    label : 플레이스 홀더 label
    maxLength : 길이
 */-->
<!--/* BEGIN :: 일반 1,2단 폼 요소 */-->
<div class="form-input" th:fragment="writeNV(icon, formName, name, label, maxLength)">
    <div class="ic-r-area"></div>
        <div class="form-group underline-green"
             th:classappend="${#fields.hasErrors('__${name}__')}? 'border-underline-red'">
            <input class="floating-input"
                   type="text"
                   placeholder=" "
                   th:name="${formName}"
                   th:value="*{__${name}__}"
                   th:maxlength="${maxLength}">
            <label class="float" th:text="#{${label}}">label</label>
        </div>

    <div th:if="${#fields.hasErrors('__${name}__')}" th:errors="*{__${name}__}" 	class="with-errors">
        에러 메시지
    </div>
</div>
<!--/* END :: 일반 1,2단 폼 요소 */-->

기본 element.html

<div class="row">
                                    <div class="form-group col-sm-6">
                                        <label required="true">이름</label>
                                        <input th:id="name" type="text" class="form-control" th:field="*{name}" />
                                        <span th:if="${#fields.hasErrors('name')}" th:errors="*{name}" class="error"></span>
                                    </div>
                                </div>