상품리스트 필터

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

@@ -1,5 +1,6 @@
 package com.style24.persistence.domain;
 
+import com.fasterxml.jackson.annotation.JsonFormat;
 import com.style24.persistence.TscBaseDomain;
 import com.style24.persistence.TscPageRequest;
 import lombok.Data;
@@ -66,4 +67,25 @@ public class GoodsSearch extends TscBaseDomain {
 
     private String contentsLoc;
     private int maxRow;
+
+    @JsonFormat(with = JsonFormat.Feature.ACCEPT_SINGLE_VALUE_AS_ARRAY)
+    private String[] brandSearch;
+
+    @JsonFormat(with = JsonFormat.Feature.ACCEPT_SINGLE_VALUE_AS_ARRAY)
+    private String[] sizeSearch;
+
+    @JsonFormat(with = JsonFormat.Feature.ACCEPT_SINGLE_VALUE_AS_ARRAY)
+    private String[] priceSearch;
+
+    @JsonFormat(with = JsonFormat.Feature.ACCEPT_SINGLE_VALUE_AS_ARRAY)
+    private String[] dcrateSearch;
+
+    @JsonFormat(with = JsonFormat.Feature.ACCEPT_SINGLE_VALUE_AS_ARRAY)
+    private String[] seasonSearch;
+
+    @JsonFormat(with = JsonFormat.Feature.ACCEPT_SINGLE_VALUE_AS_ARRAY)
+    private String[] colorSearch;
+
+    @JsonFormat(with = JsonFormat.Feature.ACCEPT_SINGLE_VALUE_AS_ARRAY)
+    private String[] benefitSearch;
 }

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

@@ -698,8 +698,43 @@
 		  AND G.SELF_MALL_YN = 'Y' /*몰노출상품*/
 		  AND NOW() BETWEEN G.SELL_STDT AND G.SELL_EDDT /*판매기간*/
 		  AND S.STOCK_QTY > 0 /*재고있는상품*/
+		<include refid="getCategoryGoodsList_sql"/>
 	</select>
 
+	<!-- 카테고리 상품별  목록 필터 조건 -->
+	<sql id="getCategoryGoodsList_sql">
+		<if test='brandSearch != null and brandSearch.length > 0'>
+		     AND EXISTS ( SELECT 1 FROM TB_BRAND
+		     WHERE BRAND_CD = G.BRAND_CD
+		     AND BRAND_GROUP_NO IN
+		     <foreach collection="brandSearch" item="item" index="index" open="(" close=")" separator=",">
+		        #{item}
+		     </foreach>
+		     )
+		</if>
+		<if test='sizeSearch != null and sizeSearch.length > 0'>
+		     AND G.GOODS_CD IN (
+		          SELECT GOODS_CD
+		          FROM VW_STOCK
+		          WHERE OPT_CD2 IN
+		     <foreach collection="sizeSearch" item="item" index="index"  open="(" close=")" separator=",">
+		         #{item}
+		     </foreach>
+		     )
+		</if>
+		<if test='colorSearch != null and colorSearch.length > 0'>
+		     AND G.MAIN_COLOR_CD IN (
+		          SELECT OPT_CD1
+		          FROM TB_OPTION
+		          WHERE GOODS_CD = G.GOODS_CD
+		          AND  OPT_CD1 IN
+		     <foreach collection="colorSearch" item="item" index="index"  open="(" close=")" separator=",">
+		     	#{item}
+		     </foreach>
+		     )
+		</if>
+	</sql>
+
 	<!-- 카테고리별 상품 총 리스트 -->
 	<select id="getCategoryGoodsList" parameterType="GoodsSearch" resultType="Goods">
 		/* TsfDisplay.getCategoryGoodsList */
@@ -784,6 +819,7 @@
 		          AND G.SELF_MALL_YN = 'Y' /*몰노출상품*/
 		          AND NOW() BETWEEN G.SELL_STDT AND G.SELL_EDDT /*판매기간*/
 		          AND S.STOCK_QTY > 0 /*재고있는상품*/
+		          <include refid="getCategoryGoodsList_sql"/>
 		          <if test="contentsLoc == 'SBM013'">
 		          GROUP BY G.GOODS_CD
 		          </if>

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

@@ -44,235 +44,237 @@
 					</div>
 				</div>
 				<div class="cont">
-					<div class="cont_body">
-						<div class="filter_list">
-							<!-- 1depth -->
-							<ul>
-								<li data-id="tap02" th:if="${filterBrandList!=null and !filterBrandList.empty}">
-									<a href="javascript:void(0)">브랜드</a>
-								</li>
-								<li data-id="tap03" th:if="${filterSizeList!=null and !filterSizeList.empty}">
-									<a href="javascript:void(0)">사이즈</a>
-								</li>
-								<li data-id="tap04" th:if="${filterPriceList!=null and !filterPriceList.empty}">
-									<a href="javascript:void(0)">가격</a>
-								</li>
-								<li data-id="tap05">
-									<a href="javascript:void(0)">할인율</a>
-								</li>
-								<li data-id="tap06" th:if="${filterAgeList!=null and !filterAgeList.empty}">
-									<a href="javascript:void(0)">연령</a>
-								</li>
-								<li data-id="tap07" th:if="${filterSeasonList!=null and !filterSeasonList.empty}">
-									<a href="javascript:void(0)">시즌</a>
-								</li>
-								<li data-id="tap08" th:if="${filterColorList!=null and !filterColorList.empty}">
-									<a href="javascript:void(0)">컬러</a>
-								</li>
-								<li data-id="tap09" th:if="${filterBenefitList!=null and !filterBenefitList.empty}">
-									<a href="javascript:void(0)">혜택</a>
-								</li>
-							</ul>
-							<div class="form_field">
-								<div>
-									<input id="price" type="checkbox" ><label for="price"> <span>남여 공용만 보기</span> </label>
-								</div>
-								<div>
-									<input id="chk-2" type="checkbox" checked=""><label for="chk-2"> <span>신상품만 보기</span> </label>
-								</div>
-							</div>
-						</div>
-						<div class="filter_content">
-							<!-- 브랜드 -->
-							<div class="sort tap02" th:if="${filterBrandList!=null and !filterBrandList.empty}">
+					<form id="filterForm">
+						<div class="cont_body">
+							<div class="filter_list">
+								<!-- 1depth -->
 								<ul>
-									<th:block th:each="filterBrandData, filterBrandStat : ${filterBrandList}">
-									<li>
-										<label class="brand_btn" onclick="filterSel();">
-											<input type="checkbox" group="filterValue" th:id="${'chkFilterBrand'+filterBrandStat.count}" name="filterBrandCds" th:value="${filterBrandData.filterCd}"><span th:text="${filterBrandData.filterNm}"></span>
-										</label>
+									<li data-id="tap02" th:if="${filterBrandList!=null and !filterBrandList.empty}">
+										<a href="javascript:void(0)">브랜드</a>
 									</li>
-									</th:block>
-								</ul>
-								<a href="javascript:void(0)" class="tap_close">delete-btn</a>
-							</div>
-							<!-- //브랜드 -->
-							<!-- 사이즈 -->
-							<div class="sort tap03" th:if="${filterSizeList!=null and !filterSizeList.empty}">
-								<ul>
-									<li>
-										<strong>상의</strong>
-										<th:block th:each="filterSizeData, filterSizeStat : ${filterSizeList}" th:if="${filterSizeData.filterCd == 'T'}">
-											<label class="size_btn" onclick="filterSel();">
-												<input type="checkbox" group="filterValue" th:id="${'chkFilterTSize'+filterSizeStat.count}" name="filterSizeCds" th:vale="${filterSizeData.filterNm}"><span th:text="${filterSizeData.filterNm}">80</span>
-											</label>
-										</th:block>
+									<li data-id="tap03" th:if="${filterSizeList!=null and !filterSizeList.empty}">
+										<a href="javascript:void(0)">사이즈</a>
 									</li>
-									<li>
-										<strong>하의</strong>
-										<th:block th:each="filterSizeData, filterSizeStat : ${filterSizeList}" th:if="${filterSizeData.filterCd == 'B'}">
-											<label class="size_btn" onclick="filterSel();">
-												<input type="checkbox" group="filterValue" th:id="${'chkFilterBSize'+filterSizeStat.count}" name="filterSizeCds" th:vale="${filterSizeData.filterNm}"><span th:text="${filterSizeData.filterNm}">80</span>
-											</label>
-										</th:block>
+									<li data-id="tap04" th:if="${filterPriceList!=null and !filterPriceList.empty}">
+										<a href="javascript:void(0)">가격</a>
 									</li>
-									<li>
-										<strong>신발</strong>
-										<th:block th:each="filterSizeData, filterSizeStat : ${filterSizeList}" th:if="${filterSizeData.filterCd == 'S'}">
-											<label class="size_btn" onclick="filterSel();">
-												<input type="checkbox" group="filterValue" th:id="${'chkFilterSSize'+filterSizeStat.count}" name="filterSizeCds" th:vale="${filterSizeData.filterNm}"><span th:text="${filterSizeData.filterNm}">80</span>
-											</label>
-										</th:block>
+									<li data-id="tap05">
+										<a href="javascript:void(0)">할인율</a>
+									</li>
+									<li data-id="tap06" th:if="${filterAgeList!=null and !filterAgeList.empty}">
+										<a href="javascript:void(0)">연령</a>
+									</li>
+									<li data-id="tap07" th:if="${filterSeasonList!=null and !filterSeasonList.empty}">
+										<a href="javascript:void(0)">시즌</a>
+									</li>
+									<li data-id="tap08" th:if="${filterColorList!=null and !filterColorList.empty}">
+										<a href="javascript:void(0)">컬러</a>
+									</li>
+									<li data-id="tap09" th:if="${filterBenefitList!=null and !filterBenefitList.empty}">
+										<a href="javascript:void(0)">혜택</a>
 									</li>
 								</ul>
-								<a href="javascript:void(0)" class="tap_close">delete-btn</a>
-							</div>
-							<!-- //사이즈 -->
-							<!-- 가격 -->
-							<div class="sort tap04">
-								<div class="range">
-									<input type="text" class="js-range-slider01" name="my_range01" value="" />
-								</div>
-								<a href="javascript:void(0)" class="tap_close">delete-btn</a>
-							</div>
-							<!-- //가격 -->
-							<!-- 할인율 -->
-							<div class="sort tap05">
-								<ul style="display:none;">
-									<li><input type="checkbox" id="percent01" name="range" value="0"><label for="percent01"><span></span><span>0%</span></label></li>
-									<li><input type="checkbox" id="percent02" name="range" value="10"><label for="percent02"><span></span><span>10%</span></label></li>
-									<li><input type="checkbox" id="percent03" name="range" value="20"><label for="percent03"><span></span><span>20%</span></label></li>
-									<li><input type="checkbox" id="percent04" name="range" value="30"><label for="percent04"><span></span><span>30%</span></label></li>
-									<li><input type="checkbox" id="percent05" name="range" value="40"><label for="percent05"><span></span><span>40%</span></label></li>
-									<li><input type="checkbox" id="percent06" name="range" value="50"><label for="percent06"><span></span><span>50%</span></label></li>
-									<li><input type="checkbox" id="percent07" name="range" value="60"><label for="percent07"><span></span><span>60%</span></label></li>
-									<li><input type="checkbox" id="percent08" name="range" value="70"><label for="percent08"><span></span><span>70%</span></label></li>
-									<li><input type="checkbox" id="percent09" name="range" value="80"><label for="percent09"><span></span><span>80%</span></label></li>
-									<li><input type="checkbox" id="percent10" name="range" value="100"><label for="percent10"><span></span><span>100%</span></label></li>
-								</ul>
-								<div class="range">
-									<input type="text" class="js-range-slider02" name="my_range02" value="" />
+								<div class="form_field">
+									<div>
+										<input id="price" type="checkbox" ><label for="price"> <span>남여 공용만 보기</span> </label>
+									</div>
+									<div>
+										<input id="chk-2" type="checkbox" checked=""><label for="chk-2"> <span>신상품만 보기</span> </label>
+									</div>
 								</div>
-								<a href="javascript:void(0)" class="tap_close">delete-btn</a>
 							</div>
-							<!-- //할인율 -->
-							<!-- 연령 -->
-							<div class="sort tap06" th:if="${filterAgeList!=null and !filterAgeList.empty}">
-								<ul>
-									<th:block th:each="filterAgeData, filterAgeStat : ${filterAgeList}">
+							<div class="filter_content">
+								<!-- 브랜드 -->
+								<div class="sort tap02" th:if="${filterBrandList!=null and !filterBrandList.empty}" id="brandFilterDiv">
+									<ul>
+										<th:block th:each="filterBrandData, filterBrandStat : ${filterBrandList}">
 										<li>
-											<label class="Age_btn" onclick="filterSel();">
-												<input type="checkbox" group="filterValue" th:id="${'chkFilterAge'+filterAgeStat.count}" name="filterAgeCds" th:value="${filterAgeData.filterCd}"><span th:text="${filterAgeData.filterNm}">베이비(0~18개월)</span>
+											<label class="brand_btn">
+												<input type="checkbox" group="filterValue" th:id="${'chkFilterBrand'+filterBrandStat.count}" name="brand" th:value="${filterBrandData.filterCd}" th:data-id="${filterBrandData.filterNm}" onclick="filterSel(this,'brand','off');"><span th:text="${filterBrandData.filterNm}"></span>
 											</label>
 										</li>
-									</th:block>
-								</ul>
-								<a href="javascript:void(0)" class="tap_close">delete-btn</a>
-							</div>
-							<!-- //연령 -->
-							<!-- 시즌 -->
-							<div class="sort tap07" th:if="${filterSeasonList!=null and !filterSeasonList.empty}">
-								<ul>
-									<th:block th:each="filterSeasonData, filterSeasonStat : ${filterSeasonList}">
-										<li>
-											<label class="Season_btn" onclick="filterSel();">
-												<input type="checkbox" group="filterValue"  th:id="${'chkFilterSeason'+filterSeasonStat.count}" name="filterSeasonCds" th:value="${filterSeasonData.filterCd}"><span th:text="${filterSeasonData.filterNm}">봄</span>
-											</label>
+										</th:block>
+									</ul>
+									<a href="javascript:void(0)" class="tap_close">delete-btn</a>
+								</div>
+								<!-- //브랜드 -->
+								<!-- 사이즈 -->
+								<div class="sort tap03" th:if="${filterSizeList!=null and !filterSizeList.empty}" id="sizeFilterDiv">
+									<ul>
+										<li id="sizeLi1">
+											<strong>상의</strong>
+											<th:block th:each="filterSizeData, filterSizeStat : ${filterSizeList}" th:if="${filterSizeData.filterCd == 'T'}">
+												<label class="size_btn">
+													<input type="checkbox" group="filterValue" th:id="${'chkFilterTSize'+filterSizeStat.count}" name="size" th:vale="${filterSizeData.filterNm}" th:data-id="${filterSizeData.filterNm}" onclick="filterSel(this,'size','off','1');"><span th:text="${filterSizeData.filterNm}">80</span>
+												</label>
+											</th:block>
 										</li>
-									</th:block>
-								</ul>
-								<a href="javascript:void(0)" class="tap_close">delete-btn</a>
-							</div>
-							<!-- //시즌 -->
-							<!-- 컬러 -->
-							<div class="sort tap08" th:if="${filterColorList!=null and !filterColorList.empty}">
-								<ul>
-									<th:block th:each="filterColorData, filterColorStat : ${filterColorList}">
-										<li>
-											<label class="color-check" onclick="filterSel();">
-												<input type="checkbox" group="filterValue" th:id="${'chkFilterColor'+filterColorStat.count}" name="filterColorCds" th:value="${filterColorData.filterNm}" >
-												<span class="pdColor-color" th:if="${filterColorData.filterNm=='#FFFFFF'}" th:style="${'background-color:'+filterColorData.filterNm+';'+' border:1px solid #aaa;'}"></span>
-												<span class="pdColor-color" th:if="${filterColorData.filterNm!='#FFFFFF'}" th:style="${'background-color:'+filterColorData.filterNm}"></span>
-											</label>
+										<li id="sizeLi2">
+											<strong>하의</strong>
+											<th:block th:each="filterSizeData, filterSizeStat : ${filterSizeList}" th:if="${filterSizeData.filterCd == 'B'}">
+												<label class="size_btn">
+													<input type="checkbox" group="filterValue" th:id="${'chkFilterBSize'+filterSizeStat.count}" name="size2" th:vale="${filterSizeData.filterNm}" th:data-id="${filterSizeData.filterNm}" onclick="filterSel(this,'size','off','2');"><span th:text="${filterSizeData.filterNm}">80</span>
+												</label>
+											</th:block>
 										</li>
-									</th:block>
-								</ul>
-								<a href="javascript:void(0)" class="tap_close">delete-btn</a>
-							</div>
-							<!-- //컬러 -->
-							<!-- 혜택 -->
-							<div class="sort tap09" th:if="${filterBenefitList!=null and !filterBenefitList.empty}">
-								<ul>
-									<th:block th:each="filterBenefitData, filterBenefitStat : ${filterBenefitList}">
-										<li>
-											<label class="Benefits_btn" onclick="filterSel();">
-												<input type="checkbox" group="filterValue" th:id="${'chkFilterBenefits'+filterBenefitStat.count}" name="filterBenefitsCds" th:value="${filterBenefitData.filterCd}"><span th:text="${filterBenefitData.filterNm}"></span>
-											</label>
+										<li id="sizeLi3">
+											<strong>신발</strong>
+											<th:block th:each="filterSizeData, filterSizeStat : ${filterSizeList}" th:if="${filterSizeData.filterCd == 'S'}">
+												<label class="size_btn">
+													<input type="checkbox" group="filterValue" th:id="${'chkFilterSSize'+filterSizeStat.count}" name="size3" th:vale="${filterSizeData.filterNm}" th:data-id="${filterSizeData.filterNm}" onclick="filterSel(this,'size','off','3');"><span th:text="${filterSizeData.filterNm}">80</span>
+												</label>
+											</th:block>
 										</li>
-									</th:block>
-								</ul>
-								<a href="javascript:void(0)" class="tap_close">delete-btn</a>
-							</div>
-							<!-- //혜택 -->
-							<!-- 필터 -->
-							<div class="fillter">
-								<div class="fillter_box">
-                                    <span>
-                                        모이몰른
-                                        <a href="javascript:;" class="filter_delete"></a >
-                                    </span>
-									<!-- 컬러 표시 -->
-									<span>
-                                        <span class="pdColor-color12"></span>
-                                        <a href="javascript:;" class="filter_delete"></a >
-                                    </span>
-									<!-- 컬러 표시 -->
+									</ul>
+									<a href="javascript:void(0)" class="tap_close">delete-btn</a>
 								</div>
-								<button class="fillter_reset"><span>전체 초기화</span></button>
-							</div>
-							<!-- //필터 -->
-						</div>
-						<div class="list_content"> <!-- 데이터 없을시 클래스 nodata 추가 -->
-							<div class="list_defult">
-								<div>
-									<p>선택하신 조건에 맞는 상품이 없습니다.<br>필터를 변경해 보세요.</p>
+								<!-- //사이즈 -->
+								<!-- 가격 -->
+								<div class="sort tap04" id="priceFilterDiv">
+									<div class="range">
+										<input type="text" class="js-range-slider01" name="my_range01" value="" />
+									</div>
+									<a href="javascript:void(0)" class="tap_close">delete-btn</a>
 								</div>
-								<div class="ui_row">
-									<button type="button" class="btn btn_default btn_md"><span>선택한 필터 초기화</span></button>
+								<!-- //가격 -->
+								<!-- 할인율 -->
+								<div class="sort tap05" id="dcrateFilterDiv">
+									<ul style="display:none;">
+										<li><input type="checkbox" id="percent01" name="range" value="0"><label for="percent01"><span></span><span>0%</span></label></li>
+										<li><input type="checkbox" id="percent02" name="range" value="10"><label for="percent02"><span></span><span>10%</span></label></li>
+										<li><input type="checkbox" id="percent03" name="range" value="20"><label for="percent03"><span></span><span>20%</span></label></li>
+										<li><input type="checkbox" id="percent04" name="range" value="30"><label for="percent04"><span></span><span>30%</span></label></li>
+										<li><input type="checkbox" id="percent05" name="range" value="40"><label for="percent05"><span></span><span>40%</span></label></li>
+										<li><input type="checkbox" id="percent06" name="range" value="50"><label for="percent06"><span></span><span>50%</span></label></li>
+										<li><input type="checkbox" id="percent07" name="range" value="60"><label for="percent07"><span></span><span>60%</span></label></li>
+										<li><input type="checkbox" id="percent08" name="range" value="70"><label for="percent08"><span></span><span>70%</span></label></li>
+										<li><input type="checkbox" id="percent09" name="range" value="80"><label for="percent09"><span></span><span>80%</span></label></li>
+										<li><input type="checkbox" id="percent10" name="range" value="100"><label for="percent10"><span></span><span>100%</span></label></li>
+									</ul>
+									<div class="range">
+										<input type="text" class="js-range-slider02" name="my_range02" value="" />
+									</div>
+									<a href="javascript:void(0)" class="tap_close">delete-btn</a>
 								</div>
-							</div>
-							<div class="count_wrap">
-								<div>
-									<p><span id="totCntId"></span>개의 상품</p>
+								<!-- //할인율 -->
+								<!-- 연령 -->
+								<div class="sort tap06" th:if="${filterAgeList!=null and !filterAgeList.empty}" id="ageFilterDiv">
+									<ul>
+										<th:block th:each="filterAgeData, filterAgeStat : ${filterAgeList}">
+											<li>
+												<label class="Age_btn">
+													<input type="checkbox" group="filterValue" th:id="${'chkFilterAge'+filterAgeStat.count}" name="age" th:value="${filterAgeData.filterCd}" th:data-id="${filterAgeData.filterNm}" onclick="filterSel(this,'age','off');"><span th:text="${filterAgeData.filterNm}">베이비(0~18개월)</span>
+												</label>
+											</li>
+										</th:block>
+									</ul>
+									<a href="javascript:void(0)" class="tap_close">delete-btn</a>
 								</div>
-								<div>
+								<!-- //연령 -->
+								<!-- 시즌 -->
+								<div class="sort tap07" th:if="${filterSeasonList!=null and !filterSeasonList.empty}" id="seasonFilterDiv">
 									<ul>
-										<li>
-											<a href="" class="on">최신상품순</a>
-										</li>
-										<li>
-											<a href="">인기상품순</a>
-										</li>
-										<li>
-											<a href="">리뷰 많은순</a>
-										</li>
+										<th:block th:each="filterSeasonData, filterSeasonStat : ${filterSeasonList}">
+											<li>
+												<label class="Season_btn">
+													<input type="checkbox" group="filterValue"  th:id="${'chkFilterSeason'+filterSeasonStat.count}" name="season" th:value="${filterSeasonData.filterCd}" th:data-id="${filterSeasonData.filterNm}" onclick="filterSel(this,'season','off');"><span th:text="${filterSeasonData.filterNm}">봄</span>
+												</label>
+											</li>
+										</th:block>
 									</ul>
+									<a href="javascript:void(0)" class="tap_close">delete-btn</a>
 								</div>
-							</div>
-
-							<div id="infiniteContainer">
-								<div id="listBoxOuter" class="itemsGrp">
-									<ul class="productlist quarter" >
+								<!-- //시즌 -->
+								<!-- 컬러 -->
+								<div class="sort tap08" th:if="${filterColorList!=null and !filterColorList.empty}" id="colorFilterDiv">
+									<ul>
+										<th:block th:each="filterColorData, filterColorStat : ${filterColorList}">
+											<li>
+												<label class="color-check">
+													<input type="checkbox" group="filterValue" th:id="${'chkFilterColor'+filterColorStat.count}" name="color" th:value="${filterColorData.filterNm}" th:data-id="${filterColorData.filterNm.replace('#','')}" onclick="filterSel(this,'color','off');">
+													<span class="pdColor-color" th:if="${filterColorData.filterNm=='#FFFFFF'}" th:style="${'background-color:'+filterColorData.filterNm+';'+' border:1px solid #aaa;'}" th:value="${filterColorData.filterNm}"></span>
+													<span class="pdColor-color" th:if="${filterColorData.filterNm!='#FFFFFF'}" th:style="${'background-color:'+filterColorData.filterNm}" th:value="${filterColorData.filterNm}"></span>
+												</label>
+											</li>
+										</th:block>
+									</ul>
+									<a href="javascript:void(0)" class="tap_close">delete-btn</a>
+								</div>
+								<!-- //컬러 -->
+								<!-- 혜택 -->
+								<div class="sort tap09" th:if="${filterBenefitList!=null and !filterBenefitList.empty}" id="benefitFilterDiv">
+									<ul>
+										<th:block th:each="filterBenefitData, filterBenefitStat : ${filterBenefitList}">
+											<li>
+												<label class="Benefits_btn">
+													<input type="checkbox" group="filterValue" th:id="${'chkFilterBenefits'+filterBenefitStat.count}" name="benefit" th:value="${filterBenefitData.filterCd}" th:data-id="${filterBenefitData.filterNm}" onclick="filterSel(this,'benefit','off');"><span th:text="${filterBenefitData.filterNm}"></span>
+												</label>
+											</li>
+										</th:block>
 									</ul>
+									<a href="javascript:void(0)" class="tap_close">delete-btn</a>
+								</div>
+								<!-- //혜택 -->
+								<!-- 필터 -->
+								<div class="fillter">
+									<div class="fillter_box" id="filterData">
+<!--										<span>-->
+<!--											모이몰른-->
+<!--											<a href="javascript:;" class="filter_delete"></a >-->
+<!--										</span>-->
+										<!-- 컬러 표시 -->
+<!--										<span>-->
+<!--											<span class="pdColor-color12"></span>-->
+<!--											<a href="javascript:;" class="filter_delete"></a >-->
+<!--										</span>-->
+										<!-- 컬러 표시 -->
+									</div>
+									<button class="fillter_reset" onclick="fnFilterReset();"><span>전체 초기화</span></button>
 								</div>
+								<!-- //필터 -->
 							</div>
+							<div class="list_content"> <!-- 데이터 없을시 클래스 nodata 추가 -->
+								<div class="list_defult">
+									<div>
+										<p>선택하신 조건에 맞는 상품이 없습니다.<br>필터를 변경해 보세요.</p>
+									</div>
+									<div class="ui_row">
+										<button type="button" class="btn btn_default btn_md"><span>선택한 필터 초기화</span></button>
+									</div>
+								</div>
+								<div class="count_wrap">
+									<div>
+										<p><span id="totCntId"></span>개의 상품</p>
+									</div>
+									<div>
+										<ul>
+											<li>
+												<a href="" class="on">최신상품순</a>
+											</li>
+											<li>
+												<a href="">인기상품순</a>
+											</li>
+											<li>
+												<a href="">리뷰 많은순</a>
+											</li>
+										</ul>
+									</div>
+								</div>
 
-							<div class="itemsGrp" id="listBox">
+								<div id="infiniteContainer">
+									<div id="listBoxOuter" class="itemsGrp">
+										<ul class="productlist quarter" >
+										</ul>
+									</div>
+								</div>
 
-							</div>
+								<div class="itemsGrp" id="listBox">
 
+								</div>
+
+							</div>
 						</div>
-					</div>
+					</form>
 				</div>
 			</div>
 		</div>
@@ -312,6 +314,7 @@
 				var my_to = custom_values.indexOf(custom_values[5]); //custom_values.indexOf('230,000원');
 				var minValue = custom_values[0];
 				var maxValue = custom_values[5];
+				console.log('my_from>>'+my_from);
 
 				$(".dp .js-range-slider01, .sch_result .js-range-slider01").ionRangeSlider({
 					type: "double",
@@ -330,7 +333,7 @@
 			//할인율
 			var custom_values02 = ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'];
 			var my_from02 = custom_values02.indexOf('0%');
-			var my_to02 = custom_values02.indexOf('100%');
+			var my_to02 = custom_values02.indexOf('10%');
 			$(".dp .js-range-slider02, .sch_result .js-range-slider02").ionRangeSlider({
 				type: "double",
 				min: 0,
@@ -349,12 +352,25 @@
 			//fnGoodsListSearch();
 		});
 
+		var fnFilterReset = function (){
+			$("#searchGoodsForm input:hidden[name=brandSearch]").remove();
+			$("#searchGoodsForm input:hidden[name=sizeSearch]").remove();
+			$("#searchGoodsForm input:hidden[name=priceSearch]").remove();
+			$("#searchGoodsForm input:hidden[name=dcrateSearch]").remove();
+			$("#searchGoodsForm input:hidden[name=seasonSearch]").remove();
+			$("#searchGoodsForm input:hidden[name=colorSearch]").remove();
+			$("#searchGoodsForm input:hidden[name=benefitSearch]").remove();
+		}
+
 		var fnGoodsListSearch = function (){
+			console.log('1');
 			gagaInfiniteScroll.getHistory();
+			console.log('2');
 		}
 
 		// 상품 검색
 		var fnGetInfiniteScrollDataList = function (pageNum){
+			console.log('3');
 			$("#searchGoodsForm input[name=pageNo]").val(pageNum+1);
 			gagajf.ajaxFormSubmit("/display/category/goods/list", document.searchGoodsForm,  gagaInfiniteScroll.jsonToHtml);
 		}
@@ -496,7 +512,7 @@
 
 		// 사파리 - event.persisted || 크롬 - window.performance.navigation.type 이 1이면 새로고침, 2면 페이지 이동을 통한 캐쉬페이징
 		$(window).on("pageshow", function(event) {
-			/*$('#filterForm input[name=brand]:checked').each(function(){
+			$('#filterForm input[name=brand]:checked').each(function(){
 				$(this).parent().addClass("active");
 			});
 			$('#filterForm input[name=size]:checked').each(function(){
@@ -504,7 +520,7 @@
 			});
 			$('#filterForm input[name=price]:checked').each(function(){
 				$(this).parent().addClass("active");
-			});*/
+			});
 			if ( (event.originalEvent && event.originalEvent.persisted) || (window.performance && window.performance.navigation.type == 2)) {
 				var historyData = sessionStorage.getItem(document.location.href);
 				if(historyData!=null){

src/main/webapp/biz/goods.js

@@ -151,6 +151,9 @@ var fnEpCouponDownCallBack = function(){
 	//cfCloseLayer('epCouponPop');  //dim 이 안없어져요
 }
 
+//****************상품상세  end **********************************
+
+//****************상품리스트  start **********************************
 var categoryGoodsList = [];
 var cnt = 1;
 var email = '';
@@ -224,5 +227,97 @@ var fnCategoryGoodsInfiniteScrollInit = function(){
 	$("#listBox").html("");
 }
 
+var filterHtml = '';
+var filterStatHtml = '';
 
-//****************상품상세  end **********************************
+// 상품상세 필터 조회
+var filterSel = function (obj, gubun, staus, sizeGb){
+	let $obj = $(obj);
+	if(staus=='on'){
+		$(obj).attr('onclick','filterSel(this,\''+gubun+'\',\'off\',\'\');');
+		$("#filterData").find('span').each(function(idx,item) {
+			if(gubun=='color'){
+				if($obj.attr('data-id').replace('#','').trim() == $(this).closest("span").attr('id')) {
+					$(this).closest("span").remove();
+				}
+			}else{
+				if($obj.attr('data-id') == $(this).closest("span").text()) {
+					$(this).closest("span").remove();
+				}
+			}
+		});
+	}else{
+		$(obj).attr('onclick','filterSel(this,\''+gubun+'\',\'on\',\'\');');
+
+		let tag = '';
+		if(gubun=='color'){
+			tag += '<span id="'+$obj.attr('data-id').replace('#','')+'">';
+			if($obj.attr('data-id')=='#FFFFFF'){
+				tag += '	<span class="pdColor-color" style="background-color: #'+$obj.attr('data-id')+';border:1px solid #aaa;" value="'+$obj.attr('data-id')+'"></span>';
+			}else{
+				tag += '	<span class="pdColor-color" style="background-color: #'+$obj.attr('data-id')+'" value="'+$obj.attr('data-id')+'"></span>';
+			}
+			tag += '	<a href="javascript:void(0);" class="filter_delete" onclick="fnDeleteFilter(this,\''+gubun+'\');"></a >';
+			tag += '</span>';
+		}else{
+			tag += '<span>'+$obj.attr('data-id');
+			if(!gagajf.isNull(sizeGb)){
+				tag += '<a href="javascript:void(0);" class="filter_delete" onclick="fnDeleteFilter(this,\''+gubun+'\',\'on\',\''+sizeGb+'\');"></a >';
+			}else{
+				tag += '<a href="javascript:void(0);" class="filter_delete" onclick="fnDeleteFilter(this,\''+gubun+'\',\'on\',\'\');"></a >';
+			}
+			tag += '</span>';
+		}
+
+		$("#filterData").append(tag);
+	}
+
+	fnFilterSet(gubun, sizeGb);
+}
+
+var fnFilterSet = function (searchId, sizeGb){
+	fnCategoryGoodsInfiniteScrollInit();
+	$("#searchGoodsForm input:hidden[name="+searchId+"Search]").remove();
+	var tag = '';
+	if(searchId=='size'){
+		//$('#filterForm #sizeLi'+sizeGb).find('input[name='+searchId+']:checked').each(function(idx,item){
+		$('#filterForm input[name='+searchId+']:checked').each(function(){
+			//console.log('idx::::'+item);
+			tag = '<input type="hidden" name="'+searchId+'Search" value="'+$(this).val()+'"/>\n';
+			$("#searchGoodsForm").append(tag);
+		});
+	}else{
+		$('#filterForm input[name='+searchId+']:checked').each(function(){
+			tag = '<input type="hidden" name="'+searchId+'Search" value="'+$(this).val()+'"/>\n';
+			$("#searchGoodsForm").append(tag);
+		});
+	}
+
+
+	fnGoodsListSearch();
+}
+
+// 상품상세 필터 삭제
+var fnDeleteFilter = function (obj, gubun, sizeGb){
+	$("#"+gubun+"FilterDiv > ul > li").each(function(idx,item) {
+		if(gubun == 'size'){
+			$("#sizeLi"+sizeGb+" .size_btn").each(function (){
+				if($(obj).closest("span").text() == $(this).find('input').attr('data-id')){
+					$(this).find('input').click();
+				}
+			});
+		}else if(gubun == 'color'){
+			if($(obj).closest("span").attr('id') == $(this).find('input').attr('data-id').trim()){
+				$(this).find('input').click();
+			}
+		}else{
+			if($(obj).closest("span").text() == $(this).find('input').attr('data-id')){
+				$(this).find('input').click();
+			}
+		}
+	});
+
+	$(obj).closest("span").remove();
+}
+
+//****************상품리스트  end **********************************

src/main/webapp/ux/pc/css/layout.css

@@ -1530,7 +1530,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 	.faq .quick_list ul li {width: 19.99%; height: 49.9%; text-align: center; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd;}
 	.faq .quick_list ul li:nth-child(1),.faq .quick_list ul li:nth-child(6) {border-left:none;}
 	.faq .quick_list ul li:nth-child(6),.faq .quick_list ul li:nth-child(7),.faq .quick_list ul li:nth-child(8),.faq .quick_list ul li:nth-child(9),.faq .quick_list ul li:nth-child(10) {border-bottom: none;}
-	.faq .quick_list ul li a {display: flex; display: -ms-flexbox; justify-content: center; width:100%; height: 100%; line-height:26px; font-size:16px; font-weight: 200; align-items: center; color:#222; letter-spacing:-0.025em;padding: 0 25px;}
+	.faq .quick_list ul li a {display: flex; display: -ms-flexbox; justify-content: center; word-break: keep-all; overflow: hidden; width:100%; height: 100%; line-height:26px; font-size:16px; font-weight: 200; align-items: center; color:#222; letter-spacing:-0.025em;padding: 0 15px;}
 	.faq .search_wrap {margin-bottom:60px;}
 	.faq .search_wrap .faq_search {height:190px; background:#f5f5f5; padding:50px; box-sizing:border-box; text-align:center;}
 	.faq .search_wrap .faq_search .search_box {display:inline-block; position:relative; width:600px; padding-right:50px; border-bottom:2px solid #222; box-sizing: border-box; text-align:left;}
@@ -1541,7 +1541,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 	.faq .fold_nav {width:100%;}
 	.faq .fold_nav ul {display: flex; display: -ms-flexbox; flex-wrap: wrap; margin-top:-12px}
 	.faq .fold_nav ul li {margin:12px 12px 0 0;}
-	.faq .fold_nav ul li a {display:inline-block;padding:15px 22px 13px;border: 1px solid #ddd;font-size: 16px;font-weight: 300;line-height: 1; letter-spacing:-0.025em;}
+	.faq .fold_nav ul li a {display:inline-block;padding:15px 22px;border: 1px solid #ddd;font-size: 16px;font-weight: 300;line-height: 1; letter-spacing:-0.025em;}
 	.faq .fold_nav ul li a.on {position: relative; background: #222; color:#fff; border: 1px solid #222;}
 	.faq .fold_nav ul li a.on::after {content:''; position: absolute; width:0; height: 0; bottom:-1px; right:-1px; border-bottom: 13px solid #fff; border-left: 13px solid transparent;}
 	.faq .foldGroup {margin-top:50px}
@@ -1813,7 +1813,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 	.stamp_event .event_benefit {margin-top:80px;}
 	.stamp_event .event_benefit .title {color:#222; font-size:30px; font-weight:500; text-align:center;}
 	.stamp_event .event_benefit .benefit_con {margin-top:40px; text-align:center;}
-	.stamp_event .event_benefit .benefit_con ul{display: flex;margin: -6px auto;width: 1200px;background: #f5f5f5;}
+	.stamp_event .event_benefit .benefit_con ul{margin: -6px auto;width: 1200px;background: #f5f5f5;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
 	.stamp_event .event_benefit .benefit_con li{width: 24%;height: 125px;margin:40px 0;position:relative;}
 	.stamp_event .event_benefit .benefit_con li::after{content: ''; display: inline-block;width: 1px;height: 100%;padding: 0;margin: 0;background: #e4e4e4;position: absolute;right: 0;top: 0;}
 	.stamp_event .event_benefit .benefit_con li:last-child::after{content: ''; display: inline-block; width:0;}
@@ -2582,6 +2582,8 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 	.pd_detail .thumb {display:block; position:relative; width:100%; height:0px; line-height:0; font-size:0; padding-top:150%; overflow:hidden;background:#f5f5f5;background: #ffffff;border: 1px solid #f5f5f5;box-sizing: content-box;}
 	.pd_detail .thumb img,
 	.pd_detail .thumb video {position:absolute; left:0; top:50%; width:100%; transform:translateY(-50%) ; z-index:2;}
+	.pd_detail .movbox {position: relative;height: 0;padding-top: 100%;padding-bottom:50.25%;overflow: hidden;transition: all 300ms ease;transform: scale(1);}
+	.pd_detail .movbox iframe{position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;z-index: 1;}
 	.pd_detail .btn_popup {display:inline-block; padding:0px; box-sizing:border-box;}
 	.pd_detail .btn_popup span {color:#888; font-size:12px; font-weight:200; border-bottom:1px solid #888; /*vertical-align:top;*/}