룩북 수정

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

@@ -481,15 +481,21 @@ public class TsfDisplayController extends TsfBaseController {
 	@ResponseBody
 	public GagaMap lookbooklist(@RequestBody Lookbook params){
 		GagaMap result = new GagaMap();
-		params.setPageable(new TscPageRequest(params.getPageNo() - 1, params.getPageSize()));
-		params.getPageable().setTotalCount(coreLookbookService.getLookbookListCount(params));
+		TscPageRequest pageable = new TscPageRequest((params.getPageNo() > 0 ? params.getPageNo() - 1 : 0), params.getPageSize(), params.getPageUnit());
+		pageable.setTotalCount(coreLookbookService.getLookbookListCount(params));
 
-		Collection<Lookbook> lookbookList = coreLookbookService.getLookbookList(params);
-		result.set("pageing", params);
-		result.set("lookbookList", lookbookList);
+		params.setPageable(pageable);
+		result.set("paging", pageable);
+		result.set("dataList", coreLookbookService.getLookbookList(params));
 		return result;
 	}
 
+	@GetMapping("/lookbook/main/brand/list")
+	@ResponseBody
+	public Collection<Lookbook> lookbookBrandList(Lookbook lookbook){
+		return coreLookbookService.lookbookBrandList(lookbook);
+	}
+
 	/**
 	 * 룩북 상세
 	 * @param lookbook

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

@@ -27,7 +27,7 @@
 				<div class="list_content"> <!-- 데이터 없을시 클래스 nodata 추가 -->
 					<div class="count_wrap">
 						<div>
-							<p><span id="totCnt"></span>개의 상품</p>
+							<p><span id="lookbookTotCnt"></span>개의 상품</p>
 						</div>
 						<div>
 							<ul class="dp_util">
@@ -54,13 +54,15 @@
 					<div class="lookbookGrp">
 						<div class="swiper_filter brand" id="filterChkArea">
 							<div class="cate_wrap" id="chkBrand">
-								<a href="javascript:void(0);" onclick="fnReset();">전체</a>
+								<a href="javascript:void(0);" onclick="fnLookbookReset();">전체</a>
 							</div>
-							<div class="btnbox"><a href="javascript:void(0);" class="reset" onclick="fnReset();">새로고침</a></div>
+							<div class="btnbox"><a href="javascript:void(0);" class="reset" onclick="fnLookbookReset();">새로고침</a></div>
+						</div>
+						<div class="list_content">
+							<ul class="event_con itemsGrp" id="listBox">
+							</ul>
 						</div>
-						<ul class="event_con" id="lookbookArea">
 
-						</ul>
 					</div>
 					<div class="list_last">마지막페이지 입니다.</div>
 				</div>
@@ -82,7 +84,7 @@
 			</div>
 			<div class="brand_floormenu"><!--  ☞☞ 제품이 품절되면 soldout클래스 추가 -->
 				<div class="share_like">
-					<button class="refresh" onclick="fnReset();">초기화</button>
+					<button class="refresh" onclick="fnReset1();">초기화</button>
 					<!--<button class="like">위시리스트</button>-->
 				</div>
 				<div class="prd_buy">
@@ -93,6 +95,18 @@
 		</div>
 	</main>
 
+	<form id="lbMainForm" name="lbMainForm">
+		<input type="hidden" name="pageNo" id="pageNo" value ="1"/>
+		<input type="hidden" name="pageSize" value ="30"/>
+		<input type="hidden" name="lookbookGb" th:value="${lbInfo.lookbookGb}"/>
+		<input type="hidden" name="brandCd" th:value="${lbInfo.brandCd}">
+		<input type="hidden" name="frontYn" value="Y"/>
+		<input type="hidden" name="totalCnt" />
+	</form>
+
+<script src="/ux/plugins/gaga/gaga.infinite.scrollSession.js"></script>
+<script src="/ux/plugins/jquery/jquery.history.min.js"></script>
+
 <script th:inline="javascript">
 	/*<![CDATA[*/
 	var currUrl = document.location.href;
@@ -106,7 +120,139 @@
 	}
 	var brandCd = [[${lbInfo.brandCd}]];
 
-	let fnGetLookbookList = function (lookbookGb, brandGroupNo){
+	var fnLookbookListSearch = function (){
+		gagaInfiniteScroll.getHistory();
+	}
+
+	var fnGetInfiniteScrollDataList = function (pageNum){
+		$("#lbMainForm input[name=pageNo]").val(pageNum+1);
+		gagajf.ajaxFormSubmit("/display/lookbook/main/list", document.lbMainForm,  gagaInfiniteScroll.jsonToHtml);
+	}
+
+	var fnDrawInfiniteScrollData = function (result){
+		let totalCnt = result.paging.totalCount;
+		$("#lookbookTotCnt").text(totalCnt);
+		$("#lbMainForm").find("input[name=totalCnt]").val(totalCnt);
+		gagaInfiniteScroll.pageStatus.totalCount = totalCnt;
+
+		if (result.dataList != null && result.dataList.length > 0) {
+			$(".nodata").hide();
+			let lastPage = result.paging.pageNo;
+			let endRow = result.paging.endRow - result.paging.pageSize;
+
+			var htm = fnGetLookbookList(result);
+			gagaInfiniteScroll.draw(htm);
+		}else{
+			if($("#lbMainForm input[name=pageNo]").val()==1){
+				$("#divLookbookNoData").show();
+			}else{
+				$("#divLastPage").show();
+			}
+			gagaInfiniteScroll.draw('not');
+		}
+	}
+
+	let fnGetLookbookList = function (result){
+		var html = '';
+
+		$.each(result.dataList, function (idx, item){
+			html += '<li>\n';
+			html += '	<a href="javascript:void(0);" onclick="cfnGoToLookbookDetail(\''+lookbookGb+'\','+item.lookbookSq+','+item.brandCd+')">\n';
+			html += '		<div class="ev_img">\n';
+			html += '			<img src="' + _imgUrl + item.orgTnfileNm + '" alt="ATTENTION! 20FW HOLIDAY TBJ 주목할 홀리데이 TBJ 컬렉션">\n';
+			html += '		</div>\n';
+			html += '		<div class="ev_txt">\n';
+			if(lookbookGb != 'BL') {
+				html += '			<p class="brand">' + item.brandNm + '</p>\n';
+			}
+			html += '			<p class="tit">'+item.title+'</p>\n';
+			html += '		</div>\n';
+			html += '	</a>\n';
+			html += '</li>\n';
+		});
+		return html;
+	}
+
+	// 브랜드 리스트 가져오기
+	let fnGetBrandList = function (){
+		let actionUrl = '/display/lookbook/main/brand/list?frontYn=Y';
+		$.getJSON(actionUrl, function(result, status){
+			if(result.length > 0){
+				$('#brandArea').html('');
+				let tag = '';
+				tag += '<button type="button" data-name="" id="chkFilterBrand" class="on" onclick="fnAddBrand(\'\');"><span>전체</span></button>\n';
+				$.each(result, function(idx, item) {
+					tag += '<button type="button" id="chkFilterBrand'+idx+'" data-name="'+item.brandCd+'" onclick="fnAddBrand(\''+item.brandCd+'\');"><span>'+item.brandNm+'</span></button>\n';
+				});
+				$('#brandArea').html(tag);
+			}
+		});
+	}
+
+	// 브랜드 선택 적용
+	var fnGetBrandLookbookList = function (){
+		$("#lbMainForm input:hidden[name=multiBrandCd]").remove();
+		var tag = '';
+		var tag2 = '';
+		$('#chkBrand').html('');
+		$(".button_list button").each(function (index) {
+			if($(this).hasClass("on")){
+				if(!gagajf.isNull($(this).attr('data-name'))){
+					tag += '<input type="hidden" name="multiBrandCd" value="'+$(this).attr('data-name')+'" />';
+					$("#lbMainForm").append(tag);
+
+					var brandCd = $(this).attr("data-name");
+					var brandNm = $(this).find('span').text();
+					tag2 += '<a href="javascript:void(0);" onclick="fnDeleteBrandFilter(\''+brandCd+'\');">'+brandNm+'</a>';
+					$('#chkBrand').html(tag2);
+				}else{
+					$(this).addClass("on");
+					tag2 += '<a href="javascript:void(0);" onclick="fnDeleteBrandFilter("");">전체</a>';
+					$('#chkBrand').html(tag2);
+				}
+			}
+		});
+
+		var chkLen = $("#chkBrand").find('a').length;
+		if(chkLen < 1){
+			$('#chkBrand').html('<a href="javascript:void(0);" onclick="fnDeleteBrandFilter("");">전체</a>');
+			$(".button_list button").each(function (index) {
+				if(gagajf.isNull($(this).attr('data-name'))){
+					$(this).addClass("on");
+				}
+			});
+		}
+
+		fnLookbookInfiniteScrollInit();
+		fnLookbookListSearch();
+	}
+
+	// 브랜드 선택 초기화
+	var fnLookbookReset = function (){
+		$("#lbMainForm input:hidden[name=multiBrandCd]").remove();
+
+		var tag2 = '';
+		tag2 += '<a href="javascript:void(0);" onclick="fnDeleteBrandFilter(\'\');">전체</a>';
+		$('#chkBrand').html(tag2);
+
+		$(".button_list button").each(function (index) {
+			$(this).removeClass("on");
+		});
+
+		$("#chkFilterBrand").addClass('on');
+
+		fnLookbookInfiniteScrollInit();
+		fnLookbookListSearch();
+		//fnGetBrandLookbookList();
+	}
+
+	// 인피니티 스크롤 초기화
+	var fnLookbookInfiniteScrollInit = function (){
+		sessionStorage.removeItem(document.location.href);
+		$("#listBox").html("");
+	}
+
+	let fnGetLookbookList2 = function (lookbookGb, brandGroupNo){
 		let actionUrl = '/display/lookbook/main/list?lookbookGb='+lookbookGb;
 		if (!gagajf.isNull(brandGroupNo)) actionUrl += '&multiBrandCd=' + brandGroupNo;
 
@@ -120,7 +266,7 @@
 						let tag = '';
 						let tag3 = '';
 						let brandArr = [];
-						tag += '<button type="button" data-name="" class="on" onclick="fnAddBrand(\'\');"><span>전체</span></button>\n';
+						tag += '<button type="button" data-name="" id="chkFilterBrand" class="on" onclick="fnAddBrand(\'\');"><span>전체</span></button>\n';
 						$.each(result, function(idx, item) {
 							if(!brandArr.includes(item.brandCd)){
 								brandArr.push(item.brandCd);
@@ -197,25 +343,9 @@
 		});
 	}
 
-	// 선택된 브랜드 조회
-	var fnGetBrandLookbookList = function (){
-		var multiBrandCd = [];
-		$(".button_list button").each(function (index) {
-			if($(this).hasClass("on")){
-				multiBrandCd.push($(this).attr('data-name'));
-			}
-		});
-		$('#chkBrand').html('');
-		fnGetLookbookList(lookbookGb,multiBrandCd);
-	}
-
 	// 초기화버튼
 	var fnReset = function (){
-		// var multiBrandCd = [];
-		// $('#chkBrand').html('');
-		// fnGetLookbookList(lookbookGb,multiBrandCd);
-		// $(".popup_close").click();
-		document.location.href = currUrl;
+		$('.reset').click();
 	}
 
 	// 리스트상단 필터 리스트에서 삭제 시
@@ -232,12 +362,19 @@
 	}
 
 	$(document).ready(function(){
-		fnGetLookbookList(lookbookGb,brandCd);
+		// fnGetLookbookList(lookbookGb,brandCd);
+		//fnLookbookListSearch();
+		fnLookbookReset();
 
 		if(lookbookGb=='BL'){
 			$("#btnHome").attr('onclick', 'cfnGoToBrandMain('+brandCd+');');
 		}else{
 			$("#btnHome").attr('href', '/');
+			fnGetBrandList();
+		}
+
+		if(!gagajf.isNull($("#lbMainForm").find("input[name=totalCnt]").val())){
+			$("#lookbookTotCnt").text($("#lbMainForm").find("input[name=totalCnt]").val());
 		}
 
 		$(document).on('click','.sub_category .more_btn',function(){
@@ -274,6 +411,7 @@
 		});
 		$(document).on('click','.brand_floormenu .refresh',function(){
 			$('.popup_box .button_list button').removeClass('on');
+			$('#chkFilterBrand').addClass('on');
 		});
 		$(document).on('click','.popup_box .buying',function(){
 			$(this).parents('.popup_box').hide().removeClass('active');

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

@@ -50,7 +50,7 @@
 
 												</ul>
 												<div class="ui_row">
-													<button type="button" class="fillter_reset" onclick="fnGetLookbookList();"><span>초기화</span></button>
+													<button type="button" class="fillter_reset" onclick="fnLookbookReset();"><span>초기화</span></button>
 													<button type="button" class="fillter_apply" onclick="fnGetBrandLookbookList();"><span>적용</span></button>
 												</div>
 											</div>
@@ -59,17 +59,17 @@
 								</div>
 							</div>
 
-							<div id="infiniteContainer">
-								<div id="listBoxOuter" class="itemsGrp">
-									<ul class="productlist quarter" >
-									</ul>
-								</div>
-							</div>
-
 							<div class="list">
-								<ul class="clear event_con" id="listBox" style="display: none;"> <!--id="lookbookArea"-->
+								<section id="infiniteContainer">
+									<div id="listBoxOuter">
+										<ul class="clear event_con" id="listBox"> <!--id="lookbookArea"-->
 
-								</ul>
+										</ul>
+									</div>
+								</section>
+								<div class="last_page" id="divLastPage" style="display: none;">
+									<span>마지막 페이지입니다.</span>
+								</div>
 								<ul class="clear no_con" id="divLookbookNoData" style="display: none;">
 									<li>
 										<p><img src="/images/pc/ico_content_none.png" alt="등록된 이벤트가 없습니다."></p>
@@ -90,7 +90,8 @@
 			<input type="hidden" name="pageSize" value ="30"/>
 			<input type="hidden" name="lookbookGb" th:value="${lbInfo.lookbookGb}"/>
 			<input type="hidden" name="brandCd" th:value="${lbInfo.brandCd}">
-			<input type="hidden" name="multiBrandCd" />
+			<input type="hidden" name="frontYn" value="Y"/>
+			<input type="hidden" name="totalCnt" />
 		</form>
 
 <script src="/ux/plugins/gaga/gaga.infinite.scrollSession.js"></script>
@@ -114,28 +115,30 @@
 	}
 
 	var fnDrawInfiniteScrollData = function (result){
-		let totalCnt = result.totalCnt;
+		let totalCnt = result.paging.totalCount;
 		$("#lookbookTotCnt").text(totalCnt);
+		$("#lbMainForm").find("input[name=totalCnt]").val(totalCnt);
 		gagaInfiniteScroll.pageStatus.totalCount = totalCnt;
 
 		if (result.dataList != null && result.dataList.length > 0) {
 			$(".nodata").hide();
-			let lastPage = result.paging.pageable.pageNo;
-			let endRow = result.endRow - result.paging.pageable.pageSize;
+			let lastPage = result.paging.pageNo;
+			let endRow = result.paging.endRow - result.paging.pageSize;
 
-			var htm = fnGetLookbookList(result, lastPage, endRow);
+			var htm = fnGetLookbookList(result);
 			gagaInfiniteScroll.draw(htm);
 		}else{
 			if($("#lbMainForm input[name=pageNo]").val()==1){
-				//$(".nodata").show();
+				$("#divLookbookNoData").show();
+			}else{
+				$("#divLastPage").show();
 			}
-			//$("#divLastPage").show();
 			gagaInfiniteScroll.draw('not');
 		}
 	}
 
 	let fnGetLookbookList = function (result){
-		let html = '';
+		var html = '';
 
 		$.each(result.dataList, function (idx, item){
 			html += '<li>';
@@ -155,88 +158,71 @@
 		return html;
 	}
 
-	let fnGetLookbookList2 = function (lookbookGb, brandGroupNo){
-		let actionUrl = '/display/lookbook/main/list?lookbookGb='+lookbookGb;
-		if (!gagajf.isNull(brandGroupNo)) actionUrl += '&multiBrandCd=' + brandGroupNo;
-		$('#lookbookArea').html('');
-		$('#divLookbookNoData').hide();
-
-		$.getJSON(actionUrl
-			, function (result, status){
-				if (status == 'success'){
-					if (result.length > 0){
-						$('#lookbookTotCnt').html('<span>' + result.length.addComma() + '</span>');
-
-						if (gagajf.isNull(brandGroupNo)){
-							$('#brandArea').html('');
-							let tag = '';
-							let brandArr = [];
-							$.each(result, function(idx, item) {
-								if(!brandArr.includes(item.brandCd)){
-									brandArr.push(item.brandCd);
-									tag += '<li>';
-									tag += '	<label class="brand_btn">';
-									tag += '		<input type="checkbox" group="filterValue" id="chkFilterBrand'+idx+'" data-name="chkFilterBrand'+idx+'" name="filterBrandCds" value="'+item.brandCd+'"><span>'+item.brandNm+'</span>';
-									tag += '	</label>';
-									tag += '</li>';
-								}
-							});
-							$('#brandArea').html(tag);
-						}
-
-						$('#lookbookArea').html('');
-						let tag2 = '';
-						tag2 += '<ul class="clear event_con" id="lookbookArea" style="display: block;">';
-						$.each(result, function(idx, item) {
-							tag2 += '<li>';
-							tag2 += '	<a href="javascript:void(0);" onclick="cfnGoToLookbookDetail(\''+lookbookGb+'\','+item.lookbookSq+','+item.brandCd+')">';
-							tag2 += '		<div class="ev_img">';
-							tag2 += '			<img src="' + _imgUrl + item.orgTnfileNm + '" alt="" style="height:100%">';
-							tag2 += '		</div>';
-							tag2 += '		<div class="txt">';
-							if(lookbookGb != 'BL') {
-								tag2 += '			<span class="brand">' + item.brandNm + '</span>';
-							}
-							tag2 += '			<p class="tit">'+item.title+'</p>';
-							tag2 += '		</div>';
-							tag2 += '	</a>';
-							tag2 += '</li>';
-						});
-						tag2 += '</ul>';
-
-						$('#lookbookArea').html(tag2);
-						$('#divLookbookNoData').hide();
-						$('#lookbookArea').show();
-					}else{
-						$('#lookbookTotCnt').html('<span>0</span>');
-						document.getElementById("changeClass").className = "event_list no_data";
-						$('#lookbookArea').hide();
-						$('#divLookbookNoData').show();
-					}
-				}
-				document.getElementById("brandBox").className = "btn btn_default tgl_dropdown";
-				$('.dropdown_menu').hide();
-			});
+	// 브랜드 리스트 가져오기
+	let fnGetBrandList = function (){
+		let actionUrl = '/display/lookbook/main/brand/list?frontYn=Y';
+		$.getJSON(actionUrl, function(result, status){
+			if(result.length > 0){
+				$('#brandArea').html('');
+				let tag = '';
+				$.each(result, function(idx, item) {
+					tag += '<li>';
+					tag += '	<label class="brand_btn">';
+					tag += '		<input type="checkbox" group="filterValue" id="chkFilterBrand'+idx+'" data-name="chkFilterBrand'+idx+'" name="filterBrandCds" value="'+item.brandCd+'"><span>'+item.brandNm+'</span>';
+					tag += '	</label>';
+					tag += '</li>';
+				});
+				$('#brandArea').html(tag);
+			}
+		});
 	}
 
+	// 브랜드 선택 적용
 	var fnGetBrandLookbookList = function (){
-		var multiBrandCd = [];
+		$("#lbMainForm input:hidden[name=multiBrandCd]").remove();
+		var tag = '';
 		$("input:checkbox:checked").each(function (index) {
-			multiBrandCd.push($(this).val());
+			tag += '<input type="hidden" name="multiBrandCd" value="'+$(this).val()+'" />';
+			$("#lbMainForm").append(tag);
+		});
+
+		fnLookbookInfiniteScrollInit();
+		fnLookbookListSearch();
+	}
+
+	// 브랜드 선택 초기화
+	var fnLookbookReset = function (){
+		$("#lbMainForm input:hidden[name=multiBrandCd]").remove();
+
+		$("#brandArea").find('input[name=filterBrandCds]').each(function(idx, item){
+			$(this).prop("checked",false);
 		});
 
-		fnGetLookbookList(lookbookGb,multiBrandCd);
+		fnLookbookInfiniteScrollInit();
+		fnLookbookListSearch();
+	}
+
+	// 인피니티 스크롤 초기화
+	var fnLookbookInfiniteScrollInit = function (){
+		sessionStorage.removeItem(document.location.href);
+		$("#listBox").html("");
 	}
 
 	$(document).ready(function() {
 		//$("#container .wrap .content .cont_body .event_list .event_top .ui_row .count").find('span').text(totalCnt.addComma());
 		//fnGetLookbookList(lookbookGb,brandCd);
 		fnLookbookListSearch();
+
 		if(lookbookGb=='BL'){
 			$("#brandBox").hide();
 			$("#navHome").attr('onclick', 'cfnGoToBrandMain('+brandCd+');');
 		}else{
 			$("#navHome").attr('href', '/');
+			fnGetBrandList();
+		}
+
+		if(!gagajf.isNull($("#lbMainForm").find("input[name=totalCnt]").val())){
+			$("#lookbookTotCnt").text($("#lbMainForm").find("input[name=totalCnt]").val());
 		}
 	});