🌼내 정보 조회(myPage-info.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>마이페이지</title>
<link rel="stylesheet" href="/resources/css/myPage/myPage-style.css">
</head>
<body>
<main>
<jsp:include page="/WEB-INF/views/common/header.jsp" />
<section class="myPage-content">
<jsp:include page="/WEB-INF/views/myPage/sideMenu.jsp" />
<section class="myPage-main">
<h1 class="myPage-title">내 정보</h1>
<span class="myPage-subject">원하는 회원 정보를 수정할 수 있습니다.</span>
<%-- 현재페이지 : http://localhost/myPage/info
제일 뒤에 info 지우고
action에 작성된 경로 추가
--%>
<form action="info" method="POST" name="myPageFrm" id ="updateInfo">
<div class="myPage-row">
<label>닉네임</label>
<input type="text" name="memberNickname" maxlength="10"
value="${loginMember.memberNickname}" id="memberNickname">
</div>
<div class="myPage-row">
<label>전화번호</label>
<input type="text" name="memberTel" maxlength="11"
value="${loginMember.memberTel}" id="memberTel">
</div>
<div class="myPage-row info-title">
<span>주소</span>
</div>
<%-- ${fn:split(loginMember.memberAddress, '^^^')[0]}
${fn:split(loginMember.memberAddress, '^^^')[1]}
${fn:split(loginMember.memberAddress, '^^^')[2]} --%>
<%--
${fn:split(문자열, 구분자)}
문자열을 구분자로 나누어 배열 형태로 반환
--%>
<c:set var="addr" value="${fn:split(loginMember.memberAddress,'^^^')}"/>
<div class="myPage-row info-address">
<input type="text" name="memberAddress" placeholder="우편번호" value="${addr[0]}" id="sample6_postcode">
<button type="button" onclick="sample6_execDaumPostcode()">검색</button>
</div>
<div class="myPage-row info-address">
<input type="text" name="memberAddress" placeholder="도로명/지번 주소" value="${addr[1]}" id="sample6_address">
</div>
<div class="myPage-row info-address">
<input type="text" name="memberAddress" placeholder="상세 주소" value="${addr[2]}" id="sample6_detailAddress">
</div>
<button class="myPage-submit">수정하기</button>
</form>
</section>
</section>
</main>
<jsp:include page="/WEB-INF/views/common/footer.jsp" />
<!-- 다음 주소 api 추가 -->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample6_postcode').value = data.zonecode;
document.getElementById("sample6_address").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("sample6_detailAddress").focus();
}
}).open();
}
</script>
<script src="/resources/js/myPage/myPage.js"></script>
</body>
</html>🌼비밀번호 변경(myPage-changePw.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
<link rel="stylesheet" href="/resources/css/myPage/myPage-style.css">
</head>
<body>
<main>
<jsp:include page="/WEB-INF/views/common/header.jsp"/>
<!-- 마이페이지 - 내 정보 -->
<section class="myPage-content">
<!-- 사이드메뉴 include -->
<!-- jsp 액션 태그 -->
<jsp:include page="/WEB-INF/views/myPage/sideMenu.jsp"/>
<!-- 오른쪽 마이페이지 주요 내용 부분 -->
<section class="myPage-main">
<h1 class="myPage-title">비밀번호 변경</h1>
<span class="myPage-subject">현재 비밀번호가 일치하는 경우 새 비밀번호로 변경할 수 있습니다.</span>
<form action="changePw" method="POST" name="myPageFrm" id="changePwFrm">
<div class="myPage-row">
<label>현재 비밀번호</label>
<input type="password" name="currentPw" id="currentPw" maxlength="30" >
</div>
<div class="myPage-row">
<label>새 비밀번호</label>
<input type="password" name="newPw" id="newPw" maxlength="30">
</div>
<div class="myPage-row">
<label>새 비밀번호 확인</label>
<input type="password" name="newPwConfirm" id="newPwConfirm" maxlength="30">
</div>
<button class="myPage-submit">변경하기</button>
</form>
</section>
</section>
</main>
<jsp:include page="/WEB-INF/views/common/footer.jsp"/>
<script src="/resources/js/myPage/myPage.js"></script>
</body>
</html>🌼회원탈퇴(myPage-secession.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
<link rel="stylesheet" href="/resources/css/myPage/myPage-style.css">
</head>
<body>
<main>
<jsp:include page="/WEB-INF/views/common/header.jsp"/>
<!-- 마이페이지 - 내 정보 -->
<section class="myPage-content">
<!-- 사이드메뉴 include -->
<!-- jsp 액션 태그 -->
<jsp:include page="/WEB-INF/views/myPage/sideMenu.jsp"/>
<!-- 오른쪽 마이페이지 주요 내용 부분 -->
<section class="myPage-main">
<h1 class="myPage-title">회원 탈퇴</h1>
<span class="myPage-subject">현재 비밀번호가 일치하는 경우 탈퇴할 수 있습니다.</span>
<form action="secession" method="POST" name="myPageFrm" id="secessionFrm">
<div class="myPage-row">
<label>비밀번호</label>
<input type="password" name="memberPw" id="memberPw" maxlength="30">
</div>
<div class="myPage-row info-title">
<label>회원 탈퇴 약관</label>
</div>
<pre class="secession-terms">
제1조
이 약관은 샘플 약관입니다.
① 약관 내용 1
② 약관 내용 2
③ 약관 내용 3
④ 약관 내용 4
제2조
이 약관은 샘플 약관입니다.
① 약관 내용 1
② 약관 내용 2
③ 약관 내용 3
④ 약관 내용 4
</pre>
<div>
<input type="checkbox" name="agree" id="agree">
<label for="agree">위 약관에 동의합니다.</label>
</div>
<button class="myPage-submit">탈퇴</button>
</form>
</section>
</section>
</main>
<jsp:include page="/WEB-INF/views/common/footer.jsp"/>
<script src="/resources/js/myPage/myPage.js"></script>
</body>
</html>🌼myPage.js
//내정보 수정 페이지
const memberNickname = document.getElementById("memberNickname");
const memberTel = document.getElementById("memberTel");
const updateInfo = document.getElementById("updateInfo");
// 내정보 수정 form 태그가 존재할 때(내 정보페이지)
if(updateInfo != null){
// 전역변수로 수정 전 닉네임 / 전화번호 저장
initNickname = memberNickname.value;
initTel = memberTel.value;
// 닉네임 유효성 검사
memberNickname.addEventListener("input", ()=>{
// 변경 전 닉네임과 입력 값이 같은 경우
if(initNickname == memberNickname.value){
memberNickname.removeAttribute("style");
return;
}
// 정규표현식으로 유효성 검사
const regEx = /^[가-힣\d\w]{2,10}$/;
if(regEx.test(memberNickname.value)){
memberNickname.style.color="green";
}else{
memberNickname.style.color="red";
}
});
//전화번호 유효성 검사
memberTel.addEventListener("input", ()=>{
// 변경 전 전화번호과 입력 값이 같은 경우
if(initTel == memberTel.value){
memberTel.removeAttribute("style");
return;
}
// 정규표현식으로 유효성 검사
const regEx = /^0(1[01679]|2|[3-6][1-5]|70)\d{3,4}\d{4}$/;
if(regEx.test(memberTel.value)){
memberTel.style.color="green";
}else{
memberTel.style.color="red";
}
});
// form 태그 제출 시 유효하지 않은 값이 있으면 제출 X
updateInfo.addEventListener("submit", e =>{
// 닉네임이 유효하지 않을 경우
if(memberNickname.style.color=="red"){
alert("닉네임이 유효하지 않습니다.");
// 포커스 이동
memberNickname.focus();
// 기본 이벤트 제거
e.preventDefault();
return;
}
//전화 번호가 유효하지 않을 경우
if(memberTel.style.color=="red"){
alert("전화번호가 유효하지 않습니다.");
// 포커스 이동
memberTel.focus();
// 기본 이벤트 제거
e.preventDefault();
return;
}
})
} //if end..
//-----------------------------myPage-changePw.jsp----------------------------
// 비밀번호 변경 제출시
const changePwFrm = document.getElementById("changePwFrm");
const currentPw = document.getElementById("currentPw");
const newPw = document.getElementById("newPw");
const newPwConfirm = document.getElementById("newPwConfirm");
//비밀번호 변경 페이지 인 경우
if(changePwFrm != null){
changePwFrm.addEventListener("submit", e=>{
//현재비밀번호 미작성 시
if(currentPw.value.trim() == ""){
alert("현재비밀번호를 입력해주세요");
e.preventDefault();
currentPw.focus();
currentPw.value="";
return;
}
// 비밀번호 유효성 검사
const regEx =/^[A-Za-z0-9\!\@\#\-\_]{6,20}$/;
if(!regEx.test(newPw.value)){
alert("비밀번호가 유효하지 않습니다.");
e.preventDefault();
newPw.focus();
return;
}else{
//비밀번호 == 비밀번호 확인
// -> 일치하지 않을 때 제출안되게 막기
if(newPw.value != newPwConfirm.value){
alert("비밀번호가 일치하지 않습니다.");
e.preventDefault();
newPwConfirm.focus();
return;
}
}
})
}
//-----------------------------myPage-secession.jsp----------------------------
//회원 탈퇴 페이지인 경우
const secessionFrm = document.getElementById("secessionFrm");
const memberPw = document.getElementById("memberPw");
const agree = document.getElementById("agree");
if(secessionFrm != null){
secessionFrm.addEventListener("submit", e =>{
// 비밀번호 미작성인경우
if(memberPw.value.trim() == ""){
alert("비밀번호를 입력해주세요");
memberPw.focus();
e.preventDefault();
return;
}
// 동의 체크가 되지 않은 경우
if(!agree.checked){
alert(" 약관동의 후 탈퇴 버튼을 눌러주세요")
e.preventDefault();
agree.focus();
return;
}
if(!confirm("정말로 탈퇴하시겠습니까?")){
// 취소 클릭 시
alert("탈퇴취소")
e.preventDefault();
memberPw.value="";
return;
}
})
}
나를 죽이지 못하는 오류는 내 코드를 더 강하게 만들지ㅋ