💷장바구니에 상품 담기

만드는 것 중엔 제일 어려운 편

📌CartItemDto 클래스 생성

package com.shop.dto;

import jakarta.validation.constraints.Min;
import jakarta.validation.constraints.NotNull;
import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class CartItemDto {

    // 제품 상세 페이지에서 장바구니에 담을 상품 Id 와 수량을 전달 받음
    @NotNull(message = "상품 아이디는 필수 입력 값 입니다.")
    private Long itemId;

    @Min(value = 1, message = "최소 1개 이상 담아주세요.")
    private int count;

}

📌Cart 엔티티 수정

...

    // 멤버를 파라미터로 받아서 장바구니를 생성하는 static 메소드 
    // static 👉 혼자 놀겠다
    public static Cart createCart(Member member){

        // 회원 한 명당 1개의 장바구니를 갖기 때문에
        // 처음 장바구니에 상품을 담을 때는 해당 회원의 장바구니를 생성
        Cart cart = new Cart();
        cart.setMember(member);

        return cart;

    }

}

📌CartItem 엔티티 수정

...

    // 장바구니에 담을 CartItem 객체를 생성하는 메소드
    public static CartItem createCartItem(Cart cart, Item item, int count){

        CartItem cartItem = new CartItem();
        cartItem.setCart(cart);
        cartItem.setItem(item);
        cartItem.setCount(count);

        return cartItem;

    }

    //장바구니에 담겨 있는 상품을 또 장바구니로 담았을 경우 수량 증가
    public void addCount(int count) {
        this.count += count;
    }

}

📌CartRepository 인터페이스 수정

package com.shop.repository;

import com.shop.entity.Cart;
import com.shop.entity.CartItem;
import org.springframework.data.jpa.repository.JpaRepository;


// 쿼리문 날리는 JpaRepository
public interface CartRepository extends JpaRepository<Cart, Long> {

	//현재 로그인한 유저의 장바구니(Cart)를 찾기 위한 쿼리 메소드
    Cart findByMemberId(Long memberId);
    
}

📌CartItemRepository 인터페이스 생성

package com.shop.repository;

import com.shop.entity.CartItem;
import org.springframework.data.jpa.repository.JpaRepository;

public interface CartItemRepository extends JpaRepository<CartItem, Long> {

    // 상품이 장바구니에 들어있는지 조회하는 쿼리 메소드
    CartItem findByCartIdAndItemId(Long cartId, Long itemId);

}

📌CartService 클래스 생성

package com.shop.service;

import com.shop.dto.CartItemDto;
import com.shop.entity.Cart;
import com.shop.entity.CartItem;
import com.shop.entity.Item;
import com.shop.entity.Member;
import com.shop.repository.CartItemRepository;
import com.shop.repository.CartRepository;
import com.shop.repository.ItemRepository;
import com.shop.repository.MemberRepository;
import jakarta.persistence.EntityExistsException;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

@Service
@Transactional
@RequiredArgsConstructor
public class CartService {

    private final ItemRepository itemRepository;
    private final MemberRepository memberRepository;
    private final CartRepository cartRepository;
    private final CartItemRepository cartItemRepository;

    public Long addCart(CartItemDto cartItemDto, String email){

        Item item = itemRepository.findById(cartItemDto.getItemId())
                .orElseThrow(EntityExistsException::new);

        Member member = memberRepository.findByEmail(email);

        Cart cart = cartRepository.findByMemberId(member.getId());

        // 장바구니가 없으면 생성
        if (cart == null){

            cart = Cart.createCart(member);
            cartRepository.save(cart);

        }

        CartItem savedCartItem = cartItemRepository.
                findByCartIdAndItemId(cart.getId(), item.getId());

        // 해당 상품이 장바구니에 이미 존재 하면 수량 증가 👉 변경 감지
        if (savedCartItem != null){

            savedCartItem.addCount(cartItemDto.getCount());

            return savedCartItem.getId();

        }
        // 장바구니 안에 해당 상품이 존재 하지 않으면 생성 후 추가
        else {

            CartItem cartItem = CartItem.createCartItem(cart, item, cartItemDto.getCount());
            cartItemRepository.save(cartItem);

            return cartItem.getId();

        }

    }

}

📌CartController 클래스 생성

package com.shop.controller;

import com.shop.dto.CartItemDto;
import com.shop.service.CartService;
import jakarta.validation.Valid;
import lombok.RequiredArgsConstructor;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;

import java.security.Principal;
import java.util.List;

@Controller
@RequiredArgsConstructor
public class CartController {

    private final CartService cartService;

    @PostMapping(value = "/cart")
    public @ResponseBody
    ResponseEntity order(@RequestBody @Valid CartItemDto cartItemDto,
                         BindingResult bindingResult, Principal principal){

        if (bindingResult.hasErrors()){

            StringBuilder sb = new StringBuilder();
            List<FieldError> fieldErrors = bindingResult.getFieldErrors();

            for (FieldError fieldError : fieldErrors){

                sb.append(fieldError.getDefaultMessage());

            }

            return new ResponseEntity<String>(sb.toString(), HttpStatus.BAD_REQUEST);

        }

        String email = principal.getName();
        Long cartItemId;

        try {

            // 제품 상세 페이지에서 넘어온 CartItemDto 객체와 email
            cartItemId = cartService.addCart(cartItemDto, email);

        }catch (Exception e){

            return new ResponseEntity<String>(e.getMessage(), HttpStatus.BAD_REQUEST);

        }

        return new ResponseEntity<Long>(cartItemId, HttpStatus.OK);

    }

}

🤦‍♀️CartService 테스트 해보기

package com.shop.service;

import com.shop.constant.ItemSellStatus;
import com.shop.dto.CartItemDto;
import com.shop.entity.CartItem;
import com.shop.entity.Item;
import com.shop.entity.Member;
import com.shop.repository.CartItemRepository;
import com.shop.repository.ItemRepository;
import com.shop.repository.MemberRepository;
import jakarta.persistence.EntityNotFoundException;
import org.junit.jupiter.api.DisplayName;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.TestPropertySource;
import org.springframework.transaction.annotation.Transactional;

import static org.junit.jupiter.api.Assertions.*;

@SpringBootTest
@Transactional
@TestPropertySource(locations = "classpath:application-test.properties")
class CartServiceTest {

    @Autowired
    ItemRepository itemRepository;

    @Autowired
    MemberRepository memberRepository;

    @Autowired
    CartService cartService;

    @Autowired
    CartItemRepository cartItemRepository;

    public Item saveItem(){

        Item item = new Item();
        item.setItemNm("테스트 상품");
        item.setPrice(10000);
        item.setItemDetail("테스트 상품 상세 설명");
        item.setItemSellStatus(ItemSellStatus.SELL);
        item.setStockNumber(100);

        return itemRepository.save(item);

    }

    public Member saveMember(){

        Member member = new Member();
        member.setEmail("test@test.com");

        return memberRepository.save(member);

    }

    @Test
    @DisplayName("장바구니 담기 테스트")
    public void addCart(){

        Item item = saveItem();
        Member member = saveMember();

        CartItemDto cartItemDto = new CartItemDto();
        cartItemDto.setCount(5);
        cartItemDto.setItemId(item.getId());

        Long cartItemId = cartService.addCart(cartItemDto, member.getEmail());
        CartItem cartItem = cartItemRepository.findById(cartItemId)
                .orElseThrow(EntityNotFoundException::new);

        assertEquals(item.getId(), cartItem.getItem().getId());
        assertEquals(cartItemDto.getCount(), cartItem.getCount());

        System.out.println("item.getId() : " + item.getId());
        System.out.println("cartItem.getItem().getId() : " + cartItem.getItem().getId());

        System.out.println("--------------------------------------------------");

        System.out.println("cartItemDto.getCount() : " + cartItemDto.getCount());
        System.out.println("cartItem.getCount() : " + cartItem.getCount());

    }

}

📍결과

📌ItemDtl.html에 AJAX 추가

        function addCart(){

            // Ajax 통신할 때, csrf 토큰 값을 조회해서 직접 보내야함
            var token = $("meta[name = '_csrf']").attr("content");
            var header = $("meta[name = '_csrf_header']").attr("content");

            var url = "/cart";

            var paramData = {

                itemId : $("#itemId").val(),
                count : $("#count").val()

            };

            var param = JSON.stringfy(paramData);

            $.ajax({

                url : url,
                type : "POST",
                contentType : "application/json",
                data : param,
                beforeSend : function(xhr){
                    // 데이터를 전송하기 전에 헤더의 csrf 값을 설정
                    xhr.setRequestHeader(header, token);
                },
                dataType : "json",
                cache : false,
                success : function(result, status){
                    alert("상품을 장바구니에 담았습니다.");
                    location.href = '/';
                },
                error : function(jqXHR, status, error){
                    if(jqXHR.status == '401'){
                        alert('로그인 후 이용해주세요');
                        location.href = '/members/login';
                    }
                    else{
                        alert(jqXHR.responseText);
                    }
                }

            });

        }

📌결과

👉 10개 더 담아보자

👉 아직 로직을 짜지 않아서 500개가 담겨버린다

👉 Cart DB 에도 담겨버림..

👉 재고는 그대로

❓어떤 구조로 실행?

🔥Todo

• 회원가입 화면
• 로그인 화면
• ??? 님 환영합니다 등 이쁘게 꾸며보자

---

📖장바구니 조회하기

📌CartDetailDto 클래스 생성

package com.shop.dto;

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class CartDetailDto {

    private Long cartItemId; // 장바구니 상품 아이디
    private String itemNm;   // 상품명
    private int price;       // 가격
    private int count;       // 수량
    private String imgUrl;   // 상품이미지 경로

    // CartItem 객체와 비슷 👉 List에 담긴다
    public CartDetailDto(Long cartItemId, String itemNm, int price, int count, String imgUrl) {
        this.cartItemId = cartItemId;
        this.itemNm = itemNm;
        this.price = price;
        this.count = count;
        this.imgUrl = imgUrl;
    }
}

📌CartItemRepository 인터페이스 수정

package com.shop.repository;

import com.shop.dto.CartDetailDto;
import com.shop.entity.CartItem;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;

import java.util.List;

public interface CartItemRepository extends JpaRepository<CartItem, Long> {

    // 상품이 장바구니에 들어있는지 조회하는 쿼리 메소드
    CartItem findByCartIdAndItemId(Long cartId, Long itemId);

    // select 부분에 new 키워드와 해당 DTO의 패키지, 클래스명을 지정
    // 👉 Dto객체를 만들어서 바로 넣는 형식
    @Query("select new com.shop.dto.CartDetailDto(ci.id, i.itemNm, i.price, ci.count, im.imgUrl)"
    + "from CartItem ci, ItemImg im "
    + "join ci.item i " // CartItem과 ItemImg 조인 👉 itemImg를 가지고 오려고
    + "where ci.cart.id = :cartId " // 조건1 : CartItem의 CartId와 외부 매개변수 CartId가 같은지 비교
    + "and im.item.id = ci.item.id " // 조건2 : CartItem의 itemId와 ItemImg의 itemId가 같은지 비교
    + "and im.repImgYn = 'Y' " // 조건3 : ItemImg 대표이미지
    + "order by ci.regTime desc") // 장바구니 등록시간 내림차순 기준으로 대표이미지 등록
    // 최적화를 위해 한 번에 반환 하도록 List<CartDetailDto> 타입 지정
    List<CartDetailDto> findCartDetailDtoList(Long cartId);

}

📌CartService 클래스 수정

...

    @Transactional(readOnly = true)
    // 현재 로그인한 유저의 장바구니에 존재하는 상품 조회
    public List<CartDetailDto> getCartList(String email){

        List<CartDetailDto> cartDetailDtoList = new ArrayList<>();

        // 로그인한 유저 정보
        Member member = memberRepository.findByEmail(email);

        // 유저의 장바구니 조회
        Cart cart = cartRepository.findByMemberId(member.getId());

        // 장바구니가 비어있으면 없는 채로 cartDetailDtoList 반환
        if (cart == null){

            return cartDetailDtoList;

        }

        // 비어있지 않으면 장바구니에 담긴 상품들을 cartDetailDtoList에 추가 후 반환
        cartDetailDtoList = cartItemRepository.findCartDetailDtoList(cart.getId());

        return cartDetailDtoList;

    }

}

📌CartController 클래스 수정

...

    @GetMapping(value = "/cart")
    public String orderHist(Principal principal, Model model){

        List<CartDetailDto> cartDetailDtoList = cartService.getCartList(principal.getName());

        model.addAttribute("cartItems", cartDetailDtoList);

        return "/cart/cartList";

    }

}

📌cartList.html 생성

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout1}">

<head>
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
</head>

<th:block layout:fragment="script">
    <script th:inline="javascript">

        // 체크 될 때 마다 총 금액을 구하는 함수 호출
        $(document).ready(function(){
            $("input[name=cartChkBox]").change( function(){
                getOrderTotalPrice();
            });
        });

        // 주문할 상품을 체크 하거나 해제할 경우 총 주문 금액을 구하는 함수
        function getOrderTotalPrice(){
            var orderTotalPrice = 0;
            // name 속성 값이 cartChkBox 이고 체크된 input 태그에 대해 각각 함수 수행
            $("input[name=cartChkBox]:checked").each(function() {
                var cartItemId = $(this).val();
                //id 가 price~ 인 태그를 지정
                var price = $("#price_" + cartItemId).attr("data-price");
                //id 가 count~ 인 태그를 지정
                var count = $("#count_" + cartItemId).val();
                orderTotalPrice += price * count;
            });

            $("#orderTotalPrice").html(orderTotalPrice+'원');
        }

        // 상품 수량 변경
        // 수량 부분의 수량을 변경 하면 changeCount() 실행
        function changeCount(obj){
            var count = obj.value; // 현재 수량
            var cartItemId = obj.id.split('_')[1]; // count_ + id 이므로 id를 추출
            // id = price{CartItemId} 엘리먼트 data 에서 key = price 인 value 추출
            var price = $("#price_" + cartItemId).data("price");
            var totalPrice = count * price;
            $("#totalPrice_" + cartItemId).html(totalPrice+"원");
            // 변경된 수량을 적용하기 위해 총 주문 금액을 수정 하는 getOrderTotalPrice() 실행
            getOrderTotalPrice();

            // DB 변경을 위한 updateCartItemCount 함수 호출
            updateCartItemCount(cartItemId, count);
        }

        // 전체 선택 또는 전체 해제
        function checkAll(){
            // checkall 태그의 프로퍼티 값이 checked 라면 cartChkBox 태그를 모두 checked 상태로 변경
            // .prop() : JavaScript의 프로퍼티를 취급 (true,false)
            // .attr() 은 HTML의 속성을 취급
            if($("#checkall").prop("checked")){
                $("input[name=cartChkBox]").prop("checked",true);
            }
            // checked 가 아니라면 모두 checked 상태를 해제
            else{
                $("input[name=cartChkBox]").prop("checked",false);
            }
            // 마지막에 총 주문 금액을 수정하는 getOrderTotalPrice() 함수 호출
            getOrderTotalPrice();
        }

        // 상품 수량 변경 DB 적용을 위해 "/cartItem/{cartItemId}?count=value" 요청
        function updateCartItemCount(cartItemId, count){
            var token = $("meta[name='_csrf']").attr("content");
            var header = $("meta[name='_csrf_header']").attr("content");

            // 상품 Id 값은 PathVariable, 수량(count)은 QueryString
            var url = "/cartItem/" + cartItemId+"?count=" + count;

            $.ajax({
                url      : url,
                // 일 부분만 수정 하기 위해 PATCH 요청
                type     : "PATCH",
                beforeSend : function(xhr){
                    /* 데이터를 전송하기 전에 헤더에 csrf값을 설정 */
                    xhr.setRequestHeader(header, token);
                },
                dataType : "json",
                cache   : false,
                success  : function(result, status){
                    console.log("cartItem count update success");
                },
                error : function(jqXHR, status, error){

                    if(jqXHR.status == '401'){
                        alert('로그인 후 이용해주세요');
                        location.href='/members/login';
                    } else{
                        alert(jqXHR.responseText);
                    }

                }
            });
        }

        // 장바구니 삭제 요청
        function deleteCartItem(obj){
            var cartItemId = obj.dataset.id;
            var token = $("meta[name='_csrf']").attr("content");
            var header = $("meta[name='_csrf_header']").attr("content");

            var url = "/cartItem/" + cartItemId;

            $.ajax({
                url      : url,
                type     : "DELETE",
                beforeSend : function(xhr){
                    /* 데이터를 전송하기 전에 헤더에 csrf값을 설정 */
                    xhr.setRequestHeader(header, token);
                },
                dataType : "json",
                cache   : false,
                success  : function(result, status){
                    location.href='/cart';
                },
                error : function(jqXHR, status, error){

                    if(jqXHR.status == '401'){
                        alert('로그인 후 이용해주세요');
                        location.href='/members/login';
                    } else{
                        alert(jqXHR.responseText);
                    }

                }
            });
        }
        
        // 장바구니 상품(들) 주문
        function orders(){
            var token = $("meta[name='_csrf']").attr("content");
            var header = $("meta[name='_csrf_header']").attr("content");

            var url = "/cart/orders";

            var dataList = new Array();
            var paramData = new Object();

            $("input[name=cartChkBox]:checked").each(function() {
                var cartItemId = $(this).val();
                var data = new Object();
                data["cartItemId"] = cartItemId;
                dataList.push(data);
            });

            paramData['cartOrderDtoList'] = dataList;

            var param = JSON.stringify(paramData);

            $.ajax({
                url      : url,
                type     : "POST",
                contentType : "application/json",
                data     : param,
                beforeSend : function(xhr){
                    /* 데이터를 전송하기 전에 헤더에 csrf값을 설정 */
                    xhr.setRequestHeader(header, token);
                },
                dataType : "json",
                cache   : false,
                success  : function(result, status){
                    alert("주문이 완료 되었습니다.");
                    location.href='/orders';
                },
                error : function(jqXHR, status, error){

                    if(jqXHR.status == '401'){
                        alert('로그인 후 이용해주세요');
                        location.href='/members/login';
                    } else{
                        alert(jqXHR.responseText);
                    }

                }
            });
        }
    </script>
</th:block>

<th:block layout:fragment="css">
    <style>
        .content-mg{
            margin-left:25%;
            margin-right:25%;
            margin-top:2%;
            margin-bottom:100px;
        }
        .repImgDiv{
            margin-right:15px;
            margin-left:15px;
            height:auto;
        }
        .repImg{
            height:100px;
            width:100px;
        }
        .fs18{
            font-size:18px
        }
        .fs24{
            font-size:24px
        }
    </style>
</th:block>

<div layout:fragment="content" class="content-mg">

    <h2 class="mb-4">장바구니 목록</h2>

    <div>
        <table class="table">
            <colgroup>
                <col width="15%"/>
                <col width="70%"/>
                <col width="15%"/>
            </colgroup>
            <thead>
            <tr class="text-center">
                <td>
                    <input type="checkbox" id="checkall" onclick="checkAll()"> 전체 선택
                </td>
                <td>상품 정보</td>
                <td>상품 금액</td>
            </tr>
            </thead>
            <tbody>
            <tr th:each="cartItem : ${cartItems}">
                <td class="text-center align-middle">
                    <input type="checkbox" name="cartChkBox" th:value="${cartItem.cartItemId}">
                </td>
                <td class="d-flex">
                    <div class="repImgDiv align-self-center">
                        <img th:src="${cartItem.imgUrl}" class="rounded repImg" th:alt="${cartItem.itemNm}">
                    </div>
                    <div class="align-self-center">
                        <span th:text="${cartItem.itemNm}" class="fs24 font-weight-bold"></span>
                        <div class="fs18 font-weight-light">
                            <span class="input-group mt-2">
                                <!--// id = price{CartItemId} 엘리먼트에 data 자료구조 생성 후 key = price 에 대한 value 지정-->
                                <span th:id="'price_' + ${cartItem.cartItemId}"
                                      th:data-price="${cartItem.price}"
                                      th:text="${cartItem.price} + '원'" class="align-self-center mr-2">
                                </span>
                                <input type="number" name="count" th:id="'count_' + ${cartItem.cartItemId}"
                                       th:value="${cartItem.count}" min="1" onchange="changeCount(this)"
                                       class="form-control mr-2">
                                <button type="button" class="close" aria-label="Close">
                                    <span aria-hidden="true" th:data-id="${cartItem.cartItemId}"
                                          onclick="deleteCartItem(this)">&times;</span> <!-- &times;는 X 모양임 -->
                                </button>
                            </span>
                        </div>
                    </div>
                </td>
                <td class="text-center align-middle">
                    <span th:id="'totalPrice_' + ${cartItem.cartItemId}"
                          name="totalPrice" th:text="${cartItem.price * cartItem.count} + '원'">
                    </span>
                </td>
            </tr>
            </tbody>
        </table>

        <h2 class="text-center">
            총 주문 금액 : <span id="orderTotalPrice" class="text-danger">0원</span>
        </h2>

        <div class="text-center mt-3">
            <button type="button" class="btn btn-success btn-lg" onclick="orders()">주문 하기</button>
        </div>
    </div>
</div>
</html>

📌결과

👉 DB와 같이 511개가 담겨있다

👉 수량 변경이나 주문하기 로직을 추가하면 끝

❓어떤 구조로 실행?

---

📖장바구니 수정하기

📌CartItem 엔티티 수정

...

    // 수량 변경을 하면 변경 감지로 업데이트 되는 메소드
    public void updateCount(int count){
        this.count = count;
    }

}

📌CartService 클래스 수정

...

    @Transactional(readOnly = true)
    public boolean validateCartItem(Long cartItemId, String email){

        Member curMember = memberRepository.findByEmail(email);

        CartItem cartItem = cartItemRepository.findById(cartItemId)
                .orElseThrow(EntityExistsException::new);

        Member savedMember = cartItem.getCart().getMember();

        // 현재 로그인한 유저와 해당 장바구니 상품의 저장한 유저가 같은지 검증
        if(!StringUtils.equals(curMember.getEmail(), savedMember.getEmail())){

            return false;

        }

        return true;

    }

    // 변경 감지를 통한 update
    public void updateCartItemCount(Long cartItemId, int count){

        CartItem cartItem = cartItemRepository.findById(cartItemId)
                .orElseThrow(EntityExistsException::new);

        cartItem.updateCount(count);

    }

}

📌CartController 클래스 수정

...

    @PatchMapping(value = "/cartItem/{cartItemId}")
    // 위에 존재하는 updateCartItemCount() 함수 호출 시 전송 되는 PATCH(수정) 요청에 대한 Controller
    public @ResponseBody ResponseEntity updateCartItem(@PathVariable("cartItemId") Long cartItemId,
                                                       int count, Principal principal){

        System.out.println(cartItemId);

        // 현재 로그인한 유저와 해당 장바구니 상품의 저장한 유저가 같은지 검증
        if (count <= 0){

            return new ResponseEntity<String>("최소 1개 이상 담아주세요.", HttpStatus.BAD_REQUEST);

        }
        // 현재 로그인한 유저와 해당 장바구니 상품의 저장한 유저가 같은지 검증
        else if (!cartService.validateCartItem(cartItemId, principal.getName())){

            return new ResponseEntity<String>("수정 권한이 없습니다.", HttpStatus.FORBIDDEN);

        }

        // 바꾼 count 그대로 올림
        cartService.updateCartItemCount(cartItemId, count);

        return new ResponseEntity<Long>(cartItemId, HttpStatus.OK);

    }

}

📌cartList.html 수량 변경 AJAX

        // 상품 수량 변경 DB 적용을 위해 "/cartItem/{cartItemId}?count=value" 요청
        function updateCartItemCount(cartItemId, count){
            var token = $("meta[name='_csrf']").attr("content");
            var header = $("meta[name='_csrf_header']").attr("content");

            // 상품 Id 값은 PathVariable, 수량(count)은 QueryString
            var url = "/cartItem/" + cartItemId+"?count=" + count;

            $.ajax({
                url      : url,
                // 일 부분만 수정 하기 위해 PATCH 요청
                type     : "PATCH",
                beforeSend : function(xhr){
                    /* 데이터를 전송하기 전에 헤더에 csrf값을 설정 */
                    xhr.setRequestHeader(header, token);
                },
                dataType : "json",
                cache   : false,
                success  : function(result, status){
                    console.log("cartItem count update success");
                },
                error : function(jqXHR, status, error){

                    if(jqXHR.status == '401'){
                        alert('로그인 후 이용해주세요');
                        location.href='/members/login';
                    } else{
                        alert(jqXHR.responseText);
                    }

                }
            });
        }

📌결과

👉 100개로 변경하고 엔터

👉 자동으로 DB에 반영 됐다.

👉 1개 아래로 내려가지 않으며 0을 강제로 입력시 에러메세지가 잘 출력 된다

👉 DB에는 1개로 저장이 된다

📌어떤 구조로 실행?

---

📖장바구니 삭제하기

📌CartService 클래스 수정

...

    // 장바구니 상품 번호를 파라미터로 받아서 삭제
    public void deleteCartItem(Long cartItemId){

        CartItem cartItem = cartItemRepository.findById(cartItemId)
                .orElseThrow(EntityExistsException::new);
        cartItemRepository.delete(cartItem);

    }

}

📌CartController 클래스 수정

...

    // 삭제 요청이므로 DeleteMapping 어노테이션 지정
    @DeleteMapping(value = "/cartItem/{cartItemId}")
    public @ResponseBody ResponseEntity deleteCartItem(@PathVariable("cartItemId") Long cartItemId,
                                                       Principal principal){

        // 상품 삭제 요청을 하는 유저와 해당 장바구니 상품의 유저가 일치하는지 검증
        if (!cartService.validateCartItem(cartItemId, principal.getName())){

            return new ResponseEntity<String>("삭제 권한이 없습니다.", HttpStatus.FORBIDDEN);

        }

        cartService.deleteCartItem(cartItemId);

        return new ResponseEntity<Long>(cartItemId, HttpStatus.OK);

    }

}

📌cartList.html 삭제 AJAX

        // 장바구니 삭제 요청
        function deleteCartItem(obj){
            var cartItemId = obj.dataset.id;
            var token = $("meta[name='_csrf']").attr("content");
            var header = $("meta[name='_csrf_header']").attr("content");

            var url = "/cartItem/" + cartItemId;

            $.ajax({
                url      : url,
                type     : "DELETE",
                beforeSend : function(xhr){
                    /* 데이터를 전송하기 전에 헤더에 csrf값을 설정 */
                    xhr.setRequestHeader(header, token);
                },
                dataType : "json",
                cache   : false,
                success  : function(result, status){
                    location.href='/cart';
                },
                error : function(jqXHR, status, error){

                    if(jqXHR.status == '401'){
                        alert('로그인 후 이용해주세요');
                        location.href='/members/login';
                    } else{
                        alert(jqXHR.responseText);
                    }

                }
            });
        }

📌결과

👉 X 를 누르면 삭제가 된다.

❓어떤 구조로 실행?

---

📖장바구니 주문하기

📌CartOrderDto 클래스 생성

package com.shop.dto;

import lombok.Getter;
import lombok.Setter;

import java.util.List;

@Getter
@Setter
// 장바구니 페이지에서 주문할 상품의 데이터를 위한 Dto
public class CartOrderDto {

    private Long cartItemId;

    // List에 자기 자신을 담는다.
    private List<CartOrderDto> cartOrderDtoList;

}

📌OrderService 클래스 수정

...

    // 장바구니 페이지에서 전달 받은 구매 상품으로 주문을 생성하는 메소드
    public Long orders(List<OrderDto> orderDtoList, String email){

        // 로그인한 유저 조회
        Member member = memberRepository.findByEmail(email);

        List<OrderItem> orderItemList = new ArrayList<>();

        // orderDto 객체를 이용하여 itme 객체와 count 값을 얻어 OrderItem 객체 생성
        for (OrderDto orderDto : orderDtoList){

            Item item = itemRepository.findById(orderDto.getItemId())
                    .orElseThrow(EntityNotFoundException::new);
            OrderItem orderItem = OrderItem.createOrderItem(item, orderDto.getCount());

            orderItemList.add(orderItem);

        }

        // Order Entity 클래스에 존재하는 createOrder 메소드로 Order 생성 및 저장
        Order order = Order.createOrder(member, orderItemList);
        orderRepository.save(order);

        return order.getId();

    }

}

📌CartService 클래스 수정

...
    private final OrderService orderService;
...

    public Long orderCartItem(List<CartOrderDto> cartOrderDtoList, String email){

        List<OrderDto> orderDtoList = new ArrayList<>();

        // CartOrderDto 객체를 이용해 cartItem 객체 조회
        // cartItem 객체에서 itemId 와 count 값을 이용해 orderDto 객체 생성
        for (CartOrderDto cartOrderDto : cartOrderDtoList){

            CartItem cartItem = cartItemRepository.findById(cartOrderDto.getCartItemId())
                    .orElseThrow(EntityExistsException::new);
            OrderDto orderDto = new OrderDto();
            orderDto.setItemId(cartItem.getItem().getId());
            orderDto.setCount(cartItem.getCount());
            orderDtoList.add(orderDto);

        }

        Long orderId = orderService.orders(orderDtoList, email);

        // 주문한 장바구니 상품을 제거
        for (CartOrderDto cartOrderDto : cartOrderDtoList){

            CartItem cartItem = cartItemRepository.findById(cartOrderDto.getCartItemId())
                    .orElseThrow(EntityExistsException::new);
            cartItemRepository.delete(cartItem);

        }

        return orderId;

    }

}

📌CartController 클래스 수정

...

    @PostMapping(value = "/cart/orders")
    public @ResponseBody ResponseEntity orderCartItem(@RequestBody CartOrderDto cartOrderDto,
                                                      Principal principal){

        System.out.println(cartOrderDto.getCartItemId());

        List<CartOrderDto> cartOrderDtoList = cartOrderDto.getCartOrderDtoList();

        if(cartOrderDtoList == null || cartOrderDtoList.size() == 0){

            return new ResponseEntity<String>("주문할 상품을 선택해주세요.", HttpStatus.FORBIDDEN);

        }

        // 장바구니 주문 상품 하나씩 검증
        for (CartOrderDto cartOrder : cartOrderDtoList){

            if (!cartService.validateCartItem(cartOrder.getCartItemId(), principal.getName())){

                return new ResponseEntity<String>("주문 권한이 없습니다.", HttpStatus.FORBIDDEN);

            }

        }

        Long orderId = cartService.orderCartItem(cartOrderDtoList, principal.getName());

        return new ResponseEntity<Long>(orderId, HttpStatus.OK);
    }

}

📌🔥cartList.html 주문 AJAX🔥

        // 장바구니 상품(들) 주문
        function orders(){
            var token = $("meta[name='_csrf']").attr("content");
            var header = $("meta[name='_csrf_header']").attr("content");

            var url = "/cart/orders";

            var dataList = new Array();
            var paramData = new Object();

            $("input[name=cartChkBox]:checked").each(function() {
                var cartItemId = $(this).val();
                var data = new Object();
                data["cartItemId"] = cartItemId;
                dataList.push(data);
            });

            paramData['cartOrderDtoList'] = dataList;

            var param = JSON.stringify(paramData);

            $.ajax({
                url      : url,
                type     : "POST",
                contentType : "application/json",
                data     : param,
                beforeSend : function(xhr){
                    /* 데이터를 전송하기 전에 헤더에 csrf값을 설정 */
                    xhr.setRequestHeader(header, token);
                },
                dataType : "json",
                cache   : false,
                success  : function(result, status){
                    alert("주문이 완료 되었습니다.");
                    location.href='/orders';
                },
                error : function(jqXHR, status, error){

                    if(jqXHR.status == '401'){
                        alert('로그인 후 이용해주세요');
                        location.href='/members/login';
                    } else{
                        alert(jqXHR.responseText);
                    }

                }
            });
        }
    </script>
</th:block>

📌결과

👉 한꺼번에 주문 됨 (주문서)

👉 주문된 상품들

👉 장바구니에서 사라짐

👉 하나만 주문

❓어떤 구조로 실행?

cartList.html 👉 CartContoller 👉 CartService 👉 OrderService 👉 CartService 👉 CartController 👉 carList.html
복잡하다..

계층을 이동할 때는 Dto 객체로 데이터를 넘기고, 해당 계층에서 Dto 객체를 이용하여 Entity 객체를 조회, 해당 Entity 객체를 이용하여 자신의 로직을 수행

Controller

1. CartOrderDto 에서 CartOrderList 를 가져온 뒤 cartService.orderCartItem() 메소드 수행

CartService

2. cartOrderDto 에 존재하는 cartItemId 를 이용하여 CartItem 객체 조회
3. cartItem 에 존재하는 ItemId 와 count 값을 얻은 뒤에 이를 이용하여 OrderDto 객체 생성
4. OrderDtoList 를 orderService.orders() 메소드 파라미터로 넘겨 호출

OrderService

5. OrderDto 에 존재하는 ItemId 와 count 값을 얻은 뒤에 이를 이용하여 OrderItem 객체 생성
6. Order.createOrder() 메소드 호출하여 Order 객체 생성후 save. 이 때, 파라미터는 member, orderItemList
   

🔥Todo

재고보다 장바구니에 담는 수량이 많을 경우 그대로 DB에 담기는 현상 수정

• 주문 취소하고 다시 담기
• 주문 취소하면 판매자가 취소 확인하기
• 결제 정보?