Просмотр исходного кода

마이페이지 주문확인 임시 커밋

card007 5 лет назад
Родитель
Сommit
d860664996

+ 269 - 0
src/main/webapp/WEB-INF/views/web/cart/CartChangeOptionPopupWeb.html

@@ -0,0 +1,269 @@
+<html lang="ko"
+	  xmlns:th="http://www.thymeleaf.org">
+<!-- 옵션변경 팝업 -->
+<div class="modal-dialog cartOptionModal" role="document">
+	<div class="modal-content">
+		<div class="modal-header">
+			<h5 class="modal-title" id="optModifyLabel">옵션변경</h5>
+			<div class="prod_title">
+				<span class="brand" th:text="|${cart.brandEnm + ' ' + cart.brandKnm}|"></span>
+				<span class="name" th:text="${cart.goodsNm}"></span>
+			</div>
+		</div>
+
+		<div class="modal-body">
+			<div class="pop_cont">
+				<div class="prod_info">
+					<div class="prod_preview">
+						<div class="area_pic">
+							<ul class="pic_list">
+								<th:block th:if="${setType.equals(cart.goodsType) or cart.selfGoodsYn.equals('N')}">
+									<li th:each="img, index : ${cart.cartImgList}">
+										<span class="thumb"><img th:src="${cart.imgPath + '/' + img.sysImgNm}" src="#" alt="" /></span>
+									</li>
+								</th:block>
+								<th:block th:if="${!setType.equals(cart.goodsType) and cart.selfGoodsYn.equals('Y')}">
+									<th:block th:each="comp, status : ${cart.cartCompsList}">
+										<th:block th:each="color, index : ${comp.cartColorList}">
+											<th:block th:if="${color.cartOptCd1 != null and color.cartOptCd1.equals(color.optCd1)}">
+												<li th:each="img, index : ${color.cartImgList}">
+													<span class="thumb"><img th:src="${cart.imgPath + '/' + img.sysImgNm}" src="#" alt="" /></span>
+												</li>
+											</th:block>
+										</th:block>
+									</th:block>
+								</th:block>
+							</ul>
+						</div>
+						<div class="area_order">
+							<th:block th:each="comp, status : ${cart.cartCompsList}">
+								<!-- 세트상품 옵션 -->
+								<th:block th:if="${setType.equals(cart.goodsType)}">
+									<div class="opt_select setOption">
+										<div class="opt_header">
+											<span class="title" th:text="${comp.goodsNm}"></span>
+										</div>
+
+										<!-- 컬러 변경시 만들어줄 size option -->
+										<th:block th:each="color, index : ${comp.cartColorList}">
+											<span style="display:none;">
+												<select th:classappend="|color_${color.goodsCd}_${color.optCd1}|">
+													<th:block th:each="size, i : ${color.cartSizeList}">
+														<th:block th:if="${color.optCd1.equals(size.optCd1)}">
+															<option th:value="${size.optCd}" th:text="${size.optCd2}"></option>
+														</th:block>
+													</th:block>
+												</select>
+											</span>
+										</th:block>
+
+										<div class="form_field">
+											<select class="setColorSelect">
+												<th:block th:each="color, index : ${comp.cartColorList}">
+													<option th:data="${comp.goodsCd}" th:value="${color.optCd1}" rel="icon-temperature" th:text="${color.colorNm}" th:selected="${color.cartColorNm != null}"></option>
+												</th:block>
+											</select>
+										</div>
+										<div class="form_field">
+											<th:block th:each="color, index : ${comp.cartColorList}">
+											<select th:data="${color.goodsCd}" th:class="|size_${comp.goodsCd} setSizeSelect|">
+												<th:block th:each="size, i : ${color.cartSizeList}">
+													<th:block th:if="${color.optCd1.equals(size.optCd1)}">
+														<option th:data="${comp.cartDtlSq}" th:value="${size.optCd}" th:text="${size.optCd2}" th:selected="${size.cartOptCd != null}"></option>
+													</th:block>
+												</th:block>
+											</select>
+											</th:block>
+										</div>
+									</div>
+								</th:block>
+
+								<!-- 자사 일반 상품 옵션 -->
+								<th:block th:if="${!setType.equals(cart.goodsType) and 'Y'.equals(cart.selfGoodsYn)}">
+									<div class="opt_color">
+										<div class="opt_header">
+											<span class="title">컬러</span>
+											<th:block th:each="color, index : ${comp.cartColorList}">
+												<th:block th:if="${color.cartColorNm != null}">
+													<span class="color" th:text="${color.cartColorNm}"></span>
+												</th:block>
+											</th:block>
+										</div>
+										<ul>
+											<li th:each="color, index : ${comp.cartColorList}" class="selfGoodsColor">
+												<a href="" th:cartDtlSq="${color.cartDtlSq}" th:classappend="${color.cartColorNm != null} ? 'on'" class="selfGoodsColorSelect" th:data="${color.optCd1}">
+													<img th:src="${cart.imgPath + '/' + color.sysImgNm}" src="#" th:alt="${color.colorNm}" alt="" />
+												</a>
+											</li>
+										</ul>
+									</div>
+
+									<div class="opt_size">
+										<div class="opt_header">
+											<span class="title">사이즈</span>
+										</div>
+										<div class="form_field selfGoodsSize">
+											<th:block th:each="color, index : ${comp.cartColorList}">
+												<th:block th:if="${color.cartColorNm != null}">
+													<th:block th:each="size, index : ${color.cartSizeList}">
+														<div>
+															<input type="radio" name="rdi-optsize" th:id="|${'rdi-optsize' + size.goodsCd + '-' + size.optCd}|" th:value="${size.optCd}" th:checked="${size.cartOptCd != null}" th:disabled="${size.soldoutYn == 'Y' or cart.goodsQty > size.currStockQty}">
+															<label th:for="|${'rdi-optsize' + size.goodsCd + '-' + size.optCd}|"><span th:text="${size.optCd2}"></span></label>
+														</div>
+													</th:block>
+												</th:block>
+											</th:block>
+										</div>
+									</div>
+								</th:block>
+
+								<!-- 입점업체 상품 옵션 -->
+								<th:block th:if="${!setType.equals(cart.goodsType) and !'Y'.equals(cart.selfGoodsYn)}">
+									<div class="opt_select">
+										<div class="opt_header">
+											<span class="title">옵션선택</span>
+										</div>
+										<div class="form_field">
+											<select class="selfGoodsColor">
+												<th:block th:each="color, index : ${comp.cartColorList}">
+												<option th:data="${color.cartDtlSq}" th:value="${color.optCd}" th:text="${color.optCd1 + '/' + color.optCd2}" th:selected="${color.cartOptCd != null}"></option>
+												</th:block>
+											</select>
+										</div>
+									</div>
+								</th:block>
+							</th:block>
+							<div class="opt_count">
+								<div class="opt_header">
+									<span class="title">수량</span>
+								</div>
+								<div class="number_count">
+									<span class="minus"><span class="sr-only">감소</span></span>
+									<input type="text" name="goodsQty" maxlength="3" style='ime-mode:disabled' th:value="${cart.goodsQty}" />
+									<!-- <input type="text" name="goodsQty" maxlength="3" style='ime-mode:disabled' th:value="2" /> -->
+									<span class="plus"><span class="sr-only">추가</span></span>
+								</div>
+							</div>
+							<div class="btn_group_block">
+								<button class="btn btn_dark btn_block" th:onclick="|fnChangeCartOption(${cart.cartSq})|"><span>옵션변경</span></button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+<!-- //옵션변경 팝업 -->
+
+
+<script th:inline="javascript">
+	// 세트상품 컬러 변경시
+	$(".setColorSelect").on("change", function(e) {
+		let goodsCd = $(this).find("option:checked").attr("data");
+		$(".setOption .size_" + goodsCd).html("");
+		$(".setOption .size_" + goodsCd).html($(".color_" + goodsCd + "_" + $(this).val()).html());
+	});
+
+	// 자사 일반 상품 컬러 선택시
+	$(".selfGoodsColorSelect").on("click", function(e) {
+		let html = "";
+		let cart = [[${cart}]];
+		let color =  [[${cart.cartCompsList[0].cartColorList}]];
+		let optCd1 = $(this).attr("data");
+
+		for(let i = 0 ; i < color.length ; i++) {
+			let size = color[i].cartSizeList;
+			for(let j = 0 ; j < size.length ; j++) {
+				if(optCd1 == size[j].optCd1) {
+					html += "<div>";
+					html += "<input type='radio' name='rdi-optsize' id='" + size[j].goodsCd + "-" + size[j].optCd + "' value='" + size[j].optCd + "' ";
+					if(size[j].soldoutYn == "Y" || cart.goodsQty > size[j].currStockQty) {
+						html += "disabled = 'disabled'";
+					}
+					html += " />\n";
+					html += "<label for='" + size[j].goodsCd + "-" + size[j].optCd + "'><span>" + size[j].optCd2 + "</span></label>\n"
+					html += "</div>\n";
+				}
+			}
+		}
+
+		$(".selfGoodsSize").html(html);
+	});
+
+	function fnChangeCartOption(cartSq) {
+		let cart = [[${cart}]];
+		let cartDtlSqArr = [], itemCds = [], optCds = [];
+		let data;
+
+		if(cart.goodsType == "G056_S") {
+			$(".setSizeSelect").each(function() {
+				optCds.push($(this).val());
+				itemCds.push($(this).attr("data"));
+				cartDtlSqArr.push($(this).find("option:checked").attr("data"));
+			});
+
+			data = {
+				  cartSq : cart.cartSq
+				, goodsCd : cart.goodsCd
+				, goodsType : cart.goodsType
+				, cartDtlSqArr : cartDtlSqArr
+				, itemCds : itemCds
+				, optCds : optCds
+				, goodsQty : $("input[name=goodsQty]").val()
+			}
+		} else if(cart.goodsType != "G056_S" && cart.selfGoodsYn == "Y") {
+			optCds.push($(".selfGoodsSize").find("input[name=rdi-optsize]:checked").val());
+			itemCds.push(cart.goodsCd);
+			$(".selfGoodsColorSelect").each(function() {
+				if($(this).attr("cartDtlSq") > 0) {
+					cartDtlSqArr.push($(this).attr("cartDtlSq"));
+				}
+			});
+
+			data = {
+				  cartSq : cart.cartSq
+				, goodsCd : cart.goodsCd
+				, goodsType : cart.goodsType
+				, cartDtlSqArr : cartDtlSqArr
+				, itemCds : itemCds
+				, optCds : optCds
+				, goodsQty : $("input[name=goodsQty]").val()
+			}
+		} else {
+			optCds.push($(".selfGoodsColor").val());
+			itemCds.push(cart.goodsCd);
+			$(".selfGoodsColor option").each(function() {
+				if($(this).attr("data") > 0) {
+					cartDtlSqArr.push($(this).attr("data"));
+				}
+			});
+
+			data = {
+				cartSq : cart.cartSq
+				, goodsCd : cart.goodsCd
+				, goodsType : cart.goodsType
+				, cartDtlSqArr : cartDtlSqArr
+				, itemCds : itemCds
+				, optCds : optCds
+				, goodsQty : $("input[name=goodsQty]").val()
+			}
+		}
+
+		$.ajax( {
+			type: "POST",
+			url : '/cart/change/option',
+			contentType: 'application/json',
+			dataType : 'json',
+			data : JSON.stringify(data),
+			success : function(result) {
+				alert(result.message);
+				$(".closeCartOptionModal").trigger("click");
+				getCartList();
+			}
+		});
+	}
+</script>
+
+</div>
+<a href="#close-modal" rel="modal:close" class="close-modal closeCartOptionModal">Close</a>
+</html>

+ 999 - 0
src/main/webapp/WEB-INF/views/web/cart/CartListAjaxFormWeb.html

@@ -0,0 +1,999 @@
+<html lang="ko"
+	  xmlns:th="http://www.thymeleaf.org">
+<form id="cartListForm" method="post" action="/order/noMember">
+	<!--<input type="hidden" name="cartCpnDcAmt" id="cartCpnDcAmt" th:value="${param.cartCpnDcAmt}" />-->
+
+	<!-- CONT-BODY -->
+	<div class="od_cont">
+		<div class="sec_head shotDelvSelect">
+			<div class="tbl type4">
+				<table>
+					<colgroup>
+						<col width="150">
+						<col width="*">
+					</colgroup>
+					<tbody>
+					<tr>
+						<th>
+							배송방법 선택
+						</th>
+						<td>
+							<div class="form_field">
+								<div>
+									<input type="radio" name="shotDelvUseYn" id="blt_ship1" value="Y" th:checked="${order.shotCanYn.equals('Y')}">
+									<label for="blt_ship1"><span><em class="tag">총알배송</em><span th:text="|${order.shotDelvDt}일 24:00 까지 도착|"></span></span></label>
+								</div>
+								<div>
+									<input type="radio" name="shotDelvUseYn" id="blt_ship2" value="N" th:checked="${!order.shotCanYn.equals('Y')}">
+									<label for="blt_ship2"><span>총알 배송 안함</span></label>
+								</div>
+							</div>
+						</td>
+					</tr>
+					</tbody>
+				</table>
+			</div>
+		</div>
+		<div class="sec_body">
+			<!-- 총알배송 -->
+			<div class="part_deliver wmsList" th:if="${wmsCartList != null and wmsCartList.size() > 0}">
+				<h3 class="subH2 mb20" th:if="${order.shotCanYn.equals('Y')}">
+					STYLE24 총알배송
+					<span class="ml10">오늘 자정까지 도착</span>
+				</h3>
+				<h3 class="subH2 mb20" th:if="${order.shotCanYn.equals('N')}">
+					STYLE24 일반배송
+				</h3>
+				<div class="tbl type2">
+					<table>
+						<colgroup>
+							<col width="900">
+							<col width="*">
+						</colgroup>
+						<tbody>
+						<th:block th:each="cart, status : ${wmsCartList}">
+							<tr class="cartInfo wmsCartInfo">
+								<input type="hidden" name="applyQtySectionYn" th:value="${cart.applyQtySectionYn}" />
+								<input type="hidden" name="applyAmtSectionYn" th:value="${cart.applyAmtSectionYn}" />
+								<input type="hidden" name="qtyTmtbSq" th:value="${cart.qtyTmtbSq}" />
+								<input type="hidden" name="qtyTmtbNm" th:value="${cart.qtyTmtbNm}" />
+								<input type="hidden" name="amtTmtbSq" th:value="${cart.amtTmtbSq}" />
+								<input type="hidden" name="amtTmtbNm" th:value="${cart.amtTmtbNm}" />
+								<input type="hidden" name="currPrice" th:value="${cart.currPrice}" />
+								<input type="hidden" name="soldoutYn" th:value="${cart.soldoutYn}" />
+								<input type="hidden" name="tmtbDcAmt" th:value="${cart.tmtbDcAmt}" />
+								<input type="hidden" name="cartSq" th:value="${cart.cartSq}" />
+
+								<td>
+									<!-- 주문가능 상품 -->
+									<div class="info_item" th:classappend="${cart.soldoutYn.equals('Y')} ? unable"> <!-- 주문불가시 class="unable" 추가 / 인풋, 버튼 disable 처리 -->
+										<div class="form_box">
+											<p class="form_field">
+												<input th:id="|od_item_${cart.cartSq}|" name="cartSqArr" type="checkbox" th:value="${cart.cartSq}" th:checked="${cart.soldoutYn.equals('N')}" th:disabled="${cart.soldoutYn.equals('Y')}"/>
+												<label th:for="|od_item_${cart.cartSq}|">
+													<span class="sr-only">상품선택</span>
+												</label>
+											</p>
+										</div>
+										<div class="thumb_box">
+											<a href="">
+												<img th:src="${IMG_PATH} + '/' + ${cart.sysImgNm}" src="/" width="100%" alt="">
+											</a>
+										</div>
+										<div class="info_box">
+											<p class="od_name">
+												<a href="">
+													<span class="brand" th:text="|${cart.brandEnm} ${cart.brandKnm}|"></span>
+													<span th:if="${!#strings.isEmpty(cart.delvResDt)}" class="reserv_date" th:text="|${cart.delvResDt} 배송예정|"></span>
+													<span class="name" th:text="${cart.goodsNm}"></span>
+												</a>
+											</p>
+											<p class="od_opt" th:each="opt, index : ${cart.itemNmArr}">
+												<span class="option"><em th:text="${cart.itemNmArr[index.index]} + '_' + ${cart.optCdArr[index.index]}"></em></span>
+											</p>
+											<p class="od_opt">
+												<span class="count">수량:<em th:text="${cart.goodsQty}"></em>개</span>
+											</p>
+
+											<p class="od_modify">
+												<button type="button" class="btn_opt_pop" th:onclick="|changeCartOptCd(${cart.cartSq})|"><span>옵션/수량변경</span></button>
+											</p>
+											<!-- 다다익선 적용 -->
+											<div class="od_moresale applyTmtb" th:if="${(cart.qtyTmtbSq > 0 and cart.applyQtySectionYn == 'Y') or (cart.amtTmtbSq > 0 and cart.applyAmtSectionYn == 'Y')}">
+												<a href="" class="btn_moresale">
+													<i class="ico ico_saletag"></i><span>다다익선 할인적용!</span>
+												</a>
+												<div class="li_moresale applyTmtbNm">
+													<ul>
+														<li th:if="${cart.qtyTmtbSq > 0 and cart.applyQtySectionYn == 'Y'}" th:text="${cart.qtyTmtbNm}"></li>
+														<li th:if="${cart.amtTmtbSq > 0 and cart.applyAmtSectionYn == 'Y'}" th:text="${cart.amtTmtbNm}"></li>
+													</ul>
+												</div>
+											</div>
+											<!-- 다다익선 미적용 -->
+											<div class="od_moresale notApplyTmtb" th:if="${(cart.qtyTmtbSq > 0 and cart.applyQtySectionYn == 'N') or (cart.amtTmtbSq > 0 and cart.applyAmtSectionYn == 'N')}">
+												<a href="" class="btn_moresale">
+													<i class="ico ico_saletag"></i><span>다다익선 상품보기</span>
+												</a>
+												<div class="li_moresale notApplyTmtbNm">
+													<ul>
+														<li th:if="${cart.qtyTmtbSq > 0 and cart.applyQtySectionYn == 'N'}" th:inline="text">[[${cart.qtyTmtbNm}]]<a href=''>대상 상품 보기</a></li>
+														<li th:if="${cart.amtTmtbSq > 0 and cart.applyAmtSectionYn == 'N'}" th:inline="text">[[${cart.amtTmtbNm}]]<a href=''>대상 상품 보기</a></li>
+													</ul>
+												</div>
+											</div>
+											<!-- 주문불가시 안내추가 -->
+											<div class="info_unable" th:if="${cart.soldoutYn.equals('Y')}">
+												해당상품은 구매가 불가능한 상품입니다. / 상품이 품절되었습니다.
+											</div>
+											<!-- //주문불가시 안내추가 -->
+										</div>
+										<div class="info_calc">
+											<p class="price" th:if="${cart.tmtbDcAmt < cart.currPrice}">
+												<span class="selling_price" th:text="|${#numbers.formatInteger(cart.tmtbDcAmt, 1, 'COMMA')} 원|"></span>
+												<del th:text="|${#numbers.formatInteger(cart.currPrice, 1, 'COMMA')} 원|"></del>
+											</p>
+											<p class="price" th:if="${cart.tmtbDcAmt == cart.currPrice}">
+												<span class="selling_price" th:text="|${#numbers.formatInteger(cart.currPrice, 1, 'COMMA')} 원|"></span>
+											</p>
+											<p class="point"><span th:text="${#numbers.formatInteger(cart.savePntAmt, 1, 'COMMA')}"></span>p 적립예정</p>
+											<p>
+												<button th:if="${cart.soldoutYn.equals('Y')}" type="button" class="btn btn_sm" disabled><span>구매불가</span></button>
+												<button th:if="${cart.soldoutYn.equals('N')}" type="button" class="btn btn_primary btn_sm" th:onclick="|submitNoMember(${cart.cartSq})|"><span>즉시구매</span></button>
+											</p>
+											<p class="util">
+										<span>
+											<button type="button" class="btn_favorite" th:classappend="${cart.wishCnt > 0} ? active" onclick="cfnPutWishList(this)" th:goodsCd="${cart.goodsCd}" th:ithrCd="${cart.ithrCd}" th:contentsLoc="${cart.contentsLoc}">
+												<span>
+													<i class="ico ico_like2"></i>
+													<em class="sr-only">관심상품 추가</em>
+												</span>
+											</button>
+										</span>
+												<span>
+											<button type="button" class="btn_delete" th:onclick="|deleteCart(${cart.cartSq})|"><span><i class="ico ico_trash"></i><em class="sr-only">상품삭제</em></span></button>
+										</span>
+											</p>
+										</div>
+									</div>
+									<!-- //주문가능 상품 -->
+								</td>
+								<td class="merge_row delvFeeArea" th:classappend="|delv_${cart.delvFeeCd}|" th:if="${cart.firstCompYn == 'Y'}" th:rowspan="${wmsCartList.size()}"> <!-- 같은 데이터 노출시 동일 영역끼리 병합 : 클래스명 merge_row 추가 -->
+									<div class="info_dlvr">
+										<span class="dlvr_fee" th:if="${cart.delvFee == 0}">배송비 무료</span>
+										<span class="dlvr_fee" th:if="${cart.delvFee > 0}" th:text="|배송비 ${#numbers.formatInteger(cart.delvFee, 1, 'COMMA')} 원|"></span>
+										<a href="#" target="_blank" th:if="${cart.delvFee > 0}">배송비 SAVE 상품 보기</a>
+									</div>
+								</td>
+							</tr>
+						</th:block>
+						</tbody>
+					</table>
+				</div>
+				<div class="btn_area">
+					<button type="button" class="btn btn_default" onclick="deleteCart('WMS_SELECT')"><span>선택 삭제</span></button>
+					<button type="button" class="btn btn_default" onclick="deleteCart('WMS_ALL')"><span>전체 삭제</span></button>
+				</div>
+			</div>
+			<!-- //총알배송 -->
+
+			<!-- 업체직배송 -->
+			<div class="part_deliver delvList" th:if="${delvCartList != null and delvCartList.size() > 0}">
+				<h3 class="subH2 mb20">
+					업체직배송
+				</h3>
+				<div class="tbl type2">
+					<table>
+						<colgroup>
+							<col width="900">
+							<col width="*">
+						</colgroup>
+						<tbody>
+						<th:block th:each="cart, status : ${delvCartList}">
+							<tr class="cartInfo delvCartInfo">
+								<input type="hidden" name="applyQtySectionYn" th:value="${cart.applyQtySectionYn}" />
+								<input type="hidden" name="applyAmtSectionYn" th:value="${cart.applyAmtSectionYn}" />
+								<input type="hidden" name="qtyTmtbSq" th:value="${cart.qtyTmtbSq}" />
+								<input type="hidden" name="qtyTmtbNm" th:value="${cart.qtyTmtbNm}" />
+								<input type="hidden" name="amtTmtbSq" th:value="${cart.amtTmtbSq}" />
+								<input type="hidden" name="amtTmtbNm" th:value="${cart.amtTmtbNm}" />
+								<input type="hidden" name="currPrice" th:value="${cart.currPrice}" />
+								<input type="hidden" name="soldoutYn" th:value="${cart.soldoutYn}" />
+								<input type="hidden" name="tmtbDcAmt" th:value="${cart.tmtbDcAmt}" />
+								<input type="hidden" name="cartSq" th:value="${cart.cartSq}" />
+
+								<td>
+									<div class="info_item" th:classappend="${cart.soldoutYn.equals('Y')} ? unable">
+										<div class="form_box">
+											<p class="form_field">
+												<input th:id="|od_item_${cart.cartSq}|" name="cartSqArr" type="checkbox" th:value="${cart.cartSq}" th:checked="${cart.soldoutYn.equals('N')}" th:disabled="${cart.soldoutYn.equals('Y')}"/>
+												<label th:for="|od_item_${cart.cartSq}|">
+													<span class="sr-only">상품선택</span>
+												</label>
+											</p>
+										</div>
+										<div class="thumb_box">
+											<a href="">
+												<img th:src="${IMG_PATH} + '/' + ${cart.sysImgNm}" src="/" width="100%" alt="">
+											</a>
+										</div>
+										<div class="info_box">
+											<p class="od_name">
+												<a href="">
+													<span class="brand" th:text="|${cart.brandEnm} ${cart.brandKnm}|"></span>
+													<span class="name" th:text="${cart.goodsNm}"></span>
+												</a>
+											</p>
+											<p class="od_opt" th:each="opt, index : ${cart.itemNmArr}">
+												<span class="option"><em th:text="${cart.itemNmArr[index.index]} + '_' + ${cart.optCdArr[index.index]}"></em></span>
+											</p>
+											<p class="od_opt">
+												<span class="count">수량:<em th:text="${cart.goodsQty}"></em>개</span>
+											</p>
+											<p class="od_modify">
+												<button type="button" class="btn_opt_pop" th:onclick="|changeCartOptCd(${cart.cartSq})|"><span>옵션/수량변경</span></button>
+											</p>
+											<!-- 다다익선 적용 -->
+											<div class="od_moresale applyTmtb" th:if="${(cart.qtyTmtbSq > 0 and cart.applyQtySectionYn == 'Y') or (cart.amtTmtbSq > 0 and cart.applyAmtSectionYn == 'Y')}">
+												<a href="" class="btn_moresale">
+													<i class="ico ico_saletag"></i><span>다다익선 할인적용!</span>
+												</a>
+												<div class="li_moresale applyTmtbNm">
+													<ul>
+														<li th:if="${cart.qtyTmtbSq > 0 and cart.applyQtySectionYn == 'Y'}" th:text="${cart.qtyTmtbNm}"></li>
+														<li th:if="${cart.amtTmtbSq > 0 and cart.applyAmtSectionYn == 'Y'}" th:text="${cart.amtTmtbNm}"></li>
+													</ul>
+												</div>
+											</div>
+											<!-- 다다익선 미적용 -->
+											<div class="od_moresale notApplyTmtb" th:if="${(cart.qtyTmtbSq > 0 and cart.applyQtySectionYn == 'N') or (cart.amtTmtbSq > 0 and cart.applyAmtSectionYn == 'N')}">
+												<a href="" class="btn_moresale">
+													<i class="ico ico_saletag"></i><span>다다익선 상품보기</span>
+												</a>
+												<div class="li_moresale notApplyTmtbNm">
+													<ul>
+														<li th:if="${cart.qtyTmtbSq > 0 and cart.applyQtySectionYn == 'N'}" th:text="${cart.qtyTmtbNm}"><a href="">대상 상품 보기</a></li>
+														<li th:if="${cart.amtTmtbSq > 0 and cart.applyAmtSectionYn == 'N'}" th:text="${cart.amtTmtbNm}"><a href="">대상 상품 보기</a></li>
+													</ul>
+												</div>
+											</div>
+											<!-- 주문불가시 안내추가 -->
+											<div class="info_unable" th:if="${cart.soldoutYn.equals('Y')}">
+												해당상품은 구매가 불가능한 상품입니다. / 상품이 품절되었습니다.
+											</div>
+											<!-- //주문불가시 안내추가 -->
+										</div>
+										<div class="info_calc">
+											<p class="price" th:if="${cart.tmtbDcAmt < cart.currPrice}">
+												<span class="selling_price" th:text="|${#numbers.formatInteger(cart.tmtbDcAmt, 1, 'COMMA')} 원|"></span>
+												<del th:text="|${#numbers.formatInteger(cart.currPrice, 1, 'COMMA')} 원|"></del>
+											</p>
+											<p class="price" th:if="${cart.tmtbDcAmt == cart.currPrice}">
+												<span class="selling_price" th:text="|${#numbers.formatInteger(cart.currPrice, 1, 'COMMA')} 원|"></span>
+											</p>
+											<p class="point"><span th:text="${#numbers.formatInteger(cart.savePntAmt, 1, 'COMMA')}"></span>p 적립예정</p>
+											<p>
+												<button th:if="${cart.soldoutYn.equals('Y')}" type="button" class="btn btn_sm" disabled><span>구매불가</span></button>
+												<button th:if="${cart.soldoutYn.equals('N')}" type="button" class="btn btn_primary btn_sm" th:onclick="|submitNoMember(${cart.cartSq})|"><span>즉시구매</span></button>
+											</p>
+											<p class="util">
+										<span>
+											<button type="button" class="btn_favorite" th:classappend="${cart.wishCnt > 0} ? active" onclick="cfnPutWishList(this)" th:goodsCd="${cart.goodsCd}" th:ithrCd="${cart.ithrCd}" th:contentsLoc="${cart.contentsLoc}"><span><i class="ico ico_like2"></i><em class="sr-only">관심상품 추가</em></span></button>
+										</span>
+												<span>
+											<button type="button" class="btn_delete" th:onclick="|deleteCart(${cart.cartSq})|"><span><i class="ico ico_trash"></i><em class="sr-only">상품삭제</em></span></button>
+										</span>
+											</p>
+										</div>
+									</div>
+								</td>
+								<td class="merge_row delvFeeArea" th:classappend="|delv_${cart.delvFeeCd}|" th:if="${cart.firstCompYn == 'Y'}" th:rowspan="${cart.compCnt}"> <!-- 같은 데이터 노출시 동일 영역끼리 병합 : 클래스명 merge_row 추가 -->
+									<div class="info_dlvr">
+										<span class="dlvr_fee" th:if="${cart.delvFee == 0}">배송비 무료</span>
+										<span class="dlvr_fee" th:if="${cart.delvFee > 0}" th:text="|배송비 ${#numbers.formatInteger(cart.delvFee, 1, 'COMMA')} 원|"></span>
+										<span class="dlvr_shop" th:text="|${cart.supplyCompNm} 업체직배송|"></span>
+										<a href="#" target="_blank" th:if="${cart.delvFee > 0}">배송비 SAVE 상품 보기</a>
+									</div>
+								</td>
+							</tr>
+						</th:block>
+						</tbody>
+					</table>
+				</div>
+				<div class="btn_area">
+					<button type="button" class="btn btn_default" onclick="deleteCart('DELV_SELECT')"><span>선택 삭제</span></button>
+					<button type="button" class="btn btn_default" onclick="deleteCart('DELV_ALL')"><span>전체 삭제</span></button>
+				</div>
+			</div>
+			<!-- //업체직배송 -->
+		</div>
+	</div>
+	<div class="od_side">
+		<div class="area_order">
+			<div class="tit_box">
+				<h3>결제 정보</h3>
+				<span>
+				<em class="number" th:text="${order.totCartCnt}"></em>개의 상품
+			</span>
+			</div>
+			<div class="od_amount_box">
+				<dl>
+					<div>
+						<dt>상품금액</dt>
+						<dd><em class="sumCurrPrice" th:text="${#numbers.formatInteger(order.sumOrdAmt, 1, 'COMMA')}"></em> 원</dd>
+					</div>
+					<div>
+						<dt>배송비</dt>
+						<dd><em class="totDelvFee" th:text="${#numbers.formatInteger(order.totDelvFee, 1, 'COMMA')}"></em> 원</dd>
+					</div>
+					<div>
+						<dt>할인금액</dt>
+						<dd><span class="disc_amount"><em class="totDcAmt" id="totDcAmt" th:text="${#numbers.formatInteger(order.totDcAmt, 1, 'COMMA')}"></em> 원</span></dd>
+					</div>
+				</dl>
+			</div>
+			<div class="totalprice_box">
+				<dl>
+					<dt>총 결제 예정 금액</dt>
+					<dd data-weight="price" data-font="lato"><span class="sumRealPayAmt" id="sumRealPayAmt" th:text="${#numbers.formatInteger(order.sumRealPayAmt + order.totDelvFee, 1, 'COMMA')}"></span> 원</dd>
+				</dl>
+			</div>
+			<div class="btn_box">
+				<button class="btn btn_primary btn_block btn_md"><span>주문하기</span></button>
+			</div>
+		</div>
+		<div class="area_salecoupon">
+			<h4>할인코드 입력</h4>
+			<div class="form_field">
+				<div class="input_wrap form_full">
+					<label class="input_label sr-only">할인코드입력</label>
+					<input type="text" id="serialCpnNm" class="form_control" placeholder="할인코드를 입력해주세요.">
+				</div>
+				<button type="button" class="btn btn_dark btn_default" onclick="serialCpnApply()"><span>적용</span></button>
+			</div>
+			<div class="coupon_box">
+				<div class="coupon">
+					<div>
+						<p class="cp_name"></p>
+						<p class="cp_cont">
+							<!--<span><em>12,399,900</em>원</span>
+							<span><em>40%</em></span>-->
+							<span class="cp_dc_val"></span>
+						</p>
+						<p class="cp_condition">
+							<!--500,000원 이상 구매 시 최대 50,000원 할인
+							<span><em class="tag">99장 보유</em></span>-->
+						</p>
+					</div>
+					<p class="cp_date">
+						<span class="availStdt"></span>&nbsp;~&nbsp;<span class="availEddt"></span>
+					</p>
+					<button type="button" class="btn_close_code" onClick="cancelCartCpn()">
+					<span>
+						<i class="ico ico_close1"></i>
+						<em class="sr-only">닫기</em>
+					</span>
+					</button>
+				</div>
+				<div class="info_coupon">
+					<button type="button" id="btn_cpinfo_pop">
+						<span>쿠폰 사용안내</span>
+					</button>
+				</div>
+			</div>
+		</div>
+		<div class="area_saleitem">
+
+		</div>
+	</div>
+	<div class="clear"></div>
+	<!-- // CONT-BODY -->
+</form>
+
+<!-- 옵션변경 팝업 -->
+<div class="modal fade od_pop opt_modify_pop" id="optModifyPop" tabindex="-1" role="dialog" aria-labelledby="optModifyLabel" aria-hidden="true"></div>
+<!-- //옵션변경 팝업 -->
+
+<!-- 즉시구매 form -->
+<form id="cartInfoForm" method="post" action="/order/noMember"></form>
+<!-- KCP PG TEST -->
+<form name="order_info" method="post" action="pp_cli_hub.jsp" >
+</form>
+
+<script th:inline="javascript">
+	let sumRealPayAmt = [[${order.sumRealPayAmt + order.totDelvFee}]];
+	let totDcAmt = [[${order.totDcAmt}]];
+
+	function NotApplyTmtbCartList() {
+		let tmtbSq = 0;
+		let tmtbNm = "";
+		let goodsList = {
+			brandNm : "",
+			goodsNm : "",
+			currPrice : 0,
+			imgPath : ""
+		}
+	}
+
+	$(document).ready(function() {
+		if([[${!order.shotCanYn.equals('Y')}]]) {
+			// $(".shotDelvSelect").hide();
+		}
+
+		$("#cartListForm .area_salecoupon .coupon_box").hide();
+
+		let loginInfo = [[${loginInfo}]];
+		if(!loginInfo || loginInfo.custNo == null || loginInfo.custNo == 0) {
+			$("#cartListForm .area_salecoupon").hide();
+		}
+
+		// 다다익선 할인 대상(미적용) 리스트
+		notApplyTmtbAreaList();
+
+		/* 세트상품 장바구니 */
+		/*let compsList = [];
+		let temp = new Object;
+		temp.goodsCd = "STYS00000042";
+		temp.itemCd = "14373746";
+		temp.optCd = "베이지110";
+		temp.goodsQty = 1;
+		temp.goodsType = "G056_S";
+		temp.cartGb = "O";
+		temp.afLinkCd = "afLinkCd";
+		temp.ithrCd = "G027_ZZZ";
+		temp.contentsLoc = "G028_YYY";
+		temp.planDtlSq = "123";
+		compsList.push(temp);
+		temp = new Object;
+		temp.goodsCd = "STYS00000042";
+		temp.itemCd = "14373769";
+		temp.optCd = "블루110";
+		temp.goodsQty = 1;
+		temp.goodsType = "G056_S";
+		temp.cartGb = "O";
+		temp.afLinkCd = "afLinkCd";
+		temp.ithrCd = "G027_ZZZ";
+		temp.contentsLoc = "G028_YYY";
+		temp.planDtlSq = "123";
+		compsList.push(temp);
+		temp = new Object;
+		temp.goodsCd = "STYS00000042";
+		temp.itemCd = "14373770";
+		temp.optCd = "아이보리110";
+		temp.goodsQty = 1;
+		temp.goodsType = "G056_S";
+		temp.cartGb = "O";
+		temp.afLinkCd = "afLinkCd";
+		temp.ithrCd = "G027_ZZZ";
+		temp.contentsLoc = "G028_YYY";
+		temp.planDtlSq = "123";
+		compsList.push(temp);
+
+		cfnAddCart(compsList);*/
+
+		/*let compsList = [];
+		let temp = new Object;
+		temp.goodsCd = "14373686";
+		temp.optCd = "챠콜그레이150";
+		temp.goodsQty = 2;
+		temp.goodsType = "G056_D";
+		temp.dealGoodsCd = "STYD000000025"
+		temp.cartGb = "O";
+		temp.afLinkCd = "afLinkCd";
+		temp.ithrCd = "G027_ZZZ";
+		temp.contentsLoc = "G028_YYY";
+		temp.planDtlSq = "123";
+		compsList.push(temp);
+
+		temp = new Object;
+		temp.goodsCd = "14373710";
+		temp.optCd = "L핑크130";
+		temp.goodsQty = 3;
+		temp.goodsType = "G056_D";
+		temp.dealGoodsCd = "STYD000000025"
+		temp.cartGb = "O";
+		temp.afLinkCd = "afLinkCd";
+		temp.ithrCd = "G027_ZZZ";
+		temp.contentsLoc = "G028_YYY";
+		temp.planDtlSq = "123";
+		compsList.push(temp);
+
+		cfnAddCart(compsList);*/
+	});
+
+	function notApplyTmtbAreaList() {
+		let notApplyQtyTmtbList = new Array();
+		let notApplyAmtTmtbList = new Array();
+
+		// 수량 다다익선 조회
+		$("#cartListForm input[name=qtyTmtbSq]").each(function (index) {
+			if($(this).val() != "0" && $(this).parent().find("input[name=applyQtySectionYn]").val() == "N") {
+				let obj = new Object();
+				obj.tmtbSq = $(this).val();
+				obj.tmtbNm = $(this).parent().find("input[name=qtyTmtbNm]").val();
+				obj.currPrice = $(this).parent().find("input[name=currPrice]").val();
+				obj.goodsNm = $(this).parent().find(".info_box").find(".name").text();
+				obj.brandNm = $(this).parent().find(".info_box").find(".brand").text();
+				obj.imgPath = $(this).parent().find(".info_item").find(".thumb_box img").attr("src");
+
+				notApplyQtyTmtbList.push(obj);
+			}
+
+			if($(this).parent().find("input[name=applyAmtSectionYn]").val() == "N") {	   // 다다익선 금액은 기본상품만 가져오면됨 (N은 기본상품에 걸려있음)
+				let obj = new Object();
+				obj.tmtbSq = $(this).parent().find("input[name=amtTmtbSq]").val();
+				obj.tmtbNm = $(this).parent().find("input[name=amtTmtbNm]").val();
+
+				notApplyAmtTmtbList.push(obj);
+			}
+		});
+
+		// 수량 다다익선 정렬
+		var t = new Object();
+		for (let i = 0; i < notApplyQtyTmtbList.length; i++) {
+			for (let j = 0; j < notApplyQtyTmtbList.length - i - 1; j++) {
+				if (notApplyQtyTmtbList[j].tmtbSq > notApplyQtyTmtbList[j + 1].tmtbSq) {
+					t = notApplyQtyTmtbList[j];
+					notApplyQtyTmtbList[j] = notApplyQtyTmtbList[j + 1];
+					notApplyQtyTmtbList[j + 1] = t;
+				}
+			}
+		}
+
+		fnCreateNotApplyTmtbAreaList(notApplyQtyTmtbList, notApplyAmtTmtbList);
+	}
+
+	function fnCreateNotApplyTmtbAreaList(notApplyQtyTmtbList, notApplyAmtTmtbList) {
+		// 정렬 후 같은 다다익선 상품은 한 배열로 묶음
+		let tmtbQtyList = new Array();
+
+		for (let i = 0; i < notApplyQtyTmtbList.length; i++) {
+			let goods = notApplyQtyTmtbList[i];
+			let tmtbInfo = new Object();
+			let chk = false;
+			for (let j = 0; j < tmtbQtyList.length; j++) {
+				let tmtb = tmtbQtyList[j];
+				if (goods.tmtbSq == tmtb.tmtbSq) {
+					tmtbInfo = tmtbQtyList[j];
+					chk = true;
+				}
+			}
+
+			// 현재 상품 정보
+			let goodsInfo = new Object();
+			goodsInfo.brandNm = goods.brandNm;
+			goodsInfo.goodsNm = goods.goodsNm;
+			goodsInfo.imgPath = goods.imgPath;
+			goodsInfo.currPrice = goods.currPrice;
+
+			// 현재 상품 정보 다다익선 정보에 세팅
+			if (chk) {
+				tmtbInfo.goodsList.push(goodsInfo);
+			} else {
+				let obj = new Object();
+				obj.tmtbSq = goods.tmtbSq;
+				obj.tmtbNm = goods.tmtbNm;
+				obj.goodsList = new Array();
+				obj.goodsList.push(goodsInfo);
+				tmtbQtyList.push(obj);
+			}
+		}
+
+		// 수량 다다익선 HTML 작성
+		let tmtbHtml = "";
+		for(let i = 0 ; i < tmtbQtyList.length ; i++) {
+			let tmtb = tmtbQtyList[i];
+			tmtbHtml += '<div class="more_sale qtyNotApplyTmtbList">';
+			for(let j = 0 ; j < tmtb.goodsList.length ; j++) {
+				let goods = tmtb.goodsList[j];
+				tmtbHtml += '<div class="item_gd">\n' +
+					'				<figure>\n' +
+					'					<a href="">\n' +
+					'						<span class="thumb"><img src="';
+				tmtbHtml += goods.imgPath;
+				tmtbHtml += '" alt=""></span>\n' +
+					'					</a>\n' +
+					'					<figcaption>\n' +
+					'						<a href="">\n' +
+					'							<div class="brand">';
+				tmtbHtml += goods.brandNm;
+				tmtbHtml += '</div>\n' +
+					'							<div class="name">';
+				tmtbHtml += goods.goodsNm;
+				tmtbHtml += '</div>\n' +
+					'							<div class="price">\n' +
+					'								<span class="selling_price">';
+				tmtbHtml += Number(goods.currPrice).toLocaleString();
+				tmtbHtml += '</span>\n' +
+					'							</div>\n' +
+					'						</a>\n' +
+					'					</figcaption>\n' +
+					'				</figure>\n' +
+					'			</div>';
+			}
+
+			tmtbHtml += '<div class="txt">\n' +
+				'				<a href="">\n' +
+				'					<i class="ico ico_saletag"></i>\n' +
+				'					<input type="hidden" name="tmtbSq" value="' + tmtb.tmtbSq + '" />' +
+				'					<span>\n';
+			tmtbHtml += tmtb.tmtbNm;
+			tmtbHtml += '</span>\n' +
+				'				</a>\n' +
+				'			</div>\n' +
+				'		</div>';
+		}
+
+		// 금액 다다익선 정보 HTML 작성
+		for(let i = 0 ; i < notApplyAmtTmtbList.length ; i++) {
+			if (notApplyAmtTmtbList[i].tmtbSq != 0) {
+				let tmtb = notApplyAmtTmtbList[i];
+				tmtbHtml += '<div class="more_sale amtNotApplyTmtbList">\n' +
+					'			<div class="txt">\n' +
+					'				<a href="">\n' +
+					'					<i class="ico ico_saletag"></i>\n' +
+					'					<input type="hidden" name="tmtbSq" value="' + tmtb.tmtbSq + '" />' +
+					'					<span>';
+				tmtbHtml += tmtb.tmtbNm;
+				tmtbHtml += '</span>\n' +
+					'				</a>\n' +
+					'			</div>\n' +
+					'		</div>';
+			}
+		}
+
+		if(tmtbHtml != "") {
+			tmtbHtml = "<h4>다다익선 할인 대상이 있습니다.</h4>" + tmtbHtml;
+		}
+
+		$(".area_saleitem").html(tmtbHtml);
+	}
+
+	function cancelCartCpn() {
+		$("#cartListForm #sumRealPayAmt").text(Number(sumRealPayAmt).toLocaleString());
+		$("#cartListForm #totDcAmt").text(Number(totDcAmt).toLocaleString());
+		$("#cartListForm .area_salecoupon .coupon_box").hide();
+	}
+
+	function serialCpnApply() {
+		let cartArr = [];
+		let currPrices = [];
+		$("#cartListForm input[name=cartSqArr]:checked").each(function(index, item) {
+			cartArr.push($(this).val());
+			currPrices.push($(this).parents(".cartInfo").find("input[name=tmtbDcAmt]").val());
+		});
+
+		let data = {
+			rdCpnNm : $("#cartListForm #serialCpnNm").val(),
+			cartSqArr : cartArr,
+			currPrices : currPrices
+		}
+
+		let jsonData = JSON.stringify(data);
+
+		$.ajax( {
+			type: "POST",
+			url : '/cart/list/serialCpnApply',
+			contentType: 'application/json',
+			dataType : 'json',
+			data : jsonData,
+			success : function(result) {
+				$("#cartListForm .area_salecoupon .coupon_box").show();
+
+				// 합계 금액
+				$("#cartListForm #sumRealPayAmt").text(Number(sumRealPayAmt - result.serialCpnInfo.dcAmt).toLocaleString());
+				$("#cartListForm #totDcAmt").text(Number(totDcAmt - result.serialCpnInfo.dcAmt).toLocaleString());
+
+				// 쿠폰 정보
+				$("#cartListForm .area_salecoupon .cp_name").text(result.serialCpnInfo.cpnNm);
+				$("#cartListForm .area_salecoupon .cp_condition").html(result.serialCpnInfo.cpnDesc + "<span><em class='tag'>1장 보유</em></span>");
+				$("#cartListForm .area_salecoupon .availStdt").text(result.serialCpnInfo.availStdt);
+				$("#cartListForm .area_salecoupon .availEddt").text(result.serialCpnInfo.availEddt);
+				if(result.serialCpnInfo.dcWay == "G240_10") {
+					$("#cartListForm .area_salecoupon .cp_dc_val").html( "<em>" + Number(result.serialCpnInfo.dcVal).toLocaleString() + "</em> 원");
+				} else if (result.serialCpnInfo.dcWay == "G240_11") {
+					$("#cartListForm .area_salecoupon .cp_dc_val").html( "<em>" + result.serialCpnInfo.dcVal + "%</em>");
+				}
+			}
+		});
+	}
+
+	//다다익선 적용내역 보기
+	$(document).on('click','.shopping_bag .part_deliver .btn_moresale',function(e){
+		$(this).toggleClass('active');
+		$(this).parents('.od_moresale').find('.li_moresale').toggle();
+		return false;
+	});
+
+	//관심상품 등록
+	$(document).on('click','.shopping_bag .part_deliver .btn_favorite',function(e){
+		$(this).toggleClass('active');
+		return false;
+	});
+
+	function deleteCartAjax(cartArr) {
+		if(cartArr.length < 1) {
+			mcxDialog.alert("삭제하실 상품을 선택해 주세요.");
+			return false;
+		}
+
+		let data = {
+			cartSqArr : cartArr
+		}
+
+		let jsonData = JSON.stringify(data);
+
+		$.ajax( {
+			type: "POST",
+			url : '/cart/deleteCart',
+			contentType: 'application/json',
+			dataType : 'json',
+			data : jsonData,
+			success : function(result) {
+				mcxDialog.alert("삭제 되었습니다.");
+				getCartList();
+			}
+		});
+	}
+
+	function deleteCart(gbn) {
+		let cartArr = [];
+		let confirmMessage = "";
+		if(gbn == "WMS_SELECT") {
+			$("#cartListForm .wmsList input[name=cartSqArr]:checked").each(function () {
+				cartArr.push($(this).val());
+			});
+
+			confirmMessage = "총 " + cartArr.length + "개의 상품을 삭제합니다.";
+		} else if(gbn == "DELV_SELECT") {
+			$("#cartListForm .delvList input[name=cartSqArr]:checked").each(function () {
+				cartArr.push($(this).val());
+			});
+
+			confirmMessage = "총 " + cartArr.length + "개의 상품을 삭제합니다.";
+		} else if(gbn == "WMS_ALL") {
+			$("#cartListForm .wmsList input[name=cartSqArr]").each(function() {
+				cartArr.push($(this).val());
+			});
+
+			confirmMessage = "총알배송상품을 전부 삭제하시겠습니까?";
+		} else if(gbn == "DELV_ALL") {
+			$("#cartListForm .delvList input[name=cartSqArr]").each(function() {
+				cartArr.push($(this).val());
+			});
+
+			confirmMessage = "업체직배송 상품을 전부 삭제하시겠습니까?";
+		} else {
+			cartArr.push(gbn);
+			deleteCartAjax(cartArr);
+			return false;
+		}
+
+		mcxDialog.confirm(confirmMessage, {
+			cancelBtnText: "취소/닫기",		//취소 또는 닫기 버튼명
+			sureBtnText  : "확인",				//처리문 버튼명
+			sureBtnClick : function () {
+				deleteCartAjax(cartArr);
+			}
+		});
+	}
+
+	//쿠폰사용안내 팝업열기
+	$(document).on('click','#btn_cpinfo_pop',function(e){
+		$("#cpinfoPop").modal("show");
+		return false;
+	});
+
+	$("input[name=cartSqArr]").on("change", function(e) {
+		let cartArr = [];
+
+		// 선택된 장바구니 번호
+		$("#cartListForm input[name=cartSqArr]:checked").each(function () {
+			cartArr.push($(this).val());
+		});
+
+		// 선택된 장바구니 정보 가공
+		let data = {	cartSqArr : cartArr }
+		let jsonData = JSON.stringify(data);
+
+		$.ajax( {
+			type: "POST",
+			url : '/cart/change/goods/list',
+			contentType: 'application/json',
+			dataType : 'json',
+			data : jsonData,
+			success : function(result) {
+				fnChangeCartListInfo(result);
+			}
+		});
+	});
+
+	function fnChangeCartListInfo(order) {
+		let wmsList = order.wmsCartList;
+		let delvList = order.delvCartList;
+		let cartList = new Array();
+
+		// 다다익선 정보 숨김
+		$("#cartListForm .applyTmtb").hide();
+		$("#cartListForm .notApplyTmtb").hide();
+
+		// 장바구니 각 상품 가격 정보 할인 전으로 변경
+		$("#cartListForm .cartInfo input[name=cartSq]").each(function() {
+			if($(this).parent().find(".info_calc .price > del").text() != "") {
+				$(this).parent().find(".info_calc .selling_price").text($(this).parent().find(".info_calc .price > del").text());
+				$(this).parent().find(".info_calc .price > del").remove();
+			}
+		});
+		$("#cartListForm").find(".delvFeeArea").html("<div class='info_dlvr'><span class='dlvr_fee'>배송비 무료</span></div>");
+
+		for(let i = 0 ; i < wmsList.length ; i++) {
+			cartList.push(wmsList[i]);
+			$("#cartListForm .wmsCartInfo input[name=cartSq]").each(function() {
+				if(wmsList[i].cartSq == $(this).val()) {
+					let wms = wmsList[i];
+					// $(this).parent().find(".thumb_box img").attr("src", result.imgPath1 + "/" + wms.sysImgNm);
+					$(this).parent().find(".od_moresale .applyTmtbNm > ul").html("");
+					$(this).parent().find(".od_moresale .notApplyTmtbNm > ul").html("");
+
+					// 다다익선 적용 정보 생성성
+					if(wms.qtyTmtbSq > 0 && wms.applyQtySectionYn == "Y") {
+						$(this).parent().find(".applyTmtb .applyTmtbNm > ul").append("<li>" + wms.qtyTmtbNm + "</li>");
+						$(this).parent().find(".applyTmtb").show();
+					}
+					if(wms.amtTmtbSq > 0 && wms.applyAmtSectionYn == "Y") {
+						$(this).parent().find(".applyTmtb .applyTmtbNm > ul").append("<li>" + wms.amtTmtbNm + "</li>");
+						$(this).parent().find(".applyTmtb").show();
+					}
+					if(wms.qtyTmtbSq > 0 && wms.applyQtySectionYn == "N") {
+						$(this).parent().find(".notApplyTmtb .notApplyTmtbNm > ul").append("<li>" + wms.qtyTmtbNm + "<a href=''>대상 상품 보기</a></li>");
+						$(this).parent().find(".notApplyTmtb").show();
+					}
+					if(wms.amtTmtbSq > 0 && wms.applyAmtSectionYn == "N") {
+						$(this).parent().find(".notApplyTmtb .notApplyTmtbNm > ul").append("<li>" + wms.amtTmtbNm + "<a href=''>대상 상품 보기</a></li>");
+						$(this).parent().find(".notApplyTmtb").show();
+					}
+
+					// 다다익선 할인가 적용
+					if(wms.tmtbDcAmt < wms.currPrice) {
+						$(this).parent().find(".info_calc .selling_price").text(Number(wms.tmtbDcAmt).toLocaleString() + " 원");
+						$(this).parent().find(".info_calc .price").append("<del>" + Number(wms.currPrice).toLocaleString() + " 원</del>");
+					}
+
+					if(wms.delvFee == 0) {
+						$(".wmsList").find(".delv_" + wms.delvFeeCd).html("<div class='info_dlvr'><span class='dlvr_fee'>배송비 무료</span></div>");
+					} else {
+						let html = "<div class='info_dlvr'><span class='dlvr_fee'>" + Number(wms.delvFee).toLocaleString() + " 원</span><a href='#' target='_black'>배송비 SAVE 상품 보기</a></div>";
+						$(".wmsList").find(".delv_" + wms.delvFeeCd).html(html);
+						// $(".wmsList").find(".delv_" + wms.delvFeeCd).append("<span class='dlvr_shop'>" + wms.supplyCompNm + " 업체직배송</span>");
+
+					}
+				}
+			});
+		}
+
+		for(let i = 0 ; i < delvList.length ; i++) {
+			cartList.push(delvList[i]);
+			$("#cartListForm .delvCartInfo input[name=cartSq]").each(function() {
+				if(delvList[i].cartSq == $(this).val()) {
+					let delv = delvList[i];
+					// $(this).parent().find(".thumb_box img").attr("src", result.imgPath1 + "/" + wms.sysImgNm);
+					$(this).parent().find(".od_moresale .applyTmtbNm > ul").html("");
+					$(this).parent().find(".od_moresale .notApplyTmtbNm > ul").html("");
+
+					// 다다익선 적용 정보 생성성
+					if(delv.qtyTmtbSq > 0 && delv.applyQtySectionYn == "Y") {
+						$(this).parent().find(".applyTmtb .applyTmtbNm > ul").append("<li>" + delv.qtyTmtbNm + "</li>");
+						$(this).parent().find(".applyTmtb").show();
+					}
+					if(delv.amtTmtbSq > 0 && delv.applyAmtSectionYn == "Y") {
+						$(this).parent().find(".applyTmtb .applyTmtbNm > ul").append("<li>" + delv.amtTmtbNm + "</li>");
+						$(this).parent().find(".applyTmtb").show();
+					}
+					if(delv.qtyTmtbSq > 0 && delv.applyQtySectionYn == "N") {
+						$(this).parent().find(".notApplyTmtb .notApplyTmtbNm > ul").append("<li>" + delv.qtyTmtbNm + "<a href=''>대상 상품 보기</a></li>");
+						$(this).parent().find(".notApplyTmtb").show();
+					}
+					if(delv.amtTmtbSq > 0 && delv.applyAmtSectionYn == "N") {
+						$(this).parent().find(".notApplyTmtb .notApplyTmtbNm > ul").append("<li>" + delv.amtTmtbNm + "<a href=''>대상 상품 보기</a></li>");
+						$(this).parent().find(".notApplyTmtb").show();
+					}
+
+					// 다다익선 할인가 적용
+					if(delv.tmtbDcAmt < delv.currPrice) {
+						$(this).parent().find(".info_calc .selling_price").text(Number(delv.tmtbDcAmt).toLocaleString() + " 원");
+						$(this).parent().find(".info_calc .price").append("<del>" + Number(delv.currPrice).toLocaleString() + " 원</del>");
+					}
+
+					if(delv.delvFee == 0) {
+						$(".delvList").find(".delv_" + delv.delvFeeCd).html("<div class='info_dlvr'><span class='dlvr_fee'>배송비 무료</span></div>");
+					} else {
+						let html = "<div class='info_dlvr'><span class='dlvr_fee'>" + Number(delv.delvFee).toLocaleString() + " 원</span><span class='dlvr_shop'>" + delv.supplyCompNm + " 업체직배송</span><a href='#' target='_black'>배송비 SAVE 상품 보기</a></div>";
+						$(".delvList").find(".delv_" + delv.delvFeeCd).html(html);
+					}
+				}
+			});
+		}
+
+		// 결제 총액 영역 수정
+		$("#cartListForm .sumCurrPrice").text(Number(order.sumOrdAmt).toLocaleString());
+		$("#cartListForm .totDelvFee").text(Number(order.totDelvFee).toLocaleString());
+		sumRealPayAmt = order.sumRealPayAmt + order.totDelvFee;
+		totDcAmt = order.totDcAmt;
+
+		// 할인코드 쿠폰 금액 재확인
+		if($("#cartListForm #serialCpnNm").val()) {
+			serialCpnApply();
+		} else {
+			$("#cartListForm .totDcAmt").text(Number(order.totDcAmt).toLocaleString());
+			$("#cartListForm .sumRealPayAmt").text(Number(order.sumRealPayAmt + order.totDelvFee).toLocaleString());
+			cancelCartCpn();
+		}
+
+		let notApplyQtyTmtbList = new Array();
+		let notApplyAmtTmtbList = new Array();
+		for(let i = 0 ; i < cartList.length ; i++) {
+			let cart = cartList[i];
+			if(cart.applyQtySectionYn == "N") {
+				let obj = new Object();
+				obj.tmtbSq = cart.qtyTmtbSq;
+				obj.tmtbNm = cart.qtyTmtbNm;
+				obj.currPrice = cart.currPrice;
+				obj.goodsNm = cart.goodsNm;
+				obj.brandNm = cart.brandEnm + " " + cart.brandKnm;
+				obj.imgPath = order.imgPath1 + "/" + cart.sysImgNm;
+
+				notApplyQtyTmtbList.push(obj);
+			}
+
+			if(cart.applyAmtSectionYn == "N") {
+				let obj = new Object();
+				obj.tmtbSq = cart.amtTmtbSq;
+				obj.tmtbNm = cart.amtTmtbNm;
+
+				notApplyAmtTmtbList.push(obj);
+			}
+		}
+
+		// 수량 다다익선 정렬
+		var t = new Object();
+		for (let i = 0; i < notApplyQtyTmtbList.length; i++) {
+			for (let j = 0; j < notApplyQtyTmtbList.length - i - 1; j++) {
+				if (notApplyQtyTmtbList[j].tmtbSq > notApplyQtyTmtbList[j + 1].tmtbSq) {
+					t = notApplyQtyTmtbList[j];
+					notApplyQtyTmtbList[j] = notApplyQtyTmtbList[j + 1];
+					notApplyQtyTmtbList[j + 1] = t;
+				}
+			}
+		}
+
+		// 다다익선 적용 대상 상품 노출
+		fnCreateNotApplyTmtbAreaList(notApplyQtyTmtbList, notApplyAmtTmtbList);
+	}
+
+	//옵션변경 팝업열기
+	function changeCartOptCd(cartSq) {
+		$.ajax( {
+			type: "POST",
+			url : '/cart/goods/info',
+			dataType : 'html',
+			data : {cartSq : cartSq},
+			success : function(result) {
+				//fnChangeCartListInfo(result);
+				$("#optModifyPop").html(result);
+				$("#optModifyPop").modal("show");
+			}
+		});
+	}
+
+	function submitNoMember(cartSq) {
+		if(cartSq == "all") {
+			$("#cartListForm").submit();
+		} else {
+			let html	 = "<input type='hidden' name='cartSqArr' value='" + cartSq + "' />";
+			html		+= "<input type='hidden' name='shotDelvUseYn' value='" + $("input[name=shotDelvUseYn]:checked").val() + "' />";
+			$("#cartInfoForm").html(html);
+			$("#cartInfoForm").submit();
+		}
+	}
+</script>
+</html>

+ 339 - 0
src/main/webapp/WEB-INF/views/web/cart/CartListFormWeb.html

@@ -0,0 +1,339 @@
+<!DOCTYPE html>
+<html lang="ko"
+      xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorator="web/common/layout/DefaultLayoutWeb">
+<!--
+ *******************************************************************************
+ * @source  : cartListFormWeb
+ * @desc    : 장바구니
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.02.02   xodud1202   최초 작성
+ *******************************************************************************
+ -->
+<body>
+
+<th:block layout:fragment="content">
+    <!--  container -->
+    <div id="container" class="container od">
+        <div class="wrap">
+            <div class="content shopping_bag"> <!-- 페이지특정 클래스 = shop_bag -->
+                <div class="cont_head">
+                    <h2>쇼핑백</h2>
+                    <div class="oder_steps">
+                        <ul>
+                        <li class="on">01 쇼핑백</li>
+                        <li>02 주문/결제</li>
+                        <li>03 주문완료</li>
+                    </ul>
+                </div>
+            </div>
+            <div id="cartAjaxList" class="cont_body">
+
+            </div>
+        </div>
+        <div class="content shopping_bag mt100">
+            <div class="cont_head">
+                <h4 class="subH1 t_c mb40">추천상품</h4>
+            </div>
+            <div class="cont_body">
+                <div class="od_recommend">
+                    <div class="swiper-container">
+                        <div class="swiper-wrapper">
+                            <div class="swiper-slide">
+                                <div class="item_prod">
+                                    <div class="item_state">
+                                        <a href="#none" class="itemLink">
+                                            <div class="itemPic">
+                                                <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
+                                                <button type="button" class="itemLike">관심상품 추가</button>
+                                            </div>
+                                            <p class="itemBrand">BRAND NAME1</p>
+                                            <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+                                            <p class="itemPrice">80,100
+                                                <span class="itemPrice_original">89,000</span>
+                                                <span class=" itemPercent">10%</span>
+                                            </p>
+                                            <div class="itemcolorchip">
+                                                <span class="chip_color35" value="ABM">BEIGE</span>
+                                                <span class="chip_color54" value="BDS">BLACK</span>
+                                                <span class="chip_color40" value="YBR">WHITE</span>
+                                            </div>
+                                            <div class="itemComment">#주문 폭주 상품</div>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="swiper-slide">
+                                <div class="item_prod">
+                                    <div class="item_state">
+                                        <a href="#none" class="itemLink">
+                                            <div class="itemPic">
+                                                <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
+                                                <button type="button" class="itemLike">관심상품 추가</button>
+                                            </div>
+                                            <p class="itemBrand">BRAND NAME2</p>
+                                            <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+                                            <p class="itemPrice">80,100
+                                                <span class="itemPrice_original">89,000</span>
+                                                <span class=" itemPercent">10%</span>
+                                            </p>
+                                            <div class="itemcolorchip">
+                                                <span class="chip_color35" value="ABM">BEIGE</span>
+                                                <span class="chip_color54" value="BDS">BLACK</span>
+                                                <span class="chip_color40" value="YBR">WHITE</span>
+                                            </div>
+                                            <div class="itemComment">#주문 폭주 상품</div>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="swiper-slide">
+                                <div class="item_prod">
+                                    <div class="item_state">
+                                        <a href="#none" class="itemLink">
+                                            <div class="itemPic">
+                                                <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
+                                                <button type="button" class="itemLike">관심상품 추가</button>
+                                            </div>
+                                            <p class="itemBrand">BRAND NAME3</p>
+                                            <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+                                            <p class="itemPrice">80,100
+                                                <span class="itemPrice_original">89,000</span>
+                                                <span class=" itemPercent">10%</span>
+                                            </p>
+                                            <div class="itemcolorchip">
+                                                <span class="chip_color35" value="ABM">BEIGE</span>
+                                                <span class="chip_color54" value="BDS">BLACK</span>
+                                                <span class="chip_color40" value="YBR">WHITE</span>
+                                            </div>
+                                            <div class="itemComment">#주문 폭주 상품</div>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="swiper-slide">
+                                <div class="item_prod">
+                                    <div class="item_state">
+                                        <a href="#none" class="itemLink">
+                                            <div class="itemPic">
+                                                <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
+                                                <button type="button" class="itemLike">관심상품 추가</button>
+                                            </div>
+                                            <p class="itemBrand">BRAND NAME4</p>
+                                            <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+                                            <p class="itemPrice">80,100
+                                                <span class="itemPrice_original">89,000</span>
+                                                <span class=" itemPercent">10%</span>
+                                            </p>
+                                            <div class="itemcolorchip">
+                                                <span class="chip_color35" value="ABM">BEIGE</span>
+                                                <span class="chip_color54" value="BDS">BLACK</span>
+                                                <span class="chip_color40" value="YBR">WHITE</span>
+                                            </div>
+                                            <div class="itemComment">#주문 폭주 상품</div>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="swiper-slide">
+                                <div class="item_prod">
+                                    <div class="item_state">
+                                        <a href="#none" class="itemLink">
+                                            <div class="itemPic">
+                                                <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
+                                                <button type="button" class="itemLike">관심상품 추가</button>
+                                            </div>
+                                            <p class="itemBrand">BRAND NAME5</p>
+                                            <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+                                            <p class="itemPrice">80,100
+                                                <span class="itemPrice_original">89,000</span>
+                                                <span class=" itemPercent">10%</span>
+                                            </p>
+                                            <div class="itemcolorchip">
+                                                <span class="chip_color35" value="ABM">BEIGE</span>
+                                                <span class="chip_color54" value="BDS">BLACK</span>
+                                                <span class="chip_color40" value="YBR">WHITE</span>
+                                            </div>
+                                            <div class="itemComment">#주문 폭주 상품</div>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="swiper-slide">
+                                <div class="item_prod">
+                                    <div class="item_state">
+                                        <a href="#none" class="itemLink">
+                                            <div class="itemPic">
+                                                <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
+                                                <button type="button" class="itemLike">관심상품 추가</button>
+                                            </div>
+                                            <p class="itemBrand">BRAND NAME6</p>
+
+                                            <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+                                            <p class="itemPrice">80,100
+                                                <span class="itemPrice_original">89,000</span>
+                                                <span class=" itemPercent">10%</span>
+                                            </p>
+                                            <div class="itemcolorchip">
+                                                <span class="chip_color35" value="ABM">BEIGE</span>
+                                                <span class="chip_color54" value="BDS">BLACK</span>
+                                                <span class="chip_color40" value="YBR">WHITE</span>
+                                            </div>
+                                            <div class="itemComment">#주문 폭주 상품</div>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="swiper-slide">
+                                <div class="item_prod">
+                                    <div class="item_state">
+                                        <a href="#none" class="itemLink">
+                                            <div class="itemPic">
+                                                <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
+                                                <button type="button" class="itemLike">관심상품 추가</button>
+                                            </div>
+                                            <p class="itemBrand">BRAND NAME7</p>
+
+                                            <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+                                            <p class="itemPrice">80,100
+                                                <span class="itemPrice_original">89,000</span>
+                                                <span class=" itemPercent">10%</span>
+                                            </p>
+                                            <div class="itemcolorchip">
+                                                <span class="chip_color35" value="ABM">BEIGE</span>
+                                                <span class="chip_color54" value="BDS">BLACK</span>
+                                                <span class="chip_color40" value="YBR">WHITE</span>
+                                            </div>
+                                            <div class="itemComment">#주문 폭주 상품</div>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="swiper-slide">
+                                <div class="item_prod">
+                                    <div class="item_state">
+                                        <a href="#none" class="itemLink">
+                                            <div class="itemPic">
+                                                <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
+                                                <button type="button" class="itemLike">관심상품 추가</button>
+                                            </div>
+                                            <p class="itemBrand">BRAND NAME8</p>
+                                            <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+                                            <p class="itemPrice">80,100
+                                                <span class="itemPrice_original">89,000</span>
+                                                <span class=" itemPercent">10%</span>
+                                            </p>
+                                            <div class="itemcolorchip">
+                                                <span class="chip_color35" value="ABM">BEIGE</span>
+                                                <span class="chip_color54" value="BDS">BLACK</span>
+                                                <span class="chip_color40" value="YBR">WHITE</span>
+                                            </div>
+                                            <div class="itemComment">#주문 폭주 상품</div>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Add Pagination -->
+                        <div class="swiper-pagination"></div>
+                    </div>
+                    <!-- Add Arrows -->
+                    <div class="swiper-button-next"></div>
+                    <div class="swiper-button-prev"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- // container -->
+
+<!-- 쿠폰사용안내 팝업 -->
+<div class="modal fade od_pop cpinfo_pop" id="cpinfoPop" tabindex="-1" role="dialog" aria-labelledby="cpinfoLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="cpinfoLabel">쿠폰사용안내</h5>
+            </div>
+            <div class="modal-body">
+                <div class="pop_cont">
+                    쿠폰사용안내 내용입니다.
+                </div>
+            </div>
+            <div class="modal-footer"></div>
+        </div>
+    </div>
+</div>
+<!-- //쿠폰사용안내 팝업 -->
+
+<script src="/ux/pc/js/swiper.min.js"></script>
+<link rel="stylesheet" type="text/css" href="/ux/pc/css/swiper.min.css" />
+
+<script type="text/javascript">
+    $(document).ready(function() {
+        // 장바구니 상품 정보 select
+        getCartList();
+    });
+
+    function getCartList() {
+        // 장바구니 정보 조회
+        $.ajax( {
+            type: "POST",
+            url : '/cart/goods/list',
+            dataType : 'html',
+            success : function(result) {
+                if (result != null) {
+                    $("#cartAjaxList").html(result);
+                }
+            }
+        });
+    }
+
+    //상품옵션변경 팝업 > 수량조절
+    $(document).on('click','.opt_modify_pop .number_count .minus',function(e){
+        var $input = $(this).parent().find('input');
+        var count = parseInt($input.val()) - 1;
+        count = count < 1 ? 1 : count;
+        $input.val(count);
+        $input.change();
+        return false;
+    }).on('click','.opt_modify_pop .number_count .plus',function(e){
+        var $input = $(this).parent().find('input');
+        $input.val(parseInt($input.val()) + 1);
+        $input.change();
+        return false;
+    });
+
+    //상품옵션변경 팝업 > 컬러선택 표기
+    $(document).on('click','.opt_modify_pop .opt_color ul li a',function(e){
+        $(this).parents('.opt_color').find('li a').removeClass('on');
+        $(this).addClass('on');
+        var optColor = $(this).find("img").attr('alt');
+        $(this).parent().parent().parent().find(".color").text(optColor);
+        return false;
+    });
+
+    $(function(){
+        //추천상품 슬라이드
+        var rcmdItemSwiper = new Swiper('.od_recommend .swiper-container', {
+            slidesPerView: 5,
+            spaceBetween: 0,
+            navigation: {
+                nextEl: '.od_recommend .swiper-button-next',
+                prevEl: '.od_recommend .swiper-button-prev',
+            },
+            pagination: {
+                el: '.od_recommend .swiper-pagination',
+                clickable: true,
+            },
+        });
+    });
+</script>
+</th:block>
+</body>
+</html>