STS3 쇼핑몰 프로젝트[14] 마이페이지 비밀번호 변경, 회원 탈퇴

순서

0. 마이페이지 비밀번호 변경, 회원 탈퇴 폼 만들기(jsp, css)

1. MemberController.java에 마이페이지 폼으로 이동하기 위한 코드 추가

2. MemberMapper.xml에 비밀번호 변경, 회원 탈퇴 sql 작성

3. MemberMapper.java, MemberService.java, MemebrServiceImpl.java 코드 작성

4. MemberController.java에 비밀번호 변경, 회원 탈퇴 버튼 클릭 시 실행될 로직 작성

5. <script> 문 추가

6. 테스트

0. 마이페이지 비밀번호 변경, 회원 탈퇴 폼 만들기(jsp, css)

src/main/webapp/WEB-INF/views/member 아래 마이페이지 폼인 mypage_info.jsp를 생성합니다.

mypage_info.jsp

<div class="container">
		<div class="topic">마이페이지</div>
		<div class="content">
			<input type="radio" name="slider" checked id="info"> 
			<input type="radio" name="slider" id="modify"> 
			<input type="radio" name="slider" id="pass"> 
			<input type="radio" name="slider" id="delete"> 
			<div class="list">
				<label for="info" class="info"> 
					<i class="fa fa-info-circle" aria-hidden="true"></i>
					<span class="title">내 정보 보기</span>
				</label> 
				<label for="modify" class="modify"> 
					<span class="icon">
						<i class="fa fa-pen" aria-hidden="true"></i>
					</span> 
					<span class="title">내 정보 수정</span>
				</label> 
				<label for="pass" class="pass"> 
					<span class="icon">
						<i class="fa fa-unlock-alt" aria-hidden="true"></i>
					</span> 
					<span class="title">비밀번호 변경</span>
				</label> 
				<label for="delete" class="delete"> 
					<span class="icon">
						<i class="fa fa-minus-circle" aria-hidden="true"></i>
					</span> 
					<span class="title">회원 탈퇴</span>
				</label> 
				
				<div class="slider"></div>
			</div>
			<div class="text-content2">
				<div class="pass text">
					<div class="title">비밀번호 변경</div>
					<form action="/member/updatePwd" method="post" id="updatePwdForm">						
						<p class="visibility underline">
							현재 비밀번호 : <input type="password" name="pwd"><br><br>
							새 비밀번호 : <input type="password" name="newPwd" id="newPwd"><br>
							<span id="warningPwd" style="color: red; font-size: 0.5rem;"></span><br>
							새 비밀번호 확인 : <input type="password" name="newPwd2" id="newPwdCheck"><br>
							<span id="warningCheckPwd" style="color: red; font-size: 0.5rem;"></span>
							<br><br>
							
							<i class="fa fa-unlock-alt" aria-hidden="true"></i>
							<input type="submit" value="변경하기" class="btn" id="updatePwd"> 
							
						</p>
					</form>
				</div>
				<div class="delete text">
					<div class="title">회원 탈퇴</div>
					<form action="/member/deleteMember" method="post" class="visibility" id="deleteForm">
	                   	<p><span style="color: #99004d">SWAN</span> 웹사이트에서 회원님의 계정이 삭제됩니다.<br>탈퇴 시 개인정보 및 이용 정보가 삭제되며 복구할 수 없습니다.<br>본인의 비밀번호를 입력한 후 하단의 탈퇴하기를 눌러주세요.</p>
						<br>
                  		<div>
                     		<p>비밀번호 : <input type="password" id="pw" name="pwd" class="pwd"></p>
                     		<br>
                     		<span class="final_pw_ck" style="color: red; font-size: 12px;">비밀번호를 입력해주세요.</span>
                     		
                     		<br>
                     		<textarea readonly="readonly" rows="5" cols="70" style="width:350px;">시행 일자: 2022년 07월
제 1 조 목적
                        
이 약관은 주식회사 SWAN(이하 "회사")에서 제공하는 서비스에 접속과 사용자에 의해서 업로드 및 다운로드 되어 표시되는 모든 정보, 텍스트, 이미지 및 기타 자료를 이용하는 이용자(이하 "회원")와 서비스 이용에 관한 권리 및 의무와 책임사항, 기타 필요한 사항을 규정하는 것을 목적으로 합니다.
                               
 제 2 조 약관의 게시와 효력, 개정
                        
이 약관에서 사용하는 용어의 정의는 다음과 같습니다.
① 회사는 서비스의 가입 과정에 본 약관을 게시합니다.
② 회사는 관련법에 위배되지 않는 범위에서 본 약관을 변경할 수 있습니다.
③ 회원은 회사가 전항에 따라 변경하는 약관에 동의하지 않을 권리가 있으며, 이 경우 회원은 회사에서 제공하는 서비스 이용 중단 및 탈퇴 의사를 표시하고 서비스 이용 종료를 요청할 수 있습니다. 다만, 회사가 회원에게 변경된 약관의 내용을 통보하면서 회원에게 "7일 이내 의사 표시를 하지 않을 경우 의사 표시가 표명된 것으로 본다는 뜻"을 명확히 통지하였음에도 불구하고, 거부의 의사 표시를 하지 아니한 경우 회원이 변경된 약관에 동의하는 것으로 봅니다.
④ 회사는 서비스를 중단하거나 회원이 개인정보 제공 동의를 철회한 경우에는 신속하게 회원의 개인 정보를 파기합니다. 단, 전자상거래 등에서의 소비자 보호에 관한 법률 등 관련 법률에서 정하는 바에 따라 일정 정보는 보관할 수 있습니다.
⑤ 회사는 법률에 특별한 규정이 있는 경우를 제외하고는 회원의 별도 동의 없이 회원의 계정 정보를 포함한 일체의 개인 정보를 제3자에게 공개하거나 제공하지 아니합니다.</textarea>
                  	</div> 
                   		<input type="button" value="탈퇴하기" class="btn" id="deleteBtn">
					</form>
				</div>
			</div>
		</div>
	</div>

반응형

mypage.css

@charset "UTF-8";

@import
	url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=IBM+Plex+Sans+KR:wght@200;300;400&family=Noto+Serif+KR:wght@500&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Gowun Dodum', sans-serif;
}

body {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.container {
	max-width: 950px;
	width: 100%;
	padding: 40px 50px 40px 40px;
	background: #fff;
	margin: 0 20px;
	border-radius: 12px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.container .topic {
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 5px;
}

.content {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.content .list {
	display: flex;
	flex-direction: column;
	width: 20%;
	margin-right: 50px;
	position: relative;
}

.content .list label {
	height: 60px;
	font-size: 14px;
	font-weight: 500;
	line-height: 60px;
	cursor: pointer;
	padding-left: 25px;
	transition: all 0.5s ease;
	color: #333;
	z-index: 12;
}

#info:checked ~ .list label.info, #modify:checked ~ .list label.modify,
	#pass:checked ~ .list label.pass, #delete:checked ~ .list label.delete{
	color: #fff;
}

.content .list label:hover {
	color: #99004d;
}

.content .slider {
	position: absolute;
	left: 0;
	top: 0;
	height: 60px;
	width: 100%;
	border-radius: 12px;
	background: #99004d;
	transition: all 0.4s ease;
}

#info:checked ~ .list .slider {
	top: 0;
}

#modify:checked ~ .list .slider {
	top: 60px;
}

#pass:checked ~ .list .slider {
	top: 120px;
}

#delete:checked ~ .list .slider {
	top: 180px;
}

.content .text-content2 {
	width: 80%;
	height: 100%;
}

.content .text {
	display: none;
}

.content .text .title {
	font-size: 30px;
	margin-bottom: 30px;
	font-weight: 500;
}

.content .text p {
	text-align: justify;
}

.content .text-content2 .home {
	display: block;
}

#info:checked ~ .text-content2 .info, #modify:checked ~ .text-content2 .modify,
	#pass:checked ~ .text-content2 .pass, #delete:checked ~ .text-content2 .delete{
	display: block;
}

#modify:checked ~ .text-content2 .info, #pass:checked ~ .text-content2 .info,
	#delete:checked ~ .text-content2 .info{
	display: none;
}

.content input {
	display: none;
}

.visibility input{
	display: inline;
	height: 25px;
	width: 30%;
	outline: none;
	border-radius: 5px;
	padding-left: 5px;
	border: 1px solid #ccc;
	border-bottom-width: 2px;
	transition: all 0.3s ease;
}

.visibility input:focus{
	border-color: #99004d;
}

a{
	text-decoration: none;
}

form .category {
	display: flex;
	margin: 5px 0;
}

form input[type="radio"] {
	display: none;
}

form .category label {
	display: flex;
	align-items: center;
	cursor: pointer;
}

form .category label .dot {
	height: 18px;
	width: 18px;
	border-radius: 50%;
	margin-right: 5px;
	background: #d9d9d9;
	border: 5px solid transparent;
	transition: all 0.3s ease;
}

#dot-1:checked ~ .category label .one, #dot-2:checked ~ .category label .two,
	#dot-3:checked ~ .category label .three {
	background: #99004d;
	border-color: #d9d9d9;
}

#deleteBtn{
	border: none;
	outline: none;
  	box-shadow: none;
	background-color: white;
}

#modifyBtn{
	border: none;
	outline: none;
  	box-shadow: none;
	background-color: white;
}

form input[type="submit"] {
	border: none;
	outline: none;
  	box-shadow: none;
  	background-color: white;
}

form input[type="submit"]:hover {
	color: #99004d;
}

/* 유효성 검사 문구 */
.final_pw_ck{
    display: none;
}

비밀번호 변경

회원 탈퇴

1. MemberController.java에 마이페이지 폼으로 이동하기 위한 코드 추가

폼 생성 이후 MemberController.java에 마이페이지 버튼 클릭 시 마이페이지 폼으로 이동시키기 위한 코드를 추가합니다.

/* 마이페이지로 이동 */
@RequestMapping(value = "/mypage_info", method = RequestMethod.GET)
public void myinfoPOST() {
	logger.info("마이페이지 진입!");
}

2. MemberMapper.xml에 비밀번호 수정과 회원 탈퇴를 위한 sql 작성

MemberMapper.xml에 비밀번호 수정과 회원 탈퇴를 위한 쿼리문을 작성합니다. 

<!-- 비밀번호 수정 -->
<update id="updatePwd">
	update member
	set pwd=#{newPwd}
	where id=#{id}
</update>

<!-- 회원 탈퇴 -->
<update id="deleteMember">
	update member
	set member_status = 'N'
	where id = #{id}
</update>

3. MemberMapper.java, MemberService.java, MemberServiceImpl.java 코드 작성

3-1. MemberMapper.java

MemberMapper.xml과의 연동을 위해 MemberMapper.java에 아래의 내용을 추가합니다.

/* 회원 탈퇴 */
public int deleteMember(String id);

/* 비밀번호 수정 */
public int updatePwd(HashMap<String, String> map);

3-2. MemberService.java

MemberService.java 인터페이스에 아래의 내용을 추가합니다.

/* 회원 탈퇴 */
public int deleteMember(String id);
	
/* 비밀번호 변경 */
public int updatePwd(HashMap<String, String> map);

3-3. MemberServiceImpl.java

MemberServiceImpl.java 클래스에 회원 탈퇴와 비밀번호 변경에 사용될 로직을 추가합니다.

/* 비밀번호 변경 */
@Override
public int updatePwd(HashMap<String, String> map) {
	return membermapper.updatePwd(map);
}

/* 회원 탈퇴 */
@Override
public int deleteMember(String id){
	return membermapper.deleteMember(id);
}

4. MemberController.java에 비밀번호 변경, 회원 탈퇴 버튼 클릭 시 실행될 로직 작성

다음으로 MemberController.java 클래스에 아래의 내용을 추가합니다.

/* 비밀번호 수정 */
@RequestMapping(value = "/updatePwd")
public String updatePwdPOST(HttpSession session, @RequestParam("pwd") String oldPwd,
			@RequestParam("newPwd") String newPwd, Model model, RedirectAttributes rttr) {
		MemberVO member = (MemberVO) session.getAttribute("member");

		int result = 0;
		String encode = null;
		if (bcrypt.matches(oldPwd, member.getPwd())) {
			// 넘길 값들을 HashMap을 통해 받아 놓음.
			HashMap<String, String> map = new HashMap<>();
			map.put("id", member.getId());
			encode = bcrypt.encode(newPwd);
			map.put("newPwd", encode);

			result = memberService.updatePwd(map);
		}
		member.setPwd(encode);
		model.addAttribute("member", member);
		// 해당 메서드가 작업을 정상적으로 수행했음을 알리는 메시지를 mypage_info.jsp로 전송하는 코드
		rttr.addFlashAttribute("updatePwd", result);

		return "redirect:/member/mypage_info";
	}

/* 회원 탈퇴 */
@RequestMapping(value = "/deleteMember")
public String deleteMemberPOST(MemberVO member, HttpSession session, RedirectAttributes rttr) {
		logger.info("deleteMemberPOST........");

		String id = ((MemberVO) session.getAttribute("member")).getId();

		int result = memberService.deleteMember(id);
		rttr.addFlashAttribute("delete_result", result);

		if (result > 0) {
			return "redirect:logout.me";
		}
		return "redirect:/swan";
	}

5. <script> 문 추가

5-1. 비밀번호 변경 버튼 클릭 시 또는 클릭 전 유효성 검사

비밀번호 변경 버튼 클릭 시 비밀번호를 입력했는지, 클릭 전 새로운 비밀번호와 새로운 비밀번호 확인의 비밀번호가 일치하는지, 입력한 새로운 비밀번호와 새로운 비밀번호 확인 값이 영문, 숫자, 특수 문자(~ ! @ # * 만 사용 가능)를 포함한 8~16자로 이루어졌는지 확인하는 <script> 문을 추가합니다.

<script>
				 /* 비밀번호 변경 버튼 */
				   $("#updatePwd").on("click", function(e) {
					   if(newPwd.value.trim() !== newPwdCheck.value.trim()){
						   alert("비밀번호가 다릅니다. 다시 입력해주세요.");
				  			newPwd.value = ''
				  			newPwd.focus();
				  		}else if(newPwd.value.trim() === '' || newPwdCheck.value.trim() === ''){
				  			alert("비밀번호를 입력해주세요.")
				  		}else if(!pwdRegExp.test(checkNewPwd.value)){
				  			alert("영문, 숫자, 특수문자(~ ! @ # * 만 사용가능)를 포함한 8~16자에 맞게 입력해주세요.");
				  		}
				  		else{
						$("#updatePwdForm").submit();
						e.preventDefault();
					   }
					});
				 
				   	var newPwd = document.getElementById('newPwd');
				  	var checkNewPwd = document.getElementById('newPwdCheck');
				  	var warningPwd = document.getElementById('warningPwd');
				  	var warningCheckPwd = document.getElementById('warningCheckPwd');
				  	var pwdRegExp = /^[a-zA-Z0-9~!@#*]{8,16}$/;

				  	newPwd.onblur = function WriteNewPwd(){
				  		if(newPwd.value.trim() === ''){
				  			newPwd.focus();
				  			warningPwd.innerHTML = '새로운 비밀번호를 입력하세요.';
				  		}else{
				  			warningPwd.innerHTML = '';

				  			if(newPwd.value.trim() === checkNewPwd.value.trim()){
				  				warningCheckPwd.innerHTML = ''
				  			}else{
				  				warningCheckPwd.innerHTML = '새로운 비밀번호와 다릅니다.'
				  			}
				  		}
				  	}

				  	checkNewPwd.onfocus = function(){
				  		warningCheckPwd.innerHTML = '';

				  		if(newPwd.value.trim() === ''){
				  			this.blur();
				  			newPwd.focus();
				  			warningPwd.innerHTML = '새로운 비밀번호를 입력하세요.';
				  		}
				  	}

				  	checkNewPwd.onblur = function(){
				  		if(checkNewPwd.value.trim() === ''){
				  			warningCheckPwd.innerHTML = '새로운 비밀번호를 입력하세요.';
				  		}else{
				  			if(!pwdRegExp.test(checkNewPwd.value)){
				  				warningCheckPwd.innerHTML = '영문, 숫자, 특수문자(~ ! @ # * 만 사용가능)를 포함한 8~16자';
				  			}else{
								if(newPwd.value !== checkNewPwd.value){
				  					warningCheckPwd.innerHTML = '새로운 비밀번호와 다릅니다.';
				  				}else{
				  					warningCheckPwd.innerHTML = '';
				  				}
				  			}
				  		}
				  	}
				</script>

5-2. 회원 탈퇴 버튼 클릭 시 유효성 검사

회원 탈퇴 버튼 클릭 시 사용자가 비밀번호를 입력했는지 검사하고 controller에 폼 정보를 넘기는 <script>를 작성합니다.

<script>
	var pwdCheck = false;		// 비밀번호
	$(document).ready(function(){
	/* 탈퇴 버튼 */
	$("#deleteBtn").on("click", function(e) {
		var pwd = $('.pwd').val();			// 비밀번호 입력란
		
		/* 비밀번호 유효성 검사 */
		if(pwd == ""){
			$('.final_pw_ck').css('display', 'block');
			pwdCheck = false;
		} else {
			$('.final_pw_ck').css('display', 'none');
			pwdCheck = true;
		}
		
		/* 최종 유효성 검사 */
		if(pwdCheck){			
			$("#deleteForm").submit();
			alert("탈퇴가 완료되었습니다.");
		}
		
		});
	});
</script>

6. 테스트

6-1. 비밀번호 변경

비밀번호 변경에서 아무런 값을 입력하지 않고 변경하기 버튼을 클릭 했을 시

새로운 비밀번호를 입력하지 않았을 경우

새 비밀번호와 새 비밀번호 확인이 일치하지 않았을 경우

새 비밀번호 및 새 비밀번호 확인 입력 창에 입력한 값이 영문, 숫자, 특수 문자(~ ! @ # * 만 사용 가능)를 포함한 8~16자로 이루어지지 않았을 경우

6-2. 회원 탈퇴

비밀번호를 입력하지 않고 탈퇴하기 버튼을 눌렀을 경우

탈퇴 성공 시