1. HTML, 이미지 파일 준비하기

• index.html, basic.js, style.css (src > main > resources > static)

파일 분리

1. head 태그안에 css, js 경로 설정

<link rel="stylesheet" href="style.css">
<script src="basic.js"></script>

2. images 폴더 생성 (src > main > resources > static)

2. 상품 검색 기능 만들기

execSearch 만들기

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

}

addHTML 함수 만들기

1. 해당 값에 '${값}' 으로 변경
2. addProduct 등록: JSON.stringify, JSON을 문자열로 변경
3. link는 등록한 아이템에서 이용하므로 없음

function addHTML(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)})'>
                </div>
            </div>`
}

3. 관심 상품 등록하기

addProduct 함수 만들기

/**
 * modal 뜨게 하는 법: $('#container').addClass('active');
 * data를 ajax로 전달할 때는 두 가지가 매우 중요
 * 1. contentType: "application/json",
 * 2. data: JSON.stringify(itemDto),
 */
// 1. POST /api/products 에 관심 상품 생성 요청
function addProduct(itemDto) {
    /**
     * modal 뜨게 하는 법: $('#container').addClass('active');
     * data를 ajax로 전달할 때는 두 가지가 매우 중요
     * 1. contentType: "application/json",
     * 2. data: JSON.stringify(itemDto),
     */
    // 1. POST /api/products 에 관심 상품 생성 요청
    $.ajax({
        type: "POST",
        url: '/api/products',
        contentType: "application/json",
        data: JSON.stringify(itemDto),
        success: function (response) {
            // 2. 응답 함수에서 modal을 뜨게 하고, targetId 를 reponse.id 로 설정
            $('#container').addClass('active');
            targetId = response.id;
        }
    })
}

}

4. 관심 상품 보여주기

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);
    }
}

addProductItem 만들기

function addProductItem(product) {
    // link, image, title, lprice, myprice 변수 활용하기
    return `<div class="product-card"token interpolation">${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>`;
}