image.png

image.png

JSP

회원 탈퇴 전 비밀 번호 확인 창

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    isELIgnored="false" %>
<%@ taglib prefix="fmt" uri="<http://java.sun.com/jsp/jstl/fmt>" %>    
<%@ taglib prefix="c" uri="<http://java.sun.com/jsp/jstl/core>" %>
<c:set var="contextPath"  value="${pageContext.request.contextPath}"  />
<%
  request.setCharacterEncoding("UTF-8");
%> 
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="<http://code.jquery.com/jquery-latest.js>"></script>
</head>
<style>

body{
overflow: hidden;
height:100vh;
}

input{
width:280px;
height:20px;
}

#pwdform {
    position: absolute;
    top: 45%;
    left: 50%; 
    transform: translate(-50%, -50%); 
    text-align: left;
    margin: auto;
}

button{
width:290px;
height:30px;
background-color: #DE6963; 
color: white;
border: none;
cursor: pointer;
border-radius: 5px; 
}

button:hover{
background-color: #DE9A63;
}
</style>
<body>
<br>
<br>
<div id="pwdform">
    <img src="${contextPath}/resources/image/gamiLogo1.png" width="300px" style="margin-top:30px;"/><br><br><br>

    <b>비밀번호 입력</b><br>
    <input type="password" name="memberPw" id="pwd1"/><br><br>

    <b>비밀번호 확인</b><br>
    <input type="password" name="memberPw2" id="pwd2" oninput="pwdChecck()"/><br>
    <p id="pwdMsg"></p>

    <button type="button" onclick="memberDeletePwd()">탈퇴하기</button>
</div>
</body>
<script>
    const memberPwd = `${member.memberPw}`;
    const contextPath = `${contextPath}`
    
    	$(document).ready(function() {
            $('#pwd2').on('input', function() {
                pwdCheck();
            });

            $('#deleteButton').on('click', function() {
                memberDeletePwd();
            });
        });

        function memberDeletePwd() {
            var pwdInput = $('#pwd1').val();
            var pwdConfirm = $('#pwd2').val();

            if (pwdInput === memberPwd && pwdConfirm === memberPwd && pwdInput === pwdConfirm) {
                alert("회원탈퇴 페이지로 이동하겠습니다.");
                opener.location.href = contextPath + '/member/memberDeleteLastCh.do'; 
                window.close();
            } else {
                alert("잘못된 비밀번호입니다.");
            }
        }

        function pwdCheck() {
            var pwdInput = $('#pwd1').val();
            var pwdConfirm = $('#pwd2').val();
            var pwdMsg = $('#pwdMsg');

            if (pwdConfirm !== pwdInput) {
                pwdMsg.text("입력하신 비밀번호와 다릅니다.");
            } else if (pwdInput === "" || pwdConfirm === "") {
                pwdMsg.text("");
            } else {
                pwdMsg.text("");
            }
        }
</script>
</html>

회원 탈퇴 마지막 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    isELIgnored="false" %>
<%@ taglib prefix="fmt" uri="<http://java.sun.com/jsp/jstl/fmt>" %>    
<%@ taglib prefix="c" uri="<http://java.sun.com/jsp/jstl/core>" %>
<c:set var="contextPath"  value="${pageContext.request.contextPath}"  />
<%
  request.setCharacterEncoding("UTF-8");
%> 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 탈퇴</title>

<style>
#memberDelete{
	min-width:300px;
	max-width:720px;
	margin-left: auto;
	margin-right: auto;
	margin-top : 7.5%;
}
#memberDeleteSub{
	text-align: left;
}
#memberDeleteTerms{
	text-align: left;
	border-radius: 5px;
	border: 2px solid #ccc;
}
#memberDeleteCause{
	text-align: left;
	border-radius: 5px;
	border: 2px solid #ccc;
	width : 714.5px;
	resize: none;
	height : 200px;
}
#memberDeleteSelect{
	display: flex;
    flex-direction: row;
    margin-top: 10px;
    }
#memberDeleteCancel{
width : 355.5px;
 height: 45px;
 font-size: 20px;
 padding: 10px;
 border-radius: 5px;
 margin-top:15px;
 margin-bottom:15px;
 margin-right:10px;
 background-color: #F8CECC;
 border: none;
 font-weight: bold;
}
#memberDeleteCancel:hover{
background-color: #F5B2B0;
cursor: pointer;
} 
#memberDeleteButton{
width : 355.5px;
 height: 45px;
 font-size: 20px;
 padding: 10px;
 border-radius: 5px;
 margin-top:15px;
 margin-bottom:15px;
 background-color: White;
 border: none;
 font-weight: bold;
 border: 1px solid #ccc;
}

#memberDeleteButton:hover{
background-color: #f0f0f0;
cursor: pointer;
} 
</style>
</head>
<body>
<div id="memberDelete">
<div id="memberDeleteSub">
<h2>회원 탈퇴 신청</h2>
<h3>회원탈퇴 신청에 앞서 아래 내용을 반드시 확인해주세요.</h3>
</div>
<div id="memberDeleteTerms">
<b>회원탈퇴 시 처리내용</b><br>
(주)가미 포인트·쿠폰은 소멸되며 환불되지 않습니다.<br>
(주)가미 구매 정보가 삭제됩니다.<br>
소비자보호에 관한 법률 제6조에 의거,계약 또는 청약철회 등에 관한 기록은 5년, 대금결제 및 재화등의 공급에 관한 기록은 5년, 소비자의 불만 또는 분쟁처리에 관한 기록은 3년 동안 보관됩니다. 동 개인정보는 법률에 의한 보유 목적 외에 다른 목적으로는 이용되지 않습니다.
<br>
<br>
<b>회원탈퇴 시 게시물 관리</b><br>
회원탈퇴 후 가미 서비스에 입력한 게시물 및 댓글은 삭제되지 않으며, 회원정보 삭제로 인해 작성자 본인을 확인할 수 없으므로 게시물 편집 및 삭제 처리가 원천적으로 불가능 합니다. 게시물 삭제를 원하시는 경우에는 먼저 해당 게시물을 삭제 하신 후, 탈퇴를 신청하시기 바랍니다.<br>
<br>
<br>
<b>회원탈퇴 후 재가입 규정</b><br>
탈퇴 회원이 재가입하더라도 기존의 오늘의집 포인트는 이미 소멸되었기 때문에 양도되지 않습니다.</div>

<div id="memberDeleteSub">
<h3>(주)가미 서비스 이용 중 어떤 부분이 불편하셨나요?</h3>
</div>

<textarea id="memberDeleteCause"  placeholder="(주)가미를 떠나는 이유를 자세히 알려주시겠어요?
여러분의 소중한 의견을 반영해 더 좋은 서비스로 꼭 찾아뵙겠습니다."></textarea><br>

<div id="memberDeleteSelect">
<a href="${contextPath}/main.do"><button id="memberDeleteCancel">탈퇴취소</button></a>

<form action="${contextPath}/member/memberDelete.do" method="POST">
<input name="memberId" type="hidden" value="${member.memberId}"/>
<button id="memberDeleteButton" type="submit">회원탈퇴</button>
</form>
</div>

</div>
</body>
</html>