Problem

장바구니에서 상품 일부를 주문하는 경우를 대비하여 주문하기 버튼 클릭 시 상품 체크 여부를 true와 false로 전달하기로 함

Console에 결과를 확인했을 때 true와 false로 기록되는 것을 확인

그러나 Controller에서 log 확인 시 모두 false로 기록이 되는 문제가 발생

JavaScript의 타입을 Console에서 확인한 결과 boolean타입으로도 나오는 것을 확인

function saveOrder() {
   console.log('purchaseOrder() 실행');
    var items = $(".form-check-input");
    console.log(items);
    var orderItems = [];

    for(var [idx, selectElement] of Object.entries(items)) {
        console.log(isNaN(idx));
        const cartItemId = $(selectElement).attr("cartItemId");
        const checked = selectElement.checked;
        if(!isNaN(idx)) {
            console.log("orderItems에 push합니다");
            console.log(idx + " 번 인덱스 타입 체크 = " + typeof checked);
            orderItems.push({
                id: cartItemId,
                isChecked: checked
            })
        }
    }

    console.log(orderItems);
    console.log(JSON.stringify(orderItems));

    $.ajax({
        url: "/api/v1/carts/checkOrder",
        method: "POST",
        contentType: 'application/json;charset=utf-8',
        data: JSON.stringify(orderItems)
    }).done((data) => {
        console.log(data);
        // location.href = "/carts/order";
    }).fail((error) => {
        console.log(error);
        if(error.result) {
            alert(error.result);
        }
    }).always(() => {
        console.log("주문 ajax 실행 완료");
    })
}

@PostMapping("/checkOrder")
public Response<String> updateCheckItem (@RequestBody List<CheckOrderItem> checkCartItemDto, Authentication authentication) {
    String userName = authentication.getName();
    for (CheckOrderItem itemDto : checkCartItemDto) {
        log.info("item id = {}", itemDto.getId());
        log.info("item isChecked = {}", itemDto.isChecked());
    }
    cartService.updateCheckItem(checkCartItemDto, userName);
    return Response.success("장바구니 상품 체크 완료");
}

package com.woowahan.recipe.domain.dto.cartDto;

import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;

@Getter
@AllArgsConstructor
@NoArgsConstructor
public class CheckOrderItem {

    private Long id;

    private boolean isChecked;

}

Cause

JSON으로 변환했을 때 boolean 타입이었던 check 변수가 string 타입으로 바뀌어 발생하는 문제였다

function saveOrder() {
    console.log('purchaseOrder() 실행');
    var items = $(".form-check-input");
    console.log(items);
    var orderItems = [];

    for(var [idx, selectElement] of Object.entries(items)) {
        console.log(isNaN(idx));
        const cartItemId = $(selectElement).attr("cartItemId");
        const checked = selectElement.checked;
        if(!isNaN(idx)) {
            console.log("orderItems에 push합니다");
            // console.warn(checked + ":" + cartItemId);
            console.log(idx + " 번 인덱스 타입 체크 = " + typeof checked);
            console.log(idx + " 번 인덱스 타입 체크 (JSON) = " + typeof JSON.stringify(checked));  // ✨
            orderItems.push({
                id: cartItemId,
                isChecked: checked
            })
        }
    }

    console.log(orderItems);
    console.log(JSON.stringify(orderItems));

    $.ajax({
        url: "/api/v1/carts/checkOrder",
        method: "POST",
        // dataType: "json",
        contentType: 'application/json;charset=utf-8',
        data: JSON.stringify(orderItems)
    }).done((data) => {
        console.log(data);
        // location.href = "/carts/order";
    }).fail((error) => {
        console.log(error);
        if(error.result) {
            alert(error.result);
        }
    }).always(() => {
        console.log("주문 ajax 실행 완료");
    })
}

Solution

CheckOrderItemDto에서의 isChecked 변수의 타입을 String으로 바꾼 후 Service Layer에서 boolean 타입으로 다시 변경하여 기존의 CartItem의 isChecked 변수와 비교해주어 값을 적용하는 방법으로 해결

package com.woowahan.recipe.domain.dto.cartDto;

import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;

@Getter
@AllArgsConstructor
@NoArgsConstructor
public class CheckOrderItemDto {

    private Long id;

    private String isChecked;

}

@PostMapping("/checkOrder")
public Response<String> updateCheckItem (@RequestBody List<CheckOrderItemDto> checkCartItemDto, Authentication authentication) {
    String userName = authentication.getName();
    for (CheckOrderItemDto itemDto : checkCartItemDto) {
        log.info("item id = {}", itemDto.getId());
        log.info("item isChecked = {}", itemDto.getIsChecked());
    }
    cartService.updateCheckItem(checkCartItemDto, userName);
    return Response.success("장바구니 상품 체크 완료");
}