style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GoodsDetailReviewFormMob.html
 * @desc	: 상품평 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE		 AUTHOR		 DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.07   eskim	   최초 작성
 *******************************************************************************
 -->
<div class="pd_review" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">
	<!-- 등록리뷰 없을 시 -->
	<div class="area_rv_empty" th:if="${reviewList == null or reviewList.empty}">
		<div class="txt_box">
			<p>
				지금 첫 리뷰를 작성하고<br>
				<span class="c_primary">스타일포인트 적립</span> 받으세요!
			</p>
			<div>
				<dl>
					<dt>일반 리뷰</dt>
					<dd th:text="|${#numbers.formatInteger(reviewPoint.textReviewPoint, 0,'COMMA')}P|">150P</dd>
				</dl>
				<dl>
					<dt>포토/영상 리뷰</dt>
					<dd th:text="|${#numbers.formatInteger(reviewPoint.photoReviewPoint, 0,'COMMA')}P|">350P</dd>
				</dl>
				<dl>
					<dt>베스트 리뷰</dt>
					<dd th:text="|${#numbers.formatInteger(reviewPoint.bestReviewPoint, 0,'COMMA')}P|">10,000P</dd>
				</dl>
			</div>
		</div>
		<div class="btn_group_flex">
			<div><button type="button" class="btn btn_dark" onclick="cfnGoToMypageReview();"><span>지금 리뷰 작성하기</span></button></div>
		</div>
	</div>
	<!-- //등록리뷰 없을 시 -->
	<!-- 등록리뷰 있을 시 -->
	<div class="area_rv_average" th:if="${reviewList != null and !reviewList.empty}">
		<th:block th:if="${goodsInfo.reviewRegCnt > 0}">
		<h6 class="sr-only">구매평점</h6>
		<div class="star_score">
			<span class="tit">구매평점</span>
			<span class="score" th:text="${goodsInfo.score}">4.3</span>
			<span class="star" th:with="starScore=${#numbers.formatDecimal((goodsInfo.score*100/5), 0,0)}">
				<em class="progbar" th:style="${'width:'+starScore+'%;' }"></em> <!-- 평점 style로 표기 -->
			</span>
		</div>
		</th:block>
		<!-- 착용정보 있을 시 노출 -->
		<th:block th:if="${not #strings.isEmpty(goodsInfo.sizeGb)}">
		<div class="average">
			<div class="part_average" th:with="scoreSize1=${#numbers.formatDecimal((goodsInfo.scoreSize1*100/goodsInfo.reviewRegCnt), 0,0)}
												, scoreSize2=${#numbers.formatDecimal((goodsInfo.scoreSize2*100/goodsInfo.reviewRegCnt), 0,0)}
												, scoreSize3=${#numbers.formatDecimal((goodsInfo.scoreSize3*100/goodsInfo.reviewRegCnt), 0,0)}">
				<div class="pa_head">
					<span class="tit">사이즈</span>
					<dl>
						<dt>
							<th:block th:if="${scoreSize1 >= scoreSize2 and scoreSize1 >= scoreSize3}">작음</th:block>
							<th:block th:if="${scoreSize2 > scoreSize1 and scoreSize2 >= scoreSize3}">딱맞음</th:block>
							<th:block th:if="${scoreSize3 > scoreSize1 and scoreSize3 > scoreSize2}">큼</th:block>
						</dt>
						<dd>
							<span class="line"></span>
							<span class="percent">
								<th:block th:if="${scoreSize1 >= scoreSize2 and scoreSize1 >= scoreSize3}" th:text="|${scoreSize1}%|">작음</th:block>
								<th:block th:if="${scoreSize2 > scoreSize1 and scoreSize2 >= scoreSize3}" th:text="|${scoreSize2}%|">딱맞음</th:block>
								<th:block th:if="${scoreSize3 > scoreSize1 and scoreSize3 > scoreSize2}" th:text="|${scoreSize3}%|">큼</th:block>
							</span>
						</dd>
					</dl> 
				</div>
				<div class="pa_body">
					<dl th:class="${(scoreSize1 >= scoreSize2 and scoreSize1 >= scoreSize3) ? 'on' : ''}">
						<dt>작음</dt>
						<dd>
							<span class="ratio">
								<em class="progbar" th:style="${'width:'+scoreSize1+'%;' }"></em>
							</span>
							<span class="percent"><th:block th:text="${scoreSize1}"></th:block>%</span>
						</dd>
					</dl> 
					<dl th:class="${(scoreSize2 >= scoreSize1 and scoreSize2 >= scoreSize3) ? 'on' : ''}">
						<dt>딱맞음</dt>
						<dd>
							<span class="ratio">
								<em class="progbar" th:style="${'width:'+scoreSize2+'%;' }"></em>
							</span>
							<span class="percent"><th:block th:text="${scoreSize2}"></th:block>%</span>
						</dd>
					</dl>
					<dl th:class="${(scoreSize3 >= scoreSize1 and scoreSize3 >= scoreSize2) ? 'on' : ''}">
						<dt>큼</dt>
						<dd>
							<span class="ratio">
								<em class="progbar" th:style="${'width:'+scoreSize3+'%;' }"></em>
							</span>
							<span class="percent"><th:block th:text="${scoreSize3}"></th:block>%</span>
						</dd>
					</dl>
				</div>
			</div>
			<div class="part_average" th:with="scoreColor1=${#numbers.formatDecimal((goodsInfo.scoreColor1*100/goodsInfo.reviewRegCnt), 0,0)}
												, scoreColor2=${#numbers.formatDecimal((goodsInfo.scoreColor2*100/goodsInfo.reviewRegCnt), 0,0)}
												, scoreColor3=${#numbers.formatDecimal((goodsInfo.scoreColor3*100/goodsInfo.reviewRegCnt), 0,0)}">
				<div class="pa_head">
					<span class="tit">컬러</span>
					<dl>
						<dt>
							<th:block th:if="${scoreColor1 >= scoreColor2 and scoreColor1 >= scoreColor3}">밝음</th:block>
							<th:block th:if="${scoreColor2 > scoreColor1 and scoreColor2 >= scoreColor3}">똑같음</th:block>
							<th:block th:if="${scoreColor3 > scoreColor1 and scoreColor3 > scoreColor2}">어두움</th:block>
						</dt>
						<dd>
							<span class="line"></span>
							<span class="percent">
								<th:block th:if="${scoreColor1 >= scoreColor2 and scoreColor1 >= scoreColor3}" th:text="|${scoreColor1}%|">밝음</th:block>
								<th:block th:if="${scoreColor2 > scoreColor1 and scoreColor2 >= scoreColor3}" th:text="|${scoreColor2}%|">똑같음</th:block>
								<th:block th:if="${scoreColor3 > scoreColor1 and scoreColor3 > scoreColor2}" th:text="|${scoreColor3}%|">어두움</th:block>
							</span>
						</dd>
					</dl> 
				</div>
				<div class="pa_body">
					<dl th:class="${(scoreColor1 >= scoreColor2 and scoreColor1 >= scoreColor3) ? 'on' : ''}">
						<dt>밝음</dt>
						<dd>
							<span class="ratio">
								<em class="progbar" th:style="${'width:'+scoreColor1+'%;' }"></em>
							</span>
							<span class="percent"><th:block th:text="${scoreColor1}"></th:block>%</span>
						</dd>
					</dl> 
					<dl  th:class="${(scoreColor2 >= scoreColor1 and scoreColor2 >= scoreColor3) ? 'on' : ''}">
						<dt>똑같음</dt>
						<dd>
							<span class="ratio">
								<em class="progbar" th:style="${'width:'+scoreColor2+'%;' }"></em>
							</span>
							<span class="percent"><th:block th:text="${scoreColor2}"></th:block>%</span>
						</dd>
					</dl>
					<dl th:class="${(scoreColor3 >= scoreColor1 and scoreColor3 >= scoreColor2) ? 'on' : ''}">
						<dt>어두움</dt>
						<dd>
							<span class="ratio">
								<em class="progbar" th:style="${'width:'+scoreColor3+'%;' }"></em>
							</span>
							<span class="percent"><th:block th:text="${scoreColor3}"></th:block>%</span>
						</dd>
					</dl>
				</div>
			</div>
			<th:block th:if="${goodsInfo.sizeGb == 'T' or goodsInfo.sizeGb == 'B'}">
			<div class="part_average" th:with="scoreFit1=${#numbers.formatDecimal((goodsInfo.scoreFit1*100/goodsInfo.reviewRegCnt), 0,0)}
												, scoreFit2=${#numbers.formatDecimal((goodsInfo.scoreFit2*100/goodsInfo.reviewRegCnt), 0,0)}
												, scoreFit3=${#numbers.formatDecimal((goodsInfo.scoreFit3*100/goodsInfo.reviewRegCnt), 0,0)}">
				<div class="pa_head">
					<span class="tit">핏</span>
					<dl>
						<dt>
							<th:block th:if="${scoreFit1 >= scoreFit2 and scoreFit1 >= scoreFit3}">슬림</th:block>
							<th:block th:if="${scoreFit2 > scoreFit1 and scoreFit2 >= scoreFit3}">레귤러</th:block>
							<th:block th:if="${scoreFit3 > scoreFit1 and scoreFit3 > scoreFit2}">오버</th:block>
						</dt>
						<dd>
							<span class="line"></span>
							<span class="percent">
								<th:block th:if="${scoreFit1 >= scoreFit2 and scoreFit1 >= scoreFit3}" th:text="|${scoreFit1}%|">슬림</th:block>
								<th:block th:if="${scoreFit2 > scoreFit1 and scoreFit2 >= scoreFit3}" th:text="|${scoreFit2}%|">레귤러</th:block>
								<th:block th:if="${scoreFit3 > scoreFit1 and scoreFit3 > scoreFit2}" th:text="|${scoreFit3}%|">오버</th:block>
							</span>
						</dd>
					</dl> 
				</div>
				<div class="pa_body">
					<dl th:class="${(scoreFit1 >= scoreFit2 and scoreFit1 >= scoreFit3) ? 'on' : ''}">
						<dt>슬림</dt>
						<dd>
							<span class="ratio">
								<em class="progbar" th:style="${'width:'+scoreFit1+'%;' }"></em>
							</span>
							<span class="percent"><th:block th:text="${scoreFit1}"></th:block>%</span>
						</dd>
					</dl> 
					<dl th:class="${(scoreFit2 >= scoreFit1 and scoreFit2 >= scoreFit3) ? 'on' : ''}">
						<dt>레귤러</dt>
						<dd>
							<span class="ratio">
								<em class="progbar" th:style="${'width:'+scoreFit2+'%;' }"></em>
							</span>
							<span class="percent"><th:block th:text="${scoreFit2}"></th:block>%</span>
						</dd>
					</dl>
					<dl th:class="${(scoreFit3 >= scoreFit1 and scoreFit3 >= scoreFit2) ? 'on' : ''}">
						<dt>오버</dt>
						<dd>
							<span class="ratio">
								<em class="progbar" th:style="${'width:'+scoreFit3+'%;' }"></em>
							</span>
							<span class="percent"><th:block th:text="${scoreFit3}"></th:block>%</span>
						</dd>
					</dl>
				</div>	
			</div>
			<div class="part_average" th:with="scoreThick1=${#numbers.formatDecimal((goodsInfo.scoreThick1*100/goodsInfo.reviewRegCnt), 0,0)}
												, scoreThick2=${#numbers.formatDecimal((goodsInfo.scoreThick2*100/goodsInfo.reviewRegCnt), 0,0)}
												, scoreThick3=${#numbers.formatDecimal((goodsInfo.scoreThick3*100/goodsInfo.reviewRegCnt), 0,0)}">
				<div class="pa_head">
					<span class="tit">두께감</span>
					<dl>
						<dt>
							<th:block th:if="${scoreThick1 >= scoreThick2 and scoreThick1 >= scoreThick3}">얇음</th:block>
							<th:block th:if="${scoreThick2 > scoreThick1 and scoreThick2 >= scoreThick3}">적당함</th:block>
							<th:block th:if="${scoreThick3 > scoreThick1 and scoreThick3 > scoreThick2}">도톰함</th:block>
						</dt>
						<dd>
							<span class="line"></span>
							<span class="percent">
								<th:block th:if="${scoreThick1 >= scoreThick2 and scoreThick1 >= scoreThick3}" th:text="|${scoreThick1}%|">얇음</th:block>
								<th:block th:if="${scoreThick2 > scoreThick1 and scoreThick2 >= scoreThick3}" th:text="|${scoreThick2}%|">적당함</th:block>
								<th:block th:if="${scoreThick3 > scoreThick1 and scoreThick3 > scoreThick2}" th:text="|${scoreThick3}%|">도톰함</th:block>
							</span>
						</dd>
					</dl> 
				</div>
				<div class="pa_body">
					<dl th:class="${(scoreThick1 >= scoreThick2 and scoreThick1 >= scoreThick3) ? 'on' : ''}">
						<dt>얇음</dt>
						<dd>
							<span class="ratio">
								<em class="progbar" th:style="${'width:'+scoreThick1+'%;' }"></em>
							</span>
							<span class="percent"><th:block th:text="${scoreThick1}"></th:block>%</span>
						</dd>
					</dl> 
					<dl th:class="${(scoreThick2 >= scoreThick1 and scoreThick2 >= scoreThick3) ? 'on' : ''}">
						<dt>적당함</dt>
						<dd>
							<span class="ratio">
								<em class="progbar" th:style="${'width:'+scoreThick2+'%;' }"></em>
							</span>
							<span class="percent"><th:block th:text="${scoreThick2}"></th:block>%</span>
						</dd>
					</dl>
					<dl th:class="${(scoreThick3 >= scoreThick1 and scoreThick3 >= scoreThick2) ? 'on' : ''}">
						<dt>도톰함</dt>
						<dd>
							<span class="ratio">
								<em class="progbar" th:style="${'width:'+scoreThick3+'%;' }"></em>
							</span>
							<span class="percent"><th:block th:text="${scoreThick3}"></th:block>%</span>
						</dd>
					</dl>
				</div>
			</div>
			</th:block>
			<th:block  th:if="${goodsInfo.sizeGb == 'S'}">
			<div class="part_average" th:with="scoreWeight1=${#numbers.formatDecimal((goodsInfo.scoreWeight1*100/goodsInfo.reviewRegCnt), 0,0)}
											, scoreWeight2=${#numbers.formatDecimal((goodsInfo.scoreWeight2*100/goodsInfo.reviewRegCnt), 0,0)}
											, scoreWeight3=${#numbers.formatDecimal((goodsInfo.scoreWeight3*100/goodsInfo.reviewRegCnt), 0,0)}">
				<div class="pa_head">
					<span class="tit">무게감</span>
					<dl>
						<dt>
							<th:block th:if="${scoreWeight1 >= scoreWeight2 and scoreWeight1 >= scoreWeight3}">가벼움</th:block>
							<th:block th:if="${scoreWeight2 > scoreWeight1 and scoreWeight2 >= scoreWeight3}">적당함</th:block>
							<th:block th:if="${scoreWeight3 > scoreWeight1 and scoreWeight3 > scoreWeight2}">무거움</th:block>
						</dt>
						<dd>
							<span class="line"></span>
							<span class="percent">
								<th:block th:if="${scoreWeight1 >= scoreWeight2 and scoreWeight1 >= scoreWeight3}" th:text="|${scoreWeight1}%|">가벼움</th:block>
								<th:block th:if="${scoreWeight2 > scoreWeight1 and scoreWeight2 >= scoreWeight3}" th:text="|${scoreWeight2}%|">적당함</th:block>
								<th:block th:if="${scoreWeight3 > scoreWeight1 and scoreWeight3 > scoreWeight2}" th:text="|${scoreWeight3}%|">무거움</th:block>
							</span>
						</dd>
					</dl> 
				</div>
				<div class="pa_body">
					<dl th:class="${(scoreWeight1 >= scoreWeight2 and scoreWeight1 >= scoreWeight3) ? 'on' : ''}">
						<dt>가벼움</dt>
						<dd>
							<span class="ratio">
								<em class="progbar" th:style="${'width:'+scoreWeight1+'%;' }"></em>
							</span>
							<span class="percent"><th:block th:text="${scoreWeight1}"></th:block>%</span>
						</dd>
					</dl> 
					<dl th:class="${(scoreWeight2 >= scoreWeight1 and scoreWeight2 >= scoreWeight3) ? 'on' : ''}">
						<dt>적당함</dt>
						<dd>
							<span class="ratio">
								<em class="progbar" th:style="${'width:'+scoreWeight2+'%;' }"></em>
							</span>
							<span class="percent"><th:block th:text="${scoreWeight2"></th:block>%</span>
						</dd>
					</dl>
					<dl th:class="${(scoreWeight3 >= scoreWeight1 and scoreWeight3 >= scoreWeight2) ? 'on' : ''}">
						<dt>무거움</dt>
						<dd>
							<span class="ratio">
								<em class="progbar" th:style="${'width:'+scoreWeight3+'%;' }"></em>
							</span>
							<span class="percent"><th:block th:text="${scoreWeight3}"></th:block>%</span>
						</dd>
					</dl>
				</div>
			</div>
			<div class="part_average" th:with="scoreBall1=${#numbers.formatDecimal((goodsInfo.scoreBall1*100/goodsInfo.reviewRegCnt), 0,0)}
											, scoreBall2=${#numbers.formatDecimal((goodsInfo.scoreBall2*100/goodsInfo.reviewRegCnt), 0,0)}
											, scoreBall3=${#numbers.formatDecimal((goodsInfo.scoreBall3*100/goodsInfo.reviewRegCnt), 0,0)}">
				<div class="pa_head">
					<span class="tit">볼너비</span>
					<dl>
						<dt>
							<th:block th:if="${scoreBall1 >= scoreBall2 and scoreBall1 >= scoreBall3}">작음</th:block>
							<th:block th:if="${scoreBall2 > scoreBall1 and scoreBall2 >= scoreBall3}">딱맞음</th:block>
							<th:block th:if="${scoreBall3 > scoreBall1 and scoreBall3 > scoreBall2}">큼</th:block>
						</dt>
						<dd>
							<span class="line"></span>
							<span class="percent">
								<th:block th:if="${scoreBall1 >= scoreBall2 and scoreBall1 >= scoreBall3}" th:text="|${scoreBall1}%|">작음</th:block>
								<th:block th:if="${scoreBall2 > scoreBall1 and scoreBall2 >= scoreBall3}" th:text="|${scoreBall2}%|">딱맞음</th:block>
								<th:block th:if="${scoreBall3 > scoreBall1 and scoreBall3 > scoreBall2}" th:text="|${scoreBall3}%|">큼</th:block>
							</span>
						</dd>
					</dl> 
				</div>
				<div class="pa_body">
					<dl th:class="${(scoreBall1 >= scoreBall2 and scoreBall1 >= scoreBall3) ? 'on' : ''}">
						<dt>작음</dt>
						<dd>
							<span class="ratio">
								<em class="progbar" th:style="${'width:'+scoreBall1+'%;' }"></em>
							</span>
							<span class="percent"><th:block th:text="${scoreBall1}"></th:block>%</span>
						</dd>
					</dl> 
					<dl th:class="${(scoreBall2 >= scoreBall1 and scoreBall2 >= scoreBall3) ? 'on' : ''}">
						<dt>딱맞음</dt>
						<dd>
							<span class="ratio">
								<em class="progbar" th:style="${'width:'+scoreBall2+'%;' }"></em>
							</span>
							<span class="percent"><th:block th:text="${scoreBall2"></th:block>%</span>
						</dd>
					</dl>
					<dl th:class="${(scoreBall3 >= scoreBall1 and scoreBall3 >= scoreBall2) ? 'on' : ''}">
						<dt>큼</dt>
						<dd>
							<span class="ratio">
								<em class="progbar" th:style="${'width:'+scoreBall3+'%;' }"></em>
							</span>
							<span class="percent"><th:block th:text="${scoreBall3}"></th:block>%</span>
						</dd>
					</dl>
				</div>
			</div>
			</th:block>
			<div class="btn_group_flex">
				<div>
					<button type="button" class="btn btn_default">
						<span></span>
					</button>
				</div>
			</div>
			<script>
			 function averag(){
				 var averagBtn=$(".average .btn_group_flex button");
				 var averag=$(".average .pa_body");
				 averagBtn.on('click',function(e){
					 averag.slideToggle();
					 $(this).toggleClass("active")	
				 });  
			 }
			 averag();
			</script>
		</div>
		</th:block>
		<!-- //착용정보 있을 시 노출 -->
		<div class="info_review">
			<p>
				<i class="ico_point"></i>상품 리뷰 작성 시 <span>스타일포인트 추가 적립!</span>
			</p>
			<div>
				<dl>
					<dt>일반리뷰</dt>
					<dd th:text="|${#numbers.formatInteger(reviewPoint.textReviewPoint, 0,'COMMA')}P|">150P</dd>
				</dl>
				<dl>
					<dt>포토/영상 리뷰</dt>
					<dd th:text="|${#numbers.formatInteger(reviewPoint.photoReviewPoint, 0,'COMMA')}P|">350P</dd>
				</dl>
				<dl>
					<dt>베스트 리뷰</dt>
					<dd th:text="|${#numbers.formatInteger(reviewPoint.bestReviewPoint, 0,'COMMA')}P|">10,000P</dd>
				</dl>
			</div>
		</div>
	</div>
	<div class="area_rv_best" th:if="${bestReviewList != null and !bestReviewList.empty}">
		<div class="riview_box">
			<h6>베스트 리뷰</h6>
			<div class="area_slider" id="btn_pdBestReview_pop">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide" th:each="bestReview, status : ${bestReviewList}">
							<div class="best_review">
								<a href="javascript:void(0);">
									<div class="star_score" th:with="starScore=${#numbers.formatDecimal((bestReview.iscore*100/5), 0,0)}">
										<span class="star">
											<em class="progbar" th:style="${'width:'+starScore+'%;' }"></em> <!-- 평점 style로 표기 -->
										</span>
										<em class="ico ico_besttag"></em>
									</div>
									<div class="lap">
										<div class="pic" th:if="${bestReview.reviewAttachList != null and !bestReview.reviewAttachList.empty}">
											<th:block th:each="reviewAttach, attachStatus : ${bestReview.reviewAttachList}" th:if="${attachStatus.first}">
												<th:block th:if="${reviewAttach.fileGb == 'M'}">
											<span class="thumb mov" th:style="${'background-image:url('+kollusMediaUrl+'/poster/'+reviewAttach.kmcKey+');'}"></span><!-- 동영상의 썸네일일 경우 mov 클래스 추가 -->
												</th:block>
												<th:block th:unless="${reviewAttach.fileGb == 'M'}">
											<span class="thumb" th:style="${'background-image:url('+imgUrl+ reviewAttach.sysFileNm+');'}"></span>
												</th:block>
											</th:block>
										</div>
										<div class="txt_best_review">
											<p th:text="${bestReview.reviewContent}">옷</p>
										</div>
									</div>
								</a>
							</div>
						</div>
					</div>
					<!-- Add Pagination -->
					<div class="swiper-pagination"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="area_rv_photo" th:if="${photoReviewList != null and !photoReviewList.empty}">
		<h6>포토/영상 리뷰</h6>
		<div class="photo_list">
			<ul>
				<li  th:each="photoReview, status : ${photoReviewList}" th:if="${status.count<=7}">
					<th:block th:if="${photoReview.reviewAttachList != null and !photoReview.reviewAttachList.empty}">
					<th:block th:each="reviewAttach, attachStatus : ${photoReview.reviewAttachList}" th:if="${attachStatus.first}">
					<a href="javascript:void(0);" th:onclick="cfGoodsReviewDetail([[${goodsInfo.goodsCd}]], '', 'Y', [[${photoReview.reviewSq}]])">
						<div class="pic">
							<th:block th:if="${reviewAttach.fileGb == 'M'}">
							<span class="thumb mov" th:style="${'background-image:url('+kollusMediaUrl+'/poster/'+reviewAttach.kmcKey+');'}"></span><!-- 동영상의 썸네일일 경우 mov 클래스 추가 -->
							</th:block>
							<th:block th:unless="${reviewAttach.fileGb == 'M'}">
							<span class="thumb" th:style="${'background-image:url('+imgUrl+ reviewAttach.sysFileNm+');'}"></span>
							</th:block>
						</div>
					</a>
					</th:block>
					</th:block>
				</li>
			</ul>
			<!-- 포토영상 게시글 최대 7개 & 버튼노출 -->
			<div th:if="${#lists.size(photoReviewList) >= 8}">
				<div>
					<button type="button" id="btn_more_photoreview" th:onclick="cfGoodsReviewPhoto([[${goodsInfo.goodsCd}]])"><span>더 보기</span></button>
				</div>	
			</div>
			<!-- //포토영상 게시글 최대 7개 & 버튼노출 -->
		</div>
	</div>
	<div class="area_rv_all">
	<form id="goodsReviewForm" name="goodsReviewForm" action="#" th:action="@{'/goods/review/list'}">
	<input type="hidden" name="pageNo" value ="1"/>
	<input type="hidden" name="pageSize" value ="20"/>
	<input type="hidden" name="goodsCd" th:value ="${goodsInfo.goodsCd}"/>
	<input type="hidden" name="goodsType" th:value ="${goodsInfo.goodsType}"/>
	<input type="hidden" name="selfGoodsYn" th:value ="${goodsInfo.selfGoodsYn}"/>
	<input type="hidden" name="reviewScore" />
	<input type="hidden" name="reviewOption" />
	<input type="hidden" name="reviewHeight" />
	<input type="hidden" name="reviewWeight" />
	
		<h6>전체리뷰<span id="reviewCount" th:text="|(${(reviewCount <= 9999) ? #numbers.formatInteger(reviewCount, 0,'COMMA') : '9,999+'})|">9,999+</span></h6>
		<div class="selection">
			<ul class="category_open">
				<li data_name="grade"><span>평점 전체</span></li>
				<th:block th:if="${reviewOptionList != null and !reviewOptionList.empty}">
				<li data_name="size"><span th:text="${(goodsInfo.selfGoodsYn == 'Y')? '사이즈 전체':'옵션 전체'}">사이즈 전체</span></li>
				</th:block>
				<li data_name="height" th:if="${reviewHeightList != null and !reviewHeightList.empty}"><span>키 전체</span></li>
				<li data_name="weight"><span>몸무게 전체</span></li>
			</ul>
			<div class="category_box">
				<div class="lap">
					<div class="category_close" onclick="fnReviewCateClose();">카테고리닫기</div>
					<div class="category_list">
						<!-- 평점,사이즈,키,몸무게 카테고리 -->
						<div class="category" id="grade">
							<ul class="n1">
								<li><a href="javascript:void(0)" data="평점 전체" onclick="fnReviewSearch('A','');">전체</a></li>
								<li><a href="javascript:void(0)" data="5점" onclick="fnReviewSearch('A','5');">5점&nbsp;★★★★★</a></li>
								<li><a href="javascript:void(0)" data="4점" onclick="fnReviewSearch('A','4');">4점&nbsp;★★★★</a></li>
								<li><a href="javascript:void(0)" data="3점" onclick="fnReviewSearch('A','3');">3점&nbsp;★★★</a></li>
								<li><a href="javascript:void(0)" data="2점" onclick="fnReviewSearch('A','2');">2점&nbsp;★★</a></li>
								<li><a href="javascript:void(0)" data="1점" onclick="fnReviewSearch('A','1');">1점&nbsp;★</a></li>
							</ul>
						</div>
						<div class="category" id="size" th:if="${reviewOptionList != null and !reviewOptionList.empty}">
							<ul class="n2">
								<li class="active"><a href="javascript:void(0)" data="평점 전체" onclick="fnReviewSearch('O','');">전체</a></li>
								<li th:each="reviewOption, status : ${reviewOptionList}">
									<a href="javascript:void(0)" th:attr="data=${reviewOption.optCd}" th:onclick="fnReviewSearch('O',[[${reviewOption.optCd}]]);"><th:block th:text="${reviewOption.optCd}"></th:block></a>
									<input type="hidden" name="selOption" th:value="${reviewOption.optCd}"/>
								</li>
							</ul>
						</div>
						<div class="category" id="height" th:if="${reviewHeightList != null and !reviewHeightList.empty}">
							<ul class="n2">
								<li class="active"><a href="javascript:void(0)" data="평점 전체" onclick="fnReviewSearch('H','');">전체</a></li>
								<li th:each="reviewHeight, status : ${reviewHeightList}">
									<a href="javascript:void(0)" th:attr="data=${reviewHeight.cdNm}" th:onclick="fnReviewSearch('H',[[${reviewHeight.cd}]]);"><th:block th:text="${reviewHeight.cdNm}"></th:block></a>
									<input type="hidden" name="selHeight" th:value="${reviewHeight.cd}"/>
								</li>
							</ul>
						</div>
						<div class="category" id="weight" th:if="${reviewWeightList != null and !reviewWeightList.empty}">
							<ul class="n2">
								<li class="active"><a href="javascript:void(0)" data="평점 전체" onclick="fnReviewSearch('W','');">전체</a></li>
								<li th:each="reviewWeight, status : ${reviewWeightList}">
									<a href="javascript:void(0)" th:attr="data=${reviewWeight.cdNm}" th:onclick="fnReviewSearch('W',[[${reviewWeight.cd}]]);"><th:block th:text="${reviewWeight.cdNm}"></th:block></a>
									<input type="hidden" name="selWeight" th:value="${reviewWeight.cd}"/>
								</li>
							</ul>
						</div>
						<!-- //평점,사이즈,키,몸무게 카테고리 -->
					</div>
				</div>
			</div>
		</div>
		<!-- 나열조건결과 있을 때 노출 내용 -->
		<div class="review_list" id="listBoxOuter">
			<ul  id="listBox">
			</ul>
		</div>
		<div class="review_last"  style="display:none;">
			마지막 게시글입니다.
		</div>
		<!-- //나열조건결과 있을 때 노출 내용 -->
		<!-- 나열조건결과 없을 때 노출 내용 -->
		<div class="nodata"  style="display:none;">
			<div class="txt_box">
				<p>
					선택하신 조건에 맞는 리뷰가 없습니다.<br>
					조건을 변경해 보세요.
				</p>
			</div>
			<div class="btn_group_flex">
				<div><button type="button" class="btn btn_default"  onclick="fnReviewSearchInit();"><span>선택한 조건 초기화</span></button></div>
			</div>
		</div>
		<!-- //나열조건결과 없을 때 노출 내용 -->
	</form>	
	</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">
/*<![CDATA[*/
	
	$(function() { gagaInfiniteScroll.getHistory(); });
	
	// 상품펴 검색
	var fnGetInfiniteScrollDataList = function(pageNum) {
	
		$("#goodsReviewForm input[name=pageNo]").val(pageNum+1);
		// 콜백함수인 gagaInfiniteScroll.jsonToHtml 에서는 fnDrawInfiniteScrollData 함수를 호출한다.
		gagajf.ajaxFormSubmit("/goods/review/list", document.goodsReviewForm,  gagaInfiniteScroll.jsonToHtml);
	}
	
	var fnDrawInfiniteScrollData = function(result, pageNum){
		if (result.dataList != null && result.dataList.length > 0) {
			var htm = fnCreateGoodsReviewList(result);
			gagaInfiniteScroll.draw(htm);
		}else {
			if($("#goodsReviewForm input[name=pageNo]").val()==1){
				$('#goodsReviewForm').find('.nodata').show();
			}
			gagaInfiniteScroll.draw('not');
		}
	}

	var fnGoodsReviewListSearch = function() {
		fnGoodsReviewInfiniteScrollInit();
		gagaInfiniteScroll.getHistory();
	}
	
	// 상품평 검색조건 클릭시
	var fnReviewSearch = function(flag, val){
		
		let reviewScore = $('#goodsReviewForm input[name=reviewScore]').val();
		let reviewOption = $('#goodsReviewForm input[name=reviewOption]').val();
		let reviewHeight = $('#goodsReviewForm input[name=reviewHeight]').val();
		let reviewWeight = $('#goodsReviewForm input[name=reviewWeight]').val();
		
		if (flag == 'A'){ //평점
			reviewScore = val;
		}else if (flag == 'O'){ //옵션
			reviewOption = val;
		}else if (flag == 'H'){ //키
			reviewHeight = val;
		}else{ //무게
			reviewWeight = val;
		}
		
		let changFlag = false;
		if ($('#goodsReviewForm input[name=reviewScore]').val() != reviewScore){
			changFlag = true;
		}else if ($('#goodsReviewForm input[name=reviewOption]').val() != reviewOption){
			changFlag = true;
		}else if ($('#goodsReviewForm input[name=reviewHeight]').val() != reviewHeight){
			changFlag = true;
		}else if ($('#goodsReviewForm input[name=reviewWeight]').val() != reviewWeight){
			changFlag = true;
		}
		
		$('#goodsReviewForm input[name=reviewScore]').val(reviewScore);
		$('#goodsReviewForm input[name=reviewOption]').val(reviewOption);
		$('#goodsReviewForm input[name=reviewHeight]').val(reviewHeight);
		$('#goodsReviewForm input[name=reviewWeight]').val(reviewWeight);
		
		if (changFlag) {
			fnReviewCateClose();
			fnGoodsReviewInfiniteScrollInit();
			fnGoodsReviewListSearch();
		}
		
	}
	
	var fnCreateGoodsReviewList = function(result) {

		let tag = '';
		$.each(result.dataList, function(idx, item) {
			$('#goodsReviewForm').find('.nodata').hide();
			tag += '<li>\n';
			tag += '<div class="review">\n';
			tag += '	<div class="info_box">\n';
			tag += '		<div class="star_score">\n';
			tag += '			<span class="star">\n';
			tag += '				<em class="progbar" style="width:'+(item.score*20)+'%;"></em>\n'; //<!-- 평점 style로 표기 -->
			tag += '			</span>\n';
			tag += '		</div>\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';
			tag += '	<div class="response_box">\n';
			tag += '		<div>\n';
			tag += '			<dl>\n';
			tag += '				<div>\n';
			tag += '					<dt>구매옵션</dt>\n';
			if (item.goodsOptionList != null && item.goodsOptionList.length > 0){
				$.each(item.goodsOptionList, function(gIdx, goodsOption){
			tag += '					<dd>'+ goodsOption.optCd1 +' / '+ goodsOption.optCd2 +'</dd>\n';		
				});
			}
			tag += '				</div>\n';
			tag += '				<div>\n';
			tag += '					<dt>키/몸무게</dt>\n';
			tag += '					<dd>'+ item.height +'cm/'+ item.weight +'kg</dd>\n';
			tag += '				</div>\n';
			tag += '			</dl>\n';
			tag += '		</div>\n';
			tag += '	</div>\n';
			tag += '	<div class="photo_box">\n';
			tag += '		<div class="photo_list">\n';
			tag += '			<ul>\n';
			if (item.reviewAttachList != null && item.reviewAttachList.length > 0){
				var fileGbClass = '';
				$.each(item.reviewAttachList, function(aIdx, reviewAttach){
//					fileGbClass = '';
//					if (reviewAttach == "M") fileGbClass = "mov";
			tag += '				<li>\n';
			tag += '					<a href="javascript:void();" onclick="cfGoodsReviewDetail(\''+item.goodsCd+'\',\'\', \'Y\',\''+item.reviewSq+'\');">\n';
			tag += '						<div class="pic">\n';
			if (reviewAttach.fileGb == "M") {
			tag +='								<span class="thumb mov" style="background-image:url('+_kollusMediaUrl +'/poster/'+reviewAttach.kmcKey +');\" ></span>\n';
				}else{
			tag +='								<span class="thumb" style="background-image:url('+ _imgUrl + reviewAttach.sysFileNm +');\" ></span>\n';
				}
			tag += '						</div>\n';
			tag += '					</a>\n';
			tag += '				</li>\n';		
				});	
			}
			tag += '			</ul>\n';
			tag += '		</div>\n';
			tag += '	</div>\n';
			tag += '	<div class="txt_review_box">\n';
			tag += '		<p>' + item.reviewContent.replaceAll("\n", "</br>") +'</p>\n';
			tag += '	</div>\n';
			
			tag += '	<div class="response_box2">\n';
			tag += '		<div>\n';
			tag += '			<dl>\n';
			if (!gagajf.isNull(item.sizeGb) ){	// 사이즈구분값이 있을경우 노출
				tag += '				<div>\n';
				tag += '					<dt>사이즈</dt>\n';
				tag += '					<dd>'+ item.scoreSizeNm +'</dd>\n';
				tag += '				</div>\n';
				tag += '				<div>\n';
				tag += '					<dt>컬러</dt>\n';
				tag += '					<dd>'+ item.scoreColorNm +'</dd>\n';
				tag += '				</div>\n';
			if (item.sizeGb == 'T' || item.sizeGb == 'B'){
				tag += '				<div>\n';
				tag += '					<dt>핏</dt>\n';
				tag += '					<dd>'+ item.scoreFitNm +'</dd>\n';
				tag += '				</div>\n';
				tag += '				<div>\n';
				tag += '					<dt>두께감</dt>\n';
				tag += '					<dd>'+ item.scoreThickNm +'</dd>\n';
				tag += '				</div>\n';	
			}
			if (item.sizeGb == 'S' ){
				tag += '				<div>\n';
				tag += '					<dt>무게감</dt>\n';
				tag += '					<dd>'+ item.scoreWeightNm +'</dd>\n';
				tag += '				</div>\n';
				tag += '				<div>\n';
				tag += '					<dt>볼너비</dt>\n';
				tag += '					<dd>'+ item.scoreBallNm +'</dd>\n';
				tag += '				</div>\n';	
			}
			}
			tag += '			</dl>\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.replaceAll("\n", "</br>")+'</p>\n';
				tag += '			</div>\n';
				tag += '		</div>\n';
				tag += '	</div>\n';	
			}
			tag += '</div>\n';
			tag += '</li>\n';
			
		});
		return tag;
	}
	
	// 인피니트 스크롤 초기화
	var fnGoodsReviewInfiniteScrollInit = function(){
		// sessionStorage.removeItem(document.location.href);
		History.replaceState(null, null);
		gagaInfiniteScroll.pageStatus = {
				  pageNum : []      // [0,1,2...] 로드된 페이지 (Array)
				, loadPage : 0      // 로드할 페이지
				, loadAlign : 'not' // 로드 상태(prev, next, not)
				, historyScroll : 0 //
				, nowPage : null    // 현재 페이지
				, pageUrl : {       // page url
				}
		}
		//History 초기화
		$("#listBox").html("");;
	}
	
	// 상품평 초기화
	var fnReviewSearchInit = function(){
		
		$('#goodsReviewForm').find('.select_custom.sort_opt1').find('.list li').eq(0).trigger('click')
		$('#goodsReviewForm').find('.select_custom.sort_opt2').find('.list li').eq(0).trigger('click')
		$('#goodsReviewForm').find('.select_custom.sort_opt3').find('.list li').eq(0).trigger('click')
		$('#goodsReviewForm').find('.select_custom.sort_opt4').find('.list li').eq(0).trigger('click')
		
		$('#goodsReviewForm input[name=reviewScore]').val('');
		$('#goodsReviewForm input[name=reviewOption]').val('');
		$('#goodsReviewForm input[name=reviewHeight]').val('');
		$('#goodsReviewForm input[name=reviewWeight]').val('');
		
		fnGetList();
	}
	
	var fnReviewCateClose = function(){
		$(".pd_review .category_box").hide();
	}
	
	$(document).ready( function() {

		//슬라이드 - 베스트리뷰
		var riviewSwiper = new Swiper('.riview_box .area_slider .swiper-container', {
			observer: true,
			observeParents: true,
			slidesPerView: 1,
			spaceBetween: 8,
			loop: true,
			pagination: {
				el: '.swiper-pagination',
				type: 'fraction',
			},
		});	
		
		//팝업 - 제품리뷰 > 카테고리팝오픈
		// 오픈
		$(document).on('click','.pd_review .category_open > li',function(e){
			var dataName=$(this).attr("data_name");
			$(".pd_review .category_box").show();
			$(".pd_review .category_list").find(".category").hide();
			$(".pd_review .category_list").find("#"+dataName).show();
			return false;
		});
		
		// 변경
		$(document).on('click','.pd_review .category ul > li',function(e){
			var num=$(".pd_review .category_open > li").length;
			var value=$(this).find("a").attr("data");
			var name=$(this).parent().parent().attr("id");
			$(this).parent().find("li").removeClass("active");
			$(this).addClass("active");
			for(var i=0; i < num; i++){
				var dataname=$(".pd_review .category_open > li").eq(i).attr("data_name");
				if(name==dataname){
					$(".pd_review .category_open > li").eq(i).find("span").text(value);
				}
			}
			return false;
		});

		
	});
	
/*]]>*/
</script>
 </html>