프로필 수정 및 user정보를 수정하는 부분을 작업하였다.

주요 기능

1. 프로필 수정

2. 회원 탈퇴 및 비밀번호 변경

1. 프로필 수정

사실 이 부분은 js작업 보다 서버쪽 코드 수정이 주였다.

사실 프로필 수정 자체는 form 태그의 multipart타입으로 만들면 쉽게 만들어진다.

말그대로 프로필 사진과 이름, 닉네임, 전화번호도 쉽게 수정되었다.

한가지 문제점을 내가 놓친 것이 있었는데, 만약 사용자가 게시글을 하나 이상 작성했거나, 댓글을 쓴 경우가 있는 상태에서 프로필을 바꾸면 해당 게시글과 댓글 프로필사진 및 닉네임도 변경이되어야 하는데, 그 부분을 생각하지 못했다.

게시글, 댓글, 사용자 닉네임 수정

	public Optional<UserEntity> changeUserInfo(Long userIndex, UserEntity userInfo) {
        Optional<UserEntity> user = userRepository.findById(userIndex);

        List<PostEntity> userPost = postRepository.findByUserIndex(userIndex);
        List<ReplyEntity> userReply = replyRepository.findByReplyUserIndex(userIndex);

        for(PostEntity post : userPost){
            post.setUserNickName(userInfo.getUserNickName());

            postRepository.save(post);
        }

        for(ReplyEntity reply : userReply){
            reply.setUserNickName(userInfo.getUserNickName());

            replyRepository.save(reply);
        }
        
        return user.map(p -> {
            user.get().setUserName(userInfo.getUserName());
            user.get().setUserNickName(userInfo.getUserNickName());
            user.get().setUserPhoneNumber(userInfo.getUserPhoneNumber());
        
            return p;
        })
        .map(p -> userRepository.save(p));

    }

나는 user 엔티티와 프로필 엔티티를 따로 두어 userIndex를 통해 새로운 프로필을 만들거나 수정하는 방식으로 만들었다. 그래서 위 코드에는 프로필 사진 수정에 대한 코드는 없다.(아래에서 설명할 것이다.)

return user.map(p -> {
user.get().setUserName(userInfo.getUserName());
user.get().setUserNickName(userInfo.getUserNickName());
user.get().setUserPhoneNumber(userInfo.getUserPhoneNumber());
return p;
})
.map(p -> userRepository.save(p));

가장먼저 바뀐 사용자 정보를 원래 가지고 있던 유저 정보에서 수정한다.

List<PostEntity> userPost = postRepository.findByUserIndex(userIndex);
List<ReplyEntity> userReply = replyRepository.findByReplyUserIndex(userIndex);

해당 코드는 사용자가 쓴 댓글과 게시글 전체를 가져오는 것이다.

그 다음 각각의 게시글과 댓글의 닉네임을 수정하여 저장한다.

게시글, 댓글 프로필 사진 수정

    public Optional<ProfileEntity> saveProfile(MultipartFile originFileName, Long userIndex) throws IOException {
        Optional<ProfileEntity> storeFile = fileStore.storeFile(originFileName, userIndex);
        
        List<PostEntity> userPost = postRepository.findByUserIndex(userIndex);
        List<ReplyEntity> userReply = replyRepository.findByReplyUserIndex(userIndex);

        for(PostEntity post : userPost){
            post.setStoreFileName(storeFile.get().getStoreFileName());

            postRepository.save(post);
        }

        for(ReplyEntity reply : userReply){
            reply.setStoreFileName(storeFile.get().getStoreFileName());

            replyRepository.save(reply);
        }
        return storeFile;
    }

만약 사용자가 프로필 사진을 바꾼다면 실행되는 메서드이다.

Optional<ProfileEntity> storeFile = fileStore.storeFile(originFileName, userIndex);

가장 먼저 사용자의 프로필 사진을 저장한다.

이후 위의 게시글, 댓글의 닉네임을 변경하듯이, 프로필 사진을 각각의 게시글과 댓글에 수정하여 저장시킨다.

문제점

사실 이 방법이 맞는건지 잘 모르겠다.

내가 생각한 문제점은 데이터베이스적인 문제인것 같다.

사실 나의 무지함에서 일어난 문제같다.

사용자와 댓글, 게시글은 일대다 연관관계로, jpa를 사용한다면, getUserProfile() 이런식으로 게시글에서 사용자 프로필을가져올 수 있을 것이다.

하지만, 나는 닉네임과 프로필 사진을 게시글과 댓글에 새로운 컬럼으로 넣어두었고, 그렇게 해서 타임리프를 통해 뷰단에 뿌릴수 있다고 생각했다.

만약 게시글과 댓글에 사용자의 index만 가지고 뷰단에 뿌리게 된다면, 타임리프를 통해 어떤 방식으로 사용자의 닉네임과 프로필 사진을 가져오는 방법을 모르기 때문에 위의 방식으로 프로젝트를 진행하였다.

이게 맞는 것인지 틀린 것인지도 잘 모르겠다.

우선 배포과정까지 마무리한 후 다시 한번 손봐야 할 것 같다.

회원 탈퇴 및 비밀번호 변경

해당 로직은 아주 쉽게 끝났다.

$("#withdrawBtn").click(() => {
    const confirmed = confirm("회원탈퇴를 하시겠습니까?");

    if (confirmed) {
      $.ajax({
        url: "/user/delete",
        type: "DELETE",
        success: function () {
          alert("회원탈퇴가 완료되었습니다.");

          window.location.href = "/";
        },
      });
    }
    // alert에서 취소 누르면 원상복귀
  });

말 그대로 회원 탈퇴 방법을 ajax를 사용하여 회원탈퇴 버튼을 누르면 탈퇴를 할것인지 alert를 띄우고, 취소를 누르면 취소가 되고, 확인 버튼을 누르면 회원탈퇴가 되도록 만들었다.

비밀번호 변경도 쉽게 만들었다.

$("#submitBtn").click(() => {
    const newPassword = $("#inputNewpw").val();

    // 비밀번호 변경 input 이 비어있을 경우
    if (newPassword.trim() === "") {
      alert("변경사항이 없습니다.");
      return;
    }

    // 새로운 비밀번호를 입력한 경우
    const confirmed = confirm("비밀번호를 변경하시겠습니까?");

    if (confirmed) {
      $.ajax({
        url: "/change/pw",
        type: "POST",
        data: { newPassword: newPassword },

        success: function (response) {
          alert("비밀번호를 변경하였습니다!");
        },
        error: function (xhr, status, error) {
          alert("에러가 발생했습니다.");
        },
      });
      // alert에서 취소 누르면 원상복귀
    }
  });