Merge branch 'develop' of http://112.172.147.34:4936/style24/style24.front into develop

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

@@ -1,16 +1,20 @@
 package com.style24.front.biz.web;
 
+import java.util.Collection;
+
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.mobile.device.Device;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.ResponseBody;
 import org.springframework.web.servlet.ModelAndView;
 
 import com.style24.core.support.env.TscConstants;
 import com.style24.front.biz.service.TsfSocialService;
 import com.style24.front.support.controller.TsfBaseController;
 import com.style24.front.support.security.session.TsfSession;
+import com.style24.persistence.domain.Plan;
 import com.style24.persistence.domain.Social;
 
 import lombok.extern.slf4j.Slf4j;
@@ -48,11 +52,29 @@ public class TsfSocialController extends TsfBaseController {
 		mav.addObject("socialInfo", socialService.getSocialInfo(social));
 		
 		// 소셜(핫딜)-상품목록
-		mav.addObject("socialGoods", socialService.getSocialGoodsList(social));
+		//mav.addObject("socialGoods", socialService.getSocialGoodsList(social));
 	
 		mav.setViewName(super.getDeviceViewName("social/SocialMainForm"));
 		return mav;
 	}
 	
+	/**
+	 * 소셜 상품 리스트
+	 * @param 
+	 * @return
+	 * @author sowon
+	 * @since 2021. 4. 29
+	 */
+	@GetMapping("/list")
+	@ResponseBody
+	public Collection<Social> getSocialList(Social social) {
+		social.setFrontGb(TsfSession.getFrontGb());
+		social.setCustGb(TsfSession.getCustGb());
+		social.setSiteCd(TscConstants.Site.STYLE24.value());
+		
+
+		return socialService.getSocialGoodsList(social);
+	}
+	
 
 }

src/main/webapp/WEB-INF/views/web/social/SocialMainFormWeb.html

@@ -39,55 +39,24 @@
                         </div>
                     </div>  
                     <div class="list_content">
-                        <div class="itemsGrp rowtype"> <!-- itemsGrp rank hot deal --> <!-- rowtype 추가시 가로형태로 출력 -->
-                        <th:block th:each="SocialData, SocialStat : ${socialGoods}">
-                            <div class="item_prod" th:class="${SocialData.stockQtySum == 0 ? 'item_prod sold_out' : 'item_prod'}">
-                                <div class="item_state"> <!-- item_state AD soldout -->
-                                    <button type="button" th:class="${SocialData.likeIt == 'likeit'}? 'itemLike active' : 'itemLike'" onclick="cfnPutWishList(this);" th:attr="goodsCd=${SocialData.goodsCd}, ithrCd='', contentsLoc='', planDtlSq=''">관심상품 추가</button>
-                                    <a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${SocialData.goodsCd}]])" >
-                                        <div class="itemPic">
-                                            <img alt="BLUE-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + SocialData.sysImgNm}">
-                                        </div>
-                                        <div class="itemSpecialPrice"><span>특가</span></div>
-                                        <p class="itemBrand" th:text="${SocialData.brandGroupNm}"></p>
-                                        <div class="itemName" th:text="${SocialData.goodsNm}"></div>
-                                       <div class="itemComment" th:if="${SocialData.goodsTnm!=null}" th:text="${SocialData.goodsTnm}"></div>
-                                        <p class="itemPrice">
-                                             [[${#numbers.formatInteger(SocialData.currPrice,0,'COMMA')} + 원]]
-                                            <span class="itemPrice_original" th:text="${#numbers.formatInteger(SocialData.listPrice,0,'COMMA')} + '원'"></span>
-											<span class=" itemPercent" th:text="${#numbers.formatDecimal(SocialData.dcRate,1,0)} + '%'"></span>
-                                        </p>
-                                    </a>
-                                    	 <div class="shopBagBtn">
-                                            <button type="button" class="btn btn_defalt" onclick="socialAddCart(this)" th:attr="goodsCd=${SocialData.goodsCd}, minOrdQty=${SocialData.minOrdQty}, goodsType=${SocialData.goodsType}, optCd=${SocialData.optCd}">
-                                                <span>쇼핑백 담기</span>
-                                            </button>
-                                        </div>
-                                </div>
-                            </div>
-                            </th:block>
+                        <div class="itemsGrp rowtype" id="socialList"> <!-- itemsGrp rank hot deal --> <!-- rowtype 추가시 가로형태로 출력 -->
+                  
                         </div>
                     </div>
                 </div>
 		    </div>
 		</th:block>
-		<th:block th:unless="${socialInfo != null}">
-				<div class="nodata" >
-					<div class="txt_box">
-						<p>
-							진행하는 핫딜이 없습니다.
-						</p>
-					</div>
-					<div class="btn_box">
-						<button class="btn btn_default" th:onclick="cfnGoToPage(_PAGE_MAIN);"><span>홈으로 가기</span></button>
-					</div>
-				</div>	
-		</th:block>
+
+
         </div>
     </div>   
+<script src="/ux/plugins/jquery/jquery.history.min.js"></script>
+<script src="/ux/plugins/gaga/gaga.infinite.scrollLayer.js"></script>
 <script th:inline="javascript">
-var socialInfo = [[${socialInfo}]];
+let socialInfo = [[${socialInfo}]];
+let goodsView =[[${@environment.getProperty('upload.goods.view')}]]
 var socialAddCart = function (obj) {
+
 	let btnType = "C";
 	let params = [];
 
@@ -108,7 +77,87 @@ var socialAddCart = function (obj) {
 		cfnAddCart(params);	
 	} 
 }
+
+let fnGetSocialList = function() {
+	let actionUrl = '/social/list';
+	
+	$.getJSON(actionUrl
+		, function(result, status) {
+		html = '';
+			if (status == 'success') {
+				if (result.length > 0) {
+					$.each(result, function(idx, item) {
+						if (item.stockQtySum == 0) {
+							html += ' <div class="item_prod"class="item_prod sold_out">';
+						}else{
+							html += ' <div class="item_prod"class="item_prod">';
+						}
+						
+						html += '    <div class="item_state"> ';
+						if (item.likeIt == 'likeit') {
+							html += '        <button type="button" class="itemLike active" onclick="cfnPutWishList(this);" onClick="cfnPutWishList(this);" goodsCd=\''+item.goodsCd+'\', ithrCd=\'\', contentsLoc=\'\', planDtlSq=\'\'>관심상품 추가</button>';
+						}else{
+							html += '        <button type="button" class="itemLike" onclick="cfnPutWishList(this);" onClick="cfnPutWishList(this);" goodsCd=\''+item.goodsCd+'\', ithrCd=\'\', contentsLoc=\'\', planDtlSq=\'\'>관심상품 추가</button>';
+						}
+						
+						html += '        <a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail(\''+item.goodsCd+'\')" >';
+						html += '            <div class="itemPic">';
+						html += '                <img alt="BLUE-a" class=" vLHTC pd_img" src="'+ goodsView +'/'+item.sysImgNm +'">';
+						html += '            </div>';
+						html += '            <div class="itemSpecialPrice"><span>특가</span></div>';
+						html += '            <p class="itemBrand">'+item.brandGroupNm+'</p>';
+						html += '            <div class="itemName">'+item.goodsNm+'</div>';
+						if(item.goodsTnm != null){
+							html += '           <div class="itemComment">'+item.goodsTnm+'</div>';
+						}
+
+						html += '            <p class="itemPrice">';
+						html += item.currPrice.addComma() +'원';
+						if (item.currPrice != item.listPrice) {
+							html += '                <span class="itemPrice_original">'+item.listPrice.addComma()+'원</span>';
+						}
+						if (item.dcRate != 0) {
+							html += '                                 <span class=" itemPercent">'+item.dcRate.addComma()+'%</span>';
+						}
+						html += '            </p>';
+						html += '        </a>';
+						html += '        	 <div class="shopBagBtn">';
+						html += '                <button type="button" class="btn btn_defalt" onclick="socialAddCart(this)" goodsCd=\''+item.goodsCd+'\', minOrdQty=\''+item.minOrdQty+'\', goodsType=\''+item.goodsType+'\', optCd=\''+item.optCd+'\'">';
+						html += '                    <span>쇼핑백 담기</span>';
+						html += '                </button>';
+						html += '            </div>';
+						html += '    </div>';
+						html += '</div>';
+					});
+					$("#socialList").html(html);
+					
+				} else {
+					html += '<div class="nodata" >';
+					html += '	<div class="txt_box">';
+					html += '		<p>';
+					html += '			진행하는 핫딜이 없습니다.';
+					html += '		</p>';
+					html += '	</div>';
+					html += '	<div class="btn_box">';
+					html += '		<button class="btn btn_default" onclick="cfnGoToPage(_PAGE_MAIN);"><span>홈으로 가기</span></button>';
+					html += '	</div>';
+					html += '</div>';	
+					
+					$("#socialList").html(html);
+					$('#eventTotCnt').html('<span>0</span>개의 이벤트');
+				}
+			}
+		});
+}
+
+//인피니트 스크롤 이벤트 발생 시 데이터 가져오기
+var fnGetInfiniteScrollDataList = function(pageNum) {
+	// 콜백함수인 gagaInfiniteScroll.jsonToHtml 에서는 fnDrawInfiniteScrollData 함수를 호출한다.
+	gagajf.ajaxSubmitForm(document.searchForm, "/goods/list", "json", gagaInfiniteScroll.jsonToHtml);
+}
+
 $(function(){
+	fnGetSocialList();
        /* 핫딜 countDown */
        function hotdealTimer() {
            var endTime = new Date(socialInfo.socialEddt); // 남은시간 지정

src/main/webapp/ux/pc/css/layout.css

@@ -1672,9 +1672,11 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 	.dp .list_content.nodata .itemsGrp {display:none;}
 	.dp .list_content.nodata .list_defult {display:block;}
 	.dp .list_defult {display:none; text-align:center; padding: 120px 0 160px;}
-	.dp .list_defult > div:first-child {margin-bottom:46px;}
-	.dp .list_defult > div:first-child p {line-height: 2;}
+	.dp .list_defult > div:first-child {margin-bottom:40px;}
+	.dp .list_defult > div:first-child p {line-height: 2; font-size: 16px; color:#666; font-weight: 300;}
+	.dp .list_defult > div:first-child p::before {content:''; display:block; width:36px; height:46px; margin:0 auto 24px; background:url('/images/pc/ico_content_none.png') no-repeat;}
 	.dp .list_defult .ui_row {justify-content: center; margin-bottom: 0;}
+	.dp .list_defult .ui_row .btn {color:#222; font-size:14px; font-weight:300;padding: 9px 23px;}
 	
 	/* dp_sticky_nav_리스트 */
 	.dp .sticky_nav_list {margin-top:60px}
@@ -1792,7 +1794,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 	.dp_Exhibition .exhi_list .exhi_item .exhi_item_img .exhi_detail {position: absolute; left: 0; bottom: 100px; z-index: 9; padding: 23px; padding-bottom: 0;}
 	.dp_Exhibition .exhi_list .exhi_item .exhi_item_img .exhi_detail * {display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #fff; font-weight: 300; letter-spacing: 0;}
 	.dp_Exhibition .exhi_list .exhi_item .exhi_item_img .exhi_detail .brand {font-size: 14px;}
-	.dp_Exhibition .exhi_list .exhi_item .exhi_item_img .exhi_detail .tit {margin:20px 0 15px; max-height:66px; font-size:24px; line-height:1.4; word-break:keep-all; text-align:left;}
+	.dp_Exhibition .exhi_list .exhi_item .exhi_item_img .exhi_detail .tit {margin:20px 0 15px; padding-bottom: 0; max-height:66px; font-size:24px; line-height:1.4; word-break:keep-all; text-align:left;}
 	.dp_Exhibition .exhi_list .exhi_item .exhi_item_img .exhi_detail .sale {font-size: 14px;}
 	.dp_Exhibition .exhi_list .exhi_item_pr {background: #fff; padding: 20px; position: relative; z-index: 9; width: 88.4%; margin:-70px auto 0;}
 	.dp_Exhibition .exhi_list .exhi_item_pr li {height: 150px; margin-bottom: 16px;}
@@ -3067,7 +3069,9 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 	.pd_desc_wrap .item_descrp .area_list::after {content:''; position:absolute; right:-62px; top:0; bottom:0; width:1px; height:100%; background:#ddd; z-index:2;}
 	.pd_desc_wrap .item_descrp .area_option {float:right;}
 	.pd_desc_wrap .item_descrp .area_option .opt_wrap {width:500px; padding-left:60px; padding-top:30px;}
-	.pd_desc_wrap .item_descrp .area_option .opt_wrap.fixtop {position:fixed; right:70px; top:80px; width:500px}
+	/* .pd_desc_wrap .item_descrp .area_option .opt_wrap.fixtop {position:fixed; right:70px; top:80px; width:500px;} */
+	.pd_desc_wrap .item_descrp .area_option .opt_wrap.fixtop {position:fixed; right:70px; top:80px; width:500px;height: calc(100% - 11%);}
+	.pd_desc_wrap .item_descrp .area_option .opt_wrap.fixtop .option_box {overflow-y: auto; height: calc(100% - 30%);}
 	.pd_desc_wrap .item_descrp .area_option .opt_wrap.absbottom {position:absolute; top:auto; bottom:0px; right:70px;}
 	@media screen and (max-width:1459px) {
 		.pd.deal .tab_detail_nav.fix ul {position:absolute; left:0; top:0; width:100%; height:60px; z-index:25;}
@@ -3587,7 +3591,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 	.pd_review .area_rv_best .btn_arrow {position:absolute; right:0; top:0px; width:50px; height:24px; z-index:2;}
 	.pd_review .area_rv_best .btn_arrow::after {clear:both; display:block;}
 	.pd_review .area_rv_best .btn_arrow .swiper-button-prev,
-	.pd_review .area_rv_best .btn_arrow .swiper-button-next {display:inline-block; position:absolute; left:auto; right:auto; top:3px; bottom:auto; width:auto; height:auto; margin:0}
+	.pd_review .area_rv_best .btn_arrow .swiper-button-next {display:inline-block; position:absolute; left:auto; right:auto; top:3px; bottom:auto; width:auto; height:auto; margin:0;background:#ffffff;}
 	.pd_review .area_rv_best .btn_arrow .swiper-button-prev {content:''; display:block; position:absolute; top:3px; left:4px; width:14px; height:14px; border:2px solid #a7a7a7; border-width:2px 2px 0 0; transform:rotate(-135deg); -webkit-transform:rotate(-135deg);}
 	.pd_review .area_rv_best .btn_arrow .swiper-button-next {content:''; display:block; position:absolute; top:3px; right:4px; width:14px; height:14px; border:2px solid #a7a7a7; border-width:2px 2px 0 0; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
 	.pd_review .area_rv_best .best_review {width:100%;}

src/main/webapp/ux/pc/css/main.css

@@ -366,6 +366,7 @@
 .main_2stage .cont_body {}
 .bnnbox_crop {width:100%;}
 .bnnbox_crop::after {content:''; clear:both; display:block;}
+.bnnbox_crop > div {width: 100%;height: 230px;float: none;overflow: hidden;}
 .bnnbox_crop > .bnn_half {float:left; width:50%;}
 .bnnbox_crop > .bnn_half > a {display:block; position:relative; width:100%; height:0%; padding-top:26.0918%; overflow:hidden;}
 .bnnbox_crop > .bnn_half > a img {position:absolute; left:50%; right:0; top:50%; bottom:auto; transform:translate(-50%, -50%); width:auto; height:100%;}
@@ -575,13 +576,13 @@ header.minify .common_header.br_header::after {bottom:-565px;}
 .brand_main .brand_visual .cont_body {}
 .brand_main .brand_visual .swiper-button-prev {left:70px; opacity:0.5;}
 .brand_main .brand_visual .swiper-button-next {right:70px; opacity:0.5;}
-.brand_main .post-visual.swiper-container {margin-left:0;}
+.brand_main .post-visual .swiper-container {margin-left:0;}
 .brand_main .post-visual .swiper-wrapper {padding-bottom:0;}
-.brand_main .post-visual .swiper-slide {position:relative; max-width:1520px; padding-left:28.9473%; mask-size:86.6072% 0%, 9.3928% 21.4285%, 90.6072% 100%, 100% 78.5715%; -webkit-mask-size:86.6072% 0%, 9.3928% 21.4285%, 90.6072% 100%, 100% 78.5715%; transition:all 200ms ease;}
+.brand_main .post-visual .swiper-slide {position:relative; max-width:1520px; padding-left:28.9473%; mask-size:86.6072% 0%, 9.3928% 21.4285%, 90.6072% 100%, 100% 78.5715%; -webkit-mask-size:86.6072% 0%, 9.3928% 21.4285%, 90.6072% 100%, 100% 78.5715%; /*transition:all 200ms ease;*/}
 .brand_main .post-visual .swiper-slide img {width:1080px; margin:0;}
 .brand_main .post-visual .swiper-slide .txtWrap {opacity:0; position:absolute; padding-left:0px; top:110px; bottom:auto; left:0px; right:auto; z-index:1;}
 .brand_main .post-visual .txtWrap dt {font-size:0; padding-bottom:0;}
-.brand_main .post-visual .swiper-slide-active {opacity:1;}
+.brand_main .post-visual .swiper-slide-active {opacity:1 !important;}
 .brand_main .post-visual .swiper-slide-active .txtWrap {animation-name: fade-in;animation-duration: 1.5s;animation-delay: 1s;animation-fill-mode: both;}
 
 @keyframes fade-in {
@@ -598,7 +599,7 @@ header.minify .common_header.br_header::after {bottom:-565px;}
 }
 
 .brand_main .post-visual .swiper-slide-prev {opacity:0;}
-.brand_main .post-visual .swiper-slide-next {padding-left:0px; padding-right:440px;}
+.brand_main .post-visual .swiper-slide-next {opacity:1 !important; padding-left:0px; padding-right:440px;}
 .brand_main .post-visual .swiper-controls {position:absolute; width:auto; bottom:100px; left:190px; padding-right:15px; z-index:10;}
 .brand_main .post-visual .swiper-controls .swiper-pagination {margin-top:0}