#13 [스프링 스터디] 쇼핑몰 만들기 프로젝트 - 메세지 띄우기 (예외처리) (JS)

쇼핑몰에서 상품의 재고가 부족하거나, 구매자의 잔액이 부족하면 정상적으로 구매가 이루어질 수 없습니다.
이럴 때 메세지를 띄워 예외처리를 해보도록 하겠습니다!

1. 상품 재고 < 유저가 구매하고자 하는 수량

먼저, 재고보다 더 많은 수량을 입력하면 재고 부족 메세지가 띄워집니다.

수량 입력에 숫자가 아닐 경우에는 숫자를 입력하라는 메세지가 띄워집니다.

                <form class="d-flex" sec:authorize="hasRole('ROLE_USER')" onsubmit="return orderitem();" th:action="@{/user/{id}/checkout/{itemId}(id=${user.id}, itemId=${item.id})}" method="post">
                    <div class="d-flex">
                        <input class="form-control text-center me-3" id="count" name="count" type="num" value="1"
                               style="max-width: 3rem"/>
                        <button class="btn btn-outline-dark flex-shrink-0" id="basket" type="submit">
                                구매하기
                        </button>
                    </div>
                </form>

                <form class="d-flex" sec:authorize="hasRole('ROLE_USER')" onsubmit="return additem();" th:action="@{/user/cart/{id}/{itemId}(id=${user.id}, itemId=${item.id})}" method="post">
                    <input class="form-control text-center me-3" id="amount" name="amount" type="num" value="1" style="max-width: 3rem"/>
                    <button class="btn btn-outline-dark flex-shrink-0" id="basket" type="submit"><i class="bi-cart-fill me-1"></i>장바구니</button>
                </form>

                    <script th:inline="javascript">
                        /* <![CDATA[ */
                        var leftitemcount = [[${item.Stock}]];
                        const button = document.getElementById("basket")

                        function additem() {
                            var count = document.getElementById("amount").value
                            if (isNaN(count)) {
                                alert("숫자를 입력해주세요")
                                return false
                            } else if (count > leftitemcount) {
                                alert("재고가 부족합니다")
                                return false
                            } else {
                                <!--document.getElementById("buy").innerText = count-->
                                return true
                            }
                        }

                        function orderitem() {
                            var count = document.getElementById("count").value
                            if (isNaN(count)) {
                                alert("숫자를 입력해주세요")
                                return false
                            } else if (count > leftitemcount) {
                                alert("재고가 부족합니다")
                                return false
                            } else {
                                <!--document.getElementById("buy").innerText = count-->
                                return true
                            }
                        }

                        <!--button.addEventListener("click",additem)-->
                        /* ]]> */
                    </script>

form 태그에 달려있는 onsubmit은 유효성 검사를 하는 이벤트입니다.
함수에서 true를 반환하면 form에 제출, false를 반환하면 제출을 하지 않습니다.
input에 사용자에게 입력받은 값과 현재 상품의 재고를 비교해야 하는데요,
그러기 위해서는 자바스크립트 내에서 타임리프 변수를 사용해야 합니다.

<script th:inline="javascript"></script>

이렇게 script 태그 안에 달아주면 타임리프 변수를 사용할 수 있습니다.

var leftitemcount = [[${item.Stock}]];

input 태그에서 사용자에게 받은 값은 아래처럼 사용할 수 있습니다.

var count = document.getElementById("amount").value

필요한 데이터들을 변수에 저장해놓은 후, 조건문을 이용하여 처리를 합니다.

2. 상품의 가격 > 유저의 잔액

잔액이 부족한 경우도 똑같습니다.

function orderitem() {
                            var count = document.getElementById("count").value
                            var userMoney = [[${user.Coin}]];
                            var itemPrice = [[${item.Price}]];
                            if (isNaN(count)) {
                                alert("숫자를 입력해주세요.")
                                return false
                            } else if ((count > leftitemcount) || (userMoney < (count*itemPrice))) {
                                if (count > leftitemcount) {
                                    alert("재고가 부족합니다.")
                                } else if (userMoney < (count*itemPrice)) {
                                    alert("잔액이 부족합니다.")
                                }
                                return false
                            } else {
                                <!--document.getElementById("buy").innerText = count-->
                                return true
                            }
                        }

여기서는 상품의 가격과 유저의 잔액을 불러와 비교를 해야겠지요!

이렇게 JS 이용하여 메세지를 띄워 예외처리를 해보았습니다.ㅎㅎ