style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
							<!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  : OneToOneQnaRegisterFormWeb.html
 * @desc    : 1:1문의 등록 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.02.19   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">1:1문의</li>
			</ul> 
		</div>
		<div class="wrap">
			<div class="content contactUs_my">
				<div class="cont_body">
					<!-- CONT-BODY -->
					<div class="lnb" id="callcenterLnb">
					</div>
					<div class="cont">
						<div>
							<div class="sec_head">
								<h3>1:1 문의</h3>
							</div>
							<div class="sec_body">
								<div class="t_info blt_dot mb15 light">문의를 남겨 주시면 24시간 이내(토/일/공휴일 제외)에 답변 드릴 수 있도록 최선을 다 하겠습니다.</div>
								
								<form class="form_wrap" role="form" name="qnaForm" id="qnaForm" th:action="@{'/onetoone/qna/create'}" method="post">
									<div class="form_field">
										<label class="ui_col_2 input_label">문의 유형</label>
										<div class="ui_col_10 form_full">
											<div class="input_wrap">
												<select name="counselClsf" required="required" data-valid-name="문의유형">
													<option value="">유형을 선택해 주세요</option>
													<option th:if="${counselClsfList}" th:each="oneData, status : ${counselClsfList}" th:value="${oneData.cd}" th:text="${oneData.cdNm}"></option>
												</select>
											</div>
										</div>
									</div>
									<div class="form_field">
										<label class="ui_col_2 input_label">제목</label>
										<div class="ui_col_10 form_full">
											<div class="input_wrap">
												<span class="input_group_addon"><span class="ico"></span></span>
												<input type="text" class="form_control" placeholder="30자 내외로 작성해주세요" maxlength="30" name="questTitle" required="required" data-valid-name="제목"/>
											</div> 
											<!-- 숫자, 특수문자, 불완성형 한글 제외하여 입력 -->
										</div>
									</div>
									<div class="form_field">
										<label class="ui_col_2 input_label">내용</label>
										<div class="ui_col_10 form_full">
											<div class="input_wrap">
												<textarea class="doc_contactus" name="questContent" cols="30" rows="10" style="resize: none;" required="required" data-valid-name="내용"></textarea>
												<p class="txt_cnt">
													<span id="contactus_cnt" class="contactus_cnt">(<em class="c_primary">0</em>/500자)</span>
												</p>
											</div> 
											<!-- 특수문자 : \ / : < >  사용 불가 > 입력 시, “특수문자 \ / : < > 는 사용할 수 없습니다.” 얼럿 호출 스크립트 입력 불가능 -->
										</div>
									</div>
									<div class="form_field">
										<label class="ui_col_2 input_label">첨부이미지</label>
										<div class="ui_col_10 form_full">
											<div class="input_wrap">
												<!-- 이미지첨부 -->
												<div class="form_field">
													<div class="imgUpload">
														<label for="fileAdd" class="fileAdd">업로드</label>
														<input type="file" id="fileAdd" name="file1"/>
														<input type="hidden" name="fileAddOrgFileNm"/>
														<input type="hidden" name="fileAddSysFileNm"/>
													</div>
													<div class="imgUpload">
														<label for="fileAdd" class="fileAdd">업로드</label>
														<input type="file" id="file2" name="file2"/>
														<input type="hidden" name="file2OrgFileNm"/>
														<input type="hidden" name="file2SysFileNm"/>
													</div>
												</div>
												<!-- //이미지첨부 -->
												<div class="info_addfile">
													<ul>
														<li>- 사진은 최대 20MB 이하의 JPG,PNG,GIF <span>파일2장까지 첨부 가능</span>합니다.</li>
														<li>- 파일명에 한글은 사용불가입니다.</li>
														<li>- 첨부된 사진은 문의 외의 목적으로는 사용되지 않습니다.</li>
													</ul>
												</div>
											</div> 
										</div>
									</div>
									<div class="form_field">
										<label class="ui_col_2 input_label">휴대폰</label>
										<div class="ui_col_10 cellphone">
											<div class="input_wrap">
												<input type="text" class="form_control" name="cellPhnno" maxlength="13" placeholder="휴대폰 번호를 010-1234-5678 형식으로 입력해주세요." required="required" data-valid-name="휴대폰번호"/> <!-- 잘못 입력시 클래스명 : err 추가  -->
												<!-- 알림 신청 체크박스(선택 _ 기본값) -->
												<div class="ck_box">
													<input type="hidden" name="smsReqYn"/>
													<input type="checkbox" name="chkSmsReqYn" value="Y" checked="checked"/>
													<label for="chkSmsReqYn"><span>알림 신청</span></label>
												</div>
											</div> 
											<div class="help_block" style="display: none;" id="divCellPhnno">
												<p class="t_err">휴대폰 번호를 형식에 맞게 정확히 입력해주세요.</p>
											</div>
										</div>
									</div>
								</form>
							</div>
							<div class="sec_foot t_c">
								<button type="button" class="btn btn_default btn_md" onclick="history.back(-1);"><span>취소</span></button>
								<button type="button" class="btn btn_dark btn_md" id="btnSaveQna"><span>확인</span></button>
							</div>
						</div>
					</div>
					<!-- // CONT-BODY -->
				</div>
			</div>
		</div>
	</div>
	<!-- // container -->
	
<script th:inline="javascript">
/*<![CDATA[*/
	$(document).ready(function() {
		// 고객센터 LNB 설정
		fnSetCallcenterLnb(2);
	});
	
	// text_area
	$('.doc_contactus').keyup(function (e) {
		var content = $(this).val();
		$('#contactus_cnt').html("(<em class='c_primary'>" + content.length + "</em>/500자)");
		if (content.length > 500) {
			alert("최대 500자까지 입력 가능합니다.");
			$(this).val(content.substring(0, 500));
			$('#contactus_cnt').html("(<em class='c_primary'>500</em>/500자)");
		}
	});
	
	// 파일첨부 선택 시
	$('#fileAdd').on('change', function() { fnChooseFile(this); });
	$('#file2').on('change', function() { fnChooseFile(this); });
	
	var fnChooseFile = function(obj) {
		// multiple 속성이 있으면 files에는 다수의 객체가 할당됨
		var file = obj.files[0];
		
		if (!gagajf.isNull(file.name)) {
			var extension = "\.(jpg|jpeg|png)$";
			if (!(new RegExp(extension, "i")).test(file.name)) {
				mcxDialog.alert('이미지는 [jpg, jpeg, png] 파일만 가능합니다.');
				return false;
			}
		}
		
		if (!gagajf.isNull(file.size) && Number(file.size) > 20 * 1000000) {
			mcxDialog.alert('이미지는 최대 20MB 이하 파일만 가능합니다.');
			return false;
		}

		// 파일 업로드
		gagajf.ajaxFileUpload('/common/file/upload?subDir=/counsel'
				, file
				, function(result) {
					// 업로드한 파일명 설정
					$('input[name=' + obj.name + 'OrgFileNm]').val(result.oldFileName);
					$('input[name=' + obj.name + 'SysFileNm]').val(result.newFileName);
				}
		);
	}
	
	// 저장
	$('#btnSaveQna').on('click', function() {
		// 입력 값 체크
		if (!gagajf.validation('#qnaForm'))
			return false;

		if (!gagajf.isNull($('#qnaForm input[name=cellPhnno]').val())) {
			let regexp = /^(01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4})$/;
			if (!regexp.test($('#qnaForm input[name=cellPhnno]').val())) {
				$('#qnaForm input[name=cellPhnno]').addClass('err');
				$('#divCellPhnno').show();
				$('#qnaForm input[name=cellPhnno]').select();
				$('#qnaForm input[name=cellPhnno]').focus();
				return false;
			}
		}
		
		$('#qnaForm input[name=cellPhnno]').removeClass('err');
		$('#divCellPhnno').hide();
		
		$('#qnaForm input[name=smsReqYn]').val($('#qnaForm input:checkbox[name=chkSmsReqYn]').is(":checked") ? 'Y' : 'N');

		mcxDialog.confirm("저장하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				gagajf.ajaxFormSubmit($('#qnaForm').prop('action')
						, $('#qnaForm')
						, function() {
							cfnGoToPage(_PAGE_ONETOONE_QNA);
						}
				);
			}
		});
	});
/*]]>*/
</script>

</th:block>

</body>
</html>