Merge remote-tracking branch 'origin/jmh_tmp' into xodud1202

src/main/java/com/style24/front/biz/thirdparty/EigeneaiApi.java

@@ -540,4 +540,25 @@ public class EigeneaiApi {
 		return new ArrayList<Result>();
 	}
 
+	/**
+	 * 당신을 위한 제안
+	 * 사용되는 화면 영역)
+	 * 		메인 > 당신을 위한 제안
+	 * @param goodsCd - 상품코드
+	 * @param size - 결과에 포함할 상품수
+	 * @return
+	 * @author bin2107
+	 * @since 2021. 9. 23
+	 */
+	public Collection<Result> getRecommendForYouList(String goodsCd, int size) {
+		String requestUrl = apiUrl + "/a037?cuid=" + cuid + "&size=" + size + "&iids=" + goodsCd + "&cps=true&cpt=m001";
+
+		Eigeneai eigeneai = this.getEigeneaiInfo(requestUrl);
+		if (eigeneai.getResults() != null && !eigeneai.getResults().isEmpty()) {
+			return eigeneai.getResults();
+		}
+
+		return new ArrayList<Result>();
+	}
+
 }

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

@@ -49,41 +49,14 @@
 				</div>
 
 				<!-- 이런상품은 어떤가요 -->
-				<div class="now_view" id="recomArea" style="display:none;">
+				<div class="now_view" id="recomArea">
 					<div class="store_product">
 						<div class="allresult-tit">
 							<h3>이런 상품은 어떤가요?</h3>
 						</div>
 						<div class="swiper-container sch_product">
 							<div class="swiper-wrapper" id="recommendItemArea">
-								<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" th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/br_main03.png'" alt="">
-												</div>
-												<p class="itemBrand">BRAND NAME</p>
-												<div class=" itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-												<p class="itemPrice">
-													<span class="itemPrice_original">89,000</span>
-													80,100
-													<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>
@@ -518,7 +491,6 @@
 		$('#noDataFilter').hide();
 		$('#goodsNodata').hide();
 		$('#goodsKeyword').text('');
-		$('#recomArea').hide();
 		totalCnt = result.paging.totalCount;
 		$("#totCntId").text(totalCnt.addComma());
 		$("#prodListCnt").text('('+totalCnt.addComma()+')');
@@ -547,7 +519,6 @@
 			$('#eventNodata').hide();
 			$('#eventKeyword').text('');
 			$('#dataArea').show();
-			$('#recomArea').hide();
 			var goodsUrl = [[${@environment.getProperty('upload.goods.view')}]];
 			let lastPage = result.paging.pageNo;
 			let endRow = result.paging.endRow - result.paging.pageSize;
@@ -578,9 +549,6 @@
 				$('#goodsNodata').show();
 				$('#goodsKeyword').text([[${params.keyword}]]);
 				$('#dataArea').hide();
-				$('#recomArea').show();
-				// 검색어 연관 상품 추천
-				fnRecommendItemList([[${params.keyword}]]);
 			}
 			gagaInfiniteScroll.draw('not');
 		}
@@ -704,6 +672,9 @@
 	}
 
 	$(document).ready( function() {
+		// 검색어 연관 상품 추천
+		fnRecommendItemList([[${params.keyword}]]);
+
 		// 광고배너체크
 		if(!gagajf.isNull(adBannerList) && adBannerList.length>0){
 			var imgUrl = [[${@environment.getProperty('upload.image.view')}]];
@@ -1009,22 +980,19 @@
 					html += '	</div>\n';
 					html += '</div>\n';
 				});
+			}else{
+				$("#recomArea").hide();
 			}
 			$("#recommendItemArea").append(html);
 
-			if( "" == html){
-				$("#recomArea").hide();
-			}else{
-				$("#recomArea").show();
-				var swiperschProduct2 = new Swiper('.swiper-container.sch_product', {
-					slidesPerView: 2.2,
-					spaceBetween: 7,
-					autoplay: {
-						delay: 4000,
-					},
-					freeMode: true,
-				});
-			}
+			var swiperschProduct2 = new Swiper('.swiper-container.sch_product', {
+				slidesPerView: 2.2,
+				spaceBetween: 7,
+				autoplay: {
+					delay: 4000,
+				},
+				freeMode: true,
+			});
 		});
 	}
 
@@ -1053,6 +1021,7 @@
 		//listIdx = 1;
 		$('#endPage').hide();
 		$('#noFilterData').hide();
+		$("#recomArea").hide();
 	}
 
 	/*]]>*/

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

@@ -58,7 +58,7 @@
 								<!-- // 전체 검색결과 없을때 -->
 							</div>
 
-							<div class="inner" id="recomArea" style="display:none;">
+							<div class="inner" id="recomArea" >
 								<!-- 이런상품은 어떤가요 -->
 								<div class="now_view">
 									<div class="store_product">
@@ -67,34 +67,7 @@
 										</div>
 										<div class="swiper-container sch_product">
 											<div class="swiper-wrapper" id="recommendItemArea">
-												<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" th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/br_main03.png'" alt="">
-																</div>
-																<p class="itemBrand">BRAND NAME</p>
-																<div class=" itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-																<p class="itemPrice">
-																	<span class="itemPrice_original">89,000</span>
-																	80,100
-																	<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>
@@ -604,7 +577,6 @@
 		$('#endPage').hide();
 		$('#noDataFilter').hide();
 		$('#goodsNodata').hide();
-		$('#recomArea').hide();
 		$('#goodsKeyword').text('');
 		totalCnt = result.paging.totalCount;
 		$("#totCntId").text(totalCnt.addComma());
@@ -666,9 +638,6 @@
 				$('#goodsNodata').show();
 				$('#goodsKeyword').text([[${params.keyword}]]);
 				$('#dataArea').hide();
-				$('#recomArea').show();
-				// 검색어 연관 상품 추천
-				fnRecommendItemList([[${params.keyword}]]);
 			}
 			gagaInfiniteScroll.draw('not');
 		}
@@ -789,6 +758,9 @@
 	}
 
 	$(document).ready( function() {
+		// 검색어 연관 상품 추천
+		fnRecommendItemList([[${params.keyword}]]);
+
 		// 광고배너체크
 		if(!gagajf.isNull(adBannerList) && adBannerList.length>0){
 			var imgUrl = [[${@environment.getProperty('upload.image.view')}]];
@@ -1085,6 +1057,8 @@
 					html += '	</div>\n';
 					html += '</div>\n';
 				});
+			}else{
+				$('#recomArea').hide();
 			}
 			$("#recommendItemArea").append(html);
 
@@ -1105,6 +1079,8 @@
 		//listIdx = 1;
 		$('#endPage').hide();
 		$('#noFilterData').hide();
+		// 추천상품 hide
+		$('#recomArea').hide();
 	}
 
 	//TabWrap, TabIndex

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

@@ -97,7 +97,7 @@
 						</div>
 						<!-- //통합 상품 검색결과 없을 시 노출 -->
 						<!-- 추천상품 노출 -->
-						<div class="sch_recommend" id="recomArea" style="display:none;">
+						<div class="sch_recommend" id="recomArea">
 							<h3>이런 상품은 어떤가요?</h3>
 							<div class="itemsGrp" id="recommendItemArea">
 
@@ -434,7 +434,6 @@
 				$('#noFilterData').hide();
 				$('#endPage').hide();
 				$('#goodsNodata').hide();
-				$('#recomArea').hide();
 				$('#goodsKeyword').text('');
 				$('.cont_body .lnb').show();
 				$('.cont_body .cont').show();
@@ -474,9 +473,6 @@
 					$('#goodsKeyword').text([[${params.keyword}]]);
 					$('.cont_body .lnb').hide();
 					$('.cont_body .cont').hide();
-					$('#recomArea').show();
-					// 검색어 연관 상품 추천
-					fnRecommendItemList([[${params.keyword}]]);
 				}
 				gagaInfiniteScroll.draw('not');
 			}
@@ -617,6 +613,9 @@
 		}
 
 		$(document).ready( function() {
+			// 검색어 연관 상품 추천
+			fnRecommendItemList([[${params.keyword}]]);
+
 			// 광고배너체크
 			if(!gagajf.isNull(adBannerList) && adBannerList.length>0){
 				var imgUrl = [[${@environment.getProperty('upload.image.view')}]];
@@ -935,6 +934,8 @@
 						html += '	</div>\n';
 						html += '</div>\n';
 					});
+				}else{
+					$("#recomArea").hide();
 				}
 				$("#recommendItemArea").append(html);
 			});
@@ -946,6 +947,8 @@
 			//listIdx = 1;
 			$('#endPage').hide();
 			$('#noFilterData').hide();
+			// 추천상품 hide
+			$("#recomArea").hide();
 		}
 	</script>
 

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

@@ -521,6 +521,30 @@
 						</div>
 					</div>
 				</th:block>
+				<th:block th:if="${contentsLoc=='010'}">
+					<!-- 10. 당신을 위한 제안 -->
+					<div class="content main_foryou">
+						<div class="cont_head">
+							<p class="displayH" th:text="${mainLayoutData.contentsTitle}">당신을 위한 제안</p>
+							<span>스타일24에서 가장 주목받는 상품을 살펴보세요</span>
+						</div>
+						<div class="cont_body">
+							<div class="post-sug fy_nav">
+								<div class="swiper-container">
+									<div class="swiper-wrapper" id="keywordArea">
+
+									</div>
+								</div>
+								<div class="swiper-controls">
+									<div class="swiper-pagination"></div>
+								</div>
+							</div>
+							<div id="recomItemArea">
+
+							</div>
+						</div>
+					</div>
+				</th:block>
 			</th:block>
 	<!-- End Of Main Contents -->
 	</div>
@@ -592,8 +616,470 @@ $(document).ready( function() {
 
 	let randomNum = Math.floor( ( Math.random() * 4 ) );
 	$(".it_nav .btn").eq(randomNum).trigger('click');
+
+	// 당신을 위한 제안 쿠키값 확인 (로그인시 확인됨)
+	var pcId = gagajf.getCookie("RB_PCID");
+	// 추천솔루션 API 호출
+	//if(!gagajf.isNull(pcId)){
+		fnGetEigenApi(pcId);
+	//}
 });
 
+/**
+ * EigenApi
+ * size : 상품수
+ * nh : 키워드수
+ * */
+var fnGetEigenApi = function (id){
+	// console.log('[fnGetEigenApi ID]'+id);
+	$.getJSON('https://api.eigene.io/rec/p075?cuid=1252aed4-78dc-46e8-b784-94ac42e86dd4&size=10&nh=10&pcid='+id, function (result,status){
+		var keywordTag = '';
+		var itemTag = '';
+		var itemTag2 = '';
+		let dataJson = result.groupedResults;
+		let key1 = Object.keys(dataJson);
+
+		if (status === 'success') {
+			if (!gagajf.isNull(result.products) && result.products.length > 0) {
+				$("#keywordArea").html('');
+				$("#recomItemArea").html('');
+				$.each(result.products, function (idx, item) {
+					if (idx == 0 || idx == 5) {
+						keywordTag += '<div class="swiper-slide">\n';
+						keywordTag += '	<ul>\n';
+					}
+					keywordTag += '<li>\n';
+					keywordTag += '	<button class="btn btn_shape active" data-tab="fy' + (idx + 1) + '">\n';
+					keywordTag += '		<div>\n';
+					keywordTag += '			<span class="number">' + (idx + 1) + '</span>\n';
+					keywordTag += '			<span>' + item.sourceId + '</span>\n';
+					keywordTag += '		</div>\n';
+					keywordTag += '	</button>\n';
+					keywordTag += '	<a href="javascript:void(0);" onclick="cfnGoToSearchGoodsListForm(\''+ item.sourceId + '\')">자세히 보기</a>\n';
+					keywordTag += '</li>\n';
+					if (idx == 4 || idx == 9) {
+						keywordTag += '	</ul>';
+						keywordTag += '</div>';
+					}
+
+					for (var i=0; i<key1.length; i++) {
+						var key = key1[i];
+						// console.log("key : " + key + ", value : " + dataJson[key])
+						if(item.sourceId == key){
+								itemTag += '<div class="fy_item" id="fy'+(idx+1)+'">\n';
+								$.each(dataJson[key], function (keyIdx, keyItem){
+									if(idx%2 == 0) {
+										if(keyIdx==0){
+											itemTag += '	<div class="part">\n';
+											itemTag += '		<div class="item_prod">\n';
+											itemTag += '			<div class="item_state">\n';
+											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
+											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
+											itemTag += '					<div class="itemPic">\n';
+											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
+											itemTag += '					</div>\n';
+											itemTag += '					<div class="itemInfo">\n';
+											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
+											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
+											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
+											itemTag += '					</div>\n';
+											itemTag += '				</a>\n';
+											itemTag += '			</div>\n';
+											itemTag += '		</div>\n';
+										}else if(keyIdx==1){
+											itemTag += '		<div class="item_prod">\n';
+											itemTag += '			<div class="item_state">\n';
+											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
+											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
+											itemTag += '					<div class="itemPic">\n';
+											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
+											itemTag += '					</div>\n';
+											itemTag += '					<div class="itemInfo">\n';
+											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
+											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
+											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
+											itemTag += '					</div>\n';
+											itemTag += '				</a>\n';
+											itemTag += '			</div>\n';
+											itemTag += '		</div>\n';
+											itemTag += '	</div>\n';
+										}else if(keyIdx==2){
+											itemTag += '	<div class="part lg">\n';
+											itemTag += '		<div class="item_prod">\n';
+											itemTag += '			<div class="item_state">\n';
+											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
+											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
+											itemTag += '					<div class="itemPic">\n';
+											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
+											itemTag += '					</div>\n';
+											itemTag += '					<div class="itemInfo">\n';
+											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
+											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
+											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
+											itemTag += '					</div>\n';
+											itemTag += '				</a>\n';
+											itemTag += '			</div>\n';
+											itemTag += '		</div>\n';
+											itemTag += '	</div>\n';
+										}else if(keyIdx==3){
+											itemTag += '	<div class="part">\n';
+											itemTag += '		<div class="item_prod">\n';
+											itemTag += '			<div class="item_state">\n';
+											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
+											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
+											itemTag += '					<div class="itemPic">\n';
+											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
+											itemTag += '					</div>\n';
+											itemTag += '					<div class="itemInfo">\n';
+											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
+											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
+											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
+											itemTag += '					</div>\n';
+											itemTag += '				</a>\n';
+											itemTag += '			</div>\n';
+											itemTag += '		</div>\n';
+										}else if(keyIdx==4){
+											itemTag += '		<div class="item_prod">\n';
+											itemTag += '			<div class="item_state">\n';
+											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
+											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
+											itemTag += '					<div class="itemPic">\n';
+											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
+											itemTag += '					</div>\n';
+											itemTag += '					<div class="itemInfo">\n';
+											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
+											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
+											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
+											itemTag += '					</div>\n';
+											itemTag += '				</a>\n';
+											itemTag += '			</div>\n';
+											itemTag += '		</div>\n';
+											itemTag += '	</div>\n';
+										}else if(keyIdx==5){
+											itemTag += '	<div class="part">\n';
+											itemTag += '		<div class="item_prod">\n';
+											itemTag += '			<div class="item_state">\n';
+											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
+											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
+											itemTag += '					<div class="itemPic">\n';
+											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
+											itemTag += '					</div>\n';
+											itemTag += '					<div class="itemInfo">\n';
+											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
+											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
+											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
+											itemTag += '					</div>\n';
+											itemTag += '				</a>\n';
+											itemTag += '			</div>\n';
+											itemTag += '		</div>\n';
+										}else if(keyIdx==6){
+											itemTag += '		<div class="item_prod">\n';
+											itemTag += '			<div class="item_state">\n';
+											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
+											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
+											itemTag += '					<div class="itemPic">\n';
+											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
+											itemTag += '					</div>\n';
+											itemTag += '					<div class="itemInfo">\n';
+											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
+											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
+											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
+											itemTag += '					</div>\n';
+											itemTag += '				</a>\n';
+											itemTag += '			</div>\n';
+											itemTag += '		</div>\n';
+											itemTag += '	</div>\n';
+										}
+									}else{
+										if(keyIdx==0){
+											itemTag += '	<div class="part">\n';
+											itemTag += '		<div class="item_prod">\n';
+											itemTag += '			<div class="item_state">\n';
+											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
+											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
+											itemTag += '					<div class="itemPic">\n';
+											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
+											itemTag += '					</div>\n';
+											itemTag += '					<div class="itemInfo">\n';
+											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
+											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
+											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
+											itemTag += '					</div>\n';
+											itemTag += '				</a>\n';
+											itemTag += '			</div>\n';
+											itemTag += '		</div>\n';
+										}else if(keyIdx==1){
+											itemTag += '		<div class="item_prod">\n';
+											itemTag += '			<div class="item_state">\n';
+											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
+											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
+											itemTag += '					<div class="itemPic">\n';
+											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
+											itemTag += '					</div>\n';
+											itemTag += '					<div class="itemInfo">\n';
+											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
+											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
+											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
+											itemTag += '					</div>\n';
+											itemTag += '				</a>\n';
+											itemTag += '			</div>\n';
+											itemTag += '		</div>\n';
+											itemTag += '	</div>\n';
+										}else if(keyIdx==2){
+											itemTag += '	<div class="part">\n';
+											itemTag += '		<div class="item_prod">\n';
+											itemTag += '			<div class="item_state">\n';
+											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
+											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
+											itemTag += '					<div class="itemPic">\n';
+											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
+											itemTag += '					</div>\n';
+											itemTag += '					<div class="itemInfo">\n';
+											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
+											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
+											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
+											itemTag += '					</div>\n';
+											itemTag += '				</a>\n';
+											itemTag += '			</div>\n';
+											itemTag += '		</div>\n';
+										}else if(keyIdx==3){
+											itemTag += '		<div class="item_prod">\n';
+											itemTag += '			<div class="item_state">\n';
+											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
+											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
+											itemTag += '					<div class="itemPic">\n';
+											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
+											itemTag += '					</div>\n';
+											itemTag += '					<div class="itemInfo">\n';
+											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
+											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
+											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
+											itemTag += '					</div>\n';
+											itemTag += '				</a>\n';
+											itemTag += '			</div>\n';
+											itemTag += '		</div>\n';
+											itemTag += '	</div>\n';
+										}else if(keyIdx==4){
+											itemTag += '	<div class="part">\n';
+											itemTag += '		<div class="item_prod">\n';
+											itemTag += '			<div class="item_state">\n';
+											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
+											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
+											itemTag += '					<div class="itemPic">\n';
+											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
+											itemTag += '					</div>\n';
+											itemTag += '					<div class="itemInfo">\n';
+											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
+											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
+											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
+											itemTag += '					</div>\n';
+											itemTag += '				</a>\n';
+											itemTag += '			</div>\n';
+											itemTag += '		</div>\n';
+										}else if(keyIdx==5){
+											itemTag += '		<div class="item_prod">\n';
+											itemTag += '			<div class="item_state">\n';
+											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
+											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
+											itemTag += '					<div class="itemPic">\n';
+											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
+											itemTag += '					</div>\n';
+											itemTag += '					<div class="itemInfo">\n';
+											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
+											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
+											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
+											itemTag += '					</div>\n';
+											itemTag += '				</a>\n';
+											itemTag += '			</div>\n';
+											itemTag += '		</div>\n';
+											itemTag += '	</div>\n';
+										}else if(keyIdx==6){
+											itemTag += '	<div class="part lg">\n';
+											itemTag += '		<div class="item_prod">\n';
+											itemTag += '			<div class="item_state">\n';
+											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
+											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
+											itemTag += '					<div class="itemPic">\n';
+											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
+											itemTag += '					</div>\n';
+											itemTag += '					<div class="itemInfo">\n';
+											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
+											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
+											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
+											itemTag += '					</div>\n';
+											itemTag += '				</a>\n';
+											itemTag += '			</div>\n';
+											itemTag += '		</div>\n';
+											itemTag += '	</div>\n';
+										}
+									}
+
+								});
+								itemTag += '</div>\n';
+						}
+					}
+				});
+				$("#keywordArea").append(keywordTag);
+				$("#recomItemArea").append(itemTag);
+
+				// 위시 좋아요 처리
+				if (cfCheckLogin()) {
+					let targetT = $('.main_foryou').find('#recomItemArea').find('.item_state').find('button');
+					//let targetTSize = targetT.length;
+					targetT.each(function(){
+						let goodsCd = $(this).attr('goodscd');
+						var $this = $(this);
+						let url = "/mypage/wish/list/check/"+goodsCd;
+						var result = '';
+						$.ajax({
+							type: 'get'
+							, async: false
+							, url: url
+							, success: function (data) {
+								//likeit active
+								if ("Y" == data){
+									$this.addClass('likeit').addClass('active');
+								}
+							}
+						});
+					});
+				}
+
+				/* SLIDE - MAIN_RECOMM */
+				//MAIN_RECOMM_키워드 탭
+				$(".main_recomm .tag_list .btn").click(function () {
+					var recommActive = $(this).attr('data-tab');
+					$(".main_recomm .tag_list .btn").removeClass('active');
+					$(".main_recomm .tagitem").removeClass('active');
+					$(this).addClass('active');
+					$('#' + recommActive).addClass('active');
+				});
+
+				function init() {
+
+					if (main_recomm_slide != null) main_recomm_slide.destroy();
+
+					var main_recomm_slide = new Swiper('.main_recomm .post-recomm', {
+						slidesPerView: 5,
+						slidesPerGroup: 5,
+						speed: 1000,
+						spaceBetween: 20,
+						loop: true,
+						a11y: {
+							enabled: true,
+							notificationClass: 'swiper-notification',
+							prevSlideMessage: '이전 슬라이드',
+							nextSlideMessage: '다음 슬라이드',
+							paginationBulletMessage: '슬라이드 {{index}}로 이동',
+						},
+						pagination: {
+							el: '.main_recomm .swiper-pagination',
+							clickable: true,
+						},
+						navigation: {
+							nextEl: '.main_recomm .swiper-button-next',
+							prevEl: '.main_recomm .swiper-button-prev',
+						},
+						observer: true,
+						observeParents: true,
+					});
+				}
+
+				init();
+
+				/* SLIDE - MAIN_FORYOU */
+				var cntNum = 0;
+				var main_foryou_slide = new Swiper('.main_foryou .post-sug .swiper-container', {
+					allowTouchMove: false,
+					loop: false,
+					effect: 'fade',
+					autoHeight: false,
+					autoplay: {
+						delay: 25000,
+						disableOnInteraction: false,
+					},
+					a11y: {
+						enabled: true,
+						notificationClass: 'swiper-notification',
+						prevSlideMessage: '이전 슬라이드',
+						nextSlideMessage: '다음 슬라이드',
+						paginationBulletMessage: '슬라이드 {{index}}로 이동',
+					},
+					pagination: {
+						el: '.post-sug .swiper-pagination',
+						clickable: true,
+					},
+					on: {
+						slideChange: function () {
+							$(".fy_nav .swiper-slide li").children('.btn_shape').removeClass('active');
+							$(".fy_nav .swiper-slide-next li").eq(0).children('.btn_shape').addClass('active');
+							$(".fy_nav .swiper-slide-prev li").eq(0).children('.btn_shape').addClass('active');
+							foryouIndex = -1;
+							if (cntNum === 0) {
+								$('.fy_item').removeClass('active');
+								$('#fy6').addClass('active');
+								cntNum = 1;
+							} else {
+								$('.fy_item').removeClass('active');
+								$('#fy1').addClass('active');
+								cntNum = 0;
+							}
+
+							clearInterval(ti);
+							ti = startTimeInterval();
+						}
+					},
+				});
+
+				function foryouInterval(_foryouIndex) {
+					var foryouCateItems = $(".main_foryou .fy_nav .swiper-slide-active ul li .btn_shape");
+					$(foryouCateItems[(_foryouIndex + 1) % 5]).addClass("active");
+					$(foryouCateItems[_foryouIndex % 5]).removeClass("active");
+				}
+
+				function foryouFy_item(_Fy_itemIndex) {
+					var fynavItems = $('.main_foryou .fy_nav .swiper-slide-active ul li .btn_shape.active');
+					var fyActive = $(fynavItems).attr('data-tab');
+					// $(".fy_nav .btn_shape").removeClass('active');
+					$(".fy_item").removeClass('active');
+					// $(".fy_item").addClass('active');
+					$('#' + fyActive).addClass('active');
+				}
+
+				var foryouIndex = 0;
+				var ti;
+
+				function startTimeInterval() {
+					return setInterval(function () {
+						$(".fy_nav .btn_shape").removeClass('active');
+						$(".fy_item").removeClass('active');
+						foryouInterval(foryouIndex);
+						foryouFy_item();
+						if (foryouIndex >= 5) foryouIndex = 0;
+						foryouIndex++;
+					}, 5000);
+				}
+
+				$(".fy_nav .btn_shape").click(function () {
+					var fyActive = $(this).attr('data-tab');
+					$(".fy_nav .btn_shape").removeClass('active');
+					$(".fy_item").removeClass('active');
+					$(this).addClass('active');
+					$('#' + fyActive).addClass('active');
+				});
+
+				$(".fy_nav ul li").click(function () {
+					foryouIndex = $(this).index();
+					clearInterval(ti);
+					ti = startTimeInterval();
+				});
+
+				ti = startTimeInterval();
+			}
+		}
+	});
+}
+
 /* SLIDE - MAIN_VISUAL */
 var agent = navigator.userAgent.toLowerCase();
 

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

@@ -113,34 +113,10 @@
 						</div>
 						<!-- //통합 상품 검색결과 없을 시 노출 -->
 						<!-- 추천상품 노출 -->
-						<div class="sch_recommend" style="display:none;">
+						<div class="sch_recommend">
 							<h3>이런 상품은 어떤가요?</h3>
 							<div class="itemsGrp" id="recommendItemArea">
-								<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" th:src="${@environment.getProperty('domain.uximage')} + '/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>
-											<p class="itemBadge">
-												<span class="badge13">베스트 </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>
-											<div class="itemComment">#주문 폭주 상품</div>
-										</a>
-									</div>
-								</div>
+
 							</div>
 						</div>
 						<!-- //추천상품 노출 -->
@@ -490,6 +466,8 @@
 		var adBannerTag = '';
 		var filterPriceList = [[${filterPriceList}]];
 		var custom_values = [];
+		var recommendItemList = [[${recommendItemList}]];
+		console.log('recommendItemList::'+recommendItemList.result);
 
 		// 상품리스트 페이지 확인용
 		var listIdx = 1;
@@ -536,7 +514,7 @@
 				$('#noFilterData').hide();
 				$('#endPage').hide();
 				$('#goodsNodata').hide();
-				$('.sch_recommend').hide();
+				// $('.sch_recommend').show();
 				$('#goodsKeyword').text('');
 				$('.cont_body .lnb').show();
 				//$('.cont_body .cont').show();
@@ -551,6 +529,8 @@
 				listIdx++;
 				fnImgOnoff();
 			}else{
+				// 추천상품 hide
+				// $('.sch_recommend').hide();
 				if(listIdx > 1){ // 데이터가 1건 이상
 					if(totalCnt > Number($("#searchGoodsForm").find("input[name=pageSize]").val())){
 						if($("#searchGoodsForm input[name=pageNo]").val()==1){
@@ -577,9 +557,6 @@
 					$('.cont_body .lnb').hide();
 					//$('.cont_body .cont').hide();
 					$("#filterArea").hide();
-					$('.sch_recommend').show();
-					// 검색어 연관 상품 추천
-					fnRecommendItemList([[${params.keyword}]]);
 				}
 				gagaInfiniteScroll.draw('not');
 			}
@@ -850,6 +827,9 @@
 		}
 
 		$(document).ready( function() {
+			// 검색어 연관 상품 추천
+			fnRecommendItemList([[${params.keyword}]]);
+
 			// 광고배너체크
 			if(!gagajf.isNull(adBannerList) && adBannerList.length>0){
 				var imgUrl = [[${@environment.getProperty('upload.image.view')}]];
@@ -1170,6 +1150,8 @@
 						html += '	</div>\n';
 						html += '</div>\n';
 					});
+				}else{
+					$('.sch_recommend').hide();
 				}
 				$("#recommendItemArea").append(html);
 			});
@@ -1181,6 +1163,8 @@
 			//listIdx = 1;
 			$('#endPage').hide();
 			$('#noFilterData').hide();
+			// 추천상품 hide
+			$('.sch_recommend').hide();
 		}
 
 	</script>

src/main/webapp/ux/mo/css/layout_m.css

@@ -223,7 +223,7 @@
 .mb .sns_wrap .login_utill > li a .ico:before{display:block; content:''; position:absolute; top:50%; left:50%; background:url('//image.istyle24.com/Style24/images/mo/ico_snslogin.png'); transform:translate(-50%, -50%);background-size: 7.0rem 2.2rem;}
 .mb .sns_wrap .login_utill > li.lu_kakao a .ico{background:#ffe500;}
 .mb .sns_wrap .login_utill > li.lu_kakao a .ico:before{width:2rem; height:2.2rem; background-position:0 0;}
-.mb .sns_wrap .login_utill > li.lu_naver a .ico{background:#69c441;}
+.mb .sns_wrap .login_utill > li.lu_naver a .ico{background: linear-gradient(180deg, #03f067, #03b366);}
 .mb .sns_wrap .login_utill > li.lu_naver a .ico:before{width:1.6rem; height:2.2rem; background-position: -2rem 0;}
 .mb .sns_wrap .login_utill > li.lu_yes24 a .ico{background:#f5f5f5;}
 .mb .sns_wrap .login_utill > li.lu_yes24 a .ico:before{width:3.4rem; height:2.2rem; background-position: -3.6rem 0;}

src/main/webapp/ux/mo/js/common_m.js

@@ -443,12 +443,14 @@ $(document).ready(function () {
             $(this).toggleClass("on");
             $(".hmenu").toggleClass("on");
             $("body").toggleClass("gnb_on");
+            $("html").toggleClass("gnb_on"); // 0914
             $(".scrollWrap").scrollTop(0);
         });
         // GNB
         $(".btn_gnbs").on("click", function () {
             $(this).toggleClass("on");
             $(".hmenus").toggleClass("on");
+            $("html").toggleClass("gnb_on"); // 0914
             $("body").toggleClass("gnb_on");
         });
         $(".gnb .d1 > .folder > a").on("click", function () {