룩북상세 수정 임시커밋

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

@@ -1889,13 +1889,13 @@
 		                     , G.REVIEW_REG_CNT                                         /*리뷰등록건수*/
 		                <choose>
 		                    <when test="sortingType == 'BEST'"> <!-- 인기상품순 -->
-		                        , ROW_NUMBER() OVER(ORDER BY G.FORMAL_GB, G.SELL_WEEK_QTY DESC, G.GOODS_CD) AS NUMB
+		                        , ROW_NUMBER() OVER(ORDER BY G.SELL_WEEK_QTY DESC, G.GOODS_CD) AS NUMB
 		                    </when>
 		                    <when test="sortingType == 'REVIEW'"> <!-- 리뷰많은순 -->
-		                        , ROW_NUMBER() OVER(ORDER BY G.FORMAL_GB, G.REVIEW_REG_CNT DESC, G.GOODS_CD) AS NUMB
+		                        , ROW_NUMBER() OVER(ORDER BY G.REVIEW_REG_CNT DESC, G.GOODS_CD) AS NUMB
 		                    </when>
 		                    <otherwise> <!-- 최신상품순 -->
-		                        , ROW_NUMBER() OVER(ORDER BY G.FORMAL_GB, G.REG_DT DESC, G.GOODS_CD) AS NUMB
+		                        , ROW_NUMBER() OVER(ORDER BY G.REG_DT DESC, G.GOODS_CD) AS NUMB
 		                    </otherwise>
 		                </choose>
 		                FROM   TAB_GOODS G

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

@@ -39,7 +39,7 @@
 								<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" />
+											<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>
@@ -53,168 +53,59 @@
 							<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="content br_lookbook_view cont_txts" th:if="${lookbookDetailList != null}">
+				<div class="cont_body">
+					<th:block th:each="item, stat : ${lookbookDetailList}">
+						<div class="text_cont" th:text="${item.imgDesc}">
+						</div>
+					</th:block>
+				</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>
+					<h3>룩북 속 상품<span class="number">()</span></h3> <!--<th:block th:text="${#lists.size(lookbookDetailList.lookbookGoodsList)}"></th:block>-->
 					<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 class="items_outside">
+							<th:block th:each="item, stat : ${lookbookDetailList}">
+							<div class="itemsOut">
+								<div class="swiper-container items_inside">
+									<div class="swiper-wrapper">
+										<th:block th:if="${item.lookbookGoodsList != null and !item.lookbookGoodsList.empty}" th:each="goodsItem, goodsStatus : ${item.lookbookGoodsList}">
+											<div class="swiper-slide">
+												<div class="item_prod">
+													<div class="item_state">
+														<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsItem.goodsCd}]]);">
+															<div class="itemPic">
+																<img alt="" class="vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsItem.sysImgNm}">
+															</div>
+															<p class="itemBrand" th:text="${goodsItem.brandGroupNm}">BRAND NAME1</p>
+															<div class="itemName" th:text="${goodsItem.goodsFullNm}">남성 로고 자카드 방풍 패딩</div>
+															<p class="itemPrice">[[${#numbers.formatInteger(goodsItem.currPrice,0,'COMMA')} + 원]]
+																<span class="itemPrice_original" th:if="${goodsItem.currPrice != goodsItem.listPrice}" th:text="${#numbers.formatInteger(goodsItem.listPrice,3,'COMMA')}">89,000</span>
+																<span class="itemPercent" th:if="${goodsItem.currPrice != goodsItem.listPrice}" th:text="${(goodsItem.listPrice == 0 ? 0 : #numbers.formatDecimal((goodsItem.listPrice - goodsItem.currPrice) / (goodsItem.listPrice * 1.0) * 100, 1, 0)) + '%'}">10%</span>
+															</p>
+														</a>
+													</div>
 												</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>
+										</th:block>
+										<!-- Add Scrollbar -->
+										<div class="swiper-scrollbar"></div>
 									</div>
 								</div>
 							</div>
-							<!-- Add Scrollbar -->
-							<div class="swiper-scrollbar"></div>
+							</th:block>
 						</div>
+						<!-- 겉 상품 종료 -->
 					</div>
 				</div>
 			</div>
@@ -303,13 +194,16 @@
 		/* 슬라이드 - 상단_LOOKBOOK */
 		var lookbook_visual_slide = new Swiper('.br_lookbook_view.cont_visual .swiper-container', {
 			loop: true,
+			loopAdditionalSlides : 1,
 			slidesPerView: 'auto',
 			spaceBetween: 20,
 			speed : 800,
 			autoWidth: true,
 			autoHeight: true,
+			observer: true,
 			centeredSlides: true,
 			autoplay: false,
+			nested: true,
 			navigation: {
 				nextEl: '.br_lookbook_view.cont_visual .swiper-button-next',
 				prevEl: '.br_lookbook_view.cont_visual .swiper-button-prev',
@@ -318,19 +212,33 @@
 				el: '.br_lookbook_view.cont_visual .swiper-pagination',
 				clickable: true,
 			},
+			on: {
+				slideChange:function(){
+					$('.text_cont').removeClass('active');
+					$('.itemsOut').removeClass('active');
+					$('.text_cont').eq(this.realIndex).addClass('active');
+					$('.itemsOut').eq(this.realIndex).addClass('active');
+				}
+			},
+			watchOverflow : true,
+			watchSlidesVisibility: true,
+			watchSlidesProgress: true,
 		});
 
-		/* 슬라이드 - 룩북 속 상품 */
-		var togetherItemSwiper = new Swiper('.br_lookbook_view.cont_items .swiper-container', {
+		/* 슬라이드 - 룩북 상품 inSide */
+		var togetherIteminner = new Swiper('.br_lookbook_view.cont_items .items_inside', {
+			observer: true,
+			observeParents: true,
 			slidesPerView: 6,
 			spaceBetween: 20,
 			scrollbar: {
 				el: '.br_lookbook_view.cont_items .swiper-scrollbar',
 				hide: true,
 			},
+			// nested: true,
 		});
 
-
+		/* 슬라이드 - 다른 룩북 보기 */
 		var br_ohter_slide = new Swiper('.br_lookbook_view.cont_others .swiper-container', {
 			slidesPerView: 5,
 			spaceBetween: 20,

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

@@ -44,7 +44,7 @@
 									<div class="ui_col_12">
 										<div class="btn_group">
 											<!-- <div class="btn_group open"> -->
-											<a href="#none" data-toggle="dropdown" class="btn btn_default tgl_dropdown" aria-expanded="true" id="brandBox">브랜드 선택<span class="caret"></span></a>
+											<a href="javascript:void(0);" data-toggle="dropdown" class="btn btn_default tgl_dropdown" aria-expanded="true" id="brandBox">브랜드 선택<span class="caret"></span></a>
 											<div class="dropdown_menu">
 												<ul id="brandArea">
 
@@ -86,6 +86,8 @@
 	let fnGetLookbookList = 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){
@@ -121,7 +123,9 @@
 							tag2 += '		</div>';
 							tag2 += '		<div class="txt">';
 							tag2 += '			<span class="brand">'+item.brandNm+'</span>';
-							tag2 += '			<p class="tit">'+item.title+'</p>';
+							if(lookbookGb != 'BL'){
+								tag2 += '			<p class="tit">'+item.title+'</p>';
+							}
 							tag2 += '		</div>';
 							tag2 += '	</a>';
 							tag2 += '</li>';