상품상세 룩북 위시

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

@@ -218,6 +218,7 @@ public class TsfGoodsController extends TsfBaseController {
 				// 룩북
 				Lookbook lookbook = new Lookbook();
 				lookbook.setGoodsCd(paramsGoods.getGoodsCd());
+				lookbook.setCustNo(paramsGoods.getCustNo());
 				mav.addObject("lookbookList", coreLookbookService.getLookbookListForGoods(lookbook));
 
 			} else if (TscConstants.GoodsType.SET.value().equals(goods.getGoodsType())) {		// 셋트상품

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

@@ -82,15 +82,15 @@
 		SELECT Z.*
 		     , 100 - ROUND((CURR_PRICE / LIST_PRICE) * 100 ,0) AS DC_RATE 
 		     , ((PNT_RATE * CURR_PRICE) / 100) AS PNT_AMT
+		     , FN_GET_GOODS_NM(GOODS_NM,GOODS_GB,FOREIGN_BUY_YN,PARALLEL_IMPORT_YN,ORDER_MADE_YN) AS GOODS_FULL_NM /*상품FULL명*/
 		FROM (
 		SELECT G.GOODS_CD
 		     , G.GOODS_NM
 		     , G.GOODS_TNM
-		     , CONCAT(IF(IFNULL(G.GOODS_GB,'') IN ('G073_11','G073_15', ''), '',IFNULL(CONCAT('[',FN_GET_CODE_NM('G073',G.GOODS_GB),']'),'') )
-		             ,IF(G.FOREIGN_BUY_YN='Y','[해외구매대행]','' )
-		             ,IF(G.PARALLEL_IMPORT_YN = 'Y','[병행수입]','')
-		             ,IF(G.ORDER_MADE_YN='Y','[주문제작]','')
-		             ,G.GOODS_NM ) AS GOODS_FULL_NM
+		     , G.GOODS_GB
+		     , G.FOREIGN_BUY_YN
+		     , G.PARALLEL_IMPORT_YN
+		     , G.ORDER_MADE_YN
 		     , G.BRAND_CD
 		     , (CASE WHEN D.DISP_NM_LANG = 'EN' THEN D.BRAND_GROUP_ENM ELSE D.BRAND_GROUP_KNM END) AS BRAND_GROUP_NM
 		     , D.BRAND_GROUP_NO
@@ -113,7 +113,6 @@
 		     , E.DELV_FEE
 		     , E.MIN_ORD_AMT
 		     , E.DELV_FEE_CRITE
-		     , G.GOODS_GB
 		     , FN_GET_CODE_NM('G073',G.GOODS_GB) AS GOODS_GB_NM
 		     , (SELECT NI_CLSF_CD
 		        FROM TB_ITEMKIND
@@ -399,11 +398,7 @@
 		/* TsfGoods.getGoodsDealComposeList */
 		SELECT Z.* 
 		     , 100 - ROUND((CURR_PRICE / LIST_PRICE) * 100 ,0) AS DC_RATE 
-		     , CONCAT(IF(IFNULL(GOODS_GB,'') IN ('G073_11','G073_15', ''), '',IFNULL(CONCAT('[',FN_GET_CODE_NM('G073',GOODS_GB),']'),'') )
-		             ,IF(FOREIGN_BUY_YN='Y','[해외구매대행]','' )
-		             ,IF(PARALLEL_IMPORT_YN = 'Y','[병행수입]','')
-		             ,IF(ORDER_MADE_YN='Y','[주문제작]','')
-		             ,GOODS_NM ) AS GOODS_FULL_NM
+		     , FN_GET_GOODS_NM(GOODS_NM,GOODS_GB,FOREIGN_BUY_YN,PARALLEL_IMPORT_YN,ORDER_MADE_YN) AS GOODS_FULL_NM /*상품FULL명*/
 		FROM (
 		SELECT C.GOODS_CD
 		     , C.COMPS_GOODS_CD
@@ -630,31 +625,31 @@
 		/* TsfGoods.getTmtbGoodsList */
 		SELECT Z.*
 		     , 100 - ROUND((CURR_PRICE / LIST_PRICE) * 100 ,0) AS DC_RATE
+		     , FN_GET_GOODS_NM(GOODS_NM,GOODS_GB,FOREIGN_BUY_YN,PARALLEL_IMPORT_YN,ORDER_MADE_YN) AS GOODS_FULL_NM /*상품FULL명*/
 		FROM (
 		      SELECT B.GOODS_CD 
 		           , G.GOODS_NM
-		           , CONCAT(IF(IFNULL(G.GOODS_GB,'') IN ('G073_11','G073_15', ''), '',IFNULL(CONCAT('[',FN_GET_CODE_NM('G073',G.GOODS_GB),']'),'') )
-		                   ,IF(G.FOREIGN_BUY_YN='Y','[해외구매대행]','' )
-		                   ,IF(G.PARALLEL_IMPORT_YN = 'Y','[병행수입]','')
-		                   ,IF(G.ORDER_MADE_YN='Y','[주문제작]','')
-		                   ,G.GOODS_NM ) AS GOODS_FULL_NM
-		          , G.GOODS_STAT
-		          , G.GOODS_TYPE
-		          , G.MIN_ORD_QTY 
-		          , (CASE WHEN E.DISP_NM_LANG = 'EN' THEN E.BRAND_GROUP_ENM ELSE E.BRAND_GROUP_KNM END) AS BRAND_GROUP_NM
-		          , G.LIST_PRICE
-		          , FN_GET_BENEFIT_PRICE(#{frontGb},G.GOODS_CD, G.CURR_PRICE,#{custGb}) AS CURR_PRICE
-		          , G.MAIN_COLOR_CD
-		          , (SELECT MAX(SYS_IMG_NM) FROM TB_GOODS_IMG WHERE GOODS_CD = G.GOODS_CD AND COLOR_CD = IFNULL(G.MAIN_COLOR_CD,'XX') AND DEFAULT_IMG_YN = 'Y') AS SYS_IMG_NM
-		          , (SELECT MAX(SYS_IMG_NM) FROM TB_GOODS_IMG WHERE GOODS_CD = G.GOODS_CD AND COLOR_CD = IFNULL(G.MAIN_COLOR_CD,'XX') AND MOUSEOVER_IMG_YN = 'Y') AS SYS_IMG_NM2
-		          , S.STOCK_QTY
-		          , S.SOLDOUT_YN
-		          , S.OPT_CD
-		          , V.VIDEO_GB_M
-		          , V.VIDEO_VAL_M
-		          , V.VIDEO_GB_S
-		          , V.VIDEO_VAL_S
-		          , (CASE WHEN W.GOODS_CD IS NULL THEN 'N' ELSE 'Y' END) AS WISH_YN
+		           , G.GOODS_GB
+		           , G.FOREIGN_BUY_YN
+		           , G.PARALLEL_IMPORT_YN
+		           , G.ORDER_MADE_YN
+		           , G.GOODS_STAT
+		           , G.GOODS_TYPE
+		           , G.MIN_ORD_QTY 
+		           , (CASE WHEN E.DISP_NM_LANG = 'EN' THEN E.BRAND_GROUP_ENM ELSE E.BRAND_GROUP_KNM END) AS BRAND_GROUP_NM
+		           , G.LIST_PRICE
+		           , FN_GET_BENEFIT_PRICE(#{frontGb},G.GOODS_CD, G.CURR_PRICE,#{custGb}) AS CURR_PRICE
+		           , G.MAIN_COLOR_CD
+		           , (SELECT MAX(SYS_IMG_NM) FROM TB_GOODS_IMG WHERE GOODS_CD = G.GOODS_CD AND COLOR_CD = IFNULL(G.MAIN_COLOR_CD,'XX') AND DEFAULT_IMG_YN = 'Y') AS SYS_IMG_NM
+		           ,  (SELECT MAX(SYS_IMG_NM) FROM TB_GOODS_IMG WHERE GOODS_CD = G.GOODS_CD AND COLOR_CD = IFNULL(G.MAIN_COLOR_CD,'XX') AND MOUSEOVER_IMG_YN = 'Y') AS SYS_IMG_NM2
+		           , S.STOCK_QTY
+		           , S.SOLDOUT_YN
+		           , S.OPT_CD
+		           , V.VIDEO_GB_M
+		           , V.VIDEO_VAL_M
+		           , V.VIDEO_GB_S
+		           , V.VIDEO_VAL_S
+		           , (CASE WHEN W.GOODS_CD IS NULL THEN 'N' ELSE 'Y' END) AS WISH_YN
 		      FROM TB_TMTB A
 		      INNER JOIN TB_TMTB_APPLY_GOODS B ON a.TMTB_SQ  = B.TMTB_SQ
 		      INNER JOIN TB_GOODS G ON B.GOODS_CD = G.GOODS_CD
@@ -822,11 +817,7 @@
 		SELECT A.GOODS_CD
 		     , A.COMPS_GOODS_CD
 		     , G.GOODS_NM AS COMPS_GOODS_NM
-		     , CONCAT(IF(IFNULL(G.GOODS_GB,'') IN ('G073_11','G073_15', ''), '',IFNULL(CONCAT('[',FN_GET_CODE_NM('G073',G.GOODS_GB),']'),'') )
-		             ,IF(G.FOREIGN_BUY_YN='Y','[해외구매대행]','' )
-		             ,IF(G.PARALLEL_IMPORT_YN = 'Y','[병행수입]','')
-		             ,IF(G.ORDER_MADE_YN='Y','[주문제작]','')
-		             ,G.GOODS_NM ) AS COMPS_GOODS_FULL_NM
+		     , FN_GET_GOODS_NM(G.GOODS_NM,G.GOODS_GB,G.FOREIGN_BUY_YN,G.PARALLEL_IMPORT_YN,G.ORDER_MADE_YN) AS GOODS_FULL_NM /*상품FULL명*/
 		     , A.QTY
 		     , G.BRAND_CD
 		     , G.GOODS_STAT

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

@@ -11,16 +11,18 @@
 	
 	<div class="app">
 		<!-- GNB -->
+			
 		<header class=" "> <!-- 서브페이지에서는 <header>의 클래스.main 제거 -->
-			<section class="htop" id="htopSub" style="background: #fff;">
-				<button type="button" class="btn_back" title="이전페이지로">
+			<section class="htop trans" id="htopSub" style="background: #fff;">
+				<button class="btn_back" title="이전페이지로">
 					<span>
 						<i class="gl1"></i>
 						<i class="gl2"></i>
 						<i class="gl3"></i>
 					</span>
 				</button>
-				<h1 id="htopTitle">상품상세</h1>
+				<!-- 210405_타이틀 수정 -->
+				<!--<h1 id="htopTitle">PAGE TITLE</h1>-->
 			</section>
 		</header>
 

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

@@ -548,183 +548,31 @@
 				</div>
 				<!-- //이상품과 함께 본 상품영역-->
 				<!-- STYLE24의 스타일링 추천 -->
-				<div class="pd_recommend">
+				<div class="pd_recommend" th:if="${lookbookList != null and !lookbookList.empty}">
 					<h3 class="tit">STYLE24의 스타일링 추천</h3>
 					<!-- 상품이미지pic -->
-					<div class="area_slider pic_img">
+					<div class="area_slider pic_img" >
 						<div class="swiper-container">
 							<div class="swiper-wrapper">
-								<div class="swiper-slide">
+								<div class="swiper-slide" th:each="lookbook, status : ${lookbookList}">
 									<div class="page">
 										<div class="pic">
-											<span class="thumb" style="background-image:url('/images/mo/thumb/tmp_pdLookbook1.jpg');"></span>
+											<span class="thumb" th:style="${'background-image:url(' + imgUrl+ lookbook.sysFileNm+');'}"></span>
 											<!-- 상품피커 -->
-											<div class="item_picker" style="left:15.83%; top:68.33%;">
+											<th:block th:if="${lookbook.lookbookGoodsList != null and !lookbook.lookbookGoodsList.empty}"
+														th:each="lookbookGoods, goodsStatus : ${lookbook.lookbookGoodsList}">
+											<div class="item_picker" th:style="${'left:'+lookbookGoods.xlim+'%; top:'+lookbookGoods.ylim+'%;'}" >
 												<div>
 													<button type="button"><span class="ico ico_picker"></span></button>
 													<div class="pick_descr">
-														<a href="">
-															상품명11
-														</a>
+														<a href="javascript:void(0)"><th:block th:text="${lookbookGoods.goodsFullNm}"></th:block></a>
 													</div>
 												</div>
 											</div>
 											<!-- //상품피커 -->
-											<!-- 상품피커 -->
-											<div class="item_picker" style="left:45%; top:40%;">
-												<div>
-													<button type="button"><span class="ico ico_picker"></span></button>
-													<div class="pick_descr">
-														<a href="">
-															상품명12
-														</a>
-													</div>
-												</div>
-											</div>
-											<!-- //상품피커 -->	   
-											<!-- 상품피커 -->
-											<div class="item_picker" style="left:85%; top:62%;">
-												<div>
-													<button type="button"><span class="ico ico_picker"></span></button>
-													<div class="pick_descr" style="display: none;">
-														<a href="">
-															상품명13
-														</a>
-													</div>
-												</div>
-											</div>
-											<!-- //상품피커 -->								   
+											</th:block>
 										</div>
-									</div>									
-								</div>
-								<div class="swiper-slide">
-									<div class="page">
-										<div class="pic">
-											<span class="thumb" style="background-image:url('/images/mo/thumb/tmp_pdLookbook1.jpg');"></span>
-											<!-- 상품피커 -->
-											<div class="item_picker" style="left:15.83%; top:68.33%;">
-												<div>
-													<button type="button"><span class="ico ico_picker"></span></button>
-													<div class="pick_descr">
-														<a href="">
-															상품명11
-														</a>
-													</div>
-												</div>
-											</div>
-											<!-- //상품피커 -->
-											<!-- 상품피커 -->
-											<div class="item_picker" style="left:45%; top:40%;">
-												<div>
-													<button type="button"><span class="ico ico_picker"></span></button>
-													<div class="pick_descr">
-														<a href="">
-															상품명12
-														</a>
-													</div>
-												</div>
-											</div>
-											<!-- //상품피커 -->	   
-											<!-- 상품피커 -->
-											<div class="item_picker" style="left:85%; top:62%;">
-												<div>
-													<button type="button"><span class="ico ico_picker"></span></button>
-													<div class="pick_descr" style="display: none;">
-														<a href="">
-															상품명13
-														</a>
-													</div>
-												</div>
-											</div>
-											<!-- //상품피커 -->								   
-										</div>
-									</div>									
-								</div>
-								<div class="swiper-slide">
-									<div class="page">
-										<div class="pic">
-											<span class="thumb" style="background-image:url('/images/mo/thumb/tmp_pdLookbook1.jpg');"></span>
-											<!-- 상품피커 -->
-											<div class="item_picker" style="left:15.83%; top:68.33%;">
-												<div>
-													<button type="button"><span class="ico ico_picker"></span></button>
-													<div class="pick_descr">
-														<a href="">
-															상품명11
-														</a>
-													</div>
-												</div>
-											</div>
-											<!-- //상품피커 -->
-											<!-- 상품피커 -->
-											<div class="item_picker" style="left:45%; top:40%;">
-												<div>
-													<button type="button"><span class="ico ico_picker"></span></button>
-													<div class="pick_descr">
-														<a href="">
-															상품명12
-														</a>
-													</div>
-												</div>
-											</div>
-											<!-- //상품피커 -->	   
-											<!-- 상품피커 -->
-											<div class="item_picker" style="left:85%; top:62%;">
-												<div>
-													<button type="button"><span class="ico ico_picker"></span></button>
-													<div class="pick_descr" style="display: none;">
-														<a href="">
-															상품명13
-														</a>
-													</div>
-												</div>
-											</div>
-											<!-- //상품피커 -->								   
-										</div>
-									</div>									
-								</div>
-								<div class="swiper-slide">
-									<div class="page">
-										<div class="pic">
-											<span class="thumb" style="background-image:url('/images/mo/thumb/tmp_pdLookbook1.jpg');"></span>
-											<!-- 상품피커 -->
-											<div class="item_picker" style="left:15.83%; top:68.33%;">
-												<div>
-													<button type="button"><span class="ico ico_picker"></span></button>
-													<div class="pick_descr">
-														<a href="">
-															상품명11
-														</a>
-													</div>
-												</div>
-											</div>
-											<!-- //상품피커 -->
-											<!-- 상품피커 -->
-											<div class="item_picker" style="left:45%; top:40%;">
-												<div>
-													<button type="button"><span class="ico ico_picker"></span></button>
-													<div class="pick_descr">
-														<a href="">
-															상품명12
-														</a>
-													</div>
-												</div>
-											</div>
-											<!-- //상품피커 -->	   
-											<!-- 상품피커 -->
-											<div class="item_picker" style="left:85%; top:62%;">
-												<div>
-													<button type="button"><span class="ico ico_picker"></span></button>
-													<div class="pick_descr" style="display: none;">
-														<a href="">
-															상품명13
-														</a>
-													</div>
-												</div>
-											</div>
-											<!-- //상품피커 -->								   
-										</div>
-									</div>									
+									</div>
 								</div>
 							</div>
 							<!-- Add Pagination -->
@@ -733,388 +581,30 @@
 					</div>
 					<!-- //상품이미지pic -->
 					<!-- 상품이미지pic 리스트 -->
-					<div class="area_slider pic_list">
-						<div class="box">
-							<div class="swiper-container">
-								<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 class="vLHTC pd_img" src="/images/mo/thumb/tmp_cartColor1.jpg" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														80,100
-													</p>
-												</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 class="vLHTC pd_img" src="/images/mo/thumb/tmp_cartColor1.jpg" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														80,100
-													</p>
-												</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 class="vLHTC pd_img" src="/images/mo/thumb/tmp_cartColor1.jpg" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														80,100
-													</p>
-												</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 class="vLHTC pd_img" src="/images/mo/thumb/tmp_cartColor1.jpg" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														80,100
-													</p>
-												</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 class="vLHTC pd_img" src="/images/mo/thumb/tmp_cartColor1.jpg" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														80,100
-													</p>
-												</a>
-											</div>
-										</div>
-									</div>
-								</div>   
-							</div>
-							<div class="btn_group_flex">
-								<div>
-									<button type="button" class="btn btn_default"><span>모두 쇼핑백 담기</span></button>
-								</div>
-							</div>
-						</div>
-						<div class="box">
-							<div class="swiper-container">
+					<div class="area_slider pic_list"  th:with="ithrCd=aa , contentsLoc=bb ">
+						<div class="box"  th:each="lookbook, status : ${lookbookList}">
+							<div class="swiper-container"  th:if="${lookbook.lookbookGoodsList != null and !lookbook.lookbookGoodsList.empty}">
 								<div class="swiper-wrapper">
-									<div class="swiper-slide">
+									<div class="swiper-slide" th:each="lookbookGoods, goodsStatus : ${lookbook.lookbookGoodsList}" >
 										<div class="item_prod">
 											<div class="item_state">
-												<button type="button" class="itemLike">관심상품 추가</button>
-												<a href="#none" class="itemLink">
+												<button type="button" class="itemLike" th:classappend="${lookbookGoods.wishYn == 'Y'}? 'likeit active' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${lookbookGoods.goodsCd}, ithrCd=${ithrCd}, contentsLoc=${contentsLoc}, planDtlSq=''">관심상품 추가</button>
+												<a href="javascript:void(0)" class="itemLink">
 													<div class="itemPic">
-														<img class="vLHTC pd_img" src="/images/mo/thumb/tmp_cartColor1.jpg" alt="">
+														<img class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+lookbookGoods.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
 													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														80,100
-													</p>
+													<p class="itemBrand" th:text="${lookbookGoods.brandGroupNm}">BRAND NAME</p>
+													<div class="itemName" th:text="${lookbookGoods.goodsFullNm}">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
+													<p class="itemPrice" th:text="${#numbers.formatInteger(lookbookGoods.currPrice, 0,'COMMA')}">80,100</p>
 												</a>
 											</div>
 										</div>
 									</div>
-									<div class="swiper-slide swiper-slide-next">
-										<div class="item_prod">
-											<div class="item_state">
-												<button type="button" class="itemLike">관심상품 추가</button>
-												<a href="#none" class="itemLink">
-													<div class="itemPic">
-														<img class="vLHTC pd_img" src="/images/mo/thumb/tmp_cartColor1.jpg" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														80,100
-													</p>
-												</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 class="vLHTC pd_img" src="/images/mo/thumb/tmp_cartColor1.jpg" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														80,100
-													</p>
-												</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 class="vLHTC pd_img" src="/images/mo/thumb/tmp_cartColor1.jpg" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														80,100
-													</p>
-												</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 class="vLHTC pd_img" src="/images/mo/thumb/tmp_cartColor1.jpg" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														80,100
-													</p>
-												</a>
-											</div>
-										</div>
-									</div>
-								</div>   
-							</div>
-							<div class="btn_group_flex">
-								<div>
-									<button type="button" class="btn btn_default"><span>모두 쇼핑백 담기</span></button>
-								</div>
-							</div>
-						</div>
-						<div class="box">
-							<div class="swiper-container">
-								<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 class="vLHTC pd_img" src="/images/mo/thumb/tmp_cartColor1.jpg" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														80,100
-													</p>
-												</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 class="vLHTC pd_img" src="/images/mo/thumb/tmp_cartColor1.jpg" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														80,100
-													</p>
-												</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 class="vLHTC pd_img" src="/images/mo/thumb/tmp_cartColor1.jpg" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														80,100
-													</p>
-												</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 class="vLHTC pd_img" src="/images/mo/thumb/tmp_cartColor1.jpg" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														80,100
-													</p>
-												</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 class="vLHTC pd_img" src="/images/mo/thumb/tmp_cartColor1.jpg" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														80,100
-													</p>
-												</a>
-											</div>
-										</div>
-									</div>
-								</div>   
-							</div>
-							<div class="btn_group_flex">
-								<div>
-									<button type="button" class="btn btn_default"><span>모두 쇼핑백 담기</span></button>
 								</div>
 							</div>
-						</div>
-						<div class="box">
-							<div class="swiper-container">
-								<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 class="vLHTC pd_img" src="/images/mo/thumb/tmp_cartColor1.jpg" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														80,100
-													</p>
-												</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 class="vLHTC pd_img" src="/images/mo/thumb/tmp_cartColor1.jpg" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														80,100
-													</p>
-												</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 class="vLHTC pd_img" src="/images/mo/thumb/tmp_cartColor1.jpg" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														80,100
-													</p>
-												</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 class="vLHTC pd_img" src="/images/mo/thumb/tmp_cartColor1.jpg" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														80,100
-													</p>
-												</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 class="vLHTC pd_img" src="/images/mo/thumb/tmp_cartColor1.jpg" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														80,100
-													</p>
-												</a>
-											</div>
-										</div>
-									</div>
-								</div>   
-							</div>
 							<div class="btn_group_flex">
 								<div>
-									<button type="button" class="btn btn_default"><span>모두 쇼핑백 담기</span></button>
+									<button type="button" class="btn btn_default" onclick="fnAddCartLookBookGoods(this);"><span>모두 쇼핑백 담기</span></button>
 								</div>
 							</div>
 						</div>
@@ -2019,6 +1509,39 @@
 		cfnAddCart(params);
 	}
 
+	// 룩북속 상품 쇼핑백 담기
+	var fnAddCartLookBookGoods = function(obj){
+		
+		let $obj = $(obj);
+		let $target = $obj.parent().find('.li_item').find('.item_prod');
+		let btnType = "C";
+		let params = [];
+		
+		$target.each(function(){
+			if ($(this).hasClass('unable')) {
+				
+			}else{
+				
+				let obj = new Object();
+				obj.goodsCd = $(this).attr("goodsCd");
+				obj.optCd = $(this).attr("optCd");
+				obj.goodsQty = $(this).attr("minOrdQty");
+				obj.goodsType = $(this).attr("goodsType");
+				obj.cartGb = btnType;
+				obj.afLinkCd =$("#cartForm  input[name=afLinkCd]").val();
+				obj.ithrCd = $(this).attr("ithrCd");
+				obj.contentsLoc = $(this).attr("contentsLoc");
+				obj.planDtlSq = '';
+				params.push(obj);
+			}
+		});
+		
+		// 장바구니담기
+		if (params.length > 0){
+			cfnAddCart(params);	
+		}
+	}
+	
 	
 	$(document).ready( function() {
 		
@@ -2099,92 +1622,7 @@
 			setInterval(function() { promotionTimer(); }, 1000);
 		}
 		
-		fnOptionSoldout();
-		
-		// 광고 스크립트용
-		var goodsNavigation = [[${goodsNavigation}]];
-		var cate1Nm = "";
-		var cate2Nm = "";
-		var cate3Nm = "";
-		var cate4Nm = "";
-		var cate5Nm = "";
-		if (!gagajf.isNull(goodsNavigation)) {
-			cate1Nm = goodsNavigation.cate1Nm;
-			cate2Nm = goodsNavigation.cate2Nm;
-			cate3Nm = goodsNavigation.cate3Nm;
-			cate4Nm = goodsNavigation.cate4Nm;
-			cate5Nm = goodsNavigation.cate3Nm;
-			
-			if (!gagajf.isNull(cate1Nm)) {
-				cateNm += cate1Nm;
-			}
-			if (!gagajf.isNull(cate2Nm)) {
-				cateNm += ' > ' + cate2Nm;
-			}
-			if (!gagajf.isNull(cate3Nm)) {
-				cateNm += ' > ' + cate3Nm;
-			}
-			if (!gagajf.isNull(cate4Nm)) {
-				cateNm += ' > ' + cate4Nm;
-			}
-			if (!gagajf.isNull(cate5Nm)) {
-				cateNm += ' > ' + cate5Nm;
-			}
-		}
-		// 광고 스크립트용
-		
-		var snsGoodsImg = _uploadGoodsUrl + [[${goodsInfo.sysImgNm}]];
-		var snsUrl = location.protocol + _PAGE_GOODS_DETAIL + params.goodsCd +'&colorCd =' + params.colorCd  ;
-		var snsGoodsFullNm = [[${goodsInfo.goodsFullNm}]];
-		
-		<!-- 페이스북 카카오스토리 연동 관련 메타태그 -->
-		$("meta[property='og:url']").attr('content', snsUrl);
-		$("meta[property='og:title']").attr('content', snsGoodsFullNm);
-		$("meta[property='og:description']").attr('content', snsGoodsFullNm);
-		$("meta[property='og:image']").attr('content', snsGoodsImg);
-
-		<!-- 트위터 관련 메타태그 -->
-		$("meta[name='twitter:url']").attr('content', snsUrl);
-		$("meta[name='twitter:title']").attr('content', snsGoodsFullNm);
-		$("meta[name='twitter:description']").attr('content', snsGoodsFullNm);
-		$("meta[name='twitter:image']").attr('content', snsGoodsImg);
 
-		// 추천솔류션 meta 설정
-		$("meta[property='eg:type']").attr('content',"product");
-		$("meta[property='eg:cuid']").attr('content',eglqueueCuid);
-		$("meta[property='eg:itemId']").attr('content', [[${goodsInfo.goodsCd}]] );
-		$("meta[property='eg:itemName']").attr('content',[[${goodsInfo.goodsFullNm}]] );
-		$("meta[property='eg:itemImage']").attr('content', snsGoodsImg);
-		$("meta[property='eg:itemUrl']").attr('content',snsUrl);
-		$("meta[property='eg:originalPrice']").attr('content',[[${goodsInfo.listPrice}]]);
-		$("meta[property='eg:salePrice']").attr('content',[[${goodsInfo.currPrice}]]);
-		$("meta[property='eg:category1']").attr('content',cate1Nm);
-		$("meta[property='eg:category2']").attr('content',cate2Nm);
-		$("meta[property='eg:category3']").attr('content',cate3Nm);
-		$("meta[property='eg:category4']").attr('content',cate4Nm);
-		$("meta[property='eg:category5']").attr('content',cate5Nm);
-		$("meta[property='eg:brandId']").attr('content',[[${goodsInfo.brandGroupNo}]]);
-		$("meta[property='eg:brandName']").attr('content',[[${goodsInfo.brandGroupNm}]]);
-		$("meta[property='eg:regDate']").attr('content',[[${goodsInfo.regDt}]].toDate("YYYYMMDDHHmmss").format("YYYY-MM-DDTHH:mm:ssZ"));
-		$("meta[property='eg:updateDate']").attr('content',[[${goodsInfo.updDt}]].toDate("YYYYMMDDHHmmss").format("YYYY-MM-DDTHH:mm:ssZ"));
-		$("meta[property='eg:stock']").attr('content',"");
-		$("meta[property='eg:state']").attr('content',[[${goodsInfo.goodsStatNm}]]);
-		$("meta[property='eg:description']").attr('content',null);
-		$("meta[property='eg:extraImage']").attr('content',null);
-		$("meta[property='eg:locale']").attr('content',"KR");
-		$("meta[property='eg:isNew']").attr('content',([[${goodsInfo.formalGb}]] == 'G009_10')? 'True' :'False');
-		$("meta[property='eg:etc1']").attr('content', [[${goodsInfo.selfGoodsYn}]]);
-		
-		
-		$('.btn_copy').bind('click', function() {
-			copyToClipboard();
-		});
-		
-	});
-	
-	// 상품 대표설명 > 좌측 상품썸네일 navi, 우측 상품정보 고정 
-	$(window).scroll(function(){
-		
 		//상품상세정보 더보기   
 		$(document).on('click','.pd_descrp .btn_more_box button',function(e){
 			$('.pd_descrp .cont_body').toggleClass('on'); 
@@ -2345,6 +1783,95 @@
 			$(this).next(".review_list").toggleClass('active');
 			return false;
 		});
+		
+		fnOptionSoldout();
+		
+		// 광고 스크립트용
+		var goodsNavigation = [[${goodsNavigation}]];
+		var cate1Nm = "";
+		var cate2Nm = "";
+		var cate3Nm = "";
+		var cate4Nm = "";
+		var cate5Nm = "";
+		if (!gagajf.isNull(goodsNavigation)) {
+			cate1Nm = goodsNavigation.cate1Nm;
+			cate2Nm = goodsNavigation.cate2Nm;
+			cate3Nm = goodsNavigation.cate3Nm;
+			cate4Nm = goodsNavigation.cate4Nm;
+			cate5Nm = goodsNavigation.cate3Nm;
+			
+			if (!gagajf.isNull(cate1Nm)) {
+				cateNm += cate1Nm;
+			}
+			if (!gagajf.isNull(cate2Nm)) {
+				cateNm += ' > ' + cate2Nm;
+			}
+			if (!gagajf.isNull(cate3Nm)) {
+				cateNm += ' > ' + cate3Nm;
+			}
+			if (!gagajf.isNull(cate4Nm)) {
+				cateNm += ' > ' + cate4Nm;
+			}
+			if (!gagajf.isNull(cate5Nm)) {
+				cateNm += ' > ' + cate5Nm;
+			}
+		}
+		// 광고 스크립트용
+		
+		var snsGoodsImg = _uploadGoodsUrl + [[${goodsInfo.sysImgNm}]];
+		var snsUrl = location.protocol + _PAGE_GOODS_DETAIL + params.goodsCd +'&colorCd =' + params.colorCd  ;
+		var snsGoodsFullNm = [[${goodsInfo.goodsFullNm}]];
+		
+		<!-- 페이스북 카카오스토리 연동 관련 메타태그 -->
+		$("meta[property='og:url']").attr('content', snsUrl);
+		$("meta[property='og:title']").attr('content', snsGoodsFullNm);
+		$("meta[property='og:description']").attr('content', snsGoodsFullNm);
+		$("meta[property='og:image']").attr('content', snsGoodsImg);
+
+		<!-- 트위터 관련 메타태그 -->
+		$("meta[name='twitter:url']").attr('content', snsUrl);
+		$("meta[name='twitter:title']").attr('content', snsGoodsFullNm);
+		$("meta[name='twitter:description']").attr('content', snsGoodsFullNm);
+		$("meta[name='twitter:image']").attr('content', snsGoodsImg);
+
+		// 추천솔류션 meta 설정
+		$("meta[property='eg:type']").attr('content',"product");
+		$("meta[property='eg:cuid']").attr('content',eglqueueCuid);
+		$("meta[property='eg:itemId']").attr('content', [[${goodsInfo.goodsCd}]] );
+		$("meta[property='eg:itemName']").attr('content',[[${goodsInfo.goodsFullNm}]] );
+		$("meta[property='eg:itemImage']").attr('content', snsGoodsImg);
+		$("meta[property='eg:itemUrl']").attr('content',snsUrl);
+		$("meta[property='eg:originalPrice']").attr('content',[[${goodsInfo.listPrice}]]);
+		$("meta[property='eg:salePrice']").attr('content',[[${goodsInfo.currPrice}]]);
+		$("meta[property='eg:category1']").attr('content',cate1Nm);
+		$("meta[property='eg:category2']").attr('content',cate2Nm);
+		$("meta[property='eg:category3']").attr('content',cate3Nm);
+		$("meta[property='eg:category4']").attr('content',cate4Nm);
+		$("meta[property='eg:category5']").attr('content',cate5Nm);
+		$("meta[property='eg:brandId']").attr('content',[[${goodsInfo.brandGroupNo}]]);
+		$("meta[property='eg:brandName']").attr('content',[[${goodsInfo.brandGroupNm}]]);
+		$("meta[property='eg:regDate']").attr('content',[[${goodsInfo.regDt}]].toDate("YYYYMMDDHHmmss").format("YYYY-MM-DDTHH:mm:ssZ"));
+		$("meta[property='eg:updateDate']").attr('content',[[${goodsInfo.updDt}]].toDate("YYYYMMDDHHmmss").format("YYYY-MM-DDTHH:mm:ssZ"));
+		$("meta[property='eg:stock']").attr('content',"");
+		$("meta[property='eg:state']").attr('content',[[${goodsInfo.goodsStatNm}]]);
+		$("meta[property='eg:description']").attr('content',null);
+		$("meta[property='eg:extraImage']").attr('content',null);
+		$("meta[property='eg:locale']").attr('content',"KR");
+		$("meta[property='eg:isNew']").attr('content',([[${goodsInfo.formalGb}]] == 'G009_10')? 'True' :'False');
+		$("meta[property='eg:etc1']").attr('content', [[${goodsInfo.selfGoodsYn}]]);
+		
+		
+		$('.btn_copy').bind('click', function() {
+			copyToClipboard();
+		});
+		
+		
+		
+	});
+	
+	// 상품 대표설명 > 좌측 상품썸네일 navi, 우측 상품정보 고정 
+	$(window).scroll(function(){
+		
 	});
 
 /*]]>*/

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

@@ -627,10 +627,10 @@
 								<div class="swiper-slide" th:each="lookbook, status : ${lookbookList}">
 									<div class="page">
 										<div class="pic">
-											<span class="thumb" style="background-image:url('/images/pc/thumb/tmp_pdLookbook1.jpg');"></span>
+											<span class="thumb" th:style="${'background-image:url(' + imgUrl+ lookbook.sysFileNm+');'}"></span>
 											<!-- 상품피커 -->
 											<th:block th:if="${lookbook.lookbookGoodsList != null and !lookbook.lookbookGoodsList.empty}"
-														th:each="lookbookGoods, status : ${lookbook.lookbookGoodsList}">
+														th:each="lookbookGoods, goodsStatus : ${lookbook.lookbookGoodsList}">
 											<div class="item_picker" th:style="${'left:'+lookbookGoods.xlim+'%; top:'+lookbookGoods.ylim+'%;'}">
 												<button type="button"><span class="ico ico_picker"></span></button>
 												<div class="pick_descr">