2023.05.31 87일차 Team Project

87일차

메인페이지 구상하기
내브바
배너
가장 많이 팔린 상품 6개
쇼핑하러가기
footer

위시리스트(찜하기)
좋아요방식사용
로그인하면 눌러지게 즐겨찾기 누르면 누르기
실시간으로 변하는것 보이기
눌러져잇으면 색변하게 보이기

멤버 id별 좋아요 목록 보기
찜목록 삭제하기
상품 상세페이지로 가기

테이블
멤버 id 상품 id 좋아요 여부?

즐겨찾기 기능(목록 추가하기(ajax) 기능 등등)

로그인안하면 버튼 안눌리게
눌려잇으면 색변하게
메인페이지

1. 즐겨찾기 테이블

기본키 생성하고 멤버아이디와 상품id를 필드로 받는다.

CREATE TABLE whishlist (
    id INT PRIMARY KEY AUTO_INCREMENT,
    member_id VARCHAR(30),
    product_id INT
);

2. 아이디별 목록 보기

@GetMapping("list/{id}")
public String wishList(@PathVariable("id") String memberId, Authentication authentication) {
    return "wish/list";
}

찜목록 index - 반복문 index
이미지(상품id로)
상품명 (상품id로 join해서 받아오기)
원산지(상품id로)
가격(상품id로)
재고(상품id로)
상세페이지로 연결해주는 링크
카테고리(상품id로 가져오기)

3.테이블

memberId 별로 각각 데이터를 얻어와서 리스트를 만들것이기때문에
memberId는 리스트에 넣을 필요가 없다.

@Data
public class WishListView {
    private Integer id;
    private String memberId;
    private Integer productId;
    private String productName;
    private String countryOfOrigin;
    private Double price;
    private Integer stockQuantity;
    private Integer categoryId;
    private String categoryName;
    private String description;
    private Integer pub;

    private List<String> fileName;
}

컨트롤러 매퍼 등등

4. 삭제 버튼 누르면 productid받아서 삭제하기

id를 delteBtn상품이름으로 만들었다.

function listView(memberId) {
    $.ajax("/wish/view?memberId=" + memberId, {
        method: "get", // 생략 가능
        success: function(productList) {
            $("#viewTable > tbody").empty();
            productList.forEach(function(product, index) {
                let productLink = '';
                if (product.pub === 0 || product.stockQuantity === 0) {
                    productLink = '<a class="deleteBtn btn btn-secondary me-3 disabled">상품준비중</a>';
                } else {
                    productLink = `<a class="deleteBtn btn btn-secondary me-3" href="/product/info/${product.productId}">상품페이지로</a>`;
                }

                $("#viewTable > tbody").append(`
    <tr>
      <td>${index + 1}</td>
      <td>
        <img alt="사진준비중" src="${bucketUrl}/product/1.png" width="100" height="100">
      </td>
      <td>${product.productName}</td>
      <td>${product.categoryName}</td>
      <td>${product.countryOfOrigin}</td>
      <td>${product.stockQuantity}
        <span class="badge text-bg-danger ${product.stockQuantity === 0 ? '' : 'd-none'}">품절</span>
      </td>
      <td>${product.price}원</td>
      <td>
        ${productLink}
        <button id="deleteBtn${product.productId}" class="btn btn-danger" data-id="${product.productId}">삭제</button>
      </td>
    </tr>`);
                $(`#deleteBtn${product.productId}`).on("click", function() {
                    handleDeleteButtonClick(`${product.productId}`);
                });
            });
        }
    });
}

---

// 클릭 이벤트 처리 함수
function handleDeleteButtonClick(productId) {
    // 삭제 버튼이 클릭되었을 때 실행되는 코드
    const data = {
        "productId": productId,
        "memberId": memberId
    }

    $.ajax("/wish/delete", {
        method: "post",
        contentType: "application/json",
        data: JSON.stringify(data),
        complete: function() {
            listView(memberId);
        }
    });
}

각 버튼이 처리되는 방법에 대해서 고민을 하게 되었다.

HTML5의의 data속성을 활용하게 되었다.
data-productid는 HTML5의 데이터 속성(data attribute)이다.
데이터 속성은 HTML 요소에 추가적인 데이터를 저장하기 위해 사용된다.

이름은 data-로 시작하며, data- 다음에는 원하는 속성 이름을 지정할 수 있다.
JavaScript에서는 jQuery 라이브러리를 사용하여 데이터 속성에 접근할 수 있다.
jQuery의 data() 메서드를 사용하여 데이터 속성의 값을 가져오거나 설정할 수 있다.
$(selector).data('속성이름')을 사용하면 해당 속성의 값을 가져올 수 있다.

위 코드에서 data-productid="${product.productId}"는 data-productid라는 이름의 데이터 속성을 생성하고 그 값으로 product.productId를 설정하는 것이다.
클릭 이벤트 핸들러 내부에서 $(this).data('productid')를 사용하여 해당 데이터 속성의 값을 가져온다.

이런방법으로 각 버튼을 처리하고 상품id를 넘기게 되었다.

ajax로 가져온 목록을 반복해서 나타내기 위해 자바스크립트의 forEach를 사용했다.
JavaScript의 forEach 메소드는 배열 요소를 반복하면서 콜백 함수를 실행하며 이 콜백 함수에는 세 개의 매개변수가 전달된다. 요소 값, 요소 인덱스, 배열 전체

따라서 productList.forEach(function(product, index) { ... })의 문법을 보면
productList 배열의 각 요소에 대해 콜백 함수가 실행될 때 product에는 현재 요소의 값이 할당되고 index에는 현재 요소의 인덱스가 할당된다.

그래서 ${index + 1}을 통해 테이블의 인덱스 값을 표시할 수 있다.
index에 0부터 시작하는 인덱스 값이 할당되므로 표시할 때에는 index + 1을 사용하여 1부터 시작하는 인덱스 값을 표시하도록 조정하였다.

get요쳥으로 페이지 불러오기
찜목록 불러오기 - (함수 사용) ajax처리해서 목록불러오기
삭제시 함수 다시 사용해서 목록 다시 불러오기

상품이 비공개거나 품절이면 상품준비중 버튼 나오게 하기
상품이 공개일시만 상품페이지로 가게하기

2023.05.31

데이터 구조에 대해서 생각을 많이 해야할듯하다.

프로젝트 하면서 많이 성장하는 것 같다.
모든 것을 폼을 이용해서 get요청하는 새로운 것을 햇엇는데
get요청을 ajax로 받아올 수 있다는 것을 알게 되었다.