베스트 메인(추천솔루션 부분 제외)

src/main/java/com/style24/front/biz/service/TsfDisplayService.java

@@ -379,6 +379,47 @@ public class TsfDisplayService {
 		return contentsList;
 	}
 
+	/**
+	 * BEST ITEM 카테고리 목록
+	 * @param
+	 * @return
+	 * @author bin2107
+	 * @date 2021. 4. 13
+	 */
+	public Collection<Contents> getBestItemCategoryList(Contents contents) {
+		return displayDao.getBestItemCategoryList(contents);
+	}
+
+	/**
+	 * BEST ITEM 카테고리별 상품 리스트
+	 * @param
+	 * @return
+	 * @author bin2107
+	 * @date 2021. 4. 13
+	 */
+	public Collection<Goods> getBestItemCategoryGoodsList(Contents contents) {
+		Cate4Srch cate4Srch = new Cate4Srch();
+
+		cate4Srch.setContentsLoc(contents.getContentsLoc());
+		cate4Srch.setPageable(contents.getPageable());
+		cate4Srch.setPageNo(contents.getPageNo());
+		cate4Srch.setPageSize(contents.getPageSize());
+		cate4Srch.setPageUnit(contents.getPageUnit());
+		cate4Srch.setCustNo(TsfSession.isLogin() ? TsfSession.getInfo().getCustNo() : 0);
+		cate4Srch.setCate1No(contents.getCateNo());
+		cate4Srch.setSiteCd(TscConstants.Site.STYLE24.value());
+		cate4Srch.setCateGb("G032_101");
+
+		Collection<Goods> goodsList = goodsDao.getContentsCategoryGoodsList(cate4Srch);
+
+		if(goodsList.size() < 100){
+			// TODO 추천솔루션
+		}
+
+		return goodsList;
+	}
+
+
 	/**
 	 * 상품카테고리 필터 목록
 	 * @param

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

@@ -146,6 +146,7 @@ public class TsfDisplayController extends TsfBaseController {
 			}
 
 			if (contentsLoc.equals("SMM004")) {
+				contents.setPageGb("MALL");
 				mainLayout.setBestItemList(displayService.getBestItemForGoods(contents));
 			}
 
@@ -617,4 +618,50 @@ public class TsfDisplayController extends TsfBaseController {
 		return displayService.getBrandCategoryList(brandGroupNo);
 	}
 
+	/**
+	 * 베스트 메인
+	 * @param
+	 * @return
+	 * @author bin2107
+	 * @since 2021. 4. 13
+	 */
+	@GetMapping("/best/main/form")
+	public ModelAndView bestMain(Contents contents) {
+		ModelAndView mav = new ModelAndView(super.getDeviceViewName("display/BestMainForm"));
+
+		contents.setContentsLoc("SCM003");
+		mav.addObject("bestCateList", displayService.getBestItemCategoryList(contents));
+
+		return mav;
+	}
+
+	/**
+	 * 베스트 메인 상품 리스트 조회
+	 * @param
+	 * @return
+	 * @author bin2107
+	 * @since 2021. 4. 13
+	 */
+	@PostMapping("/best/main/goods/list")
+	@ResponseBody
+	public GagaMap getBestMainGoodsList(@RequestBody Contents contents) {
+		GagaMap result = new GagaMap();
+		TscPageRequest pageable = new TscPageRequest((contents.getPageNo() > 0 ? contents.getPageNo() - 1 : 0), contents.getPageSize(), contents.getPageUnit());
+
+		contents.setContentsLoc("SCM003");
+		contents.setPageGb("BEST");
+		MainLayout mainLayout = new MainLayout();
+		mainLayout.setGoodsList(displayService.getBestItemCategoryGoodsList(contents));
+
+		int totalCnt = mainLayout.getGoodsList().size();
+		pageable.setTotalCount(totalCnt);
+		contents.setPageable(pageable);
+
+		result.set("paging", contents);
+		result.set("totalCnt", totalCnt);
+		result.set("endRow", pageable.getEndRow());
+		result.set("dataList", displayService.getBestItemCategoryGoodsList(contents));
+		return result;
+	}
+
 }

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

@@ -2,6 +2,7 @@ package com.style24.persistence.domain;
 
 import com.style24.persistence.TscBaseDomain;
 
+import com.style24.persistence.TscPageRequest;
 import lombok.Data;
 
 /**
@@ -51,4 +52,9 @@ public class Cate4Srch extends TscBaseDomain {
 	private String preview;			// 미리보기 여부 (Y:미리보기)
 
 	private String filterGb;		// 필터 구분값
+
+	private TscPageRequest pageable;				// 페이징
+	private int pageNo = 1;
+	private int pageSize = 50;
+	private int pageUnit = 10;
 }

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

@@ -1,6 +1,7 @@
 package com.style24.persistence.domain;
 
 import com.style24.persistence.TscBaseDomain;
+import com.style24.persistence.TscPageRequest;
 import lombok.Data;
 
 import java.util.Collection;
@@ -65,10 +66,17 @@ public class Contents extends TscBaseDomain {
 	private String cateGb;
 	private String cateNm;
 
+	private String pageGb;	// 호출페이지 구분(MALL:몰메인, BEST:베스트메인)
+
 	//private String contentsTitle;		// 메인 타이틀(md가 설정한)
 
 	private Collection<Cate1> cateList;	// 카테고리목록
 
 	private Collection<Goods> goodsList;	// 카테고리목록
 	private Collection<Contents> bannerList;	// 카테고리목록
+
+	private TscPageRequest pageable;				// 페이징
+	private int pageNo = 1;
+	private int pageSize = 50;
+	private int pageUnit = 10;
 }

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

@@ -1006,7 +1006,13 @@
 		            AND    B.USE_YN = 'Y'
 		            AND    BG.USE_YN = 'Y'
 		           ) G
-		    WHERE  G.NUMB <![CDATA[<=]]> #{maxRow}
+		    WHERE  1=1
+		<if test="pageable != null and pageable.endRow != null and pageable.endRow > 0">
+			AND  G.NUMB BETWEEN #{pageable.startRow} AND #{pageable.endRow}
+		</if>
+		<if test="maxRow != null and maxRow !=''">
+			AND  G.NUMB <![CDATA[<=]]> #{maxRow}
+		</if>
 		)
 		, TAB_GOODS_IMG AS (
 		    /* 상품의 이미지 */
@@ -1151,7 +1157,13 @@
 		            AND    B.USE_YN = 'Y'
 		            AND    BG.USE_YN = 'Y'
 		           ) G
-		    WHERE  G.NUMB <![CDATA[<=]]> #{maxRow}
+		    WHERE  1=1
+		<if test="pageable != null and pageable.endRow != null and pageable.endRow > 0">
+			AND  G.NUMB BETWEEN #{pageable.startRow} AND #{pageable.endRow}
+		</if>
+		<if test="maxRow != null and maxRow !=''">
+			AND  G.NUMB <![CDATA[<=]]> #{maxRow}
+		</if>
 		)
 		, TAB_GOODS_IMG AS (
 		    /* 상품의 이미지 */
@@ -1222,7 +1234,7 @@
 		                             AND W.CUST_NO = #{custNo}
 		</if>
 	</select>
-	
-	
+
+
 	
 </mapper>

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

@@ -0,0 +1,361 @@
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org"
+	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+	layout:decorator="web/common/layout/DefaultLayoutWeb">
+<!--
+ *******************************************************************************
+ * @source  : BestMainFormWeb.html
+ * @desc    : 베스트메인 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.04.13   bin2107     최초 작성
+ *******************************************************************************
+ -->
+<body>
+
+<th:block layout:fragment="content">
+	<div id="container" class="container dp">
+		<div class="breadcrumb">
+			<ul>
+				<li class="bread_home"><a href="index.html">홈</a></li>
+				<li class="bread_2depth">베스트</li>
+			</ul>
+		</div>
+		<div class="wrap">
+			<div class="content wide dp_best"> <!-- 페이지특정 클래스 = dp_best -->
+				<div class="cont_head">
+					<div>
+						<h3>베스트</h3>
+					</div>
+				</div>
+				<div class="cont_body">
+					<div class="taps">
+						<div>
+							<ul id="cateListArea">
+								<li class="active" id="li0"><a href="javascript:void(0);" onclick="fnBestListSearch(this,0);">전체</a></li>
+								<th:block th:each="item, stat : ${bestCateList}">
+									<li class="" th:id="${'li'+item.cateNo}"><a href="javascript:void(0);" th:onclick="fnBestListSearch(this,[[${item.cateNo}]]);" th:text="${item.cateNm}"></a></li>
+								</th:block>
+							</ul>
+						</div>
+					</div>
+					<!-- 지금 많이 보고 있어요 -->
+					<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">17:30</em> 기준</span></button>
+						</div>
+						<div class="sec_body">
+							<div class="swiper-container dp_live_slider">
+								<div class="swiper-wrapper">
+									<div class="swiper-slide">
+										<div class="item_prod">
+											<div class="item_state">
+												<button type="button" class="itemLike">관심상품 추가</button>
+												<a href="#none" class="itemLink">
+													<div class="itemPic">
+														<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
+													</div>
+													<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
+													<div class="viewCount"><span>508</span>명 보는중</div>
+												</a>
+											</div>
+										</div>
+									</div>
+									<div class="swiper-slide">
+										<div class="item_prod">
+											<div class="item_state">
+												<button type="button" class="itemLike">관심상품 추가</button>
+												<a href="#none" class="itemLink">
+													<div class="itemPic">
+														<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
+													</div>
+													<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
+													<div class="viewCount"><span>508</span>명 보는중</div>
+												</a>
+											</div>
+										</div>
+									</div>
+									<div class="swiper-slide">
+										<div class="item_prod">
+											<div class="item_state">
+												<button type="button" class="itemLike">관심상품 추가</button>
+												<a href="#none" class="itemLink">
+													<div class="itemPic">
+														<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
+													</div>
+													<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
+													<div class="viewCount"><span>508</span>명 보는중</div>
+												</a>
+											</div>
+										</div>
+									</div>
+									<div class="swiper-slide">
+										<div class="item_prod">
+											<div class="item_state">
+												<button type="button" class="itemLike">관심상품 추가</button>
+												<a href="#none" class="itemLink">
+													<div class="itemPic">
+														<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
+													</div>
+													<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
+													<div class="viewCount"><span>508</span>명 보는중</div>
+												</a>
+											</div>
+										</div>
+									</div>
+									<div class="swiper-slide">
+										<div class="item_prod">
+											<div class="item_state">
+												<button type="button" class="itemLike">관심상품 추가</button>
+												<a href="#none" class="itemLink">
+													<div class="itemPic">
+														<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
+													</div>
+													<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
+													<div class="viewCount"><span>508</span>명 보는중</div>
+												</a>
+											</div>
+										</div>
+									</div>
+									<div class="swiper-slide">
+										<div class="item_prod">
+											<div class="item_state">
+												<button type="button" class="itemLike">관심상품 추가</button>
+												<a href="#none" class="itemLink">
+													<div class="itemPic">
+														<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
+													</div>
+													<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
+													<div class="viewCount"><span>508</span>명 보는중</div>
+												</a>
+											</div>
+										</div>
+									</div>
+									<div class="swiper-slide">
+										<div class="item_prod">
+											<div class="item_state">
+												<button type="button" class="itemLike">관심상품 추가</button>
+												<a href="#none" class="itemLink">
+													<div class="itemPic">
+														<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
+													</div>
+													<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
+													<div class="viewCount"><span>508</span>명 보는중</div>
+												</a>
+											</div>
+										</div>
+									</div>
+									<div class="swiper-slide">
+										<div class="item_prod">
+											<div class="item_state">
+												<button type="button" class="itemLike">관심상품 추가</button>
+												<a href="#none" class="itemLink">
+													<div class="itemPic">
+														<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
+													</div>
+													<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
+													<div class="viewCount"><span>508</span>명 보는중</div>
+												</a>
+											</div>
+										</div>
+									</div>
+								</div>
+								<div class="swiper-controls">
+									<div class="swiper-scrollbar"></div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<!-- 지금 많이 보고 있어요 -->
+				</div>
+			</div>
+			<div class="content dp_best_top100">
+				<div class="cont_head">
+					<div>
+						<h3>베스트 TOP100</h3>
+					</div>
+				</div>
+				<div class="cont_body">
+					<div class="ui_row">
+						<div class="ui_col_12">
+							<form class="form_wrap">
+								<div class="form_field">
+									<div class="select_custom select_sex">
+										<div class="combo">
+											<div class="select">구매 성별 전체</div>
+											<ul class="list">
+												<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" 추가  -->
+												<li class="selected">전체</li>
+												<li>남성</li>
+												<li>여성</li>
+											</ul>
+										</div>
+									</div>
+									<div class="select_custom select_age">
+										<div class="combo">
+											<div class="select">구매 연령 전체</div>
+											<ul class="list">
+												<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" 추가  -->
+												<li class="selected">전체</li>
+												<li>10대</li>
+												<li>20대</li>
+												<li>30대</li>
+												<li>40대</li>
+												<li>50대 이상</li>
+											</ul>
+										</div>
+									</div>
+								</div>
+							</form>
+						</div>
+					</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"> <!-- 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">
+				<span>마지막 페이지입니다.</span>
+			</div>
+		</div>
+	</div>
+
+	<form id="bestGoodsForm" name="bestGoodsForm">
+		<input type="hidden" name="pageNo" id="pageNo" value ="1"/>
+		<input type="hidden" name="pageSize" value ="30"/>
+		<input type="hidden" name="cateNo" value=""/>
+		<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/goodsSession.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/goodsSession.js"></script>
+
+	<script th:inline="javascript">
+/*<![CDATA[*/
+	var bestCateList = [[${bestCateList}]];
+
+	$(document).ready( function() {
+		// 베스트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;
+		}
+
+		$.each($("#cateListArea").find('li'), function() {
+			$(this).removeClass();
+		});
+		$("#li"+cateNo).addClass('active');
+		$("#bestGoodsForm input[name=cateNo]").val(cateNo);
+		fnCategoryGoodsInfiniteScrollInit();
+		gagaInfiniteScroll.getHistory();
+	}
+
+	// 상품 검색
+	var fnGetInfiniteScrollDataList = function (pageNum){
+		$("#bestGoodsForm input[name=pageNo]").val(pageNum+1);
+		gagajf.ajaxFormSubmit("/display/best/main/goods/list", document.bestGoodsForm,  gagaInfiniteScroll.jsonToHtml);
+	}
+
+	var fnDrawInfiniteScrollData = function (result){
+		let 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);
+			gagaInfiniteScroll.draw(htm);
+		}else{
+			if($("#bestGoodsForm input[name=pageNo]").val()==1){
+				$('#listBox').html('<li class="none">상품정보가 존재하지 않습니다.</li>');
+			}
+			gagaInfiniteScroll.draw('not');
+		}
+	}
+
+	// 사파리 - 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();
+
+			fnBestListSearch();
+		}
+	});
+
+/*]]>*/
+</script>
+
+</th:block>
+
+</body>
+</html>

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

@@ -361,7 +361,6 @@
 		}
 
 		var fnDrawInfiniteScrollData = function (result){
-			console.log('fnDrawInfiniteScrollData');
 			let totalCnt = result.totalCnt;
 			$("#totCntId").text(totalCnt.addComma());
 			gagaInfiniteScroll.pageStatus.totalCount = result.totalCnt;
@@ -373,7 +372,6 @@
 				let lastPage = result.paging.pageable.pageNo;
 				let endRow = result.endRow - result.paging.pageable.pageSize;
 				var htm = fnCreateGoodsList(result, ithrCd, contentLoc, goodsUrl, lastPage, endRow);
-				console.log('1234');
 				gagaInfiniteScroll.draw(htm);
 			}else {
 				if($("#searchForm input[name=pageNo]").val()==1){

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

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

src/main/webapp/biz/goodsSession.js

@@ -3,8 +3,6 @@ var categoryGoodsList = [];
 var cnt = 1;
 var email = '';
 var fnCreateGoodsList = function(result, ithrCd, contentLoc, goodsUrl, lastPage, endRow) {
-	console.log('fnCreateGoodsList');
-
 	var tag = '';
 	var rank = 0;
 	if(lastPage!='1'){
@@ -48,7 +46,7 @@ var fnCreateGoodsList = function(result, ithrCd, contentLoc, goodsUrl, lastPage,
 		tag += '	</div>';
 		tag += '</div>';
 	});
-	console.log('fnCreateGoodsList11');
+
 	if (cnt == 1) {
 		// <!-- Criteo 카테고리/리스팅 태그 -->
 		window.criteo_q = window.criteo_q || [];
@@ -62,7 +60,7 @@ var fnCreateGoodsList = function(result, ithrCd, contentLoc, goodsUrl, lastPage,
 		// <!-- END 카테고리/리스팅 태그 -->
 		cnt++;
 	}
-	console.log('fnCreateGoodsList1122233');
+
 	return tag;
 }
 

src/main/webapp/ux/style24_link.js

@@ -10,6 +10,7 @@ const _PAGE_ALL_BRAND = _frontUrl + "/display/all/brand/form";			// 전체 브
 const _PAGE_CATE_MAIN = _frontUrl + "/display/category/main/form";		// 카테고리메인
 const _PAGE_BRAND_MAIN = _frontUrl + "/display/brand/main/form";		// 브랜드메인
 const _PAGE_CATE_GOODS_LIST = _frontUrl + "/display/category/goods/list/form";	// 카테고리 상품목록
+const _PAGE_BEST_MAIN = _frontUrl + "/display/best/main/form";		// 베스트메인
 
 //== 고객 ==/
 const _PAGE_CUSTOMER_JOIN_TYPE = _frontUrl + "/customer/join/type/form";							// 고객 > 회원가입 유형