AJAX를 이용한 실시간 중복 체크

[ ApiUtil ]

package com.example.store._core.utils;

import lombok.Data;

@Data
public class ApiUtil<T> {
    private Integer status;
    private String msg;
    private T body;

    public ApiUtil(T body) {
        this.status = 200;
        this.msg = "성공";
        this.body = body;
    }

    public ApiUtil(Integer status, String msg) {
        this.status = status;
        this.msg = msg;
        this.body = null;
    }
}

[ ProductController ]

//상품명 실시간 중복체크
    @GetMapping("/product/name-check")
    public @ResponseBody ResponseEntity<?> nameSameCheck(String name, HttpServletResponse response) {
        Product product = productService.findByName(name);
        if (product == null) {
            return ResponseEntity.ok(new ApiUtil<>(true)); //상품 등록 가능
        } else {
            //response.setStatus(400);
            return ResponseEntity.ok(new ApiUtil<>(false)); //상품 등록 불가
        }
    }

[ ProductService ]

    //상품명 실시간 중복체크
    public Product findByName(String name) {
        Product product = productRepo.findByName(name);
        return product;
    }

[ ProductRepository ]

 //상품명 실시간 중복체크
    //TODO: 레파지토리에서 try-catch를 안하고 싶은데... 어떻게 해야하지?
    public Product findByName(String name) {
        try {
            String q = """
                    select * from product_tb where name = ?
                    """;
            Query query = em.createNativeQuery(q, Product.class);
            query.setParameter(1, name);
            Product product = (Product) query.getSingleResult();
            return product;

        } catch (NoResultException e) {
            return null;
        }
    }

[ save-form ]

{{> layout/header}}

<div class="container" style="margin-top: 5%; margin-bottom: 5%">
    <div class="row">
        <!-- 이미지 업로드 섹션 -->
        <div class="col-lg-4 mb-4 mb-lg-0">
            <form id="productForm" action="/upload" method="post" enctype="multipart/form-data">
                <img src="https://m.lovelanc.com/web/product/big/Lbig230706-48ea_j27.jpg" width="300" height="300">
                <div class="row">
                    <div class="form-group mt-3 col-10">
                        <input type="file" class="form-control" id="photo" name="imgFile" accept="image/*">
                    </div>
                    <div class="form-group mt-3 d-flex justify-content-center">
                        <button type="submit" class="btn btn-success mt-2" style="color:#fff; margin-left: -20%">사진변경
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 상품 정보 입력 섹션 -->
        <div class="col-lg-6 px-xl-10">
            <form action="/product/save" method="post">
                <div class="mb-3 mt-3">
                    상 품 명 : <input id="name" name="name" type="text" class="form-control" placeholder="상품명을 입력하세요">
                    <div class="alert alert-danger" id="nameCheck">상품명을 입력해주세요</div>
                </div>
                <div class="mb-3 mt-3">
                    상품가격 : <input name="price" type="number" class="form-control" placeholder="상품가격을 입력하세요">
                </div>
                <div class="mb-3 mt-3">
                    상품수량 : <input name="qty" type="number" class="form-control" placeholder="상품수량을 입력하세요">
                </div>
                <div class="d-flex justify-content-center">
                    <button type="submit" class="btn btn-primary mt-3">상품등록완료</button>
                </div>
            </form>
        </div>

    </div>
</div>

<script>

        // change (UX 가 좋지 않다)
        // keyup (너무 많은 이벤트를 호출한다)
        // 디바운스 (시간을 정해서 한번에 모았다가 호출한다)

        // 실시간 상품명 중복체크 (save용)
        $("#name").keyup(function (){
            //this = 지금 현재 클릭한 것, val = 값 가져옴
            var name = $(this).val();
            // alert(name);

            //서버로 가서 id 중복체크 -> url과 입력 데이터는 바뀌면 안됨 -> Ajax
            //url -> /product/name-check
            //서버에서 전달되는 데이터를 result로 받음 -> 가져온 데이터가 null이면 사용 가능, 있으면 중복
            var encodedName = encodeURIComponent(name); //이게 없으면 띄어쓰기 인식 안됨

            $.ajax({
                method: "GET",
                url: "/product/name-check?name="+encodedName
            }).done((res)=>{

                console.log(res);
                if (res.body === true) {
                    $("#nameCheck").removeClass("alert-danger");
                    $("#nameCheck").addClass("alert-success");
                    $("#nameCheck").text("사용 가능한 상품명 입니다.");
                } else {
                    $("#nameCheck").removeClass("alert-success");
                    $("#nameCheck").addClass("alert-danger");
                    $("#nameCheck").text("중복된 상품명 입니다.");
                }
            }).fail((res)=>{
                alert("통신 오류");   //이게 진짜 통신 오류! 
            });

        });


        //천단위 구분자 찍기
        $(document).ready(function() {
            // 가격 입력 필드에 대한 이벤트 리스너 추가
            $('#price').on('input', function() {
                // 입력된 값에서 숫자만 추출
                var number = $(this).val().replace(/[^0-9]/g, '');
                // 천 단위 구분자 적용
                var changeNum = number.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                // 변환된 값으로 입력 필드 업데이트
                $(this).val(changeNum);

            });

            $('#qty').on('input', function() {
                // 입력된 값에서 숫자만 추출
                var number = $(this).val().replace(/[^0-9]/g, '');
                // 천 단위 구분자 적용
                var changeNum = number.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                // 변환된 값으로 입력 필드 업데이트
                $(this).val(changeNum);
            });


            // 폼 제출 전 실행될 이벤트
            $('form').on('submit', function() {
                // 가격과 수량 입력 필드에서 천 단위 구분자 제거
                var price = $('#price').val().replace(/,/g, '');
                $('#price').val(price);
                // 수량 필드에 대해서도 같은 처리를 수행
                var qty = $('input[name="qty"]').val().replace(/,/g, '');
                $('input[name="qty"]').val(qty);
            });
        });
    </script>

{{> layout/footer}}

클라이언트 사이드 (웹 페이지): 
사용자가 입력한 이름을
$("#nameCheck").load("/product/name-check?name=" + name, ... 코드를 통해 서버로 보낸다. 
이 코드는 jQuery를 사용하여 /product/name-check라는 주소로 
name이라는 정보를 쿼리 스트링(?name=사용자이름)으로 붙여서 요청한다.

서버 사이드 (Spring MVC 컨트롤러): 
@GetMapping("/product/name-check")으로 매핑된 nameSameCheck 메소드가 이 요청을 받는다. 
요청에서 name 쿼리 스트링의 값을 자동으로 name 파라미터에 넣어준다. 
그리고 이 이름으로 상품을 검색해서 이미 존재하면 "false"를, 
존재하지 않으면 "true"를 반환.

즉, 웹 페이지에서 서버로 이름을 보내 확인하는 과정을 쿼리 스트링을 사용해 수행한다. 
서버는 이 정보를 받아서 처리 후 결과를 다시 웹 페이지로 반환한다.

[ @ResponseBody를 사용한 이유 ]

서버에서 클라이언트로 직접 문자열이나 데이터를 보내주기 위해서. 
예를 들어, 여러분이 쇼핑몰에서 상품 이름이 이미 사용되고 있는지 확인하고 싶을 때,
서버는 그 상품 이름이 사용 가능한지 ("true") 
또는 사용 불가능한지 ("false")를 알려줘야 함.

이때, @ResponseBody가 없으면, 스프링은 "true"나 "false"를 화면 이름으로 이해한다. 
하지만 우리의 목적은 화면을 찾는 것이 아니라, 
이 문자열 자체를 웹 페이지로 직접 보내주는 것! 

그래서 @ResponseBody를 사용하여 메소드에서 반환된 "true"나 "false" 문자열을 
바로 웹 페이지로 보내줄 수 있게 했다.