상품상세 옵션 선택 팝업 관련 수정

src/main/webapp/WEB-INF/views/mob/goods/GoodsDealDetailFormMob.html

@@ -280,90 +280,6 @@
 							</th:block>
 						</div>
 					</div>
-					<!-- 옵션선택팝업 -->
-					<div class="pop_option_select">
-						<div class="close">닫기</div>
-						<div class="pp_body">
-							<div class="pp_cont">
-								<div class="opt_select">
-									<div class="opt_header">
-										<span class="title">옵션선택</span>
-										<div class="check_excluding form_field">
-											<div>
-												<input id="soldoutSkipYn" name="soldoutSkipYn" type="checkbox" value="Y" th:onclick="fnDealCompsGoods('Up',[[${goodsInfo.goodsCd}]]);"><label for="soldoutSkipYn"><span>품절제외</span> </label>
-											</div>
-											<div class="guidance" >
-												<!--210409_ 추가 : .guidance에 .ontoast 추가 시, toast 팝업 작동 -->
-												<p>품절 옵션이 제외되었습니다</p>
-											</div>
-											<script>
-												function getGuidance()  {
-													if($('.pop_option_select').find('input[name=soldoutSkipYn]').is(":checked")){
-														$(".guidance").addClass("ontoast");
-														setTimeout(function(){$(".guidance").removeClass("ontoast");}, 5000);
-													}
-												}
-											</script>
-										</div>
-									</div>
-									<div class="form_wrap">
-										<div class="form_field mb10" id="form_field_item_Up">
-											<div class="select_custom deal_opt_item"> <!-- active -->
-												<div class="combo">
-													<div class="select">선택</div>
-													<ul class="list">
-														<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가  -->
-														<li th:each="goodsInfo, status : ${goodsDealComposeList}" 
-															th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}"
-															th:onclick="fnOption1('Up', [[${goodsInfo.compsGoodsCd}]], [[${goodsInfo.currPrice}]] , [[${goodsInfo.selfGoodsYn}]]);"
-															 class="">
-															<div class="item_prod" th:attr="goodsCd=${goodsInfo.compsGoodsCd}">
-																<div class="item_state">
-																	<a href="javascript:void(0);" class="itemLink">
-																		<div class="itemPic">
-																			<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm+'?RS=44'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
-																		</div>
-																		<div class="itemName" ><span class="tit_option" th:text="${'[상품'+status.count+']'}">[상품1]</span><th:block th:text="${goodsInfo.goodsFullNm}"></th:block></div>
-																		<p class="itemPrice">
-																			<th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
-																			<span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">89,000</span>
-																			<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">10%</span>
-																		</p>
-																	</a>
-																	<input type="hidden" name="selectGoods" th:attr="goodsNm=${'[상품'+status.count+']' +goodsInfo.goodsFullNm}, currPrice=${goodsInfo.currPrice}, goodsCd=${goodsInfo.compsGoodsCd}" />
-																</div>
-															</div>
-														</li>
-													</ul>
-												</div>
-											</div>
-										</div>
-										<div class="form_field" id="form_field1_Up">
-											<div class="select_custom item_opt1" disabled>
-												<div class="combo">
-													<div class="select">선택</div>
-													<ul class="list" id="goodsDealOptUp1">
-														<!--  옵션 1 -->
-													</ul>
-												</div>
-											</div>
-										</div>
-										<div class="form_field"  id="form_field2_Up">
-											<div class="select_custom item_opt2" disabled>
-												<div class="combo">
-													<div class="select">선택</div>
-													<ul class="list" id="goodsDealOptUp2">
-														<!--  옵션 2 -->
-													</ul>
-												</div>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<!-- //옵션선택팝업 -->
 				</div>
 				<div class="body btPop_foot btPopAuto_foot">
 					<!-- 총 결재금액, 하단버튼 -->
@@ -394,9 +310,94 @@
 				</div>
 			</div>
 			<!-- 구매하기팝업 -->
+			
+			<!-- 210528_옵션선택팝업 분리 -->
+			<!-- 옵션선택팝업 -->
+			<div class="pop_option_select">
+				<div class="close">닫기</div>
+				<div class="pp_body">
+					<div class="pp_cont">
+						<div class="opt_select">
+							<div class="opt_header">
+								<span class="title">옵션선택</span>
+								<div class="check_excluding form_field">
+									<div>
+										<input id="soldoutSkipYn" name="soldoutSkipYn" type="checkbox" value="Y" th:onclick="fnDealCompsGoods('Up',[[${goodsInfo.goodsCd}]]);"><label for="soldoutSkipYn"><span>품절제외</span> </label>
+									</div>
+									<div class="guidance" >
+										<!--210409_ 추가 : .guidance에 .ontoast 추가 시, toast 팝업 작동 -->
+										<p>품절 옵션이 제외되었습니다</p>
+									</div>
+									<script>
+										function getGuidance()  {
+											if($('.pop_option_select').find('input[name=soldoutSkipYn]').is(":checked")){
+												$(".guidance").addClass("ontoast");
+												setTimeout(function(){$(".guidance").removeClass("ontoast");}, 5000);
+											}
+										}
+									</script>
+								</div>
+							</div>
+							<div class="form_wrap">
+								<div class="form_field mb10" id="form_field_item_Up">
+									<div class="select_custom deal_opt_item"> <!-- active -->
+										<div class="combo">
+											<div class="select">선택</div>
+											<ul class="list">
+												<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가  -->
+												<li th:each="goodsInfo, status : ${goodsDealComposeList}" 
+													th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}"
+													th:onclick="fnOption1('Up', [[${goodsInfo.compsGoodsCd}]], [[${goodsInfo.currPrice}]] , [[${goodsInfo.selfGoodsYn}]]);"
+													 class="">
+													<div class="item_prod" th:attr="goodsCd=${goodsInfo.compsGoodsCd}">
+														<div class="item_state">
+															<a href="javascript:void(0);" class="itemLink">
+																<div class="itemPic">
+																	<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm+'?RS=44'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
+																</div>
+																<div class="itemName" ><span class="tit_option" th:text="${'[상품'+status.count+']'}">[상품1]</span><th:block th:text="${goodsInfo.goodsFullNm}"></th:block></div>
+																<p class="itemPrice">
+																	<th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
+																	<span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">89,000</span>
+																	<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">10%</span>
+																</p>
+															</a>
+															<input type="hidden" name="selectGoods" th:attr="goodsNm=${'[상품'+status.count+']' +goodsInfo.goodsFullNm}, currPrice=${goodsInfo.currPrice}, goodsCd=${goodsInfo.compsGoodsCd}" />
+														</div>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
+								</div>
+								<div class="form_field" id="form_field1_Up">
+									<div class="select_custom item_opt1" disabled>
+										<div class="combo">
+											<div class="select">선택</div>
+											<ul class="list" id="goodsDealOptUp1">
+												<!--  옵션 1 -->
+											</ul>
+										</div>
+									</div>
+								</div>
+								<div class="form_field"  id="form_field2_Up">
+									<div class="select_custom item_opt2" disabled>
+										<div class="combo">
+											<div class="select">선택</div>
+											<ul class="list" id="goodsDealOptUp2">
+												<!--  옵션 2 -->
+											</ul>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!-- //옵션선택팝업 -->
 		</div>
 		<!-- 팝업영역 -->
-
 	</section>
 	<!-- ★ 컨텐츠 종료 -->	
 
@@ -1251,11 +1252,12 @@
 
 		//팝업 - 구매하기 > 옵션선택 > 옵션셀렉트팝업
 		$(document).on('click','.Purchase_pop .option_result .option_open',function(e){
-			 $(".Purchase_pop .pop_option_select").show();
+		 	$(".pop_option_select").show();
 			 return false;
 		 });
 		$(document).on('click','.Purchase_pop .close',function(e){
-			 $(".Purchase_pop .pop_option_select").hide();
+			$(".pop_option_select").hide();
+			$('.option_result .option_open').removeClass('on');
 			 return false;
 		 })
 //			//팝업 - 딜상세정보 옵션선택 > 옵션셀렉트팝업 ==> fnGoodsDealOptionOpen()대체

src/main/webapp/WEB-INF/views/mob/goods/GoodsDetailFormMob.html

@@ -1127,108 +1127,6 @@
 						</th:block>
 					</div>
 				</div>
-				<!-- 옵션선택팝업 -->
-				<div class="pop_option_select">
-					<div class="close">닫기</div>
-					<div class="pp_body">
-						<div class="pp_cont">
-							<div class="opt_select">
-								<div class="opt_header">
-									<span class="title">옵션선택</span>
-									<div class="check_excluding form_field">
-										<div>
-											<input id="soldoutSkipYn" name="soldoutSkipYn" type="checkbox" value="Y" th:onclick="fnOption1(1,[[${goodsInfo.goodsCd}]]);"><label for="soldoutSkipYn"><span>품절제외</span> </label>
-										</div>
-										<div class="guidance" >
-											<!--210409_ 추가 : .guidance에 .ontoast 추가 시, toast 팝업 작동 -->
-											<p>품절 옵션이 제외되었습니다</p>
-										</div>
-										<script>
-											function getGuidance()  {
-												if($('.pop_option_select').find('input[name=soldoutSkipYn]').is(":checked")){
-													$(".guidance").addClass("ontoast");
-													setTimeout(function(){$(".guidance").removeClass("ontoast");}, 5000);
-												}
-											}
-										</script>
-									</div>
-								</div>
-								<!-- 일반상품일때 -->
-								<th:block th:if="${goodsInfo.selfGoodsYn =='N' }"> <!--  입점상품 -->
-								<div class="nomOption">
-									<div class="form_wrap">
-										<div class="form_field" th:id="${'form_field1_'+goodsInfo.goodsCd}">
-											<div class="select_custom item_opt1 item_opt1_1"  th:classappend="${goodsInfo.goodsCd}" th:attr="id=${goodsInfo.goodsCd}">
-												<div class="combo">
-													<div class="select">선택</div>
-													<ul class="list" style="display: none;">
-														<!-- <li class="selected" th:id="|selfGoodsOpt1${goodsInfo.goodsCd}|" >선택</li>  -->
-														<th:block th:each="goodsOption, optionStatus : ${goodsOption1List}" >
-														<li th:onclick="fnOption2([[${optionStatus.count}]], [[${goodsOption.goodsCd}]],[[${goodsOption.optCd1}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]])"
-															th:attr="aria-disabled=${(goodsOption.goodsStat != 'G008_90' or goodsOption.stockQty <= 0)? 'true':''}, data-soldout=${(goodsOption.goodsStat != 'G008_90'  or goodsOption.stockQty <= 0)? 'true':''}">
-															<div th:text="${goodsOption.optCd1}">상품옵션</div>
-															<div th:if="${goodsOption.addPrice > 0}" th:text="|${#numbers.formatInteger(goodsOption.addPrice, 0,'COMMA')}원|">0원</div>
-															<input type="hidden" name="opt" th:value="${goodsOption.goodsCd}" th:attr="selfGoodsYn=${goodsOption.selfGoodsYn}"/>
-														</li>
-														</th:block>
-													</ul>
-												</div>
-											</div>
-										</div>
-										<div class="form_field" th:id="${'form_field2_'+goodsInfo.goodsCd}"> 
-											<div class="select_custom item_opt2 item_opt2_1" th:classappend="${goodsInfo.goodsCd}"  disabled th:attr="qty=${goodsInfo.minOrdQty}">
-												<div class="combo">
-													<div class="select">선택</div>
-													<ul class="list" th:id="|goodsOpt2${goodsInfo.goodsCd}|" >
-														<!-- 옵션2 -->
-													</ul>
-												</div>
-											</div>
-										</div>
-									</div>
-								</div>
-								</th:block>
-								<!-- //일반상품일때 -->
-								<!-- 셋트상품일때 -->
-								<th:block th:if="${goodsInfo.goodsType =='G056_S' }">	<!-- 세트상품 -->
-								<div class="setOption" th:if="${goodsComposeList != null and !goodsComposeList.empty}" >
-									<div class="form_wrap"  th:each="goodsCompose, status : ${goodsComposeList}">
-										<div class="form_field" th:id="${'form_field1_'+goodsCompose.compsGoodsCd}">
-											<p class="title" th:text="${goodsCompose.compsGoodsFullNm}">슬림핏</p>
-											<div class="select_custom item_opt1" th:classappend="${'item_opt1_'+status.count +' '+goodsCompose.compsGoodsCd}" th:attr="id=${goodsCompose.compsGoodsCd}, qty=${goodsCompose.qty}"
-																				th:if="${goodsCompose.goodsOption1List != null and !goodsCompose.goodsOption1List.empty}" >
-												<div class="combo">
-													<div class="select">선택</div>
-													<ul class="list" style="display: none;">
-														<th:block th:each="goodsOption, optionStatus : ${goodsCompose.goodsOption1List}" >
-														<!-- <li class="selected" th:id="|selfGoodsOpt1${goodsCompose.compsGoodsCd}|" th:if=${optionStatus.first}>선택</li> --> 
-														<li th:onclick="fnOption2([[${status.count}]], [[${goodsOption.goodsCd}]],[[${goodsOption.optCd1}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]])"
-															th:attr="aria-disabled=${(goodsCompose.goodsStat != 'G008_90' or goodsOption.stockQty <= 0)? 'true':''}, data-soldout=${(goodsOption.stockQty <= 0)? 'true':''}"
-															><th:block th:text="${goodsOption.optCd1Nm}"></th:block>
-															<input type="hidden" name="opt" th:value="${goodsOption.goodsCd}" th:attr="optCd1=${goodsOption.optCd1},optCd1Nm=${goodsOption.optCd1Nm},optCd2=${goodsOption.optCd2},optCd=${goodsOption.optCd}"/>
-														</li>
-														</th:block>
-													</ul>
-												</div>
-											</div>
-										</div>
-										<div class="form_field" th:id="${'form_field2_'+goodsCompose.compsGoodsCd}">
-											<div class="select_custom item_opt2" th:classappend="${'item_opt2_'+status.count +' '+goodsCompose.compsGoodsCd}" disabled>
-												<div class="combo">
-													<div class="select">선택</div>
-													<ul class="list" th:id="|goodsOpt2${goodsCompose.compsGoodsCd}|">
-													</ul>
-												</div>
-											</div>
-										</div>
-									</div>
-								</div>
-								</th:block>
-							</div>
-						</div>
-					</div>
-				</div>
-				<!-- //옵션선택팝업 -->
 			</div>
 			<div class="body btPop_foot btPopAuto_foot">
 				<!-- 총 결재금액, 하단버튼 -->
@@ -1257,6 +1155,111 @@
 			</div>
 		</div>
 		<!-- 구매하기팝업 -->
+		
+		<!-- 옵션선택팝업 -->
+		<div class="pop_option_select">
+			<div class="close">닫기</div>
+			<div class="pp_body">
+				<div class="pp_cont">
+					<div class="opt_select">
+						<div class="opt_header">
+							<span class="title">옵션선택</span>
+							<div class="check_excluding form_field">
+								<div>
+									<input id="soldoutSkipYn" name="soldoutSkipYn" type="checkbox" value="Y" th:onclick="fnOption1(1,[[${goodsInfo.goodsCd}]]);"><label for="soldoutSkipYn"><span>품절제외</span> </label>
+								</div>
+								<div class="guidance" >
+									<!--210409_ 추가 : .guidance에 .ontoast 추가 시, toast 팝업 작동 -->
+									<p>품절 옵션이 제외되었습니다</p>
+								</div>
+								<script>
+									function getGuidance()  {
+										if($('.pop_option_select').find('input[name=soldoutSkipYn]').is(":checked")){
+											$(".guidance").addClass("ontoast");
+											setTimeout(function(){$(".guidance").removeClass("ontoast");}, 5000);
+										}
+									}
+								</script>
+							</div>
+						</div>
+						<!-- 일반상품일때 -->
+						<th:block th:if="${goodsInfo.selfGoodsYn =='N' }"> <!--  입점상품 -->
+						<div class="nomOption">
+							<div class="form_wrap">
+								<div class="form_field" th:id="${'form_field1_'+goodsInfo.goodsCd}">
+									<div class="select_custom item_opt1 item_opt1_1"  th:classappend="${goodsInfo.goodsCd}" th:attr="id=${goodsInfo.goodsCd}">
+										<div class="combo">
+											<div class="select">선택</div>
+											<ul class="list" style="display: none;">
+												<!-- <li class="selected" th:id="|selfGoodsOpt1${goodsInfo.goodsCd}|" >선택</li>  -->
+												<th:block th:each="goodsOption, optionStatus : ${goodsOption1List}" >
+												<li th:onclick="fnOption2([[${optionStatus.count}]], [[${goodsOption.goodsCd}]],[[${goodsOption.optCd1}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]])"
+													th:attr="aria-disabled=${(goodsOption.goodsStat != 'G008_90' or goodsOption.stockQty <= 0)? 'true':''}, data-soldout=${(goodsOption.goodsStat != 'G008_90'  or goodsOption.stockQty <= 0)? 'true':''}">
+													<div th:text="${goodsOption.optCd1}">상품옵션</div>
+													<div th:if="${goodsOption.addPrice > 0}" th:text="|${#numbers.formatInteger(goodsOption.addPrice, 0,'COMMA')}원|">0원</div>
+													<input type="hidden" name="opt" th:value="${goodsOption.goodsCd}" th:attr="selfGoodsYn=${goodsOption.selfGoodsYn}"/>
+												</li>
+												</th:block>
+											</ul>
+										</div>
+									</div>
+								</div>
+								<div class="form_field" th:id="${'form_field2_'+goodsInfo.goodsCd}"> 
+									<div class="select_custom item_opt2 item_opt2_1" th:classappend="${goodsInfo.goodsCd}"  disabled th:attr="qty=${goodsInfo.minOrdQty}">
+										<div class="combo">
+											<div class="select">선택</div>
+											<ul class="list" th:id="|goodsOpt2${goodsInfo.goodsCd}|" >
+												<!-- 옵션2 -->
+											</ul>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+						</th:block>
+						<!-- //일반상품일때 -->
+						<!-- 셋트상품일때 -->
+						<th:block th:if="${goodsInfo.goodsType =='G056_S' }">	<!-- 세트상품 -->
+						<div class="setOption" th:if="${goodsComposeList != null and !goodsComposeList.empty}" >
+							<div class="form_wrap"  th:each="goodsCompose, status : ${goodsComposeList}">
+								<div class="form_field" th:id="${'form_field1_'+goodsCompose.compsGoodsCd}">
+									<p class="title" th:text="${goodsCompose.compsGoodsFullNm}">슬림핏</p>
+									<div class="select_custom item_opt1" th:classappend="${'item_opt1_'+status.count +' '+goodsCompose.compsGoodsCd}" th:attr="id=${goodsCompose.compsGoodsCd}, qty=${goodsCompose.qty}"
+																		th:if="${goodsCompose.goodsOption1List != null and !goodsCompose.goodsOption1List.empty}" >
+										<div class="combo">
+											<div class="select">선택</div>
+											<ul class="list" style="display: none;">
+												<th:block th:each="goodsOption, optionStatus : ${goodsCompose.goodsOption1List}" >
+												<!-- <li class="selected" th:id="|selfGoodsOpt1${goodsCompose.compsGoodsCd}|" th:if=${optionStatus.first}>선택</li> --> 
+												<li th:onclick="fnOption2([[${status.count}]], [[${goodsOption.goodsCd}]],[[${goodsOption.optCd1}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]])"
+													th:attr="aria-disabled=${(goodsCompose.goodsStat != 'G008_90' or goodsOption.stockQty <= 0)? 'true':''}, data-soldout=${(goodsOption.stockQty <= 0)? 'true':''}"
+													><th:block th:text="${goodsOption.optCd1Nm}"></th:block>
+													<input type="hidden" name="opt" th:value="${goodsOption.goodsCd}" th:attr="optCd1=${goodsOption.optCd1},optCd1Nm=${goodsOption.optCd1Nm},optCd2=${goodsOption.optCd2},optCd=${goodsOption.optCd}"/>
+												</li>
+												</th:block>
+											</ul>
+										</div>
+									</div>
+								</div>
+								<div class="form_field" th:id="${'form_field2_'+goodsCompose.compsGoodsCd}">
+									<div class="select_custom item_opt2" th:classappend="${'item_opt2_'+status.count +' '+goodsCompose.compsGoodsCd}" disabled>
+										<div class="combo">
+											<div class="select">선택</div>
+											<ul class="list" th:id="|goodsOpt2${goodsCompose.compsGoodsCd}|">
+											</ul>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+						</th:block>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- //옵션선택팝업 -->
+		
+		
 	</section>
 	<!-- ★ 컨텐츠 종료 -->	
 
@@ -2570,16 +2573,16 @@
 		
 		//팝업 - 구매하기 > 옵션선택 > 옵션셀렉트팝업
 		$(document).on('click','.Purchase_pop .option_result .option_open',function(e){
-			$(".Purchase_pop .pop_option_select").show(); 
-			//$(".Purchase_pop .pop_option_select").find('.select_custom.item_opt1.item_opt1_1').addClass('on');
-			//$(".Purchase_pop .pop_option_select").find('.select_custom.item_opt1.item_opt1_1 .list').css('display','block');
+			$(".pop_option_select").show();
+			
 			return false;
 		});
 		
-		$(document).on('click','.Purchase_pop .close',function(e){
-			$(".Purchase_pop .pop_option_select").hide();
-			return false;
-		});
+		$(document).on('click','.pop_option_select .close',function(e){
+            $(".pop_option_select").hide();
+			$('.option_result .option_open').removeClass('on');
+            return false;
+        });
 
 		 //관심상품 등록
 		$(document).on('click','.pd .itemLike',function(e){