회원 등록 | Notion

폼 객체를 사용해서 화면 계층과 서비스 계층을 명확하게 분리한다.

MemberForm

package jpabook.jpashop.controller;

import lombok.Getter;
import lombok.Setter;

import javax.validation.constraints.NotEmpty;

@Getter @Setter
public class MemberForm {

    @NotEmpty(message = "회원 이름은 필수입니다. ")
    private String name;

    private String city;
    private String street;
    private String zipcode;

}

MemberController

package jpabook.jpashop.controller;

import jpabook.jpashop.domain.Address;
import jpabook.jpashop.domain.Member;
import jpabook.jpashop.service.MemberService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import javax.validation.Valid;

@Controller
@RequiredArgsConstructor
public class MemberController {

    private final MemberService memberService;

    @GetMapping("/members/new")
    public String createForm(Model model){
        model.addAttribute("memberForm", new MemberForm());
        return "members/createMemberForm";
    }

    @PostMapping("/members/new")
    public String create(@Valid MemberForm form, BindingResult result){

        if(result.hasErrors()){
            return "members/createMemberForm";
        }
        Address address = new Address(form.getCity(), form.getStreet(), form.getZipcode());
        Member member = new Member();
        member.setName(form.getName());
        member.setAddress(address);

        memberService.join(member);
        return "redirect:/";
    }

}

@Valid 뒤에 BindingResult result가 있으면, 오류 발생 시 오류를 담은 채로 다음 코드를 실행시킨다.

회원 등록 폼 화면 templates/members/createMemberForm.html

<!DOCTYPE HTML>
<html xmlns:th="<http://www.thymeleaf.org>">
<head th:replace="fragments/header :: header" />
<style>
 .fieldError {
 border-color: #bd2130;
 }
</style>
<body>
<div class="container">
  <div th:replace="fragments/bodyHeader :: bodyHeader"/>
  <form role="form" action="/members/new" th:object="${memberForm}"
        method="post">
    <div class="form-group">
      <label th:for="name">이름</label>
      <input type="text" th:field="*{name}" class="form-control"
             placeholder="이름을 입력하세요"
             th:class="${#fields.hasErrors('name')}? 'form-control
fieldError' : 'form-control'">
      <p th:if="${#fields.hasErrors('name')}"
         th:errors="*{name}">Incorrect date</p>
    </div>
    <div class="form-group">
      <label th:for="city">도시</label>
      <input type="text" th:field="*{city}" class="form-control"
             placeholder="도시를 입력하세요">
    </div>
    <div class="form-group">
      <label th:for="street">거리</label>
      <input type="text" th:field="*{street}" class="form-control"
             placeholder="거리를 입력하세요">
    </div>
    <div class="form-group">
      <label th:for="zipcode">우편번호</label>
      <input type="text" th:field="*{zipcode}" class="form-control"
             placeholder="우편번호를 입력하세요">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
  <br/>
  <div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>

트러블슈팅

/* Model 객체 템플릿 파싱 오류 */
org.thymeleaf.exceptions.TemplateInputException: 
	An error happened during template parsing (
	template: "class path resource [templates/members/createMemberForm.html]"
)

@GetMapping("/members/new")
    public String createForm(Model model){
        model.addAttribute("memberForm", new MemberForm());
/* 템플릿에서 참조하는 속성 이름과 컨트롤러에서 Model 객체에 추가한
속성 이름은 정확하게 일치해야 한다. 대소문자 구분이 중요하므로 템플릿에서 
${memberForm}이라고 적었다면, 컨트롤러에서
model.addAttribute("memberForm", ...)로 속성 이름을 일치시켜야 한다.

이렇게 해야 Thymeleaf 템플릿 엔진이 Model 객체에서 올바른 속성을 찾아
사용할 수 있다. 속성 이름이 정확히 일치하지 않으면, Thymeleaf는 해당 속성을
찾을 수 없어 오류가 발생한다.*/
        return "members/createMemberForm";
    }