열심히 끝까지

[팀 프로젝트] - 펫 상점(펫키지) 5일차 회의기록 및 완성본 본문

0607 팀 프로젝트 - 2Quals

[팀 프로젝트] - 펫 상점(펫키지) 5일차 회의기록 및 완성본

노유림 2022. 9. 13. 08:41

5차 회의기록 최종.pdf
0.03MB

 

제작 기간 : 24일
개발 환경 : 이클립스(JDK 11), 톰캣(Tomcat v9.0), MySQL
--------------------------------------------------------
22/08/16(수) 1차 회의 - MVO 결정, 요구사항 분석(기능, API), 테이블, USERFLOW(페이지 개수)
22/08/17(목) 2차 회의 - table 칼럼 설정 + VO 설정
22/08/22(수) 개발 진행
22/08/23(화) 3차 회의 - 관리자 기능, 리뷰페이지, 더보기&페이징처리 사용할 페이지, 상품 구매 목록 STYLE
22/08/25(목) 4차 회의 - 더보기는 버튼 지정, BUYLIST VO 추가(TABLE이 아님), 아코디언식으로 내용
22/08/30(화) 5차 회의 - API현황(로그인 API, 아코디언, 데이트피커, 날짜API, 모달창, 이메일 API, 주소API, 별점API),
                                     리뷰 파일 첨부 및 사진 추가(상세페이지), 네이버 및 카카오 로그인 관련, 분류 추가

 

완성 코드

https://github.com/Rhoyoorim/-JSP.git

 

과거의 프로젝트에서 오늘날 올린 프로젝트의 변경 사항

- signup.jsp (js 부분)

 	<script type="text/javascript">
		var nowUtc = Date.now(); // 오늘 날짜
		var timeoff = new Date().getTimezoneOffset() * 60000; // 초 단위로 끊음
		var today = new Date(nowUtc - timeoff).toISOString().split("T")[0];
		document.getElementById('mbirth').setAttribute("max", today);
		// 오늘 이후의 날짜 선택 불가능하게 만드는 작업
		//document.getElementById('mbirth').value = new Date().toISOString()
				//.substring(0, 10);
		// 오늘 날짜가 기본 세팅
		// 
		document.getElementById('submit').disabled=true;
		function idcheck(){ // 아이디 유효성 검사
			document.getElementById('submit').disabled=true;
			var id = $("#mid").val();
			var idpattern=/[a-z0-9_-]{5,20}$/;
			if(id.length <=4){
				document.getElementById('idcheck').innerHTML = "5자 이상의 아이디를 입력하세요.";
				document.getElementById('idcheck').style.color = 'red';
			}else if(!idpattern.test(id)){
				document.getElementById('idcheck').innerHTML = "5~20자의 영문 소문자, 숫자, 특수기호(_),(-)만 사용 가능";
				document.getElementById('idcheck').style.color = 'red';
			}
			else{
				$.ajax({ // 중복 아이디 체크
					url:"CheckServlet?mid="+id,
							success:function(data){
								if(data==1){
									document.getElementById('idcheck').innerHTML = "중복된 아이디입니다.";
									document.getElementById('idcheck').style.color = 'red';
								}else if(data==2){
									document.getElementById('idcheck').innerHTML = "사용 가능한 아이디입니다.";
									document.getElementById('idcheck').style.color = 'blue';
									document.getElementById('submit').disabled=false;
								}
							}
				});
				/* document.getElementById('idcheck').innerHTML = "완료";
				document.getElementById('idcheck').style.color = 'blue';
				console.log(document.getElementById('idcheck').style.color);
				document.getElementById('submit').disabled=false; */
			}	
		}
		
		function pwcheck() { // 비밀번호 유효성 검사
			document.getElementById('submit').disabled=true;
			var p1 = $("#mpw").val();
			var p2 = $("#pwch").val();
			var ppattern = /^[a-z0-9_-]{5,20}$/;
			
			if (p1.length <= 7) {
				document.getElementById('pwcheck').innerHTML = "8자 이상의 비밀번호를 입력하세요";
				document.getElementById('pwcheck').style.color = 'red';
			}else if(!ppattern.test(p1)){
				document.getElementById('pwcheck').innerHTML = "8~20자의 영문 소문자, 숫자, 특수기호(_),(-),(*)만 사용 가능합니다.";
				document.getElementById('pwcheck').style.color = 'red';
			}
			else if (p2.length == 0) {
				document.getElementById('pwcheck').innerHTML = "사용가능한 비밀번호입니다. 비밀번호 확인을 진행하세요.";
				document.getElementById('pwcheck').style.color = 'blue';
			} else if (p1 != p2) {
				document.getElementById('pw2check').innerHTML = "비밀번호가 일치하지 않습니다.";
				document.getElementById('pw2check').style.color = 'red';
			} else {
				document.getElementById('pwcheck').innerHTML = "비밀번호 확인 완료";
				document.getElementById('pwcheck').style.color = 'blue';
				document.getElementById('pw2check').innerHTML = "비밀번호가 일치합니다.";
				document.getElementById('pw2check').style.color = 'blue';
				document.getElementById('submit').disabled=false;
			}
		}
		
		function namecheck(){ // 이름 유효성 검사
			document.getElementById('submit').disabled=true;
			var name = $("#mname").val();
			var namePattern=/^[가-힣]{2,5}$/;
			if(name.length <= 1){
				document.getElementById('namecheck').innerHTML = "이름을 입력해주세요.";
				document.getElementById('namecheck').style.color = 'red';
			}else if(!namePattern.test(name)){
				document.getElementById('namecheck').innerHTML = "한글형식의 이름을 입력해주세요";
				document.getElementById('namecheck').style.color = 'red';
			}else{
				document.getElementById('namecheck').innerHTML = "사용 가능한 이름입니다."
				document.getElementById('namecheck').style.color = 'blue';
				document.getElementById('submit').disabled=false;
			}	
		}
		
		function nickcheck(){ // 닉네임 유효성 검사 
			document.getElementById('submit').disabled=true;
			var nick = $("#mnick").val();
			var nickPattern=/^[가-힣]{2,5}$/;
			if(nick.length <= 1){
				document.getElementById('nickcheck').innerHTML = "닉네임을 입력해주세요.";
				document.getElementById('nickcheck').style.color = 'red';
			}else if(!nickPattern.test(nick)){
				document.getElementById('nickcheck').innerHTML = "한글형식의 닉네임을 입력해주세요";
				document.getElementById('nickcheck').style.color = 'red';
			}else{
				$.ajax({ // 중복 체크 - 후기를 쓸 닉네임이 겹치면 안되기 때문에
					url:"CheckServlet?mnick="+nick,
							success:function(data){
								if(data==1){
									document.getElementById('nickcheck').innerHTML = "중복된 닉네임 입니다.";
									document.getElementById('nickcheck').style.color = 'red';
								}else if(data==2){
									document.getElementById('nickcheck').innerHTML = "사용 가능합니다.";
									document.getElementById('nickcheck').style.color = 'blue';
									document.getElementById('submit').disabled=false;
								}
							}
				});
				/* document.getElementById('nickcheck').innerHTML = "사용가능합니다";
				document.getElementById('nickcheck').style.color = 'blue';
				document.getElementById('submit').disabled=false; */
			}
		} 
		
		function phonecheck(){ // 핸드폰번호 유효성 검사
			document.getElementById('submit').disabled=true;
			var phone = $("#phone").val();
			var phonepattern=/^01([0|1|6|7|8|9])([0-9]{4})([0-9]{4})$/;
			if(phone.length <=10){
				document.getElementById('phonecheck').innerHTML = "핸드폰 번호를 제대로 입력하세요.";
				document.getElementById('phonecheck').style.color = 'red';
			}else if(!phonepattern.test(phone)){
				document.getElementById('phonecheck').innerHTML = "01######### 형식으로 입력해주세요.";
				document.getElementById('phonecheck').style.color = 'red';
			}else{
				document.getElementById('phonecheck').innerHTML = "입력 완료";
				document.getElementById('phonecheck').style.color = 'blue';
				document.getElementById('submit').disabled=false;
			}
			
		}
		function emailidcheck(){ // 이메일 유효성 검사
			var id = $("#memailid").val();
			var idpattern=/[a-z0-9_-]{5,20}$/;
			document.getElementById('submit').disabled=true;
			if(id.length <=4){
				document.getElementById('emailidcheck').innerHTML = "5자 이상 이메일아이디 입력하세요.";
				document.getElementById('emailidcheck').style.color = 'red';
			}else if(!idpattern.test(id)){
				document.getElementById('emailidcheck').innerHTML = "영소문자,숫자,특수기호(_),(-) 20자까지 사용 가능";
				document.getElementById('emailidcheck').style.color = 'red';
				
			}else{
				document.getElementById('emailidcheck').innerHTML = "입력 완료";
				document.getElementById('emailidcheck').style.color = 'blue';
				document.getElementById('submit').disabled=false; // 잘 입력되면 회원가입버튼 활성화
			}
		}

		/*submit.addEventListener('click', signup);
		 
		function activeEvent(){
			switch(!(id=='blue')){
			case true : submit.disabled=true; break;
			case false : submit.disabled=false; break;
			}
		} */
			
		 /* document.getElementById('idcheck').style.color('blue',function(event){
			 document.getElementById('submit').disabled=!this.value;
		 },false;); */

		/* function signup(){
			alert('회원가입 성공');
			window.location.href="login.jsp";
		} */
	</script>

 

- inputpet.jsp

<script type="text/javascript">
$(document).ready(function(){ // 강아지 혹은 고양이 선택 시, 선택한 종류의 종만 뜨도록 설정
	$("input[name='gender']:radio").change(function(){
		var gender=this.value;
		
		if(gender=="dog"){ // 개를 선택하면? 
			$('#pdog').show(); 
			$('#pcat').hide();
		}else if(gender=="cat"){ // 고양이를 선택하면?
			$('#pdog').hide();
			$('#pcat').show();
		}
	});
});
</script>

 

- pwfind.jsp

<script type="text/javascript">
	function check(){
		var phoneNumber=$('#phone').val();
		document.getElementById('phonecheckbtn').innerHTML='인증번호가 발송되었습니다.';
		
		$.ajax({
			type:"GET",
			url:'${pageContext.request.contextPath}/check.do?phoneNumber='+phoneNumber,
			data:{
				"phoneNumber" : phoneNumber
			},
			success:function(res){
				<!--console.log("로그 : [" + res+"]");-->
				 $('#numcheckbtn').click(function(){
					if(res==$('#numcheck').val()){
						$("#numcheckres").text("휴대폰 인증이 정상적으로 완료되었습니다.");// 사용가능
					}
					else{
						$("#nickcheck").text("잘못된 인증입니다. 다시 시도하세요.");
					}
				})
			}
		})
	}
	
</script>