reProject_38_sweetAlert2 적용하기, myBatis foreach문으로 반복 update, delete 적용

 

2024.01.30
기존에 작업했던 파일중 foreach문이 실행되지 않아 DAO.java에서 for문으로 작업한 기능들을 수정

alert()을 custom하기위해 sweetAlert을 적용했다.

 

-- sweetAlert 적용

 구글링을 하다가 참고한 사이트

🎨 SweetAlert2 - 이쁜 alert 모달창 설치 & 사용법

 

링크로 되어있던 js파일은 프로젝트에 생성하여 작업

1) sweetAlert을 사용하려는 jsp 페이지에 추가

<script  src="resources/util/plugins/sweetalert/jquery-lates.min.js"></script>
<script src="resources/util/plugins/sweetalert/sweetalert2.js"></script>

<!-- sweetAlert (alert/confirm/toast) -->
<script src="resources/util/js/sweetalert.js"></script>

 

 

2) sweetalert.js 수정

-- 내가 사용할 방식대로 변경

-- confirm창을 적용할 때가 문제였는데 다음 실행 함수를 매개변수로 넘겨주어야하는 부분이 어려웠다.

함수를 문자열로 넘기고 넘겨 받은 문자열을 eval()함수나 new Function()함수를 사용하여 함수를 실행할 수 있다고 해서 적용하는 과정에서 넘기려는 함수에 매개변수가 List 형식인경우 ajax에서 List로 받아오지 못하는 상황이 발생

결국 매개변수가 있는 함수를 실행해야 하는 경우 Swal.fire()를 직접 작성하여 처리해두었는데 추후 더 알아봐야 할 부분이다.

/**
    Icon
    - success
    - error
    - warning
    - info
    - question
 
*/
 
function playAlert(message, iconType, text){
    Swal.fire({
      icon: iconType,
      title: message,
      text: text,
    });
}
 
function playConfirm(message, action, iconType, confirmBtn, cancleBtn, success, error){
    Swal.fire({
      title: message,
      text: action,
      icon: iconType,
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: confirmBtn,
      cancelButtonText: cancleBtn,
      reverseButtons: true, // 버튼 순서 거꾸로
    }).then((result) => {
        if(result.isConfirmed){    // 매개변수 list 안됨
            eval(success);
        } else {
            eval(error);
        }
    });
}
 
function playToast(message, iconType){
    const Toast = Swal.mixin({
      toast: true,
      position: 'center-center',
      showConfirmButton: false,
      timer: 1000,
      timerProgressBar: false,
      didOpen: (toast) => {
        toast.addEventListener('mouseenter', Swal.stopTimer)
        toast.addEventListener('mouseleave', Swal.resumeTimer)
      }
    });
 
    Toast.fire({
      icon: iconType,
      title: message
    });
}

 

>>> alert/confirm을 사용한 java script 파일 수정

---- product.js

 
// 옵션 정보 가져오기
function getOpList(){
    let optionList = $("input[name='optionInfo']").val();
    let opList = [];
    
    optionList = optionList.slice(1, -1);
    let option = optionList.split("}, {");
    
    option.forEach(op => {
        let option = new Map();
        op = op.split(', ');
        
        for(let i=0; i < op.length; i++){
            let keyValue = op[i].split('=');
            option.set(keyValue[0], keyValue[1]);
        }
        opList.push(option);
    });
    return opList;
}
 
// 옵션 수량 변경
function count(num, name) {
    var cnt = parseInt($("div[name='" + name + "'] input[name='cnt" + name + "']").val());
    var stCnt = parseInt($("div[name='" + name + "'] input[name='pro_" + name + "_cnt']").val());
    var odTotal = parseInt($("input[name='odTotal']").val());
    let productPrice = parseInt($("input[name='productPrice']").val());
    
    if (num == -1) {
        odTotal += productPrice;
        cnt++;
    } else if (num == -2){
        odTotal -= productPrice;
        cnt--;
    } else {
        let totalPriceList = document.getElementsByClassName("optioncount");
        let productCnt = 0;
        Array.prototype.forEach.call(totalPriceList, function(proCnt){
            productCnt += parseInt(proCnt.value);
        });
        odTotal = productPrice*productCnt;
        cnt = num;
    }
    
    if (cnt < 1) {
        cnt = 0;
        $("div[name='" + name + "']").remove();
    } else if(cnt > stCnt){
        cnt = stCnt;
        playToast("재고가 부족합니다.", 'warning');
    }
    
    $("div[name='" + name + "'] input[name='cnt" + name + "']").val(cnt);
    $("input[name='odTotal']").val(odTotal);
    setOdTotal();
}
 
function setOdTotal(){
    var odTotal = parseInt($("input[name='odTotal']").val());
    var formatter = new Intl.NumberFormat('ko-KR', { style: 'currency', currency: 'KRW', minimumFractionDigits: 0, maximumFractionDigits: 0 });
    var formattedNum = formatter.format(odTotal);
    
    $(".totalPrice").html(formattedNum);
}
 
// 선택 버튼 활성화
function activeBtn(selectElement){
    if(selectElement == null){
        let optionBtns = document.getElementsByClassName("optionBtn");
        Array.prototype.forEach.call(optionBtns, function(option){
            option.classList.remove("active");
        });
        $("input[name='colorValue'").val("");
        $("input[name='sizeValue'").val("");
        return;
    }
 
    let className = (selectElement.id).split("_")[0]+"Option";
 
    let optionBtns = document.getElementsByClassName(className);
    
    Array.prototype.forEach.call(optionBtns, function(option){
        option.classList.remove("active");
    });
    
    $("#" + selectElement.id).addClass("active");
    $("input[name='"+(selectElement.id).split("_")[0]+"Value'").val(selectElement.value);
}
 
// 옵션 선택
function select(selectElement) {
    let option = selectElement.id;
 
    activeBtn(selectElement);
 
    let opList = getOpList();
    
    // 선택한 값
    let color = $("input[name='colorValue'").val();
    let size = $("input[name='sizeValue'").val();
    let cnt = 0;
    
    // 재고 확인
    let stockCnt = 0;
    
    // 색상 + 사이즈 + 수량
    let stockList = $("input[name='stockList']").val();
    let stList = [];
    
    stockList = stockList.slice(1, -1);
    stockList = stockList.slice(1, -1);
    let stock = stockList.split("}, {");
    
    let odTotal = parseInt($("input[name='odTotal']").val());
    let productName = $("input[name='productName']").val();
    let productId = $("input[name='productId']").val();
    let productPrice = parseInt($("input[name='productPrice']").val());
    if(color == null || color == "" || size == null || size == ""){
        return;
    }
    
    stock.forEach(st => {
        let stock = new Map();
        st = st.split(', ');
        
        for(let i=0; i < st.length; i++){
            let keyValue = st[i].split('=');
            stock.set(keyValue[0], keyValue[1]);
        }
        stList.push(stock);
    });
    
    stList.forEach(st => {
        if(st.get("optionColor") == color && st.get("optionSize") == size){
            stockCnt = st.get("stockCnt");
        }
    });
    
    if (stockCnt == '0'){
        cnt = 0;
        playToast("재고가 부족합니다.", 'warning');
        // 초기화
        activeBtn(null);
        return;
    }
    
    var name= color+size;
    
    if($("#"+name).length){
        playToast("이미 선택한 옵션입니다.", 'warning');
        count(-1, name);
    } else {
        var select = "";
        select += "<div name='" + color + size + "' id='" + color + size + "' class='selectValue'>"
                + "<p class='optionbox_p'>" + productName + "<br><span class='selectOption'>&nbsp;/&nbsp;" + color + "&nbsp;/&nbsp;" + size + "&nbsp;&nbsp;&nbsp;</span></p><p class='optionbox_p'>"
                + "<span class='author mb-3 d-block'>" + productPrice + "</span><button id='id' name='" + name 
                + "'class='pro_btn' onclick='deleteSelected(this)' style='float:right; margin-left:10px;'>X</button><span class='quantity' style='width:65px;'><a href='#' class='pro_btn' onclick='count(-2,\"" + name +"\")'>-</a>&nbsp;"
                + "<input type='text' name='cnt" + name + "' class='quantity_opt eProductQuantityClass optioncount' id='cnt" + name + "'  name='cnt" + name 
                + "' style='width:35px; height:27px; margin-left:3px; margin-right:3px; text-align:center;' value=1 max-value=" + stockCnt + " onChange='count(this.value,\"" + name +"\")'>&nbsp;"
                + "<a href='#' class='pro_btn' onclick='count(-1,\"" + name +"\")'>+</a></span>"
                + "<input type='hidden' name='optionId' value='" + productId + name + "'><input type='hidden' name='pro_" + name + "_cnt' value='" + stockCnt + "'>"
                + "</p></div>";
        count(-1, name);
        $("#optionbox").append(select);
    }            
    // 초기화
    activeBtn(null);
}
 
function moveToProductInfoMenu(){
    document.querySelector('.product_info_menu').scrollIntoView();
}
 
function deleteSelected(element){
    let cnt = $(element).parent().parent().find("input[name='cnt" + element.name + "']").val();
    for(let i=0; i<cnt; i++){
        count(-2, element.name);
    }
    $(element).parent().parent().remove();
}
 
// 장바구니에 추가
function addCart(){
    // cartVO 객체를 가지는 리스트
    let productId = $("input[name='productId']").val();
    let list = addList(productId);
    
    if(list == null || list == ""){
        playToast("상품을 선택해주세요", 'warning');
        return;
    }
    
    $.ajax({
        url: "/w2/cartInsert.do",
        type: "POST",
        async: true,
        data: JSON.stringify(list),
        contentType: "application/json",
        success: function(response){
            playConfirm("장바구니에 상품이 담겼습니다.", "장바구니로 이동하시겠습니까?", "success", "장바구니로 이동", "계속 쇼핑하기", "location.href='cart.do'", 'window.location.reload()');
        },
        error : function(error){
            playToast("오류가 발생했습니다.", 'error');
        }
    });
}
 
// 상품 리스트에 담기
function addList(productId){
    let list = [];
    let productCounts = document.querySelectorAll(".selectValue");
 
    productCounts.forEach(product => {
        let colorSize = product.id;
        let cart = {}; // 객체 생성
        
        cart.productId = productId;
        cart.optionId = product.querySelector("input[name='optionId']").value;
        cart.cartCnt = product.querySelector("input[name='cnt" + colorSize + "']").value;
        
        list.push(cart);
    });
    
    return list;
}
 

---- cart.js

// 가격 지정
$(document).ready(function(){
    setPrice();
});
 
// 선택 상품 주문
function orderSelect(){
    // 선택된 상품 없는 경우
    if(deleteList.length == 0){
        playToast("주문할 상품을 선택해주세요", 'warning');
        return;
    }
    location.href="order.do?cartList=" + deleteList;
}
 
// ajax_상품 삭제
function delProduct(checkList, type){
    $.ajax({
        url: "/w2/cartDelete.do",
        type: "POST",
        async: true,
        data: JSON.stringify(checkList),
        dataType: "json",
        contentType: "application/json",
        success: function(res){
            if(type == 'delete')
                playToast(res.message, 'success');
            return;
        },
        error : function(error){
            playToast("ajax는 실패입니다.", 'error');
        }
    });
}
 
// 선택 상품 삭제
function deleteSelect(type){
    // 선택된 상품 없는 경우
    if(deleteList.length == 0){
        playToast("삭제할 상품을 선택해주세요", 'warning');
        return;
    }
    
    let cartIdDiv;
    deleteList.forEach(check => {
        cartIdDiv = document.querySelector("#div_"+check);
        cartIdDiv.closest(".cart_content.checklist").remove();
    });
    delProduct(checkList, type);
    checkList.splice(0, checkList.length);
    deleteList.splice(0, deleteList.length);
    
    checkCounts = document.querySelectorAll(".check");
    setPrice();
}
 
// 전체 상품 삭제
function deleteAll(){
    checkCounts = document.querySelectorAll(".check");
    let cartIdDiv;
    
    // 선택된 상품 없는 경우
    checkNone(deleteList);
    
    checkCounts.forEach(check => {
        cartIdDiv = document.querySelector("#div_"+check.value);
        cartIdDiv.closest(".cart_content.checklist").remove();
    });
    delProduct(deleteList);
    checkList.splice(0, checkList.length);
    deleteList.splice(0, deleteList.length);
    
    checkCounts = document.querySelectorAll(".check");
    setPrice();
}
 
// 체크박스 적용
 $(document).ready(function(){
    // 전체선택
    $("#checkAll").click(function(){
        checkCounts = document.querySelectorAll(".check");
        
        if($(this).hasClass("checkAll")){    // 전체선택
            $(this).removeClass("checkAll").addClass("uncheckAll").addClass("active");
            $(this).text("전체해제");
            $(".check").prop("checked", true);
            
            checkCounts.forEach((check, index) => {
                pushList(checkList, check.value);
                pushList(deleteList, check.value);
            });
        } else if($(this).hasClass("uncheckAll")){    // 전체해제
            $(this).removeClass("active").removeClass("uncheckAll").addClass("checkAll");
            $(this).text("전체선택");
            $(".check").prop("checked", false);
            
            checkCounts.forEach(check => {
                spliceList(checkList, check.value);
                spliceList(deleteList, check.value);
            });
        }
        setPrice();
    });
    
    
    $(".check").click(function(){
        
        if(this.checked){
            // 첫 화면시 모두 추가되어 있는 상태
            if(checkList.length == $(".checklist .check").length){
                checkList.splice(0, checkList.length);
            }
            
            pushList(checkList, this.value);
            pushList(deleteList, this.value);
        } else {
            spliceList(checkList, this.value);
            spliceList(deleteList, this.value);
        }
        
        if($(".check:checked").length < $(".checklist .check").length){
            $("#checkAll").prop("checked", false);
        } else {
            $("#checkAll").prop("checked", true);
        }
        setPrice();
    });
});
 
// checkList/deleteList 에 추가
function pushList(list, Value){
    const index = list.indexOf(Value);
    
    // 인덱스에 없는 경우
    if(index == -1){
        list.push(Value);
    }
}
 
// checkList/deleteList 에서 제거
function spliceList(list, Value) {
    const index = list.indexOf(Value);
 
    // 인덱스에 있는 경우
    if(index !== -1){
        list.splice(index, 1);
    }
}
 
// list 상태 확인
function checkNone(list){
    if(list == ''){
        // 상품별 count li 태그 찾기
        const cartCounts = document.querySelectorAll(".cart_con.count");
        cartCounts.forEach(cartId => {
            list.push((cartId.querySelector(".cartValue").id).split("_")[1]);
        });
    }
}
 
// 값 설정
function setPrice(){
    let totalPriceVal = 0;
    let deliPriceVal = 3000;
 
    checkNone(checkList);
    
    // 상품별
    checkList.forEach(check => {
        const cartId = check;
 
        // 수량
        const countInput = document.querySelector("input[name='" + cartId + "']");
        
        // 기본 가격
        const oriPriceInput = document.querySelector("input[name='oriPrice_" + cartId + "']");
        
        const priceDiv = document.querySelector("#price_" + cartId);
        const pro_totalPriceSpan = priceDiv.querySelector("#totalPrice_" + cartId);
        const pro_totalPriceInput = priceDiv.querySelector("input");
        
        // (기본가격 * 수량)
        let pro_totalPrice = countInput.value * oriPriceInput.value
        
        pro_totalPriceSpan.innerHTML = setFormat(pro_totalPrice);
        pro_totalPriceInput.value = pro_totalPrice;
 
        // 총 상품 금액
        totalPriceVal += pro_totalPrice;                
    });
    
    // 배송비 조건부 무료
    if(totalPriceVal > 50000 || totalPriceVal == 0){
        deliPriceVal = 0;
    }
 
    // input
    const totalPriceInput = document.querySelector("input[name='totalPrice']");
    const deliPriceInput = document.querySelector("input[name='deliPrice']");
    const endPriceInput = document.querySelector("input[name='endPrice']");
    
    //span
    const totalPriceSpan = document.querySelector("#totalPrice");
    const deliPriceSpan = document.querySelector("#deliPrice");
    const endPriceSpan = document.querySelector("#endPrice");
    
    totalPriceInput.value = totalPriceVal;
    deliPriceInput.value = deliPriceVal;
    endPriceInput.value = totalPriceVal + deliPriceVal;
    
    totalPriceSpan.innerHTML = setFormat(totalPriceVal);
    deliPriceSpan.innerHTML = setFormat(deliPriceVal);
    endPriceSpan.innerHTML = setFormat(totalPriceVal + deliPriceVal);
}
 
let checkList = [];        // 주문 리스트
let deleteList = [];    // 삭제 리스트
 
// 체크박스 전체
let checkCounts = document.querySelectorAll(".check");
 
// 수량 변경
function count(num, name) {
    const countInput = document.querySelector("input[name='" + name + "']");
    const pro_oriPriceInput = document.querySelector("input[name='oriPrice_" + name + "']");
    const pro_totalPriceInput = document.querySelector("input[name='totalPrice_" + name + "']");
    const pro_totalPriceSpan = document.querySelector("#totalPrice_" + name);
    
    let cnt = parseInt(countInput.value);
    let pro_oriPrice = parseInt(pro_oriPriceInput.value);
    let pro_totalPrice = parseInt(pro_totalPriceInput.value);
    
    if (num == -1) { // 수량 증가
        cnt++;
    } else if (num == -2){ // 수량 감소
        cnt--;
    }
    
    pro_totalPrice = pro_oriPrice*num;
    
    if(cnt < 1){
        playToast("수량은 1개 이상이어야 합니다.", 'warning');
        cnt = 1;
        pro_totalPrice = pro_oriPrice;
    }
    
    countInput.value = cnt;
    pro_totalPriceInput.value = pro_totalPrice;
    pro_totalPriceSpan.innerHTML = setFormat(pro_totalPrice);
    
    setPrice();
 
    $.ajax({
        url: "/w2/cartUpdate.do",
        type: "POST",
        async: true,
        dataType: "text",
        data: JSON.stringify({
            cartId : name,
            cnt : cnt
        }),
        contentType: "application/json",
        success: function(result){
            playToast("수량이 변경되었습니다.", 'success');
        },
        error : function(error){
            playToast("ajax는 실패입니다.", 'error');
        }
    });
}
 
// 숫자 표기
function setFormat(num){
    let result = num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return result;
}
 

 

 

-- 리스트를 foreach문을 사용하여 myBatis에서 반복 수행

OrderDAO.java 수정

package com.w2.order;
 
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
 
import com.w2.util.Search;
import com.w2.util.SearchOrderby;
 
@Repository
public class OrderDAO {
    @Autowired
    private SqlSessionTemplate sqlSessionTemplate;
 
    public int updateOrderStatus(List<Map<String, String>> checkList) {
        int result = -1;
        result = sqlSessionTemplate.update("OrderDAO.updateOrderStatus", checkList);
        return result;
    }
 
    public int updateDeliverNum(List<Map<String, String>> checkList) {
        int result = -1;
        result = sqlSessionTemplate.update("OrderDAO.updateDeliverNum", checkList);
        return result;
    }
}
 

 

order-mapping.xml 수정

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
                 
<mapper namespace="OrderDAO">
    <update id="updateOrderStatus" parameterType="java.util.List">
        <foreach collection="list" item="order" index="index">
            UPDATE orders_info SET orderStatus=#{ order.changeValue }
            WHERE orderId=#{ order.orderId } AND optionId LIKE CONCAT(#{ order.productId }, '%');
        </foreach>
    </update>
    
    <update id="updateDeliverNum" parameterType="java.util.List">
        <foreach collection="list" item="order" index="index">
            UPDATE deliver_info SET deliverNum=#{ order.changeValue }
            WHERE orderId=#{ order.orderId };
        </foreach>
    </update>
</mapper>

 

ProductDAO.java 수정

package com.w2.product;
 
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import org.springframework.ui.Model;
 
import com.w2.util.SearchOrderby;
 
@Repository
public class ProductDAO {
    @Autowired
    private SqlSessionTemplate sqlSessionTemplate;
 
    public int updateProductStatus(List<Map<String, String>> checkList) {
        int result = -1;
        for(Map<String, String> product: checkList) {
            result = sqlSessionTemplate.update("ProductDAO.updateStatus", product);
            if(result < 1) {
                return -1;
            }
        }
        return result;
    }
 
}
 

 

product-mapping.xml 수정

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
                 
<mapper namespace="ProductDAO">
 
<!-- 상품상태 수정 -->
    <update id="updateStatus" parameterType="hashmap">
        UPDATE product
        SET productSell=#{ productSell }
        WHERE productId=#{ productId }
    </update>
 
</mapper>