Kaynağa Gözat

이태영 - 20210407 모바일 쇼핑백 개발 중

xodud1202 5 yıl önce
ebeveyn
işleme
32415f96ad

+ 1 - 0
src/main/java/com/style24/front/biz/service/TsfCartService.java

@@ -879,6 +879,7 @@ public class TsfCartService {
 		/* cart.add(cartDao.selectCartGoodsInfo(param)); */
 
 		// 장바구니 상품 마스터 정보 조회
+		param.setFrontGb(TsfSession.getFrontGb());
 		Cart cart = cartDao.selectCartGoodsInfo(param);
 		if(cart == null) {
 			throw new IllegalArgumentException("장바구니 상품 정보가 없습니다.<br/>새로고침 후 다시 시도해주세요.");

+ 1 - 0
src/main/java/com/style24/persistence/domain/Cart.java

@@ -58,6 +58,7 @@ public class Cart extends TscBaseDomain {
 	// 상품 정보
 	private int currStockQty;		// 기준 재고
 	private int qty;				// 구성 상품 기준 재고 수량
+	private int currPrice;			// 상품판매가
 	private String goodsType;		// 상품 타입
 	private String compsGoodsCd;	// 세트 구성상품 코드
 	private String itemCdSql;		// 상품 조회 쿼리문

+ 1 - 0
src/main/java/com/style24/persistence/mybatis/shop/TsfCart.xml

@@ -894,6 +894,7 @@
 			 , CA.GOODS_QTY
 			 , G.SELF_GOODS_YN
 		     , G.GOODS_STAT
+		     , FN_GET_APPLY_CPN1_PRICE(CA.GOODS_CD, #{frontGb}) AS CURR_PRICE
 		FROM   TB_CART CA
 		INNER  JOIN TB_GOODS G
 		ON     CA.GOODS_CD = G.GOODS_CD

+ 389 - 0
src/main/webapp/WEB-INF/views/mob/cart/CartChangeOptionPopupMob.html

@@ -0,0 +1,389 @@
+<html lang="ko"
+	  xmlns:th="http://www.thymeleaf.org">
+
+<!-- 옵션변경 팝업 -->
+<div class="lap cartOptionModal" id="cartOptionModal" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">
+	<div class="popup_close">카테고리닫기</div>
+	<div class="popup_head">
+		<h2>옵션변경</h2>
+	</div>
+	<div class="popup_con">
+		<div class="area_order">
+			<div class="part_goods">
+				<div class="goods_section">
+					<div class="goods_detail">
+						<a href="javascript:;">
+							<th:block th:if="${setType.equals(cart.goodsType) or cart.selfGoodsYn.equals('N')}">
+								<span class="thumb_box" th:each="img, index : ${cart.cartImgList}">
+									<img th:src="${cart.imgPath + '/' + img.sysImgNm} + '?RS=100'" src="/" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"  th:alt="${img.sysImgNm}" alt="" />
+								</span>
+							</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)}">
+											<span class="thumb_box" th:each="img, index : ${color.cartImgList}" th:if="${img.colorCd == color.cartOptCd1}">
+												<img th:src="${cart.imgPath + '/' + img.sysImgNm} + '?RS=100'" src="/" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"  th:alt="${img.sysImgNm}" alt="" />
+											</span>
+										</th:block>
+									</th:block>
+								</th:block>
+							</th:block>
+
+							<div class="info_box">
+								<div class="od_name">
+									<div class="brand">
+										<span th:text="|${cart.brandEnm} ${cart.brandKnm}|"></span>
+									</div>
+									<div class="name" th:text="${cart.goodsNm}"></div>
+								</div>
+								<div class="od_calc">
+									<p class="price">
+										<span class="selling_price"><em th:text="${#numbers.formatInteger(cart.currPrice, 1, 'COMMA')}"></em>원</span>
+									</p>
+								</div>
+							</div>
+						</a>
+					</div>
+				</div>
+			</div>
+
+			<th:block th:each="comp, status : ${cart.cartCompsList}">
+				<!-- 자사 일반 상품 옵션 -->
+				<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}">
+								<span class="info" th:if="${color.cartColorNm != null}" th:text="${color.cartColorNm}"></span>
+							</th:block>
+						</div>
+
+						<ul>
+							<li th:each="color, index : ${comp.cartColorList}" class="selfGoodsColor">
+								<a href="javascript:void(0);" th:cartDtlSq="${color.cartDtlSq}" th:classappend="${color.cartColorNm != null} ? 'on'" class="selfGoodsColorSelect" th:data="${color.optCd1}">
+									<img th:src="${cart.imgPath + '/' + color.sysImgNm} + '?RS=70'" src="#" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'" th:alt="${color.colorNm}" alt="" />
+								</a>
+							</li>
+						</ul>
+
+						<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:if="${color.cartColorNm != null}">
+									<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>
+					</div>
+				</th:block>
+
+				<!-- 세트상품 옵션 -->
+				<th:block th:if="${setType.equals(cart.goodsType)}">
+					<span class="hiddenData">
+						<input type="hidden" class="cartDtlSq" th:value="${comp.cartDtlSq}" />
+						<input type="hidden" class="itemCd" th:value="${comp.goodsCd}" />
+						<input type="hidden" class="optCd" th:classappend="|option_${comp.goodsCd}|" th:value="${comp.optCd}"/>
+						<input type="hidden" class="optCd1" th:classappend="|option1_${comp.goodsCd}|" th:value="${comp.optCd1}"/>
+						<input type="hidden" class="optCd2" th:classappend="|option2_${comp.goodsCd}|" th:value="${comp.optCd2}"/>
+					</span>
+
+					<div class="opt_select">
+						<div class="opt_header">
+							<span class="title" th:text="${comp.goodsNm}"></span>
+						</div>
+						<div class="opt_header">
+							<span class="title">옵션1</span>
+							<span class="color" th:classappend="|chooseColorNm_${comp.goodsCd}|" th:text="${comp.colorNm}"></span>
+							<div class="form_field">
+								<input id="od_item_off" type="checkbox"><label for="od_item_off"><span>품절 제외</span></label>
+							</div>
+						</div>
+						<form class="form_wrap">
+							<div class="form_field">
+								<div class="select_custom item_opt1 colorList">
+									<div class="combo">
+										<div class="select" th:text="${comp.colorNm}"></div>
+										<ul class="list" th:data="${comp.goodsCd}">
+											<th:block th:each="color, index : ${comp.cartColorList}">
+												<li th:classappend="${color.cartColorNm != null} ? 'selected'" th:data="${color.optCd1}" th:text="${color.colorNm}" th:aria-disabled="${color.soldoutYn.equals('Y') ? true : false}"></li>
+											</th:block>
+										</ul>
+									</div>
+								</div>
+							</div>
+						</form>
+					</div>
+					<div class="opt_select">
+						<div class="opt_header">
+							<span class="title">옵션2</span>
+							<span class="color" th:classappend="|chooseSizeNm_${comp.goodsCd}|" th:text="${comp.optCd2}"></span>
+						</div>
+						<form class="form_wrap">
+							<div class="form_field">
+								<th:block th:each="color, index : ${comp.cartColorList}">
+									<div class="select_custom item_opt2 sizeList" th:classappend="|${comp.goodsCd}_${color.optCd1} sizeList${comp.goodsCd}|" th:style="${color.cartColorNm != null ? 'display:block' : 'display:none'}">
+										<div class="combo">
+											<div class="select" th:classappend="|size_${comp.goodsCd}_size_nm|" th:text="${comp.optCd2}" th:data="${color.goodsCd}"></div>
+											<ul class="list setSizeSelect" th:classappend="|size_${comp.goodsCd}|" th:data="${comp.goodsCd}">
+												<th:block th:each="size, i : ${color.cartSizeList}" th:if="${color.optCd1.equals(size.optCd1)}">
+													<li th:classappend="${size.cartOptCd != null} ? selected" th:optCd="${size.optCd}" th:value="${size.optCd}" th:text="${size.optCd2}" th:aria-disabled="${color.soldoutYn.equals('Y') or size.soldoutYn.equals('Y') ? true : false}"></li>
+												</th:block>
+											</ul>
+										</div>
+									</div>
+								</th:block>
+							</div>
+						</form>
+					</div>
+				</th:block>
+
+				<!-- 입점업체 -->
+				<th:block th:if="${!setType.equals(cart.goodsType) and 'N'.equals(cart.selfGoodsYn)}">
+					<span class="hiddenData">
+						<input type="hidden" class="cartDtlSq" th:value="${comp.cartDtlSq}" />
+						<input type="hidden" class="itemCd" th:value="${comp.goodsCd}" />
+						<input type="hidden" class="optCd" th:classappend="|option_${comp.goodsCd}|" th:value="${comp.optCd}"/>
+						<input type="hidden" class="optCd1" th:classappend="|option1_${comp.goodsCd}|" th:value="${comp.optCd1}"/>
+						<input type="hidden" class="optCd2" th:classappend="|option2_${comp.goodsCd}|" th:value="${comp.optCd2}"/>
+					</span>
+
+					<div class="opt_select">
+						<div class="opt_header">
+							<span class="title">옵션1</span>
+							<span class="color" th:classappend="|chooseColorNm_${comp.goodsCd}|" th:text="${comp.colorNm}"></span>
+							<div class="form_field">
+								<input id="od_item_off" type="checkbox"><label for="od_item_off"><span>품절 제외</span></label>
+							</div>
+						</div>
+						<form class="form_wrap">
+							<div class="form_field">
+								<div class="select_custom item_opt1 colorList">
+									<div class="combo">
+										<div class="select" th:text="${comp.colorNm}"></div>
+										<ul class="list" th:data="${comp.goodsCd}">
+											<th:block th:each="color, index : ${comp.cartColorList}">
+												<li th:classappend="${color.cartColorNm != null} ? 'selected'" th:data="${color.optCd1}" th:text="${color.colorNm}" th:aria-disabled="${color.soldoutYn.equals('Y') ? true : false}"></li>
+											</th:block>
+										</ul>
+									</div>
+								</div>
+							</div>
+						</form>
+					</div>
+					<div class="opt_select">
+						<div class="opt_header">
+							<span class="title">옵션2</span>
+							<span class="color" th:classappend="|chooseSizeNm_${comp.goodsCd}|" th:text="${comp.optCd2}"></span>
+						</div>
+						<form class="form_wrap">
+							<div class="form_field">
+								<th:block th:each="color, index : ${comp.cartColorList}">
+									<div class="select_custom item_opt2 sizeList" th:classappend="|${comp.goodsCd}_${color.optCd1} sizeList${comp.goodsCd}|" th:style="${color.cartColorNm != null ? 'display:block' : 'display:none'}">
+										<div class="combo">
+											<div class="select" th:classappend="|size_${comp.goodsCd}_size_nm|" th:text="${comp.optCd2}" th:data="${color.goodsCd}"></div>
+											<ul class="list setSizeSelect" th:classappend="|size_${comp.goodsCd}|" th:data="${comp.goodsCd}">
+												<th:block th:each="size, i : ${color.cartSizeList}" th:if="${color.optCd1.equals(size.optCd1)}">
+													<li th:classappend="${size.cartOptCd != null} ? selected" th:optCd="${size.optCd}" th:value="${size.optCd}" th:text="${size.optCd2}" th:aria-disabled="${color.soldoutYn.equals('Y') or size.soldoutYn.equals('Y') ? true : false}"></li>
+												</th:block>
+											</ul>
+										</div>
+									</div>
+								</th:block>
+							</div>
+						</form>
+					</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"><em class="sr-only">감소</em></span>
+					<input type="text" name="goodsQty" maxlength="3" style='ime-mode:disabled' th:value="${cart.goodsQty}"/>
+					<span class="plus"><em class="sr-only">추가</em></span>
+				</div>
+			</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>
+
+<script th:inline="javascript">
+	$(document).ready(function() {
+		$(".select_custom").each(function() {
+			new sCombo($(this));
+		});
+	});
+
+	// 세트상품, 입점업체 상품 컬러 변경시
+	$("#cartOptionModal .colorList > .combo > .list li").on("click", function(e) {
+		let goodsCd = $(this).parent().attr("data");
+		let optCd1 = $(this).attr("data");
+		let firstSize = "";
+		if(optCd1 != $(".option1_" + goodsCd).val()) {
+			let firstOptCd = $("#cartOptionModal ." + goodsCd + "_" + optCd1 + " li:first").attr("optcd");
+			let firstOptCd2 = $("#cartOptionModal ." + goodsCd + "_" + optCd1 + " li:first").text();
+
+			$("#cartOptionModal .chooseColorNm_" + goodsCd).text($(this).text());
+			$("#cartOptionModal .option_" + goodsCd).val(firstOptCd);
+			$("#cartOptionModal .option1_" + goodsCd).val(optCd1);
+			$("#cartOptionModal .option2_" + goodsCd).val(firstOptCd2);
+
+			$("#cartOptionModal .sizeList" + goodsCd).hide();
+			$("#cartOptionModal ." + goodsCd + "_" + optCd1).show();
+			$("#cartOptionModal ." + goodsCd + "_" + optCd1 + " .select").text(firstOptCd2);
+			$("#cartOptionModal .chooseSizeNm_" + goodsCd).text(firstOptCd2);
+		}
+	});
+
+	// 세트상품, 입점업체 상품 사이즈 변경시
+	$(".sizeList > .combo > .list li").on("click", function() {
+		$(this).parent().parent().parent().parent().parent().parent().find(".opt_header .text").text($(this).text());
+		$("#cartOptionModal .option_" + $(this).parent().attr("data")).val($(this).attr("optcd"));
+		$("#cartOptionModal .option2_" + $(this).parent().attr("data")).val($(this).text());
+	});
+
+	/* 옵션변경 > 수량조절 */
+	//수량1개 이하 감소버튼 비활성화
+	var valItemCount = $('.optModify_pop .number_count input').val();
+	if ( valItemCount == 1 ) {
+		$('.optModify_pop .number_count .minus').addClass('min_val');
+	}
+
+	// 자사 일반 상품 컬러 선택시
+	$(".selfGoodsColorSelect").on("click", function(e) {
+		let sizeHtml = "";
+		let imgHtml = "";
+		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) {
+					sizeHtml += "<div>";
+					sizeHtml += "<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) {
+						sizeHtml += "disabled = 'disabled'";
+					}
+					sizeHtml += " />\n";
+					sizeHtml += "<label for='" + size[j].goodsCd + "-" + size[j].optCd + "'><span>" + size[j].optCd2 + "</span></label>\n"
+					sizeHtml += "</div>\n";
+				}
+			}
+
+			if(optCd1 == color[i].optCd1) {
+				for (let j = 0; j < color[i].cartImgList.length; j++) {
+					let img = color[i].cartImgList[j];
+					if(optCd1 == img.colorCd) {
+						imgHtml += "<li>\n<span class='thumb'>\n";
+						imgHtml += "<img src='" + cart.imgPath + "/" + img.sysImgNm + "' onerror='this.src='" + [[${@environment.getProperty('domain.uximage')}]] + "/images/pc/thumb/bg_item_none.png' alt='" + img.sysImgNm + "' />\n";
+						imgHtml += "</span>\n</li>\n";
+					}
+				}
+			}
+		}
+
+		$(".cartOptionModal .pic_list").html(imgHtml);
+		$(".cartOptionModal .selfGoodsSize").html(sizeHtml);
+	});
+
+	function fnChangeCartOption(cartSq) {
+		let cart = [[${cart}]];
+		var cartDtlSqArr = [], itemCds = [], optCds = [];
+		var data;
+
+		if(cart.goodsType == "G056_S") {
+			$("#cartOptionModal .cartDtlSq").each(function() {
+				optCds.push($(this).parent().find(".optCd").val());
+				cartDtlSqArr.push($(this).parent().find(".cartDtlSq").val());
+				itemCds.push($(this).parent().find(".itemCd").val());
+			});
+
+			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") {
+			if($(".selfGoodsSize").find("input[name=rdi-optsize]:checked").length < 1) {
+				mcxDialog.alert("옵션을 선택해 주세요.");
+				return false;
+			}
+
+			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 {
+			$("#cartOptionModal .cartDtlSq").each(function() {
+				optCds.push($(this).parent().find(".optCd").val());
+				cartDtlSqArr.push($(this).parent().find(".cartDtlSq").val());
+				itemCds.push($(this).parent().find(".itemCd").val());
+			});
+
+			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),
+			error : function(e) {
+				mcxDialog.alert(e.message);
+			},
+			success : function(result) {
+				mcxDialog.alert(result.message);
+				$(".closeCartOptionModal").trigger("click");
+				if(result.status == "SUCCESS") {
+					let data = {shotDelvUseYn : $("input[name=shotDelvUseYn]:checked").val()};
+					getCartList(data);
+				}
+			}
+		});
+	}
+</script>
+<!-- //옵션변경 팝업 -->
+</html>

+ 63 - 10
src/main/webapp/WEB-INF/views/mob/cart/CartListAjaxFormMob.html

@@ -15,7 +15,7 @@
  -->
 <body>
 <th:block layout:fragment="content">
-	<form id="cartListForm" method="post" action="/order/noMember">
+	<form id="cartListForm" method="post" action="/order/noMember" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">
 		<div class="inner shotDelvSelect">
 			<div class="od_method">
 				<div class="tbl_tit">
@@ -97,7 +97,7 @@
 							</div>
 							<div class="thumb_box">
 								<a th:href="|javascript:fnGoToGoodsDetail('${cart.goodsCd}')|">
-									<img th:src="${IMG_PATH} + '/' + ${cart.sysImgNm} + '?RS=100'" src="/" th:alt="${cart.sysImgNm}" alt="">
+									<img th:src="${IMG_PATH} + '/' + ${cart.sysImgNm} + '?RS=100'" src="/" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'" th:alt="${cart.sysImgNm}" alt="">
 								</a>
 							</div>
 							<div class="info_box">
@@ -147,8 +147,8 @@
 						<div class="goods_btn_wrap btn_group_flex">
 							<div><button type="button" class="btn btn_default btn_option_pop01" th:onclick="|fnChangeCartOptCd(${cart.cartSq})|" th:disabled="${cart.ordCanYn.equals('N')}"><span>옵션/수량변경</span></button></div> <!-- 옵션변경_팝업01 호출 -->
 							<div>
-								<button th:if="${cart.soldoutYn.equals('Y') or cart.ordCanYn.equals('N')}" type="button" id="btn_quick_purchase" class="btn btn_primary_line" disabled=""><span>구매 불가</span></button>
-								<button th:if="${cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y')}" type="button" id="btn_quick_purchase" class="btn btn_primary_line"><span>바로주문</span></button>
+								<button th:if="${cart.soldoutYn.equals('Y') or cart.ordCanYn.equals('N')}" type="button" class="btn btn_primary_line" disabled=""><span>구매 불가</span></button>
+								<button th:if="${cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y')}" type="button" class="btn btn_primary_line"><span>바로주문</span></button>
 							</div> <!-- 210406_ID 추가 -->
 						</div>
 
@@ -197,7 +197,7 @@
 							</div>
 							<div class="thumb_box">
 								<a th:href="|javascript:fnGoToGoodsDetail('${cart.goodsCd}')|">
-									<img th:src="${IMG_PATH} + '/' + ${cart.sysImgNm} + '?RS=100'" src="/" th:alt="${cart.sysImgNm}" alt="">
+									<img th:src="${IMG_PATH} + '/' + ${cart.sysImgNm} + '?RS=100'" src="/" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'" th:alt="${cart.sysImgNm}" alt="">
 								</a>
 							</div>
 							<div class="info_box">
@@ -247,8 +247,8 @@
 						<div class="goods_btn_wrap btn_group_flex">
 							<div><button type="button" class="btn btn_default btn_option_pop01" th:onclick="|fnChangeCartOptCd(${cart.cartSq})|" th:disabled="${cart.ordCanYn.equals('N')}"><span>옵션/수량변경</span></button></div> <!-- 옵션변경_팝업01 호출 -->
 							<div>
-								<button th:if="${cart.soldoutYn.equals('Y') or cart.ordCanYn.equals('N')}" type="button" id="btn_quick_purchase" class="btn btn_primary_line" disabled=""><span>구매 불가</span></button>
-								<button th:if="${cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y')}" type="button" id="btn_quick_purchase" class="btn btn_primary_line"><span>바로주문</span></button>
+								<button th:if="${cart.soldoutYn.equals('Y') or cart.ordCanYn.equals('N')}" type="button" class="btn btn_primary_line" disabled=""><span>구매 불가</span></button>
+								<button th:if="${cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y')}" type="button" class="btn btn_primary_line"><span>바로주문</span></button>
 							</div> <!-- 210406_ID 추가 -->
 						</div>
 
@@ -317,7 +317,7 @@
 							</div>
 							<div class="thumb_box">
 								<a th:href="|javascript:fnGoToGoodsDetail('${cart.goodsCd}')|">
-									<img th:src="${IMG_PATH} + '/' + ${cart.sysImgNm} + '?RS=100'" src="/" th:alt="${cart.sysImgNm}" alt="">
+									<img th:src="${IMG_PATH} + '/' + ${cart.sysImgNm} + '?RS=100'" src="/" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'" th:alt="${cart.sysImgNm}" alt="">
 								</a>
 							</div>
 							<div class="info_box">
@@ -367,8 +367,8 @@
 						<div class="goods_btn_wrap btn_group_flex">
 							<div><button type="button" class="btn btn_default" th:onclick="|fnChangeCartOptCd(${cart.cartSq})|" th:disabled="${cart.ordCanYn.equals('N')}"><span>옵션/수량변경</span></button></div>
 							<div>
-								<button th:if="${cart.soldoutYn.equals('Y') or cart.ordCanYn.equals('N')}" type="button" id="btn_quick_purchase" class="btn btn_primary_line" disabled=""><span>구매 불가</span></button>
-								<button th:if="${cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y')}" type="button" id="btn_quick_purchase" class="btn btn_primary_line"><span>바로주문</span></button>
+								<button th:if="${cart.soldoutYn.equals('Y') or cart.ordCanYn.equals('N')}" type="button" class="btn btn_primary_line" disabled=""><span>구매 불가</span></button>
+								<button th:if="${cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y')}" type="button" class="btn btn_primary_line"><span>바로주문</span></button>
 							</div>
 						</div>
 
@@ -660,6 +660,10 @@
 	</div>
 	<!-- //쿠폰사용안내 팝업 -->
 
+	<!-- 옵션변경 팝업 -->
+	<div id="optModifyPop01" class="popup_box optModifyPop optModifyPop01"></div>
+	<!-- //옵션변경 팝업 -->
+
 	<script th:inline="javascript">
 		let sumRealPayAmt = [[${order.sumRealPayAmt + order.totDelvFee}]];
 		let totDcAmt = [[${order.totDcAmt}]];
@@ -1131,6 +1135,22 @@
 			});
 		}
 
+		//옵션변경 팝업열기
+		function fnChangeCartOptCd(cartSq) {
+			$.ajax( {
+				type: "POST",
+				url : '/cart/goods/info',
+				dataType : 'html',
+				data : {cartSq : cartSq},
+				success : function(result) {
+					$("#cartOptionModal").remove();
+					$("#optModifyPop01").html(result);
+					$('#optModifyPop01').show().addClass("active");
+					$("body").css({"overflow":"hidden"});
+				}
+			});
+		}
+
 		// 장바구니 구매 수량 변경
 		function updateGoodsQty(cartSq, goodsQty) {
 			let url = '/cart/update/goodsQty';
@@ -1167,6 +1187,39 @@
 				$("#cartListForm .totalprice_box .sumRealPayAmt").text("0");
 			}
 		});
+
+		//수량조절 이벤트
+		$(document).on('click','.optModifyPop01 .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();
+			//수량1개 이하 감소버튼 비활성화
+			if ($input.val() == 1) {
+				$('.optModifyPop01 .number_count .minus').addClass('min_val');
+			}
+			return false;
+		}).on('click','.optModifyPop01 .number_count .plus',function(e){
+			var $input = $(this).parent().find('input');
+			$input.val(parseInt($input.val()) + 1);
+			$input.change();
+			//수량2개 이상부터 감소버튼 활성화
+			$('.optModifyPop01 .number_count .minus').removeClass('min_val');
+			return false;
+		}).on('keyup','.optModifyPop01 .number_count input[type=text]',function(e){
+			//텍스트, 0 입력금지
+			$(this).val($(this).val().replace(/[^1-9]/g,""));
+		});
+
+		/* 팝업 - 옵션변경 > 컬러선택 표기 */
+		$(document).on('click','.optModifyPop .opt_color ul li a',function(e){
+			$(this).parents('.opt_color').find('li a').removeClass('on');
+			$(this).addClass('on');
+			var optColor = $('.optModifyPop .opt_color ul li a.on img').attr('alt');
+			$('.optModify_pop .opt_color .opt_header .color').text(optColor);
+			return false;
+		});
 	</script>
 </th:block>
 </body>

+ 18 - 10
src/main/webapp/WEB-INF/views/mob/cart/CartListFormMob.html

@@ -34,6 +34,7 @@
 			</div>
 		</div>
 		<!-- //옵션변경_팝업01 -->
+
 		<!-- 옵션변경_팝업02 -->
 		<div id="optModifyPop02" class="popup_box optModifyPop optModifyPop02">
 			<div class="lap">
@@ -45,6 +46,7 @@
 			</div>
 		</div>
 		<!-- //옵션변경_팝업02 -->
+
 		<!-- 다다익선 할인 대상_팝업 -->
 		<div id="moresalePop" class="popup_box moresalePop">
 			<div class="lap">
@@ -96,42 +98,48 @@
 		var od_recommend_slide = new Swiper('.od_recommend .swiper-container', {
 			slidesPerView: 2,
 			spaceBetween: 8,
-			centerMode: true,
+			centerMode: true
 		});
 
 		//배송요청사항
-		var my_deilivery_selecter = new sCombo('.my .ship_request .select_custom');
+		// var my_deilivery_selecter = new sCombo('.my .ship_request .select_custom');
+
+		//상품옵션변경 팝업 > 컬러선택 표기
+		$(document).on('change','input[name=shotDelvUseYn]',function(e){
+			let data = {shotDelvUseYn : $("input[name=shotDelvUseYn]:checked").val()};
+			getCartList(data);
+		});
 
 		//옵션변경_팝업01
 		$(document).on("click", ".btn_option_pop01", function(){
-			$("#optModifyPop01 .popup_con").load("popup_optModify01.html");
-			$('#optModifyPop01').show().addClass("active");
-			$("body").css({"overflow":"hidden"});
+			//$("#optModifyPop01 .popup_con").load("popup_optModify01.html");
+			/*$('#optModifyPop01').show().addClass("active");
+			$("body").css({"overflow":"hidden"});*/
 		});
 
 		//옵션변경_팝업02
 		$(document).on("click", ".btn_option_pop02", function(){
-			$("#optModifyPop02 .popup_con").load("popup_optModify02.html");
+			//$("#optModifyPop02 .popup_con").load("popup_optModify02.html");
 			$('#optModifyPop02').show().addClass("active");
 			$("body").css({"overflow":"hidden"});
 		});
 
 		//다다익선 할인 대상_팝업
 		$(document).on("click", ".btn_moresale_pop", function(){
-			$("#moresalePop .popup_con").load("popup_moresale.html");
+			//$("#moresalePop .popup_con").load("popup_moresale.html");
 			$('#moresalePop').show().addClass("active");
 			$("body").css({"overflow":"hidden"});
 		});
 
 		//배송비 SAVE_팝업
 		$(document).on("click", ".btn_popup_save", function(){
-			$("#dlvrSavePop .popup_con").load("popup_dlvrSave.html");
+			//$("#dlvrSavePop .popup_con").load("popup_dlvrSave.html");
 			$('#dlvrSavePop').show().addClass("active");
 			$("body").css({"overflow":"hidden"});
 		});
 
 		//팝업_닫기
-		$('.popup_close').on("click",function(){
+		$(document).on("click", ".popup_close", function(){
 			$('.popup_box').hide();
 			$('.popup_box').removeClass('active');
 			$("body").css({"overflow":"visible"});
@@ -139,7 +147,7 @@
 
 		//팝업 - 쿠폰사용안내
 		$(document).on('click','#btn_couponInfo_pop',function(e){
-			$("#couponInfoPop .modal-content").load("popup_couponInfo.html");
+			//$("#couponInfoPop .modal-content").load("popup_couponInfo.html");
 			$("#couponInfoPop").modal("show");
 			return false;
 		});

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

@@ -1,12 +1,12 @@
 <html lang="ko"
 	  xmlns:th="http://www.thymeleaf.org">
 <!-- 옵션변경 팝업 -->
-<div id="cartOptionModal" class="modal-dialog cartOptionModal" role="document">
+<div id="cartOptionModal" class="modal-dialog cartOptionModal" role="document" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">
 	<div class="modal-content">
 		<div class="modal-header">
 			<h5 class="modal-title" id="optModifyLabel">옵션변경</h5>
 			<div class="prod_title">
-				<span class="name" th:text="${cart.goodsNm}">버카루 BUCKROO 남성 제기장 스웨이드 자켓</span>
+				<span class="name" th:text="${cart.goodsNm}"></span>
 			</div>
 		</div>
 		<div class="modal-body">
@@ -16,7 +16,7 @@
 						<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} + '?RS=180'" src="#" alt="" />
+									<img th:src="${cart.imgPath + '/' + img.sysImgNm} + '?RS=180'" src="/" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"  th:alt="${img.sysImgNm}" alt="" />
 								</span>
 							</li>
 						</th:block>
@@ -26,7 +26,7 @@
 									<th:block th:if="${color.cartOptCd1 != null and color.cartOptCd1.equals(color.optCd1)}">
 										<li th:each="img, index : ${color.cartImgList}" th:if="${img.colorCd == color.cartOptCd1}">
 											<span class="thumb">
-												<img th:src="${cart.imgPath + '/' + img.sysImgNm} + '?RS=180'" src="#" alt="" />
+												<img th:src="${cart.imgPath + '/' + img.sysImgNm} + '?RS=180'" src="/" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"  th:alt="${img.sysImgNm}" alt="" />
 											</span>
 										</li>
 									</th:block>
@@ -108,7 +108,7 @@
 								<ul>
 									<li th:each="color, index : ${comp.cartColorList}" class="selfGoodsColor">
 										<a href="javascript:void(0);" 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="" />
+											<img th:src="${cart.imgPath + '/' + color.sysImgNm} + '?RS=70'" src="#" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'" th:alt="${color.colorNm}" alt="" />
 										</a>
 									</li>
 								</ul>
@@ -274,7 +274,7 @@
 						let img = color[i].cartImgList[j];
 						if(optCd1 == img.colorCd) {
 							imgHtml += "<li>\n<span class='thumb'>\n";
-							imgHtml += "<img src='" + cart.imgPath + "/" + img.sysImgNm + "' alt='' />\n";
+							imgHtml += "<img src='" + cart.imgPath + "/" + img.sysImgNm + "' onerror='this.src='" + [[${@environment.getProperty('domain.uximage')}]] + "/images/pc/thumb/bg_item_none.png' alt='" + img.sysImgNm + "' />\n";
 							imgHtml += "</span>\n</li>\n";
 						}
 					}

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

@@ -14,7 +14,7 @@
  *******************************************************************************
  -->
 <div id="cartAjaxArea">
-	<form id="cartListForm" method="post" action="/order/noMember">
+	<form id="cartListForm" method="post" action="/order/noMember" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">
 		<!--<input type="hidden" name="cartCpnDcAmt" id="cartCpnDcAmt" th:value="${param.cartCpnDcAmt}" />-->
 
 		<!-- CONT-BODY -->
@@ -108,8 +108,8 @@
 											<div class="goods_box">
 												<div class="gd_item">
 													<a th:href="|javascript:fnGoToGoodsDetail('${cart.goodsCd}')|">
-														<span class="thumb">
-															<img th:src="${IMG_PATH} + '/' + ${cart.sysImgNm}" src="/" width="100%" alt="">
+														<span class="thumb" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}">
+															<img th:src="${IMG_PATH} + '/' + ${cart.sysImgNm} + '?RS=100'" src="/" width="100%" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"  th:alt="${cart.sysImgNm}" alt="">
 														</span>
 														<p>
 															<span class="brand" th:text="|${cart.brandEnm} ${cart.brandKnm}|"></span>
@@ -223,7 +223,7 @@
 											<div class="goods_box">
 												<div class="gd_item">
 													<a th:href="|javascript:fnGoToGoodsDetail('${cart.goodsCd}')|">
-														<span class="thumb"><img th:src="${IMG_PATH} + '/' + ${cart.sysImgNm}" src="/" width="100%" alt=""></span>
+														<span class="thumb"><img th:src="${IMG_PATH} + '/' + ${cart.sysImgNm} + '?RS=100'" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'" src="/" width="100%"  th:alt="${cart.sysImgNm}" alt=""></span>
 														<p><span class="brand" th:text="|${cart.brandEnm} ${cart.brandKnm}|"></span></p>
 														<p><span class="name" th:text="${cart.goodsNm}"></span></p>
 													</a>
@@ -343,7 +343,7 @@
 											<div class="goods_box">
 												<div class="gd_item">
 													<a th:href="|javascript:fnGoToGoodsDetail('${cart.goodsCd}')|">
-														<span class="thumb"><img th:src="${IMG_PATH} + '/' + ${cart.sysImgNm}" src="/" width="100%" alt=""></span>
+														<span class="thumb"><img th:src="${IMG_PATH} + '/' + ${cart.sysImgNm} + '?RS=100'" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'" src="/" width="100%"  th:alt="${cart.sysImgNm}" alt=""></span>
 														<p><span class="brand" th:text="|${cart.brandEnm} ${cart.brandKnm}|"></span></p>
 														<p><span class="name" th:text="${cart.goodsNm}"></span></p>
 													</a>

+ 2 - 2
src/main/webapp/WEB-INF/views/web/common/fragments/FooterWeb.html

@@ -1082,7 +1082,7 @@
 							}
 							quickShoppingBagHtml += "			<a href='javascript:fnGoToGoodsDetail(\"" + info.goodsCd + "\")' class='itemLink'>";
 							quickShoppingBagHtml += '				<div class="itemPic">';
-							quickShoppingBagHtml += '					<img alt="BLACK-a" class="vLHTC pd_img" src="' + order.imgPath1 + '/' + info.sysImgNm + '"/>';
+							quickShoppingBagHtml += '					<img alt="BLACK-a" class="vLHTC pd_img" src="' + order.imgPath1 + '/' + info.sysImgNm + '?RS=120"/>';
 							quickShoppingBagHtml += '				</div>';
 							quickShoppingBagHtml += '				<p class="itemBrand">' + info.brandEnm + ' ' + info.brandKnm + '</p>';
 							quickShoppingBagHtml += '				<div class="itemName">' + info.goodsNm + '</div>';
@@ -1123,7 +1123,7 @@
 					}
 
 					quickShoppingBagHtml += '</div>';
-					quickShoppingBagHtml += '<button type="button" class="btn btn_default purchase_btn" onclick="quickCartOrder()"><span>전체 상품 구매하기</span></button>';
+					quickShoppingBagHtml += '<button type="button" class="btn btn_default purchase_btn" onclick="cfnGoToPage(_PAGE_CART);"><span>쇼핑백 바로가기</span></button>';
 				} else {
 					if(!$("#quick_menu .shopingbag.quick_con.quick02 .quick_body").hasClass("nodata")) {
 						$("#quick_menu .shopingbag.quick_con.quick02 .quick_body").addClass("nodata");

+ 8 - 0
src/main/webapp/ux/mo/css/common_m.css

@@ -372,6 +372,14 @@ input[type="file"] {
 .select_dress:active, .select_dress.active {background-color: #ffffff;border: 1px solid #222222;border-bottom: 1px solid #dddddd;}
 .select_dress:active:after, .select_dress.active:after {top: 9px;border-color: transparent transparent #888888 transparent;}
 
+/* select-pure */
+/* pure-setting */.select.pure select {-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;appearance: none;outline: 0;box-shadow: none;border: 0 !important;background-image: none;}
+/* Remove IE arrow */.select.pure select::-ms-expand {display: none;}
+.select.pure {position: relative;display: flex;line-height: 3;overflow: hidden;width: 10rem;right: 0;top: 0;}
+.select.pure select {flex: 1;padding: 0 .5em;cursor: pointer;position: relative;box-sizing: border-box;height: 4.5rem;line-height: 1;cursor: pointer;padding: 0.5rem;background-color: #ffffff;border: 0px solid #dddddd;font-size: 1.2rem;}
+.select.pure::after {content: '';width: 0;height: 0;box-sizing: border-box;position: absolute;top: 2.0rem;right: 0rem;border: 0.4rem solid transparent;border-color: #222222 transparent transparent transparent;cursor: pointer;pointer-events: none;-webkit-transition: .25s all ease;-o-transition: .25s all ease;transition: .25s all ease;}
+.select.pure:hover::after {color: #666666;}
+
 /* select-custom */
 .select_custom {
 	cursor: pointer;

+ 2 - 1
src/main/webapp/ux/mo/css/style24_m.css

@@ -911,7 +911,7 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 .my .lnb_list li a {display: block; padding: 2rem; background: url(/images/mo/ico_lnb_arrow.png) no-repeat right 2rem center; background-size:0.7rem 1.26rem;}
 
 .my .mem_rank {position: relative; padding:1.6rem 0; padding-left: 6rem;}
-.my .mem_rank .mem_name {dib font-size: 1.8rem; font-weight: 300;}
+.my .mem_rank .mem_name {font-size: 1.8rem; font-weight: 300;}
 .my .mem_rank .mem_name strong {font-weight: 500;}
 .my .mem_rank .rank_txt {display: inline-block; font-size: 1.8rem; color: #666; font-weight: 500; padding-right: 1.7rem; background: url(/images/mo/ico_btn_detail03.png) no-repeat right top 5px; background-size:0.7rem 1.3rem;}
 .my .mem_rank .rank_txt02 button {display: inline-block; font-size: 14px; padding-right: 13px; margin-right: 20px; background: url(/images/pc/ico_mysm_arrow.png) no-repeat right top 6px;}
@@ -2208,6 +2208,7 @@ main.container .shopping_bag .inner:last-child {padding-bottom: 0;}
 
 .shopping_bag .part_goods .goods_btn_wrap {margin: 1.8rem 0 0; padding-left: 3rem;}
 .goods_btn_wrap > div > .btn.btn_primary_line {border:1px solid #fd4802;}
+.goods_btn_wrap > div > button[disabled] {background: #000;color: #fff;border: 1px solid #000000 !important;}
 .shopping_bag .goods_dlvr_save {margin-top: 1.8rem; text-align: center;}
 .shopping_bag .goods_dlvr_save a.btn_popup_save {display:inline-block; padding-right:20px; text-align: center; color:#fd4802; font-size:1.1rem; font-weight:200; line-height:14px; text-decoration:underline; background:url('/images/mo/ico_go_save.png') no-repeat 98% 45%; background-size:1.1rem;}
 

+ 1 - 1
src/main/webapp/ux/pc/css/common.css

@@ -1252,7 +1252,7 @@ input[type="file"] {
 .quick_menu_group .area > div:first-child span:first-child a{margin-left:0}
 .quick_menu_group .area > div:first-child span:first-child a:after{display:none}
 .quick_menu_group .area > div:first-child span a:after{position:absolute;top:13px;left:0;width:1px;height:13px;background:#959596;content:''}
-.quick_menu_group .inr a{margin-left:16px;color:#eeeeee;}*/
+.quick_menu_group .inr a{margin-left:16px;color:#eeeeee;}
 
 
 

+ 1 - 1
src/main/webapp/ux/pc/css/layout.css

@@ -2563,7 +2563,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 	/***** pd_detail *****/
 	.pd_detail {}
-	.pd_detail .thumb {display:block; position:relative; width:100%; height:0px; line-height:0; font-size:0; padding-top:150%; overflow:hidden;background:#f5f5f5;background: #ffffff;border: 1px solid #f5f5f5;box-sizing: border-box;}
+	.pd_detail .thumb {display:block; position:relative; width:100%; height:0px; line-height:0; font-size:0; padding-top:150%; overflow:hidden;background:#f5f5f5;background: #ffffff;border: 1px solid #f5f5f5;box-sizing: content-box;}
 	.pd_detail .thumb img,
 	.pd_detail .thumb video {position:absolute; left:0; top:50%; width:100%; transform:translateY(-50%) ; z-index:2;}
 	.pd_detail .btn_popup {display:inline-block; padding:0px; box-sizing:border-box;}