[Spring Boot & Thymeleaf] 19. 체크 박스, 라디오 버튼, 셀렉트 박스 (1)

참고

Spring Boot & Thymeleaf 시리즈는 김영한 님의 "스프링 MVC 2편 - 백엔드 웹 개발 활용 기술" 강의를 정리한 글입니다. 글에 첨부된 사진은 해당 강의의 강의 자료에서 캡쳐한 것입니다. 제 Github에만 올려뒀다가, 정보 공유와 강의 홍보(?)를 위해 블로그에도 업로드합니다.

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의

마크다운 형식으로 작성한 글을 블로그에 다시 올리는 거라 가독성이 많이 떨어집니다. 조금더 편하게 보시려면 아래의 Github repository에서 보시면 됩니다.

GitHub - Kloong1/TIL: Today I Learned.

타임리프 - 체크박스, 라디오 버튼, 셀렉트 박스 적용 사전 준비

요구사항 추가

타임리프를 사용해서 폼에서 체크박스, 라디오 버튼, 셀렉트 박스를 편리하게 사용하는 방법을 학습하기 위해, 기존 상품 서비스에 다음 요구사항이 추가되었다는 가정을 한다.

• 판매 여부
  • 판매 오픈 여부
  • 체크 박스로 선택할 수 있다.
• 등록 지역
  • 서울, 부산, 제주
  • 체크 박스로 다중 선택할 수 있다.
• 상품 종류
  • 도서, 식품, 기타
  • 라디오 버튼으로 하나만 선택할 수 있다.
• 배송 방식
  • 빠른 배송
  • 일반 배송
  • 느린 배송
  • 셀렉트 박스로 하나만 선택할 수 있다.

예시 이미지

요구사항 적용

상품 종류

ItemType.java

package hello.itemservice.domain.item;

public enum ItemType {
    BOOK("도서"), FOOD("식품"), ETC("기타");

    private final String description;

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

    public String getDescription() {
        return description;
    }
}

• 상품 종류는 enum 으로 구현했다.
• 각 상수에 대한 설명을 위해 description 필드를 추가했다.

배송 방식

DeliveryCode.java

package hello.itemservice.domain.item;

import lombok.AllArgsConstructor;
import lombok.Data;

/**
 * FAST: 빠른 배송
 * NORMAL: 일반 배송
 * SLOW: 느린 배송
 */
@Data
@AllArgsConstructor
public class DeliveryCode {
    private String code;
    private String displayName;
}

• 배송 방식은 class 로 구현했다.
• code 는 시스템에서 전달하는 값이다. (ex. FAST, NORMAL, SLOW)
• displayName 은 고객에게 보여주는 값이다. (ex. 빠른 배송, 일반 배송, 느린 배송)

참고
ItemType은 enum, DeliveryCode는 class 형태로 구현한 것은, 그냥 예제의 다양성을 위함이다. 상황에 맞는 구현 방식을 선택하면 된다.

상품

Item.java 내용 추가

package hello.itemservice.domain.item;

import lombok.Data;

import java.util.List;

@Data
public class Item {

    private Long id;
    private String itemName;
    private Integer price;
    private Integer quantity;

    private Boolean open; //판매 여부
    private List<String> regions; //등록 지역
    private ItemType itemType; //상품 종류
    private String deliveryCode; //배송 방식

    public Item() {
    }

    public Item(String itemName, Integer price, Integer quantity) {
        this.itemName = itemName;
        this.price = price;
        this.quantity = quantity;
    }
}

• 판매 여부, 등록 지역, 상품 종류, 배송 방식에 대한 멤버 변수를 추가했다.