27. 검증 직접 구현

검증 실패시

검증 실패시, 고객의 불편을 최소화 하기 위해 고객이 보낸 데이터를 다 지워버리지 말고 그대로 담아서 상품등록 폼으로 다시 보여준다. 

 

그리고 뭘 잘못했는지 알려줘서 고객의 불편을 최소화 한다.

 

 

 

@PostMapping("/add")
public String addItem(@ModelAttribute Item item, RedirectAttributes redirectAttributes, Model model) {
    //검증 오류 보관
    Map<String, String> errors = new HashMap<>();

    //검증 로직
    if(!StringUtils.hasText(item.getItemName())){
        errors.put("itemName", "상품 이름은 필수입니다.");
    }
    if(item.getPrice() == null || item.getPrice() < 1000 || item.getPrice() > 1000000){
        errors.put("price", "가격은 1,000 ~ 1,000,000 까지 허용합니다.");
    }
    if(item.getQuantity() == null || item.getQuantity() > 9999){
        errors.put("quantity", "수량은 최대 9,999개 까지 허용합니다.");
    }

    if(item.getPrice() != null && item.getQuantity() != null){
        int result = item.getQuantity() * item.getPrice();
        if(result < 10000){
            errors.put("globalError","가격 * 수량의 합은 10,000원 이상이어야 합니다. 현재값 = " + result);
        }
    }

    if(!errors.isEmpty()){
        log.info("errors = {}", errors);
        model.addAttribute("errors",errors);
        return "/validation/v1/addForm";
    }


    Item savedItem = itemRepository.save(item);
    redirectAttributes.addAttribute("itemId", savedItem.getId());
    redirectAttributes.addAttribute("status", true);
    return "redirect:/validation/v1/items/{itemId}";
}

음.. 조금 무식해 보인다. 그런데 또 이게 검증이 맞는거다..

간단하게 그냥 직관적으로 로직을 짠거다.

 

근데 좀 아쉬운게, 타입에 대한 검증 로직이 없다.

 

그리고, 이런 것들 뭐 edit이라던지 더 쓸 대가 있을 텐데, 별도 함수로 만들었으면 좋겠다.

 

 

 

<div class="container">

    <div class="py-5 text-center">
        <h2 th:text="#{page.addItem}">상품 등록</h2>
    </div>

    <form action="item.html" th:action th:object="${item}" method="post">
        <div th:if="${errors?.containsKey('globalError')}">
            <p class="field-error" th:text="${errors['globalError']}">전체 오류 메시지</p>
        </div>

        <div>
            <label for="itemName" th:text="#{label.item.itemName}">상품명</label>
            <input type="text" id="itemName" th:field="*{itemName}" class="form-control" placeholder="이름을 입력하세요"
                   th:class="${errors?.containsKey('itemName')} ? 'form-control field-error' : 'form-control'" >
            <div th:if="${errors?.containsKey('itemName')}">
                <p class="field-error" th:text="${errors['itemName']}">상품 이름 오류</p>
            </div>
        </div>
        <div>
            <label for="price" th:text="#{label.item.price}">가격</label>
            <input type="text" id="price" th:field="*{price}" class="form-control" placeholder="가격을 입력하세요"
                   th:class="${errors?.containsKey('price')}?'form-control field-error':'form-control'">
            <div th:if="${errors?.containsKey('price')}">
                <p class="field-error" th:text="${errors['price']}">가격 오류</p>
            </div>
        </div>
        <div>
            <label for="quantity" th:text="#{labe l.item.quantity}">수량</label>
            <input type="text" id="quantity" th:field="*{quantity}" class="form-control" placeholder="수량을 입력하세요"
                   th:class="${errors?.containsKey('quantity')}?'form-control field-error':'form-control'">
            <div th:if="${errors?.containsKey('quantity')}">
                <p class="field-error" th:text="${errors['quantity']}">수량 오류</p>
            </div>
        </div>

        <hr class="my-4">

        <div class="row">
            <div class="col">
                <button class="w-100 btn btn-primary btn-lg" type="submit" th:text="#{button.save}">상품 등록</button>
            </div>
            <div class="col">
                <button class="w-100 btn btn-secondary btn-lg"
                        onclick="location.href='items.html'"
                        th:onclick="|location.href='@{/validation/v1/items}'|"
                        type="button" th:text="#{button.cancel}">취소</button>
            </div>
        </div>

    </form>

</div> <!-- /contai

뭔가 내용이 굉장히 많지만, 봐야 할 건

우선

<div th:if="${errors?.containsKey('globalError')}">
      <p class="field-error" th:text="${errors['globalError']}">전체 오류 메시지</p>
</div>

 

여기 문법 ${errors?.containsKey('globalError')} 여기서 대부분은 이해 하겠지만,

저 물음표는 뭐지? 할것이다.

이거는 저게 null인가요? 하는 것이다.

만약 errors가 아무것도 안담겨 null로 왔으면 접근하면 null에 접근한다고 예외를 뱉어댄다.

 

저 물음표는 타임리프 문법인데, 먼저 null인지 검사부터 하는거다. null이면 그냥 저 변수안 자체를 null로 만들어 버려서, 그냥 조건문이 실행 안되게 된다. if(null)이 되니까.

 

그 다음 containsKey해서 있으면 참이라는 거니까, 컨트롤러에서 key와 함께 넣은 값, 문자열을 그대로 출력하도록 해주면 된다.

 

<input type="text" id="itemName" th:field="*{itemName}" class="form-control" placeholder="이름을 입력하세요"
                   th:class="${errors?.containsKey('itemName')} ? 'form-control field-error' : 'form-control'" >

이것도 뭐 비슷하다 태그 클래스에 담당한 에러가 있을 시 field-error를 추가하는거다.

저건 글자 빨간색, border 빨간색 해놓은 거다.

 

 

if(!errors.isEmpty()){
    log.info("errors = {}", errors);
    model.addAttribute("errors",errors);
    return "/validation/v1/addForm";
}

위 로직을 보면 따로 모델에 item은 안 담는데 그대로 넘어간다. 

@ModelAttribute Item item

ModelAttribute 이거는 알아서 모델에 담아주기 때문이다. 만약 위처럼 받은 item의 값을 뭐 하나 바꾸면, 객체는 주소로 오기 때문에 바꾼 값 또한 적용된다. 물론 여기선 바꾼 값은 없다.

 

 

여튼, 

@GetMapping("/add")
public String addForm(Model model) {
    model.addAttribute("item", new Item());
    return "validation/v1/addForm";
}

폼을 보내주는 같은 url의 Get 응답을 보면 빈 item을 생성한다.

그래서 처음 상품 등록에 아무것도 없게 하는 게 가능한거다.

 

위에 상품등록 폼에 보면 다 값을 item으로부터 받게 해놨다.