베스트 메인 수정

src/main/java/com/style24/front/biz/web/TsfDisplayController.java

@@ -1375,8 +1375,9 @@ public class TsfDisplayController extends TsfBaseController {
 	 */
 	@GetMapping("/realtime/best/list")
 	@ResponseBody
-	public Collection<Item> getRealtimeBestGoodsList(Contents contents) {
-		String cateNo = String.valueOf(contents.getCateNo());
-		return eigeneaiApi.getRealtimeViewBestGoodsList(30, cateNo);
+	public Collection<Item> getRealtimeBestGoodsList(@RequestParam HashMap<String, String> paramMap) {
+		String cateNo = paramMap.get("cateNo");
+		Collection<Item> bestList = eigeneaiApi.getRealtimeViewBestGoodsList(20, cateNo);
+		return bestList;
 	}
 }

src/main/webapp/WEB-INF/views/mob/display/BestMainFormMob.html

@@ -40,77 +40,25 @@
 						</div>
 						<div>
 							<ul class="dp_util">
-								<li><a href="#none" class="refresh">17:30 기준</a></li>
+								<li><a href="javascript:void(0);" id="researchBtn" class="refresh" th:text="${#calendars.format(#calendars.createNow(), 'HH:mm')+' 기준'}">17:30 기준</a></li>
 							</ul>
 						</div>
 					</div>
 					<div class="swiper-container item_list">
-						<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="BLACK-a" class=" vLHTC pd_img" src="/images/mo/thumb/prod3.jpg">
-											</div>
-											<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-											<div class="viewComment">508명 보는중</div>
-										</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="BLACK-a" class=" vLHTC pd_img" src="/images/mo/thumb/prod3.jpg">
-											</div>
-											<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-											<div class="viewComment">320명 보는중</div>
-										</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="BLACK-a" class=" vLHTC pd_img" src="/images/mo/thumb/prod3.jpg">
-											</div>
-											<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-											<div class="viewComment">1500명 보는중</div>
-										</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="BLACK-a" class=" vLHTC pd_img" src="/images/mo/thumb/prod3.jpg">
-											</div>
-											<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-											<div class="viewComment">508명 보는중</div>
-										</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="BLACK-a" class=" vLHTC pd_img" src="/images/mo/thumb/prod3.jpg">
-											</div>
-											<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-											<div class="viewComment">508명 보는중</div>
-										</a>
-									</div>
-								</div>
-							</div>
+						<div class="swiper-wrapper" id="itemViewArea">
+<!--							<div class="swiper-slide">-->
+<!--								<div class="item_prod">-->
+<!--									<div class="item_state">-->
+<!--										<a href="#none" class="itemLink">-->
+<!--											<div class="itemPic">-->
+<!--												<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/mo/thumb/prod3.jpg">-->
+<!--											</div>-->
+<!--											<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>-->
+<!--											<div class="viewComment">508명 보는중</div>-->
+<!--										</a>-->
+<!--									</div>-->
+<!--								</div>-->
+<!--							</div>-->
 						</div>
 					</div>
 				</div>
@@ -145,15 +93,8 @@
 							</ul>
 						</div>
 
-						<div id="infiniteContainer">
-							<div id="listBoxOuter" class="itemsGrp">
-								<ul class="productlist quarter" >
-								</ul>
-							</div>
-						</div>
-
 						<div class="list_content">
-							<div class="itemsGrp" id="listBox">
+							<div class="itemsGrp" id="prodArea">
 							</div>
 						</div>
 
@@ -229,9 +170,10 @@
 		<input type="hidden" name="sortGb"/>
 	</form>
 
-	<script src="/ux/plugins/gaga/gaga.infinite.scrollSession.js"></script>
-	<script src="/ux/plugins/jquery/jquery.history.min.js"></script>
-	<script th:src="@{'/biz/goods.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/goods.js"></script>
+	<!-- 수동설정 + 추천솔루션 카운트 문제로 인해 인피티니스크롤 제거 협의 21-07-21 -->
+<!--	<script src="/ux/plugins/gaga/gaga.infinite.scrollSession.js"></script>-->
+<!--	<script src="/ux/plugins/jquery/jquery.history.min.js"></script>-->
+<!--	<script th:src="@{'/biz/goods.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/goods.js"></script>-->
 
 
 	<script th:inline="javascript">
@@ -267,13 +209,6 @@
 			}
 			category();
 
-			var dp_viewitem_slide = new Swiper('.view_item .swiper-container', {
-				slidesPerView: 'auto',
-				slidesPerView: 3,
-				spaceBetween: 8,
-				centerMode: true,
-			});
-
 			// 210415_팝업관련 추가
 			//기간 선택 팝업
 			$(document).on("click", ".open_categori.sex", function(){
@@ -309,10 +244,6 @@
 		});
 
 		var fnBestListSearch = function (obj, cateNo){
-			// if(gagajf.isNull(cateNo)){
-			// 	cateNo = 0;
-			// }
-
 			$.each($("#cateListArea").find('li').find('button'), function() {
 				$(this).removeClass();
 			});
@@ -323,61 +254,155 @@
 			}
 
 			$("#bestGoodsForm input[name=cateNo]").val(cateNo);
-			fnCategoryGoodsInfiniteScrollInit();
-			gagaInfiniteScroll.getHistory();
-		}
 
-		var totalCnt = 0;
-		var idx = 1;
-		// 상품 검색
-		var fnGetInfiniteScrollDataList = function (pageNum){
-			$("#bestGoodsForm input[name=pageNo]").val(pageNum+1);
-			// if(idx==1 || totalCnt > Number($("#bestGoodsForm").find("input[name=pageSize]").val())){
-			// 	idx++;
-				gagajf.ajaxFormSubmit("/display/best/main/goods/list", document.bestGoodsForm,  gagaInfiniteScroll.jsonToHtml);
-			// }
+			// 카테고리별 실시간 베스트 상품 조회 getRealtimeViewBestGoodsList
+			fnRealtimeViewBestList(cateNo);
+
+			// TOP100 조회
+			fnBestTop100List();
 		}
 
-		var fnDrawInfiniteScrollData = function (result){
-			totalCnt = result.totalCnt;
-			gagaInfiniteScroll.pageStatus.totalCount = result.totalCnt;
-			var ithrCd = '';
-			var contentLoc = '';
-
-			if (result.dataList != null && result.dataList.length > 0) {
-				var goodsUrl = [[${@environment.getProperty('upload.goods.view')}]];;
-				let lastPage = result.paging.pageable.pageNo;
-				let endRow = result.endRow - result.paging.pageable.pageSize;
-				var htm = fnCreateGoodsList(result, ithrCd, contentLoc, goodsUrl, lastPage, endRow, 'Mob');
-				gagaInfiniteScroll.draw(htm);
-			}else{
-				if(totalCnt > Number($("#bestGoodsForm").find("input[name=pageSize]").val())){
-					if($("#bestGoodsForm input[name=pageNo]").val()==1){
-						$('#listBox').html('<li class="none">상품정보가 존재하지 않습니다.</li>');
-					}
-					$("#divLastPage").show();
-				}
-				gagaInfiniteScroll.draw('not');
+		var fnRealtimeViewBestList = function (cateNo){
+			if(gagajf.isNull(cateNo)){
+				cateNo = "";
 			}
+			var data = {cateNo : cateNo};
+			var html = '';
+
+			$.getJSON('/display/realtime/best/list' , data, function (result, status){
+				$("#itemViewArea").html('');
+				console.log(result);
+				if(result.length > 0){
+					$.each(result, function (idx, item){
+						var imgUrl = '';
+
+						html += '<div class="swiper-slide">\n';
+						html += '	<div class="item_prod">\n';
+						html += '		<div class="item_state">\n';
+						html += '			<a href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\''+item.itemId+'\')">\n';
+						html += '				<div class="itemPic">\n';
+						html += '				<img alt="BLACK-a" class=" vLHTC pd_img" src="' + item.imageUrl + '">\n';
+						html += '				</div>\n';
+						html += '				<div class="itemName">'+item.itemName+'</div>\n';
+						if(item.count < 10){
+							html += '				<div class="viewCount">10명 미만</div>\n';
+						}else{
+							html += '				<div class="viewCount">'+item.count.addComma()+'명 보는중</div>\n';
+						}
+						html += '			</a>\n';
+						html += '		</div>\n';
+						html += '	</div>\n';
+						html += '</div>\n';
+					});
+				}
+
+				$("#itemViewArea").append(html);
+				$("#researchBtn").attr("onclick","fnRealtimeViewBestList("+cateNo+");");
+				/* SLIDE - 지금많이 보고있어요 */
+				//210624_ 추가 : 슬라이드 속성 추가.
+				var dp_viewitem_slide = new Swiper('.view_item .swiper-container', {
+					slidesPerView: 'auto',
+					slidesPerView: 3,
+					spaceBetween: 8,
+					speed: 1000,
+					centerMode: true,
+					a11y: {
+						enabled: true,
+						notificationClass: 'swiper-notification',
+						prevSlideMessage: '이전 슬라이드',
+						nextSlideMessage: '다음 슬라이드',
+						firstSlideMessage: '첫번째 슬라이드 입니다',
+						lastSlideMessage: '마지막 슬라이드 입니다',
+						paginationBulletMessage: '슬라이드 {{index}}로 이동',
+					},
+					autoplay : {
+						delay : 3000,   // 시간 설정
+						disableOnInteraction: true,
+					},
+				});
+			});
 		}
 
-		// 사파리 - 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 = {};
-				}
-				fnBestListSearch();
-			}else{
-				fnCategoryGoodsInfiniteScrollInit();
+		var fnBestTop100List = function (){
+			gagajf.ajaxFormSubmit("/display/best/main/goods/list", document.bestGoodsForm,  fnCallbackBestTop100);
+		}
 
-				fnBestListSearch();
+		var fnCallbackBestTop100 = function (result){
+			$("#prodArea").html('');
+			var tag = '';
+			if(result.dataList.length > 0){
+				$.each(result.dataList, function (idx, item){
+					tag += '<div class="item_prod">\n';
+					tag += '	<div class="item_state">\n';
+					tag += '		<button type="button" class="itemLike" goodsCd=\''+item.goodsCd+'\' onclick="wishlistDelete(this)">관심상품 추가</button>\n';
+					tag += '		<a href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\''+item.goodsCd+'\', \''+item.colorCd+'\')">\n';
+					tag += '			<div class="itemPic">\n';
+					tag += '				<img alt="BLUE-a" class=" vLHTC pd_img" src="' + _uploadGoodsUrl + '/' + item.sysImgNm + '">\n';
+					tag += '			</div>\n';
+					tag += '			<p class="itemBrand">'+item.brandGroupNm+'</p>\n';
+					tag += '			<div class="itemName">'+item.goodsFullNm+'</div>\n';
+					tag += '			<p class="itemPrice">';
+					if (item.currPrice != item.listPrice) {
+						tag += '						<span class="itemPrice_original">' + item.listPrice.addComma() + '</span>\n';
+					}
+					tag += item.currPrice.addComma();
+					if (item.currPrice != item.listPrice) {
+						tag+='						<span class=" itemPercent">'+ Math.round((item.listPrice - item.currPrice) / (item.listPrice * 1.0) * 100) +'%</span>\n';
+					}
+					tag += '			</p>\n';
+					tag += '			<div class="itemcolorchip">\n';
+					if(!gagajf.isNull(item.colorChips)){
+						var colorArr = item.colorChips.split(",");
+						var colorCd = '';
+						var rgbColor = '';
+						for(let i=0; i<colorArr.length; i++){
+							var colorInfo = colorArr[i].split(":");
+							colorCd = colorInfo[0];
+							rgbColor = colorInfo[1];
+							if(rgbColor=='#FFFFFF'){
+								tag += '	<span class="chip_color" style="background-color: '+rgbColor+';border:1px solid #aaa;" value="'+colorCd+'">'+colorCd+'</span>\n';
+							}else{
+								tag += '	<span class="chip_color" style="background-color: '+rgbColor+'" value="'+colorCd+'">'+colorCd+'</span>\n';
+							}
+						}
+					}
+					tag += '			</div>\n';
+					if(!gagajf.isNull(item.icon)){
+						var iconArr = item.icon.split(",");
+						var iconGb = '';
+						var iconNm = '';
+						tag += '	<p class="itemBadge">\n';
+						let arrCnt;
+						if(iconArr.length > 2){
+							arrCnt = 3;
+						}else{
+							arrCnt = iconArr.length;
+						}
+						for(let i=0; i<arrCnt; i++){
+							var iconInfo = iconArr[i].split(":");
+							iconGb = iconInfo[0];
+							iconNm = iconInfo[1];
+							tag += '	<span class="badge13" value="'+iconGb+'">'+iconNm+' </span>\n';
+						}
+						tag += '	</p>';
+					}
+					if (item.goodsTnm != null && item.goodsTnm != '') {
+						tag+='					<div class="itemComment">'+item.goodsTnm+'</div>\n';
+					}
+					tag += '		</a>\n';
+					tag += '	</div>\n';
+					tag += '</div>\n';
+				});
+
+				$("#prodArea").append(tag);
 			}
+		}
+
+		$(document).ready(function() {
+			fnBestListSearch();
 		});
 
+
 		/*]]>*/
 	</script>
 

src/main/webapp/WEB-INF/views/web/display/BestMainFormWeb.html

@@ -45,33 +45,33 @@
 						</div>
 					</div>
 					<!-- 지금 많이 보고 있어요 -->
-					<div class="dp_best_live" id="itemViewArea">
+					<div class="dp_best_live">
 						<div class="sec_head">
 							<p class="dp_live_txt"><img src="/images/pc/dp_best_livetxt.jpg" alt="STYLE24 실시간 베스트 상품!   "></p>
 							<p class="displayH">지금 많이 <br> <span>보고 있어요</span></p>
-							<button type="button"><span><em class="time" th:text="${#calendars.format(#calendars.createNow(), 'HH:mm')}">17:30</em> 기준</span></button>
+							<button type="button" id="researchBtn"><span><em class="time" th:text="${#calendars.format(#calendars.createNow(), 'HH:mm')}">17:30</em> 기준</span></button>
 						</div>
-						<div class="sec_body">
+						<div class="sec_body" >
 							<div class="swiper-container dp_live_slider">
-								<div class="swiper-wrapper">
-									<th:block th:each="item, status : ${viewBestGoodsList}">
-										<div class="swiper-slide">
-											<div class="item_prod">
-												<div class="item_state">
-													<button type="button" class="itemLike" th:classappend="${item.wishCnt > 0} ? 'likeit active'" onclick="cfnPutWishList(this);" th:attr="goodscd=${item.itemId}">관심상품 추가</button>
-													<a th:href="${item.itemUrl}" class="itemLink">
-														<div class="itemPic">
-															<img alt="" class="vLHTC pd_img" th:src="${item.imageUrl}">
-														</div>
-														<div class="itemName" th:text="${item.itemName}"></div>
-														<div class="viewCount">
-															<span th:text="${item.count < 10 ? '10명 미만' : item.count + '명 보는중'}"></span>
-														</div>
-													</a>
-												</div>
-											</div>
-										</div>
-									</th:block>
+								<div class="swiper-wrapper" id="itemViewArea">
+<!--									<th:block th:each="item, status : ${viewBestGoodsList}">-->
+<!--										<div class="swiper-slide">-->
+<!--											<div class="item_prod">-->
+<!--												<div class="item_state">-->
+<!--													<button type="button" class="itemLike" th:classappend="${item.wishCnt > 0} ? 'likeit active'" onclick="cfnPutWishList(this);" th:attr="goodscd=${item.itemId}">관심상품 추가</button>-->
+<!--													<a th:href="${item.itemUrl}" class="itemLink">-->
+<!--														<div class="itemPic">-->
+<!--															<img alt="" class="vLHTC pd_img" th:src="${item.imageUrl}">-->
+<!--														</div>-->
+<!--														<div class="itemName" th:text="${item.itemName}"></div>-->
+<!--														<div class="viewCount">-->
+<!--															<span th:text="${item.count < 10 ? '10명 미만' : item.count + '명 보는중'}"></span>-->
+<!--														</div>-->
+<!--													</a>-->
+<!--												</div>-->
+<!--											</div>-->
+<!--										</div>-->
+<!--									</th:block>-->
 								</div>
 								<div class="swiper-controls">
 									<div class="swiper-scrollbar"></div>
@@ -123,43 +123,11 @@
 						</div>
 					</div>
 
-					<div id="infiniteContainer" class="list_content">
-						<div id="listBoxOuter" class="itemsGrp">
-							<ul class="productlist quarter" id="listBox">
-							</ul>
+					<div class="list_content">
+						<div class="itemsGrp" id="prodArea">
 						</div>
 					</div>
-<!--					<div class="list_content">-->
-<!--						<div class="itemsGrp" id="listBox"> -->
-							<!-- itemsGrp rank hot deal -->
-							<!--<div class="item_prod">
-								<div class="item_state">
-									<button type="button" class="itemLike">관심상품 추가</button>
-									<a href="#none" class="itemLink">
-										<div class="rank ranker"><span>1</span></div>
-										<div class="itemPic">
-											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
-										</div>
-										<p class="itemBrand">BRAND NAME</p>
-										<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-										<p class="itemPrice">80,100
-											<span class="itemPrice_original">89,000</span>
-											<span class=" itemPercent">10%</span>
-										</p>
-										<div class="itemcolorchip">
-											<span class="chip_color35" value="ABM">BEIGE</span>
-											<span class="chip_color54" value="BDS">BLACK</span>
-											<span class="chip_color40" value="YBR">WHITE</span>
-										</div>
-										<p class="itemBadge">
-											<span class="badge13">베스트 </span>
-										</p>
-										<div class="itemComment">#주문 폭주 상품</div>
-									</a>
-								</div>
-							</div>-->
-<!--						</div>-->
-<!--					</div>-->
+
 				</div>
 			</div>
 			<div class="last_page" id="divLastPage" style="display: none;">
@@ -175,9 +143,10 @@
 		<input type="hidden" name="sortGb"/>
 	</form>
 
-	<script src="/ux/plugins/gaga/gaga.infinite.scrollSession.js"></script>
-	<script src="/ux/plugins/jquery/jquery.history.min.js"></script>
-	<script th:src="@{'/biz/goods.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/goods.js"></script>
+<!-- 수동설정 + 추천솔루션 카운트 문제로 인해 인피티니스크롤 제거 협의 21-07-21 -->
+<!--	<script src="/ux/plugins/gaga/gaga.infinite.scrollSession.js"></script>-->
+<!--	<script src="/ux/plugins/jquery/jquery.history.min.js"></script>-->
+<!--	<script th:src="@{'/biz/goods.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/goods.js"></script>-->
 
 	<script th:inline="javascript">
 /*<![CDATA[*/
@@ -187,26 +156,9 @@
 		// 베스트TOP100 정렬
 		var select_sex = new sCombo('.select_sex.select_custom');
 		var select_age = new sCombo('.select_age.select_custom');
-
-		/* SLIDE - 지금많이 보고있어요 */
-		var dp_live_slide = new Swiper ('.dp_best_live .dp_live_slider', {
-			slidesPerView: 6,
-			spaceBetween: 20,
-			speed : 1000,
-			freeMode: true,
-			autoplay: false,
-			scrollbar: {
-				el: '.dp_best_live .swiper-scrollbar',
-				hide: false,
-			},
-		});
 	});
 
 	var fnBestListSearch = function (obj, cateNo){
-		// if(gagajf.isNull(cateNo)){
-		// 	cateNo = 0;
-		// }
-		console.log('here1');
 		$.each($("#cateListArea").find('li'), function() {
 			$(this).removeClass();
 		});
@@ -215,107 +167,141 @@
 		}else{
 			$("#li"+cateNo).addClass('active');
 		}
-
 		$("#bestGoodsForm input[name=cateNo]").val(cateNo);
 
 		// 카테고리별 실시간 베스트 상품 조회 getRealtimeViewBestGoodsList
-		// fnRealtimeViewBestList(cateNo);
+		fnRealtimeViewBestList(cateNo);
 
-		// fnCategoryGoodsInfiniteScrollInit();
-		gagaInfiniteScroll.getHistory();
+		// TOP100 조회
+		fnBestTop100List();
 	}
 
-	//
-/*
-		let fnRealtimeViewBestList = function(cateNo) {
-			$.getJSON('/display/realtime/best/list'
-					, function(result, status) {
-						if (result.length > 0) {
-							searchEngineAllCate = result;
-							// GNB탭 > 브랜드 생성
-							// fnCreateGnbBrandGroup();
-							fnCreateGnbTab();
-						}
-					});
-		}
-		*/
 	var fnRealtimeViewBestList = function (cateNo){
-		$("#bestGoodsForm input[name=cateNo]").val(cateNo);
-		gagajf.ajaxFormSubmit("/display/realtime/best/list", document.bestGoodsForm, callbackRealtimeView);
-	}
+		if(gagajf.isNull(cateNo)){
+			cateNo = "";
+		}
+		var data = {cateNo : cateNo};
+		var html = '';
 
-	var callbackRealtimeView = function (result){
-		console.log('[callbackRealtimeView]');
-		console.log('result::'+result);
-		console.log(result);
-		$("#itemViewArea").html('');
-	}
+		$.getJSON('/display/realtime/best/list' , data, function (result, status){
+			$("#itemViewArea").html('');
+			console.log(result);
+			if(result.length > 0){
+				$.each(result, function (idx, item){
+					var imgUrl = '';
+					html += '<div class="swiper-slide">\n';
+					html += '	<div class="item_prod">\n';
+					html += '		<div class="item_state">\n';
+					html += '		<button type="button" class="itemLike" onclick="wishlistDelete(this)">관심상품 추가</button>\n';
+					html += '		<a href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\''+item.itemId+'\')">\n';
+					html += '				<div class="itemPic">\n';
+					html += '					<img alt="" class="vLHTC pd_img" src="' + item.imageUrl + '">\n';
+					html += '				</div>\n';
+					html += '				<div class="itemName">'+item.itemName+'</div>\n';
+					if(item.count < 10){
+						html += '<div class="viewCount"><span>10명</span> 미만</div>\n';
+					}else{
+						html += '				<div class="viewCount"><span>'+item.count.addComma()+'</span>명 보는중</div>\n';
+					}
+					html += '			</a>\n';
+					html += '		</div>\n';
+					html += '	</div>\n';
+					html += '</div>\n';
+				});
 
-	var totalCnt = 0;
-	var idx = 1;
-	// 상품 검색
-	var fnGetInfiniteScrollDataList = function (pageNum){
-		console.log('here2');
-		console.log('here2 pageNum::'+pageNum);
-		$("#bestGoodsForm input[name=pageNo]").val(pageNum+1);
-		// if(idx==1 || totalCnt > Number($("#bestGoodsForm").find("input[name=pageSize]").val())){
-		// 	idx++;
-			gagajf.ajaxFormSubmit("/display/best/main/goods/list", document.bestGoodsForm,  gagaInfiniteScroll.jsonToHtml);
-		// }
+			}
+
+			$("#itemViewArea").append(html);
+			$("#researchBtn").attr("onclick","fnRealtimeViewBestList("+cateNo+");");
+			/* SLIDE - 지금많이 보고있어요 */
+			var dp_live_slide = new Swiper ('.dp_best_live .dp_live_slider', {
+				slidesPerView: 6,
+				spaceBetween: 20,
+				speed : 1000,
+				freeMode: true,
+				autoplay: false,
+				scrollbar: {
+					el: '.dp_best_live .swiper-scrollbar',
+					hide: false,
+				},
+			});
+		});
 	}
 
-	var fnDrawInfiniteScrollData = function (result){
-		console.log('here3');
-		console.log(result);
-		totalCnt = result.paging.totalCount;
-		gagaInfiniteScroll.pageStatus.totalCount = totalCnt;
-		var ithrCd = '';
-		var contentLoc = '';
-		let dataListLen = 0;
-		if(result.dataList != null){
-			dataListLen = result.dataList.length-1;
-		}
+	var fnBestTop100List = function (){
+		gagajf.ajaxFormSubmit("/display/best/main/goods/list", document.bestGoodsForm,  fnCallbackBestTop100);
+	}
 
-		if (dataListLen > 0) {
-			idx++;
-			var goodsUrl = [[${@environment.getProperty('upload.goods.view')}]];;
-			let lastPage = result.paging.pageNo;
-			let endRow = result.paging.endRow - result.paging.pageSize;
-			var htm = fnCreateGoodsList(result, ithrCd, contentLoc, goodsUrl, lastPage, endRow);
-			gagaInfiniteScroll.draw(htm);
-			console.log('1818');
-		}else{
-			if(idx > 1) { // 데이터가 1건 이상
-				if(totalCnt > Number($("#bestGoodsForm").find("input[name=pageSize]").val())){
-					if($("#bestGoodsForm input[name=pageNo]").val()==1){
-						$('#listBox').html('<li class="none">상품정보가 존재하지 않습니다.</li>');
+	var fnCallbackBestTop100 = function (result){
+		$("#prodArea").html('');
+		var tag = '';
+		if(result.dataList.length > 0){
+			$.each(result.dataList, function (idx, item){
+				tag += '<div class="item_prod">\n';
+				tag += '	<div class="item_state">\n';
+				tag += '		<button type="button" class="itemLike" goodsCd=\''+item.goodsCd+'\' onclick="wishlistDelete(this)">관심상품 추가</button>\n';
+				tag += '		<a href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\''+item.goodsCd+'\', \''+item.colorCd+'\')">\n';
+				tag += '			<div class="itemPic">\n';
+				tag += '				<img alt="BLUE-a" class=" vLHTC pd_img" src="' + _uploadGoodsUrl + '/' + item.sysImgNm + '">\n';
+				tag += '			</div>\n';
+				tag += '			<p class="itemBrand">'+item.brandGroupNm+'</p>\n';
+				tag += '			<div class="itemName">'+item.goodsFullNm+'</div>\n';
+				tag += '			<p class="itemPrice">'+item.currPrice.addComma();
+				if (item.currPrice != item.listPrice) {
+					tag+='						<span class="itemPrice_original">'+item.listPrice.addComma()+'</span>\n';
+					tag+='						<span class=" itemPercent">'+ Math.round((item.listPrice - item.currPrice) / (item.listPrice * 1.0) * 100) +'%</span>\n';
+				}
+				tag += '			</p>\n';
+				tag += '			<div class="itemcolorchip">\n';
+				if(!gagajf.isNull(item.colorChips)){
+					var colorArr = item.colorChips.split(",");
+					var colorCd = '';
+					var rgbColor = '';
+					for(let i=0; i<colorArr.length; i++){
+						var colorInfo = colorArr[i].split(":");
+						colorCd = colorInfo[0];
+						rgbColor = colorInfo[1];
+						if(rgbColor=='#FFFFFF'){
+							tag += '	<span class="chip_color" style="background-color: '+rgbColor+';border:1px solid #aaa;" value="'+colorCd+'">'+colorCd+'</span>\n';
+						}else{
+							tag += '	<span class="chip_color" style="background-color: '+rgbColor+'" value="'+colorCd+'">'+colorCd+'</span>\n';
+						}
 					}
-					$("#divLastPage").show();
 				}
-			}else{
+				tag += '			</div>\n';
+				if(!gagajf.isNull(item.icon)){
+					var iconArr = item.icon.split(",");
+					var iconGb = '';
+					var iconNm = '';
+					tag += '	<p class="itemBadge">\n';
+					let arrCnt;
+					if(iconArr.length > 2){
+						arrCnt = 3;
+					}else{
+						arrCnt = iconArr.length;
+					}
+					for(let i=0; i<arrCnt; i++){
+						var iconInfo = iconArr[i].split(":");
+						iconGb = iconInfo[0];
+						iconNm = iconInfo[1];
+						tag += '	<span class="badge13" value="'+iconGb+'">'+iconNm+' </span>\n';
+					}
+					tag += '	</p>';
+				}
+				if (item.goodsTnm != null && item.goodsTnm != '') {
+					tag+='					<div class="itemComment">'+item.goodsTnm+'</div>\n';
+				}
+				tag += '		</a>\n';
+				tag += '	</div>\n';
+				tag += '</div>\n';
+			});
 
-			}
-			console.log('18');
-			gagaInfiniteScroll.draw('not');
+			$("#prodArea").append(tag);
 		}
 	}
 
-	// 사파리 - 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 = {};
-			}
-			fnBestListSearch();
-			console.log('1');
-		}else{
-			fnCategoryGoodsInfiniteScrollInit();
-			console.log('2');
-			fnBestListSearch();
-		}
+	$(document).ready(function() {
+		fnBestListSearch();
 	});
 
 /*]]>*/

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

@@ -334,7 +334,7 @@
 			speed : 800,
 			autoWidth: true,
 			autoHeight: true,
-			observer: true,
+			observer: false,
 			centeredSlides: true,
 			autoplay: false,
 			nested: true,