2023.05.25 84일차 Team Project

84일차

필수 페이징 검색
추가할것
빈칸이면 submit버튼 비활성화
공개 비공개 기능
재고별로 보기

공개 비공개 기능 보수 AJAX로 처리하기
공개 OR 비공개인 것만 보기
빈칸이면 submit버튼 비활성화
시간남으면 상품페이지 시작

1. 공개 비공개 ajax로 데이터넘기기

openIds배열에 체크된 값만 넣었다.
ids배열에는 그냥 openIds라는 이름이 붙은 체크박스를 모두 넣었다.
그리고 json형식으로 담아서 컨트롤러에게 보낸다.

var openIds = []; // openIds 배열 선언
var ids = []; // ids 배열 선언

$('#pubBtn').click(function() {
    openIds = []; // openIds 배열 초기화
    ids = []; // ids 배열 초기화

    // 각 체크된 체크박스의 값들을 openIds 배열에 담기
    $('input[name="openIds"]:checked').each(function() {
        openIds.push($(this).val());
    });

    // 각 상품의 productId 값을 ids 배열에 담기
    $('input[name="openIds"]').each(function() {
        ids.push($(this).val());
    });

    //json형식으로 담기
    const data = {
        openIds: openIds,
        ids: ids
    };

    $.ajax("/admin/product/pub", {
        method: "post",
        contentType: 'application/json',
        data: JSON.stringify(data),
    });
})

1.1 컨트롤러

@RequestBody PubRequest pub 공개 비공개처리에대한 domain을 만들어서 값을 가져와서 매핑한다.
한 화면에서 공개할 id배열 openIds과 모든 id배열을 가져온다.

@PostMapping("pub")
public ResponseEntity<Map<String, Object>> pubProc(@RequestBody PubRequest pub) {
    boolean ok = productService.pubProductAll(pub);

    if (ok) {
        Map<String, Object> response = Map.of("message", "공개처리 되었습니다.");
        return ResponseEntity.ok().body(response);
    } else {
        Map<String, Object> response = Map.of("message", "설정에 오류가 발생했습니다.");
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(response);
    }
}

1.2 서비스

굳이 그럴필요는 없지만 각 배열을 리스트로 만들어서 mapper에게 전달하였다.

@Override
public boolean pubProductAll(PubRequest pub) {

    // 공개할 목록들을 리스트로
    List<String> openIds = pub.getOpenIds();

    // 전체 아이디들을 배열로
    List<String> ids = pub.getIds();

    Integer cnt = productMapper.changeProductPub(openIds, ids);
    return cnt != 0;
}

1.3 매퍼

일차적으로는 case when then else구문을 사용했다.
CASE WHEN product_id IN (openids) openids인 경우에는 1로 변경하고 그외에는 모두 0으로 변경한다.
WHERE을 꼭 추가해주어야 그 범위안의 값만 0으로 변경하기 때문에 WHERE절에는 그 페이지의 ids들의 값을 받아 넣었다.
그런데 여기서 문제가 발생했는데 openids가 하나도 없는 경우에는 앞이 비어버리기 때문에 sql이 제대로 작성되지 않아 오류가 발생하였다.

그래서 choose when구문으로 변경했다.
choose와 when은 MyBatis에서 제공하는 XML 태그로 조건에 따라 다른 쿼리 블록을 실행할 수 있도록 도와준다.
<choose> 태그는 여러 개의 <when> 태그와 선택적으로 <otherwise> 태그를 포함할 수 있다.

<choose> 태그는 다음과 같은 구조를 가지며 순서대로 평가되어 첫 번째로 true인 <when> 태그의 쿼리 블록을 실행한다.
만약 모든 <when> 태그가 false이고 <otherwise> 태그가 있으면 <otherwise> 태그의 쿼리 블록이 실행된다.

<choose>
  <when test="조건식1">
    <!-- 조건식1이 true일 때 실행될 쿼리 블록 -->
  </when>
  <when test="조건식2">
    <!-- 조건식2가 true일 때 실행될 쿼리 블록 -->
  </when>
  <!-- 추가적인 <when> 태그들 -->
  <otherwise>
    <!-- 모든 <when> 태그가 false이면 실행될 쿼리 블록 -->
  </otherwise>
</choose>

<when> 태그는 test 속성을 사용하여 조건을 평가한다.
test 속성은 MyBatis의 OGNL(Object-Graph Navigation Language) 표현식을 사용하여 조건을 기술한다.
조건식이 true이면 해당 <when> 태그의 쿼리 블록이 실행되고, false이면 다음 <when> 태그로 넘어간다.

<otherwise> 태그는 <choose> 태그의 모든 <when> 태그가 false일 때 실행될 쿼리 블록을 포함한다.
<otherwise> 태그는 선택적이며 필요한 경우 생략할 수도 있다.

대충 UPDATE productview SET pub = 0 CASE WHEN 0 이런식의 쿼리문이 발생하게 되는데 ID가 0인 것은 없기 때문에 0개가 변화하게 된다.

<!-- 공개 비공개 처리 -->
<update id="changeProductPub" parameterType="java.util.Map">
    UPDATE productview
    SET pub =
    CASE
    <choose>
        <when test="openIds != null and openIds.size() > 0">
            WHEN product_id IN
            <foreach collection="openIds" item="oid" open="(" close=")"
                separator=",">
                #{oid}
            </foreach>
        </when>
        <otherwise>
            WHEN 0
        </otherwise>
    </choose>
    THEN 1
    ELSE 0
    END
    WHERE product_id IN
    <foreach collection="ids" item="id" open="(" close=")"
        separator=",">
        #{id}
    </foreach>
</update>

2. 상품 상세페이지

ajax처리를해서 주문테이블과 장바구니테이블로 값을 넘어가게 했다.

$("#orderButton").click(function() {
    const count = $("#count").val();
    const productId = $("#productId").val();
    const price = $("#price").val();

    //json형식으로 담기
    const data = {
        quantity: count,
        productId: productId,
        price: price
    };

    $.ajax("/order/detail", {
        method: "post",
        contentType: 'application/json',
        data: JSON.stringify(data),
        success : function(){
            //값을 가지고
            // orderdteatil/ odreid로 이동
            //다른페이지로이동
        }
    });
})

$("#goToCartBtn").click(function() {
    const count = $("#count").val();
    const productId = $("#productId").val();
    const price = $("#price").val();

    //json형식으로 담기
    const data = {
        quantity: count,
        productId: productId,
        price: price
    };

    $.ajax("/order/cart", {
        method: "post",
        contentType: 'application/json',
        data: JSON.stringify(data),
        success : function(){
            //값을 가지고
            // orderdteatil/ odreid로 이동
            //다른페이지로이동
        }
    });
})

2023.05.25

어려웟던점
전체공개의 값을 넘길때 어떤식으로 넘길지가 고민이 되었다.
과거 따로 공부하면서 생각했던점은 open할 id들과 모든 id 값을 보낸후 id에서 open할 id를 빼주면 비공개로 만들 상품들 아니면 공개할 상품들이 된다는 것을 기억해냈다.
그런데 값을 어떤식으로 컨트롤러에 넘길지 고민이 되었는데 자바스크립트를 통해서 openIds라는 이름을 가진 모든 체크박스의 id값 = 페이지에 보이는 모든 상품의 id값을 넘길 수 잇었고 체크된 값들만 또 따로 넘길 수 있다는 것을 알게 되었다.
이후 비공개 상품과 공개상품을 나눌 방법에 대해서 고민하게 되었는데 CASE WHEN구문을 통해 전체 값에서 조건이 있는 것과 없는 것을 한번에 처리하는 방법을 알게되어 사용하게 되었다.