웹 상품평 상세관련 수정중

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

@@ -859,6 +859,21 @@ public class TsfGoodsController extends TsfBaseController {
 		mav.setViewName(super.getDeviceViewName("goods/GoodsReviewDetailForm"));
 		return mav;
 	}
+	
+	/**
+	 * 상품상세 -  상품평 상세 레이어
+	 * @return
+	 * @author eskim
+	 * @since 2021. 3. 8
+	 */
+	@PostMapping("/review/detail/list")
+	@ResponseBody
+	public GagaMap getReviewDetailList(@RequestBody Review review) {
+
+		GagaMap result = new GagaMap();
+		result.set("reviewList", reviewService.getReviewList(review));
+		return result;
+	}
 
 	/**
 	 * 상품상세 - 다다익선 상품

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

@@ -744,7 +744,7 @@
 		         , FN_GET_BENEFIT_PRICE(#{frontGb},G.GOODS_CD, G.CURR_PRICE,#{custGb}) AS CURR_PRICE
 		         , (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
-		         , (CASE WHEN G.GOODS_CD IS NULL THEN 'N' ELSE 'Y' END) AS WISH_YN
+		         , (CASE WHEN W.GOODS_CD IS NULL THEN 'N' ELSE 'Y' END) AS WISH_YN
 		    FROM TAB_MASTER_GOODS G
 		    LEFT OUTER JOIN TB_WISHLIST W ON G.GOODS_CD = W.GOODS_CD
 		                                  AND IFNULL(#{custNo}, 0) = W.CUST_NO
@@ -835,7 +835,7 @@
 		         , FN_GET_BENEFIT_PRICE(#{frontGb},G.GOODS_CD, G.CURR_PRICE,#{custGb}) AS CURR_PRICE
 		         , (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
-		         , (CASE WHEN G.GOODS_CD IS NULL THEN 'N' ELSE 'Y' END) AS WISH_YN
+		         , (CASE WHEN W.GOODS_CD IS NULL THEN 'N' ELSE 'Y' END) AS WISH_YN
 		    FROM TAB_MASTER_GOODS G
 		    LEFT OUTER JOIN TB_WISHLIST W ON G.GOODS_CD = W.GOODS_CD
 		                                  AND IFNULL(#{custNo}, 0) = W.CUST_NO

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

@@ -208,7 +208,7 @@
 		            AND REVIEW_SQ = R.REVIEW_SQ
 		            AND (FILE_GB  = 'I'
 		                 OR
-		                 FILE_GB = 'M' AND R.CONFIRM_YN = 'Y' AND  KMC_EKY IS NOT NULL
+		                 FILE_GB = 'M' AND R.CONFIRM_YN = 'Y' AND  KMC_KEY IS NOT NULL
 		                )
 		            )
 		</if>
@@ -274,7 +274,7 @@
 		AND R.REVIEW_SQ = #{reviewSq}
 		AND (A.FILE_GB  = 'I'
 		     OR
-		     A.FILE_GB = 'M' AND R.CONFIRM_YN = 'Y' AND  A.KMC_EKY IS NOT NULL
+		     A.FILE_GB = 'M' AND R.CONFIRM_YN = 'Y' AND  A.KMC_KEY IS NOT NULL
 		    )
 	</select>
 	

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

@@ -65,7 +65,7 @@
 <script th:inline="javascript">
 /*<![CDATA[*/
 	
-	var fnGetList = function() {debugger;
+	var fnGetList = function() {
 		
 		// 상품문의창 닫기
 		//$("#layer_goods_qna_reg").modal("hide");

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

@@ -547,7 +547,7 @@
 					var fileGbClass = '';
 					$.each(item.reviewAttachList, function(aIdx, reviewAttach){
 						fileGbClass = '';
-						if (reviewAttach == "M") fileGbClass = "mov";
+						if (reviewAttach.fileGb == "M") fileGbClass = "mov";
 				tag += '				<li>\n';
 				tag += '					<a href="javascript:void();" onclick="cfGoodsReviewDetail(\''+item.goodsCd+'\',\'\', \'Y\',\''+item.reviewSq+'\');">\n';
 				tag += '						<div class="pic">\n';

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

@@ -25,187 +25,196 @@
 			<button type="button" id="btn_pdPhotoReviewList_pop" th:onclick="cfGoodsReviewPhoto([[${params.goodsCd}]])"  class="btn_more"><span>전체보기</span></button>
 			</th:block>
 		</div>
-		<div class="modal-body" th:if="${reviewList != null and !reviewList.empty}">
+		<div class="modal-body" id="reviewBody">
 			<div class="pop_cont">
 				<div class="swiper-container detail">
 					<div class="swiper-wrapper">
-						<div class="swiper-slide"  th:each="review, status : ${reviewList}" >
+						<div class="swiper-slide" id="reviewBody">
 							<!-- 리뷰내용 -->
-							<div class="review" th:classAppend="${(review.reviewAttachList == null or review.reviewAttachList.empty) ? 'empty_photo' :''}" >  <!-- 첨부이미지 없을 시 empty_photo 클래스 추가 --> 
-								<div class="pic">
-									<th:block th:if="${review.reviewAttachList != null and !review.reviewAttachList.empty}" >
-										<th:block th:each="reviewAttach, attachStatus : ${review.reviewAttachList}" th:if="${attachStatus.first}">
-									<span class="thumb" th:classAppend="${(reviewAttach.fileGb == 'M') ? 'mov' :''}" ><!-- 동영상의 썸네일일 경우 mov 클래스 추가-->
-										<th:block th:if="${reviewAttach.fileGb == 'M'}">
-										<video poster="http://cdn.011st.com/11dims/resize/1999x1999/quality/75/11src/review/10201202/3121412332/2e66698576d64c5c9977a6fe6606008d.jpg" muted="muted" preload="metadata" controls="controls">
-											<source src="http://snsvideo.11st.co.kr/movie/item/www/675/67518524_06_1_C1.mp4" type="video/mp4">
-										</video>
-										</th:block>
-										<th:block th:unless="${reviewAttach.fileGb == 'M'}">
-										<img th:src="${imgUrl+'/'+reviewAttach.sysFileNm}" alt="">
-										</th:block>
-									</span>
-										</th:block>
-									</th:block>
-									<th:block th:unless="${review.reviewAttachList != null and !review.reviewAttachList.empty}">
-									<span class="thumb">
-										<img th:src="${imgGoodsUrl+'/'+review.sysImgNm+'?RS=365'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
-									</span>
-									</th:block>
-								</div>
-								<div class="review_cont">
-									<div class="box_wrap">
-										<div class="star_box">
-											<div class="star_score" th:with="starScore=${#numbers.formatDecimal((review.iscore*100/5), 0,0)}">
-												<span class="star">
-													<em class="progbar" th:style="${'width:'+starScore+'%;' }"></em> <!-- 평점 style로 표기 -->
-												</span>
-											</div>
-										</div>
-										<div class="response_box">
-											<div class="full" th:if="${review.goodsOptionList != null and !review.goodsOptionList.empty}">
-												<dl>
-													<div th:each="reviewGoods, goodsStatus : ${review.goodsOptionList}" >
-														<dt>구매옵션</dt>
-														<dd th:text="${reviewGoods.optCd1 +' / '+ reviewGoods.optCd2}">베이지 / 100</dd>
-													</div>
-												</dl>
-											</div>
-											<div class="full">
-												<dl>
-													<div>
-														<dt>키/몸무게</dt>
-														<dd><th:block th:if="${not #strings.isEmpty(review.height)}" th:text="|${review.height}cm / |"></th:block> 
-															<th:block th:if="${not #strings.isEmpty(review.weight)}" th:text="|${review.weight}kg|"></th:block>
-														</dd>
-													</div>
-												</dl>
-											</div>
-											<div th:if="${not #strings.isEmpty(review.sizeGb)}">  <!-- 사이즈구분(T:상의, B:하의, S:신발) -->
-												<dl > 
-													<div>
-														<dt>사이즈</dt>
-														<dd th:text="${review.scoreSizeNm}">작음</dd>
-													</div>
-													<div>
-														<dt>컬러</dt>
-														<dd th:text="${review.scoreColorNm}">밝음</dd>
-													</div>
-													<th:block th:if="${review.sizeGb == 'T' or review.sizeGb == 'B'}">
-													<div>
-														<dt>핏</dt>
-														<dd th:text="${review.scoreFitNm}">레귤러</dd>
-													</div>
-													<div>
-														<dt>두께감</dt>
-														<dd th:text="${review.scoreThickNm}">적당함</dd>
-													</div>
-													</th:block>
-													<th:block th:unless="${review.sizeGb == 'T' or review.sizeGb == 'B'}">
-													<div>
-														<dt>무게감</dt>
-														<dd th:text="${review.scoreWeightNm}">레귤러</dd>
-													</div>
-													<div>
-														<dt>볼너비</dt>
-														<dd th:text="${review.scoreBallNm}">적당함</dd>
-													</div>
-													</th:block>
-												</dl>
-											</div>
-										</div>
-										<div class="txt_review_box">
-											<p th:utext="${#strings.unescapeJava(#strings.escapeJava(review.reviewContent))}">슬림</p>
-										</div>
-										<div class="writer_box">
-											<div class="writer">
-												<span class="wr_id" th:text="${review.maskingCustId}">ab2****</span>
-												<span class="wr_date" th:text="${review.regDt}">2020.07.15</span>
-											</div>
-										</div>
-										<div class="reply_box" th:if="${not #strings.isEmpty(review.admRpl)}">
-											<div class="reply">
-												<div class="reply_writer">
-													<span class="wr_name">관리자</span>
-													<span class="wr_date" th:text="${review.admRplDt}" >2020.07.15</span>
-												</div>
-												<div class="reply_txt">
-													<p th:utext="${#strings.unescapeJava(#strings.escapeJava(review.admRpl))}">
-														안녕하세요, 스타일24 관리자입니다.
-													</p>
-												</div>
-											</div>
-										</div>
-									</div>
-								</div>
-								<!-- 첨부이미지 썸네일 리스트 -->
-								<div class="thumblist" th:if="${review.reviewAttachList != null and !review.reviewAttachList.empty and #lists.size(review.reviewAttachList) >= 2}">
-									<ul>
-										<li th:each="reviewAttach, attachStatus : ${review.reviewAttachList}">
-											<div class="pic" th:classAppend="${(attachStatus.first) ? 'active' :''}" ><!-- 활성화시 active 클래스 추가 -->
-												<span class="thumb" th:classAppend="${(reviewAttach.fileGb == 'M') ? 'mov' :''}"  th:style="${'background-image:url('+imgUrl+ reviewAttach.sysFileNm+');'}" ></span><!-- 동영상의 썸네일일 경우 mov 클래스 추가 -->
-											</div>
-										</li>
-									</ul>
-								</div>
-								<!-- //첨부이미지 썸네일 리스트 -->
-							</div>
-							<!-- //리뷰내용 -->
 						</div>
 					</div>
 				</div>
-				<div class="swiper-button-next"></div>
-				<div class="swiper-button-prev"></div>
+				<div class="swiper-button-next" id="reviewBodyNext"></div>
+				<div class="swiper-button-prev" id="reviewBodyPrev"></div>
 			</div>
 		</div>
 	</div>
 </div>
+<form name="reviewDetailForm" id="reviewDetailForm" method="post">
+<input type="hidden" name="goodsCd" th:value="${review.goodsCd}" />
+<input type="hidden" name="bestYn" th:value="${review.bestYn}" />
+<input type="hidden" name="photoYn" th:value="${review.photoYn}" />
+<input type="hidden" name="reviewSq" th:value="${review.reviewSq}" />
+</form>
 <a href="javascript:void(0);" rel="modal:close" onclick="cfCloseLayer('layer_review_best')" class="close-modal">Close</a> 
 <script th:inline="javascript">
 /*<![CDATA[*/
 	
-	 $(document).ready( function() {
-
-		//슬라이드 - 상품 베스트 리뷰 자세히보기 영역 
-		var bestReviewDetailSwiper = new Swiper('.pd_bestreviewdetail_pop .swiper-container.detail', {
-			observer: true,
-			observeParents: true,		
-			effect :'fade',
-			slidesPerView: 1,
-			spaceBetween: 0,
-			simulateTouch:false,
-			navigation: {
-				nextEl: '.pd_bestreviewdetail_pop .swiper-button-next',
-				prevEl: '.pd_bestreviewdetail_pop .swiper-button-prev',
-			}
-		});
-
-	   /* $('.pd_bestreviewdetail_pop .swiper-slide').each(function(index, element){
-		   var $this = $(this);
-		   
-		   var thumbCount = $this.find('.thumblist ul li').length;
-		   var thumbUlWidth = $this.find('.thumblist ul li').width() * thumbCount;
-		   var thumbMargin = 8 * thumbCount;
-		   var thumbListWidth = thumbUlWidth + thumbMargin;
-
-		   $this.find('.thumblist ul').attr('style', 'width:' + thumbListWidth + 'px;');
-		   
-	   }); */
-
-		$(document).on('click','.pd_bestreviewdetail_pop .thumblist ul li',function(e){
-
-			$(this).parents(".swiper-slide").find(".review > .pic > .thumb").empty();
-			$(this).parents(".swiper-slide").find(".thumblist ul li .pic").removeClass('active');
-			$(this).find(".pic").addClass('active');
-
-			var thumbIndex = $(this).index();
-			var thumbImg = $(this).find('.pic .thumb').attr('style');
-			var thumbImgSrc = thumbImg.split("background-image:url(")[1];
-			thumbImgHtml = "<img src="+ thumbImgSrc +" alt=''>";
-			$(this).parents(".swiper-slide").find(".review > .pic > .thumb").append(thumbImgHtml);
-			
-			return false;
-		});
+	var fnReviewDetail = function() {
+		
+		var params = new Object();
+		params.goodsCd = $('#reviewDetailForm input[name=goodsCd]').val();
+		params.reviewSq = $('#reviewDetailForm input[name=reviewSq]').val();
+		params.bestYn =$('#reviewDetailForm input[name=bestYn]').val();
+		params.photoYn = $('#reviewDetailForm input[name=photoYn]').val();
+		
+		gagajf.ajaxSubmit("/goods/review/detail/list", "json", fnReviewDetailCallback, params);
+	}
+	
+	var fnReviewDetailCallback = function(result) {
+		$('#reviewBody').html('');
+		// 목록
+		if (result.reviewList != null && result.reviewList.length > 0) {
+			let fileGbClass = '';
+			$.each(result.reviewList, function(idx, review) {
+				let tag = '';
+				let reviewClass = 'empty_photo';
+				if (review.reviewAttachList != null && review.reviewAttachList.length > 0){
+					reviewClass = '';
+				}
+				tag +='<div class="review" class="'+reviewClass+'" >\n';  <!-- 첨부이미지 없을 시 empty_photo 클래스 추가 --> 
+				tag +='	<div class="pic">\n';
+				if (review.reviewAttachList != null && review.reviewAttachList.length > 0){
+					$.each(review.reviewAttachList, function(aIdx, reviewAttach){
+						fileGbClass = '';
+						if (reviewAttach.fileGb == "M") fileGbClass = "mov";
+				tag +='		<span class="thumb" class="'+fileGbClass+'"}" >\n';<!-- 동영상의 썸네일일 경우 mov 클래스 추가-->
+						if (reviewAttach.fileGb == "M") {
+				tag +='			<video poster="http://cdn.011st.com/11dims/resize/1999x1999/quality/75/11src/review/10201202/3121412332/2e66698576d64c5c9977a6fe6606008d.jpg" muted="muted" preload="metadata" controls="controls">\n';
+				tag +='				<source src="http://snsvideo.11st.co.kr/movie/item/www/675/67518524_06_1_C1.mp4" type="video/mp4">\n';
+				tag +='			</video>\n';
+						}else{
+				tag +='			<img th:src="'+ _imgUrl + reviewAttach.sysFileNm +'" alt="">\n';	
+						}
+				tag +='		</span>\n';
+						return false;
+					});	
+				}else{
+				tag +='		<span class="thumb">\n';
+				tag +='			<img src="'+_uploadGoodsUrl +'/'+review.sysImgNm+'?RS=365" alt="" onerror="' + _uximgUrl + '/images/pc/thumb/bg_item_none.png" />\n';
+				tag +='		</span>\n';	
+				}
+				tag +='	</div>\n';
+				tag +='	<div class="review_cont">\n';
+				tag +='		<div class="box_wrap">\n';
+				tag +='			<div class="star_box">\n';
+				tag +='				<div class="star_score">\n';
+				tag +='					<span class="star">\n';
+				tag +='						<em class="progbar" style="width:'+(review.iscore*20)+'%;' }"></em>\n'; <!-- 평점 style로 표기 -->
+				tag +='					</span>\n';
+				tag +='				</div>\n';
+				tag +='			</div>\n';
+				tag +='			<div class="response_box">\n';
+				tag +='				<div class="full">\n';
+				tag +='					<dl>\n';
+				if (review.goodsOptionList != null && review.goodsOptionList.length > 0){
+					$.each(review.goodsOptionList, function(aIdx, reviewGoods){
+				tag +='						<div>\n';
+				tag +='							<dt>구매옵션</dt>\n';
+				tag +='							<dd>'+ reviewGoods.optCd1Nm +' / '+ reviewGoods.optCd2+'</dd>\n';
+				tag +='						</div>\n';
+					});		
+				}
+				tag +='					</dl>\n';
+				tag +='				</div>\n';
+				tag +='				<div class="full">\n';
+				tag +='					<dl>\n';
+				tag +='						<div>\n';
+				tag +='							<dt>키/몸무게</dt>\n';
+				tag +='							<dd>'+review.height+' / '+review.weight +' \n';
+				tag +='							</dd>\n';
+				tag +='						</div>\n';
+				tag +='					</dl>\n';
+				tag +='				</div>\n';
+				if (!gagajf.isNill(review.sizeGb)){  <!-- 사이즈구분(T:상의, B:하의, S:신발) -->
+				tag +='				<div>\n'; 
+				tag +='					<dl > \n';
+				tag +='						<div>\n';
+				tag +='							<dt>사이즈</dt>\n';
+				tag +='							<dd>'+review.scoreSizeNm+'</dd>\n';
+				tag +='						</div>\n';
+				tag +='						<div>\n';
+				tag +='							<dt>컬러</dt>\n';
+				tag +='							<dd>'+review.scoreColorNm+'</dd>\n';
+				tag +='						</div>\n';
+					if (review.sizeGb == 'T' || review.sizeGb == 'B'){
+				tag +='						<div>\n';
+				tag +='							<dt>핏</dt>\n';
+				tag +='							<dd>'+review.scoreFitNm+'</dd>\n';
+				tag +='						</div>\n';
+				tag +='						<div>\n';
+				tag +='							<dt>두께감</dt>\n';
+				tag +='							<dd>'+ review.scoreThickNm+'</dd>\n';
+				tag +='						</div>\n';
+					}
+					if (review.sizeGb == 'S'){
+				tag +='						<div>\n';
+				tag +='							<dt>무게감</dt>\n';
+				tag +='							<dd>'+review.scoreWeightNm+'</dd>\n';
+				tag +='						</div>\n';
+				tag +='						<div>\n';
+				tag +='							<dt>볼너비</dt>\n';
+				tag +='							<dd>'+review.scoreBallNm+'</dd>\n';
+				tag +='						</div>\n';
+					}
+				tag +='					</dl>\n';
+				tag +='				</div>\n';
+				}
+				tag +='			</div>\n';
+				tag +='			<div class="txt_review_box">\n';
+				tag +='				<p>' + review.reviewContent +'</p>\n';
+				tag +='			</div>\n';
+				tag +='			<div class="writer_box">\n';
+				tag += '			<div class="writer">\n';
+				tag += '				<span class="wr_id">'+ item.maskingCustId +'</span>\n';
+				tag += '				<span class="wr_date">' + item.regDt + '</span>\n';
+				tag += '			</div>\n'
+				tag +='			</div>\n';
+				if (!gagajf.isNull(item.admRpl)){
+				tag += '		<div class="reply_box">\n';
+				tag += '			<div class="reply">\n';
+				tag += '				<div class="reply_writer">\n';
+				tag += '					<span class="wr_name">관리자</span>\n';
+				tag += '					<span class="wr_date">'+item.admRplDt+'</span>\n';
+				tag += '				</div>\n';
+				tag += '				<div class="reply_txt">\n';
+				tag += '					<p>' + item.admRpl+'</p>\n';
+				tag += '				</div>\n';
+				tag += '			</div>\n';
+				tag += '		</div>\n';	
+				}
+				tag +='		</div>\n';
+				tag +='	</div>\n';
+				if (review.reviewAttachList != null && review.reviewAttachList.length >= 2){
+				tag +='	<div class="thumblist">\n';
+				tag +='		<ul>\n';
+					let activeClass = '';
+					$.each(review.reviewAttachList, function(aIdx, reviewAttach){
+						activeClass = '';
+						if (aIdx == 0){
+							activeClass = 'active';
+						}
+						fileGbClass = '';
+						if (reviewAttach.fileGb == "M") fileGbClass = "mov";
+				tag +='			<li>\n';
+				tag +='				<div class="pic" class="'+activeClass+'"> \n'; <!-- 활성화시 active 클래스 추가 -->
+				tag +='					<span class="thumb" class="'+fileGbClass+'" style="background-image:url('+_uploadGoodsUrl +'/'+review.sysImgNm+');\'" ></span>\n';<!-- 동영상의 썸네일일 경우 mov 클래스 추가 -->
+				tag +='				</div>\n';
+				tag +='			</li>\n';
+					}
+				tag +='		</ul>\n';
+				tag +='	</div>\n';
+				}
+				tag +='</div>\n';
+				$('#reviewBody').append(tag);
+			});
+		}
+		
+	}
+	
+	$(document).ready( function() {
+		
+		fnReviewDetail();
 
 	});