3. Thymeleaf Form 활용하기

wjd15sheep·2025년 7월 10일

Spring Boot

목록 보기

18/19

이번 포스트에서는 Thymeleaf에서 <form>을 활용하여 유저 정보를 입력받고 저장하는 방법을 정리해두려 합니다.
현재 유저 페이지에 바로 적용하진 않지만, 필요할 때 참고할 수 있도록 기록용으로 작성합니다.

📌 목표

form 페이지를 작성한다.
유저의 전화번호(mobileNumber)와 주소(address)를 수정할 수 있도록 한다.

🗂️ 1. HTML Form 화면 구성

Bootstrap의 Form 컴포넌트를 참고하여 /admin/form 경로에 대응하는 페이지를 작성합니다.

<form
  th:action="@{/admin/form}"
  th:object="${user}"
  method="put"
>
  <input type="hidden" th:field="*{name}" />

  <div class="form-group">
    <label for="mobileNumber">전화번호</label>
    <input
      type="text"
      class="form-control"
      id="mobileNumber"
      th:field="*{mobileNumber}"
      th:classappend="${#fields.hasErrors('mobileNumber')} ? 'is-invalid'"
    />
    <div
      class="invalid-feedback"
      th:if="${#fields.hasErrors('mobileNumber')}"
      th:errors="*{mobileNumber}"
    >
      번호 에러
    </div>
  </div>

  <div class="form-group mt-3">
    <label for="address">주소</label>
    <textarea
      class="form-control"
      id="address"
      placeholder="주소를 입력하세요"
      th:field="*{address}"
      th:classappend="${#fields.hasErrors('address')} ? 'is-invalid'"
    ></textarea>
    <div
      class="invalid-feedback"
      th:if="${#fields.hasErrors('address')}"
      th:errors="*{address}"
    >
      주소 에러
    </div>
  </div>

  <div class="text-end mt-4">
    <a class="btn btn-secondary" th:href="@{/admin/users}">취소</a>
    <button type="submit" class="btn btn-dark">확인</button>
  </div>
</form>

📷 화면 예시

🔗 유저 목록에서 form 페이지로 이동

유저 리스트 페이지에서 특정 유저 이름을 클릭하면 form 페이지로 이동하도록 구성합니다.

<td>
  <a
    th:href="@{/admin/form(name=${user.name})}"
    th:text="${user.name}"
  >이름</a>
</td>

th:href="@{/admin/form(name=${user.name})}"
→ name을 쿼리 파라미터로 전달합니다.

이름을 선택하하면 컨트롤러에 /admin/form?name='선택한 이름'으로 Get 요청이 됩니다.

⚙️ 2. 컨트롤러 설정 (GET/POST)

✅ GET /admin/form

유저 이름을 기준으로 해당 유저 정보를 조회해 form에 바인딩합니다.

 @GetMapping("/form")
    public String formView(Model model, @RequestParam(required = false) String name) {
        if (name == null) {
            model.addAttribute("user", User.builder().build());
        }else{
            User user = userRepository.findByName(name);
            model.addAttribute("user", User.builder().
                    id(user.getId()).
                    username(user.getUserName()).
                    name(user.getName()).
                    mobileNumber(user.getMobileNumber()).
                    address(user.getAddress()).
                    build());
        }

        return "/user/form";
    }

✅ PUT /admin/form

사용자의 입력값을 받아 검증한 후, 기존 유저 정보를 수정해 저장합니다.


    @PutMapping("/form")
    public String postForm(@Valid User user, BindingResult bindingResult) {

        userValidator.validate(user, bindingResult);
        if (bindingResult.hasErrors()) {
            return "/user/form";
        }

        User user1 = userRepository.findByName(user.getName());

        if (user1 != null) {
            User updateUser = User.builder().
                    id(user1.getId()).
                    username(user1.getUserName()).
                    name(user1.getName()).
                    userRole(user1.getUserRole()).
                    mobileNumber(user.getMobileNumber()).
                    address(user.getAddress()).
                    email(user1.getEmail()).
                    build();
            userRepository.save(updateUser);
        }


        return "redirect:/admin/users";
    }