영화 예매 사이트 (MoVieCinema) - 마이페이지 화면 AJAX로 띄우기

기존 마이페이지는 페이지에 들어가자마자 내 정보가 바로 뜨도록 만들었는데, 마이페이지를 들어가면 여러 항목들을 두고 선택해서 나의 정보를 볼 수 있도록 구조를 바꾸기로 했다.

마이페이지 우측 화면의 항목들을 누르면 페이지가 새로 고침 되는 것이 아니라 AJAX로 검정 부분에 해당 화면을
띄워야 한다.

이렇게 개인정보 탭을 누르면 내 정보 수정 / 비밀번호 재설정 등의 하위 탭이 나오도록 했고, 이 탭을 누르면 해당 기능을 구현해 놓은 페이지가 나오도록 기존 페이지를 연결해주어야 한다.
먼저, 개인정보 탭을 누르면 나의 정보들이 나와야 한다.

여기에 showSubMenu( ) 메서드는 개인정보가 상위 탭이므로 누르면 하위 탭들이 열리도록 해 놓은 이벤트이다.
개인정보가 있는 li 태그에 id를 이용해서 페이지를 불러오는 ajax 처리를 해준다.

컨트롤러 처리

나머지 내 정보 수정과, 비밀번호 재설정도 똑같이 연결해준다.
- 내정보 수정

컨트롤러

- 비밀번호 재설정

컨트롤러

여기까지는 각 항목에 대한 페이지를 AJAX를 통해 검정 화면에 띄우는 부분이다.

그 다음 나의 정보를 수정해서 DB에 다시 저장하는 작업을 해주어야 하는데, 원래 구현해놓은 나의 정보 수정 기능은
엔티티를 그대로 사용했는데 지금은 DTO를 따로 만들어 사용하도록 해주었다.
먼저 엔티티 중에 마이페이지에 관련한 컬럼들을 뽑아 따로 DTO를 만들어 준다.

컨트롤러

기존에 Member 엔티티 객체를 그대로 받아온 곳을 DTO 객체로 바꿔준다.
그리고 세션에 저장된 로그인 유저를 받아와 서비스로 같이 넘겨주고, 서비스에서 처리되어 넘어온 것을 멤버 객체의 updatedMember변수에 넣어준다. 그리고 다시 세션에 새로 수정된 정보를 loginUser에 넣어준다.
그래야 수정된 내용이 반영된다.

서비스

서비스로 넘어와서 로그인한 사용자의 memberId를 찾아와 해당 값을 수정해준다.
DTO 객체에 수정한 내용이 있으므로 Member 객체에 수정한 값을 넣어주고, 수정하지 않는 내용인 memberId와 password는 기존 loginUser의 값을 넣어주고, member를 반환한다. 이렇게 하지 않으면 컬럼 하나라도 null 값이 들어가면 새로운 데이터라고 인식해 새로운 행을 삽입한다.

비밀번호 재설정은 기존에 구현해 놓은 것을 이용하는데, 이미 로그인 처리가 되어서 마이페이지에서 변경을 하는 것이므로 계정 확인은 따로 안하도록 한다.

컨트롤러

myReviews.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<section>
  <div class="resetMyPw">
      <h3>비밀번호 재설정</h3>
      <form action="resetMyPw" method="post" id="resetMyPwForm">
          <table>
               <tr>
                  <th><label for="password">PW</label></th>
                  <td>
                      <div>
                          <input type="password" name="password" id="password" placeholder="영문, 숫자, 영문자 포함 8~12글자"  maxlength="12">
                           <div id="checkPwResult1" style="font-size: 0.8em; display: none;"></div>
                      </div>
                  </td>
               </tr>
                <tr>
                   <th><label for="password">PW 확인</label></th>
                   <td>
                       <div>
                           <input type="password" id="passwordCheck" placeholder="비밀번호를 한번 더 입력해주세요."  maxlength="12">
                            <div id="checkPwResult2" style="font-size: 0.8em; display: none;"></div>
                       </div>
                   </td>
                </tr>
                <tr>
                  <td colspan="2">
                       <button type="submit">재설정</button>
                  </td>
                </tr>
          </table>
          <input type="hidden" name="memberId" value="${loginUser.memberId}">
          <input type="hidden" name="username" value="${loginUser.username}">
          <input type="hidden" name="name" value="${loginUser.name}">
          <input type="hidden" name="email" value="${loginUser.email}">
          <input type="hidden" name="phoneNumber" value="${loginUser.phoneNumber}">
          <input type="hidden" name="homeAddress" value="${loginUser.homeAddress}">
      </form>
  </div>
</section>

<script>
$(() => {
    const $pwInput = $("#password");
    var getPwCheck = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@#$!%])[A-Za-z\d@#$!%]{8,12}$/;
    const $checkPwResult1 = $("#checkPwResult1");
    const $enrollFormSubmit = $("#resetMyPwForm :submit");

    $pwInput.on('input', function() {
        const pw = $pwInput.val();

        if(!pw) {
            $checkPwResult1.show().css("color", "red").text('비밀번호를 입력해주세요.');
            $enrollFormSubmit.attr("disabled", true);
            return;
        } else if (!getPwCheck.test(pw)) {
             $checkPwResult1.show().css("color", "red").text('비밀번호는 영문과 숫자, 특수기호를 포함해 8~12자 입니다.');
             $enrollFormSubmit.attr("disabled", true);
             return;
        } else {
            $checkPwResult1.show().css("color", "green").text('유효한 비밀번호입니다.');
            $enrollFormSubmit.attr("disabled", false);
        }
    })
});

$(function() {
    const $password = $("#password");
    const $passwordCheck = $("#passwordCheck");
    const $checkPwResult2 = $("#checkPwResult2");
    const $resetPwFormSubmit = $("#resetPwForm :submit");

    function validatePassword() {
        const pw = $password.val();
        const pwCheck = $passwordCheck.val();

        if (pw !== pwCheck) {
            $checkPwResult2.show().css("color", "red").text('비밀번호가 불일치합니다. 다시 입력해주세요.');
            $resetPwFormSubmit.attr("disabled", true);
        } else {
            $checkPwResult2.show().css("color", "green").text('비밀번호가 일치합니다.');
            $resetPwFormSubmit.attr("disabled", false);
        }
    }

    $password.on('input', validatePassword);
    $passwordCheck.on('input', validatePassword);
});

</script>

이 부분은 내 정보 수정처럼 변경하지 않는 값들에 대한 처리이다. 비밀번호만 재 설정하므로 기존 로그인 유저의 나머지 정보들을 hidden으로 넘겨주어 기존 행에 비밀번호 값만 바뀔 수 있도록 처리했다.