DAY 66 - 스프링 프레임워크 MVC HOMEWORK - 회원탈퇴 (2024.10.10)

updateForm.jsp

회원탈퇴 버튼 만들기

    <tr>
        <td colspan="2" style="text-align: center;" >
           <div class="button-container">
               <input type="button" onclick="location.href='/spring2/user/list?pg=${pg}'" value="목록">
               <input type="button" id="updateBtn" value="수정하기">
               <input type="button" id="deleteBtn" value="회원탈퇴">
               <input type="reset" value="다시입력">
           </div>
        </td>
    </tr>

 

탈퇴버튼 누르면 나올 비밀번호 확인 모달 창 추가

    <div id="overlay" style="display:none;"></div>
    
	<!-- 비밀번호 확인 모달 -->
	<div id="deleteModal" style="display:none;">
	    <div class="modal-content">
	        <h3>비밀번호 확인</h3>
	        <p>회원탈퇴를 위해 비밀번호를 입력하세요.</p>
	        <input type="password" id="confirmPwd" placeholder="비밀번호">
	        <div id="confirmPwdDiv"></div>
	        <input type="button" id="confirmDeleteBtn" value="삭제">
	       	<input type="button" id="cancelBtn" value="취소">
	    </div>
	</div>
</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="../js/update.js"></script>
<script src="../js/delete.js"></script>
</body>
</html>

---

delete.js

$(function () {
     // 회원탈퇴
    $('#deleteBtn').on('click', function() {
    	$('#overlay').show(); 
        $('#deleteModal').show();
    });

    $('#confirmDeleteBtn').on('click', function() {
        $('#confirmPwdDiv').empty();
        let isValid = true;
        // 비밀번호 검사
        if ($('#confirmPwd').val().trim() === '') {
            $('#confirmPwdDiv').html('비밀번호를 입력하세요.').css('color', 'red');
            $('#confirmPwd').focus();
            isValid = false;;
        }
        
        if(isValid){
	        $.ajax({
	            type: 'post',
	            url: '/spring2/user/delete', 
	            data: {
	                'id': $('#id').val(),
	                'name': $('#name').val(),
	                'pwd': $('#confirmPwd').val(),
	            },
	            success: function() {
	            	alert('회원탈퇴가 완료되었습니다.');
	                location.href = "/spring2/user/list?pg=1";
	            },
	            error: function(e) {
	                console.log(e);               
	            }
	        });
		}
    });

    $('#cancelBtn').on('click', function() {
     	$('#overlay').hide();
        $('#deleteModal').hide();
        $('#confirmPwd').val(''); 
    });
});

---

UserController.java

	@ResponseBody	
	@RequestMapping(value="user/delete", method = RequestMethod.POST)
	public void delete(@ModelAttribute UserDTO userDTO) {
		String confirmPwd = userDTO.getPwd();
		UserDTO userDTO2 = userService.getUserById(userDTO.getId());
		System.out.println("userDTO = " + userDTO);
		System.out.println("confirmPwd = " + confirmPwd);
		System.out.println("userDTO2 = " + userDTO2);
		
		if(confirmPwd.equals(userDTO2.getPwd())) {
			userService.delete(userDTO);
		}
	}

---

UserService.java

public void delete(UserDTO userDTO);

package user.service;

import java.util.List;
import java.util.Map;

import user.bean.UserDTO;

public interface UserService {
	public String getExistId(String id);

	public void write(UserDTO userDTO);

	public Map<String, Object> list(String pg);

	public UserDTO getUserById(String id);

	public void update(UserDTO userDTO);

	public void delete(UserDTO userDTO);
}

---

UserDAO.java

public void delete(UserDTO userDTO);

package user.dao;

import java.util.List;
import java.util.Map;

import org.apache.ibatis.annotations.Mapper;

import user.bean.UserDTO;

@Mapper
public interface UserDAO {

	public UserDTO getExistId(String id);
	
	public void write(UserDTO userDTO);
	
	public UserDTO getUserById(String id);
	
	public void update(UserDTO userDTO);

	public void delete(UserDTO userDTO);

	public List<UserDTO> list(Map<String, Integer> map);

	public int getTotalA();

}

---

userMapper.xml

    <delete id="delete" parameterType="user">
        DELETE FROM usertable WHERE id = #{id};
    </delete>

---

스프링은 객체를 자동으로 JSON으로 변경해준다.

예전처럼 JSONObject 만들어서 할 필요없다.https://mvnrepository.com/

 

pom.xml

json-lib

jackson-core

jackson-bind

 

 

aws api를 이용하여 네이버 클라우드 Object Storage에 올린적이 있다.

이 때  api를 7개인가 넣어놨었다.

이건 서로 의존성이 없기 때문에 다 받아놨지만

위에꺼는 서로 의존성을 가지고 들어온다.

 

json-lib

<classifier>jdk15</classifier> 이거 추가해줘야 함

---

jackson-core

---

jackson-bind

		<!-- JSON -->
		<dependency>
		    <groupId>net.sf.json-lib</groupId>
		    <artifactId>json-lib</artifactId>
		    <version>2.4</version>
		    <classifier>jdk15</classifier>
		</dependency>
		
		<dependency>
		    <groupId>com.fasterxml.jackson.core</groupId>
		    <artifactId>jackson-core</artifactId>
		    <version>2.17.2</version>
		</dependency>	
		
		<dependency>
		    <groupId>com.fasterxml.jackson.core</groupId>
		    <artifactId>jackson-databind</artifactId>
		    <version>2.17.2</version>
		</dependency>

---

비밀번호 틀렸을 때 부분을 안했다,,,! 그 부분 추가해보면

 

delete.js

$(function () {
     // 회원탈퇴
    $('#deleteBtn').on('click', function() {
    	$('#overlay').show(); 
        $('#deleteModal').show();
    });

    $('#confirmDeleteBtn').on('click', function() {
        $('#confirmPwdDiv').empty();
        let isValid = true;
        // 비밀번호 검사
        if ($('#confirmPwd').val().trim() === '') {
            $('#confirmPwdDiv').html('비밀번호를 입력하세요.').css('color', 'red');
            $('#confirmPwd').focus();
            isValid = false;;
        }
        
        if(isValid){
        	$.ajax({
        		type: 'post',
        		url: '/spring2/user/getExistPwd',
	            data: {
	                'id': $('#id').val(),
	                'pwd': $('#confirmPwd').val()
	            },
        		dataType: 'json', // 서버로부터 받는 데이터
 				success: function(data) {
                    if (data) { // 비밀번호가 일치하는 경우
                        // 회원탈퇴 요청
                        $.ajax({
                            type: 'post',
                            url: '/spring2/user/delete',
                            data: {
                                'id': $('#id').val(),
                                'name': $('#name').val(),
                                'pwd':  $('#confirmPwd').val()
                            },
                            success: function() {
                                alert('회원탈퇴가 완료되었습니다.');
                                location.href = "/spring2/user/list?pg=1";
                            },
                            error: function(e) {
                                console.log(e);
                            }
                        });
                    } else {
                        $('#confirmPwdDiv').html('비밀번호가 일치하지 않습니다.').css('color', 'red');
                    }
                },
                error: function(e) {
                    console.log(e);
        		}
        	});   
		}
    });

    $('#cancelBtn').on('click', function() {
     	$('#overlay').hide();
        $('#deleteModal').hide();
        $('#confirmPwd').val(''); 
    });
});

---

UserController.java

	@ResponseBody
	@RequestMapping(value="user/getExistPwd", method = RequestMethod.POST)
	public boolean getExistPwd(@RequestParam String id,  @RequestParam String pwd) {
		UserDTO user = userService.getUserById(id);
		return user != null && user.getPwd().equals(pwd);
	}
    
	@ResponseBody	
	@RequestMapping(value="user/delete", method = RequestMethod.POST)
	public void delete(@ModelAttribute UserDTO userDTO) {
		userService.delete(userDTO);
	}

---

강사님 답

UserController.java

	@ResponseBody
	@RequestMapping(value="user/getExistPwd", method = RequestMethod.POST)
	public UserDTO getExistPwd(@RequestParam String id, Model model) {
		UserDTO user = userService.getUserById(id);
		
		//스프링은 객체를 자동으로 JSON으로 변경해준다.		
		return userService.getExistPwd(id);
	}

원래는 ajax로 다시 돌아갈 때 UserDTO를 들고가려면 JSONObject를 만들어서 해야되지만

위에서 우리가 설정을 했기 때문에 자동으로 JSON으로 변경을 해준다 !

class UserDTO {

      name, id, pwd

}

        ↓ JSON

{

       'name': 홍길동, 'id': hong,

}

이런식으로 알아서 해주는 것 !

---

userMapper.xml

    <select id="getExistPwd" parameterType="String" resultType="user">
        SELECT * FROM usertable WHERE id = #{id};
    </select>

---

delete.js

       	$.ajax({
        		type: 'post',
        		url: '/spring2/user/getExistPwd',
	            data: {
	                'id': $('#id').val(),
	                'pwd': $('#confirmPwd').val()
	            },
        		dataType: 'json', // 서버로부터 받는 데이터
            success: function(data) {
                if(data.pwd == $('#confirmPwd').val()){
                        // 회원탈퇴 요청
                        $.ajax({
                            type: 'post',
                            url: '/spring2/user/delete',
                            data: {
                                'id': $('#id').val(),
                                'name': $('#name').val(),
                                'pwd':  $('#confirmPwd').val()
                            },
                            success: function() {
                                alert('회원탈퇴가 완료되었습니다.');
                                location.href = "/spring2/user/list?pg=1";
                            },
                            error: function(e) {
                                console.log(e);
                            }
                        }); 						
                } else {
                    $('#confirmPwdDiv').html('비밀번호가 일치하지 않습니다.').css('color', 'red');
                }
            	} 
        });

 

강사님은 이런식으로 먼저 아이디를 보내서 그 아이디에 해당하는 UserDTO를 json객체로 받아서

UserDTO에 있는 pwd와 내가 입력한 pwd가 같은지를 비교해서 같으면 delete를 처리하는 ajax를 부르게하였다 !!

 

약간의 방법의 차이일뿐 !!

대신 json 객체를 스프링이 알아서 변경해준다는걸 알게되었다 !!!