📗 self-study/📗 KH정보교육원 당산지원

[Spring] Spring 웹 사이트 만들기 5 - 마이페이지(회원 정보 변경, 회원 탈퇴)

천재강쥐 2022. 11. 21. 11:54

 

🔥 회원 정보 변경 기능 🔥 

 

💻 header.jsp

👉🏻 마이 페이지 링크 지정

<c:otherwise>            	                
    <!-- 로그인 후 -->
    <label>${ loginUser.userName }님 환영합니다</label> &nbsp;&nbsp;
    <a href="myPage.me">마이페이지</a>
    <a href="logout.me">로그아웃</a>
</c:otherwise>

 

💻 myPage.jsp 생성

👉🏻 미리 받은 폼의 body 부분 붙여 넣기 (head 영역은 header에 이미 지정되어 있으므로 include 할 것)

👉🏻 header, footer.jsp 페이지 include

👉🏻 하드코딩된 각각의 value(id, 이름, 이메일, 주소...)에 로그인된 유저의 정보 넣기

👉🏻 커멘드 객체 방식을 이용할 것이기 때문에 필드명과 name 속성을 일치시켜 줌

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    
    <jsp:include page="../common/header.jsp" />

    <div class="content">
        <br><br>
        <div class="innerOuter">
            <h2>마이페이지</h2>
            <br>

            <form action="update.me" method="post">
                <div class="form-group">
                    <label for="userId">* ID : </label>
                    <input type="text" class="form-control" id="userId" value="${ loginUser.userId }" name="userId" readonly> <br>

                    <label for="userName">* Name : </label>
                    <input type="text" class="form-control" id="userName" value="${ loginUser.userName }" name="userName" required> <br>

                    <label for="email"> &nbsp; Email : </label>
                    <input type="text" class="form-control" id="email" value="${ loginUser.email }" name="email"> <br>

                    <label for="age"> &nbsp; Age : </label>
                    <input type="number" class="form-control" id="age" value="${ loginUser.age }" name="age"> <br>

                    <label for="phone"> &nbsp; Phone : </label>
                    <input type="tel" class="form-control" id="phone" value="${ loginUser.phone }" name="phone"> <br>
                    
                    <label for="address"> &nbsp; Address : </label>
                    <input type="text" class="form-control" id="address" value="${ loginUser.address }" name="address"> <br>
                    
                    <label for="gender"> &nbsp; Gender : </label> &nbsp;&nbsp;
                    <input type="radio" id="Male" value="M" name="gender">
                    <label for="Male">남자</label> &nbsp;&nbsp;
                    <input type="radio" id="Female" value="F" name="gender">
                    <label for="Female">여자</label> &nbsp;&nbsp;
                    
                    <script>
                    $(function() {
                		// gender 컬럼 값 : 'M', 'F', NULL
                		// EL 표기법으로 표현 : M / F / (공백)
                		if("${ loginUser.gender }" != "") {
                			
                			$("input[value=${ loginUser.gender }]").attr("checked", true);
                		
                		}
                	});
                    </script>
                    
                </div> 
                <br>
                <div class="btns" align="center">
                    <button type="submit" class="btn btn-primary">수정하기</button>
                    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteForm">회원탈퇴</button>
                </div>
            </form>
        </div>
        <br><br>
        
    </div>

    <!-- 회원탈퇴 버튼 클릭 시 보여질 Modal -->
    <div class="modal fade" id="deleteForm">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">회원탈퇴</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <form action="" method="post">
                    <!-- Modal body -->
                    <div class="modal-body">
                        <div align="center">
                            탈퇴 후 복구가 불가능합니다. <br>
                            정말로 탈퇴 하시겠습니까? <br>
                        </div>
                        <br>
                            <label for="userPwd" class="mr-sm-2">Password : </label>
                            <input type="password" class="form-control mb-2 mr-sm-2" placeholder="Enter Password" id="userPwd" name=""> <br>
                    </div>
                    <!-- Modal footer -->
                    <div class="modal-footer" align="center">
                        <button type="submit" class="btn btn-danger">탈퇴하기</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <jsp:include page="../common/footer.jsp" />

</body>
</html>

 

💻 MemberController

	@RequestMapping("update.me")
	public String updateMember(Member m, Model model, HttpSession session) {
		
		// System.out.println(m);
		int result = memberService.updateMember(m);
		
		if(result > 0) { // 성공
			
			// 수정 성공일 경우 DB로부터 수정된 회원의 정보를 다시 조회해서
			// session에 loginUser 키값으로 덮어씌워야 함
			// => 이때, 기존의 loginMember 메소드를 재활용해서 조회
			Member updateMem = memberService.loginMember(m);
			session.setAttribute("loginUser", updateMem);
			
			// session에 일회성 알람 문구도 담기
			session.setAttribute("alertMsg", "성공적으로 회원 정보가 변경되었습니다.");
			
			// 마이페이지 url 재요청
			return "redirect:/myPage.me";
			
		} else { // 실패
			
			model.addAttribute("errorMsg", "회원 정보 변경 실패");
			
			// /WEB-INF/views/common/errorPage.jsp
			return "common/errorPage";
			
		}
		
	}

 

💻 MemberServiceImpl

	@Override
	public int updateMember(Member m) {
		
		return memberDao.updateMember(sqlSession, m);
		
	}

 

💻 MemberDao

	public int updateMember(SqlSessionTemplate sqlSession, Member m) {
		
		return sqlSession.update("memberMapper.updateMember", m);
		
	}

 

💻 member-mapper.xml

	<update id="updateMember" parameterType="member">
		UPDATE MEMBER
		   SET USER_NAME = #{userName}
		   	 , EMAIL = #{email}
		   	 , AGE = #{age}
		   	 , PHONE = #{phone}
		   	 , ADDRESS = #{address}
		   	 , GENDER = #{gender}
		   	 , MODIFY_DATE = SYSDATE
		 WHERE USER_ID = #{userId}
	</update>

 

 

 

🔥 회원 탈퇴 기능 🔥 

 

💻 myPage.jsp

👉🏻 탈퇴 폼 링크 지정, userPwd name 속성 지정, userId도 input type="hidden"으로 함께 넘기기

<form action="delete.me" method="post">
    <!-- Modal body -->
    <div class="modal-body">
        <div align="center">
            탈퇴 후 복구가 불가능합니다. <br>
            정말로 탈퇴 하시겠습니까? <br>
        </div>
        <br>
            <label for="userPwd" class="mr-sm-2">Password : </label>
            <input type="password" class="form-control mb-2 mr-sm-2" placeholder="Enter Password" id="userPwd" name="userPwd"> <br>
            <input type="hidden" name="userId" value="${ loginUser.userId }">
    </div>
    <!-- Modal footer -->
    <div class="modal-footer" align="center">
        <button type="submit" class="btn btn-danger">탈퇴하기</button>
    </div>
</form>

 

💻 MemberController

👉🏻 userPwd: 회원 탈퇴 요청 시 사용자가 입력했던 평문 비밀번호
👉🏻 session의 loginUser Member 객체의 userPwd 필드: 현재 이 로그인한 회원의 암호화된 비밀번호
👉🏻 이 두 가지 정보가 있어야만 matches 메소드 활용 가능!

	@RequestMapping("delete.me")
	public String deleteMember(String userPwd, String userId, HttpSession session, Model model) {
		
		String encPwd = ((Member)session.getAttribute("loginUser")).getUserPwd();
		
		// 비밀번호 대조 작업
		if(bcryptPasswordEncoder.matches(userPwd, encPwd)) {
			
			// 비밀번호가 맞을 경우 => 탈퇴 처리
			int result = memberService.deleteMember(userId);
			
			if(result > 0) { // 탈퇴 처리 성공
				
				// 로그아웃 처리 후 일회성 알람 메시지 담기, 메인 페이지로 url 재요청
				// session.invalidate(); // 로그아웃 처리이나 사용 불가! 일회성 alert창을 띄워야 하기 때문
				session.removeAttribute("loginUser"); // 로그인한 회원의 정보만 지워 줌
				session.setAttribute("alertMsg", "성공적으로 탈퇴되었습니다. 그동안 이용해 주셔서 감사합니다.");
				
				return "redirect:/"; // 메인페이지로 url 재요청
				
			} else { // 탈퇴 처리 실패 => 에러 문구를 담아서 에러 페이지로 포워딩
				
				model.addAttribute("errorMsg", "회원 탈퇴 실패");
				
				// /WEB-INF/views/common/errorPage.jsp
				return "common/erroePage";
				
			}
			
		} else { // 비밀번호가 틀릴 경우 => 비밀번호 틀렸다고 알려 주고 마이페이지 url 재요청
			
			session.setAttribute("alertMsg", "비밀번호를 잘못 입력하였습니다. 확인해 주세요.");
			return "redirect:/myPage.me";
			
		}
		
	}

 

💻 MemberServiceImpl

	@Override
	public int deleteMember(String userId) {
		
		return memberDao.deleteMember(sqlSession, userId);
	}

 

💻 MemberDao

	public int deleteMember(SqlSessionTemplate sqlSession, String userId) {
		
		// 1 또는 0이 리턴되어 돌아갈 것
		return sqlSession.update("memberMapper.deleteMember", userId);
	}

 

💻 member-mapper.xml

	<!-- 스트링 타입 단일값 1개로 구멍 메꾸기: parameterType은 소문자 string, #{매개변수명} -->
	<update id="deleteMember" parameterType="string">
		UPDATE MEMBER
		   SET STATUS = 'N'
		WHERE USER_ID = #{userId}
	</update>
더보기

👉🏻 마이페이지 접속 후 회원 탈퇴 버튼 클릭

 

👉🏻 비밀번호 입력창에서

 

👉🏻 잘못된 비밀번호를 입력했을 때 alert창 뜬 후 마이페이지로 돌아감

 

👉🏻 올바른 비밀번호를 입력했을 때 alert창 뜬 후 메인 페이지로 돌아감

 

👉🏻 올바른 비밀번호를 입력했을 때 DB의 STATUS가 'N'으로 변경됨