Mypage-내정보수정

가장 먼저 mypage에 내정보수정 섹션을 먼저 구현하려고 하고, 그 중 비밀번호와 휴대폰 번호 수정이 가능하도록 설정 했다.

내정보에서 아이디,비밀번호,이름,휴대폰 번호 이렇게 4가지의 정보를 나타냈고, 아래와 같이 작업을 진행 했다.

내정보가져오기

// 마이페이지로 이동 (사용자 정보 가져오기)
@GetMapping("/mypage")
public String mypage(Model model, @CookieValue(value = "Authorization", required = false) String token) {
    String userId = jwtUtil.getUserIdFromToken(token); // 현재 로그인한 유저 식별키
    UserDTO userDTO = memberServiceImpl.userInfo(userId);

    if (userDTO == null) {
        throw new UsernameNotFoundException("사용자를 찾을 수 없습니다: " + userId);
    }
    model.addAttribute("user", userDTO);

    return "member/mypage";
}

• @CookieValue(value = "Authorization", required = false) String token: "Authorization"이라는 쿠키를 통해 JWT 토큰 가져옴
• jwtUtil.getUserIdFromToken(token) : 메서드를 사용하여 사용자 ID(userId)를 추출
• 추출한 userId를 사용하여 userInfo(userId) 메서드를 호출 : 사용자 정보를 조회하고, UserDTO 객체에 담아 반환 
• model.addAttribute("user", userDTO) : 사용자 정보가 담겨있는 객체를 뷰에서 사용할 수 있도록 모델에 담는다

비밀번호 변경

// 비밀번호 변경 요청
$.ajax({
    type: "POST",
    url: "/update-password",
    contentType: "application/json",
    data: JSON.stringify({
        currentPassword: currentPassword,
        newPassword: newPassword
    }),
    success: function(response) {
        if (response.success) {
            alert('비밀번호가 성공적으로 변경되었습니다.');
            document.getElementById('passwordChangeFields').style.display = 'none';
            document.getElementById('currentPassword').value = ''; // 현재 비밀번호 필드 비우기
            document.getElementById('newPassword').value = ''; // 새 비밀번호 필드 비우기
            document.getElementById('confirmNewPassword').value = ''; // 새 비밀번호 확인 필드 비우기
        }
        else {
            alert('비밀번호 변경에 실패했습니다: ' + response.error);
        }
    },
    error: function(xhr, status, error) {
        console.error('비밀번호 변경 중 오류 발생:', error);
        alert('비밀번호 변경 중 오류가 발생했습니다.');
    }
});

현재 비밀번호와 새 비밀번호를 확인하고, 서버에 비밀번호 변경 요청 (ajax)

-> 사용자가 입력한 새비밀번호, 현재 비밀번호 서버에 전달

// 마이페이지 비밀번호 변경
@PostMapping("/update-password")
@ResponseBody
public Map<String, Object> updatePassword(@RequestBody Map<String, String> param, @CookieValue(value = "Authorization", required = false) String token) {
    // 응답을 담을 Map 객체 생성
    Map<String, Object> response = new HashMap<>();
    try {
        // param에서 currentPassword와 newPassword 키의 값 추출
        String currentPassword = param.get("currentPassword");
        String newPassword = param.get("newPassword");

        // 사용자 식별
        String userId = jwtUtil.getUserIdFromToken(token);

        // 현재 비밀번호 확인
        if (!memberServiceImpl.checkCurrentPassword(userId, currentPassword)) {
            response.put("success", false);
            response.put("error", "현재 비밀번호가 일치하지 않습니다.");
            return response;
        }
        // 현재 비밀번호가 일치할 경우, 새 비밀번호로 업데이트
        memberServiceImpl.updatePassword(userId, newPassword);

        // 성공 응답
        response.put("success", true);
    } catch (Exception e) {
        // 실패 응답
        response.put("success", false);
        response.put("error", "비밀번호 변경에 실패했습니다. 다시 시도해주세요.");
    }
    // 응답 결과 반환
    return response;
}

========================================================================================
    public boolean checkCurrentPassword(String userId, String currentPassword) {
        // 사용자 정보 가져오기
        UserDTO userDTO = memberMapper.findByUserInfo(userId);
        // 데이터베이스에 담긴 현재 비밀번호
        String password = userDTO.getUserPwd();
        // 사용자가 입력한 비밀번호와 확인
        return passwordEncoder.matches(currentPassword, password);
    }

• memberServiceImpl.checkCurrentPassword(userId, currentPassword) : 데이터 베이스에 담긴 현재 비밀번호와 사용자가 입력한 비밀번호가 일치하는지 확인하는 메서드
• passwordEncoder.matches() 메서드는 암호화된 비밀번호와 입력된 비밀번호를 비교하여 일치 여부를 반환
• memberServiceImpl.updatePassword(userId, newPassword) : 새로운 비밀번호를 업데이트 하는 메서드 (새로운 비밀번호 암호화 진행후 업데이트)

--> 응답 결과(response)를 반환하여 처리를 완료

아래는 현재 비밀번호가 일치 하지 않을때 반환된 에러 문구

아래는 성공적으로 변경되었을 때 반환되는 성공 응답이다!

휴대전화 번호 변경

인증번호 전송이나 유효성검사는 회원가입때 진행했던 코드를 재사용 하였고, 여기선 서버와 연결해서 휴대전화 번호를 변경하는 로직만 작성했다.

// 휴대전화 번호 변경 저장 버튼
document.getElementById("savePhoneButton").addEventListener('click', function() {
    // 새로운 휴대폰 번호의 유효성을 검증하는 함수 호출
    validatePhone();
    
	// 유효할 경우(유효할 때 나타나는 색상)에만 sms 전송 요청
    validatePhoneCheck = document.getElementById("phoneMsg").style.color === "rgb(170, 170, 170)";

    const newPhone = document.getElementById("newPhone").value;

    if (window.isVerified && validatePhoneCheck) {
        $.ajax({
            type: "POST",
            url: "/update-phone",
            contentType: "application/json",
            data: JSON.stringify({
                newPhone: newPhone,
            }),
            success: function(response) {
                if (response.success) {
                    alert('휴대폰 번호가 성공적으로 변경되었습니다.');
                    document.getElementById('phoneChangeFields').style.display = 'none';

                    // 성공적으로 변경되었을 경우 필드값 비우기
                    document.getElementById("newPhone").value = '';
                    document.getElementById("verificationCode").value = '';
                    document.getElementById("phoneMsg").innerText = '';
                    document.getElementById("codeMsg").innerText = '';
                    document.getElementById("timerMsg").innerHTML = '';

                    // 현재 표시된 사용자 휴대폰 번호 업데이트
                    document.getElementById("phone").value = newPhone;

                    // window.isVerified 초기화
                    window.isVerified = false;
                }
                else {
                    alert('휴대폰 번호 변경에 실패했습니다: ' + response.error);
                }
            },
            error: function(xhr, status, error) {
                console.error('휴대폰 번호 변경 중 오류 발생:', error);
                alert('휴대폰 번호 변경 중 오류가 발생했습니다.');
            }
        });
    }
    else {
        alert('전화번호 입력이 유효하지 않거나 인증번호가 잘못되었습니다.');
    }
});

window.isVerified ( 인증 성공 플래그 설정)  -> 전역적으로 사용할 수 있는 변수로 등록

휴대전화 번호 인증이 성공하고, 휴대전화 번호 유효성 메시지가 유효할 때 서버에 휴대폰 번호변경 요청 (ajax)

-> 사용자가 입력한 새전화번호 서버에 전달

// 마이페이지 휴대전화 번호 변경
@PostMapping("/update-phone")
@ResponseBody
public Map<String, Object> updatePhone(@RequestBody Map<java.lang.String, java.lang.String> param, @CookieValue(value = "Authorization", required = false) String token) {
    // 응답을 담을 Map 객체 생성
    Map<String, Object> response = new HashMap<>();
    // 요청에서 새 전화번호 추출
    String newPhone = param.get("newPhone");

    // 사용자 식별
    String userId = jwtUtil.getUserIdFromToken(token);

    // 새로운 휴대전화 번호 업데이트
    try {
        memberServiceImpl.updatePhoneNumber(newPhone, userId);
        // 성공 응답
        response.put("success", true);
        response.put("message", "휴대전화 번호가 성공적으로 변경되었습니다.");
    } catch (Exception e) {
        // 오류 발생 시
        response.put("success", false);
        response.put("error", "휴대전화 번호 변경 중 오류가 발생했습니다.");
    }
    return response;
}

• memberServiceImpl.updatePhoneNumber(newPhone, userId) : 새전화번호와 userId를 매개변수로 사용하여 새로운 전화번호를 업데이트하는 메서드

--> 응답 결과(response)를 반환하여 처리를 완료

이렇게 성공적으로 변경되었을때 반환되는 응답이다!