zxcxz2002
274 lines
12 KiB
Plaintext
274 lines
12 KiB
Plaintext
<%@ page contentType="text/html;charset=UTF-8" %>
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<jsp:include page="/WEB-INF/view/include/inc_home_head.jsp"/>
|
|
<jsp:include page="/WEB-INF/view/include/inc_head_script.jsp"/>
|
|
</head>
|
|
<body class="<c:if test="${not empty loginUser}">logined</c:if>">
|
|
|
|
<div id="vueApp">
|
|
<!-- wrap : s -->
|
|
<div class="wrap">
|
|
<!-- header : s -->
|
|
<jsp:include page="/WEB-INF/view/include/inc_home_body_header.jsp"/>
|
|
<!-- header : e -->
|
|
<div class="container">
|
|
<div id="contents">
|
|
<!-- 상세 : s -->
|
|
<div class="inner">
|
|
<jsp:include page="/WEB-INF/view/include/inc_home_body_step_menu.jsp"/>
|
|
<form method="post" @submit.prevent="onSubmit">
|
|
<div class="innerWrap">
|
|
<dl class="formList">
|
|
<dt>필수 입력(조직정보)</dt>
|
|
<dd class="error">
|
|
<div class="inputCountBox">
|
|
<input type="text" @blur="cafeNameCheck" v-model="cafeName" class="inpText" maxlength="30" placeholder="조직명 ex)케이티학원, 케이티회사, 케이티동호회">
|
|
<span class="count"><em class="cur">{{cafeName.length}}</em> / 30</span>
|
|
</div>
|
|
<span id="cafeNameCheckError" class="errorMsg"></span>
|
|
</dd>
|
|
|
|
<dd>
|
|
<ul class="inpField">
|
|
<li>
|
|
<div class="inputCountBox">
|
|
<textarea class="textarea" v-model="cafeIntro" maxlength="200" placeholder="조직소개(선택)"></textarea>
|
|
<span class="count"><em class="cur">{{cafeIntro.length}}</em> / 200</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<span class="selectBoxWrap">
|
|
<select class="selectBox" v-model="cafeType" placeholder="조직 구분 선택">
|
|
<option value="">조직 구분 선택</option>
|
|
<c:forEach var="x" items="${cafeType}">
|
|
<option value="${x.cdValue}">${x.cdName}</option>
|
|
</c:forEach>
|
|
</select>
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<span class="selectBoxWrap">
|
|
<select class="selectBox" v-model="cafeArea" placeholder="지역선택">
|
|
<option value="">지역선택</option>
|
|
<c:forEach var="x" items="${cafeArea}">
|
|
<option value="${x.cdValue}">${x.cdName}</option>
|
|
</c:forEach>
|
|
</select>
|
|
</span>
|
|
</li>
|
|
<li class="error"><!-- 인풋 입력이 에러일 경우 클래스 'error' 추가 -->
|
|
<div class="inputCountBox">
|
|
<input type="text" v-model="cafeUserName" class="inpText" maxlength="20" placeholder="사용자 이름">
|
|
<span class="count"><em class="cur">{{cafeUserName.length}}</em> / 20</span>
|
|
<span class="errorMsg">조직에서 사용할 사용자의 이름</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</dd>
|
|
</dl>
|
|
|
|
<dl class="formList">
|
|
<dt>
|
|
선택 입력(사용자 정보)
|
|
<p class="stit">조직 내에서 사용할 사용자에 대한 추가 정보를 입력해주세요</p>
|
|
</dt>
|
|
<dd>
|
|
<ul class="inpField">
|
|
<li>
|
|
<div class="tabShapeRadio">
|
|
<span class="inputRadio tabShape">
|
|
<input type="radio" value="M" name="radioMen" id="radioGirl" checked>
|
|
<label for="radioGirl">여자</label>
|
|
</span>
|
|
<span class="inputRadio tabShape">
|
|
<input type="radio" value="F" name="radioMen" id="radioBoy">
|
|
<label for="radioBoy">남자</label>
|
|
</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="boxHorizental">
|
|
<span>
|
|
<span class="selectBoxWrap">
|
|
<select id="year" class="selectBox">
|
|
<option value="">생년</option>
|
|
<%for(int i = java.time.LocalDate.now().getYear(); i >= 1900; i--) {%>
|
|
<option value="<%=i%>"><%=i%></option>
|
|
<%}%>
|
|
</select>
|
|
</span>
|
|
</span>
|
|
<span>
|
|
<span class="selectBoxWrap">
|
|
<select id="month" class="selectBox">
|
|
<option value="">월</option>
|
|
<%for(int i = 1; i <= 12; i++) {%>
|
|
<option value="<%=String.format("%02d", i)%>"><%=i%></option>
|
|
<%}%>
|
|
</select>
|
|
</span>
|
|
</span>
|
|
<span>
|
|
<span class="selectBoxWrap">
|
|
<select id="day" class="selectBox">
|
|
<option value="">일</option>
|
|
<%for(int i = 1; i <= 31; i++) {%>
|
|
<option value="<%=String.format("%02d", i)%>"><%=i%></option>
|
|
<%}%>
|
|
</select>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</dd>
|
|
<dd>
|
|
<ul class="inpField">
|
|
<li>
|
|
<div class="inpAddBtn">
|
|
<input type="text" id="cafeUserZipcode" class="inpText">
|
|
<a href="javascript:execDaumPostcode()" class="btns btnCol04">
|
|
<span>우편번호 검색</span>
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<input type="text" id="cafeUserAddr" class="inpText">
|
|
</li>
|
|
<li>
|
|
<input type="text" id="cafeUserAddrDetail" class="inpText" placeholder="상세주소">
|
|
</li>
|
|
</ul>
|
|
</dd>
|
|
<dd>
|
|
<input type="text"
|
|
oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');"
|
|
maxlength="8"
|
|
class="inpText" placeholder="추천인 코드(선택)">
|
|
</dd>
|
|
</dl>
|
|
|
|
<div class="btnArea">
|
|
<button type="submit" class="btns btnCol01">
|
|
<span>다음</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- 상세 : e -->
|
|
</div>
|
|
</div>
|
|
<!-- wrap : e -->
|
|
</div>
|
|
<!-- footer : s -->
|
|
<jsp:include page="/WEB-INF/view/include/inc_home_body_footer.jsp"/>
|
|
<!-- footer : e -->
|
|
</div>
|
|
|
|
<jsp:include page="/WEB-INF/view/include/inc_home_body_popup.jsp"/>
|
|
<script src="/res/front/js/biz/home/home-common.js?v=${timestamp}"></script>
|
|
<script src="/res/front/js/biz/home/user/cafe-register.js?v=${timestamp}"></script>
|
|
|
|
<!-- iOS에서는 position:fixed 버그가 있음, 적용하는 사이트에 맞게 position:absolute 등을 이용하여 top,left값 조정 필요 -->
|
|
<div id="zipcodelayer" style="display:none;position:fixed;overflow:hidden;z-index:1;-webkit-overflow-scrolling:touch;">
|
|
<img src="//t1.daumcdn.net/postcode/resource/images/close.png" id="btnCloseLayer" style="cursor:pointer;position:absolute;right:-3px;top:-3px;z-index:1" onclick="closeDaumPostcode()" alt="닫기 버튼">
|
|
</div>
|
|
|
|
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
|
|
<script>
|
|
// 우편번호 찾기 화면을 넣을 element
|
|
var element_layer = document.getElementById('zipcodelayer');
|
|
|
|
function closeDaumPostcode() {
|
|
// iframe을 넣은 element를 안보이게 한다.
|
|
element_layer.style.display = 'none';
|
|
}
|
|
|
|
function execDaumPostcode() {
|
|
new daum.Postcode({
|
|
oncomplete: function(data) {
|
|
// 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
|
|
|
|
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
|
|
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
|
|
var addr = ''; // 주소 변수
|
|
var extraAddr = ''; // 참고항목 변수
|
|
|
|
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
|
|
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
|
|
addr = data.roadAddress;
|
|
} else { // 사용자가 지번 주소를 선택했을 경우(J)
|
|
addr = data.jibunAddress;
|
|
}
|
|
|
|
// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
|
|
if(data.userSelectedType === 'R'){
|
|
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
|
|
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
|
|
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
|
|
extraAddr += data.bname;
|
|
}
|
|
// 건물명이 있고, 공동주택일 경우 추가한다.
|
|
if(data.buildingName !== '' && data.apartment === 'Y'){
|
|
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
|
|
}
|
|
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
|
|
if(extraAddr !== ''){
|
|
extraAddr = ' (' + extraAddr + ')';
|
|
}
|
|
// 조합된 참고항목을 해당 필드에 넣는다.
|
|
//document.getElementById("sample2_extraAddress").value = extraAddr;
|
|
|
|
} else {
|
|
//document.getElementById("sample2_extraAddress").value = '';
|
|
}
|
|
|
|
// 우편번호와 주소 정보를 해당 필드에 넣는다.
|
|
document.getElementById('cafeUserZipcode').value = data.zonecode;
|
|
document.getElementById("cafeUserAddr").value = addr;
|
|
// 커서를 상세주소 필드로 이동한다.
|
|
document.getElementById("cafeUserAddrDetail").focus();
|
|
|
|
// iframe을 넣은 element를 안보이게 한다.
|
|
// (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
|
|
element_layer.style.display = 'none';
|
|
},
|
|
width : '100%',
|
|
height : '100%',
|
|
maxSuggestItems : 5
|
|
}).embed(element_layer);
|
|
|
|
// iframe을 넣은 element를 보이게 한다.
|
|
element_layer.style.display = 'block';
|
|
|
|
// iframe을 넣은 element의 위치를 화면의 가운데로 이동시킨다.
|
|
initLayerPosition();
|
|
}
|
|
|
|
// 브라우저의 크기 변경에 따라 레이어를 가운데로 이동시키고자 하실때에는
|
|
// resize이벤트나, orientationchange이벤트를 이용하여 값이 변경될때마다 아래 함수를 실행 시켜 주시거나,
|
|
// 직접 element_layer의 top,left값을 수정해 주시면 됩니다.
|
|
function initLayerPosition(){
|
|
var width = 300; //우편번호서비스가 들어갈 element의 width
|
|
var height = 400; //우편번호서비스가 들어갈 element의 height
|
|
var borderWidth = 5; //샘플에서 사용하는 border의 두께
|
|
|
|
// 위에서 선언한 값들을 실제 element에 넣는다.
|
|
element_layer.style.width = width + 'px';
|
|
element_layer.style.height = height + 'px';
|
|
element_layer.style.border = borderWidth + 'px solid';
|
|
// 실행되는 순간의 화면 너비와 높이 값을 가져와서 중앙에 뜰 수 있도록 위치를 계산한다.
|
|
element_layer.style.left = (((window.innerWidth || document.documentElement.clientWidth) - width)/2 - borderWidth) + 'px';
|
|
element_layer.style.top = (((window.innerHeight || document.documentElement.clientHeight) - height)/2 - borderWidth) + 'px';
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|