[웹개발의 봄, Spring] 4주차 (3) - <나만의 셀렉샵> 클라이언트

[웹개발의 봄, Spring] 4주차 (1) - 네이버 쇼핑 API 이용하기

[웹개발의 봄, Spring] 4주차 (2) - <나만의 셀렉샵> 서버

---

<나만의 셀렉샵> 클라이언트

🔎 상품 검색기능

execSearch, addHTML 함수 만들기

: 검색어를 검색한 뒤(execSearch) 관련 정보들을 화면에 띄워주기(addHTML)

 

구현 순서

1. 검색창 입력값 받아오기 (입력값 없을 경우 alert, focus)

2. GET /api/search?query=%=${query} 요청

3. for문으로 itemDto들 꺼내서 HTML 만들어 띄워주기

4. addHTML 완성하기

 

execSearch()

function execSearch() {
    /**
     * 검색어 input id: query
     * 검색결과 목록: #search-result-box
     * 검색결과 HTML 만드는 함수: addHTML
     */
    // 원래녀석 지워주기
    $('#search-result-box').empty();
    // 1. 검색창의 입력값을 가져온다.
    let query = $('#query').val();
    // 2. 검색창 입력값을 검사하고, 입력하지 않았을 경우 focus.
    if (query == ''){
        alert("검색어를 입력해주세요.");
        $('#query').focus();
    }
    // 3. GET /api/search?query=${query} 요청
    $.ajax({
        type: 'GET',
        url: `/api/search?query=${query}`,
        success: function(response){
            for(let i=0; i<response.length; i++){
                let itemDto = response[i];
                let tempHtml = addHTML(itemDto);
                $('#search-result-box').append(tempHtml);
            }
        }
    })
    // 4. for 문마다 itemDto를 꺼내서 HTML 만들고 검색결과 목록에 붙이기!

}

 

addHTML()

function addHTML(itemDto) {
    /**
     * class="search-itemDto" 인 녀석에서
     * image, title, lprice, addProduct 활용하기
     * 참고) onclick='addProduct(${JSON.stringify(itemDto)})'
     */
    return `<div class="search-itemDto">
                        <div class="search-itemDto-left">
                            <img src="${itemDto.image}" alt="">
                        </div>
                        <div class="search-itemDto-center">
                            <div>${itemDto.title}</div>
                            <div class="price">
                                ${numberWithCommas(itemDto.lprice)}
                                <span class="unit">원</span>
                            </div>
                        </div>
                        <div class="search-itemDto-right">                        	
                            <img src="images/icon-save.png" alt="" onclick='addProduct(${JSON.stringify(itemDto)})'>
                            /**
                            itemDto를 전달해줘야함. 근데 itemDto는 JSON!
                            하지만 string형태로 전달을 해주어야 하기 때문에 JSON을 String으로 변환해주어야 한다.
                            **/
                        </div>
                    </div>`
}

 

🔎 관심 상품 등록하기

addProduct 함수 만들기

: 저장하기 버튼 누르면 데이터에 등록시키는 함수

 

구현 순서

1. 저장하기 버튼을 눌렀을 때 '관심 상품을 생성'을 요청

2. modal창 뜨게 하기 (최저가 설정하기 modal)

3. targetId 설정해주기 

function addProduct(itemDto) {
    /**
     * modal 뜨게 하는 법: $('#container').addClass('active');
     * data를 ajax로 전달할 때는 두 가지가 매우 중요
     * 1. contentType: "application/json",
     * 2. data: JSON.stringify(itemDto),
     */
    // 백으로 전달할 때 JSONstringify 다시 해주어야함.
    // js는 string으로 받아온 정보더라고 다시 JSON으로 바꿔주기 때문
    // 1. POST /api/products 에 관심 상품 생성 요청
    $.ajax({
        type: "POST",
        url:"/api/products",
        data: JSON.stringify(itemDto),
        contentType: "application/json",
        success: function(response){
        	// modal창 active
             $('#container').addClass('active');
             // 들어온 id 값 저장해주기
             targetId = response.id;
        }
    })
    // 2. 응답 함수에서 modal을 뜨게 하고, targetId 를 reponse.id 로 설정 (숙제로 myprice 설정하기 위함)

}

 

🔎 관심 상품 조회하기

1. $(document).ready

새로고침, 페이지로딩될 때마다 이함수내의 모든것이 실행된다

여기서 showProdcut인 함수에 관심상품 조회를 해줄것

 

2. showProduct

function showProduct() {
    /**
     * 관심상품 목록: #product-container
     * 검색결과 목록: #search-result-box
     * 관심상품 HTML 만드는 함수: addProductItem
     */
    // 1. GET /api/products 요청
    $.ajax({
        type: 'GET',
        url:'/api/products',
        success: function(response){
            // 2. 관심상품 목록, 검색결과 목록 비우기
            $('#product-container').empty();
            $('#search-result-box').empty();
            // 3. for 문마다 관심 상품 HTML 만들어서 관심상품 목록에 붙이기!
            for (let i =0;i<response.length;i++){
                let product = response[i];
                let tempHtml = addProductItem(product);
                $('#product-container').append(tempHtml);
            }
        }
    })
}

 

3. addProductItem

관심상품 하나당 html = #product-card 임!
상품 하나하나를 append해주면 되기 때문에 html의 코드를 복사해온 뒤

link, image, title, lprice, myprice 변수들을 활용한다.

function addProductItem(product) {
    return `<div class="product-card" onclick="window.location.href='${product.link}'">
                <div class="card-header">
                    <img src="${product.image}"
                         alt="">
                </div>
                <div class="card-body">
                    <div class="title">
                        ${product.title}
                    </div>
                    <div class="lprice">
                        <span>${numberWithCommas(product.lprice)}</span>원
                    </div>
                    <div class="isgood ${product.lprice > product.myprice ? 'none' : ''}">
                        최저가
                    </div>
                </div>
            </div>`;
}