style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="web/common/layout/CallcenterLayoutWeb">
<!--
 *******************************************************************************
 * @source  : FaqFormWeb.html
 * @desc    : FAQ Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.01.29   gagamel     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
	<div id="container" class="container cs"> 
		<div class="breadcrumb"> 
			<ul>
				<li class="bread_home"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
				<li class="bread_2depth"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_FAQ);">고객센터</a></li>
				<li class="bread_3depth">FAQ</li>
			</ul> 
		</div>
		<div class="wrap">
			<div class="content faq">
				<div class="cont_body">
					<!-- CONT-BODY -->
					<div class="lnb" id="callcenterLnb">
					</div>
					<div class="cont">
						<div>
							<div class="sec_head">
								<h3>FAQ</h3>
							</div>
							<div class="sec_body">
								<div class="quick_list mb50" th:if="${faqTop10List != null and !faqTop10List.empty}">
									<h4 class="subH3_eng mb20 c_black">자주 묻는 질문 TOP 10</h4>
									<ul>
										<li th:each="faqInfo, status : ${faqTop10List}">
											<a href="#quick_pop" rel="modal:open" th:text="${faqInfo.question}" th:attr="data-answer=${faqInfo.faqTypeNm + '|'+ #strings.replace(#strings.replace(faqInfo.answer,'&amplt;','<'),'&ampgt;','>')}" onclick="fnOpenFaqDetailPopup(this);">제품을 받았는데<br>반품을 하고 싶습니다.</a>
										</li>
									</ul>
								</div>
								<div class="search_wrap mb60" id="scrollInit">
									<h4 class="subH3_eng mb20 c_black">FAQ SEARCH</h4>
									<div class="faq_search t_c">
										<form id="faqForm" name="faqForm" class="search_box" action="#" th:action="@{'/callcenter/faq/list'}" th:method="post" onsubmit="fnSearchFaq(); return false;">
											<input type="hidden" name="faqType"/>
											<input type="hidden" name="pageNo" value ="1"/>
											<input type="hidden" name="pageSize" value ="10"/>
											<fieldset>
												<legend>FAQ 검색</legend>
												<input type="text" name="searchTxt" placeholder="검색어를 입력해 주세요" class="search_input" title="검색어 입력" maxlength="50"/>
												<button class="btn_search" onclick="fnSearchFaq(); return false;">찾기</button>
											</fieldset>
										</form>
										<p class="t_info">
											찾으시는 문의 내용이 없으시면 '1:1 문의'를 이용해 주세요.
										</p>
									</div>
								</div>
								<div class="fold_nav">
									<ul id="ulFaqType">
										<li><a href="#none;" onclick="fnGetList(this, '', true);" class="on">전체</a></li>
										<li th:if="${faqTypeList != null and !faqTypeList.empty}" th:each="oneData, status : ${faqTypeList}">
											<a href="javascript:void(0);" th:onclick='fnGetList(this, [[${oneData.cd}]], true);' th:text="${oneData.cdNm}">상품문의</a>
										</li>
									</ul>
								</div>
								<div class="ui_row" id="divFaq"> <!-- 데이터 없을시 클래스 nodata 추가 -->
									<div class="foldGroup case1 mt50">
										<ul id="ulFaq">
										</ul>
									</div>
								</div>
								<div class="ui_foot">
									<div class="ui_row">
										<ul class="pageNav" id="pageNav">
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- // CONT-BODY -->
				</div>
			</div>
		</div>
	</div>
	<!-- // container -->
	
	<div class="modal fade faq_pop" id="quick_pop" tabindex="-1" role="dialog" aria-labelledby="modalScrollLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<p id="faqTypeNm">[취소/반품/교환]</p>
					<h5 class="modal-title" id="faqQuestion">제품을 받았는데 반품을 하고 싶습니다.</h5>
				</div>
				<div class="modal-body">
					<span>A</span>
					<div class="pop_cont" id="faqAnswer">
						<span>답변 내용은 아래와 같습니다.</span>
						배송상태"상품준비중"은 당사 물류 센터 및 입점사에서 주문서 확인 후 상품 출고 작업중인 상태를 나타내며 <br>
						택배 출고 송장번호는 일괄 등록이 되므로 실제 상품이 출고된 시간과 상이할 수 있습니다. <br><br>
						고객님께 취소를 요청하신 시점이 이미 출고가 된 이후인 경우 <br>
						제품 반품 시 부과되는 배송료는 고객님께서 부담 해주셔야 합니다. <br><br>
						상품 수령 후 7일 이내 당사 고객센터(1544-5336) 또는 1:1 상담으로 접수해 주시면 처리가 가능합니다. <br>
						보내주신 상품은 반품 담당자의 검수 후 환불 처리되며, 상품 훼손/세탁/택 제거/외부 착용 시 반품 처리가 불가합니다. <br><br>
						더불어 상품 하자가 아닌 고객님의 단순 변심 및 착오 구매일 경우 반품 배송비는 고객님께서 부담해 주셔야 합니다. <br>
						(반품에 따라 무료배송 조건 불충족 시에는 왕복 배송료 부담) <br>
						반품이 불가한 경우는 다음과 같습니다. <br><br>
						- 고객의 부주의로 상품이 회손된 경우 <br>
						- 포장을 개봉하였거나 포장이 훼손되어 상품가치가 현저히 상실된 경우 <br>
						- 고객의 사용 또는 일부 소비에 의하여 상품의 가치가 현저히 감소한 경우
						배송상태"상품준비중"은 당사 물류 센터 및 입점사에서 주문서 확인 후 상품 출고 작업중인 상태를 나타내며 <br>
						택배 출고 송장번호는 일괄 등록이 되므로 실제 상품이 출고된 시간과 상이할 수 있습니다. <br><br>
						고객님께 취소를 요청하신 시점이 이미 출고가 된 이후인 경우 <br>
						제품 반품 시 부과되는 배송료는 고객님께서 부담 해주셔야 합니다. <br><br>
						상품 수령 후 7일 이내 당사 고객센터(1544-5336) 또는 1:1 상담으로 접수해 주시면 처리가 가능합니다. <br>
						보내주신 상품은 반품 담당자의 검수 후 환불 처리되며, 상품 훼손/세탁/택 제거/외부 착용 시 반품 처리가 불가합니다. <br><br>
						더불어 상품 하자가 아닌 고객님의 단순 변심 및 착오 구매일 경우 반품 배송비는 고객님께서 부담해 주셔야 합니다. <br>
						(반품에 따라 무료배송 조건 불충족 시에는 왕복 배송료 부담) <br>
						반품이 불가한 경우는 다음과 같습니다. <br><br>
					</div>
				</div>
			</div>
		</div>
	</div>

<script src="/ux/plugins/gaga/gaga.paging.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	$(document).ready(function() {
		// 고객센터 LNB 설정
		fnSetCallcenterLnb(1);
		
		fnGetList();
	});
	
	let fnGetList = function(obj, faqType, isCallTab) {
		if (typeof(obj) != 'undefined') {
			$li = $(obj).parent('li').parent('ul').find('li>a');
			$li.each(function(i) {
				$(this).removeClass('on');
			});
			$(obj).addClass('on');
		}
		
		if (!gagajf.isNull(faqType)) {
			$('#faqForm input[name=faqType]').val(faqType);
		} else {
			$('#faqForm input[name=faqType]').val('');
		}
		
		if (isCallTab) {
			$('#faqForm input[name=searchTxt]').val('');
		}
		
		// Initialize a pagination
		gagaPaging.init('faqForm', fnGetListCallback, 'pageNav', 10);

		// Load data
		gagaPaging.load(1);
	}
	
	String.prototype.unescapeHtml = function(){
		  return this.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"");
	};
	
	var idx = 1;
	var fnGetListCallback = function(result) {
		$('#ulFaq').html('');

		if (result.dataList != null && result.dataList.length > 0) {
			$.each(result.dataList, function(idx, item) {
				let tag = '<li>\n';
				tag += '	<div class="fold_head">\n';
				tag += '		<a href="javascript:void(0)" onclick="fnUpdateFaqReadCount(' + item.faqSq + ', this);">\n';
				tag += '			<div>\n';
				tag += '				<span class="fold_state">' + item.faqTypeNm + '</span>\n';
				tag += '				<div class="fold_tit">\n';
				tag += '					<span>' + item.question.unescapeHtml() + '</span>\n';
				tag += '				</div>\n';
				tag += '			</div>\n';
				tag += '		</a>\n';
				tag += '	</div>\n';
				tag += '	<div class="fold_cont" style="display: none;">\n';
				tag += '		<div class="fold_answer">\n';
				tag += '			<div>' + item.answer.replaceAll('&lt;','<').replaceAll('&gt;', '>').replaceAll('&quot;', '"').replaceAll('&amp;nbsp;', ' ') + '</div>\n';
				tag += '		</div>\n';
				tag += '	</div>\n';
				tag += '</li>\n';

				$('#ulFaq').append(tag);
			});
			$('#divFaq').removeClass('nodata');
			if(idx>1){
				// document.getElementById('scrollInit').scrollIntoView();
				// let sTop = document.getElementById("scrollInit").scrollHeight;
				var offset = $("#scrollInit").offset();
				$('html, body').animate({scrollTop : offset.top-100}, 300);
			}
			idx++;
		} else {
			let tag = '<li>내역이 없습니다.</li>\n';
			$('#ulFaq').append(tag);
			$('#divFaq').addClass('nodata');
		}
		// Create pagination
		gagaPaging.createPagination(result.paging.pageable);
	}
	
	let fnSearchFaq = function() {
		if (gagajf.isNull($('#faqForm input[name=searchTxt]').val())) {
			mcxDialog.alert('검색어를 입력해 주세요.');
			return;
		}
		
		$('#faqForm input[name=faqType]').val('');
		fnGetList($('#ulFaqType>li').eq(0).find('a'));
	}
	
	// FAQ상세팝업 오픈
	let fnOpenFaqDetailPopup = function(obj) {
		$('#faqQuestion').html($(obj).html());
		
		let answer = $(obj).data('answer');
		if (!gagajf.isNull(answer)) {
			$('#faqTypeNm').html('[' + answer.substring(0, answer.indexOf('|')) + ']');
			$('#faqAnswer').html('<span>답변 내용은 아래와 같습니다.</span>' + answer.substring(answer.indexOf('|') + 1).unescapeHtml().replace(/\n/g,'<br/>'));
		}
	}
	
	// FAQ 조회수 갱신
	let fnUpdateFaqReadCount = function(faqSq, obj) {
		if (!($(obj).parents('.fold_head').hasClass('on'))) {
			$.post('/callcenter/faq/readcount/update/' + faqSq
					, null
					, function() {
						// Do nothing
					}
					, 'json');
		}
	}
/*]]>*/
</script>

</th:block>

</body>
</html>