[Spring/Thymeleaf] 타임리프를 이용해서 ENUM 타입 셀렉트 박스 만들기

요즘 마지막 학기 프로젝트로 인해 뜸했다..

 

프로젝트를 진행하면서 도메인 안에 위처럼 ENUM 타입이 있는데 정보를 입력할 때 ENUM은 셀렉트 박스로 하고 싶었다.

 

---

 

ENUM

public enum CarCategory {
    LIGHT("경차"),
    SMALL("소형차"),
    SEMI_MEDIUM("준중형"),
    MEDIUM("중형"),
    SEMI_FORMAL("준대형"),
    LARGE("대형");

    @Getter
    private final String description;

    CarCategory(String description) {
        this.description = description;
    }
}

차량 종류에 대한 ENUM이다.

 

컨트롤러

     /**
     * enum
     */
    @ModelAttribute("carCategories")
    public CarCategory[] carCategories() {
        return CarCategory.values();
    }

    @ModelAttribute("fuels")
    public Fuel[] fuels() {
        return Fuel.values();
    }

    /**
     * POST 차량 등록
     */
    @PostMapping("/add")
    public String addCar(@Validated @ModelAttribute("userCar") UserCarCreateRequest userCarCreateRequest,
                         BindingResult bindingResult,
                         Authentication authentication) {

        if (bindingResult.hasErrors()) return "usercar/addUserCar";

        AccountContext accountContext = (AccountContext) authentication.getPrincipal();
        Account account = accountContext.getAccount();

        userCarService.addUserCar(account.getId(), userCarCreateRequest);

        return "redirect:/usercar/list";
    }

여기서 중요한 건 @ModelAttribute() 애노테이션을 사용해서 위와 같은 방법으로 ENUM[]으로 ENUM의 값들을 리턴해줘야 한다.

그래야 타임리프에서 가져와 쓸 수 있음

 

타임리프

<div class="px-5 m-3">
	<div>차종</div>
	<select th:field="*{carCategory}" class="form-select" th:errorclass="field-error">
		<option value="">==차종 선택==</option>
		<option th:each="carCategory : ${carCategories}" th:value="${carCategory}" 
        	th:text="${carCategory.getDescription()}">LIGHT</option>
	</select>
	<div class="field-error" th:errors="*{carCategory}">차종 오류</div>
</div>

사용할 부분에 위와 같이 태그를 넣어주면 된다.

• th:field = 컨트롤러에서 모델에 넣어준 객체(UserCarCreateRequest)의 ENUM
• th:each = ENUM을 하나씩 가져와서 셀렉트 박스에 채워줌 ${@ModelAttribute의 value로 넣기}
• th:value = ENUM의 값으로 LIGHT, SMALL 등 값이 옴
• th:text = ENUM의 설명 값으로 소형, 중형 등 값이 옴

 

참고로 필드 에러 쪽은 @NotNull 해줬으니 넣어줬다.