* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

숙제 풀의 강의도 듣고 코드스니펫도 보면서 해봤는데 웹을 띄우고 어느 부분에서 업데이트가 되는건지 잘 모르겠어요

처음에 관심상품 등록하면서 myprice 설정하고, 다시 같은 상품의 myprice를 수정하면 모아보기 탭의 상품 최저가가 바뀌는것으로 생각했는데 그냥 상품이 하나 더 추가가되는데 이렇게 되면 새로고침이 되는것 말고는 똑같은것같은데 맞나요?

-> 위에서 3번째 상품 관심상품 담기

-> 결과

-> 같은 상품 관심상품 담기

-> 결과

basic.js

let targetId;

$(document).ready(function () {
    // id 가 query 인 녀석 위에서 엔터를 누르면 execSearch() 함수를 실행하라는 뜻입니다.
    $('#query').on('keypress', function (e) {
        if (e.key == 'Enter') {
            execSearch();
        }
    });
    $('#close').on('click', function () {
        $('#container').removeClass('active');
    })

    $('.nav div.nav-see').on('click', function () {
        $('div.nav-see').addClass('active');
        $('div.nav-search').removeClass('active');

        $('#see-area').show();
        $('#search-area').hide();
    })
    $('.nav div.nav-search').on('click', function () {
        $('div.nav-see').removeClass('active');
        $('div.nav-search').addClass('active');

        $('#see-area').hide();
        $('#search-area').show();
    })

    $('#see-area').show();
    $('#search-area').hide();

    showProduct();
})


function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

//////////////////////////////////////////////////////////////////////////////////////////
///// 여기 아래에서부터 코드를 작성합니다. ////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////

//검색 실행
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){ //response : itemDto에 들어갈 응답값이 들어있음
            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 만들고 검색결과 목록에 붙이기!

}

function addHTML(itemDto) {
    /**
     * class="search-itemDto" 인 녀석에서
     * image, title, lprice, addProduct 활용하기
     * 참고) onclick='addProduct(${JSON.stringify(itemDto)})'
     *      -> itemDto는 json 형태이지만 괄호 안에는 문자열 형태가 들어가야 한다
     */
    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>`
}

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',
        data: JSON.stringify(itemDto),
        contentType: 'application/json',
        success: function (response) {
            $('#container').addClass('active');
            targetId = response.id;
        }
    })
    // 2. 응답 함수에서 modal을 뜨게 하고, targetId 를 reponse.id 로 설정 (숙제로 myprice 설정하기 위함)

}

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


}

function addProductItem(product) {
    // link, image, title, lprice, myprice 변수 활용하기
    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>원
                        <span>myprice &nbsp; ${numberWithCommas(product.myprice)}원</span>
                    </div>
                    <div class="isgood ${product.lprice <= product.myprice ? '' : 'none'}">
<!--                    (조건) ? (참일 경우 반환) : (거짓일 경우 반환)-->
                        최저가
                    </div>
                </div>
            </div>`;
}

function setMyprice() {

    // 숙제! myprice 값 설정하기.
    // id가 myprice 인 input 태그에서 값을 가져온다.
    let myprice = $('#myprice').val();
    // 만약 값을 입력하지 않았으면 alert를 띄우고 중단한다.
    if (myprice == '') {
        alert("올바른 가격을 입력 해 주세요.")
        return;
    }
    // PUT /api/product/${targetId} 에 data를 전달한다.
    $.ajax({
        type: 'PUT',
        url: `/api/products/${targetId}`,
        data: JSON.stringify({myprice:myprice}),
        contentType: 'application/json',
        success: function (response) {
            $('#container').removeClass('active');
            alert('성공적으로 등록되었습니다.')
            window.location.reload();
        }
    })
    // 주의) contentType: "application/json",
    //      data: JSON.stringify({myprice: myprice}),
    //      빠뜨리지 말 것!
    // 모달을 종료한다. $('#container').removeClass('active');
    // 성공적으로 등록되었음을 알리는 alert를 띄운다.
    // 창을 새로고침한다. window.location.reload();
}

ProductRestController.java

package com.sparta.week04.Controller;

import com.sparta.week04.medels.Product;
import com.sparta.week04.medels.ProductMypriceRequestDto;
import com.sparta.week04.medels.ProductRepository;
import com.sparta.week04.medels.ProductRequestDto;
import com.sparta.week04.service.ProductService;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RequiredArgsConstructor // final로 선언된 멤버 변수를 자동으로 생성합니다.
@RestController // JSON으로 데이터를 주고받음을 선언합니다.
public class ProductRestController {

    private final ProductService productService;
    private final ProductRepository productRepository;

    // 등록된 전체 상품 목록 조회@GetMapping("/api/products")public List<Product> getProducts() {

        return productRepository.findAll();
    }

    // 신규 상품 등록@PostMapping("/api/products")public Product createProduct (@RequestBody ProductRequestDto requestDto) {
        Product product = new Product(requestDto);
        return productRepository.save(product);
    }

    // 설정 가격 변경@PutMapping("/api/products/{id}")public Long updateProduct(@PathVariable Long id, @RequestBody ProductMypriceRequestDto requestDto) {
        return productService.update(id, requestDto);
    }
}

ProductService.java

package com.sparta.week04.service;

import com.sparta.week04.medels.ItemDto;
import com.sparta.week04.medels.Product;
import com.sparta.week04.medels.ProductMypriceRequestDto;
import com.sparta.week04.medels.ProductRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;

import javax.transaction.Transactional;

@RequiredArgsConstructor // final로 선언된 멤버 변수를 자동으로 생성합니다.
@Service // 서비스임을 선언합니다.
public class ProductService {

    private final ProductRepository productRepository;

    @Transactional // 메소드 동작이 SQL 쿼리문임을 선언합니다.public Long update(Long id, ProductMypriceRequestDto requestDto) {
        Product product = productRepository.findById(id).orElseThrow(
                () -> new NullPointerException("해당 아이디가 존재하지 않습니다.")
        );
        product.update(requestDto);
        return id;
    }

    @Transactional // 메소드 동작이 SQL 쿼리문임을 선언합니다.public void updateBySearch(Long id, ItemDto itemDto) {
        Product product = productRepository.findById(id).orElseThrow(
                () -> new NullPointerException("해당 아이디가 존재하지 않습니다.")
        );
        product.updateByItemDto(itemDto);
    }
}