상품평상세 화면 수정 및 상품평 동영상 및 이미지에 대한 레이어 화면 추가

src/main/java/com/style24/admin/biz/dao/TsaReviewDao.java

@@ -48,15 +48,15 @@ public interface TsaReviewDao {
 	 * @author gagamel
 	 * @since 2021. 4. 22
 	 */
-	void saveReviewUserReply(Review review);
+	void updateReviewUserReply(Review review);
 
 	/**
-	 * 상품평 첨부파일 삭제(=미노출) 처리
-	 * @param reviewAttach - 상품평첨부파일 정보
+	 * 상품평 동영상 노출 처리
+	 * @param review - 상품평 정보
 	 * @author gagamel
 	 * @since 2021. 4. 22
 	 */
-	void deleteReviewAttach(ReviewAttach reviewAttach);
+	void updateVideoReviewDisplay(Review review);
 
 	/**
 	 * 베스트상품평포인트 생성

src/main/java/com/style24/admin/biz/service/TsaReviewService.java

@@ -11,7 +11,6 @@ import com.style24.admin.support.security.session.TsaSession;
 import com.style24.core.biz.service.TscEnvsetService;
 import com.style24.core.support.env.TscConstants;
 import com.style24.persistence.domain.Review;
-import com.style24.persistence.domain.ReviewAttach;
 
 import lombok.extern.slf4j.Slf4j;
 
@@ -66,19 +65,19 @@ public class TsaReviewService {
 	 * @since 2021. 4. 22
 	 */
 	@Transactional("shopTxnManager")
-	public void saveReviewUserReply(Review review) {
-		reviewDao.saveReviewUserReply(review);
+	public void updateReviewUserReply(Review review) {
+		reviewDao.updateReviewUserReply(review);
 	}
 
 	/**
-	 * 상품평 첨부파일 삭제(=미노출) 처리
-	 * @param rvAtcSq - 상품평첨부파일일련번호
+	 * 상품평 동영상 노출 처리
+	 * @param review - 상품평 정보
 	 * @author gagamel
 	 * @since 2021. 4. 22
 	 */
 	@Transactional("shopTxnManager")
-	public void deleteReviewAttach(ReviewAttach reviewAttach) {
-		reviewDao.deleteReviewAttach(reviewAttach);
+	public void updateVideoReviewDisplay(Review review) {
+		reviewDao.updateVideoReviewDisplay(review);
 	}
 
 	/**

src/main/java/com/style24/admin/biz/web/TsaMarketingController.java

@@ -61,7 +61,6 @@ import com.style24.persistence.domain.Plan;
 import com.style24.persistence.domain.Point;
 import com.style24.persistence.domain.Poll;
 import com.style24.persistence.domain.Review;
-import com.style24.persistence.domain.ReviewAttach;
 import com.style24.persistence.domain.Social;
 import com.style24.persistence.domain.User;
 
@@ -238,27 +237,29 @@ public class TsaMarketingController extends TsaBaseController {
 	 */
 	@PostMapping("/review/user/reply/save")
 	@ResponseBody
-	public GagaResponse saveReviewUserReply(@RequestBody Review review) {
+	public GagaResponse updateReviewUserReply(@RequestBody Review review) {
 		review.setAdmRplRegNo(TsaSession.getInfo().getUserNo());
 		review.setUpdNo(TsaSession.getInfo().getUserNo());
 
-		reviewService.saveReviewUserReply(review);
+		reviewService.updateReviewUserReply(review);
 
 		return super.ok(message.getMessage("SUCC_0001"));
 	}
 
 	/**
-	 * 상품평 첨부파일 미노출 처리
-	 * @param rvAtcSq - 상품평첨부파일일련번호
+	 * 상품평 동영상 노출 처리
+	 * @param reviewSq - 상품평일련번호
 	 * @return
 	 * @author gagamel
 	 * @since 2021. 4. 22
 	 */
-	@PostMapping("/review/attach/delete")
+	@PostMapping("/review/video/display/update/{reviewSq}")
 	@ResponseBody
-	public GagaResponse deleteReviewAttach(@RequestBody ReviewAttach reviewAttach) {
-		reviewAttach.setUpdNo(TsaSession.getInfo().getUserNo());
-		reviewService.deleteReviewAttach(reviewAttach);
+	public GagaResponse updateVideoReviewDisplay(@PathVariable("reviewSq") Integer reviewSq) {
+		Review review = new Review();
+		review.setReviewSq(reviewSq);
+		review.setUpdNo(TsaSession.getInfo().getUserNo());
+		reviewService.updateVideoReviewDisplay(review);
 		return super.ok(message.getMessage("SUCC_0004"));
 	}
 

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

@@ -148,9 +148,9 @@
 		ORDER  BY FILE_GB DESC, RV_ATC_SQ
 	</select>
 	
-	<!-- 상품평 미노출 처리 -->
-	<update id="saveReviewUserReply" parameterType="Review">
-		/* TsaReview.saveReviewUserReply */
+	<!-- 상품평 관리자댓글 저장 -->
+	<update id="updateReviewUserReply" parameterType="Review">
+		/* TsaReview.updateReviewUserReply */
 		UPDATE TB_REVIEW
 		SET    ADM_RPL = #{admRpl}
 		     , ADM_RPL_REG_NO = #{admRplRegNo}
@@ -161,15 +161,14 @@
 		AND    RPL_CFM_YN = 'N' /*고객이 관리자댓글 확인을 안한넘*/
 	</update>
 	
-	<!-- 상품평 미노출 처리 -->
-	<update id="deleteReviewAttach" parameterType="ReviewAttach">
-		/* TsaReview.deleteReviewAttach */
-		UPDATE TB_REVIEW_ATTACH
-		SET    DEL_YN = 'Y'
+	<!-- 상품평 동영상 노출 처리 -->
+	<update id="updateVideoReviewDisplay" parameterType="Review">
+		/* TsaReview.updateVideoReviewDisplay */
+		UPDATE TB_REVIEW
+		SET    CONFIRM_YN = 'Y'
 		     , UPD_NO = #{updNo}
 		     , UPD_DT = NOW()
-		WHERE  RV_ATC_SQ = #{rvAtcSq}
-		AND    DEL_YN = 'N' /*삭제안된넘*/
+		WHERE  REVIEW_SQ = #{reviewSq}
 	</update>
 	
 	<!-- 베스트상품평포인트 생성-->

src/main/webapp/WEB-INF/views/marketing/ReviewDetailForm.html

@@ -30,7 +30,6 @@
 				
 				<div class="reviewWrap">
 					<div class="user_review">
-						<!-- 상품정보 -->
 						<div class="prodInfo">
 							<div class="prodImg">
 								<img th:src="${@environment.getProperty('upload.goods.view') + '/' + reviewInfo.goodsImg}" onerror="this.src=\'/image/no.gif\';"/>
@@ -67,35 +66,35 @@
 								<dt th:if="*{scoreBall != null}">볼넓이</dt><dd th:text="*{scoreBall}"></dd>
 							</dl>
 						</div>
-						<!-- //상품정보 -->
 						
-						<!-- 고객 등록 -->
-						<ul class="rvCont">
-							<!-- 동영상 및 썸네일 이미지 -->
-							<li class="rvPic">
-								<th:block th:if="*{attachList != null}" th:each="oneData, status : *{attachList}">
-									<a href="javascript:void(0);" onclick="vdoOpen()" th:if="${oneData.fileGb == 'M'}">
-										<span class="pic">
-											<iframe th:src="${kollusMediaUrl + '/' + oneData.kmcKey}" width="90px" height="90px"></iframe>
-<!-- 											<iframe th:src="${kollusMediaUrl + '/' + oneData.kmcKey + '?autoplay&mute'}" width="90px" height="90px"></iframe> -->
-<!-- 											<i th:style="${'background-image: url(' + kollusMediaUrl + '/' + oneData.kmcKey + ');'}"></i> -->
-										</span>
-									</a>
-									<a href="javascript:void(0);" th:if="${oneData.fileGb == 'I'}">
-										<span class="pic">
-											<i th:style="${'background-image: url(' + @environment.getProperty('upload.default.view') + oneData.sysFileNm + ');'}"></i>
-										</span>
-									</a>
-								</th:block>
-<!-- 								<a href="javascript:void(0);" onclick="vdoOpen()"><span class="pic mov"><i style="background-image:url(image/@item01.jpg);">업로드 파일</i></span></a> -->
-<!-- 								<a href="javascript:void(0);"><span class="pic mov"><i style="background-image:url(image/@item01.jpg);">업로드 파일</i></span></a> -->
-<!-- 								<a href="javascript:void(0);"><span class="pic"><i style="background-image:url(image/@item01.jpg);">업로드 파일</i></span></a> -->
-<!-- 								<a href="javascript:void(0);"><span class="pic"><i style="background-image:url(image/@item01.jpg);">업로드 파일</i></span></a> -->
-							</li>
-							<!-- //동영상 및 썸네일 -->
-							<li class="rvTxt" th:utext="*{reviewContent}"></li>
-						</ul>
-						<!-- //고객 등록 -->
+						<!-- 리뷰 파일 -->
+						<dl class="rvPic">
+							<dt>등록파일</dt>
+							<dd>
+								<div class="picList" id="divPicList">
+									<th:block th:if="*{attachList != null}" th:each="oneData, status : *{attachList}">
+										<a th:if="${oneData.fileGb == 'M'}" href="javascript:void(0);" class="mov" onclick="fnPopupOpen('layer_review_pic', this);">
+											<iframe class="player" th:src="${kollusMediaUrl + '/' + oneData.kmcKey + '?enable_initialize_focus=false&mute'}"></iframe>
+										</a>
+										<a th:if="${oneData.fileGb == 'I'}" href="javascript:void(0);" onclick="fnPopupOpen('layer_review_pic', this);">
+											<span th:style="${'background-image:url(' + @environment.getProperty('upload.default.view') + oneData.sysFileNm + ');'}">사진</span>
+										</a>
+									</th:block>
+								</div>
+								<div class="chk">
+									<i>동영상 노출 상태 설정</i>
+									<span class="switchBox switch-base">
+										<input type="checkbox" id="chkConfirmYn" value="Y" th:checked="*{confirmYn == 'Y' ? true : false}" th:disabled="*{confirmYn == 'Y' ? true : false}" onclick="fnUpdateVideoReviewDisplay(this);"><label for="chkConfirmYn"><span>Ball</span></label><!-- default: 영상 숨김 -->
+									</span>
+								</div>
+							</dd>
+						</dl>
+						
+						<dl class="rvTxt">
+							<dt>구매후기</dt>
+							<dd th:utext="*{reviewContent}"></dd>
+						</dl>
+						<!-- //리뷰 파일 -->
 						
 						<!-- 포인트 지급 정보 -->
 <!-- 						<dl class="orderInfo"> -->
@@ -107,11 +106,16 @@
 						<!-- //포인트 지급 정보 -->
 						
 						<!-- 관리자 답변 등록 -->
-						<div class="admArea">
-							<i class="fa fa-smile-o" aria-hidden="true"></i> 관리자
-							<strong th:if="*{admRplRegNm != null}" th:text="*{admRplRegNm}"></strong>
-							<span th:if="*{admRplDt != null}" class="date" th:text="*{admRplDt}"></span>
-						</div>
+						<ul class="panelBar">
+							<li>
+								<i class="fa fa-smile-o" aria-hidden="true"></i> 관리자
+								<strong th:if="*{admRplRegNm != null}" th:text="*{admRplRegNm}"></strong>
+								<span class="date" th:if="*{admRplDt != null}" th:text="*{admRplDt}"></span>
+							</li>
+							<li class="right">
+								<button type="button" class="btn btn-base btn-lg" id="btnSaveReply">저장</button>
+							</li>
+						</ul>
 						<table class="frmStyle">
 							<colgroup>
 								<col width="110px"/>
@@ -128,14 +132,6 @@
 							</tbody>
 						</table>
 						<!-- //관리자 답변 등록 -->
-						
-						<!-- 버튼 배치 영역 -->
-						<ul class="panelBar" th:if="${reviewInfo.rplCfmYn == 'N'}">
-							<li class="center">
-								<button type="button" class="btn btn-base btn-lg" id="btnSaveReply">저장</button>
-							</li>
-						</ul>
-						<!-- //버튼 배치 영역 -->
 					</div>
 				</div>
 			</form>
@@ -143,8 +139,108 @@
 	</div>
 </div>
 
+<!-- 사용자 레이어팝업 : 등록 파일 출력 -->
+<div class="uPopupWrap off" id="layer_review_pic">
+	<div class="area reviewPic" style="width:500px; height:500px;">
+		<ul class="picList" th:object="${reviewInfo}">
+			<th:block th:if="*{attachList != null}" th:each="oneData, status : *{attachList}">
+				<li th:if="${oneData.fileGb == 'M'}"><iframe class="player" th:src="${kollusMediaUrl + '/' + oneData.kmcKey + '?enable_initialize_focus=false&mute'}"></iframe></li>
+				<li th:if="${oneData.fileGb == 'I'}"><div class="img" th:style="${'background-image:url(' + @environment.getProperty('upload.default.view') + oneData.sysFileNm + ');'}"></div></li>
+			</th:block>
+		</ul>
+		<button type="button" class="btnArr prev" onclick="fnPicPrev('layer_review_pic');">이전</button>
+		<button type="button" class="btnArr next" onclick="fnPicNext('layer_review_pic');">다음</button>
+		<button type="button" class="btnClose">닫기</button>
+	</div>
+</div>
+<!-- //사용자 레이어팝업 : 등록 파일 출력 -->
+
 <script th:inline="javascript">
 /*<![CDATA[*/
+	//동영상 플레이어
+	var controller;
+	var player = document.getElementsByClassName("player");
+	player.onload = function() {
+		try {
+			var controller = new VgControllerClient({
+				target_window: document.getElementById('pdThumbVideo').contentWindow
+			});
+			controller.on('ready', function() { //플레이어 준비 완료
+				controller.set_ratio('fill');
+				//contain : 비율에 맞게 채웁니다.
+				//fill : 화면에 꽉 차게 채웁니다.
+				//enlargement : 세로 높이를 꽉 차게 맞춥니다. 좌우로 스크롤이 가능합니다
+				controller.play();
+			});
+			controller.on('done', function() { //플레이어 재생 완료
+				controller.play();
+			});
+		} catch (e) {
+			// Videogateweay Controller Library는 window.postMessage API를 이용하기 때문에
+			// 해당 기능을 지원하지 않는 웹브라우져에서는 동작하지 않습니다.
+			// 이 부분에 적절한 fail-over 코드를 추가하여 주십시요.
+			mcxDialog.alert("해당 기능을 지원하지 않는 웹브라우져에서는 동작하지 않습니다.");
+		}
+	}
+	
+	// 팝업 열기
+	function fnPopupOpen(id,el,kind) {
+		$("#"+id).removeClass("off");	//레이어 Open
+		$("#"+id).find(".picList li").removeClass("on");
+		let onIdx = $(el).index();
+		$("#"+id).find(".picList li").eq(onIdx).addClass("on");
+		let picTot = $("#"+id).find(".picList li").length - 1;
+		//console.log(onIdx +', '+ picTot);
+		if (onIdx == 0) {
+			$("#"+id).find("button.prev").addClass("off");
+		}
+		if (onIdx == picTot) {
+			$("#"+id).find("button.next").addClass("off");
+		}
+	}
+	
+	// 팝업 닫기 버튼 //uifnPopupClose 함수로 닫으면 remove 되어서 테스트 불가능하며 임시로 사용, 추후 바꾸세요
+	$("#layer_review_pic .btnClose").click(function() {
+		$("#layer_review_pic").addClass("off"); //레이어 닫기
+		$("#layer_review_pic").find("button.btnArr").removeClass("off"); //버튼 초기화
+	});
+	
+	// 팝업 레이어 : 이전 버튼
+	function fnPicPrev(id){
+		let onIdx = $("#"+id).find(".picList li.on").index() - 1;
+		let picTot = $("#"+id).find(".picList li").length - 1;
+		//console.log(onIdx +', '+ picTot);
+		if (onIdx >= 0 ) {
+			$("#"+id).find(".picList li").removeClass("on");
+			$("#"+id).find(".picList li").eq(onIdx).addClass("on");
+		}
+		//화살표버튼
+		if (onIdx <= 0) {
+			$("#"+id).find("button.prev").addClass("off");
+		}
+		if (onIdx < picTot) {
+			$("#"+id).find("button.next").removeClass("off");
+		}
+	}
+
+	// 팝업 레이어 : 다음 버튼
+	function fnPicNext(id){
+		let onIdx = $("#"+id).find(".picList li.on").index() + 1;
+		let picTot = $("#"+id).find(".picList li").length - 1;
+		//console.log(onIdx +', '+ picTot);
+		if (onIdx <= picTot) {
+			$("#"+id).find(".picList li").removeClass("on");
+			$("#"+id).find(".picList li").eq(onIdx).addClass("on");
+		}
+		//화살표버튼
+		if (onIdx >= picTot) {
+			$("#"+id).find("button.next").addClass("off");
+		}
+		if (onIdx > 0 ) {
+			$("#"+id).find("button.prev").removeClass("off");
+		}
+	}
+	
 	// 관리자 댓글 저장
 	$('#btnSaveReply').on('click', function() {
 		if (gagajf.isNull($('textarea[name=admRpl]').val())) {
@@ -164,6 +260,19 @@
 		});
 	});
 	
+	// 상품 동영상 노출 처리
+	var fnUpdateVideoReviewDisplay = function(obj) {
+		if ($('#divPicList').find('iframe').length > 0 && $(obj).is(':checked')) {
+			var actionUrl = '/marketing/review/video/display/update/' + $('#reviewDetailForm input[name=reviewSq]').val();
+			$.post(actionUrl
+				, null
+				, function(result) {
+					$(obj).attr('disabled', true);
+				}
+				, 'json');
+		}
+	}
+	
 	$(document).ready(function() {
 		cfnGetTextLength($('textarea[name=admRpl]'), 4000, $('#dpLocAdmRpt'));
 	});

src/main/webapp/ux/css/admin.ui.css

@@ -1,5 +1,6 @@
 @charset "UTF-8";
 @import url("font.css");
+@import url("font-awesome.min.css");
 
 html,body {position:relative; height:100%;}
 html, body, header, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, label, a, p, form, input, textarea, table, hr, span, em {margin:0; padding:0; box-sizing:border-box;}
@@ -278,7 +279,7 @@ label.rdoBtn input[disabled='disabled']:checked::after, label.rdoBtn input[reado
 .switchBox{ display:inline-block;position:relative; width:60px; height:28px; vertical-align:middle;border-radius:25px;overflow:hidden;}
 .switchBox input[type="checkbox"]{position:absolute;visibility:hidden;}
 .switchBox label{display:block;position:absolute;top:0;width:60px;height:28px;background-color:#aaa;transition-duration:0.2s;}
-.switchBox label span{position:absolute;left:0;top:50%;z-index:1;width:26px;height:23px;border-radius:25px;transform:translate(3px, -50%);transition-duration:0.2s;background-color:#fff;text-indent:-9999px;}
+.switchBox label span{position:absolute;left:0;top:50%;z-index:1;width:26px;height:23px;border-radius:25px;transform:translate(3px, -50%);transition-duration:0.2s;background-color:#fff;text-indent:-9999px;font-size:0;color:#fff;}
 .switchBox label:before,label:after{position:absolute;top:0;width:52%;font-size:11px;line-height:27px;color:#fff;text-align:center;}
 .switchBox label:before{left:0;content:'ON';}
 .switchBox label:after{right:0;content:'OFF';}
@@ -693,13 +694,14 @@ table.mtz-monthpicker {border:1px solid #ddd; border-top:none;}
 
 /* Multi CheckBox */
 .multiCheckBox {position:relative; display:inline-block; width:auto; line-height:27px; margin:3px 3px 3px 0;}
+.multiCheckBox::after{content:'';display:block;height:auto;}
 .multiCheckBox .sltBtn {padding-left:5px; width:100%; height:27px; color:#555; text-align:left; border:1px solid #dbdbdb; box-sizing:border-box; -webkit-touch-callout:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;}
 .multiCheckBox .sltBtn::after {position:absolute; top:6px; right:10px; content:''; width:7px; height:7px; border-bottom:1px solid #555; border-left:1px solid #555; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
 .multiCheckBox .sltBtn.on::after {top:10px; -webkit-transform:rotate(135deg); transform:rotate(135deg);}
 .multiCheckBox ul {display:none; position:absolute; top:26px; left:0; z-index:1; width:100%; height:auto; border:1px solid #dbdbdb; background:#fff;}
-.multiCheckBox li {padding:3px 10px;}
-.multiCheckBox li:hover {background-color:Highlight; color:HighlightText;}
-.multiCheckBox label {display:flex;}
+.multiCheckBox li:hover {background-color:Highlight;color:HighlightText;}
+.multiCheckBox label {display:flex;padding-left:36px;border:3px solid transparent;height:28px;}
+.multiCheckBox label.chkBox::after, .multiCheckBox label.chkBox input::after{left:7px;}
 
 /* checkBox More */
 .checkBoxList {overflow:hidden; padding-right:36px; height:36px;}
@@ -881,13 +883,14 @@ table.mtz-monthpicker {border:1px solid #ddd; border-top:none;}
 
 /* 고객 리뷰 */ /* 210420 */
 .reviewWrap{padding:10px 10px;}
-.reviewWrap .prodInfo{margin-bottom:20px;min-height:80px; padding:13px;border:1px solid #aaa; }
+.reviewWrap .prodInfo{margin-bottom:20px;min-height:80px; padding:13px;border:2px solid #d3d3d3;}
 .reviewWrap .prodInfo::after{content:'';display:block;clear:both;}
 .reviewWrap .prodImg{float:left;width:80px;height:80px;}
 .reviewWrap .prodImg img{width:100%;height:100%;}
-.reviewWrap .prodInfo dl{margin-left:120px;margin-bottom:12px !important;display:block;}
+.reviewWrap .prodInfo dl{margin-left:100px;margin-bottom:12px !important;display:block;}
 .reviewWrap .prodInfo dl:last-child{margin-bottom:0 !important;}
 .reviewWrap .orderInfo{padding:10px 15px;background-color:#dae0ff;}
+.reviewWrap .user_review {margin-bottom:30px;}
 .reviewWrap .user_review .star_score {overflow: hidden;position:relative;width:95px;height:14px;}
 .reviewWrap .user_review .star_score .star {position:absolute; top:0; width:100%; height:100%;background:#ccc;}
 .reviewWrap .user_review .star_score .star::after{content:'';position:absolute;top:0;left:0;z-index:2;width:100%;height:100%; background:url('../../image/star_empty.png') no-repeat 0 0; background-size:100% 100%; image-rendering:pixelated;}
@@ -898,20 +901,42 @@ table.mtz-monthpicker {border:1px solid #ddd; border-top:none;}
 .reviewWrap .user_review dl{margin-bottom:15px;display:flex;width:auto}
 .reviewWrap .user_review dl::after{content:'';display:block;clear:both;}
 .reviewWrap .user_review dl dt{float:left;color:#888;display:table-cell;white-space: nowrap;}
+.reviewWrap .user_review dl dt:first-child{margin-left:10px;}
 .reviewWrap .user_review dl dd{float:left;margin:0 50px 0 15px; color: #fd4802;display:table-cell;}
 .reviewWrap .user_review dl dd:last-child{margin-right:0;}
-.reviewWrap .user_review dl dd.cBk{color:#000}
-.reviewWrap .user_review .rvCont{display:flex;margin:20px 0;}
-.reviewWrap .user_review .rvCont::after{content:'';display:block;clear:both;}
-.reviewWrap .user_review .rvPic{width:500px; background:url(../../image/bg_photo.png) repeat 0 0;}
-.reviewWrap .user_review .rvPic a{float:left;position:relative;width:90px;height:90px;margin-right:10px;margin-bottom:10px;}
-.reviewWrap .user_review .rvPic a:last-child{margin-right:0;}
-.reviewWrap .user_review .rvPic .pic{display:block}
-.reviewWrap .user_review .rvPic .pic i{display:block;position:relative;padding-top:100%;height:0;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;text-indent:-9999px;}
-.reviewWrap .user_review .rvPic .pic.mov::after {content:'';position:absolute;left:0;top:0;z-index:2;width:100%;height:100%;background: rgba(0,0,0,0.3) url('../../image/ico_play.png') no-repeat 50% 50%;}
-.reviewWrap .user_review .rvTxt {overflow-y:auto;margin-left:10px;width:calc(100% - 510px);height:190px;padding:15px 20px;line-height:2;word-break:keep-all;background-color:#f5f5f5;}
-.reviewWrap .admArea{margin-bottom:10px;}
-.reviewWrap .admArea .date{margin-left:10px;color:#666;}
+.reviewWrap .user_review dl dd.cBk{color:#000;}
+.reviewWrap .user_review .rvPic dd{display:table;overflow:hidden;width:100%;height:80px;}
+.reviewWrap .user_review .rvPic dd .picList{display:table-cell;width:890px;background:url(../../image/bg_photo.png) repeat 0 0;background-size:90px 90px;}
+.reviewWrap .user_review .rvPic dd .picList a{float:left;position:relative;width:80px;height:80px;margin-right:10px;overflow:hidden;}
+.reviewWrap .user_review .rvPic dd .picList a:last-child{margin-right:0;}
+.reviewWrap .user_review .rvPic dd .picList a iframe{width:100%;height:100%;border:0;}
+.reviewWrap .user_review .rvPic dd .picList a.mov::after{content:'';position:absolute;left:0;top:0;z-index:2;width:100%;height:100%;background: rgba(0,0,0,0.3) url('../../image/ico_play.png') no-repeat 50% 50%;}
+.reviewWrap .user_review .rvPic dd .picList a span{display:block;padding-top:100%;height:0;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:#ddd;}
+.reviewWrap .user_review .rvPic dd .chk{display:table-cell;position:relative;padding-left:20px;vertical-align:top;color:#000;text-align:center;}
+.reviewWrap .user_review .rvPic dd .chk::after{content:'';position:absolute;top:0;left:20px;width:1px;height:100%;border-left:1px dashed #cfcfcf;}
+.reviewWrap .user_review .rvPic dd .chk i{display:block;margin:3px 0 10px 0;color:#888;text-align:center;}
+.reviewWrap .user_review .rvPic dd .chk .switchBox label:before{content:'보임';left:2px;}
+.reviewWrap .user_review .rvPic dd .chk .switchBox label:after{content:'숨김';right:2px;}
+.reviewWrap .user_review .rvTxt dd{overflow-y:auto;height:160px;padding:10px 20px;line-height:2;word-break:keep-all;background-color:#f5f5f5;color:#666;}
+.reviewWrap .panelBar .date{margin-left:10px;color:#666;}
+/* 사용자 팝업 : 공통 */
+.uPopupWrap {position:fixed;top:0;left:0;z-index:12;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);}
+.uPopupWrap .area{position:relative;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#fff;}
+/* 사용자 팝업 : 리뷰 > 업로드파일 확대보기 */
+.uPopupWrap .reviewPic .picList{position:relative;width:100%;height:100%;}
+.uPopupWrap .reviewPic .picList li{display:none;position:absolute;top:0;left:0;width:100%;height:100%;}
+.uPopupWrap .reviewPic .picList li.on{display:block;}
+.uPopupWrap .reviewPic .picList li iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
+.uPopupWrap .reviewPic .picList li .img{position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:#ddd;}
+.uPopupWrap .reviewPic .btnArr{position:absolute;top:50%;transform:translateY(-50%);width:70px;height:70px;text-indent:-9999px;/*border-radius:100%; background-color:#fff;text-indent:-9999px; box-shadow:0 0 5px 5px rgba(0,0,0,0.1);*/}
+.uPopupWrap .reviewPic .btnArr:hover::after{border-color:#fd4802;}
+.uPopupWrap .reviewPic .btnArr::after{content:'';position:absolute;top:22px;width:20px;height:20px;border-left:2px solid #fff;border-bottom:2px solid #fff;}
+.uPopupWrap .reviewPic .btnArr.prev{left:-100px;}
+.uPopupWrap .reviewPic .btnArr.prev::after{left:26px;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);}
+.uPopupWrap .reviewPic .btnArr.next{right:-100px;}
+.uPopupWrap .reviewPic .btnArr.next::after{right:26px;-ms-transform:rotate(-135deg);-webkit-transform:rotate(-135deg);transform:rotate(-135deg);}
+.uPopupWrap .reviewPic .btnClose{position:absolute;top:-50px;right:0;width:50px;height:50px;background:url(../../image/btn_close_lg.png) no-repeat 50% 50%;text-indent:-9999px;}
+