:imagesdir: images

== 실습
=== 개요
상품 상세 화면에서 상품을 주문하고 완료 화면을 표시하기까지의 과정을 구현합니다.

=== 절차
. 상품 상세 화면 표시
.. ShoppingApplication 클래스를 실행하고, 브라우저에서 http://localhost:8080/catalog/display-list 에 접속해 봅시다. 상품 목록 화면이 표시됩니다.
.. 상품 링크를 클릭해 봅시다. 'Whitelabel Error Page'가 표시됩니다. 이는 해당 요청에 해당하는 핸들러 메서드가 존재하지 않기 때문입니다.
.. 브라우저 주소창에 표시된 URL을 참고하여 적절한 핸들러 메서드를 생성해 봅시다. 이와 함께 상품 상세 화면을 표시할 템플릿 파일도 함께 만들어야 합니다. 상품 상세 화면은 자유롭게 디자인하세요. 참고로 아래와 같은 이미지로 만들 수 있습니다.
+
image::product-detail.png[,200]

. 입력 체크
.. 브라우저에서 http://localhost:8080/order/display-form 에 접속합니다. 주문 양식 화면이 나타납니다. 아무것도 입력하지 않고 '주문 내용 확인' 버튼을 눌러주세요. 아무것도 입력하지 않았는데도 불구하고 주문 확인 화면이 표시됩니다. 이는 입력 확인 처리가 이루어지지 않기 때문입니다.
.. 아래의 입력 검사를 수행하여 NG인 경우 원래의 입력 화면으로 돌아가도록 하려면 OrderController 클래스의 validateInput 메소드와 OrderInput 클래스를 수정해야 합니다. 템플릿 파일 orderForm.html은 수정하지 않아도 됩니다. 입력 확인 규칙은 다음과 같습니다.

|===
| 항목| 규칙

|이름| 필수입력.
|주소| 필수입력.
|전화 번호| 필수입력. 전화번호 형식.
|이메일 주소| 필수입력. 이메일 주소 형식.
|===

. '주문 확정' 버튼 추가
.. 주문 확인 화면에는 '주문 내용 변경' 버튼만 존재합니다. '주문 확정' 버튼을 추가하여 주문 처리가 이루어질 수 있도록 합니다.
... 주문 확인 화면의 템플릿 파일 orderConfirmation.html에 버튼을 추가해 봅시다.
... OrderController 클래스의 correctInput 메서드와 order 메서드가 잘 호출될 수 있도록 어노테이션을 작성해 봅시다.
+
[NOTE]
애플리케이션을 재시작한 후, http://localhost:8080/order/display-form 에서 다시 한 번 조작해 봅시다.


=== 옵션
. 예외 처리
.. 주문 확정 처리를 한 번 더 진행해보자. 'Whitelabel Error Page'가 표시됩니다. 이는 주문하려는 상품의 재고가 부족하기 때문입니다. 배후에서는 'StockShortageException'이 던져지고 있습니다.
.. 재고가 부족한 경우, 재고가 부족하다는 것을 알 수 있는 화면을 표시합니다. 화면 디자인은 자유롭지만, 아래와 같은 이미지를 참고할 수 있습니다.
+
image::stock-shortage.png[,300]





