xodud1202 5 gadi atpakaļ
vecāks
revīzija
e76c85618c
38 mainītis faili ar 4170 papildinājumiem un 0 dzēšanām
  1. 574 0
      src/main/webapp/WEB-INF/views/mob/goods/GoodsIncludeFormWeb.html
  2. 80 0
      src/main/webapp/WEB-INF/views/mob/goods/GoodsOtherFormMob.html
  3. 74 0
      src/main/webapp/WEB-INF/views/mob/order/OrderCustemerInfoMob.html
  4. 214 0
      src/main/webapp/WEB-INF/views/mob/order/OrderDcAmtInfoMob.html
  5. 163 0
      src/main/webapp/WEB-INF/views/mob/order/OrderDeliveryAddrInfoMob.html
  6. 98 0
      src/main/webapp/WEB-INF/views/mob/order/OrderEntryInfoMob.html
  7. 183 0
      src/main/webapp/WEB-INF/views/mob/order/OrderFreegiftInfoMob.html
  8. 176 0
      src/main/webapp/WEB-INF/views/mob/order/OrderListInfoMob.html
  9. 71 0
      src/main/webapp/WEB-INF/views/mob/order/OrderMadeInfoMob.html
  10. 108 0
      src/main/webapp/WEB-INF/views/mob/order/OrderPaymentInfoMob.html
  11. 280 0
      src/main/webapp/WEB-INF/views/mob/popup/DelvAddrAddPopMob.html
  12. 146 0
      src/main/webapp/WEB-INF/views/mob/popup/DelvAddrChangePopMob.html
  13. 295 0
      src/main/webapp/WEB-INF/views/mob/popup/DelvAddrModifyPopMob.html
  14. 475 0
      src/main/webapp/WEB-INF/views/web/display/LookbookDetailFormWeb.html
  15. 285 0
      src/main/webapp/WEB-INF/views/web/mypage/ChangeOptionPopupFormWeb_20210406.html
  16. 373 0
      src/main/webapp/WEB-INF/views/web/planning/PlanningCustGradeBenefitFormWeb.html
  17. 314 0
      src/main/webapp/WEB-INF/views/web/planning/PlanningEventAttendFormWeb.html
  18. BIN
      src/main/webapp/images/mo/coachmask01.png
  19. BIN
      src/main/webapp/images/mo/coachmask02.png
  20. BIN
      src/main/webapp/images/mo/coachmask03.png
  21. BIN
      src/main/webapp/images/mo/ico_app_arr.png
  22. BIN
      src/main/webapp/images/mo/ico_app_arr2.png
  23. BIN
      src/main/webapp/images/mo/ico_app_setting.png
  24. BIN
      src/main/webapp/images/mo/ico_full.png
  25. BIN
      src/main/webapp/images/mo/ico_full_on.png
  26. BIN
      src/main/webapp/images/mo/ico_go_save.png
  27. BIN
      src/main/webapp/images/mo/ico_paging.png
  28. BIN
      src/main/webapp/images/mo/ico_pop_cls_org.png
  29. BIN
      src/main/webapp/images/mo/logo_STYLE24_full.png
  30. BIN
      src/main/webapp/images/mo/movloading.gif
  31. BIN
      src/main/webapp/images/mo/page_accessApp.jpg
  32. BIN
      src/main/webapp/images/mo/page_consentAlarm.jpg
  33. BIN
      src/main/webapp/images/mo/pay_kakao.png
  34. BIN
      src/main/webapp/images/mo/pay_naver.png
  35. BIN
      src/main/webapp/images/mo/pay_payco.png
  36. 233 0
      src/main/webapp/ux/plugins/gaga/gaga.infinite.scrollSession.js
  37. 27 0
      src/main/webapp/ux/plugins/jquery/jquery.history.min.js
  38. 1 0
      src/main/webapp/ux/plugins/lazyload.min.js

+ 574 - 0
src/main/webapp/WEB-INF/views/mob/goods/GoodsIncludeFormWeb.html

@@ -0,0 +1,574 @@
+<!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	   최초 작성
+ *******************************************************************************
+ -->
+<!-- 상품상세 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"><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="${(goodsReviewCnt <= 9999) ? #numbers.formatInteger(goodsReviewCnt, 0,'COMMA')  : '9,999+'}"></th:block>)</em></a></li>
+						<li><a href="javascript:void(0)">문의<em>(<th:block  th:text="${(goodsQnaCnt <= 9999) ? #numbers.formatInteger(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">
+										<span>상품<em class="number" th:text="${#numbers.formatInteger(status.count,2)}">01</em></span>
+									</div>
+									<div class="itemPic">
+										<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" 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}" 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:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}"
+											th:onclick="fnSelGoodsDealReview([[${goodsInfo.compsGoodsCd}]])" >
+											<div class="item_prod">
+												<div class="item_state">
+													<a href="#none" class="itemLink">
+														<div class="itemPic">
+															<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" 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>
+													<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}" 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:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}"
+											th:onclick="fnSelGoodsDealQna([[${goodsInfo.compsGoodsCd}]])" >
+											<div class="item_prod">
+												<div class="item_state">
+													<a href="#none" class="itemLink">
+														<div class="itemPic">
+															<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" 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>
+													<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}" 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:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}"
+											th:onclick="fnSelGoodsDealDelivery([[${goodsInfo.compsGoodsCd}]])" >
+											<div class="item_prod">
+												<div class="item_state">
+													<a href="#none" class="itemLink">
+														<div class="itemPic">
+															<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" 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>
+													<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}" 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')? 'true':''}, data-soldout=${(goodsInfo.goodsStat != 'G008_90')? '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}" 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">
+									<div class="select_custom deal_opt1" disabled>
+										<div class="combo">
+											<div class="select">선택</div>
+											<ul class="list" id="goodsDealOptDown1">
+												<!--  옵션 1 -->
+											</ul>
+										</div>
+									</div>
+								</div>
+								<div class="form_field">
+									<div class="select_custom deal_opt2" disabled>
+										<div class="combo">
+											<div class="select">선택</div>
+											<ul class="list" id="goodsDealOptDown2">
+												<!--  옵션 2 -->
+											</ul>
+										</div>
+									</div>
+								</div>
+						</div>
+						<div class="opt_result">
+						</div>
+					</div>
+					<div class="price_box">
+						<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}">
+							<div class="ui_col_6">
+								<button type="button" class="btn btn_dark btn_block" id="btnGoodsWish" onclick="fnAddCart('C');"><span>쇼핑백</span></button>
+							</div>
+							<div class="ui_col_6">
+								<button type="button" class="btn btn_primary btn_block" id="btnGoodsCart" onclick="fnAddCart('O');"><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>
+				</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}" 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}" th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}">
+									<div class="item_prod"  th:classappend="${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'soldout':'' }">
+										<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}" 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" 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>
+											<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">
+							<div class="select_custom deal_opt1" disabled>
+								<div class="combo">
+									<div class="select">선택</div>
+									<ul class="list"  id="goodsDealOptLayer1">
+										<!--  옵션 1 -->
+									</ul>
+								</div>
+							</div>
+						</div>
+						<div class="form_field">
+							<div class="select_custom deal_opt2" disabled>
+								<div class="combo">
+									<div class="select">선택</div>
+									<ul class="list"  id="goodsDealOptLayer2">
+										<!--  옵션 2 -->
+									</ul>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="opt_result">
+					</div>
+				</div>
+				<div class="price_box">
+					<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}">
+						<div class="ui_col_6">
+							<button type="button" class="btn btn_dark btn_block" id="btnGoodsWish" onclick="fnAddCart('C');"><span>쇼핑백</span></button>
+						</div>
+						<div class="ui_col_6">
+							<button type="button" class="btn btn_primary btn_block" id="btnGoodsCart" onclick="fnAddCart('O');"><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>
+			</div>
+		</div>
+				
+	</div>
+	<!-- **************** 개별상품 상세정보 팝업 **************** -->
+<script th:inline="javascript">
+/*<![CDATA[*/
+	
+	// 구성 상품 상세 상품평
+	var fnGoodsDetailReview = function(params) {
+		gagajf.ajaxSubmit("/goods/detail/review/frame", "html", "goodsDealReview", params);
+	}
+	
+	// 상품평 상품선택시
+	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);
+	}
+	
+	// 문의 상품선택시
+	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);
+	}
+	
+	// 배송정보 상품선택시
+	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());
+		
+		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>

+ 80 - 0
src/main/webapp/WEB-INF/views/mob/goods/GoodsOtherFormMob.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : GoodsOtherFormMob.html
+ * @desc    : 상품 안내
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.04.05   eskim        최초 작성
+ *******************************************************************************
+ -->
+<th:block th:if="${goodsList != null and !goodsList.empty}" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}">
+	<h3 class="tit">
+	<th:block th:if="${params.goodsOtherGb =='tmtb'}" th:text="${'함께하면 할인되는 다다익선 상품'}"></th:block>
+	<th:block th:if="${params.goodsOtherGb =='together'}" th:text="${'이 상품과 함께 본 상품'}"></th:block>
+	<th:block th:if="${params.goodsOtherGb =='recommend'}" th:text="${params.brandGroupNm +' 추천상품'}"></th:block>
+	<th:block th:if="${params.goodsOtherGb =='like'}" th:text="${'이 상품과 비슷한 상품'}"></th:block>
+	</h3>
+	<div class="area_slider">
+		<div class="swiper-container swiper-container-initialized swiper-container-horizontal">
+			<div class="swiper-wrapper">
+				<div class="swiper-slide" th:each="goodsInfo, status : ${goodsList}">
+					<div class="item_prod">
+						<div class="item_state">
+							<button type="button" class="itemLike" th:classappend="${goodsInfo.wishYn == 'Y'}? 'active' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsInfo.goodsCd}, ithrCd=${params.ithrCd}, contentsLoc=${params.contentsLoc}, planDtlSq=''">관심상품 추가</button>
+							<a href="javascript:void(0);" onclick="cfnGoToGoodsDetail([[${goodsInfo.goodsCd}]], '',[[${params.ithrCd}]],'[[${params.contentsLoc}]]','','pc_detail');" class="itemLink" >
+								<div class="itemPic">
+									<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" 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">
+									<span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}"  th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">1,000,000</span>
+									<th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"></th:block>
+									<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>
+	</div>
+
+<script th:inline="javascript">
+/*<![CDATA[*/
+
+	//슬라이드 - 함께하면 할인되는 다다익선 상품
+	var togetherItemSwiper = new Swiper('.pd .pd_together .area_slider .swiper-container', {
+		slidesPerView: 3,
+		spaceBetween: 8,
+	});  
+
+	//슬라이드 - 이 상품과 함께 본 상품 
+	var otherItemSwiper = new Swiper('.pd .pd_clickother .area_slider .swiper-container', {
+		slidesPerView: 2,
+		spaceBetween: 8,
+	});	
+	//슬라이드 - 동일브랜드 상품 추천
+	var rcmdItemSwiper = new Swiper('.pd .pd_samebrand .area_slider .swiper-container', {
+		slidesPerView: 3,
+		spaceBetween: 8,
+	}); 
+
+	//슬라이드 - 이 상품과 비슷한 상품 
+	var relateItemSwiper = new Swiper('.pd .pd_relate .area_slider .swiper-container', {
+		slidesPerView: 3,
+		spaceBetween: 8,
+	});	 
+	
+/*]]>*/
+</script>	
+
+</th:block>
+</html>

+ 74 - 0
src/main/webapp/WEB-INF/views/mob/order/OrderCustemerInfoMob.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : OrderCustemerInfoMob.html
+ * @desc    : 고객정보 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.04.05   jsh77b     최초 작성
+ *******************************************************************************
+ -->
+<input type="hidden" name="custNm" 		th:value="${custemerInfo.custNm}"/>
+<input type="hidden" name="email" 		th:value="${custemerInfo.email}"/>
+<input type="hidden" name="cellPhnno" 	th:value="${custemerInfo.cellPhnno}"/>
+	
+<!-- 주문고객 -->
+<div class="foldGroup">
+	<ul>
+		<li class="fold_mbinfo">
+			<!-- 주문고객정보 -->
+			<div class="fold_head">
+				<a href="javascript:void(0)">
+					<div>
+						<div class="fold_tit">
+							<span>주문고객</span>
+						</div>
+						<div class="data">
+							<span th:text="${custemerInfo.custNm}"></span> 
+							<span th:text="${custemerInfo.cellPhnno}"></span>
+						</div>
+					</div>
+				</a>
+			</div>
+			<div class="fold_cont" style="display: none;">
+				<div class="area_mbinfo">
+					<dl>
+						<div>
+							<dt><span class="sr-only">주문자명</span></dt>
+							<dd th:text="${custemerInfo.custNm}"></dd>
+						</div>
+						<div>
+							<dt><span class="sr-only">이메일</span></dt>
+							<dd th:text="${custemerInfo.email}"></dd>
+						</div>
+						<div>
+							<dt><span class="sr-only">휴대폰 번호</span></dt>
+							<dd th:text="${custemerInfo.cellPhnno}"></dd>
+						</div>
+					</dl>
+				</div>
+			</div> <!-- //주문고객정보 -->
+		</li>
+	</ul>
+</div>
+<!-- //주문고객 -->
+
+<script th:inline="javascript">
+var dispYn = [[${order.dispYn}]]; // 노출여부
+
+//컨텐츠 호출
+$(document).ready( function() {
+	// 화면펼침
+	if (dispYn == "Y") {
+		$("#custemerInfo .fold_head").addClass("on");
+		$("#custemerInfo .fold_cont").css("display", "block");
+	}
+});
+</script>
+
+</html>

+ 214 - 0
src/main/webapp/WEB-INF/views/mob/order/OrderDcAmtInfoMob.html

@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : OrderDcAmtInfoWeb.html
+ * @desc    : 할인혜택 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.02.01   jsh77b     최초 작성
+ *******************************************************************************
+ -->
+
+<!-- 할인/혜택 사용 -->
+<div class="foldGroup">
+	<ul>
+		<li>
+			<div class="fold_head">
+				<a href="javascript:void(0)">
+					<div>
+						<div class="fold_tit">
+							<span>할인/혜택 사용</span>
+						</div>
+						<div class="data maxdisc">
+							<div class="form_field">
+								<input id="chk-maxdisc" type="checkbox" checked="">
+								<label for="chk-maxdisc"><span>최대 할인혜택을 바로
+										적용하세요!</span><br>
+								<span class="maxdisc_amount">(<em>3,000</em>원 할인)
+								</span></label>
+							</div>
+						</div>
+					</div>
+				</a>
+			</div>
+			<div class="fold_cont">
+				<div class="area_seldiscount">
+					<dl>
+						<div>
+							<dt class="sr-only">할인혜택 바로 적용</dt>
+							<dd>
+								<div class="form_field">
+									<input id="chk-maxdisc01" type="checkbox" checked="">
+									<label for="chk-maxdisc01"><span>최대 할인혜택을 바로
+											적용하세요!</span>&nbsp;<span class="maxdisc_amount">(<em>3,000</em>원
+											할인)
+									</span></label>
+								</div>
+							</dd>
+						</div>
+						<div>
+							<dt>
+								할인쿠폰 <span class="maxdisc_amount">총&nbsp;<em>3,000</em>원
+									할인
+								</span>
+							</dt>
+							<dd>
+								<div class="sale_coupon_box">
+									<div>
+										<button type="button" id="btn_couponModify_pop"
+											class="btn btn_default btn_sm">
+											<span>쿠폰변경</span>
+										</button>
+									</div>
+									<div class="form_field">
+										<div class="input_wrap">
+											<input type="text" class="form_control" maxlength="13"
+												placeholder="할인코드를 입력해주세요.">
+											<button type="button" class="btn btn_dark btn_sm">
+												<span>적용</span>
+											</button>
+										</div>
+									</div>
+								</div>
+							</dd>
+						</div>
+						<div>
+							<dt>배송비 쿠폰</dt>
+							<dd>
+								<div class="dlvr_fee_box">
+									<div class="form_field">
+										<div class="select_custom coupon_list">
+											<!-- 비활성화시 disabled 추가 -->
+											<div class="combo">
+												<div class="select">
+													<div class="dlvr_coupon">
+														<p class="empty">선택</p>
+													</div>
+												</div>
+											</div>
+										</div>
+									</div>
+									<div class="form_field">
+										<div class="select_custom" disabled>
+											<div class="combo">
+												<div class="select">
+													<div class="dlvr_coupon">
+														<p class="empty">적용 가능한 쿠폰이 없습니다</p>
+													</div>
+												</div>
+												<ul class="list">
+													<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true"추가  -->
+													<li class="selected">
+														<div class="dlvr_coupon">
+															<p class="empty">적용 가능한 쿠폰이 없습니다</p>
+														</div>
+													</li>
+												</ul>
+											</div>
+										</div>
+									</div>
+								</div>
+							</dd>
+						</div>
+					</dl>
+				</div>
+				<div class="area_selpoint">
+					<dl>
+						<div>
+							<dt>선 포인트 사용</dt>
+							<dd>
+								<div class="form_field">
+									<div>
+										<input type="radio" name="rdi-beforpoint"
+											id="rdi-beforpoint1" value="" checked=""> <label
+											for="rdi-beforpoint1"><span>사용 안함</span></label>
+									</div>
+									<div>
+										<input type="radio" name="rdi-beforpoint"
+											id="rdi-beforpoint2" value=""> <label
+											for="rdi-beforpoint2"><span>사용함</span></label> <span
+											class="useable_point">(<em>1,500P</em>&nbsp;사용 가능)
+										</span>
+									</div>
+								</div>
+							</dd>
+						</div>
+						<div>
+							<dt>
+								STYLE24 포인트 <span>결제금액의 최대 40%까지 사용가능</span>
+							</dt>
+							<dd>
+								<div class="form_field">
+									<!-- 스타일 포인트 3만원 이상 결제시 노출 -->
+									<div class="input_wrap">
+										<input type="text" class="form_control" maxlength=""
+											placeholder="사용할 포인트를 입력해주세요.">
+										<button type="button" class="btn btn_dark btn_sm">
+											<span>적용</span>
+										</button>
+									</div>
+									<!-- 스타일 포인트 3만원 이상 결제시 노출 -->
+									<!-- 스타일 포인트 3만원 미만 결제시 노출 -->
+									<div class="input_wrap">
+										<input type="text" class="form_control" maxlength=""
+											placeholder="3만원 이상 결제시에만 포인트 사용이 가능합니다."
+											readonly="readonly" onfocus="this.blur();">
+										<button type="button" class="btn btn_dark btn_sm">
+											<span>적용</span>
+										</button>
+									</div>
+									<!-- //스타일 포인트 3만원 미만 결제시 노출 -->
+									<p>
+										<span class="remain_point">보유:&nbsp;<em>25,500</em>P
+										</span>
+									</p>
+								</div>
+							</dd>
+						</div>
+						<div>
+							<dt>상품권</dt>
+							<dd>
+								<div class="form_field">
+									<div class="input_wrap">
+										<input type="text" class="form_control" maxlength=""
+											placeholder="사용할 금액을 입력해주세요.">
+										<button type="button" class="btn btn_dark btn_sm">
+											<span>적용</span>
+										</button>
+									</div>
+									<p>
+										<span class="remain_point">보유:&nbsp;<em>25,500</em>원
+										</span>
+									</p>
+								</div>
+							</dd>
+						</div>
+					</dl>
+				</div>
+			</div>
+		</li>
+	</ul>
+</div>
+<!-- //할인/혜택 사용 -->
+
+<script th:inline="javascript">
+var dispYn = [[${order.dispYn}]]; // 노출여부
+
+//컨텐츠 호출
+$(document).ready( function() {
+	// 화면펼침
+	if (dispYn == "Y") {
+		$("#dcAmtInfo .fold_head").addClass("on");
+		$("#dcAmtInfo .fold_cont").show();
+	}
+	
+	//할인쿠폰(배송비) 선택
+    var od_dlvrfee_coupon_selecter = new sCombo('.od .odPayment .dlvr_fee_box .select_custom.coupon_list');
+});
+</script>
+</html>

+ 163 - 0
src/main/webapp/WEB-INF/views/mob/order/OrderDeliveryAddrInfoMob.html

@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : OrderDeliveryAddrInfoMob.html
+ * @desc    : 배송정보 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.04.05   jsh77b     최초 작성
+ *******************************************************************************
+ -->
+<!-- 배송지정보 -->
+<input type="hidden" name="recipNm" 		th:value="${deliveryAddrInfo.recipNm}"/>
+<input type="hidden" name="recipPhnno" 		th:value="${deliveryAddrInfo.recipPhnno}"/>
+<input type="hidden" name="recipZipcode" 	th:value="${deliveryAddrInfo.recipZipcode}"/>
+<input type="hidden" name="recipBaseAddr" 	th:value="${deliveryAddrInfo.recipBaseAddr}"/>
+<input type="hidden" name="recipDtlAddr" 	th:value="${deliveryAddrInfo.recipDtlAddr}"/>
+<input type="hidden" name="delvMemo" 		th:value="${deliveryAddrInfo.delvMemo}"/>
+<input type="hidden" name="foreignBuyYn" 	th:value="${order.foreignBuyYn}"/>
+<input type="hidden" name="orderMadeYn" 	th:value="${order.orderMadeYn}"/>
+
+<div class="foldGroup shipfold">
+	<ul>
+		<li>
+			<div class="fold_head">
+				<a href="javascript:void(0)">
+					<div>
+						<div class="fold_tit"><span>배송지 정보</span></div>
+						<div class="data">
+							<span id="recipAddr" th:text="${deliveryAddrInfo.recipBaseAddr} + '   ' + ${deliveryAddrInfo.recipDtlAddr}"></span>
+						</div>
+					</div>
+				</a>
+			</div>
+			<div class="fold_cont">
+				<!-- 배송지 정보 변경가능 -->
+				<div class="ship_info ship_edit">
+					<button type="button" id="btn_adrsChange_pop" class="btn_popup">
+						<span>배송지 변경</span>
+					</button>
+					<dl>
+						<div class="company">
+							<dt><span class="sr-only">배송지명</span></dt>
+							<dd>
+								<th:block th:text="${deliveryAddrInfo.recipNm}"></th:block> 
+								<span class="icon_tag"> 
+									<th:block th:if="${deliveryAddrInfo.defaultYn} == 'Y'">
+										<em class="tag_stype1">기본배송지</em> 
+									</th:block>
+									<em class="tag_stype2 shotDelv">총알배송</em>
+								</span>
+							</dd>
+						</div>
+						<div class="phone">
+							<dt><span class="sr-only">휴대폰 번호</span></dt>
+							<dd th:text="${deliveryAddrInfo.recipPhnno}"></dd>
+						</div>
+						<div class="addr">
+							<dt><span class="sr-only">배송주소</span></dt>
+							<dd th:text="${deliveryAddrInfo.recipBaseAddr} + '    ' + ${deliveryAddrInfo.recipDtlAddr}"></dd>
+						</div>
+						
+						<div class="ship_request ship_select">
+							<span>배송요청 사항</span>
+							<div class="ship_option">
+								<div class="form_field">
+									<div class="select_custom delivery_list"> <!-- 비활성화시 disabled 추가 -->
+										<div class="combo">
+											<div class="select" th:text="${deliveryAddrInfo.delvMemo}">선택</div>
+											<ul class="list">
+												<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true"추가  -->
+												<li>문 앞</li> 
+												<li>직접 받고 부재 시 문 앞</li>
+												<li>경비실</li> 
+												<li>택배함</li>
+												<li class="select_etc">기타사항</li>
+											</ul>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="ship_etc">
+								<div class="form_text etc">
+									<input type="text" name="delvMemoText" placeholder="보관 장소만 입력 (필수)" maxlength="30" disabled>
+									<p class="desc_txt">보관 장소 외 다른 내용 입력시 통보 없이 삭제 될 수 있습니다.</p>
+								</div>
+							</div>
+						</div>
+					</dl>
+				</div>
+				<!-- //배송지 정보 변경가능 -->
+			</div>
+		</li>
+	</ul>
+</div>
+<!-- //배송지정보 -->
+
+<script th:inline="javascript">
+var dispYn = [[${order.dispYn}]]; // 노출여부
+var delvMemo = [[${deliveryAddrInfo.delvMemo}]]; // 노출여부
+
+//화면노출
+var deliveryAddrInfoDispYn = function(temp) {
+	if (temp == "Y") {
+		$("#deliveryAddrInfo .fold_head").addClass("on");
+		$("#deliveryAddrInfo .fold_cont").show();
+	} else {
+		$("#deliveryAddrInfo .fold_head").removeClass("on");
+		$("#deliveryAddrInfo .fold_cont").hide();
+	}
+}
+
+//컨텐츠 호출
+$(document).ready( function() {
+	var delvMemoArr = ["문 앞", "직접받고 부재시 문 앞", "경비실", "택배함"];
+	var tempMemo = true;
+	
+	$("#orderForm .ship_request .delivery_list li").removeClass("selected");
+	
+	// 배송요청사항설정
+	for (i=0 ; i<delvMemoArr.length ; i++) {
+		if (delvMemoArr[i] == delvMemo) {
+			tempMemo = false;
+		}
+	}
+
+	// 배송메모설정
+	$("#orderForm .ship_request .delivery_list li").each(function(){
+		if (delvMemo == $(this).text()) {
+			$(this).addClass("selected");
+		}
+	});
+	
+	if (tempMemo) {
+		$("#orderForm .ship_request .delivery_list .select").text("기타사항");
+		$("#orderForm input[name=delvMemoText]").attr("disabled", false);
+		$("#orderForm input[name=delvMemoText]").val(delvMemo);
+		$("#orderForm .delvMemo li").eq(4).addClass("selected");
+		$(".ship_etc").show();
+	}
+	
+	// 화면펼침
+	deliveryAddrInfoDispYn(dispYn);
+	
+	// 콤보박스 
+	var od_delivery_list = new sCombo('#orderForm .ship_select .select_custom.delivery_list');
+	
+	// 210405_배송요청 사항 기타사항 selected시 기타사항 input 구현
+	$("#orderForm .select_custom.delivery_list .combo .list > li").on("click", function(){
+		if ($("#orderForm .select_etc").hasClass("selected")){
+			$(".ship_etc").show();
+		} else {
+			$(".ship_etc").hide();
+		}
+	});
+});
+</script>
+
+</html>

+ 98 - 0
src/main/webapp/WEB-INF/views/mob/order/OrderEntryInfoMob.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : OrderEntryInfoMob.html
+ * @desc    : 개인통관부호 정보 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.04.05   jsh77b     최초 작성
+ *******************************************************************************
+ -->
+ 
+ <!-- 개인통관부호 정보 -->
+<div class="foldGroup">
+	<ul>
+		<li>
+			<div class="fold_head">
+				<a href="javascript:void(0)">
+					<div>
+						<div class="fold_tit">
+							<span>개인통관고유부호</span>
+						</div>
+						<div class="data">
+							<span>P123456789</span>
+						</div>
+					</div>
+				</a>
+			</div>
+			<div class="fold_cont">
+				<div class="area_overseas">
+					<div class="info_txt">
+						<ul>
+							<li>물품가액이 $150 초과할 경우 관/부가세가 발생 할 수 있으며, 물품 종류와 해외공급자
+								관계없이 같은 날 입항하게 되면 합산과세 대상이 됩니다.</li>
+						</ul>
+					</div>
+					<div class="form_field">
+						<div>
+							<input type="radio" name="rdi-overseas" id="rdi-overs1" value="" checked=""> 
+							<label for="rdi-overs1"><span>받는사람 개인통관고유부호</span></label>
+						</div>
+						<div>
+							<input type="radio" name="rdi-overseas" id="rdi-overs2" value=""> 
+							<label for="rdi-overs2"><span>입력 안 함</span></label>
+						</div>
+						<div class="info_box overs1">
+							<div class="input_wrap">
+								<input type="text" class="form_control err" maxlength="13" placeholder="P로 시작하는 13자리">
+								<!-- 유효하지 않은 개인통관고유부호 일때 class명 'err' 추가 -->
+							</div>
+							<div class="t_err">개인통관고유부호가 유효하지 않습니다.</div>
+							<!-- 유효하지 않은 개인통관고유부호 일때 노출 -->
+							<div class="agree_overs">
+								<input id="chk-overs-agr" type="checkbox" checked="">
+								<label for="chk-overs-agr">
+									<span>위 정보는 원활한 통관을 위해 수집 및 판매자에게 제공하며,계속 사용하도록 안전하게 STYLE24에서 저장 / 관리 합니다.&nbsp;&nbsp;<em class="tmark_required">(필수)</em></span>
+								</label>
+							</div>
+							<div class="btn_group btn_group_flex">
+								<div>
+									<button type="button" class="btn btn_dark">입력완료</button>
+								</div>
+							</div>
+						</div>
+						<div class="info_box overs2" style="display: none;">
+							<div class="info_txt type2">
+								<ul>
+									<li>개인통관고유부호를 입력하지 않아도 관세사무소에서 개인정보 확인을 위해 별도 연락을 드릴
+										예정입니다.</li>
+								</ul>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</li>
+	</ul>
+</div>
+<!-- //개인통관부호 정보 -->
+
+<script th:inline="javascript">
+var dispYn = [[${order.dispYn}]]; // 노출여부
+
+//컨텐츠 호출
+$(document).ready( function() {
+	// 화면펼침
+	if (dispYn == "Y") {
+		$("#custemerInfo .fold_head").addClass("on");
+		$("#custemerInfo .fold_cont").css("display", "block");
+	}
+});
+</script>
+
+</html>

+ 183 - 0
src/main/webapp/WEB-INF/views/mob/order/OrderFreegiftInfoMob.html

@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : OrderFormWeb.html
+ * @desc    : 주문/결제 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.02.01   jsh77b     최초 작성
+ *******************************************************************************
+ -->
+
+<th:block th:if="${freegiftList != null && #lists.size(freegiftList) > 0}">
+<div class="foldGroup">
+	<ul>
+		<li>
+			<div class="fold_head">
+				<a href="javascript:void(0)">
+					<div>
+						<div class="fold_tit">
+							<span>사은품</span>
+						</div>
+						<div class="data">
+							<span>사은품 총 <em class="total_gift">0</em>개 선택</span> 
+							<span><em class="total_deduct">0</em>P 차감</span>
+						</div>
+					</div>
+				</a>
+			</div>
+			<div class="fold_cont">
+				<div class="area_selgift">
+					<th:block th:each="freegift, i : ${freegiftList}">
+						<th:block th:if="${freegift.allYn} == 'Y'">
+							<div class="gift_box necessary_gift_box">
+						</th:block>
+						<th:block th:if="${freegift.allYn} == 'N'">
+							<div class="gift_box">
+						</th:block>
+							<p class="txt">
+								<th:block th:if="${freegift.allYn} == 'Y'">
+									<span th:text="|사은품필수 ${i.count}|"></span>
+								</th:block>
+								<th:block th:if="${freegift.allYn} == 'N'">
+									<span th:text="|사은품선택 ${i.count}|"></span>
+								</th:block>
+								<th:block th:text="${freegift.freegiftNm}"></th:block>
+							</p>
+							<div class="form_field">
+								<!-- 전체지급 사음품(필수) -->
+								<th:block th:if="${freegift.allYn} == 'Y'">
+									<th:block th:each="freegiftGoods, k : ${freegiftGoodsList}">
+										<th:block th:if="${freegift.freegiftSq} == ${freegiftGoods.freegiftSq}">
+											<div class="gift">
+												<input type="checkbox" th:name="'rdi-gift'+${i.count}" th:id="'rdi-gift'+${i.count}+${k.count}" class="chk_img freegiftRdo" th:value="${freegiftGoods.freegiftValSq}" usepoint="0" allYn="Y" checked onclick="return(false);">
+												<label for="rdi-gift11"> 
+													<span class="thumb"><img src="/images/pc/thumb/tmp_gift1.jpg" width="" alt=""></span>
+													<span class="name" th:text="${freegiftGoods.goodsNm}"></span> 
+													<span class="deduct">무료</span>
+												</label>
+											</div>
+										</th:block>
+									</th:block>
+								</th:block>
+								<!-- //전체지급 사음품(필수) -->
+								
+								<!-- 선택지급 사음품(선택) -->
+								<th:block th:if="${freegift.allYn} == 'N'">
+									<th:block th:each="freegiftGoods, k : ${freegiftGoodsList}">
+										<th:block th:if="${freegift.freegiftSq} == ${freegiftGoods.freegiftSq}">
+											<div class="gift">
+												<input type="radio" th:name="'rdi-gift'+${i.count}" th:id="'rdi-gift'+${i.count}+${k.count}" class="chk_img freegiftRdo" th:value="${freegiftGoods.freegiftValSq}" th:usepoint="${freegiftGoods.usePoint}" allYn="N">
+												<label for="rdi-gift1">
+													<span class="thumb"><img src="/images/pc/thumb/tmp_gift1.jpg" width="" alt=""></span>
+													<span class="name" th:text="${freegiftGoods.goodsNm}"></span> 
+													<span th:if="${freegiftGoods.usePoint} < 1" class="deduct" th:text="무료"></span>
+													<span th:if="${freegiftGoods.usePoint} > 0" class="deduct" th:text="|${#numbers.formatInteger(freegiftGoods.usePoint, 1, 'COMMA')} P|"></span>
+												</label>
+											</div>
+										
+										</th:block>
+									</th:block>
+									<div class="gift">
+										<input type="radio" th:name="'rdi-gift'+${i.count}" th:id="${i.count}+'0'" class="chk_img freegiftRdo" value="noSel" usepoint="0" allYn="N"> 
+										<label for="rdi-gift4">
+											<span class="thumb"><img src="/images/pc/thumb/tmp_gift_empty.jpg" width="" alt=""></span>
+											<span class="name">사은품 수령안함</span> <span class="deduct">수령거부</span>
+										</label>
+									</div>
+								</th:block>
+								<!-- //선택지급 사음품(선택) -->
+							</div>
+						</div>
+					</th:block>
+
+					<div class="form_field">
+						<div class="agree_gift">
+							<p>
+								<input id="chk-agree_gift" type="checkbox">
+								<labelfor="chk-agree_gift"><span>동의합니다</span></label>
+							</p>
+							<p class="txt">사은품 지금에 대한 내용을 확인하였으며, 이에 동의합니다.</p>
+							<button type="button" class="btn_link_popup" id="btn_infoGift_btn">
+								<span>보기</span>
+							</button>
+						</div>
+						<div class="agree_gift_con">
+							<p>제1장 총칙 제1조(목적) 본 약관은 정부24 (이하 "당 사이트")가 제공하는 모든 서비스(이하
+								"서비스")의 이용조건 및 절차, 이용자와 당 사이트의 권리, 의무, 책임사항과 기타 필요한 사항을 규정함을
+								제1장 총칙 제1조(목적) 본 약관은 정부24 (이하 "당 사이트")가 제공하는 모든 서비스(이하
+								"서비스")의 이용조건 및 절차, 이용자와 당 사이트의 권리, 의무, 책임사항과 기타 필요한 사항을 규정함을
+								제1장 총칙 제1조(목적) 본 약관은 정부24 (이하 "당 사이트")가 제공하는 모든 서비스(이하
+								"서비스")의 이용조건 및 절차, 이용자와 당 사이트의 권리, 의무, 책임사항과 기타 필요한 사항을 규정함을
+								제1장 총칙 제1조(목적) 본 약관은 정부24 (이하 "당 사이트")가 제공하는 모든 서비스(이하
+								"서비스")의 이용조건 및 절차, 이용자와 당 사이트의 권리, 의무, 책임사항과 기타 필요한 사항을 규정함을
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</li>
+	</ul>
+</div>
+
+<script th:inline="javascript">
+//할인관련정보 변수선언
+var freegiftApplyAmtList	= [[${freegiftApplyAmtList}]];		// 사은품장바구니목록
+var freegiftList			= [[${freegiftList}]];				// 사은품 프로모션 목록
+var freegiftGoodsList		= [[${freegiftGoodsList}]];			// 사은품 프로모션 상품 목록
+var dispYn 					= [[${order.dispYn}]]; 				// 노출여부
+
+var freegiftInfoDispYn = function(temp) {
+	if (temp == "Y") {
+		$("#freegiftInfo .fold_head").addClass("on");
+		$("#freegiftInfo .fold_cont").show();
+	} else {
+		$("#freegiftInfo .fold_head").removeClass("on");
+		$("#freegiftInfo .fold_cont").hide();
+	}
+}
+
+//컨텐츠 호출
+$(document).ready( function() {
+	// 사은품 화면 노출여부 체크
+	if (freegiftList.length == null || freegiftList.length < 1) {
+		$("#freegiftInfo").css("display", "none");
+	} else {
+		$("#freegiftInfo").css("display", "block");
+	}
+	
+	//사은품노출여부
+	freegiftInfoDispYn(dispYn);
+	
+	// 사은품시퀀스배열, 
+	var freegiftSqArr 		= [];
+	var freegiftGoodsArr 	= [];
+	
+	// 사은품 장바구니 상품 뿌리기
+	for (i=0 ; i<freegiftApplyAmtList.length ; i++) {
+		var obj = freegiftApplyAmtList[i];
+		freegiftSqArr.push(obj.freegiftSq);
+		freegiftGoodsArr.push(obj.goodsCd);
+	}
+	
+	$(".freegiftSqArr").text(freegiftSqArr);
+	$(".freegiftGoodsArr").text(freegiftGoodsArr);
+	
+});
+</script>
+</th:block>
+
+
+
+
+
+
+
+
+
+

+ 176 - 0
src/main/webapp/WEB-INF/views/mob/order/OrderListInfoMob.html

@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : OrderCustemerInfoWeb.html
+ * @desc    : 고객정보 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.02.01   jsh77b     최초 작성
+ *******************************************************************************
+ -->
+<input type="hidden" name="delvFeeCdCnt" th:value="${delvFeeCdCnt}"/>
+<input type="hidden" name="shotCnt" th:value="${shotCnt}"/>
+<input type="hidden" name="wmsCnt" 	th:value="${wmsCnt}"/>
+
+<div class="foldGroup">
+	<ul>
+		<li class="fold_mbinfo">
+			<div class="fold_head">
+				<a href="javascript:void(0)">
+					<div>
+						<div class="fold_tit"><span>주문내역</span></div>
+						<div class="data"><em class="c_primary" th:text="${goodsTotCnt}"></em>개의 상품</div>
+					</div>
+				</a>
+			</div>
+			<div class="fold_cont" style="display: none;">
+				<div class="od_item_box">	
+					<th:block th:each="delvAllCart, i : ${delvAllCartList}">
+						<th:block th:if="${delvAllCart != null and #lists.size(delvAllCart) > 0}">
+							<div class="part_goods">
+								<th:block th:if="${i.index} == 0">
+									<th:block th:if="${delvAllCart != null and #lists.size(delvAllCart) > 0}">
+										<div class="goods_top">
+											<div class="goods_date">STYLE24 총알배송<span class="date">오늘 자정까지 도착</span></div>
+										</div>
+									</th:block>
+								</th:block>
+								<th:block th:if="${i.index} == 1">
+									<th:block th:if="${delvAllCart != null and #lists.size(delvAllCart) > 0}">
+										<div class="goods_top">
+											<div class="goods_date">STYLE24 일반배송</div>
+										</div>
+									</th:block>
+								</th:block>
+								<th:block th:if="${i.index} == 2">
+									<th:block th:if="${delvAllCart != null and #lists.size(delvAllCart) > 0}">
+										<div class="goods_top">
+											<div class="goods_date">업체직배송</div>
+										</div>
+									</th:block>
+								</th:block>
+								<th:block th:if="${i.index} == 3">
+									<th:block th:if="${delvAllCart != null and #lists.size(delvAllCart) > 0}">
+										<div class="goods_top">
+											<div class="goods_date">예약배송</div>
+										</div>
+									</th:block>
+								</th:block>
+								<!-- 주문 접수 -->
+								<th:block th:each="goods, i : ${delvAllCart}">
+									<div class="goods_section">
+										<div class="goods_detail">
+											<a href="">
+												<div class="thumb_box">
+													<img src="/images/mo/thumb/tmp_pdClickother1.jpg" alt="tmp_pdClickother1">
+												</div>
+												<div class="info_box">
+													<div class="od_name">
+														<div class="brand"><span th:text="${goods.brandEnm} + ' ' + ${goods.brandKnm}"></span></div>
+														<div class="name" th:text="${goods.goodsNm}"></div>
+													</div>
+													<div class="od_opt" >
+														<div class="option" th:each="colorNm, index : ${goods.colorNmArr}">
+															<em th:text="${colorNm}"></em>
+															<em th:text="${goods.optCd2Arr[index.index]}"></em>
+														</div>
+													</div>
+													<div class="od_point">
+														<p class="point"><span th:text="${#numbers.formatInteger(goods.savePntAmt, 1, 'COMMA')}"></span>P 적립예정</p>
+													</div>
+												</div>
+											</a>
+										</div>
+										<div class="od_calc">
+											<p class="count">수량 <em th:text="${goods.goodsQty}"></em>개</p>
+											<p class="price">
+												<!-- 다다익선할인금액없으면 즉시할인가 까지만 표현 -->
+												<th:block th:if="${goods.tmtbDcAmt} < 1">
+													<span class="selling_price"><em th:text="${#numbers.formatInteger((goods.currPrice + goods.optAddPrice) * goods.goodsQty, 1, 'COMMA')}"></em>원</span>
+												</th:block>
+												<!-- 다다익선할인금액있으면 즉시할인가, 다다익선할인가 표현 -->
+												<th:block th:if="${goods.tmtbDcAmt} > 0">
+													<span class="sale_price"><del><em th:text="${#numbers.formatInteger((goods.currPrice + goods.optAddPrice) * goods.goodsQty, 1, 'COMMA')}"></em>원</del></span>
+													<span class="selling_price"><em th:text="${#numbers.formatInteger(goods.tmtbDcAmt, 1, 'COMMA')}"></em>원</span>
+												</th:block>
+
+											</p>
+										</div>
+										<th:block th:if="${goods.delvResDt}">
+											<p class="info_reserv">
+												<i class="ico ico_calender"></i><span th:text="${goods.delvResDt}"></span> 배송예정상품
+											</p>
+										</th:block>
+									</div>
+								</th:block>
+							</div>
+						</div>
+					</th:block>
+				</th:block>
+				
+				<div class="od_amount_box">
+					<dl>
+						<div>
+							<dt>상품금액</dt>
+							<dd><em id="orgGoodsSumAmt"></em>원</dd>
+						</div>
+						<div>
+							<dt>배송비</dt>
+							<dd><em id="delvSumAmt"></em>원</dd>
+						</div>
+						<div>
+							<dt>상품할인(즉시할인)</dt>
+							<dd>
+								<span class="disc_amount"><em id="cpn1DcSumAmt"></em>원</span>
+							</dd>
+						</div>
+						<div>
+							<dt>다다익선할인</dt>
+							<dd>
+								<span class="disc_amount"><em id="tmtbDcSumAmt"></em>원</span>
+							</dd>
+						</div>
+						<div>
+							<dt>쿠폰할인</dt>
+							<dd>
+								<span class="disc_amount"><em id="couponDcSumAmt"></em>원</span>
+							</dd>
+						</div>
+						<div>
+							<dt>선포인트 사용</dt>
+							<dd>
+								<span class="disc_amount"><em id="prePntDcAmt"></em>P</span>
+							</dd>
+						</div>
+						<div>
+							<dt>포인트 사용</dt>
+							<dd>
+								<span class="disc_amount"><em id="pntDcAmt"></em>P</span>
+							</dd>
+						</div>
+						<div>
+							<dt>상품권 사용</dt>
+							<dd>
+								<span class="disc_amount"><em id="gfcdUseAmt"></em>원</span>
+							</dd>
+						</div>
+					</dl>
+				</div>
+				<div class="totalprice_box">
+					<dl>
+						<dt>총 결제 예정 금액</dt>
+						<dd data-weight="price" data-font="lato"><span id="savePntSumAmt"></span>원</dd>
+					</dl>
+					<p class="info_point"><span class="save_point" id="savePntSumAmt">P</span> 적립예정
+					</p>
+					<p class="info_delivery">총 <span id="delvFeeCdCnt" th:text="${delvFeeCdCnt}"></span>건으로 나뉘어 배송 예정</p>
+				</div>
+			</div> 
+		</li>
+	</ul>
+</div>

+ 71 - 0
src/main/webapp/WEB-INF/views/mob/order/OrderMadeInfoMob.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : OrderMadeInfoMob.html
+ * @desc    : 주문제작상품동의여부 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.04.05   jsh77b     최초 작성
+ *******************************************************************************
+ -->
+<!-- 주문제작상품동의여부 -->
+<div class="foldGroup">
+	<ul>
+		<li>
+			<div class="fold_head">
+				<a href="javascript:void(0)">
+					<div>
+						<div class="fold_tit">
+							<span>주문제작상품동의</span>
+						</div>
+						<div class="data custom_disc">
+							<div class="form_field">
+								<input id="chk-custom" type="checkbox" checked=""> <label
+									for="chk-custom"><span>동의합니다.</span></label>
+							</div>
+						</div>
+					</div>
+				</a>
+			</div>
+			<div class="fold_cont">
+				<div class="area_customitem">
+					<p>고객님께서 주문하신 상품에는 주문제작상품이 포함되어 있습니다.</p>
+					<div class="form_field">
+						<div class="agree_custom">
+							<input id="chk-custom-agr1" type="checkbox" checked="">
+							<label for="chk-custom-agr1"><span>주문제작상품에 대한
+									안내를 확인하였으며 배송에 동의합니다.</span></label>
+						</div>
+					</div>
+					<div class="info_txt">
+						<ul>
+							<li>주문 제작 상품은 주문 후 제작이 진행되며, 제작 완료 후 배송이 시작됩니다.</li>
+							<li>주문 제작 상품의 특성상 주문 완료 후 취소/교환이 불가능합니다. (상품 하자에 한해 가능)</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+		</li>
+	</ul>
+</div>
+<!-- //주문제작상품동의여부 -->
+				
+<script th:inline="javascript">
+var dispYn = [[${order.dispYn}]]; // 노출여부
+
+//컨텐츠 호출
+$(document).ready( function() {
+	// 화면펼침
+	if (dispYn == "Y") {
+		$("#custemerInfo .fold_head").addClass("on");
+		$("#custemerInfo .fold_cont").css("display", "block");
+	}
+});
+</script>
+
+</html>

+ 108 - 0
src/main/webapp/WEB-INF/views/mob/order/OrderPaymentInfoMob.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : OrderPaymentInfoWeb.html
+ * @desc    : 결제정보 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.02.01   jsh77b     최초 작성
+ *******************************************************************************
+ -->
+<!-- 결제수단 선택 -->
+<div class="foldGroup">
+	<ul>
+		<li>
+			<div class="fold_head">
+				<a href="javascript:void(0)">
+					<div>
+						<div class="fold_tit">
+							<span>결제수단</span>
+						</div>
+						<div class="data">
+							<span>신용카드</span>
+						</div>
+					</div>
+				</a>
+			</div>
+			<div class="fold_cont">
+				<div class="area_paymethod">
+					<div class="paymethod_box">
+						<div class="form_field">
+							<ul class="sel_method">
+								<li><input type="radio" name="rdi-paynormal"
+									id="payCreditCard" value=""> <label
+									for="payCreditCard"><span>신용카드</span></label></li>
+								<li><input type="radio" name="rdi-paynormal"
+									id="payKakao" value=""> <label for="payKakao"><span><em
+											class="sr-only">카카오페이 결제</em><em class="payimg kakao"></em></span></label>
+								</li>
+								<li><input type="radio" name="rdi-paynormal"
+									id="payRealBank" value=""> <label for="payRealBank"><span>실시간계좌이체</span></label>
+								</li>
+								<li><input type="radio" name="rdi-paynormal"
+									id="payNaver" value=""> <label for="payNaver"><span><em
+											class="sr-only">네이버페이 결제</em><em class="payimg naver"></em></span></label>
+								</li>
+								<li><input type="radio" name="rdi-paynormal"
+									id="payVirtualBank" value=""> <label
+									for="payVirtualBank"><span>무통장입금</span></label></li>
+								<li><input type="radio" name="rdi-paynormal"
+									id="payPayco" value=""> <label for="payPayco"><span><em
+											class="sr-only">페이코 결제</em><em class="payimg payco"></em></span></label>
+								</li>
+								<li><input type="radio" name="rdi-paynormal"
+									id="payCellphone" value=""> <label
+									for="payCellphone"><span>휴대폰 결제</span></label></li>
+							</ul>
+						</div>
+						<div class="form_field">
+							<div class="agree_insurance">
+								<input id="chk-insurance" type="checkbox"> <label
+									for="chk-insurance"> <span>소비자 피해 보상보험
+										신청&nbsp;&nbsp;<em class="tmark_optional">(선택)</em>
+								</span>
+								</label>
+								<p>
+									‘전자상거래 등에서의 소비자보호에 관한 법률‘에 따라 현금 결제 시 서울보증보험㈜가 제공하는 소비자
+									피해보상보험을<br>신청할 수 있도록 해드리고 있습니다. (2013.11.28부터 시행)
+								</p>
+								<a href="" class="btn btn_default"><span>FAQ확인</span></a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</li>
+	</ul>
+</div><!-- //결제수단 선택 -->
+
+
+<script th:inline="javascript">
+var dispYn = [[${order.dispYn}]]; // 노출여부
+
+//화면노출
+var paymentInfoDispYn = function(temp) {
+	if (temp == "Y") {
+		$("#paymentInfo .fold_head").addClass("on");
+		$("#paymentInfo .fold_cont").show();
+	} else {
+		$("#paymentInfo .fold_head").removeClass("on");
+		$("#paymentInfo .fold_cont").hide();
+	}
+}
+
+//컨텐츠 호출
+$(document).ready( function() {
+	// 화면펼침
+	paymentInfoDispYn(dispYn);
+});
+
+
+</script>
+
+</html>

+ 280 - 0
src/main/webapp/WEB-INF/views/mob/popup/DelvAddrAddPopMob.html

@@ -0,0 +1,280 @@
+<form class="form_wrap form_full" name="deliveryAddForm" id="deliveryAddForm">
+	<div class="modal-header htop">
+		<h5 class="modal-title" id="adrsAddLabel">배송지 추가</h5>
+	</div>
+	<div class="modal-body">
+		<div class="pop_cont">
+			<div class="inner wide">
+				<div class="tbl_wrap">
+					<div class="tbl tbl_dlvr">
+						<table>
+							<colgroup>
+								<col width="*">
+							</colgroup>   
+							<tbody>
+								<tr>
+									<td>
+										<span class="sr-only">받는분</span>
+										<input type="text" class="form_control" name="recipNm" placeholder="받는분">
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<span class="sr-only">휴대폰 번호</span>
+										<input type="text" class="form_control" name="recipPhnno" placeholder="휴대폰 번호">
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<span class="sr-only">배송 주소</span>
+										<div class="input_wrap">
+											<input type="hidden" class="form_control" name="recipZipcode" placeholder="우편번호" readonly="readonly">
+											<input type="hidden" class="form_control" name="recipBaseAddr" placeholder="기본주소" readonly="readonly">
+											<input type="text" class="form_control" name="recipAddr" placeholder="배송주소" readonly="readonly">
+											<input type="text" class="form_control" name="recipDtlAddr" placeholder="상세주소">
+											<button type="button" class="btn btn_sch" onclick="fnOpenDaumAddr();">
+												<span class="sr-only">우편번호 찾기</span>
+											</button>
+										</div>
+										<div class="default_addrs">
+											<div class="form_field">
+												<input id="chk-default-addrs" type="checkbox" name="defaultYn" checked="">
+												<label for="chk-default-addrs"><span>기본 배송지로 등록</span></label>
+											</div>
+										</div>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+				<div class="tbl_wrap">
+					<div class="tbl_tit">
+						<h3>배송 요청사항</h3>
+					</div>
+					<div class="tbl tbl_request">
+						<table>
+							<colgroup>
+								<col width="*">
+							</colgroup>   
+							<tbody>
+								<tr>
+									<th class="sr-only">문 앞</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-11" value="문 앞">
+											<label for="rdi-11"><span>문 앞</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">직접 받고 부재 시 문 앞</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-21" value="직접 받고 부재 시 문 앞">
+											<label for="rdi-21"><span>직접 받고 부재 시 문 앞</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">경비실</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-31" value="경비실">
+											<label for="rdi-31"><span>경비실</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">택배함</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-41" value="택배함">
+											<label for="rdi-41"><span>택배함</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">기타사항</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-51" value="기타사항">
+											<label for="rdi-51"><span>기타사항</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">보관 장소만 입력(필수)</th>
+									<td>
+										<div class="form_text">
+											<input type="text" name="delvMemoText" placeholder="보관 장소만 입력 (필수)" maxlength="30" disabled>
+											<p class="desc_txt">보관 장소 외 다른 내용 입력시 통보 없이 삭제 될 수 있습니다.</p>
+										</div>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="modal-footer">
+		<button type="button" class="btn btn_dark" id="btn_delivery_addr_save"><span>배송지 등록</span></button>
+	</div>
+</form>
+
+<script th:inline="javascript">
+var isLogin				= [[${isLogin}]];				// 로그인여부
+
+//컨텐츠 호출
+$(document).ready( function() {
+	// 배송요청사항 버튼기능
+	$("#deliveryAddForm input[name=rdi-request1]").each(function(){
+		// 기타기능 버튼기능
+		$(this).on("click", function(){
+			var temp = $(this).parent().find('span').text();
+			$("#deliveryAddForm input[name=delvMemoText]").val("");
+			if (temp == "기타사항") {
+				$("#deliveryAddForm input[name=delvMemoText]").attr("disabled", false);
+			} else {
+				$("#deliveryAddForm input[name=delvMemoText]").attr("disabled", true);
+			}
+		});
+	});
+});
+
+// 배송지등록버튼
+$("#btn_delivery_addr_save").on("click", function(){
+	
+	// 유효성체크
+	if (!deliveryAddFormCheck()){
+		return false;
+	}
+	
+	// 기본배송지여부
+	var defaultYn = "N";
+	if ($("#deliveryAddForm input[name=defaultYn]").is(":checked")) {
+		defaultYn = "Y";
+	}
+	
+	// 기타사항일때 텍스트 등록
+	var delvMemo = $("#deliveryAddForm input[name=rdi-request1]:checked").parent().find('span').text();
+	if ("기타사항" == delvMemo) {
+		delvMemo = $("#deliveryAddForm input[name=delvMemoText]").val();
+	}
+	
+	// custDelvAddrSq 부모창으로 전달
+	var delvObj = {
+		"custDelvAddrSq"	: 0
+		, "dispYn"			: "Y"
+		, "defaultYn"		: defaultYn
+		, "recipNm"			: $("#deliveryAddForm input[name=recipNm]").val()
+		, "recipPhnno"		: $("#deliveryAddForm input[name=recipPhnno]").val()
+		, "recipZipcode"	: $("#deliveryAddForm input[name=recipZipcode]").val()
+		, "recipBaseAddr"	: $("#deliveryAddForm input[name=recipBaseAddr]").val()
+		, "recipDtlAddr"	: $("#deliveryAddForm input[name=recipDtlAddr]").val()
+		, "delvMemo"		: delvMemo
+	}
+	
+	// 비회원
+	if (isLogin == false) {
+		// 부모장으로 값 전닫
+		delvAddrSet(delvObj);
+		// 팝업닫기
+		$(".close-modal").trigger("click");
+		return false;
+	}
+	
+	var jsonData = JSON.stringify(delvObj);
+	
+	$.ajax( {
+		type		: "POST",
+		url 		: '/common/createCustDeliveryAddr',
+		data		: jsonData,
+		dataType 	: 'html',
+		beforeSend : function(xhr, settings) {
+			xhr.setRequestHeader("AJAX"			, "true");
+			xhr.setRequestHeader('Accept'		, 'application/json');
+			xhr.setRequestHeader('Content-Type'	, 'application/json');
+			gagajf.showProgressbar(true);
+		},
+		success 	: function(result) {
+			if (result != null) {
+				delvObj.custDelvAddrSq = result;
+				
+				// 부모장으로 값 전닫
+				delvAddrSet(delvObj);
+			}
+			
+			// 팝업닫기
+			$(".close-modal").trigger("click");
+		}
+	});
+});
+
+// 유효성체크 함수
+var deliveryAddFormCheck = function() {
+	// TODO 유효성 체크 추가
+	if (gagajf.isNull($("#deliveryAddForm input[name=recipNm]").val())) {
+		mcxDialog.alert("이름을 입력해주세요.");
+		$('#deliveryAddForm input[name=custNm]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryAddForm input[name=recipPhnno]").val())) {
+		mcxDialog.alert("휴대폰번호를 입력해주세요.");
+		$('#deliveryAddForm input[name=recipPhnno]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryAddForm input[name=recipZipcode]").val())) {
+		mcxDialog.alert("배송주소를 입력해주세요.");
+		$('#deliveryAddForm input[name=recipAddr]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryAddForm input[name=recipBaseAddr]").val())) {
+		mcxDialog.alert("배송주소를 입력해주세요.");
+		$('#deliveryAddForm input[name=recipAddr]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryAddForm input[name=recipDtlAddr]").val())) {
+		mcxDialog.alert("상세주소를 입력해주세요.");
+		$('#deliveryAddForm input[name=recipDtlAddr]').focus();
+		return false;
+	}
+	
+	return true;
+}
+
+// 우편번호 DAUM을 이용한 우편번호 팝업 레이어
+var fnOpenDaumAddr = function() {
+	$("body").css("overflow", "hidden");
+	
+	let daumZip = new daum.Postcode({
+		oncomplete: function(data) {
+			$('#deliveryAddForm input[name=recipAddr]').val(data.zonecode + '    ' + cfnGetDaumRoadAddr(data));
+			$('#deliveryAddForm input[name=recipZipcode]').val(data.zonecode);
+			$('#deliveryAddForm input[name=recipBaseAddr]').val(cfnGetDaumRoadAddr(data));
+			$('#deliveryAddForm input[name=recipDtlAddr]').focus();
+			
+			cfnCloseDaumAddr();
+			
+			$("#adrsAddPop").modal("show");
+		},
+		width: '100%'
+	});
+	cfnOpenDaumAddr(daumZip);
+}
+</script>
+
+
+
+
+
+
+
+
+

+ 146 - 0
src/main/webapp/WEB-INF/views/mob/popup/DelvAddrChangePopMob.html

@@ -0,0 +1,146 @@
+<!-- 배송지변경 팝업 -->
+<form name="delvAddrChangeForm" id="delvAddrChangeForm">
+	<div class="modal-header htop">
+		<h5 class="modal-title" id="adrsChangeLabel">배송지 관리</h5>
+	</div>
+	<div class="modal-body">
+		<div class="pop_cont">
+			<div class="inner wide">
+				<div class="delivery_list">
+					<!-- 배송지목록 -->
+					<th:block th:each="deliveryAddr, index : ${deliveryAddrList}">
+						<div class="ship_info">
+							<dl>
+								<div class="name">
+									<dt><span class="sr-only">배송지명</span></dt>
+									<dd>
+										<th:block th:text="${deliveryAddr.recipNm}"></th:block>
+										<div class="badge_wrap">
+											<th:block th:if="${deliveryAddr.defaultYn} == 'Y'">
+												<em class="order_badge">기본배송지</em> 
+											</th:block>
+											<th:block th:if="${deliveryAddr.shotDelvUseYn} == 'Y'">
+												<em class="order_badge order_bullet_badge">총알배송</em>
+											</th:block>
+										</div>
+									</dd>
+								</div>
+								<div class="phone">
+									<dt><span class="sr-only">휴대폰 번호</span></dt>
+									<dd th:text="${deliveryAddr.recipPhnno}"></dd>
+								</div>
+								<div class="addr">
+									<dt><span class="sr-only">배송주소</span></dt>
+									<dd th:text="${deliveryAddr.recipBaseAddr} + ' ' + ${deliveryAddr.recipDtlAddr}"></dd>
+								</div>
+								<div class="ship_request">
+									<dl>
+										<dt>배송요청 사항</dt>
+										<dd th:text="${deliveryAddr.delvMemo}"></dd>
+									</dl>
+								</div>
+							</dl>
+							<div class="btn_group btn_group_flex">
+								<div><button type="button" class="btn btn_gost btn_addrModify_pop" th:value="${deliveryAddr.custDelvAddrSq}" id="btn_addrModify_pop"><span>수정</span></button></div>
+								<div><button type="button" class="btn btn_dark btn_sel_delvAddr" th:value="${deliveryAddr.custDelvAddrSq}"><span>선택</span></button></div>
+							</div>
+							
+							<input type="hidden" name="recipNm" 			th:value="${deliveryAddr.recipNm}"/>
+							<input type="hidden" name="recipPhnno" 			th:value="${deliveryAddr.recipPhnno}"/>
+							<input type="hidden" name="recipZipcode" 		th:value="${deliveryAddr.recipZipcode}"/>
+							<input type="hidden" name="recipBaseAddr" 		th:value="${deliveryAddr.recipBaseAddr}"/>
+							<input type="hidden" name="recipDtlAddr" 		th:value="${deliveryAddr.recipDtlAddr}"/>
+							<input type="hidden" name="delvMemo" 			th:value="${deliveryAddr.delvMemo}"/>
+						</div>
+					</th:block>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="modal-footer">
+		<button type="button" class="btn btn_dark" id="btn_adrsAdd_pop">
+			<span>배송지 추가</span>
+		</button>
+	</div>
+</form>
+
+<script th:inline="javascript">
+//컨텐츠 호출
+$(document).ready( function() {
+});
+
+// 2. 버튼기능구현
+// 2.1 배송지선택버튼
+$(".btn_sel_delvAddr").on("click", function(){
+	
+	// custDelvAddrSq 부모창으로 전달
+	var delvObj = {
+		"custDelvAddrSq"	: $(this).attr("value")
+		, "dispYn"			: "Y"
+		, "recipNm"			: $(this).parent().find("input[name=recipNm]").val()
+		, "recipPhnno"		: $(this).parent().find("input[name=recipPhnno]").val()
+		, "recipZipcode"	: $(this).parent().find("input[name=recipZipcode]").val()
+		, "recipBaseAddr"	: $(this).parent().find("input[name=recipBaseAddr]").val()
+		, "recipDtlAddr"	: $(this).parent().find("input[name=recipDtlAddr]").val()
+		, "delvMemo"		: $(this).parent().find("input[name=delvMemo]").val()
+	}
+	
+	// 부모장으로 값 전닫
+	deliveryAddrInfoSet(delvObj);
+	
+	// 팝업닫기
+	$(".close-modal").trigger("click");
+});
+
+// 2.2 배송지수정버튼
+$(".btn_addrModify_pop").on("click", function(){
+		
+	var obj = {
+		"custDelvAddrSq" : $(this).attr("value")
+	} 
+	
+	$.ajax( {
+		type		: "POST",
+		url 		: '/common/delvAddrModifyPop',
+		data		: JSON.stringify(obj),
+		dataType 	: 'html',
+		beforeSend : function(xhr, settings) {
+			xhr.setRequestHeader("AJAX"			, "true");
+			xhr.setRequestHeader('Accept'		, 'application/json');
+			xhr.setRequestHeader('Content-Type'	, 'application/json');
+			gagajf.showProgressbar(true);
+		},
+		success 	: function(result) {
+			$("#adrsModifyPop .modal-dialog .modal-content").html(result);
+			$("#adrsModifyPop").modal("show");
+		}
+	});	
+});
+
+
+// 2.3 배송지추가 팝업열기
+$('#btn_adrsAdd_pop').on("click", function(){
+	$.ajax( {
+		type		: "POST",
+		url 		: '/common/delvAddrAddPop',
+		data		: JSON.stringify(jsonObj),
+		dataType 	: 'html',
+		beforeSend : function(xhr, settings) {
+			xhr.setRequestHeader("AJAX"			, "true");
+			xhr.setRequestHeader('Accept'		, 'application/json');
+			xhr.setRequestHeader('Content-Type'	, 'application/json');
+			gagajf.showProgressbar(true);
+		},
+		success 	: function(result) {
+			$("#adrsAddPop .modal-dialog .modal-content").html(result);
+			$("#adrsAddPop").modal("show");
+		}
+	});	
+});
+
+
+
+
+
+
+</script>

+ 295 - 0
src/main/webapp/WEB-INF/views/mob/popup/DelvAddrModifyPopMob.html

@@ -0,0 +1,295 @@
+<form name="deliveryModifyForm" id="deliveryModifyForm">
+	<input type="hidden" class="form_control" name="custDelvAddrSq" th:value="${deliveryAddrInfo.custDelvAddrSq}">
+	
+	<div class="modal-header htop">
+		<h5 class="modal-title" id="adrsModifyLabel">배송지 수정</h5>
+	</div>
+	<div class="modal-body">
+		<div class="pop_cont">
+			<div class="inner wide">
+				<div class="tbl_wrap">
+					<div class="tbl tbl_dlvr">
+						<table>
+							<colgroup>
+								<col width="*">
+							</colgroup>
+							<tbody>
+								<tr>
+									<td>
+										<span class="sr-only">받는분</span>
+										<input type="text"class="form_control" name="recipNm" placeholder="받는분" th:value="${deliveryAddrInfo.recipNm}">
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<span class="sr-only">휴대폰 번호</span>
+										<input type="text" class="form_control" name="recipPhnno" placeholder="휴대폰 번호" th:value="${deliveryAddrInfo.recipPhnno}">
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<span class="sr-only">배송 주소</span>
+										<div class="input_wrap">
+											<input type="hidden" name="recipZipcode" placeholder="우편번호" th:value="${deliveryAddrInfo.recipZipcode}" readonly="readonly">
+											<input type="hidden" class="form_control" name="recipBaseAddr" placeholder="기본주소"th:value="${deliveryAddrInfo.recipBaseAddr}" readonly="readonly">
+							
+											<input type="text" class="form_control" placeholder="배송주소" name="recipAddr" th:value="${deliveryAddrInfo.recipZipcode} + '    '+ ${deliveryAddrInfo.recipBaseAddr}" readonly="readonly">
+											<input type="text" class="form_control" placeholder="상세주소" name="recipDtlAddr" th:value="${deliveryAddrInfo.recipDtlAddr}">
+											<button type="button" class="btn btn_sch" onclick="fnOpenDaumAddr();">
+												<span class="sr-only">우편번호 찾기</span>
+											</button>
+										</div>
+										<div class="default_addrs">
+											<div class="form_field">
+												<th:block th:if="${deliveryAddrInfo.defaultYn} == 'Y'">
+													<input id="chk-default-addrs" type="checkbox" name="defaultYn" checked>
+												</th:block>
+												<th:block th:if="${deliveryAddrInfo.defaultYn} == 'N'">
+													<input id="chk-default-addrs" type="checkbox" name="defaultYn">
+												</th:block>
+												<label for="chk-default-addrs"><span>기본배송지로 등록</span></label>
+											</div>
+										</div>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+				<div class="tbl_wrap">
+					<div class="tbl_tit">
+						<h3>배송 요청사항</h3>
+					</div>
+					<div class="tbl tbl_request">
+						<table>
+							<colgroup>
+								<col width="*">
+							</colgroup>
+							<tbody>
+								<tr>
+									<th class="sr-only">문 앞</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-1" value="문 앞">
+											<label for="rdi-1"><span>문 앞</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">직접 받고 부재 시 문 앞</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-2" value="직접 받고 부재 시 문 앞">
+											<label for="rdi-2"><span>직접 받고 부재 시 문 앞</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">경비실</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-3" value="경비실"><label
+												for="rdi-3"><span>경비실</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">택배함</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-4" value="택배함">
+											<label for="rdi-4"><span>택배함</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">기타사항</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-5" value="5">
+											<label for="rdi-5"><span>기타사항</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">보관 장소만 입력(필수)</th>
+									<td>
+										<div class="form_text">
+											<input type="text" name="delvMemoText"  placeholder="보관 장소만 입력 (필수)" maxlength="30" disabled>
+											<p class="desc_txt">보관 장소 외 다른 내용 입력시 통보 없이 삭제 될 수 있습니다.</p>
+										</div>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="modal-footer">
+		<button type="button" class="btn btn_dark" id="btn_delivery_modi_save"><span>배송지 등록</span></button>
+	</div>
+</form>
+
+<script th:inline="javascript">
+var delvMemo = [[${deliveryAddrInfo.delvMemo}]];
+//컨텐츠 호출
+$(document).ready( function() {
+	
+	var delvMemoArr = ["문 앞", "직접받고 부재시 문 앞", "경비실", "택배함"];
+	var tempMemo = true;
+	
+	// 배송요청사항설정
+	for (i=0 ; i<delvMemoArr.length ; i++) {
+		if (delvMemoArr[i] == delvMemo) {
+			tempMemo = false;
+		}
+	}
+	
+	if (tempMemo) {
+		$("#deliveryModifyForm input[name=rdi-request1]").eq(4).attr("checked", true);
+		$("#deliveryModifyForm input[name=delvMemoText]").attr("disabled", false);
+		$("#deliveryModifyForm input[name=delvMemoText]").val(delvMemo);
+	}
+	
+	$("#deliveryModifyForm input[name=rdi-request1]").each(function(){
+		var temp = $(this).parent().find('span').text();
+		if (delvMemo == temp) {
+			$(this).attr("checked", true);
+		}
+	});
+	
+	// 배송요청사항 버튼기능
+	$("#deliveryModifyForm input[name=rdi-request1]").each(function(){
+		// 버튼기능
+		$(this).on("click", function(){
+			var temp = $(this).parent().find('span').text();
+			$("#deliveryModifyForm input[name=delvMemoText]").val("");
+			if (temp == "기타사항") {
+				$("#deliveryModifyForm input[name=delvMemoText]").attr("disabled", false);
+			} else {
+				$("#deliveryModifyForm input[name=delvMemoText]").attr("disabled", true);
+			}
+		});
+	});
+});
+
+// 배송지등록버튼
+$("#btn_delivery_modi_save").on("click", function(){
+	
+	// 유효성체크
+	if (!deliveryModifyFormCheck()){
+		return false;
+	}
+	
+	// 기본배송지여부
+	var defaultYn = "N";
+	if ($("#deliveryModifyForm input[name=defaultYn]").is(":checked")) {
+		defaultYn = "Y";
+	}
+	
+	// 기타사항일때 텍스트 등록
+	var delvMemo = $("#deliveryModifyForm input[name=rdi-request1]:checked").parent().find('span').text();
+	if ("기타사항" == delvMemo) {
+		delvMemo = $("#deliveryModifyForm input[name=delvMemoText]").val();
+	}
+	
+	// 배송지정보설정
+	var jsonObj = {
+		"defaultYn"			: defaultYn
+		, "custDelvAddrSq"	: parseInt($("#deliveryModifyForm input[name=custDelvAddrSq]").val())
+		, "recipNm"			: $("#deliveryModifyForm input[name=recipNm]").val()
+		, "recipPhnno"		: $("#deliveryModifyForm input[name=recipPhnno]").val()
+		, "recipZipcode"	: $("#deliveryModifyForm input[name=recipZipcode]").val()
+		, "recipBaseAddr"	: $("#deliveryModifyForm input[name=recipBaseAddr]").val()
+		, "recipDtlAddr"	: $("#deliveryModifyForm input[name=recipDtlAddr]").val()
+		, "delvMemo"		: delvMemo
+	}
+	
+	var jsonData = JSON.stringify(jsonObj);
+	
+	$.ajax( {
+		type		: "POST",
+		url 		: '/common/updateCustDeliveryAddr',
+		data		: jsonData,
+		dataType 	: 'html',
+		beforeSend : function(xhr, settings) {
+			xhr.setRequestHeader("AJAX"			, "true");
+			xhr.setRequestHeader('Accept'		, 'application/json');
+			xhr.setRequestHeader('Content-Type'	, 'application/json');
+			gagajf.showProgressbar(true);
+		},
+		success 	: function(result) {
+			// custDelvAddrSq 부모창으로 전달
+			var delvObj = {
+				"custDelvAddrSq"	: parseInt($("#deliveryModifyForm input[name=custDelvAddrSq]").val())
+				, "dispYn"			: "Y"
+				, "recipNm"			: $("#deliveryModifyForm input[name=recipNm]").val()
+				, "recipPhnno"		: $("#deliveryModifyForm input[name=recipPhnno]").val()
+				, "recipZipcode"	: $("#deliveryModifyForm input[name=recipZipcode]").val()
+				, "recipBaseAddr"	: $("#deliveryModifyForm input[name=recipBaseAddr]").val()
+				, "recipDtlAddr"	: $("#deliveryModifyForm input[name=recipDtlAddr]").val()
+				, "delvMemo"		: delvMemo
+			}
+			
+			// 부모장으로 값 전닫
+			delvAddrSet(delvObj);
+			
+			// 팝업닫기
+			$(".close-modal").trigger("click");
+		}
+	});
+});
+
+// 유효성체크 함수
+var deliveryModifyFormCheck = function() {
+	// TODO 유효성 체크 추가
+	if (gagajf.isNull($("#deliveryModifyForm input[name=recipNm]").val())) {
+		mcxDialog.alert("이름을 입력해주세요.");
+		$('#deliveryModifyForm input[name=custNm]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryModifyForm input[name=recipZipcode]").val())) {
+		mcxDialog.alert("배송주소를 입력해주세요.");
+		$('#deliveryModifyForm input[name=recipAddr]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryModifyForm input[name=recipBaseAddr]").val())) {
+		mcxDialog.alert("배송주소를 입력해주세요.");
+		$('#deliveryModifyForm input[name=recipAddr]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryModifyForm input[name=recipDtlAddr]").val())) {
+		mcxDialog.alert("상세주소를 입력해주세요.");
+		$('#deliveryModifyForm input[name=recipDtlAddr]').focus();
+		return false;
+	}
+	
+	return true;
+}
+
+// 우편번호 DAUM을 이용한 우편번호 팝업 레이어
+var fnOpenDaumAddr = function() {
+	$("body").css("overflow", "hidden");
+	
+	let daumZip = new daum.Postcode({
+		oncomplete: function(data) {
+			$('#deliveryModifyForm input[name=recipAddr]').val(data.zonecode + '    ' + cfnGetDaumRoadAddr(data));
+			$('#deliveryModifyForm input[name=recipZipcode]').val(data.zonecode);
+			$('#deliveryModifyForm input[name=recipBaseAddr]').val(cfnGetDaumRoadAddr(data));
+			$('#deliveryModifyForm input[name=recipDtlAddr]').focus();
+			
+			cfnCloseDaumAddr();
+			
+			$("#adrsModifyPop").modal("show");
+		},
+		width: '100%'
+	});
+	
+	cfnOpenDaumAddr(daumZip);
+}
+</script>

+ 475 - 0
src/main/webapp/WEB-INF/views/web/display/LookbookDetailFormWeb.html

@@ -0,0 +1,475 @@
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org"
+	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+	layout:decorator="web/common/layout/DefaultLayoutWeb">
+<!--
+ *******************************************************************************
+ * @source  : LookbookDetailFormWeb.html
+ * @desc    : 룩북 상세 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.04.06   bin2107     최초 작성
+ *******************************************************************************
+ -->
+<body>
+
+<th:block layout:fragment="content">
+	<div id="container" class="container br">
+		<div class="breadcrumb">
+			<ul>
+				<li class="bread_home"><a href="index.html">홈</a></li>
+				<li class="bread_2depth">TBJ</li>
+				<li class="bread_3depth">룩북</li>
+			</ul>
+		</div>
+		<div class="wrap">
+			<div class="content br_lookbook_view cont_visual"> <!-- 페이지특정 클래스 = br_lookbook_view -->
+				<div class="cont_head">
+					<h3 class="displayH t_c">2020 F/W COLLECTION</h3>
+				</div>
+				<div class="cont_body">
+					<div class="area_slider">
+						<div class="swiper-container">
+							<div class="swiper-wrapper">
+								<div class="swiper-slide">
+									<div class="bt_lb_item">
+										<img class="vLHTC lb_img" src="/images/pc/thumb/br_lookbook_img01.jpg" alt="BLUE-a" />
+										<div class="item_picker" style="left:20%; top:44%;">
+											<button type="button" id="btn_picker_item01"><span class="ico ico_picker"></span></button>
+											<div class="pick_descr">
+												<a href="">
+													상품명11
+												</a>
+											</div>
+										</div>
+										<div class="item_picker" style="left:60%; top:30%;">
+											<button type="button" id="btn_picker_item01"><span class="ico ico_picker"></span></button>
+											<div class="pick_descr">
+												<a href="">
+													상품명12
+												</a>
+											</div>
+										</div>
+									</div>
+								</div>
+								<div class="swiper-slide">
+									<div class="bt_lb_item">
+										<img class="vLHTC lb_img" src="/images/pc/thumb/br_lookbook_img02.jpg" alt="BLUE-a" />
+										<div class="item_picker" style="left:20%; top:44%;">
+											<button type="button" id="btn_picker_item01"><span class="ico ico_picker"></span></button>
+											<div class="pick_descr">
+												<a href="">
+													상품명21
+												</a>
+											</div>
+										</div>
+										<div class="item_picker" style="left:60%; top:30%;">
+											<button type="button" id="btn_picker_item01"><span class="ico ico_picker"></span></button>
+											<div class="pick_descr">
+												<a href="">
+													상품명22
+												</a>
+											</div>
+										</div>
+									</div>
+								</div>
+								<div class="swiper-slide">
+									<div class="bt_lb_item">
+										<img class="vLHTC lb_img" src="/images/pc/thumb/br_lookbook_img03.jpg" alt="BLUE-a" />
+										<div class="item_picker" style="left:20%; top:44%;">
+											<button type="button" id="btn_picker_item01"><span class="ico ico_picker"></span></button>
+											<div class="pick_descr">
+												<a href="">
+													상품명31
+												</a>
+											</div>
+										</div>
+										<div class="item_picker" style="left:60%; top:30%;">
+											<button type="button" id="btn_picker_item01"><span class="ico ico_picker"></span></button>
+											<div class="pick_descr">
+												<a href="">
+													상품명32
+												</a>
+											</div>
+										</div>
+									</div>
+								</div>
+								<div class="swiper-slide">
+									<div class="bt_lb_item">
+										<img class="vLHTC lb_img" src="/images/pc/thumb/br_lookbook_img04.jpg" alt="BLUE-a" />
+										<div class="item_picker" style="left:20%; top:44%;">
+											<button type="button" id="btn_picker_item01"><span class="ico ico_picker"></span></button>
+											<div class="pick_descr">
+												<a href="">
+													상품명41
+												</a>
+											</div>
+										</div>
+										<div class="item_picker" style="left:60%; top:30%;">
+											<button type="button" id="btn_picker_item01"><span class="ico ico_picker"></span></button>
+											<div class="pick_descr">
+												<a href="">
+													상품명42
+												</a>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="swiper-button-prev"></div>
+							<div class="swiper-button-next"></div>
+						</div>
+					</div>
+					<div class="text_cont">
+						국내 대표 패션기업 한세엠케이의 스타일리시 어반 캐주얼 브랜드 앤듀(ANDEW)가 중성적이고 시크한 감각을 극대화한 2020 F/W 시즌 룩북을 공개했다.<br>
+						앤듀는 올 하반기 정소현, 안재형, 고웅호 등 글로벌 런웨이 무대에서 활약중인 전문 패션 모델들과 함께 성별의 경계를 뛰어넘어 개개인의 개성을 드러내는 젠더뉴트럴 패션을 앤듀만의 감각으로 새롭게 전개한다. 중성적인 매력을 자아내는 3명의 모델들은 각자의 개성과 매력을 뽐내며 세련미를 더한 젠더리스 감성을 한층 더 완성도 있게 소화해 눈길을 끈다. 공개된 룩북에서는 따뜻하고 부드러운 파스텔톤, 차분한 모노크롬 컬러로 극명하게 상반된 분위기를  연출하며 각기 다른 유니섹스 스타일을 선보였다. 격식을 갖추되 포멀하진 않게 자연스럽게 떨어지는 핏과 힙한 디자인을 통해 앤듀만의 젠더뉴트럴 캐주얼룩을 연출한 것. 또한, 이번 시즌에도 패션업계에 불고 있는 ‘필(必)환경’  트렌드에 따라 그린슈머들을 사로잡을 다양한 친환경적인 제품들을 주력으로 출시하며 지속가능한 패션을 실천할 계획이다. 버려진 페트병이나 플라스틱을 활용해 친환경 재생 섬유인 리사이클 페트(PET)원사로 의상을 제작하고, 동물친화적 비건 소재를 활용해 가치소비가 가능할 수 있도록 구성했다.
+					</div>
+				</div>
+			</div>
+			<div class="content br_lookbook_view cont_items">
+				<div class="cont_head">
+					<h3>룩북 속 상품<span class="number">(9,999)</span></h3>
+					<button class="btn btn_primary"><span>모두 쇼핑백 담기</span></button>
+				</div>
+				<div class="cont_body">
+					<div class="area_slider">
+						<div class="swiper-container">
+							<div class="swiper-wrapper">
+								<div class="swiper-slide">
+									<div class="item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
+												</div>
+												<p class="itemBrand">BRAND NAME1</p>
+												<div class="itemName">남성 로고 자카드 방풍 패딩</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class="itemPercent">10%</span>
+												</p>
+											</a>
+										</div>
+									</div>
+								</div>
+								<div class="swiper-slide">
+									<div class="item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
+												</div>
+												<p class="itemBrand">BRAND NAME1</p>
+												<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class="itemPercent">10%</span>
+												</p>
+											</a>
+										</div>
+									</div>
+								</div>
+								<div class="swiper-slide">
+									<div class="item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
+												</div>
+												<p class="itemBrand">BRAND NAME1</p>
+												<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class="itemPercent">10%</span>
+												</p>
+											</a>
+										</div>
+									</div>
+								</div>
+								<div class="swiper-slide">
+									<div class="item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
+												</div>
+												<p class="itemBrand">BRAND NAME1</p>
+												<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class="itemPercent">10%</span>
+												</p>
+											</a>
+										</div>
+									</div>
+								</div>
+								<div class="swiper-slide">
+									<div class="item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
+												</div>
+												<p class="itemBrand">BRAND NAME1</p>
+												<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class="itemPercent">10%</span>
+												</p>
+											</a>
+										</div>
+									</div>
+								</div>
+								<div class="swiper-slide">
+									<div class="item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
+												</div>
+												<p class="itemBrand">BRAND NAME1</p>
+												<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class="itemPercent">10%</span>
+												</p>
+											</a>
+										</div>
+									</div>
+								</div>
+								<div class="swiper-slide">
+									<div class="item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
+												</div>
+												<p class="itemBrand">BRAND NAME1</p>
+												<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class="itemPercent">10%</span>
+												</p>
+											</a>
+										</div>
+									</div>
+								</div>
+								<div class="swiper-slide">
+									<div class="item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
+												</div>
+												<p class="itemBrand">BRAND NAME1</p>
+												<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class="itemPercent">10%</span>
+												</p>
+											</a>
+										</div>
+									</div>
+								</div>
+							</div>
+							<!-- Add Scrollbar -->
+							<div class="swiper-scrollbar"></div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="content br_lookbook_view cont_others">
+				<div class="cont_head">
+					<h3 class="subH1 t_c mb40">다른 룩북 보기</h3>
+					<button><span>전체보기</span></button>
+				</div>
+				<div class="cont_body">
+					<div class="area_slider">
+						<div class="swiper-container">
+							<div class="swiper-wrapper">
+								<div class="swiper-slide">
+									<a href="">
+										<div class="thumb">
+											<img src="/images/pc/thumb/ev_list_img01.jpg" alt="">
+										</div>
+										<div class="txt">
+											<p class="title">2020 F/W COLLECTION 2020</p>
+										</div>
+									</a>
+								</div>
+								<div class="swiper-slide">
+									<a href="">
+										<div class="thumb">
+											<img src="/images/pc/thumb/ev_list_img02.jpg" alt="">
+										</div>
+										<div class="txt">
+											<p class="title">2020 S/S COLLECTION</p>
+										</div>
+									</a>
+								</div>
+								<div class="swiper-slide">
+									<a href="">
+										<div class="thumb">
+											<img src="/images/pc/thumb/ev_list_img03.jpg" alt="">
+										</div>
+										<div class="txt">
+											<p class="title">2019 F/W COLLECTION 2019 F/W COLLECTION</p>
+										</div>
+									</a>
+								</div>
+								<div class="swiper-slide">
+									<a href="">
+										<div class="thumb">
+											<img src="/images/pc/thumb/ev_list_img04.jpg" alt="">
+										</div>
+										<div class="txt">
+											<p class="title">2019 S/S COLLECTION</p>
+										</div>
+									</a>
+								</div>
+								<div class="swiper-slide">
+									<a href="">
+										<div class="thumb">
+											<img src="/images/pc/thumb/ev_list_img05.jpg" alt="">
+										</div>
+										<div class="txt">
+											<p class="title">2018 F/W COLLECTION</p>
+										</div>
+									</a>
+								</div>
+								<div class="swiper-slide">
+									<a href="">
+										<div class="thumb">
+											<img src="/images/pc/thumb/ev_list_img06.jpg" alt="">
+										</div>
+										<div class="txt">
+											<p class="title">2018 S/S COLLECTION</p>
+										</div>
+									</a>
+								</div>
+								<div class="swiper-slide">
+									<a href="">
+										<div class="thumb">
+											<img src="/images/pc/thumb/ev_list_img07.jpg" alt="">
+										</div>
+										<div class="txt">
+											<p class="title">2017 F/W COLLECTION</p>
+										</div>
+									</a>
+								</div>
+								<div class="swiper-slide">
+									<a href="">
+										<div class="thumb">
+											<img src="/images/pc/thumb/ev_list_img08.jpg" alt="">
+										</div>
+										<div class="txt">
+											<p class="title">2017 S/S COLLECTION 2017 S/S COLLECTION</p>
+										</div>
+									</a>
+								</div>
+							</div>
+						</div>
+						<!-- Add Arrows -->
+						<div class="swiper-button-next"></div>
+						<div class="swiper-button-prev"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- 상단_LOOKBOOK_picker_상품_팝업 -->
+	<div class="modal fade br_pop lookbook_item_pop" id="lookbookItemPop" tabindex="-1" role="dialog" aria-labelledby="lookbook_item_label" aria-hidden="true">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title sr-only" id="lookbook_item_label">상품정보</h5>
+				</div>
+				<div class="modal-body">
+					<div class="itemsGrp">
+						<div class="item_prod">
+							<div class="item_state">
+								<div class="itemLink">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/ev_list_img05.jpg">
+									</div>
+									<p class="itemBrand">BRAND NAME</p>
+									<div class="itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>
+									<span class="itemPrice_original">89,000</span>
+									<p class="itemPrice">80,100
+										<span class="itemPercent">10%</span>
+									</p>
+									<button type="button" class="btn btn_default"><span>자세히 보기</span></button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<!-- //상단_LOOKBOOK_picker_상품_팝업 -->
+
+	<script th:inline="javascript">
+/*<![CDATA[*/
+	// 컨텐츠 호출
+	$(document).ready( function() {
+		/* 슬라이드 - 상단_LOOKBOOK */
+		var lookbook_visual_slide = new Swiper('.br_lookbook_view.cont_visual .swiper-container', {
+			loop: true,
+			slidesPerView: 'auto',
+			spaceBetween: 20,
+			speed : 800,
+			autoWidth: true,
+			autoHeight: true,
+			centeredSlides: true,
+			autoplay: false,
+			navigation: {
+				nextEl: '.br_lookbook_view.cont_visual .swiper-button-next',
+				prevEl: '.br_lookbook_view.cont_visual .swiper-button-prev',
+			},
+			pagination: {
+				el: '.br_lookbook_view.cont_visual .swiper-pagination',
+				clickable: true,
+			},
+		});
+
+		/* 슬라이드 - 룩북 속 상품 */
+		var togetherItemSwiper = new Swiper('.br_lookbook_view.cont_items .swiper-container', {
+			slidesPerView: 6,
+			spaceBetween: 20,
+			scrollbar: {
+				el: '.br_lookbook_view.cont_items .swiper-scrollbar',
+				hide: true,
+			},
+		});
+
+
+		var br_ohter_slide = new Swiper('.br_lookbook_view.cont_others .swiper-container', {
+			slidesPerView: 5,
+			spaceBetween: 20,
+			navigation: {
+				nextEl: '.br_lookbook_view.cont_others .swiper-button-next',
+				prevEl: '.br_lookbook_view.cont_others .swiper-button-prev',
+			},
+		});
+
+		// 슬라이드 - 상단_LOOKBOOK > picker - 룩북_피커_상품정보 팝업
+		$(document).on('click','#btn_picker_item01',function(e){
+			$("#lookbookItemPop").modal("show");
+			return false;
+		});
+	});
+
+/*]]>*/
+</script>
+
+</th:block>
+
+</body>
+</html>

+ 285 - 0
src/main/webapp/WEB-INF/views/web/mypage/ChangeOptionPopupFormWeb_20210406.html

@@ -0,0 +1,285 @@
+<!-- 배송지변경 팝업 -->
+<div class="modal-header">
+	<h5 class="modal-title" id="exchangeLabel">교환상품 옵션 변경</h5>
+</div>
+<div class="modal-body">
+	<div class="pop_cont">
+		<form class="form_wrap">
+			<div class="select_option_area">
+				<h6>옵션 변경 상품 선택</h6>
+				<div class="form_field">
+					<div th:if="${exchangeOptionInfo}" th:each="oneData, status : ${exchangeOptionInfo}">
+						<input th:id="|chk_exchange_item_${oneData.ordDtlItemSq}|" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}" type="checkbox" onclick="fnSelectOptionChange(this);"><label th:for="|chk_exchange_item_${oneData.ordDtlItemSq}|"><span th:text="|${oneData.itemNm} / ${oneData.colorNm} / ${oneData.optCd2}|"></span></label>
+					</div>
+				</div>
+			</div>
+			<div class="modify_option_area" id="modifyOptionArea" style="display:none">
+				<th:block th:if="${exchangeOptionInfo}" th:each="oneData, status : ${exchangeOptionInfo}">
+					<th:block th:if="${chgQty > 0}" th:each="num, index  : ${#numbers.sequence(1,chgQty)}">
+						<div class="modify_box" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}" style="display:none">
+							<div class="name_blk" th:text="|${oneData.itemNm} / ${oneData.colorNm}|"></div>
+							<div class="select_blk">
+								<!-- 옵션교환 라디오 형태 -->
+								<div class="sel_radio" th:if="${oneData.selfGoodsYn == 'Y'}">
+									<input type="hidden" name="chgOptCd2" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, itemNm=${oneData.itemNm}, colorNm=${oneData.colorNm}, orgOptCd2=${oneData.optCd2}, goodsType=${oneData.goodsType}, num=${num}">
+									<div th:class="|form_field ${oneData.ordDtlItemSq}|">
+										<div th:if="${oneData.optCd2Arr.length > 0}" th:each="option, idx : ${oneData.optCd2Arr}">
+											<input type="radio" th:name="|${oneData.ordDtlItemSq}_${num}|" th:id="|${oneData.ordDtlItemSq}_${option}_${num}|" th:value="${option}" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}" th:disabled="${#numbers.formatInteger(oneData.currStockQtyArr[idx.index], 0)} <= 0 or ${oneData.soldoutYnArr[idx.index] == 'Y'}" onclick="fnRadioOption(this);">
+											<label th:for="|${oneData.ordDtlItemSq}_${option}_${num}|"><span th:text="${option}"></span></label>
+										</div>
+									</div>
+								</div>
+								<!-- //옵션교환 라디오 형태 -->
+								<!-- 옵션교환 셀렉트박스 형태 -->
+								<div class="sel_select" th:unless="${oneData.selfGoodsYn == 'Y'}">
+									<div class="form_field">
+										<div class="select_custom exchange_option">
+											<div class="combo">
+												<input type="hidden" name="chgOptCd2" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, itemNm=${oneData.itemNm}, colorNm=${oneData.colorNm}, orgOptCd2=${oneData.optCd2}, goodsType=${oneData.goodsType}, num=${num}">
+												<div class="select">옵션 선택</div>
+												<ul class="list">
+													<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가  -->
+													<li class="selected" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}, optCd2=''" onclick="fnSelectOption(this);">옵션 선택</li>
+													<th:block th:each="option, idx : ${oneData.optCd2Arr}">
+														<li th:if="${oneData.optCd2Arr.length} > 0 and (${#numbers.formatInteger(oneData.currStockQtyArr[idx.index],0)} <= 0 or ${oneData.soldoutYnArr[idx.index]} == 'Y')" th:text="${option}" aria-disabled="true" data-soldout="true" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}, optCd2=''" onclick="fnSelectOption(this);"></li>
+														<li th:if="${oneData.optCd2Arr.length} > 0 and ${#numbers.formatInteger(oneData.currStockQtyArr[idx.index],0)} > 0 and ${oneData.soldoutYnArr[idx.index]} == 'N'" th:text="${option}" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}, optCd2=${option}" onclick="fnSelectOption(this);"></li>
+													</th:block>
+												</ul>
+											</div>
+										</div>
+									</div>
+								</div>
+								<!-- //옵션교환 셀렉트박스 형태 -->
+							</div>
+							<div class="allcheck_blk" th:if="${num} == 1">
+								<div class="form_field">
+									<div>
+										<input th:id="|${oneData.ordDtlItemSq}_checkAll|" name="chk_exchange_all1" type="checkbox" checked="" onclick="fnSelectOptionChange();"><label th:for="|${oneData.ordDtlItemSq}_checkAll|"><span>선택 옵션으로 전체 교환</span></label>
+									</div>
+								</div>
+							</div>
+						</div>
+					</th:block>
+				</th:block>
+			</div>
+		</form>
+	</div>
+</div>
+<div class="modal-footer">
+	<button type="button" id="" class="btn btn_dark" onclick="fnSaveOption();"><span>옵션 저장</span></button>
+</div>
+<script th:inline="javascript">
+	let exchangeOptionInfo = [[${exchangeOptionInfo}]];
+	let oneData = [[${oneData}]];
+	let chgQty = [[${chgQty}]];
+	let checkedOrdDtlItemSqArr = [];
+
+	$(document).ready( function() {
+		// 셀렉트박스 활성화
+		$('#exchangePop .select_custom.exchange_option').each(function() {
+			new sCombo($(this));
+		});
+	});
+
+	// 구성상품 선택 및 전체 적용 클릭 이벤트
+	var fnSelectOptionChange = function() {
+		checkedOrdDtlItemSqArr = [];
+		let cnt = 0;
+		
+		// 체크 수량 조회
+		$.each($('.select_option_area .form_field input:checkbox'), function(idx, item) {
+			if ($(item).is(':checked')) {
+				checkedOrdDtlItemSqArr.push($(item).attr('ordDtlItemSq'));
+				cnt++;
+			}
+		});
+
+		// 옵션변경영역 처리
+		if (cnt > 0) {
+			$('#modifyOptionArea').css('display', '');
+		} else {
+			$('#modifyOptionArea').css('display', 'none');
+		}
+
+		$.each($('.modify_box'), function(idx, item) {
+			let ordDtlItemSq = $(item).attr('ordDtlItemSq');
+			let num = $(item).attr('num');
+			let id = '#' + ordDtlItemSq + '_checkAll';
+
+			if (checkedOrdDtlItemSqArr.includes(ordDtlItemSq)) {
+				if (num == 1) {
+					$(item).css('display', '');
+
+					if (oneData.selfGoodsYn == 'Y') {
+						$.each($(item).find('input:radio'), function (index, radio) {
+							if ($(radio).is(':checked')) {
+								$(radio).click();
+							}
+						});
+					} else {
+						$.each($(item).find('li'), function (index, radio) {
+							if ($(radio).hasClass('selected')) {
+								$(radio).click();
+							}
+						});
+					}
+				} else if ($(id).is(':checked')) {
+					$(item).css('display', 'none');
+				} else {
+					$(item).css('display', '');
+				}
+			} else {
+				$(item).css('display', 'none');
+			}
+		});
+
+		fnChangeCss();
+	}
+
+	// 라디오 클릭 이벤트
+	var fnRadioOption = function(param) {
+		let ordDtlItemSq = $(param).attr('ordDtlItemSq');
+		let num = $(param).attr('num');
+		let optCd2 = $(param).val();
+		let checkAllId = '#' + ordDtlItemSq + '_checkAll';
+		let radioId = '.' + ordDtlItemSq + ' input:radio';
+
+		$(param).parent().parent().parent().find('input[name=chgOptCd2]').val(optCd2);
+
+		if (num == 1 && $(checkAllId).is(':checked')) {
+			$.each($(radioId), function(idx, item) {
+				if ($(item).attr('num') != 1 && optCd2 == $(item).val()) {
+					$(item).click();
+				}
+			});
+		}
+	}
+
+	// 셀렉트박스 클릭 이벤트
+	var fnSelectOption = function(param) {
+		let ordDtlItemSq = $(param).attr('ordDtlItemSq');
+		let num = $(param).attr('num');
+		let optCd2 = $(param).attr('optCd2');
+		let checkAllId = '#' + ordDtlItemSq + '_checkAll';
+
+		$(param).parent().parent().find('input[name=chgOptCd2]').val(optCd2);
+
+		if (num == 1 && $(checkAllId).is(':checked')) {
+			$.each($('.exchange_option li'), function(idx, item) {
+				if ($(item).attr('num') != 1 && optCd2 == $(item).attr('optCd2')) {
+					$(item).click();
+				}
+			});
+		}
+	}
+	
+	// 옵션 저장 버튼 클릭 이벤트
+	var fnSaveOption = function() {
+		// 옵션 선택 여부 확인
+		if (checkedOrdDtlItemSqArr.length <= 0) {
+			mcxDialog.alert('교환 옵션을 선택해주세요.');
+			return false;
+		}
+
+		// 변경 옵션 처리
+		let dataArr = [];
+		let ordDtlItemSq = 0;
+		let colorNm = '';
+		let itemNm = '';
+		let goodsType = '';
+		let chgOptCd2Arr = [];
+		let selectOptionCheck = true;
+
+		$.each($('input[name=chgOptCd2]'), function(idx, item) {
+			let chgOrdDtlItemSq = $(item).attr('ordDtlItemSq');
+			colorNm = $(item).attr('colorNm');
+			itemNm = $(item).attr('itemNm');
+			goodsType = $(item).attr('goodsType');
+			let changeYn = checkedOrdDtlItemSqArr.includes(chgOrdDtlItemSq)
+			let chgOptCd2 = changeYn ? $(item).val() : $(item).attr('orgOptCd2');
+			let chgOptCd2Obj = {};
+			chgOptCd2Obj.chgOptCd2 = chgOptCd2;
+			chgOptCd2Obj.qty = 1;
+
+			if (ordDtlItemSq != Number(chgOrdDtlItemSq)) {
+				if (idx > 0) {
+					let data = {};
+					data.ordDtlNo = oneData.ordDtlNo;
+					data.ordDtlItemSq = ordDtlItemSq;
+					data.chgQty = chgQty;
+					data.colorNm = colorNm;
+					data.itemNm = itemNm;
+					data.goodsType = goodsType;
+					data.chgOptCd2Arr = fnOptionCount(chgOptCd2Arr);
+					dataArr.push(data);
+				}
+
+				ordDtlItemSq = chgOrdDtlItemSq;
+				chgOptCd2Arr = [];
+			}
+
+			chgOptCd2Arr.push(chgOptCd2Obj);
+
+			
+
+			// 옵션 선택 여부 설정
+			if (changeYn && gagajf.isNull($(item).val())) {
+				selectOptionCheck = false;
+			}
+		});
+
+		// 옵션 선택 여부 체크
+		if (!selectOptionCheck) {
+			mcxDialog.alert('교환 옵션을 선택해주세요.');
+			return false;
+		}
+
+		let data = {};
+		data.ordDtlNo = oneData.ordDtlNo;
+		data.ordDtlItemSq = ordDtlItemSq;
+		data.chgQty = chgQty;
+		data.colorNm = colorNm;
+		data.itemNm = itemNm;
+		data.goodsType = goodsType;
+		data.chgOptCd2Arr = fnOptionCount(chgOptCd2Arr);
+		dataArr.push(data);
+
+		fnChangeOptionCallback(dataArr)
+
+		$('.close-modal').trigger('click');
+	}
+
+	// 변경 옵션별 수량 처리
+	var fnOptionCount = function(param) {
+		var result = [];
+		param.reduce(function(res, value) {
+			if (!res[value.chgOptCd2]) {
+				res[value.chgOptCd2] = { chgOptCd2: value.chgOptCd2, qty: 0 };
+				result.push(res[value.chgOptCd2])
+			}
+			res[value.chgOptCd2].qty += value.qty;
+			return res;
+		}, {});
+		
+		return result;
+	}
+
+	// 옵션 선택 영역 CSS 수정
+	var fnChangeCss = function() {
+		let index = 0;
+		$.each($('.modify_box'), function(idx, item) {
+			if ($(item).css('display') == 'block') {
+				index++;
+				if (index == 1) {
+					$(item).css('margin-top', '0');
+					$(item).css('padding-top', '0');
+					$(item).css('border-top', 'none');
+				} else {
+					$(item).css('margin-top', '30px');
+					$(item).css('padding-top', '30px');
+					$(item).css('border-top', '1px dashed #ddd');
+				}
+			}
+		});
+	}
+</script>

+ 373 - 0
src/main/webapp/WEB-INF/views/web/planning/PlanningCustGradeBenefitFormWeb.html

@@ -0,0 +1,373 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org"
+	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+	layout:decorator="web/common/layout/DefaultLayoutWeb">
+<!--
+ *******************************************************************************
+ * @source  : PlanningCustGradeBenefitFormWeb.html
+ * @desc    : 회원등급 혜택 Page
+ *============================================================================
+ * Pastelmall
+ * Copyright(C) 2021 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021. 04. 05     jsshin     최초 작성
+ *******************************************************************************
+ -->
+
+<body>
+<th:block layout:fragment="content">
+	<!--  container -->
+	<div id="container" class="container ev">
+		<div class="breadcrumb">
+			<ul>
+				<li class="bread_home"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
+				<li class="bread_2depth" ><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_EVENT_MAIN);">이벤트/혜택</a></li>
+				<li class="bread_2depth">회원등급 혜택</li>
+			</ul>
+		</div>
+		<div class="wrap">
+			<div class="content ev_rank">
+				<div class="cont_head">
+					<div>
+						<h3>회원등급 혜택</h3>
+					</div>
+				</div>
+				<div class="cont_body">
+					<div class="my_rank_info" th:if="${isLogin}"> <!-- 회원일 경우 -->
+						<div class="inner">
+							<div class="desc">
+								<p>
+									<span class="my_name" th:text="${customerInfo.custNm}">홍길동</span>님의<br />
+									이번 달 회원등급은<br />
+									<span class="my_rank" th:text="${customerInfo.custGradeNm}">GOLD</span> 입니다.
+								</p>
+								<button type="button" id="btnDownGradeCoupon" class="btn btn_dark cou_btn" >등급 쿠폰 다운로드</button>
+							</div>
+							<!-- 회원 등급 progress바 -->
+							<div class="my_rank_progress">
+								<div th:class="'pro_wrap '+${#strings.toLowerCase(customerInfo.custGradeNm)}"> <!-- welcome, bronze, silver, gold, vip 각각 클래스 넣으면 상태가 달라집니다. -->
+									<div class="rank_txt clear">
+										<ul class="clear">
+											<li>
+												<div class="icon welcome">
+													<span>W</span>
+												</div>
+												<div class="txt">
+													<span>WELCOME</span>
+												</div>
+											</li>
+											<li>
+												<div class="icon bronze">
+													<span>B</span>
+												</div>
+												<div class="txt">
+													<span>BRONZE</span>
+												</div>
+											</li>
+											<li>
+												<div class="icon silver">
+													<span>S</span>
+												</div>
+												<div class="txt">
+													<span>SILVER</span>
+												</div>
+											</li>
+											<li>
+												<div class="icon gold">
+													<span>G</span>
+												</div>
+												<div class="txt">
+													<span>GOLD</span>
+												</div>
+											</li>
+											<li>
+												<div class="icon vip">
+													<span>V</span>
+												</div>
+												<div class="txt">
+													<span>VIP</span>
+												</div>
+											</li>
+										</ul>
+									</div>
+									<div class="progress_bar">
+										<span class="current_bar"></span>
+									</div>
+								</div>
+								<div class="benefit_txt">
+									<p id="etcGrade">
+										<span id="ordSpan">	구매 건수 <strong id="ordCnt" class="c_primary" >0회</strong> </span>
+										<span id="realOrdAmtSpan">, 구매 금액 <strong id="realOrdAmt" class="c_primary">0원 </span>
+										</strong> 더 구매하시면 <strong>
+										<span id="nextGrde" class="c_black"></span>로 등급UP!</strong>
+									</p> <!-- 등급 상승까지 남은 정보 안내 -->
+									<p id="sameVipGrade" style="display: none;">
+										<strong>등급 유지 조건 달성!</strong> 다음달에도
+										<strong class="c_primary"><span>VIP</span> 등급 혜택</strong>을 받으실 수 있습니다.
+									</p>
+									<p id="vipGrade" style="display: none;">
+										<strong class="c_primary"><span>VIP</span> 등급 혜택</strong>을 받으실 수 있습니다.
+									</p>
+								</div>
+							</div>
+							<!-- //회원 등급 progress바 -->
+						</div>
+					</div>
+					<div class="my_rank_info no_member" th:unless="${isLogin}"> <!-- 비회원일 경우 -->
+						<div class="inner">
+							<p>
+								로그인 후 이번 달 나의 회원 등급을 확인하고 쿠폰혜택을 받아보세요.
+							</p>
+							<button type="button" class="btn btn_dark login_btn" onclick="cfnGoToPage(_PAGE_LOGIN);">로그인</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="content inner ev_benefit_tbl">
+				<div class="cont_head">
+					<h3>등급 혜택</h3>
+				</div>
+				<div class="cont_body">
+					<div class="rank_tbl_wrap inner">
+						<div class="tbl_wrap">
+							<table>
+								<caption>등급 혜택 표</caption>
+								<tr>
+									<th>회원등급</th>
+									<td>
+										<div class="icon vip"><span>V</span></div>
+										<span>VIP</span>
+									</td>
+									<td>
+										<div class="icon gold"><span>G</span></div>
+										<span>GOLD</span>
+									</td>
+									<td>
+										<div class="icon silver"><span>S</span></div>
+										<span>SILVER</span>
+									</td>
+									<td>
+										<div class="icon bronze"><span>B</span></div>
+										<span>BRONZE</span>
+									</td>
+									<td>
+										<div class="icon welcome"><span>W</span></div>
+										<span>WELCOME</span>
+									</td>
+								</tr>
+								<tr class="td_30">
+									<th>선정기준</th>
+									<td>
+										<p>최근 3개월<br />30만원 또는6건 이상 구매</p>
+									</td>
+									<td>
+										<p>최근 3개월<br />20만원 또는4건 이상 구매</p>
+									</td>
+									<td>
+										<p>최근 3개월<br />10만원 또는2건 이상 구매</p>
+									</td>
+									<td>
+										<p>최근 3개월<br />1건 이상 구매</p>
+									</td>
+									<td>
+										<p>신규 회원 및<br />최근 3개월 미구매</p>
+									</td>
+								</tr>
+								<tr>
+									<th rowspan="2">혜택</th>
+									<td class="bbn">
+										<div class="cou_img"><img src="/images/pc/ico_coupon_12.png" alt="7% 할인 쿠폰"></div>
+										<p>최대 1만 5천원 할인<br>(3만원 이상 구매 시)</p>
+									</td>
+									<td class="bbn">
+										<div class="cou_img"><img src="/images/pc/ico_coupon_10.png" alt="12% 할인 쿠폰"></div>
+										<p>최대 1만 5천원 할인<br>(3만원 이상 구매 시)</p>
+									</td>
+									<td class="vt" rowspan="2">
+										<div class="cou_img"><img src="/images/pc/ico_coupon_7.png" alt="10% 할인 쿠폰"></div>
+										<p>최대 7천원 할인<br>(3만원 이상 구매 시)</p>
+									</td>
+									<td class="vt" rowspan="2">
+										<div class="cou_img"><img src="/images/pc/ico_coupon_5.png" alt="10% 할인 쿠폰"></div>
+										<p>최대 3천원 할인<br>(2만원 이상 구매 시)</p>
+									</td>
+									<td class="bbn">
+										<div class="cou_img"><img src="/images/pc/ico_coupon_15.png" alt="15% 할인 쿠폰"></div>
+										<p>최대 3만원 할인<br><strong>신규회원 한정 1회 발급</strong></p>
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<div class="cou_img"><img src="/images/pc/ico_coupon_20000.png" alt="20,000원 할인 쿠폰"></div>
+										<p>10만원 이상 구매 시</p>
+									</td>
+									<td>
+										<div class="cou_img"><img src="/images/pc/ico_coupon_15000.png" alt="15,000원 할인 쿠폰"></div>
+										<p>10만원 이상 구매 시</p>
+									</td>
+									<td>
+										<div class="cou_img"><img src="/images/pc/ico_coupon_3000.png" alt="15,000원 할인 쿠폰"></div>
+										<p>2만원 이상 구매 시</p>
+									</td>
+								</tr>
+								<tr>
+									<th>생일쿠폰</th>
+									<td>
+										<div class="cou_img"><img src="/images/pc/ico_coupon_15.png" alt="7% 할인 쿠폰"></div>
+										<p>최대 3만원 할인</p>
+									</td>
+									<td>
+										<div class="cou_img"><img src="/images/pc/ico_coupon_15.png" alt="12% 할인 쿠폰"></div>
+										<p>최대 2만원 할인</p>
+									</td>
+									<td>
+										<div class="cou_img"><img src="/images/pc/ico_coupon_15.png" alt="10% 할인 쿠폰"></div>
+										<p>최대 1만원 할인</p>
+									</td>
+									<td>
+										<div class="cou_img"><img src="/images/pc/ico_coupon_10.png" alt="10% 할인 쿠폰"></div>
+										<p>최대 1만원 할인</p>
+									</td>
+									<td>
+										<div class="cou_img"><img src="/images/pc/ico_coupon_15.png" alt="15% 할인 쿠폰"></div>
+										<p>최대 1만원 할인</p>
+									</td>
+								</tr>
+							</table>
+						</div>
+					</div>
+					<div class="announce_txt inner">
+						<div class="note_txt">
+							<img src="/images/pc/ico_content_find.png" alt="유의사항">
+							<p>유의사항</p>
+						</div>
+						<div class="announce_list">
+							<p class="tit">회원등급 안내사항</p>
+							<ul>
+								<li>회원등급은 직전 3개월의 구매금액 또는 구매건수 기준으로 산정되며, 익월 1일에 확정됩니다.</li>
+								<li>구매금액 1만원 미만의 구매건수는 SILVER등급 이상의 등급산정에서 제외됩니다.</li>
+								<li>주문 취소/반품 건에 대한 결제금액은 등급산정에서 제외됩니다.</li>
+								<li>구매금액은 구매확정건에 대한 순수주문금액(할인쿠폰, 스타일포인트, 배송비, 취소/반품 내역을 제외한 실결제금액)을 의미합니다.</li>
+								<li>신규회원 한정 할인쿠폰을 제외한 회원등급 쿠폰은 매월 1일 다운로드 가능합니다.</li>
+							</ul>
+							<p class="tit">생일쿠폰 안내사항</p>
+							<ul>
+								<li>등급 별 생일 쿠폰은 생일 당월 1일부터 말일까지 다운로드 가능합니다. (생일 당월의 기준은 회원정보 내 생년월일 정보를 기준으로 합니다.)</li>
+								<li>쿠폰이 지급되는 당월 말일까지 사용 가능합니다.</li>
+								<li>쿠폰 사용가능기간 내 미사용 시 소멸됩니다.</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+<script th:inline="javascript">
+/*<![CDATA[*/
+ 	let exptCustGrdeMap = [[${exptCustGrdeMap}]]
+	let custGradeNm = [[${customerInfo.custGradeNm}]];
+
+ 	var fnInit = function () {
+		let expctCustGrade = exptCustGrdeMap.expctCustGrade;	// 예상등급
+
+		//expctCustGrade.custGradeNo 10:VIP, 20: GOLD, 30:SILVER, 40:BRONZE, 50:WELCOME
+
+		// 예정등급이 VIP가 아닌경우
+		if (Number(expctCustGrade.gradeCdNo) > 10) {
+			let nextGradeNo = Number(expctCustGrade.gradeCdNo)-10;				// 다음등급번호
+			let nextCustGradePolicy = fnGetNextGradePolicyInfo(nextGradeNo);	// 다음등급정책정보
+			fnNextGradeCondition(nextCustGradePolicy, expctCustGrade);			// 다음조건 알림
+		} else {
+			fnDisplayVipText(expctCustGrade);
+		}
+
+	};
+
+ 	// 다음 등급정책
+ 	var fnGetNextGradePolicyInfo = function (nextGradeNo) {
+		let custGradePolicy = exptCustGrdeMap.custGradePolicy;	// 등급별정책
+		let nextCustGradePolicy;
+		$(custGradePolicy).each(function(idx, item) {
+			if (Number(item.gradeCdNo) === nextGradeNo ) {
+				nextCustGradePolicy = item;
+			}
+		});
+		return nextCustGradePolicy;
+	}
+
+	// 다음등급 조건 알림
+	var fnNextGradeCondition = function (nextCustGradePolicy, expctCustGrade) {
+		let $etcGrade = $('#etcGrade');
+		let $sameVipGrade = $('#sameVipGrade');
+		let $vipGrade = $('#vipGrade');
+		let $ordCnt = $('#ordCnt');
+		let $ordSpan = $('#ordSpan');
+		let $realOrdAmt = $('#realOrdAmt');
+		let $realOrdAmtSpan = $('#realOrdAmtSpan');
+		let $nextGrde = $('#nextGrde');
+
+		let remnantBuyAmt = 0;
+		if (nextCustGradePolicy.minBuyAmt > expctCustGrade.sumRealOrdAmt) {
+			remnantBuyAmt = nextCustGradePolicy.minBuyAmt - expctCustGrade.sumRealOrdAmt;
+		}
+
+		let remnantBuyCnt = 0;
+		if (nextCustGradePolicy.minBuyCnt > expctCustGrade.ordCnt) {
+			remnantBuyCnt = nextCustGradePolicy.minBuyCnt -  expctCustGrade.ordCnt;
+		}
+
+		$etcGrade.show();
+		$sameVipGrade.hide();
+		$vipGrade.hide();
+
+		if (remnantBuyAmt > 0) {
+			$realOrdAmtSpan.show()
+			$realOrdAmt.text(remnantBuyAmt.addComma()+'원');
+		} else {
+			$realOrdAmtSpan.hide()
+		}
+
+		if (remnantBuyCnt > 0) {
+			$ordSpan.show();
+			$ordCnt.text(remnantBuyCnt.addComma()+'회');
+		} else {
+			$ordSpan.hide();
+		}
+
+		if (remnantBuyAmt > 0 || remnantBuyCnt > 0) {
+			$nextGrde.text(nextCustGradePolicy.gradeCdNm);
+		}
+	}
+
+	// 기존 VIP / 새로운 VIP 구분
+	var fnDisplayVipText = function (expctCustGrade) {
+		let $etcGrade = $('#etcGrade');
+		let $sameVipGrade = $('#sameVipGrade');
+		let $vipGrade = $('#vipGrade');
+		$etcGrade.hide();
+		if (expctCustGrade.gradeCdNm === custGradeNm) {
+			$vipGrade.hide();
+			$sameVipGrade.show();
+		} else {
+			$sameVipGrade.hide();
+			$vipGrade.show();
+		}
+	}
+
+	$(document).ready(function() {
+
+		fnInit();
+
+	});
+
+/*]]>*/
+</script>
+
+</th:block>
+</body>
+</html>
+
+

+ 314 - 0
src/main/webapp/WEB-INF/views/web/planning/PlanningEventAttendFormWeb.html

@@ -0,0 +1,314 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org"
+	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+	layout:decorator="web/common/layout/DefaultLayoutWeb">
+<!--
+ *******************************************************************************
+ * @source  : PlanningEventAttendFormWeb.html
+ * @desc    : 이벤트 출석체크 Page
+ *============================================================================
+ * Pastelmall
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.4.6     sowon     최초 작성
+ *******************************************************************************
+ -->
+<body>
+<th:block layout:fragment="content">
+<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
+<!--  container -->
+	<div id="container" class="container dp">
+		<div class="breadcrumb">
+			<ul>
+				<li class="bread_home"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
+				<li class="bread_2depth"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_EVENT_MAIN);">이벤트/혜택</a></li>
+				<li class="bread_2depth" th:text="${planInfo.planNm}"></li>
+			</ul>
+		</div>
+		<div class="wrap">
+			<div class="content wide dp_detail_visual">
+				<div class="cont_head">
+					<div>
+						<h3 th:text="${planInfo.planNm}"></h3>
+						<div class="period">
+							<span th:text="${planInfo.dispStdt}"></span> ~ <span th:text="${planInfo.dispEddt}"></span>
+						</div>
+						<div class="shareSet">
+								<button class="btn_share" data-name="openShare">공유하기</button>
+								<div class="shareWrap">
+									<div id="layerShare" class="setShare open">
+										<span>
+											<button type="button" class="kk"
+												th:attr="onclick=|cfnSendToKakao('${stylelUrl+'/planning/detail/form?planSq='+planInfo.planSq}', '${planInfo.planNm}', '${planView+ '/'+planInfo.mainImg}');|">
+												<span>카카오톡</span>
+											</button>
+											<button type="button" class="fb"
+												th:attr="onclick=|sendSns('facebook', '${stylelUrl+'/planning/detail/form?planSq='+planInfo.planSq}', '${planInfo.planNm}', '', '');|">
+												<span>페이스북</span>
+											</button>
+											<button type="button" class="tw"
+												th:attr="onclick=|sendSns('twitter', '${stylelUrl+'/planning/detail/form?planSq='+planInfo.planSq}', '${planInfo.planNm+ '#style24몰'}', '', '');|">
+												<span>트위터</span>
+											</button>
+											<button type="button" class="url btn_copy">
+												<span>URL</span>
+											</button>
+										</span>
+									</div>
+								</div>
+					</div>
+				</div>
+				<div class="cont_body">
+                    <!-- 프로모션 출석체크 -->
+					<div class="stamp_event">
+						<div class="event_calander">
+							<div class="check_title">
+								<p>출석할수록 늘어나는 혜택!</p>
+								<div class="title"><strong>1월</strong> 출석체크</div>
+							</div>
+							<div class="check_info">
+								<span class="today">오늘</span>
+								<span class="complete">출석완료</span>
+							</div>
+							<div class="tbl_wrap">
+								<div class="my_attend_day">
+									<p>나의 출석 일수는?</p>
+									<span class="day">
+										<span>11</span>일
+									</span>
+								</div>
+								<div class="tbl">
+									<table>
+										<colgroup>
+											<col width="14.28%">
+											<col width="14.28%">
+											<col width="14.28%">
+											<col width="14.28%">
+											<col width="14.28%">
+											<col width="14.28%">
+											<col width="14.28%">
+										</colgroup>
+										<thead>
+											<tr>
+												<th>SUN</th>
+												<th>MON</th>
+												<th>TUE</th>
+												<th>WED</th>
+												<th>THU</th>
+												<th>FRI</th>
+												<th>SAT</th>
+											</tr>
+										</thead>
+										<tbody id="monthTbody">
+										   <!--  <th:block th:each="a, month : ${month}" id="month">
+											<tr>
+												<td>
+													<div class="date" th:text="${a.sun}"></div>
+												</td>	
+												<td>
+													<div class="date" th:text="${a.mon}"></div>
+												</td>	
+												<td>
+													<div class="date" th:text="${a.tue}"></div>
+												</td>	
+												<td>
+													<div class="date" th:text="${a.wed}"></div>
+												</td>	
+												<td>
+													<div class="date" th:text="${a.thu}"></div>
+												</td>	
+												<td>
+													<div class="date" th:text="${a.fri}"></div>
+												</td>	
+												<td>
+													<div class="date" th:text="${a.sat}"></div> unused
+												</td>											
+											</tr> 
+											</th:block> -->
+										</tbody>
+									</table>
+								</div>
+							</div>
+							<button type="button" class="btn btn_primary"><span>출석 체크</span></button>
+						</div>
+                        <div class="event_benefit">
+                            <p class="title">출석 일수에 따라 달라지는 혜택</p>
+                            <div class="benefit_con">
+                                <img src="/images/pc/benefit_txt.jpg" alt="출석 일수에 따라 달라지는 혜택">
+                            </div>
+                        </div>                        
+					</div>                   
+                    <!-- //프로모션 출석체크-->
+				</div>
+			</div>
+			<div class="content dp_announce">
+				<div class="cont_head">
+					<div>
+						<h4>유의사항</h4>
+					</div>
+				</div>
+				<div class="cont_body">
+					<div class="announce_txt">
+						<div class="note_txt">
+							<img src="/images/pc/ico_content_find.png" alt="유의사항">
+							<p>유의사항</p>
+						</div>
+						<div class="announce_list">
+							<ul>
+								<li>본 이벤트는 ID당 1회만 참여 가능합니다.</li>
+								<li>설문조사 참여 시 포인트를 지급해드립니다. (이벤트 종료 후, 일괄 지급)</li>
+								<li>지급된 포인트는 [ 마이페이지 > 나의 지갑 ] 메뉴에서 확인할 수 있습니다.</li>
+							</ul>
+						</div>
+					</div> 
+				</div>
+			</div>
+            <!-- 다른 기획전,이벤트 보기 -->
+            <div class="content other_promotion_slide">
+                <div class="cont_head">
+                    <div>
+                        <h4>다른 이벤트 보기</h4>
+                        <a href="">전체보기</a>
+                    </div>
+                </div>
+                <div class="cont_body">
+                    <div class="swiper-container">
+                        <div class="swiper-wrapper">
+                            <div class="swiper-slide">                   
+                                <a href="">
+                                    <div class="thumb">
+                                        <img src="/images/pc/thumb/ev_list_img06.jpg" alt="스타일24만의 스타일로, tbj 하이 스타일링">
+                                    </div>
+                                    <div class="txt">
+                                        <span class="brand">BUCKAROO</span>
+                                        <p class="tit">스타일24만의 스타일로, TBJ 하이 스타일링</p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="swiper-button-prev"></div>
+                    <div class="swiper-button-next"></div>
+                </div>
+            </div>
+            <!-- //다른 기획전,이벤트 보기 -->
+		</div>
+	</div>
+</div>
+<script th:inline="javascript">
+let today = new Date();   
+let date = today.getDate();
+let month = [[${month}]];
+
+var appendHtml = function () {
+	$.each(month, function(idx, item)  { 
+		html = '';
+		html += '<tr>';
+		
+		if (item.sun!=null && item.sun!='') {
+			html += '	<td>';
+			html += '		<div class="date">'+item.sun+'</div>';
+			html += '	</td>	';
+		}else{
+			html += '	<td>';
+			html += '		<div class="date"></div>';
+			html += '	</td>	';
+		}
+		if (item.mon!=null && item.mon!='') {
+			html += '	<td>';
+			html += '		<div class="date">'+item.mon+'</div>';
+			html += '	</td>	';
+		}else{
+			html += '	<td>';
+			html += '		<div class="date"></div>';
+			html += '	</td>	';
+		}
+		if (item.tue!=null && item.tue!='') {
+			html += '	<td>';
+			html += '		<div class="date">'+item.tue+'</div>';
+			html += '	</td>	';
+		}else{
+			html += '	<td>';
+			html += '		<div class="date"></div>';
+			html += '	</td>	';
+		}
+		if (item.wed!=null && item.wed!='') {
+			html += '	<td>';
+			html += '		<div class="date">'+item.wed+'</div>';
+			html += '	</td>	';
+		}else{
+			html += '	<td>';
+			html += '		<div class="date"></div>';
+			html += '	</td>	';
+		}
+		if (item.thu!=null && item.thu!='') {
+			html += '	<td>';
+			html += '		<div class="date">'+item.thu+'</div>';
+			html += '	</td>	';
+		}else{
+			html += '	<td>';
+			html += '		<div class="date"></div>';
+			html += '	</td>	';
+		}
+		if (item.fri!=null && item.fri!='') {
+			html += '	<td>';
+			html += '		<div class="date">'+item.fri+'</div>';
+			html += '	</td>	';
+		}else{
+			html += '	<td>';
+			html += '		<div class="date"></div>';
+			html += '	</td>	';
+		}
+		if (item.sat!=null && item.sat!='') {
+			html += '	<td>';
+			html += '		<div class="date">'+item.sat+'</div>';
+			html += '	</td>	';
+		}else{
+			html += '	<td>';
+			html += '		<div class="date"></div>';
+			html += '	</td>	';
+		}
+		
+		html += '</tr>'
+		$("#monthTbody").append(html);
+	})    
+} 
+$(document).ready(function() {
+	 
+	appendHtml();
+	
+	//공유 버튼 토글 
+	$("button[data-name=openShare]").on("click", function(){
+		$(this).toggleClass("on").next(".shareWrap").toggleClass("on");
+		return false;
+	});
+	//영역밖 클릭으로 공유토글 닫기
+	$("body").on('click', function(e) { 
+		if(!$(".shareWrap.on").parent().has(e.target).length) {
+			$("button[data-name=openShare]").removeClass("on");
+			$(".shareWrap").removeClass("on");
+		};
+	});
+	
+	$('.btn_copy').bind('click', function() {
+		copyToClipboard();
+	});
+	
+	/* SLIDE - 다른 기획전,이벤트 보기 */
+	var other_slide_slide = new Swiper ('.other_promotion_slide .swiper-container', {
+		slidesPerView: 5,
+		spaceBetween: 20,
+		navigation: {
+			nextEl: '.other_promotion_slide .swiper-button-next',
+			prevEl: '.other_promotion_slide .swiper-button-prev',
+		},
+	});    
+	
+})
+</script>
+</th:block>
+
+</body>
+</html>

BIN
src/main/webapp/images/mo/coachmask01.png


BIN
src/main/webapp/images/mo/coachmask02.png


BIN
src/main/webapp/images/mo/coachmask03.png


BIN
src/main/webapp/images/mo/ico_app_arr.png


BIN
src/main/webapp/images/mo/ico_app_arr2.png


BIN
src/main/webapp/images/mo/ico_app_setting.png


BIN
src/main/webapp/images/mo/ico_full.png


BIN
src/main/webapp/images/mo/ico_full_on.png


BIN
src/main/webapp/images/mo/ico_go_save.png


BIN
src/main/webapp/images/mo/ico_paging.png


BIN
src/main/webapp/images/mo/ico_pop_cls_org.png


BIN
src/main/webapp/images/mo/logo_STYLE24_full.png


BIN
src/main/webapp/images/mo/movloading.gif


BIN
src/main/webapp/images/mo/page_accessApp.jpg


BIN
src/main/webapp/images/mo/page_consentAlarm.jpg


BIN
src/main/webapp/images/mo/pay_kakao.png


BIN
src/main/webapp/images/mo/pay_naver.png


BIN
src/main/webapp/images/mo/pay_payco.png


+ 233 - 0
src/main/webapp/ux/plugins/gaga/gaga.infinite.scrollSession.js

@@ -0,0 +1,233 @@
+/*
+ * Inifinite Scroll Java Script written by gagamel.
+ *
+ * Copyright (c) 2016 gagamel (nogdoo.com)
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * $Date: 2016-04-28 $
+ *
+ * 사용 예)
+ * 		// HTML 태그는 다음과 같은 구조로 되어 있어야 하며
+ * 		// id 명칭은 infiniteContainer, listBoxOuter, listBox 가 필요하다.
+ * 		<section id="infiniteContainer">
+ * 			<div id="listBoxOuter">
+ * 				<ul id="listBox">
+ * 				</ul>
+ *			</div>
+ *		</section>
+ *
+ * 		// JQUERY History 파일과 인피니트 스크롤 관련 자바스크립트 파일을 import 되어 있어야 한다.
+ * 		<script type="text/javascript" src="/ux/plugins/jquery.history.min.js"></script>
+ * 		<script type="text/javascript" src="/ux/plugins/gaga.infinite.scroll.js"></script>
+ *
+ * 		<script type="text/javascript">
+ * 			// 인피니트 스크롤에 대한 History 정보를 가져오기 위해 함수를 호출한다.
+ *			// History 정보가 없을 경우 fnGetInfiniteScrollDataList 함수가 호출된다.
+ * 			$(function() { gagaInfiniteScroll.getHistory(); });
+ *
+ *			// 인피니트 스크롤 이벤트 발생 시 데이터 가져오기
+ *			var fnGetInfiniteScrollDataList = function(pageNum) {
+ *				// 콜백함수인 gagaInfiniteScroll.jsonToHtml 에서는 fnDrawInfiniteScrollData 함수를 호출한다.
+ *				gagajf.ajaxSubmitForm(document.searchForm, "/goods/list", "json", gagaInfiniteScroll.jsonToHtml);
+ *			}
+ *
+ *			// 인피니트 스크롤 이벤트 발생 시 가져온 데이터를 특정 태그에 append
+ *			// fnDrawInfiniteScrollData(result, pageNum) 함수 구현
+ *			// 		이 함수 내에서의 로직은
+ *			//		1. 가져온 데이터로 HTML 태그를 만든다.
+ *			// 		2. 만든 태그를 append 하는 gagaInfiniteScroll.draw() 함수를 호출
+ *		</script>
+ */
+
+var gagaInfiniteScroll = {
+	pageStatus : {
+		  pageNum : []      // [0,1,2...] 로드된 페이지 (Array)
+		, loadPage : 0      // 로드할 페이지
+		, loadAlign : 'not' // 로드 상태(prev, next, not)
+		, historyScroll : 0 //
+		, nowPage : null    // 현재 페이지
+		, pageUrl : {       // page url
+		}
+		, sortGb : ''
+		, sortGbNm : ''
+		, filterHtml : ''
+		, filterStatHtml : ''
+		, totalCount : ''
+	},
+	obj : {
+		  $ajaxBoxOuter : $('#listBoxOuter')
+		, $ajaxBox : $('#listBox')
+		, $window : $(window)
+		, $loadingBar : '<div style="width: 100%; padding-top: 50px; text-align: center;" id="loadingBar"><img src="/ux/plugins/gaga/loader.gif" style="width:25px; height:25px;"/></div>'
+//		, $loadingBar : '<div style="width: 100%; padding-top: 50px; text-align: center;" id="loadingBar"><img src="/images/hsmob/common/loading_bar_01.gif" width="24px" height=" 22px"/></div>'
+	},
+	scrollCheck : function() {
+		var obj = this.obj, stat = this.pageStatus;
+
+		if (obj.$window.scrollTop() >= obj.$ajaxBox.offset().top + obj.$ajaxBox.height() - obj.$window.height()) { // 더보기
+			if (stat.loadAlign == 'not') {
+				var pageLen = this.pageStatus.pageNum.length - 1;
+				var nextPageNum = this.pageStatus.pageNum[pageLen] + 1;
+				this.pageStatus.pageNum.push(nextPageNum);
+				this.pageStatus.loadPage = nextPageNum;
+				stat.loadAlign = 'next';
+				this.getDataList();
+			};
+		}
+	},
+	getDataList : function() {
+		/*if (this.pageStatus.loadAlign == 'prev') {
+			this.obj.$ajaxBoxOuter.prepend($(this.obj.$loadingBar));
+		} else if (this.pageStatus.loadAlign == 'next') {
+			this.obj.$ajaxBoxOuter.append($(this.obj.$loadingBar));
+		};*/
+
+		$(".wrap-loading").removeClass('display-none');
+
+		// 인피니트 스크롤 이벤트에서 호출될 함수(데이터 가져오기 등)
+		// fnGetInfiniteScrollDataList 함수는 개발단에서 구현해야 한다.
+		fnGetInfiniteScrollDataList(this.pageStatus.loadPage);
+	},
+	getHistory : function() {
+		var historyData = sessionStorage.getItem(document.location.href);
+		if(historyData!=null){
+			historyData = JSON.parse(historyData);
+		}else{
+			historyData = {};
+		}
+
+		if (historyData.pageNum === undefined || historyData.pageNum === '' || historyData.htm === undefined || historyData.htm == '') {
+			this.pageStatus.loadPage = 0;
+			this.pageStatus.pageNum[0] = 0;
+			this.pageStatus.loadAlign = 'next';
+			this.pageStatus.historyScroll = 0;
+
+			this.getDataList();
+		} else {
+			this.pageStatus.loadPage = historyData.pageNum;
+			this.pageStatus.pageNum[0] = historyData.pageNum;
+			this.pageStatus.historyScroll = historyData.dataIndex;
+			this.pageStatus.loadAlign = 'next';
+			this.pageStatus.sortGb = historyData.sortGb;
+			this.pageStatus.sortGbNm = historyData.sortGbNm;
+			this.pageStatus.filterHtml = historyData.filterHtml;
+			this.pageStatus.filterStatHtml = historyData.filterStatHtml;
+			this.pageStatus.totalCount = historyData.totalCount;
+
+			gagaInfiniteScroll.draw(historyData.htm);
+		};
+
+		$(window).on('scroll', function() {
+			gagaInfiniteScroll.scrollCheck();
+		});
+	},
+	draw : function(htm, scrollTop, containerHeight) {
+		if (htm == 'not') {
+			$(".wrap-loading").addClass('display-none');
+			this.pageStatus.loadAlign = 'top';
+		} else {
+			var startH = $('#infiniteContainer').height();
+			var $addHtm = $(htm);
+			var $imgs = $addHtm.find('img');
+			var loadCheck = 0;
+			var len = $imgs.length;
+
+			if (scrollTop && containerHeight) {
+			} else {
+			}
+
+			$addHtm.find('img.lazy').lazyload({root: null,
+						rootMargin: "100px",
+						threshold: 0});
+
+			$.each($imgs, function(index) {
+				$imgs.eq(index).on('load',function() {
+					loadCheck++;
+					imgLpadComp();
+				});
+			});
+
+			var imgLpadComp = function() {
+				gagaInfiniteScroll.pushHistory(
+						  gagaInfiniteScroll.pageStatus.nowPage
+						, $(window).scrollTop()
+						, $('#infiniteContainer').height()
+						, gagaInfiniteScroll.pageStatus.loadPage
+						, 0
+						, gagaInfiniteScroll.obj.$ajaxBox.html());
+				if (scrollTop && containerHeight) {
+					gagaInfiniteScroll.obj.$window.scrollTop.scrollTop(0).scrollTop(scrollTop);
+				} else {
+					gagaInfiniteScroll.obj.$window.scrollTop(gagaInfiniteScroll.obj.$window.scrollTop() + 1);
+				}
+			};
+
+			$(".wrap-loading").addClass('display-none');
+
+			// Append HTML
+			this.obj.$ajaxBox.append($addHtm);
+
+			if (scrollTop && containerHeight) {
+				gagaInfiniteScroll.obj.$window.scrollTop.scrollTop(0).scrollTop(scrollTop);
+			} else {
+				$(window).scrollTop($(window).scrollTop() + 1);
+			}
+
+			this.pageStatus.loadAlign = 'not';
+		}
+	},
+	pushHistory : function(page, sScrollTop, sHeight, sPageNum, sDataIndex, sHtml) {
+		var historyData = {
+				state: page
+				, scroll: sScrollTop
+				, height: sHeight
+				, pageUrl: gagaInfiniteScroll.pageStatus.pageUrl
+				, name: gagaInfiniteScroll.pageStatus.nowPage
+				, pageNum : sPageNum
+				, dataIndex : sDataIndex
+				, htm : sHtml
+				, sortGb : gagaInfiniteScroll.pageStatus.sortGb
+				, sortGbNm : gagaInfiniteScroll.pageStatus.sortGbNm
+				, filterHtml : gagaInfiniteScroll.pageStatus.filterHtml
+				, filterStatHtml : gagaInfiniteScroll.pageStatus.filterStatHtml
+				, totalCount : gagaInfiniteScroll.pageStatus.totalCount
+		};
+		historyData = JSON.stringify(historyData);
+		sessionStorage.setItem(document.location.href, historyData);
+
+	},
+	pushLinkHistory : function(pageNum, dataIndex, obj) { // 링크에서 사용
+		var $pageNum = (pageNum || pageNum == 0) ? pageNum : '';
+		var $dataIndex = (dataIndex || dataIndex == 0) ? dataIndex : '';
+		var $html = (obj) ? $(obj).parents('#listBox').html() : '';
+
+		var historyData = {
+					state : gagaInfiniteScroll.pageStatus.nowPage
+					, scroll : $(window).scrollTop()
+					, height : $('#infiniteContainer').height()
+					, pageUrl : gagaInfiniteScroll.pageStatus.pageUrl
+					, name : gagaInfiniteScroll.pageStatus.nowPage
+					, pageNum : $pageNum
+					, dataIndex : $dataIndex
+					, htm : $html
+					, sortGb : gagaInfiniteScroll.pageStatus.sortGb
+					, sortGbNm : gagaInfiniteScroll.pageStatus.sortGbNm
+					, filterHtml : gagaInfiniteScroll.pageStatus.filterHtml
+					, filterStatHtml : gagaInfiniteScroll.pageStatus.filterStatHtml
+					, totalCount : gagaInfiniteScroll.pageStatus.totalCount
+		};
+		historyData = JSON.stringify(historyData);
+		sessionStorage.setItem(document.location.href, historyData);
+
+		return false;
+	},
+	jsonToHtml : function(result) {
+		// Data 가져온 후 실행될 함수
+		// fnDrawInfiniteScrollData 함수는 개발단에서 구현해야 한다.
+		if (result.dataList == "not") // data가 더 이상 없으면
+			fnDrawInfiniteScrollData('not', result.CURRENT_PAGE - 1);
+		else
+			fnDrawInfiniteScrollData(result, result.CURRENT_PAGE - 1);
+	}
+};

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 27 - 0
src/main/webapp/ux/plugins/jquery/jquery.history.min.js


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/main/webapp/ux/plugins/lazyload.min.js


Daži faili netika attēloti, jo izmaiņu fails ir pārāk liels