feat: 신규 프로젝트 생성 시, 전화번호 및 휴대폰 번호 필수 항목 안내

list.txt

@@ -1,2 +1,3 @@
 #src\main\resources\egovframework\egovProps\globals.properties
-src\main\webapp\WEB-INF\views\body\join\join.jsp
+src\main\webapp\WEB-INF\views\web\input\meta_info.jsp
+src\main\webapp\WEB-INF\views\web\input\meta_info1.jsp

src/main/resources/egovframework/egovProps/globals.properties.sample

@@ -0,0 +1,56 @@
+##############################################
+###################  DB\uad00\ub828   ###################
+##############################################
+
+# Oracle
+Oracle.Driver=oracle.jdbc.driver.OracleDriver
+
+################################################################
+# Oracle.Url=jdbc:oracle:thin:@192.168.0.8:3452:orcl is prod
+#Oracle.Url=jdbc:oracle:thin:@192.168.0.8:3452:orcl
+# dbnt devlop server
+Oracle.Url=jdbc:oracle:thin:@118.219.150.34:1521:ORAGEODEV
+# develop local server
+#Oracle.Url=jdbc:oracle:thin:@192.168.86.2:1521:xe
+# thkim local test
+#Oracle.Url=jdbc:oracle:thin:@127.0.0.1:1521:ORAGEODEV
+#Oracle.Url=jdbc:oracle:thin:@vas2.com:1521:ORAGEODEV
+################################################################
+
+#Oracle.Url=jdbc:oracle:thin:@192.168.0.29:1521:xe
+#Oracle.Url=jdbc:oracle:thin:@192.168.0.71:1521:orcl
+#Oracle.Url=jdbc:oracle:thin:@220.121.145.78:7080:xe
+#Oracle.Url=jdbc:oracle:thin:@localhost:1521:orcl
+#Oracle.Url=jdbc:oracle:thin:@218.232.234.162:1521:ORAGEO
+Oracle.ID=geoinfo
+Oracle.Password=geoinfo
+# thkim local test
+#Oracle.Password=dbnt060928!rlaxogh
+#Oracle.Password=!!kictgis1234
+
+
+###############################################
+###################  \ud30c\uc77c\uad00\ub828   ###################
+###############################################
+
+#Geoinfo.FilePath=D:\\Tomcat6\\geoinfoEgov\\webapps\\geoinfo\\files\\
+Geoinfo.FilePath=D:\\app_geoinfo\\app\\files\\
+#\uac80\uc0c9\uc720\ud1b5 3\ucc28\uc6d0
+#Geoinfo.FilePath3D=files\\4dim\\2014\\
+Geoinfo.FilePath3D=D:\\app_geoinfo\\app\\files\\4dim\\2014\\
+#\uc804\ubb38\uac00\uc758\uacac
+Geoinfo.Report=files\\report\\
+
+#\uc785\ub825\uc2dc\uc2a4\ud15c
+Geoinfo.WebFilePath=files\\web\\
+
+Globals.FileExtImg=.jpeg,.jpg,.bmp,.tiff,.gif,.png
+Globals.FileExtZip=.hwp,.pdf,.zip,.xls,.xlsx,.ppt,.pptx
+
+
+###############################################
+###################  JWT   ###################
+###############################################
+JWT.secret_key=RnrxhWlQksportalSystem!@!@$#@!@#@!$12442321
+# The token expires in 1,800,000 milliseconds, which is equal to 30 minutes.
+JWT.access_expired=1800000

src/main/webapp/WEB-INF/views/web/input/meta_info.jsp

@@ -152,9 +152,36 @@ window.onload = function() {
 	//숫자 입력
 	fn_onkeyNumber("HOLE_NUMBER","float02");
 	fn_onkeyNumber("SEARCHDATE","int");
-	fn_onkeyNumber("TEL","phone");
+	//fn_onkeyNumber("TEL","phone");
-	fn_onkeyNumber("PHONE","phone");
+	//fn_onkeyNumber("PHONE","phone");
-
+	
+	// 전화번호	
+	var telInput = document.getElementById("TEL");
+	telInput.addEventListener('blur', function(event) {
+		debugger;
+		let inputValue = event.target.value;
+		event.target.value = removeNonNumeric(inputValue);
+	});	
+	telInput.addEventListener('keyup', function(event) {
+		debugger;
+	  let inputValue = event.target.value;
+	  event.target.value = removeNonNumeric(inputValue);
+	});
+	
+	// 휴대폰	
+	var phoneInput = document.getElementById("PHONE");
+	phoneInput.addEventListener('focusout', function(event) {
+		debugger;
+		let inputValue = event.target.value;
+		event.target.value = removeNonNumeric(inputValue);
+	});	
+	phoneInput.addEventListener('keyup', function(event) {
+		debugger;
+	  let inputValue = event.target.value;
+	  event.target.value = removeNonNumeric(inputValue);
+	});
+	
+	
 	var projectNameInput = document.getElementById("PROJECT_NAME");
 	projectNameInput.addEventListener('focusout', function() {
 		var projectName = this.value;
@@ -185,8 +212,17 @@ window.onload = function() {
 			}
 		});
 	});
+	
+	
+
+	
 };
 
+function removeNonNumeric(str) {
+	let inputValue = String(str);	
+	return inputValue.replace(/[^0-9]/g, '');;
+}
+
 
 function getProjectCode() {
   url = location.href;

src/main/webapp/WEB-INF/views/web/input/meta_info1.jsp

@@ -3,23 +3,70 @@
 <%@ include file="/include/inc_head_2021_new.jsp" %>
 
 <style>
-@keyframes shake {
+	@keyframes shake {
-  0% { transform: translateX(0); }
+	  0% { transform: translateX(0); }
-  10% { transform: translateX(-5px); }
+	  10% { transform: translateX(-5px); }
-  20% { transform: translateX(5px); }
+	  20% { transform: translateX(5px); }
-  30% { transform: translateX(-5px); }
+	  30% { transform: translateX(-5px); }
-  40% { transform: translateX(5px); }
+	  40% { transform: translateX(5px); }
-  50% { transform: translateX(-5px); }
+	  50% { transform: translateX(-5px); }
-  60% { transform: translateX(5px); }
+	  60% { transform: translateX(5px); }
-  70% { transform: translateX(-5px); }
+	  70% { transform: translateX(-5px); }
-  80% { transform: translateX(5px); }
+	  80% { transform: translateX(5px); }
-  90% { transform: translateX(-5px); }
+	  90% { transform: translateX(-5px); }
-  100% { transform: translateX(0); }
+	  100% { transform: translateX(0); }
-}
+	}
-
+	
-.shake-animation {
+	.shake-animation {
-  animation: shake 0.6s;
+	  animation: shake 0.6s;
-}
+	}
+	
+	/* The snackbar - position it at the bottom and in the middle of the screen */
+	#snackbar {
+	  visibility: hidden; /* Hidden by default. Visible on click */
+	  min-width: 250px; /* Set a default minimum width */
+	  margin-left: -125px; /* Divide value of min-width by 2 */
+	  background-color: #000000; /* Black background color */
+	  color: #ff0000; /* White text color */
+	  text-align: center; /* Centered text */
+	  border-radius: 2px; /* Rounded borders */
+	  padding: 16px; /* Padding */
+	  position: fixed; /* Sit on top of the screen */
+	  z-index: 1; /* Add a z-index if needed */
+	  left: 50%; /* Center the snackbar */
+	  bottom: 80px; /* 30px from the bottom */
+	  font-weight: 500;
+	}
+	
+	/* Show the snackbar when clicking on a button (class added with JavaScript) */
+	#snackbar.show {
+	  visibility: visible; /* Show the snackbar */
+	  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
+	  However, delay the fade out process for 2.5 seconds */
+	  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+	  animation: fadein 0.5s, fadeout 0.5s 2.5s;
+	}
+	
+	/* Animations to fade the snackbar in and out */
+	@-webkit-keyframes fadein {
+	  from {bottom: 0; opacity: 0;}
+	  to {bottom: 80px; opacity: 1;}
+	}
+	
+	@keyframes fadein {
+	  from {bottom: 0; opacity: 0;}
+	  to {bottom: 80px; opacity: 1;}
+	}
+	
+	@-webkit-keyframes fadeout {
+	  from {bottom: 80px; opacity: 1;}
+	  to {bottom: 0; opacity: 0;}
+	}
+	
+	@keyframes fadeout {
+	  from {bottom: 80px; opacity: 1;}
+	  to {bottom: 0; opacity: 0;}
+	}
 </style>
 
 <script type="text/javaScript">
@@ -122,21 +169,37 @@ function shakeAndHighlight(targetEle, message) {
   targetEle.classList.add("shake-animation");
 
 
-  //1초 후 alert
+  //alert
   setTimeout(function() {
 	if( typeof message != 'undefined' ) {
-		alert(message);
+		//alert(message);
+		
+		var snackbarEle = document.getElementById("snackbar");
+		snackbarEle.innerHTML = message;
 	}
-  }, 100);
+  }, 1);
 
   // 3초 후 원래 스타일로 복원
   setTimeout(function() {
     targetEle.style.border = originalStyle;
     targetEle.classList.remove("shake-animation");
 	//targetEle.focus();
-  }, 3000);
+    showSnackbar();
+  }, 300);
 }
 
+function showSnackbar() {
+	  // Get the snackbar DIV
+	  var x = document.getElementById("snackbar");
+
+	  // Add the "show" class to DIV
+	  x.className = "show";
+
+	  // After 3 seconds, remove the show class from DIV
+	  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4000);
+}
+
+
 window.onload = function() {
 
 	var holeSpotSd = "${holeSpotSd}";
@@ -152,8 +215,45 @@ window.onload = function() {
 	//숫자 입력
 	fn_onkeyNumber("HOLE_NUMBER","float02");
 	fn_onkeyNumber("SEARCHDATE","int");
-	fn_onkeyNumber("TEL","phone");
+	//fn_onkeyNumber("TEL","phone");
-	fn_onkeyNumber("PHONE","phone");
+	//fn_onkeyNumber("PHONE","phone");
+	
+	// 전화번호	
+	var telInput = document.getElementById("TEL");
+	telInput.addEventListener('focusout', function(event) {
+		
+		let inputValue = event.target.value;
+		event.target.value = removeNonNumeric(inputValue);
+		
+		if( event.target.value.trim() === "" ) {
+			shakeAndHighlight(telInput, '전화번호는 필수 값입니다.');
+		}
+		
+	});
+	telInput.addEventListener('keyup', function(event) {
+	  let inputValue = event.target.value;
+	  if( hasNonNumericCharacters(inputValue) ) {
+		shakeAndHighlight(telInput, '전화번호에는 숫자만 입력하실 수 있습니다.');
+	  }
+	  event.target.value = removeNonNumeric(inputValue);
+	});
+	
+	// 휴대폰	
+	var phoneInput = document.getElementById("PHONE");
+	phoneInput.addEventListener('focusout', function(event) {
+		let inputValue = event.target.value;
+		event.target.value = removeNonNumeric(inputValue);
+		if( event.target.value.trim() === "" ) {
+			shakeAndHighlight(phoneInput, '휴대폰 번호는 필수 값입니다.');
+		}
+	});	
+	phoneInput.addEventListener('keyup', function(event) {
+	  let inputValue = event.target.value;
+		if( hasNonNumericCharacters(inputValue) ) {
+			shakeAndHighlight(phoneInput, '휴대폰에는 숫자만 입력하실 수 있습니다.');
+		}
+	  event.target.value = removeNonNumeric(inputValue);
+	});
 	
 	var projectNameInput = document.getElementById("PROJECT_NAME");
 	projectNameInput.addEventListener('focusout', function() {
@@ -186,6 +286,15 @@ window.onload = function() {
 
 };
 
+function hasNonNumericCharacters(str) {
+	return /[^0-9]/.test(str);
+}
+
+function removeNonNumeric(str) {
+	let inputValue = String(str);	
+	return inputValue.replace(/[^0-9]/g, '');;
+}
+
 function fn_excel_input(){
 	location.href="/excel_input_step00.do?REPORT_TYPE=CH"+"&PROJECT_CODE=";
 }
@@ -394,6 +503,9 @@ function fn_help_tour(){
 
 <div id="calenderDiv" class="trViewOff" style="position: absolute;"></div>
 
+<!-- The actual snackbar -->
+<div id="snackbar"></div>
+
 <!-- footer start-->
 <c:import url="/com/includeFooterInput.do?projectCode=${mapMetaInfo.PROJECT_CODE }" />
 <!-- footer end-->