프론트 상품리스트

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

@@ -196,5 +196,9 @@ public class Goods extends TscBaseDomain {
 	private String todayGoodsSql;	// 오늘본상품SQL
 
 	private String likeIt;			// 위시리스트에담긴상품
+	private String videoVal;
+	private String colorChips;
+	private String sizes;
+	private String icon;
 
 }

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

@@ -1019,6 +1019,19 @@
 		AND    OPT_CD1 = G.MAIN_COLOR_CD
 		AND    DISP_YN = 'Y'
 		) AS SIZES /*사이즈*/
+		, (
+		SELECT GROUP_CONCAT(CONCAT(BENEFIT_GB,':',BENEFIT_NM) ORDER BY NUMB SEPARATOR ',')
+		FROM   (
+		SELECT GB.BENEFIT_GB
+		, CASE WHEN GB.BENEFIT_GB = '10' THEN '쿠폰할인'
+		       WHEN GB.BENEFIT_GB = '20' THEN '무료배송'
+		       WHEN GB.BENEFIT_GB = '30' THEN '사은품'
+		       ELSE '신상' END AS BENEFIT_NM
+		, RANK() OVER(ORDER BY GB.BENEFIT_GB, GB.GOODS_CD) AS NUMB
+		FROM   TB_GOODS_BENEFIT GB
+		WHERE  GB.GOODS_CD = G.GOODS_CD
+		) Z
+		) AS ICON
 		, FORMAL_GB
 		, REG_DT
 		, NUMB

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

@@ -385,6 +385,7 @@
 				let endRow = result.endRow - result.paging.pageable.pageSize;
 				var htm = fnCreateGoodsList(result, ithrCd, contentLoc, goodsUrl, lastPage, endRow);
 				gagaInfiniteScroll.draw(htm);
+				fnImgOnoff();
 			}else {
 				if($("#searchForm input[name=pageNo]").val()==1){
 					$('#listBox').html('<li class="none">상품정보가 존재하지 않습니다.</li>');
@@ -507,6 +508,53 @@
 			return tag;
 		}
 
+		var fnImgOnoff = function (){
+			var nowMov = $('.itemPic').children('.pd_mov');
+			var nowImg = $('.itemPic').children('.pd_img');
+			var ogrSrc;
+			var overSrc;
+			var srcName = nowImg.attr('src');
+			overSrc = srcName.substring(0, srcName.lastIndexOf('.'));
+
+			var img1;
+			var img2;
+
+			$(nowMov).on('mouseover', function() {
+				// [on] size opt
+				$(this).siblings(".itemOpt").stop().animate({"bottom": 0}, 400,"swing");
+				// [on] mov none
+				$(this).css("opacity","0");
+				// return false;
+			});
+			$(nowMov).on('mouseleave', function() {
+				// [off] size opt
+				$(this).siblings(".itemOpt").stop().animate({"bottom": -120}, 400,"swing");
+				// [off] mov block
+				$(this).css("opacity","1");
+				// return false;
+			});
+			$(nowImg).on('mouseover', function() {
+				img1 = $(this).attr('src');
+				img2 = $(this).attr('data-img');
+				// [on] size opt
+				$(this).siblings(".itemOpt").stop().animate({"bottom": 0}, 400,"swing");
+				// [on] re-Name
+				// ogrSrc = $(this).attr('src').substring(0, srcName.lastIndexOf('.'));
+				// overSrc = $(this).attr('src').substring(0, srcName.lastIndexOf('.'));
+				// $(this).attr('src', overSrc+ '_onhover.' + /[^.]+$/.exec(srcName));
+				$(this).attr('src',img2);
+				// return false;
+			});
+			$(nowImg).on('mouseleave', function() {
+				// [off] size opt
+				$(this).siblings(".itemOpt").stop().animate({"bottom": -120}, 400,"swing");
+				// [off] re-Name
+				// $(this).attr('src', overSrc + '.' + /[^.]+$/.exec(srcName));
+				$(this).attr('src', img1);
+				// return false;
+			});
+		}
+
 		// 사파리 - event.persisted || 크롬 - window.performance.navigation.type 이 1이면 새로고침, 2면 페이지 이동을 통한 캐쉬페이징
 		$(window).on("pageshow", function(event) {
 			$('#filterForm input[name=brand]:checked').each(function(){
@@ -566,43 +614,7 @@
 	<script>
 		//(진행 중)
 		$(document).ready( function() {
-			var nowMov = $('.itemPic').children('.pd_mov');
-			var nowImg = $('.itemPic').children('.pd_img');
-			var ogrSrc;
-			var overSrc;
-			var srcName = nowImg.attr('src');
-			overSrc = srcName.substring(0, srcName.lastIndexOf('.'));
 
-			$(nowMov).on('mouseover', function() {
-				// [on] size opt
-				$(this).siblings(".itemOpt").stop().animate({"bottom": 0}, 400,"swing");
-				// [on] mov none
-				$(this).css("opacity","0");
-				// return false;
-			});
-			$(nowMov).on('mouseleave', function() {
-				// [off] size opt
-				$(this).siblings(".itemOpt").stop().animate({"bottom": -120}, 400,"swing");
-				// [off] mov block
-				$(this).css("opacity","1");
-				// return false;
-			});
-			$(nowImg).on('mouseover', function() {
-				// [on] size opt
-				$(this).siblings(".itemOpt").stop().animate({"bottom": 0}, 400,"swing");
-				// [on] re-Name
-				ogrSrc = $(this).attr('src').substring(0, srcName.lastIndexOf('.'));
-				overSrc = $(this).attr('src').substring(0, srcName.lastIndexOf('.'));
-				$(this).attr('src', overSrc+ '_onhover.' + /[^.]+$/.exec(srcName));
-				// return false;
-			});
-			$(nowImg).on('mouseleave', function() {
-				// [off] size opt
-				$(this).siblings(".itemOpt").stop().animate({"bottom": -120}, 400,"swing");
-				// [off] re-Name
-				$(this).attr('src', overSrc + '.' + /[^.]+$/.exec(srcName));
-				// return false;
-			});
 		});
 	</script>
 

src/main/webapp/biz/goods.js

@@ -176,8 +176,6 @@ var fnCreateGoodsList = function(result, ithrCd, contentLoc, goodsUrl, lastPage,
 		tag += '		<a href="#none" class="itemLink">';
 		// tag += '			<div class="rank ranker"><span>'+(rank+(idx+1))+'</span></div>';
 		tag += '			<div class="itemPic">';
-		tag += '				<img alt="BLUE-a" class=" vLHTC pd_img" src="'+goodsUrl+'/'+item.sysImgNm+'">';
-		tag += '			</div>';
 		if(!gagajf.isNull(item.videoVal)){
 			var videoArr = item.videoVal.split(",");
 			var videoGb = '';
@@ -188,11 +186,54 @@ var fnCreateGoodsList = function(result, ithrCd, contentLoc, goodsUrl, lastPage,
 				videoUrl = videoInfo[1];
 			}
 			if(videoGb=='Y'){
-				tag += '<iframe id="child" className="pd_mov" src="https://www.youtube.com/embed/'+videoUrl+'"></iframe>';
+				tag += '<iframe id="child" class="pd_mov" src="https://www.youtube.com/embed/'+videoUrl+'"></iframe>';
 			}else{
-				tag += '<iframe id="child" className="pd_mov" src="http://v.kr.kollus.com/'+videoUrl+'"></iframe>';
+				tag += '<iframe id="child" class="pd_mov" src="http://v.kr.kollus.com/'+videoUrl+'"></iframe>';
 			}
 		}
+		tag += '		<img class=" vLHTC pd_img" src="'+goodsUrl+'/'+item.sysImgNm+'" data-img="'+goodsUrl+'/'+item.sysImgNm2+'">';
+		if(!gagajf.isNull(item.sizes)){
+			var sizeArr = item.sizes.split(",");
+			var minSize;
+			var maxSize;
+			var sizeVal = '';
+			var soldOutYn = '';
+			tag +='<div class="itemOpt">';
+			tag +='	<p>SIZE</p>';
+
+			if(sizeArr.length>5){
+				for(let i=0; i<sizeArr.length; i++){
+					var sizeInfo = sizeArr[i].split(":");
+					sizeVal = sizeInfo[0];
+					soldOutYn = sizeInfo[1];
+					if(i==0){
+						minSize = sizeVal;
+					}else if(i==sizeArr.length-1){
+						maxSize = sizeVal;
+					}
+				}
+				tag +='	<div class="exc">';
+				tag +='		<span>'+minSize+'</span> ~ <span>'+maxSize+'</span> 사이즈가 있습니다.';
+				tag +='	</div>';
+			}else{
+				tag += '<ul>';
+				for(let i=0; i<sizeArr.length; i++){
+					var sizeInfo = sizeArr[i].split(":");
+					sizeVal = sizeInfo[0];
+					soldOutYn = sizeInfo[1];
+					if(soldOutYn=='N'){
+						tag +='		<li>'+sizeVal+'</li>';
+					}else{
+						tag +='		<li className="none">'+sizeVal+'</li>';
+					}
+				}
+				tag += '</ul>';
+			}
+			tag += '			</div>';
+		}
+
+		tag += '			</div>';
+
 		tag += '			<p class="itemBrand">'+item.brandGroupNm+'</p>';
 		tag += '			<div class="itemName">'+item.goodsFullNm+'</div>';
 		tag += '			<p class="itemPrice">'+item.currPrice.addComma();
@@ -204,13 +245,37 @@ var fnCreateGoodsList = function(result, ithrCd, contentLoc, goodsUrl, lastPage,
 		}
 		tag += '			</p>';
 		tag += '			<div class="itemcolorchip">';
-		tag += '				<span class="chip_color35" value="ABM">BEIGE</span>';
-		tag += '				<span class="chip_color54" value="BDS">BLACK</span>';
-		tag += '				<span class="chip_color40" value="YBR">WHITE</span>';
+		if(!gagajf.isNull(item.colorChips)){
+			var colorArr = item.colorChips.split(",");
+			var colorCd = '';
+			var rgbColor = '';
+			for(let i=0; i<colorArr.length; i++){
+				var colorInfo = colorArr[i].split(":");
+				colorCd = colorInfo[0];
+				rgbColor = colorInfo[1];
+				if(rgbColor=='#FFFFFF'){
+					tag += '	<span class="chip_color" style="background-color: '+rgbColor+';border:1px solid #aaa;" value="'+colorCd+'">'+colorCd+'</span>';
+				}else{
+					tag += '	<span class="chip_color" style="background-color: '+rgbColor+'" value="'+colorCd+'">'+colorCd+'</span>';
+				}
+			}
+		}
 		tag += '			</div>';
-		tag += '			<p class="itemBadge">';
-		tag += '				<span class="badge13">베스트 </span>';
-		tag += '			</p>';
+
+		if(!gagajf.isNull(item.icon)){
+			var iconArr = item.icon.split(",");
+			var iconGb = '';
+			var iconNm = '';
+			tag += '	<p class="itemBadge">';
+			for(let i=0; i<iconArr.length; i++){
+				var iconInfo = iconArr[i].split(":");
+				iconGb = iconInfo[0];
+				iconNm = iconInfo[1];
+				tag += '	<span class="badge13" value="'+iconGb+'">'+iconNm+' </span>';
+			}
+			tag += '	</p>';
+		}
+
 		if(item.goodsTnm != null){
 			tag += '			<div class="itemComment">'+item.goodsTnm+'</div>';
 		}