<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GoodsIncludeFormWeb.html
 * @desc	: 상품상세 Include Page - 공용
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE		 AUTHOR	  DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.03.02   eskim	   최초 작성
 *******************************************************************************
 -->
 <!-- 상품상세 네비게이션  -->
<th:block  th:fragment="goodsNaviForm">
	<div class="breadcrumb"> 
		<ul>
			<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
			<th:block th:if="${goodsNavigation != null}">
				<th:block th:if="${goodsNavigation.formalGb == '20'}">
			<li><a href="javascript:void(0);" onclick="cfnGoToOutletMain('300')" >아울렛</a></li>
			<li th:if="${goodsNavigation.cate1No}">
				<a href="javascript:void(0);" th:onclick="cfnGoToGoodsList('0',[[${goodsNavigation.cateGb}]],[[${goodsNavigation.cate1No}]])" th:text="${goodsNavigation.cate1Nm}">cate</a>
			</li>
				</th:block>
				<th:block th:unless="${goodsNavigation.formalGb == '20'}">
			<li th:if="${goodsNavigation.cate1No}">
				<a href="javascript:void(0);" th:onclick="cfnGoToCategoryMain([[${goodsNavigation.cateGb}]],[[${goodsNavigation.cate1No}]])"
					th:text="${goodsNavigation.cate1Nm}">cate</a>
			</li>
				</th:block>
			<li th:if="${goodsNavigation.cate2No}">
				<th:block th:if="${goodsNavigation.cate3No}">
				<a href="javascript:void(0);" th:onclick="cfnGoToGoodsList('0',[[${goodsNavigation.cateGb}]],[[${goodsNavigation.cate1No}]], [[${goodsNavigation.cate2No}]])"
				th:text="${goodsNavigation.cate2Nm}">cate</a>
				</th:block>
				<th:block th:unless="${goodsNavigation.cate3No}"><strong th:text="${goodsNavigation.cate2Nm}">cate</strong></th:block>
			</li>
			<li th:if="${goodsNavigation.cate3No }">
				<th:block th:if="${goodsNavigation.cate4No}">
				<a href="javascript:void(0);" th:onclick="cfnGoToGoodsList('0',[[${goodsNavigation.cateGb}]],[[${goodsNavigation.cate1No}]], [[${goodsNavigation.cate2No}]], [[${goodsNavigation.cate3No}]])"
				th:text="${goodsNavigation.cate3Nm}">cate</a>
				</th:block>
				<th:block th:unless="${goodsNavigation.cate4No}"><strong th:text="${goodsNavigation.cate3Nm}">cate</strong></th:block>
			</li>
			<li th:if="${goodsNavigation.cate4No }">
				<th:block th:if="${goodsNavigation.cate5No}">
				<a href="javascript:void(0);" th:onclick="cfnGoToGoodsList('0',[[${goodsNavigation.cateGb}]],[[${goodsNavigation.cate1No}]], [[${goodsNavigation.cate2No}]], [[${goodsNavigation.cate3No}]], [[${goodsNavigation.cate4No}]])"
				th:text="${goodsNavigation.cate4Nm}">cate</a>
				</th:block>
				<th:block th:unless="${goodsNavigation.cate5No}"><strong th:text="${goodsNavigation.cate4Nm}">cate</strong></th:block>
			</li>
			<li th:if="${goodsNavigation.cate5No}">
				<th:block th:text="${goodsNavigation.cate5Nm}">cate</th:block>
			</li>
			</th:block>
		</ul> 
	</div>
</th:block>

<!-- 상품상세 SNS  -->
<th:block  th:fragment="goodsSnsForm" >
<!-- toggle contents -->
<div class="shareWrap" th:with="stylelUrl=${@environment.getProperty('domain.front')}, imgGoodsUrl=${@environment.getProperty('upload.goods.view')}">
	<div id="layerShare" class="setShare open">
		<span>
			<button type="button" class="kk" th:attr="onclick=|cfnSendToKakao('${stylelUrl+'/goods/detail/form?goodsCd='+goodsInfo.goodsCd}', '${goodsInfo.goodsFullNm}', '${imgGoodsUrl+ '/'+goodsInfo.sysImgNm}');|"><span>카카오톡</span></button>
			<button type="button" class="fb" th:attr="onclick=|sendSns('facebook', '${stylelUrl+'/goods/detail/form?goodsCd='+goodsInfo.goodsCd}', '${goodsInfo.goodsFullNm}', '', '');|"><span>페이스북</span></button>
			<button type="button" class="tw" th:attr="onclick=|sendSns('twitter', '${stylelUrl+'/goods/detail/form?goodsCd='+goodsInfo.goodsCd}', '${goodsInfo.goodsFullNm+ '#style24몰'}', '', '');|"><span>트위터</span></button>
			<button type="button" class="url btn_copy" onclick="copyToClipboard();"><span>URL</span></button>
		</span>
	</div>
</div>

</th:block>

<!-- 딜 상품 상품소개영역 -->
<th:block  th:fragment="goodsDealComposeForm">
<!-- ***** 상품소개영역 ***** -->
<div class="content pd_desc_wrap" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}">
	<div class="cont_body">
		<div class="item_descrp">
			<div class="area_list">
				<!-- 상품소개 탭 -->
				<div class="tab_detail_nav">
					<ul>
						<li class="active"><a href="javascript:void(0)">상세정보</a></li>
						<li><a href="javascript:void(0)">리뷰<em>(<th:block  th:text="${(goodsInfo.reviewRegCnt <= 9999) ? #numbers.formatInteger(goodsInfo.reviewRegCnt, 0,'COMMA')  : '9,999+'}"></th:block>)</em></a></li>
						<li><a href="javascript:void(0)">문의<em>(<th:block  th:text="${(goodsInfo.goodsQnaCnt <= 9999) ? #numbers.formatInteger(goodsInfo.goodsQnaCnt, 0,'COMMA')  : '9,999+'}"></th:block>)</em></a></li>
						<li><a href="javascript:void(0)">배송/교환/반품</em></a></li>
					</ul>
				</div>
				<!-- //상품소개 탭 -->
				<!-- 상품상세정보 -->
				<div class="tab_detail_cont pd_dealitem" style="display:block;" >
					<div class="itemsGrp" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
						<!--  반복 -->
						<div class="item_prod" th:each="goodsInfo, status : ${goodsDealComposeList}">
							<div class="item_state">
								<a href="javascript:void(0);" class="itemLink" th:onclick="fnOpenGoodsDealDetail([[${goodsInfo.goodsCd}]],[[${goodsInfo.compsGoodsCd}]])">
									<div class="shape ranker dealdetail">
										<span>상품<br><th:block th:text="${#numbers.formatInteger(status.count,2)}">01</th:block></span>
									</div>
									<div class="itemPic">
										<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm+'?RS=285'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
									</div>
									<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
									<div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성 </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')}">149,000</span>
										<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
									</p>
								</a>
							</div>
						</div>
					</div>
				</div>
				<!-- //상품상세정보 -->
				<!-- 상품리뷰 리스트 -->
				<div class="tab_detail_cont pd_review">
					<div class="cont_head">
						<h3 class="sr-only">상품리뷰 목록</h3>
						<!-- 아이템선택 -->
						<div class="form_field">
							<div class="select_custom deal_opt_item forReview">
								<div class="combo">
									<div class="select">
										<div class="item_prod">
											<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=80'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
													</div>
													<div class="itemName">상품선택</div>
												</a>
											</div>
										</div>
									</div>
									<ul class="list" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
										<li th:each="goodsInfo, status : ${goodsDealComposeList}" 
											th:onclick="fnSelGoodsDealReview([[${goodsInfo.compsGoodsCd}]])" >
											<div class="item_prod">
												<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=80'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
														</div>
														<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
														<div class="itemName" ><span class="tit_option" th:text="${'[상품'+status.count+']'}">[상품1]</span><th:block th:text="${goodsInfo.goodsFullNm}"></th:block> </div>
														 <div class="itemPostCount">
															 (리뷰 <span><th:block  th:text="${(goodsInfo.reviewRegCnt <= 9999) ? #numbers.formatInteger(goodsInfo.reviewRegCnt, 0,'COMMA')  : '9,999+'}"></th:block></span>)
														 </div>
													</a>
													<input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}"  th:attr="currPrice=${goodsInfo.currPrice}, selfGoodsYn=${goodsInfo.selfGoodsYn}"/>
												</div>
											</div>
										</li> 
									</ul>
								</div>
							</div>
						</div>
						<!-- //아이템선택 -->
					</div>
					<div class="cont_body" id="goodsDealReview">
					</div>
				</div>
				<!-- //상품리뷰 리스트 -->
				<!-- 상품문의 리스트 -->
				<div class="tab_detail_cont pd_qnalist">
					<div class="cont_head">
						<h3 class="sr-only">상품문의 목록</h3>
						<!-- 아이템선택 -->
						<div class="form_field">
							<div class="select_custom deal_opt_item forQna">
								<div class="combo">
									<div class="select">
										<div class="item_prod">
											<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=80'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
													</div>
													<div class="itemName">상품선택</div>
												</a>
											</div>
										</div>
									</div>
									<ul class="list" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
										<li th:each="goodsInfo, status : ${goodsDealComposeList}" 
											th:onclick="fnSelGoodsDealQna([[${goodsInfo.compsGoodsCd}]])" >
											<div class="item_prod">
												<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=80'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
														</div>
														<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
														<div class="itemName" ><span class="tit_option" th:text="${'[상품'+status.count+']'}">[상품1]</span><th:block th:text="${goodsInfo.goodsFullNm}"></th:block> </div>
														<div class="itemPostCount">
															(문의 <span><th:block  th:text="${(goodsInfo.goodsQnaCnt <= 9999) ? #numbers.formatInteger(goodsInfo.goodsQnaCnt, 0,'COMMA')  : '9,999+'}"></th:block></span>)
														</div>
													</a>
													<input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}" />
												</div>
											</div>
										</li> 
									</ul>
								</div>
							</div>
						</div>
						<!-- //아이템선택 -->
					</div>
					<div class="cont_body" id="goodsDealQna">
					</div>
				</div>
				<!-- //상품문의 리스트 -->
				<!-- 배송/교환/반품 정보 -->
				<div class="tab_detail_cont pd_delivery">
					<div class="cont_head">
						<h3 class="sr-only">배송/교환/반품 정보</h3>
						<!-- 아이템선택 -->
						<div class="form_field">
							<div class="select_custom deal_opt_item forExinfo">
								<div class="combo">
									<div class="select">
										<div class="item_prod">
											<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=80'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
													</div>
													<div class="itemName">상품선택</div>
												</a>
											</div>
										</div>
									</div>
									<ul class="list" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
										<li th:each="goodsInfo, status : ${goodsDealComposeList}" 
											th:onclick="fnSelGoodsDealDelivery([[${goodsInfo.compsGoodsCd}]])" >
											<div class="item_prod">
												<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=80'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
														</div>
														<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
														<div class="itemName" ><span class="tit_option" th:text="${'[상품'+status.count+']'}">[상품1]</span><th:block th:text="${goodsInfo.goodsFullNm}"></th:block> </div>
													</a>
													<input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}" />
												</div>
											</div>
										</li> 
									</ul>
								</div>
							</div>
						</div>
						<!-- //아이템선택 -->
					</div>
					<div class="cont_body" id="goodsDealDelivery">
					</div>
				</div>
				<!-- //배송/교환/반품 정보 -->
			</div>
			<div class="area_option">
				<div class="opt_wrap">
					<div class="option_box">
						<div class="opt_select">
								<div class="form_field">
									<div class="select_custom deal_opt_item">
										<div class="combo">
											<div class="select">
												<div class="item_prod">
													<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=80'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
															</div>
															<div class="itemName">상품선택</div>
														</a>
													</div>
												</div>
											</div>
											<ul class="list" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
												<th:block th:each="goodsInfo, status : ${goodsDealComposeList}" th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}">
												<li  th:onclick="fnOption1('Down', [[${goodsInfo.compsGoodsCd}]], [[${goodsInfo.currPrice}]] , [[${goodsInfo.selfGoodsYn}]]);"
														th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}">
													<div class="item_prod">
														<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=80'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
																</div>
																<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">NBA 키즈</p>
																<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')}">149,000</span>
																	<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
																</p>
															</a>
															<input type="hidden" name="selectGoods" th:attr="goodsNm=${'[상품'+status.count+']' +goodsInfo.goodsFullNm}, currPrice=${goodsInfo.currPrice}, goodsCd=${goodsInfo.compsGoodsCd}" />
														</div>
													</div>
												</li>
												</th:block> 
											</ul>
										</div>
									</div>
								</div>
								<div class="form_field" id="form_field1_Down">
									<div class="select_custom deal_opt1" disabled>
										<div class="combo">
											<div class="select">옵션1선택</div>
											<ul class="list" id="goodsDealOptDown1">
												<!--  옵션 1 -->
											</ul>
										</div>
									</div>
								</div>
								<div class="form_field" id="form_field2_Down">
									<div class="select_custom deal_opt2" disabled>
										<div class="combo">
											<div class="select">옵션2선택</div>
											<ul class="list" id="goodsDealOptDown2">
												<!--  옵션 2 -->
											</ul>
										</div>
									</div>
								</div>
						</div>
						<div class="opt_result">
						</div>
					</div>
					<div class="price_box" style="display:none;">
						<p class="number">
							총&nbsp;<span>0</span>개
						</p>
						<p class="price">
							<span>
								0<em>원</em>
							</span>
						</p>
					</div>
					<div class="btn_box">
						<div class="btn_group_block ui_row">
						<th:block  th:if="${goodsInfo.stockQty > 0 and goodsInfo.goodsStat == 'G008_90'}">
							<div class="ui_col_6">
								<button type="button" class="btn btn_dark btn_block" id="btnGoodsWish" onclick="fnAddCart('C','Down');"><span>쇼핑백</span></button>
							</div>
							<div class="ui_col_6">
								<button type="button" class="btn btn_primary btn_block" id="btnGoodsCart" onclick="fnAddCart('O','Down');"><span>바로구매</span></button>
							</div>
						</th:block>
						<th:block  th:unless="${goodsInfo.stockQty > 0 and goodsInfo.goodsStat == 'G008_90'}">
							<div class="ui_col_12">
								<button type="button" class="btn btn_dark btn_block" disabled=""><span>SOLD OUT</span></button>
							</div>
						</th:block>
						</div>
					</div>
					<th:block th:if="${sessionInfo != null and (sessionInfo.custId == 'xodud1202' or sessionInfo.custId == 'jsh77b' or sessionInfo.custId == 'card007')}">
						<div style="margin-top:10px;">
							<th:block th:with="buttonKey=${@environment.getProperty('naverPay.button.key')}">
								<script type="text/javascript" >
									//<![CDATA[
									/*버튼설정*/
									naver.NaverPayButton.apply({
										BUTTON_KEY              : "[[${buttonKey}]]",       // 네이버페이에서 제공받은 버튼 인증 키 입력
										TYPE                    : "C",                      // 버튼 모음 종류 설정
										COLOR                   : 1,                        // 버튼 모음의 색 설정
										COUNT                   : 2,                        // 버튼 개수 설정. 구매하기 버튼만 있으면(장바구니 페이지) 1, 찜하기 버튼도 있으면(상품 상세 페이지) 2를 입력.
										ENABLE                  : "Y",                      // 품절 등의 이유로 버튼 모음을 비활성화할 때에는 "N" 입력
										BUY_BUTTON_HANDLER      : buy_nc,                   // 구매하기 버튼 이벤트 Handler 함수 등록, 품절인 경우 not_buy_nc 함수 사용
										WISHLIST_BUTTON_HANDLER : wishlist_nc,              // 찜하기 버튼 이벤트 Handler 함수 등록
										"":""
									});

									/*네이버구매하기*/
									function buy_nc() {
										// 자사 일반 상품 정보
										let compsList = [];

										$("#cartForm .result_item input[name=cea]").each(function() {
											let dealGoodsCd = "[[${goodsInfo.goodsCd}]]";
											let goodsType = "[[${goodsInfo.goodsType}]]";
											let goodsCd = $(this).parent().find("input[name=coption]").attr("goodscd");
											let optCd = $(this).attr("optcd");
											let goodsQty = $(this).val();

											if (!goodsCd) {
												mcxDialog.alert("상품정보가 존재하지 않습니다. 새로고침 후 다시 시도해주세요.");
												return false;
											}

											if (!goodsQty || goodsQty < 1) {
												mcxDialog.alert("구매 수량을 확인해주세요.");      /*수량*/
												return false;
											}

											if (!optCd) {
												mcxDialog.alert("상품 옵션을 확인 할 수 없습니다. 새로고침 후 다시 시도해주세요.");   /*옵션*/
												return false;
											}

											var obj = new Object();
											obj.cartGb = "N";
											obj.goodsType = goodsType;
											obj.goodsCd = goodsCd;
											obj.optCd = optCd;
											obj.goodsQty = goodsQty;
											obj.dealGoodsCd = $("#cartForm  input[name=goodsCd]").val();
											obj.afLinkCd =$("#cartForm  input[name=afLinkCd]").val();
											obj.ithrCd =$("#cartForm  input[name=ithrCd]").val();
											obj.contentsLoc =$("#cartForm  input[name=contentsLoc]").val();
											obj.planDtlSq = $("#cartForm  input[name=planDtlSq]").val();
											compsList.push(obj);
										});

										// 장바구니담기
										cfnAddCart(compsList);

										return false;
									}

									<!-- 구매불가 -->
									function not_buy_nc() {
										mcxDialog.alert("죄송합니다. 네이버페이로 구매가 불가한 상품입니다.");
										return false;
									}
									
									<!-- 찜하기 -->
									function wishlist_nc() {
										let goodsCd			= "[[${goodsInfo.goodsCd}]]";
										let goodsNm			= "[[${goodsInfo.goodsNm}]]";
										let colorCd			= "[[${goodsInfo.colorCd}]]";
										let currPrice		= "[[${goodsInfo.currPrice}]]";
										let sysImgNm		= "[[${goodsInfo.sysImgNm}]]";
										let selfGoodsYn		= "[[${goodsInfo.selfGoodsYn}]]";
										
										let data = {};
										data.goodsCd		= goodsCd;
										data.goodsNm		= goodsNm;
										data.colorCd		= colorCd;
										data.currPrice		= currPrice;
										data.sysImgNm		= sysImgNm;
										data.selfGoodsYn	= selfGoodsYn;
										
										let jsonData = JSON.stringify(data);
										
										$.ajax( {
											type		: "POST",
											url 		: "/pg/create/npay/zzim",
											dataType 	: 'json',
											data		: jsonData,
											beforeSend : function(xhr, settings) {
												xhr.setRequestHeader("AJAX"			, "true");
												xhr.setRequestHeader('Accept'		, 'application/json');
												xhr.setRequestHeader('Content-Type'	, 'application/json');
											},
											error: function(xhr, status, error) {
												mcxDialog.alert(status + '; ' + error);
											},
											success : function(result) {
												if (result.state == "success") {
													$('#nPayWishForm input[name=SHOP_ID]').val(result.shopId);
													$('#nPayWishForm input[name=ITEM_ID]').val(result.itemId);

													let option = 'width=530, height=380';
													window.open('about:blank', 'popupView', option);
													document.nPayWishForm.target = 'popupView';
													document.nPayWishForm.action = result.action;
													document.nPayWishForm.submit();
												} else {
													mcxDialog.alert(result.message);
												}
											}
										});
									}
									//]]>
								</script>
							</th:block>
						</div>
					</th:block>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- **************** 개별상품 상세정보 팝업 **************** -->
	<div class="pd_pop full_pop pd_descrp_pop" id="layer_goods_deal_detail">
		<div class="full_popup_wrap" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}">
			<h5 class="sr-only">개별상품 상세정보 안내</h5>
			<div class="btn_close">
				<a href="javascript:void(0)" onclick="fnCloseGoodsDealDetail();">닫기버튼</a>
			</div>
			<div class="full_pop_header">
				<!-- 아이템선택 -->
				<div class="form_field">
					<div class="select_custom deal_opt_item">
						<div class="combo">
							<div class="select">
								<div class="item_prod">
										<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=80'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
												</div>
												<div class="itemName">상품선택</div>
											</a>
										</div>
									</div>
							</div>
							<ul class="list" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
								<li class="selected" th:each="goodsInfo, status : ${goodsDealComposeList}" >
									<div class="item_prod" >
										<div class="item_state">
											<a href="javascript:void(0);" class="itemLink" th:onclick="fnGoodsDealDesc([[${goodsInfo.compsGoodsCd}]], [[${goodsInfo.currPrice}]], [[${goodsInfo.selfGoodsYn}]], [[${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'Y':'N' }]])">
												<div class="itemPic">
													<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm+'?RS=80'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
												</div>
												<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">NBA 키즈</p>
												<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')}">149,000</span>
													<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
												</p>
											</a>
											<input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}" th:attr="goodsNm=${'[상품'+status.count+']' +goodsInfo.goodsFullNm}, currPrice=${goodsInfo.currPrice}, goodsCd=${goodsInfo.compsGoodsCd}, selfGoodsYn=${goodsInfo.selfGoodsYn}"  />
										</div>
									</div>
								</li> 
							</ul>
						</div>
					</div>
				</div>
				<!-- //아이템선택 -->
			</div>
			<div class="full_pop_container" id="goodsDealDetail">
				<!-- 개별상품 상세정보 팝업 내용 -->
			</div>
			<div class="full_pop_fix_r">
				<div class="option_box">
					<div class="opt_select">
						<div class="form_field" id="form_field1_layer">
							<div class="select_custom deal_opt1" disabled>
								<div class="combo">
									<div class="select">옵션1</div>
									<ul class="list"  id="goodsDealOptLayer1">
										<!--  옵션 1 -->
									</ul>
								</div>
							</div>
						</div>
						<div class="form_field"  id="form_field2_layer">
							<div class="select_custom deal_opt2" disabled>
								<div class="combo">
									<div class="select">옵션2선택</div>
									<ul class="list"  id="goodsDealOptLayer2">
										<!--  옵션 2 -->
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="opt_result">
					</div>
				</div>
				<div class="price_box" style="display:none;">
					<p class="number">
						총&nbsp;<span>0</span>개
					</p>
					<p class="price">
						<span>
							0<em>원</em>
						</span>
					</p>
				</div>
				<div class="btn_box" style="margin-bottom:0px;">
					<div class="btn_group_block ui_row">
					<th:block  th:if="${goodsInfo.stockQty > 0}">
						<div class="ui_col_6">
							<button type="button" class="btn btn_dark btn_block" id="btnGoodsWish" onclick="fnAddCart('C','layer');"><span>쇼핑백</span></button>
						</div>
						<div class="ui_col_6">
							<button type="button" class="btn btn_primary btn_block" id="btnGoodsCart" onclick="fnAddCart('O','layer');"><span>바로구매</span></button>
						</div>
					</th:block>
					<th:block  th:unless="${goodsInfo.stockQty > 0}">
						<div class="ui_col_12">
							<button type="button" class="btn btn_dark btn_block" disabled=""><span>SOLD OUT</span></button>
						</div>
					</th:block>
					</div>
				</div>
				<th:block th:if="${sessionInfo != null and (sessionInfo.custId == 'xodud1202' or sessionInfo.custId == 'jsh77b' or sessionInfo.custId == 'card007')}">
					<div style="margin-top:10px;">
						<th:block th:with="buttonKey=${@environment.getProperty('naverPay.button.key')}">
							<script type="text/javascript" >
								//<![CDATA[
								/*버튼설정*/
								naver.NaverPayButton.apply({
									BUTTON_KEY              : "[[${buttonKey}]]",       // 네이버페이에서 제공받은 버튼 인증 키 입력
									TYPE                    : "C",                      // 버튼 모음 종류 설정
									COLOR                   : 1,                        // 버튼 모음의 색 설정
									COUNT                   : 2,                        // 버튼 개수 설정. 구매하기 버튼만 있으면(장바구니 페이지) 1, 찜하기 버튼도 있으면(상품 상세 페이지) 2를 입력.
									ENABLE                  : "Y",                      // 품절 등의 이유로 버튼 모음을 비활성화할 때에는 "N" 입력
									BUY_BUTTON_HANDLER      : buy_nc,                   // 구매하기 버튼 이벤트 Handler 함수 등록, 품절인 경우 not_buy_nc 함수 사용
									WISHLIST_BUTTON_HANDLER : wishlist_nc,              // 찜하기 버튼 이벤트 Handler 함수 등록
									"":""
								});

								/*네이버구매하기*/
								function buy_nc() {
									// 자사 일반 상품 정보
									let compsList = [];

									$("#cartForm .result_item input[name=cea]").each(function() {
										let dealGoodsCd = "[[${goodsInfo.goodsCd}]]";
										let goodsType = "[[${goodsInfo.goodsType}]]";
										let goodsCd = $(this).parent().find("input[name=coption]").attr("goodscd");
										let optCd = $(this).attr("optcd");
										let goodsQty = $(this).val();

										if (!goodsCd) {
											mcxDialog.alert("상품정보가 존재하지 않습니다. 새로고침 후 다시 시도해주세요.");
											return false;
										}

										if (!goodsQty || goodsQty < 1) {
											mcxDialog.alert("구매 수량을 확인해주세요.");      /*수량*/
											return false;
										}

										if (!optCd) {
											mcxDialog.alert("상품 옵션을 확인 할 수 없습니다. 새로고침 후 다시 시도해주세요.");   /*옵션*/
											return false;
										}

										var obj = new Object();
										obj.cartGb = "N";
										obj.goodsType = goodsType;
										obj.goodsCd = goodsCd;
										obj.optCd = optCd;
										obj.goodsQty = goodsQty;
										obj.dealGoodsCd = $("#cartForm  input[name=goodsCd]").val();
										obj.afLinkCd =$("#cartForm  input[name=afLinkCd]").val();
										obj.ithrCd =$("#cartForm  input[name=ithrCd]").val();
										obj.contentsLoc =$("#cartForm  input[name=contentsLoc]").val();
										obj.planDtlSq = $("#cartForm  input[name=planDtlSq]").val();
										compsList.push(obj);
									});

									// 장바구니담기
									cfnAddCart(compsList);

									return false;
								}

								<!-- 구매불가 -->
								function not_buy_nc() {
									mcxDialog.alert("죄송합니다. 네이버페이로 구매가 불가한 상품입니다.");
									return false;
								}
								//]]>
								
								<!-- 찜하기 -->
								function wishlist_nc() {
									let goodsCd			= "[[${goodsInfo.goodsCd}]]";
									let goodsNm			= "[[${goodsInfo.goodsNm}]]";
									let colorCd			= "[[${goodsInfo.colorCd}]]";
									let currPrice		= "[[${goodsInfo.currPrice}]]";
									let sysImgNm		= "[[${goodsInfo.sysImgNm}]]";
									let selfGoodsYn		= "[[${goodsInfo.selfGoodsYn}]]";
									
									let data = {};
									data.goodsCd		= goodsCd;
									data.goodsNm		= goodsNm;
									data.colorCd		= colorCd;
									data.currPrice		= currPrice;
									data.sysImgNm		= sysImgNm;
									data.selfGoodsYn	= selfGoodsYn;
									
									let jsonData = JSON.stringify(data);
									
									$.ajax( {
										type		: "POST",
										url 		: "/pg/create/npay/zzim",
										dataType 	: 'json',
										data		: jsonData,
										beforeSend : function(xhr, settings) {
											xhr.setRequestHeader("AJAX"			, "true");
											xhr.setRequestHeader('Accept'		, 'application/json');
											xhr.setRequestHeader('Content-Type'	, 'application/json');
										},
										error: function(xhr, status, error) {
											mcxDialog.alert(status + '; ' + error);
										},
										success : function(result) {
											if (result.state == "success") {
												$('#nPayWishForm input[name=SHOP_ID]').val(result.shopId);
												$('#nPayWishForm input[name=ITEM_ID]').val(result.itemId);

												let option = 'width=530, height=380';
												window.open('about:blank', 'popupView', option);
												document.nPayWishForm.target = 'popupView';
												document.nPayWishForm.action = result.action;
												document.nPayWishForm.submit();
											} else {
												mcxDialog.alert(result.message);
											}
										}
									});
								}
							</script>
						</th:block>
					</div>
				</th:block>
			</div>
		</div>
				
	</div>
	<!-- **************** 개별상품 상세정보 팝업 **************** -->
<script th:inline="javascript">
/*<![CDATA[*/
	
	// 구성 상품 상세 상품평
	var fnGoodsDetailReview = function(params) {
		//gagajf.ajaxSubmit("/goods/detail/review/frame", "html", "goodsDealReview", params);
		$.ajax( {
			type		: "POST",
			url 		: '/goods/detail/review/frame',
			data		: JSON.stringify(params),
			dataType 	: 'html',
			beforeSend : function(xhr, settings) {
				xhr.setRequestHeader("AJAX"			, "true");
				xhr.setRequestHeader('Accept'		, 'application/json');
				xhr.setRequestHeader('Content-Type'	, 'application/json');
			},
			success 	: function(result) {
				if (result != null) {
					$("#goodsDealReview").css("display", "block");
					$("#goodsDealReview").html(result);
					fnGetList();
				}
			}
		});
		
	}
	
	// 상품평 상품선택시
	var fnSelGoodsDealReview = function(goodsCd){
		var params = new Object();
		params.goodsCd = goodsCd;
		fnGoodsDetailReview(params);  // ajax html
	}
	
	// 구성 상품 상세 문의
	var fnGoodsDetailQna = function(params) {
		//gagajf.ajaxSubmit("/goods/detail/qna/frame", "html", "goodsDealQna", params);
		
		$.ajax( {
			type		: "POST",
			url 		: '/goods/detail/qna/frame',
			data		: JSON.stringify(params),
			dataType 	: 'html',
			beforeSend : function(xhr, settings) {
				xhr.setRequestHeader("AJAX"			, "true");
				xhr.setRequestHeader('Accept'		, 'application/json');
				xhr.setRequestHeader('Content-Type'	, 'application/json');
			},
			success 	: function(result) {
				if (result != null) {
					$("#goodsDealQna").css("display", "block");
					$("#goodsDealQna").html(result);
					fnGoodsQnaList();
				}
			}
		});
	}
	
	// 문의 상품선택시
	var fnSelGoodsDealQna = function(goodsCd){
		var params = new Object();
		params.goodsCd = goodsCd;
		fnGoodsDetailQna(params);  // ajax html
	}
	
	// 구성 상품 상세 배송정보
	var fnGoodsDetailDelivery = function(params) {
		//gagajf.ajaxSubmit("/goods/detail/delivery/frame", "html", "goodsDealDelivery", params);
		$.ajax( {
			type		: "POST",
			url 		: '/goods/detail/delivery/frame',
			data		: JSON.stringify(params),
			dataType 	: 'html',
			beforeSend : function(xhr, settings) {
				xhr.setRequestHeader("AJAX"			, "true");
				xhr.setRequestHeader('Accept'		, 'application/json');
				xhr.setRequestHeader('Content-Type'	, 'application/json');
			},
			success 	: function(result) {
				if (result != null) {
					$("#goodsDealDelivery").css("display", "block");
					$("#goodsDealDelivery").html(result);
				}
			}
		});	
	}
	
	// 배송정보 상품선택시
	var fnSelGoodsDealDelivery = function(goodsCd){
		var params = new Object();
		params.goodsCd = goodsCd;
		fnGoodsDetailDelivery(params);  // ajax html
	}
	
	// 상품선택시 상품상세내용 변경
	var fnOpenGoodsDealDetail = function(goodsCd, compsGoodsCd){
		
		// 콤보박스 선택 처리
		let $selObj = $('#layer_goods_deal_detail').find('.select_custom.deal_opt_item');
		
		// 탭별 선택시 기본 상품 설정
		let selIdx = 0;
		let selfGoodsYn = '';
		let currPrice = 0;
		let soldoutYn = "N";
		$selObj.find('.combo .list li').each(function() { 
			if ($(this).find('input[name=selectGoods]').val() == compsGoodsCd){
				selfGoodsYn = $(this).find('input[name=selectGoods]').attr('selfGoodsYn');
				currPrice = $(this).find('input[name=selectGoods]').attr('currPrice');
				if ($(this).find('.item_prod').hasClass('soldout')) soldoutYn = "Y";
				return false;
			}
			selIdx ++;
		});
		
		$selObj.find('.combo .list li').eq(selIdx).trigger("click");
		
		// 상세노출
		fnGoodsDealDesc(compsGoodsCd, currPrice, selfGoodsYn, soldoutYn);
/* 		
		if (!soldout){
			// 옵션1 처리
			fnOption1("layer", compsGoodsCd, currPrice, selfGoodsYn);	
		}
 */		
		
		let $obj = $('.pd_detail .opt_result'); 
		let $taget = $('.full_pop_fix_r .opt_result');
		$taget.html($obj.html());
		if (!gagajf.isNull($obj.html())){
			fnSetTotalPrice();	
		}
		
		$('body').addClass('lock');
		$("#layer_goods_deal_detail").show(); 
		
	}
	
	// 상세 레이어 창닫기
	var fnCloseGoodsDealDetail = function(){
		// 선택값 본창에 넘기기
		let $obj = $('.full_pop_fix_r .opt_result');
		let $taget = $('.pd_detail .opt_result');
		$taget.html($obj.html());
		
		fnSetTotalPrice();
		
		$('body').removeClass('lock');
		$('#goodsDealDetail').html('');
		$("#layer_goods_deal_detail").hide();
	}
	
	// 구성 상품 상세 
	var fnGoodsDealDetail2 = function(params) {
		gagajf.ajaxSubmit("/goods/deal/detail/info/frame", "html", "goodsDealDetail", params);
	}
	
	// 레이어에서 상품선택시
	var fnGoodsDealDesc = function(goodsCd, currPrice, selfGoodsYn , soldout){
		var params = new Object();
		params.goodsCd = goodsCd;
		params.adminYn = "Y";
		fnGoodsDealDetail2(params);  // ajax html
		//if (soldout == "N"){
			// 옵션1 처리
			fnOption1("layer", goodsCd, currPrice, selfGoodsYn);
		//}
		
	}
	
	$(document).ready( function() {

		/* var params = new Object();
		params.goodsCd = [[${params.compsGoodsCd}]];
		params.adminYn = [[${params.adminYn}]];
		fnGoodsDealDetail(params);  // ajax html
		
		let $obj = $('.pd_detail .opt_result'); 
		let $taget = $('.full_pop_fix_r .opt_result');
		$taget.html($obj.html());
		
		fnSetTotalPrice(); */
		
	});
	
	
/*]]>*/
</script>
</th:block>
</html>