브랜드 메인/ 브랜드 검색레이어 수정

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

@@ -1302,6 +1302,9 @@ public class TsfDisplayController extends TsfBaseController {
 
 		mav.addObject("brandGroupNo", brandGroupNo);
 
+		// 실시간 많이 조회하고 있는 상품
+		mav.addObject("realtimeGoodsList", eigeneaiApi.getRealtimeViewGoodsList(20));
+
 		mav.setViewName(super.getDeviceViewName("display/BrandSearchLayer"));
 		return mav;
 	}

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

@@ -1520,7 +1520,10 @@
 		                    AND		CT.BRAND_GROUP_NO = #{brandGroupNo}
 		                    </if>
 		                    <if test="contentsLoc == 'SMM003' or contentsLoc == 'SBM007' or contentsLoc == 'SBM008' or contentsLoc == 'SBM009' or contentsLoc == 'SBM017' or contentsLoc == 'SBM018' or contentsLoc == 'SBM019' or contentsLoc == 'SOM003' or contentsLoc == 'SCM002' or contentsLoc == 'SCM003' or contentsLoc == 'SOM002'">
-		                    AND CT.CONTENTS_SQ IN ( SELECT TMP.CONTENTS_SQ FROM (SELECT A.CONTENTS_SQ FROM TB_CONTENTS A WHERE 1=1 AND A.CONTENTS_LOC = #{contentsLoc} AND NOW() BETWEEN A.DISP_STDT AND A.DISP_EDDT
+		                        <if test="brandGroupNo != null and brandGroupNo != ''">
+		                        AND		CTG.BRAND_GROUP_NO = #{brandGroupNo}
+		                        </if>
+		                      AND CT.CONTENTS_SQ IN ( SELECT TMP.CONTENTS_SQ FROM (SELECT A.CONTENTS_SQ FROM TB_CONTENTS A WHERE 1=1 AND A.CONTENTS_LOC = #{contentsLoc} AND NOW() BETWEEN A.DISP_STDT AND A.DISP_EDDT
 		                                                                                    <if test="brandGroupNo != null and brandGroupNo != ''">
 		                                                                                        AND A.BRAND_GROUP_NO = #{brandGroupNo}
 		                                                                                    </if>
@@ -1744,11 +1747,17 @@
 		                AND		G.BRAND_CD = B.BRAND_CD
 		                AND     B.BRAND_GROUP_NO = BG.BRAND_GROUP_NO
 		                AND		CT.CONTENTS_LOC = #{contentsLoc}
-		                <if test="contentsLoc == 'SMM009' or contentsLoc == 'SMM007' or contentsLoc == 'SMM012'">
+		                <if test="contentsLoc == 'SMM009' or contentsLoc == 'SMM012'">
 		                AND 	CTG.CONTENTS_SQ = #{dispOrd}
 		                </if>
+		                <if test="contentsLoc == 'SMM007'">
+		                AND		CT.BRAND_GROUP_NO = #{brandGroupNo}
+		                </if>
 		                <if test="contentsLoc == 'SMM003' or contentsLoc == 'SBM007' or contentsLoc == 'SBM008' or contentsLoc == 'SBM009' or contentsLoc == 'SBM017' or contentsLoc == 'SBM018' or contentsLoc == 'SBM019' or contentsLoc == 'SOM003' or contentsLoc == 'SCM002' or contentsLoc == 'SCM003'">
-		                    AND CT.CONTENTS_SQ IN ( SELECT TMP.CONTENTS_SQ FROM (SELECT A.CONTENTS_SQ FROM TB_CONTENTS A WHERE 1=1 AND A.CONTENTS_LOC = #{contentsLoc} AND NOW() BETWEEN A.DISP_STDT AND A.DISP_EDDT
+		                    <if test="brandGroupNo != null and brandGroupNo != ''">
+		                    AND		CTG.BRAND_GROUP_NO = #{brandGroupNo}
+		                    </if>
+		                  AND CT.CONTENTS_SQ IN ( SELECT TMP.CONTENTS_SQ FROM (SELECT A.CONTENTS_SQ FROM TB_CONTENTS A WHERE 1=1 AND A.CONTENTS_LOC = #{contentsLoc} AND NOW() BETWEEN A.DISP_STDT AND A.DISP_EDDT
 		                                                                                 <if test="brandGroupNo != null and brandGroupNo != ''">
 		                                                                                 AND A.BRAND_GROUP_NO = #{brandGroupNo}
 		                                                                                 </if>

src/main/webapp/WEB-INF/views/mob/display/BrandSearchLayerMob.html

@@ -27,14 +27,14 @@
 					<form id="searchMainForm" name="searchMainForm">
 						<input type="hidden" name="brandGroupNo" th:value="${brandGroupNo}"/>
 						<div class="sch_title">
-							<input type="text" class="form_control" name="keyword" placeholder="검색어를 입력하세요." autocomplete="off" onkeyup="fnOnkeyupKeyword(this);">
+							<input type="text" class="form_control" name="keyword" placeholder="브랜드 검색어를 입력하세요." autocomplete="off" onkeyup="fnOnkeyupKeyword(this);">
 							<button type="button" class="btn_x" id="deleteKeyword" style="display:none;">X</button>
 							<button type="button" class="btn_sch" id="btnSearchKeyword"><img src="/images/mo/ico_btn_search.png" alt=""></button>
 						</div>
 					</form>
 				</div>
 
-				<div class="inner" id="defaultArea">
+				<div class="inner default_box" id="defaultArea">
 					<div class="filter-list">
 						<div class="f_left">
 							<h3>최근 검색어</h3>
@@ -64,214 +64,30 @@
 				</div>
 				<!-- //1.통합검색 default -->
 
-				<!-- 2.통합검색 default_최근검색어 있음 -->
-		<!--		<div class="inner">-->
-		<!--			<div class="sch_title">-->
-		<!--				<input type="text" class="form_control" placeholder="NBA 겨울 클리어런스+봄 프리뷰!">-->
-		<!--				&lt;!&ndash; <button class="btn_x">X</button> &ndash;&gt;-->
-		<!--				<button type="button" class="btn_sch"><img src="/images/mo/ico_btn_search.png" alt=""></button>-->
-		<!--			</div>-->
-		<!--			<div class="filter-list">-->
-		<!--				<div class="f_left">-->
-		<!--					<h3>최근 검색어</h3>-->
-		<!--				</div>-->
-		<!--				<div class="f_right">-->
-		<!--					<button class="allxBtn"><span>전체삭제</span></button>-->
-		<!--				</div>-->
-		<!--			</div>-->
-		<!--			<div class="search-list">-->
-		<!--				<ul>-->
-		<!--					<li>-->
-		<!--						<a href="javascript:void(0);">-->
-		<!--							<p>01슬랙스</p>-->
-		<!--						</a>-->
-		<!--						<button type="button" class="xBtn"><span>삭제</span></button>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="javascript:void(0);">-->
-		<!--							<p>02특가세일</p>-->
-		<!--						</a>-->
-		<!--						<button type="button" class="xBtn"><span>삭제</span></button>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="javascript:void(0);">-->
-		<!--							<p>03모이몰른 티셔츠</p>-->
-		<!--						</a>-->
-		<!--						<button type="button" class="xBtn"><span>삭제</span></button>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="javascript:void(0);">-->
-		<!--							<p>04모이몰른 티셔츠</p>-->
-		<!--						</a>-->
-		<!--						<button type="button" class="xBtn"><span>삭제</span></button>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="javascript:void(0);">-->
-		<!--							<p>05모이몰른 티셔츠</p>-->
-		<!--						</a>-->
-		<!--						<button type="button" class="xBtn"><span>삭제</span></button>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="javascript:void(0);">-->
-		<!--							<p>06모이몰른 티셔츠</p>-->
-		<!--						</a>-->
-		<!--						<button type="button" class="xBtn"><span>삭제</span></button>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="javascript:void(0);">-->
-		<!--							<p>07모이몰른 티셔츠</p>-->
-		<!--						</a>-->
-		<!--						<button type="button" class="xBtn"><span>삭제</span></button>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="javascript:void(0);">-->
-		<!--							<p>08모이몰른 티셔츠</p>-->
-		<!--						</a>-->
-		<!--						<button type="button" class="xBtn"><span>삭제</span></button>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="javascript:void(0);">-->
-		<!--							<p>09모이몰른 티셔츠</p>-->
-		<!--						</a>-->
-		<!--						<button type="button" class="xBtn"><span>삭제</span></button>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="javascript:void(0);">-->
-		<!--							<p>10모이몰른 티셔츠</p>-->
-		<!--						</a>-->
-		<!--						<button type="button" class="xBtn"><span>삭제</span></button>-->
-		<!--					</li>-->
-		<!--				</ul>-->
-		<!--				<p class="nodata_txt">최근 검색어가 없습니다.</p>-->
-		<!--			</div>-->
-		<!--			<h3 class="hot-key">STYLE24에서 검색되고 있어요</h3>-->
-		<!--			<div class="related_keyword">-->
-		<!--				<div class="sub_category">-->
-		<!--					<div class="cate_wrap">-->
-		<!--						<a href="javascript:;" class="on">전체</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 티셔츠/셔츠</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 니트/가디건/베스트</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 원피스/스커트</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 팬츠/데님/레깅스</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 가죽/모피</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 여성 잡화</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 언더웨어</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 세트</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 니트/가디건/베스트</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 원피스/스커트</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 가죽/모피</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 여성 잡화</a>-->
-		<!--					</div>-->
-		<!--				</div>-->
-		<!--			</div>-->
-		<!--		</div>-->
-				<!-- //2.통합검색 default_최근검색어 있음 -->
 				<!-- 3.지금 많이 보고 있어요 상품. -->
-				<div class="inner" id="popularArea">
+				<div class="inner default_box" id="popularArea">
 					<div class="now_view">
 						<div class="store_product">
 							<div class="allresult-tit">
 								<h3>지금 많이 보고 있어요</h3>
-								<button class="btn_refresh"><span>17:30</span> 기준</button>
+								<button class="btn_refresh" onclick="fnRealtimeGoodsList();"><span th:text="${#calendars.format(#calendars.createNow(), 'HH:mm')}">17:30</span> 기준</button>
 							</div>
 							<div class="swiper-container sch_product">
-								<div class="swiper-wrapper">
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<button type="button" class="itemLike">관심상품 추가</button>
-											<a href="#">
-												<img src="/images/mo/br_main03.png" alt="">
-												<div class="s-text">
-													<div class="itemName">여성 오버핏 투마일 웨어 아노락 에코</div>
-													<p class="itemTag">508명 보는중</p>
-												</div>
-											</a>
-										</div>
-									</div>
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<button type="button" class="itemLike">관심상품 추가</button>
-											<a href="#">
-												<img src="/images/mo/br_main03.png" alt="">
-												<div class="s-text">
-													<div class="itemName">여성 오버핏 투마일 웨어 아노락 에코</div>
-													<p class="itemTag">508명 보는중</p>
-												</div>
-											</a>
-										</div>
-									</div>
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<button type="button" class="itemLike">관심상품 추가</button>
-											<a href="#">
-												<img src="/images/mo/br_main03.png" alt="">
-												<div class="s-text">
-													<div class="itemName">여성 오버핏 투마일 웨어 아노락 에코</div>
-													<p class="itemTag">508명 보는중</p>
-												</div>
-											</a>
-										</div>
-									</div>
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<button type="button" class="itemLike">관심상품 추가</button>
-											<a href="#">
-												<img src="/images/mo/br_main03.png" alt="">
-												<div class="s-text">
-													<div class="itemName">여성 오버핏 투마일 웨어 아노락 에코</div>
-													<p class="itemTag">508명 보는중</p>
-												</div>
-											</a>
-										</div>
-									</div>
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<button type="button" class="itemLike">관심상품 추가</button>
-											<a href="#">
-												<img src="/images/mo/br_main03.png" alt="">
-												<div class="s-text">
-													<div class="itemName">여성 오버핏 투마일 웨어 아노락 에코</div>
-													<p class="itemTag">508명 보는중</p>
-												</div>
-											</a>
-										</div>
-									</div>
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<button type="button" class="itemLike">관심상품 추가</button>
-											<a href="#">
-												<img src="/images/mo/br_main03.png" alt="">
-												<div class="s-text">
-													<div class="itemName">여성 오버핏 투마일 웨어 아노락 에코</div>
-													<p class="itemTag">508명 보는중</p>
-												</div>
-											</a>
-										</div>
-									</div>
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<button type="button" class="itemLike">관심상품 추가</button>
-											<a href="#">
-												<img src="/images/mo/br_main03.png" alt="">
-												<div class="s-text">
-													<div class="itemName">여성 오버핏 투마일 웨어 아노락 에코</div>
-													<p class="itemTag">508명 보는중</p>
-												</div>
-											</a>
-										</div>
-									</div>
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<button type="button" class="itemLike">관심상품 추가</button>
-											<a href="#">
-												<img src="/images/mo/br_main03.png" alt="">
-												<div class="s-text">
-													<div class="itemName">여성 오버핏 투마일 웨어 아노락 에코</div>
-													<p class="itemTag">508명 보는중</p>
-												</div>
-											</a>
+								<div class="swiper-wrapper" id="itemViewArea">
+									<th:block th:each="item, status : ${realtimeGoodsList}">
+										<div class="swiper-slide">
+											<div class="item_prod">
+												<button type="button" class="itemLike" th:classappend="${item.wishCnt > 0}? 'likeit' : ''" onclick="cfnMoPutWishList(this);" th:attr="goodsCd=${item.itemId}">관심상품 추가</button>
+												<a th:href="${item.itemUrl}">
+													<img th:src="${item.imageUrl}" alt="">
+													<div class="s-text">
+														<div class="itemName" th:text="${item.itemName}"></div>
+														<p class="itemTag" th:text="${item.count < 10 ? '10명 미만' : item.count + '명 보는중'}">508명 보는중</p>
+													</div>
+												</a>
+											</div>
 										</div>
-									</div>
+									</th:block>
 								</div>
 							</div>
 						</div>
@@ -280,228 +96,35 @@
 				<!-- //3.지금 많이 보고 있어요 상품. -->
 
 				<!-- 4.검색어 타이핑 -->
-				<div class="inner" id="keyupArea" th:if="${brandGroupNo==null}">
-		<!--			<div class="sch_title">-->
-		<!--				<input type="text" class="form_control" value="티비제이 제기장 스웨터" placeholder="NBA 겨울 클리어런스+봄 프리뷰!">-->
-		<!--				<button class="btn_x"><span>검색어 지우기</span></button>-->
-		<!--				<button class="btn_sch"><img src="/images/mo/ico_btn_search.png" alt=""></button>-->
-		<!--			</div>-->
+				<div class="inner searching_box" id="keyupArea" style="display:none;" th:if="${brandGroupNo==null}">
 					<div class="filter-list store-list">
-		<!--				<div class="f_left">-->
-		<!--					<h3>티비제이 공식 스토어</h3>-->
-		<!--				</div>-->
-		<!--				<div class="f_right">-->
-		<!--					<a href="#none">바로가기</a>-->
-		<!--				</div>-->
 					</div>
 					<div class="relative-list">
-		<!--				<ul>-->
-		<!--					<li>-->
-		<!--						<a href="#">-->
-		<!--							<p><span>티비제이</span></p>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="#">-->
-		<!--							<p><span>티비제이</span> 기모청바지</p>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="#">-->
-		<!--							<p>TBJ 겨울 팬츠</p>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="#">-->
-		<!--							<p><span>제기장 스웨터</span></p>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="#">-->
-		<!--							<p><span>티비제이</span> 드라마 연예인 스웨터</p>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="#">-->
-		<!--							<p>가을겨울 긴팔 롱 <span>스웨터</span></p>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="#">-->
-		<!--							<p><span>스웨터</span></p>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="#">-->
-		<!--							<p>롱 <span>스웨터</span></p>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="#">-->
-		<!--							<p><span>티비제이</span> 여성 <span>스웨터</span></p>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="#">-->
-		<!--							<p>가을겨울 긴팔 롱 <span>스웨터</span></p>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--				</ul>-->
-		<!--				<p class="nodata_txt">&lsquo;<span>스웨터 제기장</span>&rsquo; 에 맞는 상품을 찾지 못했습니다.<br>검색어를 변경해 보세요.</p>-->
 					</div>
 				</div>
 				<!-- //4.검색어 타이핑 -->
 
 				<!-- 3.검색결과 없을때 -->
-				<div class="inner" id="noDataArea">
-		<!--			<div class="sch_title">-->
-		<!--				<input type="text" class="form_control" placeholder="NBA 겨울 클리어런스+봄 프리뷰!">-->
-		<!--				&lt;!&ndash; <button class="btn_x">X</button> &ndash;&gt;-->
-		<!--				<button class="btn_sch"><img src="/images/mo/ico_btn_search.png" alt=""></button>-->
-		<!--			</div>-->
+				<div class="inner empty_box" id="noDataArea" style="display:none;">
 					<div class="relative-list nodata"> <!-- 검색결과 없을 시 nodata 클래스 추가 -->
 						<p class="nodata_txt">&lsquo;<span id="noDataKeyword"></span>&rsquo; 에 맞는 상품을 찾지 못했습니다.<br>검색어를 변경해 보세요.</p>
 					</div>
 					<h3 class="hot-key">STYLE24에서 검색되고 있어요</h3>
 					<div class="related_keyword">
 						<div class="sub_category">
-							<div class="cate_wrap">
-								<a href="javascript:;" class="on">전체</a>
-								<a href="javascript:;"><span>#</span> 티셔츠/셔츠</a>
-								<a href="javascript:;"><span>#</span> 니트/가디건/베스트</a>
-								<a href="javascript:;"><span>#</span> 원피스/스커트</a>
-								<a href="javascript:;"><span>#</span> 팬츠/데님/레깅스</a>
-								<a href="javascript:;"><span>#</span> 가죽/모피</a>
-								<a href="javascript:;"><span>#</span> 여성 잡화</a>
-								<a href="javascript:;"><span>#</span> 언더웨어</a>
-								<a href="javascript:;"><span>#</span> 세트</a>
-								<a href="javascript:;"><span>#</span> 니트/가디건/베스트</a>
-								<a href="javascript:;"><span>#</span> 원피스/스커트</a>
-								<a href="javascript:;"><span>#</span> 가죽/모피</a>
-								<a href="javascript:;"><span>#</span> 여성 잡화</a>
+							<div class="cate_wrap" id="noDataRelatedKeyword">
+
 							</div>
 						</div>
 					</div>
 				</div>
-				<div class="inner" id="recommandArea">
+				<div class="inner empty_box" id="recommandArea" style="display:none;">
 					<div class="recommand_product">
 						<div class="store_product">
 							<div class="swiper-container recommand_slide">
 								<h3>이런 상품은 어떤가요?</h3>
-								<div class="swiper-wrapper">
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<div class="item_state">
-												<button type="button" class="itemLike">관심상품 추가</button>
-												<a href="#none" class="itemLink">
-													<div class="itemPic">
-														<img class="vLHTC pd_img" src="/images/mo/thumb/br_main03.png" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														<span class="itemPrice_original">89,000</span>
-														80,100
-														<span class="itemPercent">10%</span>
-													</p>
-													<div class="itemcolorchip">
-														<span class="chip_color35" value="ABM">BEIGE</span>
-														<span class="chip_color54" value="BDS">BLACK</span>
-														<span class="chip_color40" value="YBR">WHITE</span>
-													</div>
-													<p class="itemBadge">
-														<span class="badge13">베스트 </span>
-													</p>
-													<div class="itemComment">#주문 폭주 상품</div>
-												</a>
-											</div>
-										</div>
+								<div class="swiper-wrapper" id="recommendItemArea">
 
-									</div>
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<div class="item_state">
-												<button type="button" class="itemLike">관심상품 추가</button>
-												<a href="#none" class="itemLink">
-													<div class="itemPic">
-														<img class="vLHTC pd_img" src="/images/mo/thumb/br_main03.png" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														<span class="itemPrice_original">89,000</span>
-														80,100
-														<span class="itemPercent">10%</span>
-													</p>
-													<div class="itemcolorchip">
-														<span class="chip_color35" value="ABM">BEIGE</span>
-														<span class="chip_color54" value="BDS">BLACK</span>
-														<span class="chip_color40" value="YBR">WHITE</span>
-													</div>
-													<p class="itemBadge">
-														<span class="badge13">베스트 </span>
-													</p>
-													<div class="itemComment">#주문 폭주 상품</div>
-												</a>
-											</div>
-										</div>
-									</div>
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<div class="item_state">
-												<button type="button" class="itemLike">관심상품 추가</button>
-												<a href="#none" class="itemLink">
-													<div class="itemPic">
-														<img class="vLHTC pd_img" src="/images/mo/thumb/br_main03.png" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														<span class="itemPrice_original">89,000</span>
-														80,100
-														<span class="itemPercent">10%</span>
-													</p>
-													<div class="itemcolorchip">
-														<span class="chip_color35" value="ABM">BEIGE</span>
-														<span class="chip_color54" value="BDS">BLACK</span>
-														<span class="chip_color40" value="YBR">WHITE</span>
-													</div>
-													<p class="itemBadge">
-														<span class="badge13">베스트 </span>
-													</p>
-													<div class="itemComment">#주문 폭주 상품</div>
-												</a>
-											</div>
-										</div>
-									</div>
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<div class="item_state">
-												<button type="button" class="itemLike">관심상품 추가</button>
-												<a href="#none" class="itemLink">
-													<div class="itemPic">
-														<img class="vLHTC pd_img" src="/images/mo/thumb/br_main03.png" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														<span class="itemPrice_original">89,000</span>
-														80,100
-														<span class="itemPercent">10%</span>
-													</p>
-													<div class="itemcolorchip">
-														<span class="chip_color35" value="ABM">BEIGE</span>
-														<span class="chip_color54" value="BDS">BLACK</span>
-														<span class="chip_color40" value="YBR">WHITE</span>
-													</div>
-													<p class="itemBadge">
-														<span class="badge13">베스트 </span>
-													</p>
-													<div class="itemComment">#주문 폭주 상품</div>
-												</a>
-											</div>
-										</div>
-									</div>
 								</div>
 							</div>
 						</div>
@@ -585,14 +208,19 @@
 
 	// 검색어 찾기 결과
 	var fnAutoCompleteList = function (result){
-		if(result.autoKeywords.length==0 && gagajf.isNull(result.brand.brandGroupNo) && result.cateList.length == 0 && gagajf.isNull(result.goodsList)){
-			$("#keyupArea").hide();
-			$("#keyupCateArea").hide();
-			// $('.empty_box .nodata').find('#noDataKeyword').text("'"+$("#searchMainForm").find('input[name=keyword]').val()+"'");
+		if(result.autoKeywords.length==0 && gagajf.isNull(result.goodsList)){
+			$('.sch_result .default_box').hide();
+			$('.sch_result .searching_box').hide();
+			$('.sch_result .empty_box').show();
 			$("#noDataArea").find('#noDataKeyword').text($("#searchMainForm").find('input[name=keyword]').val());
-			$("#noDataArea").show();
-			$("#recommandArea").show();
+			// 검색어 연관 상품 추천
+			fnRecommendItemList($("#searchMainForm").find('input[name=keyword]').val());
+			// 인기검색어
+			fnTrendKeywordList();
 		}else{
+			$('.sch_result .default_box').hide();
+			$('.sch_result .searching_box').show();
+			$('.sch_result .empty_box').hide();
 			// 자동완성 키워드
 			if(result.autoKeywords != null && result.autoKeywords.length > 0){
 				$("#keyupArea").find(".relative-list").html('');
@@ -611,69 +239,54 @@
 				$("#keyupArea").find(".relative-list").html('');
 			}
 
-			// 브랜드
-			if(result.brand != null && !gagajf.isNull(result.brand.brandGroupNo)){
-				$("#keyupArea").find(".store-list").html('');
-				let tag = '';
-				tag += '<div class="f_left">\n';
-				tag += '	<h3>'+result.brand.brandGroupNm+' 공식 스토어</h3>\n';
-				tag += '</div>\n';
-				tag += '<div class="f_right">\n';
-				tag += '	<a href="javascript:void(0);" onclick="cfnGoToBrandMain('+result.brand.brandGroupNo+');">바로가기</a>\n';
-				tag += '</div>\n';
-				$("#keyupArea").find(".store-list").append(tag);
-			}else{
-				$("#keyupArea").find(".store-list").html('');
-			}
-
-			if(result.cateList != null && result.cateList.length > 0){
-				$("#keyupCateArea").find(".sch_category").html('');
-				let tag = '';
-				tag += '<h3>카테고리</h3>\n';
-				tag += '<ul>\n';
-				$.each(result.cateList, function (idx, item){
-					tag +='<li>\n';
-					tag +='	<a href="javascript:void(0);" onclick="cfnGoToGoodsList(0,\'G032_101\' ';
-					if(item.cate1No != null){
-						tag += ', '+item.cate1No;
-					}
-					if(item.cate2No != null){
-						tag += ', '+item.cate2No;
-					}
-					if(item.cate3No != null){
-						tag += ', '+item.cate3No;
-					}
-					if(item.cate4No != null){
-						tag += ', '+item.cate4No;
-					}
-					if(item.cate5No != null){
-						tag += ', '+item.cate5No;
-					}
-					tag += ');">\n';
-					if(item.cate1Nm != null){
-						tag += '		<span>'+item.cate1Nm+'</span>\n';
-					}
-					if(item.cate2Nm != null){
-						tag += '		<span>'+item.cate2Nm+'</span>\n';
-					}
-					if(item.cate3Nm != null){
-						tag += '		<span>'+item.cate3Nm+'</span>\n';
-					}
-					if(item.cate4Nm != null){
-						tag += '		<span>'+item.cate4Nm+'</span>\n';
-					}
-					if(item.cate5Nm != null){
-						tag += '		<span>'+item.cate5Nm+'</span>\n';
-					}
-					tag +='	</a>\n';
-					tag +='</li>\n';
-				});
-				tag += '</ul>\n';
-
-				$("#keyupCateArea").find(".sch_category").append(tag);
-			}else{
-				$("#keyupCateArea").find(".sch_category").html('');
-			}
+			// if(result.cateList != null && result.cateList.length > 0){
+			// 	$("#keyupCateArea").find(".sch_category").html('');
+			// 	let tag = '';
+			// 	tag += '<h3>카테고리</h3>\n';
+			// 	tag += '<ul>\n';
+			// 	$.each(result.cateList, function (idx, item){
+			// 		tag +='<li>\n';
+			// 		tag +='	<a href="javascript:void(0);" onclick="cfnGoToGoodsList(0,\'G032_101\' ';
+			// 		if(item.cate1No != null){
+			// 			tag += ', '+item.cate1No;
+			// 		}
+			// 		if(item.cate2No != null){
+			// 			tag += ', '+item.cate2No;
+			// 		}
+			// 		if(item.cate3No != null){
+			// 			tag += ', '+item.cate3No;
+			// 		}
+			// 		if(item.cate4No != null){
+			// 			tag += ', '+item.cate4No;
+			// 		}
+			// 		if(item.cate5No != null){
+			// 			tag += ', '+item.cate5No;
+			// 		}
+			// 		tag += ');">\n';
+			// 		if(item.cate1Nm != null){
+			// 			tag += '		<span>'+item.cate1Nm+'</span>\n';
+			// 		}
+			// 		if(item.cate2Nm != null){
+			// 			tag += '		<span>'+item.cate2Nm+'</span>\n';
+			// 		}
+			// 		if(item.cate3Nm != null){
+			// 			tag += '		<span>'+item.cate3Nm+'</span>\n';
+			// 		}
+			// 		if(item.cate4Nm != null){
+			// 			tag += '		<span>'+item.cate4Nm+'</span>\n';
+			// 		}
+			// 		if(item.cate5Nm != null){
+			// 			tag += '		<span>'+item.cate5Nm+'</span>\n';
+			// 		}
+			// 		tag +='	</a>\n';
+			// 		tag +='</li>\n';
+			// 	});
+			// 	tag += '</ul>\n';
+			//
+			// 	$("#keyupCateArea").find(".sch_category").append(tag);
+			// }else{
+			// 	$("#keyupCateArea").find(".sch_category").html('');
+			// }
 		}
 	}
 
@@ -681,22 +294,11 @@
 	var fnOnkeyupKeyword = function (obj){
 		var searchValue = $(obj).val();
 		if(searchValue.length > 0){
-			$("#defaultArea").hide();
-			$("#popularArea").hide();
-			$("#keyupArea").show();
-			$("#keyupCateArea").show();
-			$("#deleteKeyword").show();
-			$("#noDataArea").hide();
-			$("#recommandArea").hide();
 			fnGetAutoSearch();
 		}else{
-			$("#defaultArea").show();
-			$("#popularArea").show();
-			$("#keyupArea").hide();
-			$("#keyupCateArea").hide();
-			$("#deleteKeyword").hide();
-			$("#noDataArea").hide();
-			$("#recommandArea").hide();
+			$('.sch_result .default_box').show();
+			$('.sch_result .searching_box').hide();
+			$('.sch_result .empty_box').hide();
 		}
 	}
 
@@ -725,6 +327,71 @@
 		gagajf.setCookie('st24ck_today_keyword',keyword, -1);
 	}
 
+	// 인기검색어 조회
+	var fnTrendKeywordList = function (){
+		$("#noDataRelatedKeyword").html('');
+		var html = '';
+		$.getJSON('/display/search/trend/keyword/list', function (result){
+			if(result.trendList.length > 0){
+				$.each(result.trendList, function (idx, item){
+					html += '<a href="javascript:void(0);" onclick="fnSearchKeyword(\''+item.keyword+'\');"><span>#</span>'+item.keyword+'</a>';
+				});
+			}
+			$("#noDataRelatedKeyword").append(html);
+		});
+	}
+
+	// 검색어 연관 상품 추천
+	var fnRecommendItemList = function (keyword){
+		if(gagajf.isNull(keyword)){
+			keyword = "";
+		}
+		var data = {keyword : keyword};
+		var html = '';
+
+		$.getJSON('/display/recommend/item/list', data, function (result){
+			$("#recommendItemArea").html('');
+			if(result.length > 0){
+				$.each(result, function (idx, item){
+					html += '<div class="swiper-slide">\n';
+					html += '	<div class="item_prod">\n';
+					html += '		<div class="item_state">\n';
+					html += '			<button type="button" class="itemLike">관심상품 추가</button>\n';
+					html += '			<a href="'+item.product.itemUrl+'" class="itemLink">\n';
+					html += '				<div class="itemPic">\n';
+					html += '					<img class="vLHTC pd_img" src="'+item.product.itemImage+'" alt="">\n';
+					html += '				</div>\n';
+					html += '				<p class="itemBrand">'+item.product.brandName+'</p>\n';
+					html += '				<div class="itemName">'+item.product.itemName+'</div>\n';
+					html += '				<p class="itemPrice">\n';
+					if(item.product.salePrice < item.product.originalPrice) {
+						html += '			<span class="itemPrice_original">'+ item.product.originalPrice.addComma() +'</span>\n';
+					}
+					html += item.product.salePrice.addComma() ;
+					if(item.product.salePrice < item.product.originalPrice) {
+						html += '			<span class="itemPercent">' + Math.round((item.product.originalPrice - item.product.salePrice) / (item.product.originalPrice * 1.0) * 100) + '%</span>\n';
+					}
+					html += '				</p>\n';
+					html += '			</a>\n';
+					html += '		</div>\n';
+					html += '	</div>\n';
+					html += '</div>\n';
+				});
+			}
+			$("#recommendItemArea").append(html);
+
+			var swiperschProduct4 = new Swiper('.swiper-container.recommand_slide', {
+				slidesPerView: 2.2,
+				spaceBetween: 8,
+				autoplay: {
+					delay: 4000,
+				},
+				freeMode: true,
+				//centeredSlides: true,
+			});
+		});
+	}
+
 	/*]]>*/
 </script>
 

src/main/webapp/WEB-INF/views/mob/display/SearchLayerMob.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="ko"
-	xmlns:th="http://www.thymeleaf.org">
+	  xmlns:th="http://www.thymeleaf.org">
 <!--
  *******************************************************************************
  * @source  : SearchLayerMob.html
@@ -34,7 +34,7 @@
 					</form>
 				</div>
 
-				<div class="inner" id="defaultArea">
+				<div class="inner default_box" id="defaultArea">
 					<div class="filter-list">
 						<div class="f_left">
 							<h3>최근 검색어</h3>
@@ -57,117 +57,15 @@
 					<div class="related_keyword" th:if="${brandGroupNo==null}">
 						<div class="sub_category">
 							<div class="cate_wrap" id="popularKeyArea">
-		<!--						<a href="javascript:;" class="on">전체</a>-->
+								<!--						<a href="javascript:;" class="on">전체</a>-->
 							</div>
 						</div>
 					</div>
 				</div>
 				<!-- //1.통합검색 default -->
 
-				<!-- 2.통합검색 default_최근검색어 있음 -->
-		<!--		<div class="inner">-->
-		<!--			<div class="sch_title">-->
-		<!--				<input type="text" class="form_control" placeholder="NBA 겨울 클리어런스+봄 프리뷰!">-->
-		<!--				&lt;!&ndash; <button class="btn_x">X</button> &ndash;&gt;-->
-		<!--				<button type="button" class="btn_sch"><img src="/images/mo/ico_btn_search.png" alt=""></button>-->
-		<!--			</div>-->
-		<!--			<div class="filter-list">-->
-		<!--				<div class="f_left">-->
-		<!--					<h3>최근 검색어</h3>-->
-		<!--				</div>-->
-		<!--				<div class="f_right">-->
-		<!--					<button class="allxBtn"><span>전체삭제</span></button>-->
-		<!--				</div>-->
-		<!--			</div>-->
-		<!--			<div class="search-list">-->
-		<!--				<ul>-->
-		<!--					<li>-->
-		<!--						<a href="javascript:void(0);">-->
-		<!--							<p>01슬랙스</p>-->
-		<!--						</a>-->
-		<!--						<button type="button" class="xBtn"><span>삭제</span></button>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="javascript:void(0);">-->
-		<!--							<p>02특가세일</p>-->
-		<!--						</a>-->
-		<!--						<button type="button" class="xBtn"><span>삭제</span></button>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="javascript:void(0);">-->
-		<!--							<p>03모이몰른 티셔츠</p>-->
-		<!--						</a>-->
-		<!--						<button type="button" class="xBtn"><span>삭제</span></button>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="javascript:void(0);">-->
-		<!--							<p>04모이몰른 티셔츠</p>-->
-		<!--						</a>-->
-		<!--						<button type="button" class="xBtn"><span>삭제</span></button>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="javascript:void(0);">-->
-		<!--							<p>05모이몰른 티셔츠</p>-->
-		<!--						</a>-->
-		<!--						<button type="button" class="xBtn"><span>삭제</span></button>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="javascript:void(0);">-->
-		<!--							<p>06모이몰른 티셔츠</p>-->
-		<!--						</a>-->
-		<!--						<button type="button" class="xBtn"><span>삭제</span></button>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="javascript:void(0);">-->
-		<!--							<p>07모이몰른 티셔츠</p>-->
-		<!--						</a>-->
-		<!--						<button type="button" class="xBtn"><span>삭제</span></button>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="javascript:void(0);">-->
-		<!--							<p>08모이몰른 티셔츠</p>-->
-		<!--						</a>-->
-		<!--						<button type="button" class="xBtn"><span>삭제</span></button>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="javascript:void(0);">-->
-		<!--							<p>09모이몰른 티셔츠</p>-->
-		<!--						</a>-->
-		<!--						<button type="button" class="xBtn"><span>삭제</span></button>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="javascript:void(0);">-->
-		<!--							<p>10모이몰른 티셔츠</p>-->
-		<!--						</a>-->
-		<!--						<button type="button" class="xBtn"><span>삭제</span></button>-->
-		<!--					</li>-->
-		<!--				</ul>-->
-		<!--				<p class="nodata_txt">최근 검색어가 없습니다.</p>-->
-		<!--			</div>-->
-		<!--			<h3 class="hot-key">STYLE24에서 검색되고 있어요</h3>-->
-		<!--			<div class="related_keyword">-->
-		<!--				<div class="sub_category">-->
-		<!--					<div class="cate_wrap">-->
-		<!--						<a href="javascript:;" class="on">전체</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 티셔츠/셔츠</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 니트/가디건/베스트</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 원피스/스커트</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 팬츠/데님/레깅스</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 가죽/모피</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 여성 잡화</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 언더웨어</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 세트</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 니트/가디건/베스트</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 원피스/스커트</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 가죽/모피</a>-->
-		<!--						<a href="javascript:;"><span>#</span> 여성 잡화</a>-->
-		<!--					</div>-->
-		<!--				</div>-->
-		<!--			</div>-->
-		<!--		</div>-->
-				<!-- //2.통합검색 default_최근검색어 있음 -->
 				<!-- 3.지금 많이 보고 있어요 상품. -->
-				<div class="inner" id="popularArea">
+				<div class="inner default_box" id="popularArea">
 					<div class="now_view">
 						<div class="store_product">
 							<div class="allresult-tit">
@@ -198,180 +96,39 @@
 				<!-- //3.지금 많이 보고 있어요 상품. -->
 
 				<!-- 4.검색어 타이핑 -->
-				<div class="inner" id="keyupArea" th:if="${brandGroupNo==null}">
-		<!--			<div class="sch_title">-->
-		<!--				<input type="text" class="form_control" value="티비제이 제기장 스웨터" placeholder="NBA 겨울 클리어런스+봄 프리뷰!">-->
-		<!--				<button class="btn_x"><span>검색어 지우기</span></button>-->
-		<!--				<button class="btn_sch"><img src="/images/mo/ico_btn_search.png" alt=""></button>-->
-		<!--			</div>-->
+				<div class="inner searching_box" id="keyupArea" style="display:none;" th:if="${brandGroupNo==null}">
 					<div class="filter-list store-list">
-		<!--				<div class="f_left">-->
-		<!--					<h3>티비제이 공식 스토어</h3>-->
-		<!--				</div>-->
-		<!--				<div class="f_right">-->
-		<!--					<a href="#none">바로가기</a>-->
-		<!--				</div>-->
 					</div>
 					<div class="relative-list">
-		<!--				<ul>-->
-		<!--					<li>-->
-		<!--						<a href="#">-->
-		<!--							<p><span>티비제이</span></p>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="#">-->
-		<!--							<p><span>티비제이</span> 기모청바지</p>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="#">-->
-		<!--							<p>TBJ 겨울 팬츠</p>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="#">-->
-		<!--							<p><span>제기장 스웨터</span></p>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="#">-->
-		<!--							<p><span>티비제이</span> 드라마 연예인 스웨터</p>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="#">-->
-		<!--							<p>가을겨울 긴팔 롱 <span>스웨터</span></p>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="#">-->
-		<!--							<p><span>스웨터</span></p>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="#">-->
-		<!--							<p>롱 <span>스웨터</span></p>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="#">-->
-		<!--							<p><span>티비제이</span> 여성 <span>스웨터</span></p>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="#">-->
-		<!--							<p>가을겨울 긴팔 롱 <span>스웨터</span></p>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--				</ul>-->
-		<!--				<p class="nodata_txt">&lsquo;<span>스웨터 제기장</span>&rsquo; 에 맞는 상품을 찾지 못했습니다.<br>검색어를 변경해 보세요.</p>-->
 					</div>
 				</div>
-				<div class="inner" id="keyupCateArea" th:if="${brandGroupNo==null}">
+				<div class="inner searching_box" id="keyupCateArea" style="display:none;" th:if="${brandGroupNo==null}">
 					<div class="sch_category">
-		<!--				<h3>카테고리</h3>-->
-		<!--				<ul>-->
-		<!--					<li>-->
-		<!--						<a href="">-->
-		<!--							<span>여성</span>-->
-		<!--							<span>티셔츠/셔츠</span>-->
-		<!--							<span><em>긴팔셔츠</em></span>-->
-		<!--							<span>스트라이프 퍼프 스트라이프 퍼프</span>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="">-->
-		<!--							<span>여성</span>-->
-		<!--							<span><em>니트/가디건/베스트</em></span>-->
-		<!--							<span>가디건</span>-->
-		<!--							<span>롱가디건</span>-->
-		<!--						</a>-->
-		<!--					</li>-->
-		<!--					<li>-->
-		<!--						<a href="">-->
-		<!--							<span><em>여성</em></span>-->
-		<!--							<span>자켓/점퍼/코트</span>-->
-		<!--							<span>코트</span>-->
-		<!--							<span>롱코트</span>-->
-		<!--						</a>-->
-		<!--					</li>-->
-							<!-- <li>
-		                        <p>여성 > <span>니트/가디건/베스트</span> > 가디건 > 롱가디건</p>
-		                    </li>
-		                    <li>
-		                        <p><span>여성</span> > 자켓/점퍼/코트 > 코트 > 롱코트</p>
-		                    </li> -->
-		<!--				</ul>-->
 					</div>
 				</div>
 				<!-- //4.검색어 타이핑 -->
 
 				<!-- 3.검색결과 없을때 -->
-				<div class="inner" id="noDataArea">
-		<!--			<div class="sch_title">-->
-		<!--				<input type="text" class="form_control" placeholder="NBA 겨울 클리어런스+봄 프리뷰!">-->
-		<!--				&lt;!&ndash; <button class="btn_x">X</button> &ndash;&gt;-->
-		<!--				<button class="btn_sch"><img src="/images/mo/ico_btn_search.png" alt=""></button>-->
-		<!--			</div>-->
+				<div class="inner empty_box" id="noDataArea" style="display:none;">
 					<div class="relative-list nodata"> <!-- 검색결과 없을 시 nodata 클래스 추가 -->
 						<p class="nodata_txt">&lsquo;<span id="noDataKeyword"></span>&rsquo; 에 맞는 상품을 찾지 못했습니다.<br>검색어를 변경해 보세요.</p>
 					</div>
 					<h3 class="hot-key">STYLE24에서 검색되고 있어요</h3>
 					<div class="related_keyword">
 						<div class="sub_category">
-							<div class="cate_wrap">
-								<a href="javascript:;" class="on">전체</a>
-								<a href="javascript:;"><span>#</span> 티셔츠/셔츠</a>
-								<a href="javascript:;"><span>#</span> 니트/가디건/베스트</a>
-								<a href="javascript:;"><span>#</span> 원피스/스커트</a>
-								<a href="javascript:;"><span>#</span> 팬츠/데님/레깅스</a>
-								<a href="javascript:;"><span>#</span> 가죽/모피</a>
-								<a href="javascript:;"><span>#</span> 여성 잡화</a>
-								<a href="javascript:;"><span>#</span> 언더웨어</a>
-								<a href="javascript:;"><span>#</span> 세트</a>
-								<a href="javascript:;"><span>#</span> 니트/가디건/베스트</a>
-								<a href="javascript:;"><span>#</span> 원피스/스커트</a>
-								<a href="javascript:;"><span>#</span> 가죽/모피</a>
-								<a href="javascript:;"><span>#</span> 여성 잡화</a>
+							<div class="cate_wrap" id="noDataRelatedKeyword">
+
 							</div>
 						</div>
 					</div>
 				</div>
-				<div class="inner" id="recommandArea">
+				<div class="inner empty_box" id="recommandArea" style="display:none;">
 					<div class="recommand_product">
 						<div class="store_product">
 							<div class="swiper-container recommand_slide">
 								<h3>이런 상품은 어떤가요?</h3>
 								<div class="swiper-wrapper" id="recommendItemArea">
-<!--									<div class="swiper-slide">-->
-<!--										<div class="item_prod">-->
-<!--											<div class="item_state">-->
-<!--												<button type="button" class="itemLike">관심상품 추가</button>-->
-<!--												<a href="#none" class="itemLink">-->
-<!--													<div class="itemPic">-->
-<!--														<img class="vLHTC pd_img" src="/images/mo/thumb/br_main03.png" alt="">-->
-<!--													</div>-->
-<!--													<p class="itemBrand">BRAND NAME</p>-->
-<!--													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>-->
-<!--													<p class="itemPrice">-->
-<!--														<span class="itemPrice_original">89,000</span>-->
-<!--														80,100-->
-<!--														<span class="itemPercent">10%</span>-->
-<!--													</p>-->
-<!--													<div class="itemcolorchip">-->
-<!--														<span class="chip_color35" value="ABM">BEIGE</span>-->
-<!--														<span class="chip_color54" value="BDS">BLACK</span>-->
-<!--														<span class="chip_color40" value="YBR">WHITE</span>-->
-<!--													</div>-->
-<!--													<p class="itemBadge">-->
-<!--														<span class="badge13">베스트 </span>-->
-<!--													</p>-->
-<!--													<div class="itemComment">#주문 폭주 상품</div>-->
-<!--												</a>-->
-<!--											</div>-->
-<!--										</div>-->
-<!--									</div>-->
+
 								</div>
 							</div>
 						</div>
@@ -458,15 +215,18 @@
 	// 검색어 찾기 결과
 	var fnAutoCompleteList = function (result){
 		if(result.autoKeywords.length==0 && gagajf.isNull(result.brand.brandGroupNo) && result.cateList.length == 0 && gagajf.isNull(result.goodsList)){
-			$("#keyupArea").hide();
-			$("#keyupCateArea").hide();
-			// $('.empty_box .nodata').find('#noDataKeyword').text("'"+$("#searchMainForm").find('input[name=keyword]').val()+"'");
+			$('.sch_result .default_box').hide();
+			$('.sch_result .searching_box').hide();
+			$('.sch_result .empty_box').show();
 			$("#noDataArea").find('#noDataKeyword').text($("#searchMainForm").find('input[name=keyword]').val());
-			$("#noDataArea").show();
-			$("#recommandArea").show();
 			// 검색어 연관 상품 추천
 			fnRecommendItemList($("#searchMainForm").find('input[name=keyword]').val());
+			// 인기검색어
+			fnTrendKeywordList();
 		}else{
+			$('.sch_result .default_box').hide();
+			$('.sch_result .searching_box').show();
+			$('.sch_result .empty_box').hide();
 			// 자동완성 키워드
 			if(result.autoKeywords != null && result.autoKeywords.length > 0){
 				$("#keyupArea").find(".relative-list").html('');
@@ -555,22 +315,11 @@
 	var fnOnkeyupKeyword = function (obj){
 		var searchValue = $(obj).val();
 		if(searchValue.length > 0){
-			$("#defaultArea").hide();
-			$("#popularArea").hide();
-			$("#keyupArea").show();
-			$("#keyupCateArea").show();
-			$("#deleteKeyword").show();
-			$("#noDataArea").hide();
-			$("#recommandArea").hide();
 			fnGetAutoSearch();
 		}else{
-			$("#defaultArea").show();
-			$("#popularArea").show();
-			$("#keyupArea").hide();
-			$("#keyupCateArea").hide();
-			$("#deleteKeyword").hide();
-			$("#noDataArea").hide();
-			$("#recommandArea").hide();
+			$('.sch_result .default_box').show();
+			$('.sch_result .searching_box').hide();
+			$('.sch_result .empty_box').hide();
 		}
 	}
 
@@ -590,6 +339,8 @@
 				}
 				$("#popularKeyArea").append(tag);
 			});
+		}else{
+			$("#popularKeyArea").html('');
 		}
 
 		$("#keyupArea").hide();
@@ -619,13 +370,27 @@
 		}
 	});
 
+	// 인기검색어 조회
+	var fnTrendKeywordList = function (){
+		$("#noDataRelatedKeyword").html('');
+		var html = '';
+		$.getJSON('/display/search/trend/keyword/list', function (result){
+			if(result.trendList.length > 0){
+				$.each(result.trendList, function (idx, item){
+					html += '<a href="javascript:void(0);" onclick="fnSearchKeyword(\''+item.keyword+'\');"><span>#</span>'+item.keyword+'</a>';
+				});
+			}
+			$("#noDataRelatedKeyword").append(html);
+		});
+	}
+
 	// 실시간 상품 새로고침
 	var fnRealtimeGoodsList = function (){
 		$("#itemViewArea").html('');
 		var html = '';
 
 		$.getJSON('/display/realtime/goods/list', function (result){
-			console.log(result);
+			// console.log(result);
 			if(result.length > 0){
 				$.each(result, function (idx, item){
 					html += '<div class="swiper-slide">\n';

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

@@ -51,65 +51,23 @@
 			<div class="realtime_blk">
 				<h3>지금 고객님들이 많이 보고 있어요</h3>
 				<div class="modify_timer">
-					<button type="button" onclick="fnRealtimeGoodsList();"><span><em class="time">17:30</em> 기준</span></button>
+					<button type="button" onclick="fnRealtimeGoodsList();"><span><em class="time" th:text="${#calendars.format(#calendars.createNow(), 'HH:mm')}">17:30</em> 기준</span></button>
 				</div>
 				<div class="realtime_wrap">
-					<div class="itemsGrp">
-						<div class="item_prod">
-							<div class="item_state">
-								<a href="#none" class="itemLink">
-									<div class="itemPic">
-										<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
-									</div>
-									<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
-									<div class="viewCount"><span>508</span>명 보는중</div>
-								</a>
-							</div>
-						</div>
-						<div class="item_prod">
-							<div class="item_state">
-								<a href="#none" class="itemLink">
-									<div class="itemPic">
-										<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
-									</div>
-									<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
-									<div class="viewCount"><span>508</span>명 보는중</div>
-								</a>
-							</div>
-						</div>
-						<div class="item_prod">
-							<div class="item_state">
-								<a href="#none" class="itemLink">
-									<div class="itemPic">
-										<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
-									</div>
-									<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
-									<div class="viewCount"><span>508</span>명 보는중</div>
-								</a>
-							</div>
-						</div>
-						<div class="item_prod">
-							<div class="item_state">
-								<a href="#none" class="itemLink">
-									<div class="itemPic">
-										<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
-									</div>
-									<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
-									<div class="viewCount"><span>508</span>명 보는중</div>
-								</a>
-							</div>
-						</div>
-						<div class="item_prod">
-							<div class="item_state">
-								<a href="#none" class="itemLink">
-									<div class="itemPic">
-										<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
-									</div>
-									<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
-									<div class="viewCount"><span>508</span>명 보는중</div>
-								</a>
+					<div class="itemsGrp" id="itemViewArea">
+						<th:block th:each="item, status : ${realtimeGoodsList}">
+							<div class="item_prod">
+								<div class="item_state">
+									<a th:href="${item.itemUrl}" class="itemLink">
+										<div class="itemPic">
+											<img alt="" class="vLHTC pd_img" th:src="${item.imageUrl}">
+										</div>
+										<div class="itemName" th:text="${item.itemName}"></div>
+										<div class="viewCount"><span th:text="${item.count < 10 ? '10명 미만' : item.count + '명 보는중'}"></span></div>
+									</a>
+								</div>
 							</div>
-						</div>
+						</th:block>
 					</div>
 				</div>
 			</div>
@@ -118,42 +76,14 @@
 		<!-- 검색결과 입력 후 -->
 		<div class="searching_box" style="display:none;">
 			<div class="autokeyword_blk">
-<!--				<ul>-->
-<!--					<li><a href=""><em>가</em>을컬리수</a></li>-->
-<!--					<li><a href=""><em>가</em>드상하</a></li>-->
-<!--					<li><a href=""><em>가</em>죽자켓</a></li>-->
-<!--					<li><a href=""><em>가</em>죽밸트</a></li>-->
-<!--					<li><a href=""><em>가</em>운</a></li>-->
-<!--					<li><a href=""><em>가</em>을</a></li>-->
-<!--					<li><a href=""><em>가</em>디건</a></li>-->
-<!--					<li><a href=""><em>가</em>디건형니트</a></li>-->
-<!--					<li><a href=""><em>가</em>드밴드레깅스</a></li>-->
-<!--					<li><a href=""><em>가</em>을잠옷</a></li>-->
-<!--				</ul>-->
+
 			</div>
 
 			<div class="pd_list relate" id="relateGoodsDiv">
 				<h3>관련상품</h3>
 				<div class="realtime_wrap">
 					<div class="itemsGrp">
-<!--						<div class="item_prod">-->
-<!--							<div class="item_state">-->
-<!--								<a href="#none" class="itemLink">-->
-<!--									<div class="itemPic">-->
-<!--										<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg">-->
-<!--									</div>-->
-<!--									<p class="itemBrand">BRAND NAME1</p>-->
-<!--									<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>-->
-<!--									&lt;!&ndash; cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. &ndash;&gt;-->
-<!--									<p class="itemPrice cols">-->
-<!--										<span class="itemPrice_original">89,000</span>-->
-<!--										80,100-->
-<!--										<span class="itemPercent">10%</span>-->
-<!--									</p>-->
-<!--									&lt;!&ndash; //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. &ndash;&gt;-->
-<!--								</a>-->
-<!--							</div>-->
-<!--						</div>-->
+
 					</div>
 				</div>
 			</div>
@@ -171,97 +101,8 @@
 			</div>
 			<div class="pd_list recommend">
 				<h3>이런 상품은 어떤가요?</h3>
-				<div class="itemsGrp">
-					<div class="item_prod">
-						<div class="item_state">
-							<a href="#none" class="itemLink">
-								<div class="itemPic">
-									<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg">
-								</div>
-								<p class="itemBrand">BRAND NAME1</p>
-								<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-								<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-								<p class="itemPrice cols">
-									<span class="itemPrice_original">89,000</span>
-									80,100
-									<span class="itemPercent">10%</span>
-								</p>
-								<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-							</a>
-						</div>
-					</div>
-					<div class="item_prod">
-						<div class="item_state">
-							<a href="#none" class="itemLink">
-								<div class="itemPic">
-									<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg">
-								</div>
-								<p class="itemBrand">BRAND NAME1</p>
-								<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-								<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-								<p class="itemPrice cols">
-									<span class="itemPrice_original">89,000</span>
-									80,100
-									<span class="itemPercent">10%</span>
-								</p>
-								<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-							</a>
-						</div>
-					</div>
-					<div class="item_prod">
-						<div class="item_state">
-							<a href="#none" class="itemLink">
-								<div class="itemPic">
-									<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg">
-								</div>
-								<p class="itemBrand">BRAND NAME1</p>
-								<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-								<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-								<p class="itemPrice cols">
-									<span class="itemPrice_original">89,000</span>
-									80,100
-									<span class="itemPercent">10%</span>
-								</p>
-								<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-							</a>
-						</div>
-					</div>
-					<div class="item_prod">
-						<div class="item_state">
-							<a href="#none" class="itemLink">
-								<div class="itemPic">
-									<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg">
-								</div>
-								<p class="itemBrand">BRAND NAME1</p>
-								<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-								<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-								<p class="itemPrice cols">
-									<span class="itemPrice_original">89,000</span>
-									80,100
-									<span class="itemPercent">10%</span>
-								</p>
-								<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-							</a>
-						</div>
-					</div>
-					<div class="item_prod">
-						<div class="item_state">
-							<a href="#none" class="itemLink">
-								<div class="itemPic">
-									<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg">
-								</div>
-								<p class="itemBrand">BRAND NAME1</p>
-								<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-								<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-								<p class="itemPrice cols">
-									<span class="itemPrice_original">89,000</span>
-									80,100
-									<span class="itemPercent">10%</span>
-								</p>
-								<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-							</a>
-						</div>
-					</div>
+				<div class="itemsGrp" id="recommendItemArea">
+
 				</div>
 			</div>
 		</div>
@@ -325,8 +166,6 @@
 	});
 
 	$(document).ready( function() {
-		console.log('xxxx brandNo::'+[[${brandGroupNo}]]);
-
 		$("#brand_layer_search").addClass('active');
 
 		//통합검색 - 검색어 입력 시
@@ -340,11 +179,13 @@
 
 	// 검색어 찾기 결과
 	var fnAutoCompleteList = function (result){
-		if(result.autoKeywords.length==0 && gagajf.isNull(result.brand.brandGroupNo) && result.cateList.length == 0 && gagajf.isNull(result.goodsList)){
+		if(result.autoKeywords.length==0 && result.cateList.length == 0 && gagajf.isNull(result.goodsList)){
 			$('.common_search .area_result .default_box').hide();
 			$('.common_search .area_result .searching_box').hide();
 			$('.common_search .area_result .empty_box').show();
 			$('.empty_box .nodata').find('#noDataKeyword').text("'"+$("#brandSearchMainForm").find('input[name=keyword]').val()+"'");
+			// 검색어 연관 상품 추천
+			fnRecommendItemList($("#brandSearchMainForm").find('input[name=keyword]').val());
 		}else{
 			$('.common_search .area_result .default_box').hide();
 			$('.common_search .area_result .searching_box').show();
@@ -485,6 +326,72 @@
 		gagajf.setCookie('st24ck_today_keyword',keyword, -1);
 	}
 
+	// 실시간 상품 새로고침
+	var fnRealtimeGoodsList = function (){
+		$("#itemViewArea").html('');
+		var html = '';
+		$.getJSON('/display/realtime/goods/list', function (result){
+			if(result.length > 0){
+				$.each(result, function (idx, item){
+					html += '<div class="item_prod">\n';
+					html += '	<div class="item_state">\n';
+					html += '		<a href="'+item.itemUrl+'" class="itemLink">\n';
+					html += '			<div class="itemPic">\n';
+					html += '				<img alt="" class="vLHTC pd_img" src="'+item.imageUrl+'">\n';
+					html += '			</div>\n';
+					html += '			<div class="itemName">'+item.itemName+'</div>\n';
+					if(item.count < 10){
+						html += '			<div class="viewCount"><span>10명</span> 미만</div>\n';
+					}else{
+						html += '			<div class="viewCount"><span>'+item.count.addComma()+'</span>명 보는중</div>\n';
+					}
+					html += '		</a>\n';
+					html += '	</div>\n';
+					html += '</div>\n';
+				});
+			}
+			$("#itemViewArea").append(html);
+		});
+	}
+
+	// 검색어 연관 상품 추천
+	var fnRecommendItemList = function (keyword){
+		if(gagajf.isNull(keyword)){
+			keyword = "";
+		}
+		var data = {keyword : keyword};
+		var html = '';
+
+		$.getJSON('/display/recommend/item/list', data, function (result){
+			$("#recommendItemArea").html('');
+			if(result.length > 0){
+				$.each(result, function (idx, item){
+					html += '<div class="item_prod">\n';
+					html += '	<div class="item_state">\n';
+					html += '		<a href="'+item.product.itemUrl+'" class="itemLink">\n';
+					html += '			<div class="itemPic">\n';
+					html += '				<img alt="" class="vLHTC pd_img" src="'+item.product.itemImage+'">\n';
+					html += '			</div>\n';
+					html += '			<p class="itemBrand">'+item.product.brandName+'</p>\n';
+					html += '			<div class="itemName">'+item.product.itemName+'</div>\n';
+					html += '			<p class="itemPrice cols">\n';
+					if(item.product.salePrice < item.product.originalPrice) {
+						html += '			<span class="itemPrice_original">'+ item.product.originalPrice.addComma() +'</span>\n';
+					}
+					html += item.product.salePrice.addComma() ;
+					if(item.product.salePrice < item.product.originalPrice) {
+						html += '			<span class="itemPercent">' + Math.round((item.product.originalPrice - item.product.salePrice) / (item.product.originalPrice * 1.0) * 100) + '%</span>\n';
+					}
+					html += '			</p>\n';
+					html += '		</a>\n';
+					html += '	</div>\n';
+					html += '</div>\n';
+				});
+			}
+			$("#recommendItemArea").append(html);
+		});
+	}
+
 	/*]]>*/
 </script>
 </html>