패밀리사이트 가져오기 추가

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

@@ -0,0 +1,43 @@
+package com.style24.front.biz.web;
+
+import java.util.Collection;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.ResponseBody;
+
+import com.style24.front.biz.service.TsfRendererService;
+import com.style24.front.support.controller.TsfBaseController;
+import com.style24.persistence.domain.CommonCode;
+
+import lombok.extern.slf4j.Slf4j;
+
+/**
+ * 콤보박스, 체크박스, 라디오버튼 구성 시 필요한 Renderer Controller
+ *
+ * @author renderer
+ * @since 2021. 3. 18
+ */
+@Controller
+@RequestMapping("/renderer")
+@Slf4j
+public class TsfRendererController extends TsfBaseController {
+
+	@Autowired
+	private TsfRendererService rendererService;
+
+	/**
+	 * 패밀리사이트 목록
+	 * @return
+	 * @author gagamel
+	 * @since 2021. 3. 18
+	 */
+	@GetMapping("/familysite/list")
+	@ResponseBody
+	public Collection<CommonCode> getFamilySiteList() {
+		return rendererService.getAvailCommonCodeList("G029");
+	}
+
+}

src/main/webapp/WEB-INF/views/web/common/fragments/FooterWeb.html

@@ -12,23 +12,23 @@
 				<em class="sr-only">STYLE24</em>
 			</h2>
 			<ul class="support_txt">
-				<li><a href=""><span>이용약관</span></a></li>
-				<li><a href=""><strong>개인정보취급방침</strong></a></li>
-				<li><a href="" target="_blank" title="새창 열림"><span>제휴/입점문의</span></a></li>
-				<li><a href="" target="_blank" title="새창 열림"><span data-font="lato">SN<em>@</em>PP</span><i class="ico ico_blank ml5"></i></a></li>
+				<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_USE_TERMS);"><span>이용약관</span></a></li>
+				<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_PRIVACY_POLICY);"><strong>개인정보취급방침</strong></a></li>
+				<li><a href="#partnersPop" rel="modal:open" return false;><span>제휴/입점문의</span></a></li>
+				<li><a href="http://zine.istyle24.com" target="_blank" title="새창 열림"><span data-font="lato">SN<em>@</em>PP</span><i class="ico ico_blank ml5"></i></a></li>
 			</ul>
 			<div class="family_link">
 				<h2><a href="" class="btn ui_toggle" data-font="lato">FAMILY SITE<i class="ico ico_ft_arrow_b"></i></a></h2>
 				<dl id="family_site" class="">
 					<dt class="no_tit"><span class="blind">그룹없음</span></dt>
-					<dd><a class="clickable" href="" target="_blank" title="새창 열림">한세예스24홀딩스</a></dd>
-					<dd><a class="clickable" href="" target="_blank" title="새창 열림">한세실업</a></dd>
-					<dd><a class="clickable" href="" target="_blank" title="새창 열림">한세드림</a></dd>
-					<dd><a class="clickable" href="" target="_blank" title="새창 열림">컬리수</a></dd>
-					<dd><a class="clickable" href="" target="_blank" title="새창 열림">예스24</a></dd>
-					<dd><a class="clickable" href="" target="_blank" title="새창 열림">YES24 Vietnam</a></dd>
-					<dd><a class="clickable" href="" target="_blank" title="새창 열림">YES24 Indonesia</a></dd>
-					<dd><a class="clickable" href="" target="_blank" title="새창 열림">동아출판</a></dd>
+					<dd><a class="clickable" href="http://www.hansaeyes24.com" target="_blank" title="새창 열림">한세예스24홀딩스</a></dd>
+					<dd><a class="clickable" href="https://www.hansae.com" target="_blank" title="새창 열림">한세실업</a></dd>
+					<dd><a class="clickable" href="http://www.hansaedreams.co.kr" target="_blank" title="새창 열림">한세드림</a></dd>
+					<dd><a class="clickable" href="https://www.curlysue.co.kr" target="_blank" title="새창 열림">컬리수</a></dd>
+					<dd><a class="clickable" href="http://www.yes24.com/main/default.aspx" target="_blank" title="새창 열림">예스24</a></dd>
+					<dd><a class="clickable" href="https://www.yes24.vn" target="_blank" title="새창 열림">YES24 Vietnam</a></dd>
+					<dd><a class="clickable" href="http://www.yes24.co.id" target="_blank" title="새창 열림">YES24 Indonesia</a></dd>
+					<dd><a class="clickable" href="http://www.bookdonga.com/main.donga" target="_blank" title="새창 열림">동아출판</a></dd>
 					<!-- 그룹 구분 할 경우,
 					<dt><span class="txt">그룹1</span></dt>
 					<dd><a class="clickable" href="" target="_blank" title="새창 열림">그룹1의사이트맵1</a></dd>
@@ -40,7 +40,7 @@
 			<div class="connect">
 				<div class="cs_box">
 					<p>
-						<span class="mb20"><a class="clickable" href="#" th:href="@{'/callcenter/faq/form'}" target="_blank" title="새창 열림">고객센터<i class="ico ico_ft_arrow_r ml5"></i></a></span><br>
+						<span class="mb20"><a class="clickable" href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_FAQ);">고객센터<i class="ico ico_ft_arrow_r ml5"></i></a></span><br>
 						<span class="time mb20">평일 <span data-font="lato"> 09:00 ~ 18:00</span> <br> (토/일공휴일 휴무)</span><br>
 						<span class="tel mb10" data-font="lato">1544-5336</span><br>
 						<span class="fax mb10" data-font="lato">F.02-780-0435</span><br>
@@ -48,11 +48,13 @@
 					</p>
 				</div>
 				<div class="sns_box clear">
-					<a href="https://www.facebook.com/" class="fbook clickable fl mr5" target="_blank" title="새창 열림"><span class="sr-only">STYLE24 페이스북</span></a>
-					<a href="https://www.instagram.com/" class="insta clickable fl" target="_blank" title="새창 열림"><span class="sr-only">STYLE24 인스타그램</span></a>
+					<a href="https://www.facebook.com/istyle24" class="fbook clickable fl mr5" target="_blank" title="새창 열림"><span class="sr-only">STYLE24 페이스북</span></a>
+					<a href="https://instagram.com/istyle24.official?igshid=o3nzm9tydg9n" class="insta clickable fl" target="_blank" title="새창 열림"><span class="sr-only">STYLE24 인스타그램</span></a>
 				</div>
 				<div class="isms_box mt30">
-					<p>정보보호관리체계<br>ISMS 인증획득</p>
+					<a href="http://www.yes24.com/notice/pop_isms.html" onclick="window.open(this.href, '_blank','width=500,height=708,toolbars=no,scrollbars=no'); return false;">
+						<p>정보보호관리체계<br>ISMS 인증획득</p>
+					</a>
 				</div>
 			</div>
 		</div>
@@ -67,7 +69,7 @@
 								<span>주소: 서울시 영등포구 은행로 <em data-font="lato">11</em>, <em data-font="lato">8</em>층 (여의도동, 일신빌딩)</span> <br>
 								<span>사업자등록번호: <em data-font="lato">116-27-32499</em></span>
 								<span>통신판매업 신고번호: 제<rm data-font="lato">2020</rm>-서울영등포-<rm data-font="lato">1432</rm></span>
-								<span><a class="clickable" href="" target="_blank" title="새창 열림">사업자정보확인</a></span><br>
+								<span><a class="clickable" href="http://www.ftc.go.kr/bizCommPop.do?wrkr_no=2298137000" target="_blank" title="새창 열림">사업자정보확인</a></span><br>
 								<span>개인정보보호책임자 : 김명인</span>
 								<span>호스팅 서비스사업자 : 아이스타일이십사(주)</span>
 							</p>
@@ -83,7 +85,7 @@
 							<p>
 								고객님은 안전거래를 위해 현금 결제 시 저희 쇼핑몰이 가입한<br>
 								소비자피해보상보험 서비스를 이용하실 수 있습니다.
-								<a class="clickable" href="" target="_blank" title="새창 열림">가입정보확인</a>
+								<a class="clickable" href="https://mall.sgic.co.kr/csh/iutf/sh/shop/CSHINFO004VM0.mvc?tm=3&q_sk=2&q_sv=2298137000" target="_blank" title="새창 열림">가입정보확인</a>
 							</p>
 						</div>
 					</dd>
@@ -99,19 +101,850 @@
 			<a href="javascript:appBroswer('http://m.ssg.com','mo');" class="btn_def">모바일 버전으로 가기</a>
 		</div>
 	</div>
-	<!-- head end -->
+	
+	<!-- 제휴및입점팝업 -->
+	<div class="modal fade partners_pop" id="partnersPop" tabindex="-1" role="dialog" aria-labelledby="modalScrollLabel" aria-hidden="true">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title">제휴 및 입점문의</h5>
+				</div>
+				<div class="modal-body">
+					<p>
+						스타일이십사㈜ 제휴를 통해 함께 성장하고자 하는 기업 및 개인께서는 아래<br>
+						담당자에게 메일을 주세요. 작성된 내용은 각 담당부서에서 검토 후 정성껏 <br>
+						회신 드리겠습니다.
+					</p>
+					<section class="order_row">
+						<div class="tbl point_tbl track_tbl type2">
+							<table>
+								<colgroup>
+									<col width="140px">
+									<col width="100px">
+									<col width="240px">
+								</colgroup>   
+								<thead>
+									<tr>
+										<th>구분</th>
+										<th>담당자</th>
+										<th>연락처</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td>입점 문의</td>
+										<td>석혜민</td>
+										<td>hmsuk@yes24.com</td>
+									</tr>
+									<tr>
+										<td>제휴 문의</td>
+										<td>정석헌</td>
+										<td>blacktan01@yes24.com</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+					</section>
+				</div>
+			</div>
+		</div>
+	</div>
+	
+	<!-- 퀵메뉴 -->
+	<div id="quick_menu">
+		<ul class="quick_btn">
+			<li>
+				<button type="button" id="" class="quick_btn01" data-tab="quick01">
+					<img src="/images/pc/ico_qk_history.png" alt="최근 본 상품"/>
+					<span class="count">30</span>
+				</button>
+			</li>
+			<li>
+				<button type="button" id="" class="quick_btn02" data-tab="quick02">
+					<img src="/images/pc/ico_qk_cart.png" alt="쇼핑백"/>
+					<span class="count">2</span>
+				</button>
+			</li>
+			<li>
+				<button type="button" id="" class="quick_btn03" data-tab="quick03">
+					<img src="/images/pc/ico_qk_like.png" alt="위시리스트"/>
+					<span class="count">100</span>
+				</button>
+			</li>
+			<li>
+				<button type="button" id="" class="quick_btn04" data-tab="quick04">
+					<img src="/images/pc/ico_qk_coupon.png" alt="쿠폰"/>
+					<span class="count">100</span>
+				</button>
+			</li>
+			<li>
+				<button type="button" id="" class="quick_btn05" data-tab="quick05">
+					<img src="/images/pc/ico_qk_cate.png" alt="카테고리"/>
+				</button>
+			</li>
+			<li>
+				<button type="button" id="top_btn">
+					<img src="/images/pc/ico_qk_top.png" alt="상단으로가기 버튼"/>
+				</button>
+			</li>
+		</ul>
+		<div class="tabs_con">
+			<button type="button" class="quick_close_btn"><span class="sr-only">퀵메뉴 닫기</span></button>
+			<div class="history quick_con quick01"> <!-- 퀵메뉴_최근 본 상품 -->
+				<div class="quick_head">
+					<h3>최근 본 상품</h3>
+				</div>
+				<div class="quick_body"> <!-- 최근 본 상품 없을 시 nodata 클래스 추가 -->
+					<div class="product_count"><span class='c_primary'>30</span>개의 상품</div>
+					<div class="itemsGrp">
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class=" itemLink">
+									<div class="itemPic">
+										<img class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg" alt="이미지설명"/>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class=" itemLink">
+									<div class="itemPic">
+										<img class="vLHTC pd_img" src="/images/pc/thumb/prod2.jpg" alt="이미지설명"/>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class=" itemLink">
+									<div class="itemPic">
+										<img class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg" alt="이미지설명"/>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class=" itemLink">
+									<div class="itemPic">
+										<img class="vLHTC pd_img" src="/images/pc/thumb/prod2.jpg" alt="이미지설명"/>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class=" itemLink">
+									<div class="itemPic">
+										<img class="vLHTC pd_img" src="/images/pc/thumb/prod2.jpg" alt="이미지설명"/>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class=" itemLink">
+									<div class="itemPic">
+										<img class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg" alt="이미지설명"/>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class=" itemLink">
+									<div class="itemPic">
+										<img class="vLHTC pd_img" src="/images/pc/thumb/prod2.jpg" alt="이미지설명"/>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class=" itemLink">
+									<div class="itemPic">
+										<img class="vLHTC pd_img" src="/images/pc/thumb/prod2.jpg" alt="이미지설명"/>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class=" itemLink">
+									<div class="itemPic">
+										<img class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg" alt="이미지설명"/>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="no_item">
+							최근 본 상품이 없습니다.
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="shopingbag quick_con quick02"> <!-- 퀵메뉴_쇼핑백 -->
+				<div class="quick_head">
+					<h3><a href="">쇼핑백</a></h3>
+				</div>
+				<div class="quick_body nodata"> <!-- 쇼핑백 상품 없을 시 nodata 클래스 추가 -->
+					<div class="product_count"><span class='c_primary'>30</span>개의 상품</div>
+					<div class="itemsGrp existence">
+						<div class="item_prod">
+							<button type="button" class="delete_btn"><span class="sr-only">해당상품 삭제</span></button>
+							<div class="item_state">
+								<div class="shape"><span>곧 품절돼요!</span></div>
+								<a href="javascript:;" class="itemLink">
+									<div class="itemPic">
+										<img alt="BLACK-a" class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg"/>
+									</div>
+									<p class="itemBrand">BRAND NAME</p>
+									<div class="itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>
+									<p class="itemSize">
+										<span>105</span> / <span>블랙</span> / <span>1</span>
+									</p>
+									<p class="itemPrice">80,100
+										<span class="itemPrice_original">89,000</span>
+									</p>
+									<div class="itemComment">다다익선 할인 적용</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<button type="button" class="delete_btn"><span class="sr-only">해당상품 삭제</span></button>
+							<div class="item_state">
+								<div class="shape"><span>곧 품절돼요!</span></div>
+								<a href="javascript:;" class="itemLink">
+									<div class="itemPic">
+										<img alt="BLACK-a" class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg"/>
+									</div>
+									<p class="itemBrand">BRAND NAME</p>
+									<div class="itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>
+									<p class="itemSize">
+										<span>105</span> / <span>블랙</span> / <span>1</span>
+									</p>
+									<p class="itemPrice">80,100
+										<span class="itemPrice_original">89,000</span>
+									</p>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<button type="button" class="delete_btn"><span class="sr-only">해당상품 삭제</span></button>
+							<div class="item_state">
+								<a href="javascript:;" class="itemLink">
+									<div class="itemPic">
+										<img alt="BLACK-a" class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg"/>
+									</div>
+									<p class="itemBrand">BRAND NAME</p>
+									<div class="itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>
+									<p class="itemSize">
+										<span>105</span> / <span>블랙</span> / <span>1</span>
+									</p>
+									<p class="itemPrice">80,100
+										<span class="itemPrice_original">89,000</span>
+									</p>
+									<div class="itemComment">다다익선 할인 적용</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<button type="button" class="delete_btn"><span class="sr-only">해당상품 삭제</span></button>
+							<div class="item_state">
+								<a href="javascript:;" class="itemLink">
+									<div class="itemPic">
+										<img alt="BLACK-a" class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg"/>
+									</div>
+									<p class="itemBrand">BRAND NAME</p>
+									<div class="itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>
+									<p class="itemSize">
+										<span>105</span> / <span>블랙</span> / <span>1</span>
+									</p>
+									<p class="itemPrice">80,100
+										<span class="itemPrice_original">89,000</span>
+									</p>
+								</a>
+							</div>
+						</div>
+					</div>
+					<!-- 쇼핑백 없을 시 -->
+					<div class="itemsGrp empty">
+						<p class="desc">쇼핑백에 담긴 상품이 없습니다.</p>
+						<span class="subH3">지금 많이 보고있어요</span>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="javascript:;" class="itemLink">
+									<div class="itemPic">
+										<img alt="BLACK-a" class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg"/>
+									</div>
+									<p class="itemBrand">BRAND NAME</p>
+									<div class="itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>
+									<p class="itemPrice">80,100
+										<span class="itemPrice_original">89,000</span>
+									</p>
+									<!-- 미사용 <button type="button" class="btn btn_sm cart_btn"><span>쇼핑백 담기</span></button> -->
+									<div class="viewCount"><span>508</span>명 보는중</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="javascript:;" class="itemLink">
+									<div class="itemPic">
+										<img alt="BLACK-a" class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg"/>
+									</div>
+									<p class="itemBrand">BRAND NAME</p>
+									<div class="itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>
+									<p class="itemPrice">80,100
+										<span class="itemPrice_original">89,000</span>
+									</p>
+									<!-- 미사용 <button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button> -->
+									<div class="viewCount"><span>58</span>명 보는중</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="javascript:;" class="itemLink">
+									<div class="itemPic">
+										<img alt="BLACK-a" class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg"/>
+									</div>
+									<p class="itemBrand">BRAND NAME</p>
+									<div class="itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>
+									<p class="itemPrice">80,100
+										<span class="itemPrice_original">89,000</span>
+									</p>
+									<!-- 미사용 <button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button> -->
+									<div class="viewCount"><span>9</span>명 보는중</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="javascript:;" class="itemLink">
+									<div class="itemPic">
+										<img alt="BLACK-a" class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg"/>
+									</div>
+									<p class="itemBrand">BRAND NAME</p>
+									<div class="itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>
+									<p class="itemPrice">80,100
+										<span class="itemPrice_original">89,000</span>
+									</p>
+									<!-- 미사용 <button type="button" class="btn btn_sm cart_btn"><span>쇼핑백 담기</span></button> -->
+									<div class="viewCount"><span>452</span>명 보는중</div>
+								</a>
+							</div>
+						</div>
+					</div>
+					<!-- //쇼핑백 없을 시 -->
+					<button type="button" class="btn btn_default purchase_btn"><span>전체 상품 구매하기</span></button>
+				</div>
+			</div>
+			<div class="wishlist quick_con quick03"> <!-- 퀵메뉴_위시리스트 -->
+				<div class="quick_head"> 
+					<h3><a href="">위시리스트</a></h3>
+				</div>
+				<div class="quick_body"> <!-- 최근 본 상품 없을 시 nodata 클래스 추가 --> <!-- 비로그인 시 need_login 클래스 추가 -->
+					<div class="product_count"><span class='c_primary'>50</span>개의 상품</div>
+					<div class="itemsGrp">
+						<div class="item_prod">
+							<div class="item_state">
+								<div class="shape"><span>곧 품절돼요!</span></div>
+								<a href="#none" class=" itemLink">
+									<div class="itemPic">
+										<img class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg" alt="이미지설명"/>
+										<button type="button" class="itemLike active">관심상품 추가</button>
+									</div>
+								</a>
+								<div class="hover_con">
+									<button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button>
+								</div>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<div class="shape"><span>곧 품절돼요!</span></div>
+								<a href="#none" class=" itemLink">
+									<div class="itemPic">
+										<img class="vLHTC pd_img" src="/images/pc/thumb/prod2.jpg" alt="이미지설명"/>
+										<button type="button" class="itemLike active">관심상품 추가</button>
+									</div>
+								</a>
+								<div class="hover_con">
+									<button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button>
+								</div>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class=" itemLink">
+									<div class="itemPic">
+										<img class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg" alt="이미지설명"/>
+										<button type="button" class="itemLike active">관심상품 추가</button>
+									</div>
+								</a>
+								<div class="hover_con">
+									<button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button>
+								</div>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class=" itemLink">
+									<div class="itemPic">
+										<img class="vLHTC pd_img" src="/images/pc/thumb/prod2.jpg" alt="이미지설명"/>
+										<button type="button" class="itemLike active">관심상품 추가</button>
+									</div>
+								</a>
+								<div class="hover_con">
+									<button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button>
+								</div>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class=" itemLink">
+									<div class="itemPic">
+										<img class="vLHTC pd_img" src="/images/pc/thumb/prod2.jpg" alt="이미지설명"/>
+										<button type="button" class="itemLike active">관심상품 추가</button>
+									</div>
+								</a>
+								<div class="hover_con">
+									<button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button>
+								</div>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class=" itemLink">
+									<div class="itemPic">
+										<img class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg" alt="이미지설명"/>
+										<button type="button" class="itemLike active">관심상품 추가</button>
+									</div>
+								</a>
+								<div class="hover_con">
+									<button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button>
+								</div>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class=" itemLink">
+									<div class="itemPic">
+										<img class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg" alt="이미지설명"/>
+										<button type="button" class="itemLike active">관심상품 추가</button>
+									</div>
+								</a>
+								<div class="hover_con">
+									<button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button>
+								</div>
+							</div>
+						</div>
+						<div class="no_item">
+							최근 본 상품이 없습니다.
+						</div>
+					</div>
+					<div class="login_con">
+						<div>
+							<p>로그인 후 이용 가능한 서비스입니다.</p>
+							<button type="button" class="btn btn_sm"><span>로그인</span></button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="coupon quick_con quick04"> <!-- 퀵메뉴_나의 쿠폰 -->
+				<div class="quick_head">
+					<h3><a href="">나의 쿠폰</a></h3>
+				</div>
+				<div class="quick_body"> <!-- 비로그인 시 need_login 클래스 추가 -->
+					<div class="coupon_tab">
+						<a href="#coupon_type01" id="" class="">발급 가능 쿠폰</a>
+						<a href="#coupon_type02" id="" class="">보유 쿠폰</a>
+					</div>
+					<div id="coupon_type01" class="coupon_area">
+						<div class="pop_cont">
+							<ul class="coupon_list">
+								<li>
+									<div class="coupon">
+										<div>
+											<p class="cp_name">
+												TBJ 시즌오프 20% 할인쿠폰
+											</p>
+											<p class="cp_cont">
+												<span><em>12,399,900</em>원</span>
+											</p>
+											<p class="cp_condition">
+												500,000원 이상 구매 시 최대 50,000원 할인
+												<span>1인 최대 90장</span>
+											</p>
+										</div>
+										<button type="button" class="btn btn_dark btn_block btn_coupon_down"><span>쿠폰받기</span></button>
+									</div>
+								</li>
+								<li>
+									<div class="coupon">
+										<div>
+											<p class="cp_name">
+												신규가입 40% 할인쿠폰
+											</p>
+											<p class="cp_cont">
+												<span><em>40%</em></span>
+											</p>
+											<p class="cp_condition">
+												500,000원 이상 구매 시 최대 50,000원 할인
+												<span>1인 최대 90장</span>
+											</p>
+										</div>
+										<button type="button" class="btn btn_dark btn_block btn_coupon_done" disabled=""><span>받기완료</span></button>
+									</div>
+								</li>
+								<li>
+									<div class="coupon">
+										<div>
+											<p class="cp_name">
+												TBJ 시즌오프 20% 할인쿠폰
+											</p>
+											<p class="cp_cont">
+												<span><em>12,399,900</em>원</span>
+											</p>
+											<p class="cp_condition">
+												500,000원 이상 구매 시 최대 50,000원 할인
+												<span>1인 최대 90장</span>
+											</p>
+										</div>
+										<button type="button" class="btn btn_dark btn_block btn_coupon_down"><span>쿠폰받기</span></button>
+									</div>
+								</li>
+								<li>
+									<div class="coupon">
+										<div>
+											<p class="cp_name">
+												신규가입 40% 할인쿠폰
+											</p>
+											<p class="cp_cont">
+												<span><em>40%</em></span>
+											</p>
+											<p class="cp_condition">
+												500,000원 이상 구매 시 최대 50,000원 할인
+												<span>1인 최대 90장</span>
+											</p>
+										</div>
+										<button type="button" class="btn btn_dark btn_block btn_coupon_done" disabled=""><span>받기완료</span></button>
+									</div>
+								</li>
+								<li>
+									<div class="coupon">
+										<div>
+											<p class="cp_name">
+												TBJ 시즌오프 20% 할인쿠폰
+											</p>
+											<p class="cp_cont">
+												<span><em>12,399,900</em>원</span>
+											</p>
+											<p class="cp_condition">
+												500,000원 이상 구매 시 최대 50,000원 할인
+												<span>1인 최대 90장</span>
+											</p>
+										</div>
+										<button type="button" class="btn btn_dark btn_block btn_coupon_down"><span>쿠폰받기</span></button>
+									</div>
+								</li>
+								<li>
+									<div class="coupon">
+										<div>
+											<p class="cp_name">
+												신규가입 40% 할인쿠폰
+											</p>
+											<p class="cp_cont">
+												<span><em>40%</em></span>
+											</p>
+											<p class="cp_condition">
+												500,000원 이상 구매 시 최대 50,000원 할인
+												<span>1인 최대 90장</span>
+											</p>
+										</div>
+										<button type="button" class="btn btn_dark btn_block btn_coupon_done" disabled=""><span>받기완료</span></button>
+									</div>
+								</li>
+							</ul>
+						</div>
+					</div>
+					<div id="coupon_type02" class="coupon_area">
+						<div class="coupon_list">
+							<ul class="clear">
+								<li>
+									<div class="cp_top">
+										<div class="cp_detail">
+											<p class="tit">신규 가입 40% 할인쿠폰</p>
+											<strong class="sale_t won_t"><span>12,399,900</span>원</strong>
+											<p class="cp_cont"><span>9,500,500</span>원 이상 구매시 최대 <span>5,000,000</span>원 할인</p>
+											<span class="cp_cnt"><span>999</span>장 보유</span>
+										</div>
+										<span class="cp_shape"></span>
+									</div>
+									<div class="cp_date">
+										<span>2020.01.01</span> ~ <span>2021.01.31</span>
+									</div>
+									<div class="cp_info">
+										<button type="button" class="coupon_pop_btn"><span>사용안내</span></button>
+									</div>
+								</li>
+								<li class="off">
+									<div class="cp_top">
+										<div class="cp_detail">
+											<p class="tit">신규 가입 40% 할인쿠폰</p>
+											<strong class="sale_t"><span>40</span>%</strong>
+											<p class="cp_cont"><span>9,500,500</span>원 이상 구매시 최대 <span>5,000,000</span>원 할인</p>
+											<span class="cp_cnt"><span>999</span>장 보유</span>
+										</div>
+										<span class="cp_shape"></span>
+									</div>
+									<div class="cp_date">
+										<span class="cp_off">사용완료</span>
+									</div>
+									<div class="cp_info">
+										<button type="button" class="coupon_pop_btn"><span>사용안내</span></button>
+									</div>
+								</li>
+							</ul>
+						</div>
+					</div>
+					<a href="" class="more_btn">더 보기</a>
+					<div class="login_con">
+						<div>
+							<p>로그인 후 이용 가능한 서비스입니다.</p>
+							<button type="button" class="btn btn_sm"><span>로그인</span></button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="category quick_con quick05"> <!-- 퀵메뉴_카테고리 -->
+				<div class="quick_head">
+					<h3>스타일24 카테고리</h3>
+				</div>
+				<div class="quick_body">
+					<ul class="quick_cate_wrap">
+						<li><a href="javascript:;"><span>홈</span></a></li>
+						<li class="has_children">
+							<a href="javascript:;"><span>여성</span></a>
+							<ul class="quick_depth">
+								<li><a href="javascript:;"><span>티셔츠/셔츠</span></a></li>
+								<li><a href="javascript:;"><span>니트/가디건/베스트</span></a></li>
+								<li><a href="javascript:;"><span>원피스/스커트</span></a></li>
+								<li><a href="javascript:;"><span>팬츠/레깅스</span></a></li>
+								<li><a href="javascript:;"><span>데님</span></a></li>
+								<li><a href="javascript:;"><span>자켓/점퍼/코트</span></a></li>
+								<li><a href="javascript:;"><span>트레이닝/스포츠</span></a></li>
+								<li><a href="javascript:;"><span>여성잡화</span></a></li>
+								<li><a href="javascript:;"><span>언더웨어</span></a></li>
+							</ul>   
+						</li>
+						<li class="has_children">
+							<a href="javascript:;"><span>남성</span></a>
+							<ul class="quick_depth">
+								<li><a href="javascript:;"><span>티셔츠/셔츠</span></a></li>
+								<li><a href="javascript:;"><span>니트/가디건/베스트</span></a></li>
+								<li><a href="javascript:;"><span>원피스/스커트</span></a></li>
+								<li><a href="javascript:;"><span>팬츠/레깅스</span></a></li>
+								<li><a href="javascript:;"><span>데님</span></a></li>
+								<li><a href="javascript:;"><span>자켓/점퍼/코트</span></a></li>
+								<li><a href="javascript:;"><span>트레이닝/스포츠</span></a></li>
+								<li><a href="javascript:;"><span>여성잡화</span></a></li>
+								<li><a href="javascript:;"><span>언더웨어</span></a></li>
+							</ul>  
+						</li>
+						<li class="has_children">
+							<a href="javascript:;"><span>유아동</span></a>
+							<ul class="quick_depth">
+								<li><a href="javascript:;"><span>티셔츠/셔츠</span></a></li>
+								<li><a href="javascript:;"><span>니트/가디건/베스트</span></a></li>
+								<li><a href="javascript:;"><span>원피스/스커트</span></a></li>
+								<li><a href="javascript:;"><span>팬츠/레깅스</span></a></li>
+								<li><a href="javascript:;"><span>데님</span></a></li>
+								<li><a href="javascript:;"><span>자켓/점퍼/코트</span></a></li>
+								<li><a href="javascript:;"><span>트레이닝/스포츠</span></a></li>
+								<li><a href="javascript:;"><span>여성잡화</span></a></li>
+								<li><a href="javascript:;"><span>언더웨어</span></a></li>
+							</ul> 
+						</li>
+						<li class="has_children">
+							<a href="javascript:;"><span>골프</span></a>
+							<ul class="quick_depth">
+								<li><a href="javascript:;"><span>티셔츠/셔츠</span></a></li>
+								<li><a href="javascript:;"><span>니트/가디건/베스트</span></a></li>
+								<li><a href="javascript:;"><span>원피스/스커트</span></a></li>
+								<li><a href="javascript:;"><span>팬츠/레깅스</span></a></li>
+								<li><a href="javascript:;"><span>데님</span></a></li>
+								<li><a href="javascript:;"><span>자켓/점퍼/코트</span></a></li>
+								<li><a href="javascript:;"><span>트레이닝/스포츠</span></a></li>
+								<li><a href="javascript:;"><span>여성잡화</span></a></li>
+								<li><a href="javascript:;"><span>언더웨어</span></a></li>
+							</ul>
+						</li>
+						<li class="has_children">
+							<a href="javascript:;"><span>라이프</span></a>
+							<ul class="quick_depth">
+								<li><a href="javascript:;"><span>티셔츠/셔츠</span></a></li>
+								<li><a href="javascript:;"><span>니트/가디건/베스트</span></a></li>
+								<li><a href="javascript:;"><span>원피스/스커트</span></a></li>
+								<li><a href="javascript:;"><span>팬츠/레깅스</span></a></li>
+								<li><a href="javascript:;"><span>데님</span></a></li>
+								<li><a href="javascript:;"><span>자켓/점퍼/코트</span></a></li>
+								<li><a href="javascript:;"><span>트레이닝/스포츠</span></a></li>
+								<li><a href="javascript:;"><span>여성잡화</span></a></li>
+								<li><a href="javascript:;"><span>언더웨어</span></a></li>
+							</ul>
+						</li>
+						<li><a href="javascript:;"><span>베스트</span></a></li>
+						<li><a href="javascript:;"><span>핫딜</span></a></li>
+						<li><a href="javascript:;"><span>기획전</span></a></li>
+						<li><a href="javascript:;"><span>총알배송</span></a></li>
+						<li class="has_children">
+							<a href="javascript:;"><span>아울렛</span></a>
+							<ul class="quick_depth">
+								<li><a href="javascript:;"><span>티셔츠/셔츠</span></a></li>
+								<li><a href="javascript:;"><span>니트/가디건/베스트</span></a></li>
+								<li><a href="javascript:;"><span>원피스/스커트</span></a></li>
+								<li><a href="javascript:;"><span>팬츠/레깅스</span></a></li>
+								<li><a href="javascript:;"><span>데님</span></a></li>
+								<li><a href="javascript:;"><span>자켓/점퍼/코트</span></a></li>
+								<li><a href="javascript:;"><span>트레이닝/스포츠</span></a></li>
+								<li><a href="javascript:;"><span>여성잡화</span></a></li>
+								<li><a href="javascript:;"><span>언더웨어</span></a></li>
+							</ul>
+						</li>
+						<li><a href="/"><span>룩북</span></a></li>
+						<li><a href="/"><span>이벤트/혜택</span></a></li>
+					</ul>
+					<div class="quick_cate_txt">
+						<a href="javascript:;">로그인</a>
+						<a href="javascript:;">회원가입</a>
+						<a href="javascript:;">마이페이지</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<!-- 퀵메뉴 -->
+	
+	<!-- 쿠폰 사용 내역 팝업 -->
+	<div class="modal coupon_popup" tabindex="-1" role="dialog" aria-labelledby="PopupBasicLabel" aria-hidden="true">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title">사용 조건</h5>
+				</div>
+				<div class="modal-body">
+					<section class="order_row">
+						<div class="coupon_condition">
+							<dl class="clear">
+								<dt>사용조건</dt>
+								<dd><span>9,999,999</span>원 구매 시 최대 <span>9,999,999</span>원 할인</dd>
+							</dl>
+							<dl class="clear">
+								<dt>대상조건</dt>
+								<dd>남성,여성,유아동 카테고리</dd>
+							</dl>
+						</div>
+					</section>
+				</div>
+			</div>
+		</div>
+	</div>
 
 <script th:inline="javascript">
 /*<![CDATA[*/
+	// 패밀리 사이트
+	let fnGetFamilySite = function() {
+		$.getJSON('/renderer/familysite/list'
+			, function(result, status) {
+				if (status == 'success') {
+					if (result.length > 0) {
+						$('#family_site').html('');
+						let tag = '<dt class="no_tit"><span class="blind">그룹없음</span></dt>';
+						
+						$.each(result, function (idx, item) {
+							if (!gagajf.isNull(item.cdNm)) {
+								tag += '<dd><a class="clickable" href="' + item.cdNm.substring(0, item.cdNm.indexOf('|')) + '" target="_blank" title="새창 열림">' + item.cdNm.substring(item.cdNm.indexOf('|') + 1) + '</a></dd>\n';
+							}
+						});
+						
+						$('#family_site').html(tag);
+					}
+				}
+		});
+	}
+		
 	/* familysite */
 	$(document).ready( function() {
+		fnGetFamilySite();
+		
+		// Family Site
 		$('.family_link').on('click','.btn',function(e){
 			e.preventDefault();
 			$(this).parents('.family_link').find('#family_site').slideToggle(100);
 			$(this).find('.ico.ico_ft_arrow_b').toggleClass('ico_ft_arrow_t');
 		});
+
+		//퀵메뉴
+		var tabAnchor = $('.quick_btn button'),
+			tabPanel = $('#quick_menu .quick_con');
+		
+		$(document).on('click','.quick_btn button:not(#top_btn)',function(e){
+			e.preventDefault();
+			$('body').addClass('lock');
+			$('#quick_menu').addClass('active');
+			tabAnchor.removeClass('active');
+			$(this).addClass('active');
+			var NewLink = $(this).attr('data-tab');
+			tabPanel.hide();
+			$('.' + NewLink).show();
+		});
+		
+		//퀵메뉴_쿠폰
+		var couponAnchor = $('.coupon_tab a'),
+			couponPanel = $('.coupon_area');
+
+		$(document).on('click','.coupon_tab a',function(e){
+			e.preventDefault();
+			couponAnchor.removeClass('active');
+			$(this).addClass('active');
+			var NewLink = $(this).attr('href');
+			
+			couponPanel.hide();
+			$(NewLink).show();
+			
+		});
+		
+		couponAnchor.eq(0).trigger('click');
+
+		//퀵메뉴 닫을 때
+		$(document).on('click','#quick_menu .quick_close_btn',function(e){
+			e.preventDefault();
+			$('body').removeClass('lock');
+			$('#quick_menu').removeClass('active');
+			//$('#quick_menu .quick_con').hide();
+		});
+
+		//퀵메뉴 카테고리 메뉴 클릭시
+		$(document).on('click','#quick_menu .category .quick_cate_wrap > li',function(e){
+			$(this).toggleClass('active');
+			$(this).find('> ul').slideToggle(300);
+			$(this).siblings('li').find('> ul').slideUp(300);
+			$(this).siblings('li').removeClass('active');
+		});
+
+		//퀵메뉴 탑버튼 클릭 시
+		$(document).on('click','#top_btn',function(e){
+			$('body,html').animate({scrollTop:0});
+		});
+
+		//퀵메뉴_쿠폰 사용안내 팝업
+		$(".coupon_pop_btn").click(function() {
+			$(".coupon_popup").modal("show");
+		});
 	});
-	/* //familysite  */
 /*]]>*/
 </script>