모바일 상품상세 개발중

src/main/java/com/style24/persistence/domain/GoodsSafeNo.java

@@ -21,13 +21,13 @@ public class GoodsSafeNo extends TscBaseDomain {
 	private String certDiv;
 	private String certDt;
 
-	public boolean getIsCertNum() {
-		if (this.certNum.matches(".*[0-9].*")) {
-			return true;
-		} else {
-			return false;
-		}
-
-	}
+//	public boolean getIsCertNum() {
+//		if (this.certNum.matches(".*[0-9].*")) {
+//			return true;
+//		} else {
+//			return false;
+//		}
+//
+//	}
 
 }

src/main/java/com/style24/persistence/domain/GoodsStock.java

@@ -34,6 +34,7 @@ public class GoodsStock extends TscBaseDomain {
 	private int stockQty;			// 상품 재고
 	private String selfGoodsYn;		// 자사상품구분
 	private String optNm;			// 옵션명
+	private String goodsStat;		// 상품상태
 	private int minOrdQty;
 	private int maxOrdQty;
 	

src/main/java/com/style24/persistence/mybatis/shop/TsfGoods.xml

@@ -254,6 +254,7 @@
 		           , G.SELF_GOODS_YN
 		           , G.MIN_ORD_QTY
 		           , G.MAX_ORD_QTY
+		           , G.GOODS_STAT
 		           , O.OPT_CD1
 		           , SUM(CASE WHEN O.SOLDOUT_YN = 'Y' THEN 0
 		                      WHEN VS.CURR_STOCK_QTY  <![CDATA[<=]]> 0 THEN 0
@@ -539,7 +540,7 @@
 	<select id="getGoodsResSell" parameterType="Goods" resultType="Goods">
 		/* TsfGoods.getGoodsResSell */
 		SELECT GOODS_CD
-		     , DATE_FORMAT(DELV_RES_DT ,'%Y년 %m월 %d일') AS DELV_RES_DT
+		     , DATE_FORMAT(DELV_RES_DT ,'%Y.%m.%d') AS DELV_RES_DT
 		FROM TB_GOODS_RES_SELL
 		WHERE GOODS_CD = #{goodsCd}
 		AND DELV_RES_DT > NOW()

src/main/webapp/WEB-INF/views/mob/common/fragments/HeadMob.html

@@ -60,7 +60,7 @@
 	<script src="/ux/mo/js/swiper.min.js"></script>
 	<script src="/ux/plugins/jquery.serializeObject.min.js"></script>
 	<script src="/ux/plugins/mcxdialog/mcxdialog_ui.js"></script>
-	
+	<script src="/ux/plugins/lazyload.min.js"></script>
 
 	<!-- Global site tag (gtag.js) - Google Analytics -->
 <!-- 	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-168660512-1"></script> -->

src/main/webapp/WEB-INF/views/mob/common/layout/GoodsLayoutMob.html

@@ -20,7 +20,7 @@
 						<i class="gl3"></i>
 					</span>
 				</button>
-				<h1 id="htopTitle">PAGE TITLE</h1>
+				<h1 id="htopTitle">상품상세</h1>
 			</section>
 		</header>
 

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

@@ -14,342 +14,176 @@
  * 1.0  2021.04.04   eskim	   최초 작성
  *******************************************************************************
  -->
-	<!-- 상품문의 리스트 내용 -->
+<!-- 상품문의 리스트 내용 -->
 <div class="pd_qnalist">
-    <div class="info_txt">
-        <ul>
-            <li>상품에 대해 궁금한 점이 있으시다면 문의해주세요.</li>
-            <li>배송, 주문/결제, 취소/반품/교환/환불, 회원, 쿠폰/포인트, 이벤트 등의 자세한 문의사항은 고객센터 &gt; 1:1문의를 이용하여 주시기 바랍니다.</li>
-        </ul>              
-        <div class="btn_group_flex">
-            <div><button type="button" class="btn btn_default" onclick="cfnGoToPage(_PAGE_GOODS_QNA);"><span>고객센터 1:1문의</span></button></div>
-        </div>     
-    </div>
-    <div class="qna_list">
-        <!-- 나열조건결과 있을 때 노출 내용 -->
-        <div class="yesdata">
-            <div class="form_field check_secret">
-                <input id="except_secret" type="checkbox"><label for="except_secret"><span>비밀글제외</span></label>
-            </div>
-            <div class="ui_row">
-                <div class="foldGroup case2">
-                    <!-- list2 -->
-                    <ul>
-                        <li class="my_qna"><!-- 내가 쓴 글에 클래스 my_qna 추가 -->
-                            <div class="fold_head">
-                                <a href="javascript:void(0)">
-                                    <div>
-                                        <div class="fold_tit">
-                                            <div class="lap1">
-                                                <span class="fold_state done">답변완료</span> <!-- 답변완료 : done / 처리중 : doing -->
-                                                <span class="prod"><i class="ico ico_myqna"></i><i class="ico ico_secret"></i></span>
-                                            </div>
-                                            <div class="lap2"><span>상품을 받았는데, 옷의 색상이 화면과 다릅니다. </span></div>
-                                        </div>
-                                        <span class="id">**nana</span><span class="data">2020.12.02</span>
-                                    </div>
-                                </a>
-                            </div>
-                            <div class="fold_cont">
-                                <!-- 내 1대1문의 내용 -->
-                                <div class="fold_detail">
-                                    <div>
-                                        <p>
-                                            PC에서 남성 분또 맨투맨 (T203TS120P)<br>
-                                            오렌지 컬러 선물하려고 하는데 선물을 할 수 없다고 나오네요.<br>
-                                            다른 컬러는 선물이 가능한 것 같은데 오렌지 컬러는 왜 안 되는건가요?<br>
-                                            바쁘시겠지만 확인 부탁드립니다.
-                                        </p>
-                                    </div>
-                                </div>
-                                <!-- //내 1대1문의 내용 -->
-                                <!-- 내 1대1문의 답변 -->
-                                <div class="fold_answer">
-                                    <div>
-                                        <div class="answer_body">
-                                            안녕하세요, 고객님. 스타일24 담당자 배수지 입니다. <br>
-                                            문의주신 해당 상품의 선물하기는 모바일에서만 사용이 가능합니다. <br>
-                                            이외 궁금하신 사항이 있으시면 1:1문의나 고객센터(1544-5336)로 문의 부탁 드립니다. <br>
-                                            고객 만족을 위해 더욱 더 노력하는 스타일24가 되겠습니다. <br>
-                                            좋은 하루 보내세요, 감사합니다.
-                                        </div>
-                                        <div class="answer_foot">
-                                            <span class="id">**nana</span><span class="data">2020.12.02</span>
-                                            <button type="button" class="btn_delete"><span>삭제</span></button>
-                                        </div>
-                                    </div>
-                                </div>
-                                <!-- //내 1대1문의 답변 -->
-                            </div>
-                        </li>
-                        <li>
-                            <div class="fold_head">
-                                <a href="javascript:void(0)">
-                                    <div>
-                                        <div class="fold_tit">
-                                            <div class="lap1">
-                                                <span class="fold_state done">답변완료</span> <!-- 답변완료 : done / 처리중 : doing -->
-                                                <span class="prod"></span>
-                                            </div>
-                                            <div class="lap2"><span>상품을 받았는데, 옷의 색상이 화면과 다릅니다. </span></div>
-                                        </div>
-                                        <span class="id">**nana</span><span class="data">2020.12.02</span>
-                                    </div>
-                                </a>
-                            </div>
-                            <div class="fold_cont">
-                                <!-- 내 1대1문의 내용 -->
-                                <div class="fold_detail">
-                                    <div>
-                                        <p>
-                                            PC에서 남성 분또 맨투맨 (T203TS120P)<br>
-                                            오렌지 컬러 선물하려고 하는데 선물을 할 수 없다고 나오네요.<br>
-                                            다른 컬러는 선물이 가능한 것 같은데 오렌지 컬러는 왜 안 되는건가요?<br>
-                                            바쁘시겠지만 확인 부탁드립니다.
-                                        </p>
-                                    </div>
-                                </div>
-                                <!-- //내 1대1문의 내용 -->
-                                <!-- 내 1대1문의 답변 -->
-                                <div class="fold_answer">
-                                    <div>
-                                        <div class="answer_body">
-                                            안녕하세요, 고객님. 스타일24 담당자 배수지 입니다. <br>
-                                            문의주신 해당 상품의 선물하기는 모바일에서만 사용이 가능합니다. <br>
-                                            이외 궁금하신 사항이 있으시면 1:1문의나 고객센터(1544-5336)로 문의 부탁 드립니다. <br>
-                                            고객 만족을 위해 더욱 더 노력하는 스타일24가 되겠습니다. <br>
-                                            좋은 하루 보내세요, 감사합니다.
-                                        </div>
-                                        <div class="answer_foot">
-                                            <span class="id">**nana</span><span class="data">2020.12.02</span>
-                                            <button type="button" class="btn_delete"><span>삭제</span></button>
-                                        </div>
-                                    </div>
-                                </div>
-                                <!-- //내 1대1문의 답변 -->
-                            </div>
-                        </li>
-                        <li>
-                            <div class="fold_head">
-                                <a href="javascript:void(0)">
-                                    <div>
-                                        <div class="fold_tit">
-                                            <div class="lap1">
-                                                <span class="fold_state doing">처리중</span> <!-- 답변완료 : done / 처리중 : doing -->
-                                                <span class="prod"></span>
-                                            </div>
-                                            <div class="lap2"><span>상품을 받았는데, 옷의 색상이 화면과 다릅니다. </span></div>
-                                        </div>
-                                        <span class="id">**nana</span><span class="data">2020.12.02</span>
-                                    </div>
-                                </a>
-                            </div>
-                            <div class="fold_cont">
-                                <!-- 내 1대1문의 내용 -->
-                                <div class="fold_detail">
-                                    <div>
-                                        <p>
-                                            PC에서 남성 분또 맨투맨 (T203TS120P)<br>
-                                            오렌지 컬러 선물하려고 하는데 선물을 할 수 없다고 나오네요.<br>
-                                            다른 컬러는 선물이 가능한 것 같은데 오렌지 컬러는 왜 안 되는건가요?<br>
-                                            바쁘시겠지만 확인 부탁드립니다.
-                                        </p>
-                                    </div>
-                                </div>
-                                <!-- //내 1대1문의 내용 -->
-                            </div>
-                        </li>		
-                        <li>
-                            <div class="fold_head">
-                                <a href="javascript:void(0)">
-                                    <div>
-                                        <div class="fold_tit">
-                                            <div class="lap1">
-                                                <span class="fold_state doing">처리중</span> <!-- 답변완료 : done / 처리중 : doing -->
-                                                <span class="prod"></span>
-                                            </div>
-                                            <div class="lap2"><span>상품을 받았는데, 옷의 색상이 화면과 다릅니다. </span></div>
-                                        </div>
-                                        <span class="id">**nana</span><span class="data">2020.12.02</span>
-                                    </div>
-                                </a>
-                            </div>
-                            <div class="fold_cont">
-                                <!-- 내 1대1문의 내용 -->
-                                <div class="fold_detail">
-                                    <div>
-                                        <p>
-                                            PC에서 남성 분또 맨투맨 (T203TS120P)<br>
-                                            오렌지 컬러 선물하려고 하는데 선물을 할 수 없다고 나오네요.<br>
-                                            다른 컬러는 선물이 가능한 것 같은데 오렌지 컬러는 왜 안 되는건가요?<br>
-                                            바쁘시겠지만 확인 부탁드립니다.
-                                        </p>
-                                    </div>
-                                </div>
-                                <!-- //내 1대1문의 내용 -->
-                            </div>
-                        </li>	
-                        <li>
-                            <div class="fold_head">
-                                <a href="javascript:void(0)">
-                                    <div>
-                                        <div class="fold_tit">
-                                            <div class="lap1">
-                                                <span class="fold_state doing">처리중</span> <!-- 답변완료 : done / 처리중 : doing -->
-                                                <span class="prod"></span>
-                                            </div>
-                                            <div class="lap2"><span>상품을 받았는데, 옷의 색상이 화면과 다릅니다. </span></div>
-                                        </div>
-                                        <span class="id">**nana</span><span class="data">2020.12.02</span>
-                                    </div>
-                                </a>
-                            </div>
-                            <div class="fold_cont">
-                                <!-- 내 1대1문의 내용 -->
-                                <div class="fold_detail">
-                                    <div>
-                                        <p>
-                                            PC에서 남성 분또 맨투맨 (T203TS120P)<br>
-                                            오렌지 컬러 선물하려고 하는데 선물을 할 수 없다고 나오네요.<br>
-                                            다른 컬러는 선물이 가능한 것 같은데 오렌지 컬러는 왜 안 되는건가요?<br>
-                                            바쁘시겠지만 확인 부탁드립니다.
-                                        </p>
-                                    </div>
-                                </div>
-                                <!-- //내 1대1문의 내용 -->
-                            </div>
-                        </li>
-                        <li>
-                            <div class="fold_head">
-                                <a href="javascript:void(0)">
-                                    <div>
-                                        <div class="fold_tit">
-                                            <div class="lap1">
-                                                <span class="fold_state done">답변완료</span> <!-- 답변완료 : done / 처리중 : doing -->
-                                                <span class="prod"><i class="ico ico_secret"></i></span>
-                                            </div>
-                                            <div class="lap2"><span>비밀글입니다.</span></div>
-                                        </div>
-                                        <span class="id">**nana</span><span class="data">2020.12.02</span>
-                                    </div>
-                                </a>
-                            </div>
-                            <div class="fold_cont">
-                                <!-- 내 1대1문의 내용 -->
-                                <div class="fold_detail">
-                                    <div>
-                                        <p>
-                                            PC에서 남성 분또 맨투맨 (T203TS120P)<br>
-                                            오렌지 컬러 선물하려고 하는데 선물을 할 수 없다고 나오네요.<br>
-                                            다른 컬러는 선물이 가능한 것 같은데 오렌지 컬러는 왜 안 되는건가요?<br>
-                                            바쁘시겠지만 확인 부탁드립니다.
-                                        </p>
-                                    </div>
-                                </div>
-                                <!-- //내 1대1문의 내용 -->
-                            </div>
-                        </li>	
-                    </ul>
-                    <!-- //list2 -->
-                </div>
-            </div>
-        </div>
-        <!-- //나열조건결과 있을 때 노출 내용 -->
-        <!-- 나열조건결과 없을 때 노출 내용 -->
-        <div class="nodata">
-            <div class="txt_box">
-                <p>
-                    등록된 상품문의가 없습니다.
-                </p>
-            </div>
-        </div>
-        <!-- //나열조건결과 없을 때 노출 내용 -->
-    </div>
-    <div class="btn_group_flex">
-        <div><button type="button" class="btn btn_dark" id="btn_pdQnaWrite_pop" th:onclick="cfGoodsQngCreate([[${goodsInfo.goodsCd}]] )"><span>상품 문의하기</span></button></div>
-    </div>
+	<div class="info_txt">
+		<ul>
+			<li>상품에 대해 궁금한 점이 있으시다면 문의해주세요.</li>
+			<li>배송, 주문/결제, 취소/반품/교환/환불, 회원, 쿠폰/포인트, 이벤트 등의 자세한 문의사항은 고객센터 &gt; 1:1문의를 이용하여 주시기 바랍니다.</li>
+		</ul>			  
+		<div class="btn_group_flex">
+			<div><button type="button" class="btn btn_default" onclick="cfnGoToPage(_PAGE_GOODS_QNA);"><span>고객센터 1:1문의</span></button></div>
+		</div>	 
+	</div>
+	<div class="qna_list">
+		<!-- 나열조건결과 있을 때 노출 내용 -->
+		<div class="yesdata">
+			<div class="form_field check_secret">
+				<input id="except_secret" type="checkbox"><label for="except_secret" onclick="fnGetList();"><span>비밀글제외</span></label>
+				<input  type="hidden" name="secretYn" >
+			</div>
+			<div class="ui_row" id="infiniteContainer">
+				<div class="foldGroup case2" id="listBoxOuter">
+					<!-- list2 -->
+					<ul  id="listBox">
+					</ul>
+					<!-- //list2 -->
+				</div>
+			</div>
+		</div>
+		<!-- //나열조건결과 있을 때 노출 내용 -->
+		<!-- 나열조건결과 없을 때 노출 내용 -->
+		<div class="nodata"  style="display:none;">
+			<div class="txt_box">
+				<p>
+					등록된 상품문의가 없습니다.
+				</p>
+			</div>
+		</div>
+		<!-- //나열조건결과 없을 때 노출 내용 -->
+	</div>
+	<div class="btn_group_flex">
+		<div><button type="button" class="btn btn_dark" id="btn_pdQnaWrite_pop" th:onclick="cfGoodsQngCreate([[${goodsInfo.goodsCd}]] )"><span>상품 문의하기</span></button></div>
+	</div>
 </div>
+<form id="goodsQnaForm" name="goodsQnaForm" action="#" th:action="@{'/goods/qna/list'}">
+<input type="hidden" name="pageNo"  value ="1"/>
+<input type="hidden" name="pageSize" value ="20"/>
+<input type="hidden" name="relGoodsCd" th:value ="${goodsInfo.goodsCd}"/>
+</form>
+<script src="/ux/plugins/jquery/jquery.history.min.js"></script>
+<script src="/ux/plugins/gaga/gaga.infinite.scrollSession.js"></script>
 <script th:inline="javascript">
 /*<![CDATA[*/
 	
-	var fnGetList = function() {
-
+	// 상품 검색
+	var fnGetInfiniteScrollDataList = function(pageNum) {
+	
 		$('#goodsQnaForm  input[name="secretYn"]').val('');
 		if ($("#goodsQnaForm input:checkbox[name=except_secret]").is(':checked')){
 			$('#goodsQnaForm  input[name="secretYn"]').val('N');
 		}
-		// Initialize a pagination
-		gagaPaging.init('goodsQnaForm', fnGetListCallback, 'pageNav', 20);
-
-		// Load data
-		gagaPaging.load(1);
+		
+		$("#goodsQnaForm input[name=pageNo]").val(pageNum+1);
+		// 콜백함수인 gagaInfiniteScroll.jsonToHtml 에서는 fnDrawInfiniteScrollData 함수를 호출한다.
+		gagajf.ajaxFormSubmit("/goods/qna/list", document.goodsQnaForm,  gagaInfiniteScroll.jsonToHtml);
 	}
 	
-	var fnGetListCallback = function(result) {
-		$('#ulGoodsQna').html('');
-		$('#goodsQnaForm').find('.nodata').hide();
-		// 목록
+	var fnDrawInfiniteScrollData = function(result, pageNum){
+
 		if (result.dataList != null && result.dataList.length > 0) {
+			var htm = fnCreateGoodsQnaList(result);
+			gagaInfiniteScroll.draw(htm);
+		}else {
+			if($("#goodsQnaForm input[name=pageNo]").val()==1){
+				$('#goodsQnaForm').find('.nodata').show();
+			}
+			gagaInfiniteScroll.draw('not');
+		}
+	}
+
+	var fnGoodsQnaListSearch = function() {
+		gagaInfiniteScroll.getHistory();
+	}
+
+	var fnCreateGoodsQnaList = function(result) {
+
+		let tag = '';
+		$.each(result.dataList, function(idx, item) {
 			
-			$.each(result.dataList, function(idx, item) {
-				let tag = '<li class="';  // <!-- 내가 쓴 글에 클래스 my_qna 추가 -->
-				if (item.selfGb == 1){
-					tag += ' my_qna';	
-				}else if (item.secretYn == "Y"){
-					tag += ' secret_qna';
-				}
-				tag += ' ">\n';  // <!-- 내가 쓴 글에 클래스 my_qna 추가 -->
-				tag += '	<div class="fold_head">\n';
-				tag += '		<a href="javascript:void(0)">\n';
-				tag += '			<div>\n';
-				tag += '				<span class="fold_state ' + (item.ansStat == "G060_10" ? "doing" : "done") + '">' + item.ansStatNm + '</span>\n'; //답변완료 : done / 처리중 : doing
-				tag += '				<div class="fold_tit">\n';
-				tag += '					<span>' + item.questContent + '</span>\n';
-				if (item.selfGb == 1){
-				tag += '					<i class="ico ico_myqna"></i>\n';	//내가 쓴 글에 추가되는 아이콘
-				}
-				if (item.secretYn == "Y"){
-				tag += '					<i class="ico ico_secret"></i>\n';	//비밀글에 추가되는 아이콘
-				}
-				tag += '				</div>\n';
-				tag += '				<div class="data">\n';
-				tag += '					<span class="wr_id">'+ item.maskingCustId+'</span>\n';
-				tag += '					<span class="wr_data">' + item.questDt + '</span>\n';
-				tag += '				</div>\n';
-				tag += '			</div>\n';
-				tag += '		</a>\n';
-				tag += '	</div>\n';
-				tag += '	<div class="fold_cont" style="display: none;">\n';
-				tag += '		<div class="fold_detail">\n'; //문의 내용
-				tag += '			<div>\n';
-				tag += '				<p>' + item.questContent + '</p>\n';
+			tag += '<li class="';  // <!-- 내가 쓴 글에 클래스 my_qna 추가 -->
+			if (item.selfGb == 1){
+				tag += ' my_qna';	
+			}else if (item.secretYn == "Y"){
+				tag += ' secret_qna';
+			}
+			tag += ' ">\n';  // <!-- 내가 쓴 글에 클래스 my_qna 추가 -->
+			tag += '	<div class="fold_head">\n';
+			tag += '		<a href="javascript:void(0)">\n';
+			tag += '			<div>\n';
+			tag += '				<div class="fold_tit">\n';
+			tag += '					<div class="lap1">\n';
+			tag += '						<span class="fold_state ' + (item.ansStat == "G060_10" ? "doing" : "done") + '">' + item.ansStatNm + '</span>\n'; //답변완료 : done / 처리중 : doing
+			tag += '						<span class="prod">\n';
+			if (item.selfGb == 1){
+			tag += '						<i class="ico ico_myqna"></i>';	//내가 쓴 글에 추가되는 아이콘
+			}
+			if (item.secretYn == "Y"){
+			tag += '						<i class="ico ico_secret"></i>';	//비밀글에 추가되는 아이콘
+			}
+			tag += '						</span>\n';
+			tag += '					</div>\n';
+			tag += '					<div class="lap2"><span>' + item.questContent + '</span></div>\n';
+			tag += '					<span class="id">'+ item.maskingCustId+'</span><span class="data">' + item.questDt + '</span>\n';
+			tag += '				</div>\n';
+			tag += '			</div>\n';
+			tag += '		</a>\n';
+			tag += '	</div>\n';
+			tag += '	<div class="fold_cont">\n';
+			tag += '		<div class="fold_detail">\n'; //문의 내용
+			tag += '			<div>\n';
+			tag += '				<p>' + item.questContent.replaceAll("\n", "</br>") + '</p>\n';
+			tag += '			</div>\n';
+			tag += '		</div>\n';
+			
+			if (item.ansStat == 'G060_20') { // 답변완료 상태일 때
+				tag += '	<div class="fold_answer">\n'; //문의 답변
+				tag += '		<div>\n';
+				tag += '			<div class="answer_body">' + item.ansContent.replaceAll("\n", "</br>") + '</div>\n';
+				tag += '			<div class="answer_foot"><span class="data">' + item.ansDt + '</span>\n';
 				tag += '			</div>\n';
 				tag += '		</div>\n';
-				
-				if (item.ansStat == 'G060_20') { // 답변완료 상태일 때
-					tag += '	<div class="fold_answer">\n'; //문의 답변
-					tag += '		<div class="answer_head">답변이 등록되었습니다.</div>\n';
-					tag += '		<div class="answer_body">' + item.ansContent + '</div>\n';
-					tag += '		<span class="data">' + item.ansDt + '</span>\n';
-					tag += '	</div>\n';
-				}
-				
 				tag += '	</div>\n';
-				tag += '</li>\n';
-				
-				$('#ulGoodsQna').append(tag);
-			});
-		} else {
-			$('#goodsQnaForm').find('.nodata').show();
-			$('#goodsQnaForm').find('.ui_foot').hide();
-		}
+			}
+			tag += '	</div>\n';
+			tag += '</li>\n';
+			
+		});
+		
+		
+		return tag;
+	}
+	
 
-		// Create pagination
-		gagaPaging.createPagination(result.paging.pageable);
+	// 인피니트 스크롤 초기화
+	var fnGoodsQnaInfiniteScrollInit = function(){
+		 sessionStorage.removeItem(document.location.href);
+		//History 초기화
+		$("#listBox").html("");
 	}
 	
-	$(document).ready(function() {
-	//	fnGetList();
+	// 왜 안될가?
+	// 사파리 - event.persisted || 크롬 - window.performance.navigation.type 이 1이면 새로고침, 2면 페이지 이동을 통한 캐쉬페이징
+	$(window).on("pageshow", function(event) {
+		if ( (event.originalEvent && event.originalEvent.persisted) || (window.performance && window.performance.navigation.type == 2)) {
+			var historyData = sessionStorage.getItem(document.location.href);
+			if(historyData!=null){
+				historyData = JSON.parse(historyData);
+			}else{
+				historyData = {};
+			}
+			fnGoodsQnaListSearch();
+		}else{
+			fnGoodsQnaInfiniteScrollInit();
+			fnGoodsQnaListSearch();
+		}
+
+	});
+	
+	
+	$(document).ready( function() {
+		fnGoodsQnaListSearch();
+		
 	});
 	
 /*]]>*/

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>

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>

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

@@ -15,6 +15,8 @@
  *******************************************************************************
  -->
 <div class="modal-dialog" role="document">
+<form id="goodsQnaDetailForm" name="goodsQnaDetailForm" action="#" th:action="@{'/callcenter/goods/qna/create'}">
+		<input type="hidden" name="relGoodsCd" th:value ="${goodsCd}"/>
 	<div class="modal-content">
 		<div class="modal-header">
 			<h5 class="modal-title" id="exampleFullLabel">상품 문의하기</h5>
@@ -31,13 +33,13 @@
 				<div class="form_field">
 					<div class="input_box">
 						<div class="lap">
-							<textarea class="doc_itemqna" name="" id="" cols="30" rows="10" placeholder="문의내용 입력(500자 이내)" style="resize: none;"></textarea>
+							<textarea class="doc_itemqna"  name="questContent" cols="30" rows="10" placeholder="문의내용 입력(500자 이내)" style="resize: none;"></textarea>
 							<p class="txt_cnt">
-								<span id="itemqna_cnt" class="itemqna_cnt"><em class="c_primary">0</em>/500자</span>
+								<span id="itemqna_cnt" class="itemqna_cnt" ><em class="c_primary">0</em>/500자</span>
 							</p>   
 						</div>           
 						<div class="secret_box">
-							<input id="wr_secret" type="checkbox"><label for="wr_secret"><span>비밀글설정</span></label>
+							<input id="wr_secret" type="checkbox" name="secretYn" value="Y"><label for="wr_secret"><span>비밀글설정</span></label>
 						</div>
 					</div> 
 				</div>
@@ -47,11 +49,11 @@
 						<dd>
 							<div class="form_field">
 								<div>
-									<input type="radio" name="rdi-push" id="rdi-push1" value="" checked="">
+									<input type="radio" name="smsReqYn" id="rdi-push1" value="Y"  checked="checked">
 									<label for="rdi-push1"><span>수신</span></label>
 								</div>
 								<div>
-									<input type="radio" name="rdi-push" id="rdi-push2" value="">
+									<input type="radio" name="smsReqYn" id="rdi-push2" value="N">
 									<label for="rdi-push2"><span>미수신</span></label>
 								</div>
 							</div>
@@ -62,10 +64,11 @@
 		</div>	
 		<div class="modal-footer">
 			<div class="btn_group_flex">
-				<div><button type="button" class="btn btn_dark"><span>등록</span></button></div>
+				<div><button type="button" class="btn btn_dark"  onclick="fnGoodsQnaSave();"><span>등록</span></button></div>
 			</div>
 		</div>
 	</div>
+</form>	
 </div>
 <a href="javascript:void(0);" rel="modal:close" onclick="cfCloseLayer('layer_goods_qna_reg')" class="close-modal">Close</a> 	
 <script th:inline="javascript">
@@ -74,24 +77,24 @@
 	// 상품문의 작성 > 글자수 체크
 	$('.pd_qnawrite_pop .doc_itemqna').keyup(function (e){
 		let contentQna = $(this).val();
-		$('#itemqna_cnt').html("(<em class='c_primary'>"+contentQna.length+"</em>/500자)");  
+		$('.itemqna_cnt').html("(<em class='c_primary'>"+contentQna.length+"</em>/500자)");
+		
 		if (contentQna.length > 500){
 			alert("최대 500자까지 입력 가능합니다.");
 			$(this).val(contentQna.substring(0, 500));
-			$('#itemqna_cnt').html("(<em class='c_primary'>500</em>/500자)");
+			$('.itemqna_cnt').html("(<em class='c_primary'>500</em>/500자)");
 		}
 	});
 	
 	// 저장
-	$('#btnGoodsQnaSave').on('click', function() {
-		
-		// 테스트용
-/* 		gagajf.ajaxFormSubmit($('#goodsQnaDetailForm').prop('action')
+	var fnGoodsQnaSave = function() {
+		/*// 테스트용
+		 		gagajf.ajaxFormSubmit($('#goodsQnaDetailForm').prop('action')
 				, $('#goodsQnaDetailForm')
 				, function() {
 					mcxDialog.alert("상품 문의가 등록되었습니다. 빠른 시일 내에 답변드리겠습니다.");
 				}
-		); */
+		);*/ 
 		
 		// 입력 값 체크
 		if (gagajf.isNull($("#goodsQnaDetailForm  textarea[name=questContent]").val())){
@@ -111,8 +114,8 @@
 				);
 			}
 		});
-	
-	});
+		
+	}
 
 /*]]>*/
 </script>

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

@@ -19,14 +19,14 @@
 		<div class="modal-header">
 			<!-- 해당상품 -->
 			<div class="item_blk">
-				<div class="item_prod">
+				<div class="item_prod" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}">
 					<div class="item_state">
-						<a href="#none" class="itemLink">
+						<a href="javascript:void(0);" class="itemLink">
 							<div class="itemPic">
-								<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">
+								<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">NBA</p>
-							<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+							<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">NBA</p>
+							<div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성</div>
 						</a>
 					</div>
 				</div>
@@ -34,7 +34,6 @@
 			<!-- //해당상품 -->
 		</div>
 		<div class="modal-body" id="goodsDealQna">
-			
 		</div>
 		<div class="modal-footer">
 			
@@ -44,6 +43,7 @@
 <a href="javascript:void(0);" rel="modal:close" onclick="cfCloseLayer('layer_goods_qna')" class="close-modal">Close</a>
 <script th:inline="javascript">
 /*<![CDATA[*/
+	
 	// 구성 상품 상세 문의
 	var fnGoodsDetailQna = function(params) {
 		gagajf.ajaxSubmit("/goods/detail/qna/frame", "html", "goodsDealQna", params);

src/main/webapp/WEB-INF/views/web/goods/GoodsDetailFormWeb.html

@@ -288,7 +288,7 @@
 										<span class="title">수량</span>
 									</div>
 									<div class="number_count">
-										<span class="minus" onclick="fnAdjustOrderEa(this);" adjust="-"><em class="sr-only">감소</em></a></span>
+										<span class="minus" onclick="fnAdjustOrderEa(this);" adjust="-"><em class="sr-only">감소</em></span>
 										<input type="text" name="cea" maxlength="3" style="ime-mode:disabled" th:value="${goodsInfo.minOrdQty}" onblur="fnChangeOrderEa(this)" data-valid-type="numeric">
 										<input type="hidden" name="coption" value=""   th:attr="price=${goodsInfo.currPrice}">
 										<span class="plus" onclick="fnAdjustOrderEa(this);" adjust="+"><em class="sr-only">추가</em></span>
@@ -552,12 +552,12 @@
 							어린이제품 안전인증 / 한국건설생활시험연구원(KCL)
 						</p>
 						<p class="normal" >
-							<th:block th:if="${not #strings.isEmpty(goodsSafeNo.isCertNum)}" >
-							 인증번호: :CB123A123-1234
-							<a th:href="@{http://www.safetykorea.kr/search/searchPop(certNum=${goodsSafeNo.certNum})}" target="_blank" class="linktxt3">상세보기</a>
+							<th:block th:if="${#strings.contains(goodsSafeNo.isCertNum, '해당')}" >
+							해당 없음 
 							</th:block>
-							<th:block th:unless="${goodsSafeNo.isCertNum}">
-							해당사항 없음
+							<th:block th:unless="${#strings.contains(goodsSafeNo.isCertNum, '해당')}" >
+							인증번호: : <th:block th:text="${goodsSafeNo.isCertNum}"></th:block>
+							<a th:href="@{http://www.safetykorea.kr/search/searchPop(certNum=${goodsSafeNo.certNum})}" target="_blank" class="linktxt3">상세보기</a>
 							</th:block>
 						</p>
 						<p class="t_info dot_info">

src/main/webapp/WEB-INF/views/web/goods/GoodsDetailQnaFormWeb.html

@@ -115,14 +115,14 @@
 				tag += '	<div class="fold_cont" style="display: none;">\n';
 				tag += '		<div class="fold_detail">\n'; //문의 내용
 				tag += '			<div>\n';
-				tag += '				<p>' + item.questContent + '</p>\n';
+				tag += '				<p>' + item.questContent.replaceAll("\n", "</br>") + '</p>\n';
 				tag += '			</div>\n';
 				tag += '		</div>\n';
 				
 				if (item.ansStat == 'G060_20') { // 답변완료 상태일 때
 					tag += '	<div class="fold_answer">\n'; //문의 답변
 					tag += '		<div class="answer_head">답변이 등록되었습니다.</div>\n';
-					tag += '		<div class="answer_body">' + item.ansContent + '</div>\n';
+					tag += '		<div class="answer_body">' + item.ansContent.replaceAll("\n", "</br>") + '</div>\n';
 					tag += '		<span class="data">' + item.ansDt + '</span>\n';
 					tag += '	</div>\n';
 				}

src/main/webapp/WEB-INF/views/web/goods/GoodsOtherFormWeb.html

@@ -64,7 +64,7 @@
 	</div>
 	<!-- // CONT-BODY -->
 </div>
-</th:block>
+
 
 
 <script th:inline="javascript">
@@ -123,5 +123,6 @@
 		},
 	});	  
 /*]]>*/
-</script>	
+</script>
+</th:block>	
 </html>

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);
+	}
+};