영화 예매 사이트 (MoVieCinema) - 마이페이지 정보 수정

마이페이지 화면 구성

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../layouts/header.jsp"/>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>


<section>
    <div class="myPage">
        <h3>마이페이지</h3>
        <c:set var="me" value="${loginUser}" />

        <form action="myPage" id="myPageForm">
            <table>
                <tr>
                    <th><label for="username">ID</label></th>
                    <td>
                            <input name="username" id="username" value="${me.username}" readonly>
                    </td>
                </tr>
                <tr>
                    <th><label for="name">NAME</label></th>
                    <td>
                        <input name="name" id="name" value="${me.name}" readonly>
                    </td>
                </tr>
                <tr>
                    <th><label for="email">EMAIL</label></th>
                    <td>
                        <input id="email" name="email" value="${me.email}" readonly>
                    </td>
                </tr>

                <tr>
                    <th><label for="phoneNumber">PHONE</label></th>
                    <td>
                            <input name="phoneNumber" id="phoneNumber" value="${me.phoneNumber}" readonly>
                    </td>
                </tr>
                <tr>
                    <th><label for="kakaoAddress">ADDRESS</label></th>
                    <td>
                        <input type="text" name="homeAddress" id="kakaoAddress" value="${me.homeAddress}" readonly>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <button><a href="/member/myPageEdit">내정보 수정하기</a></button>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</section>

<jsp:include page="../layouts/footer.jsp"/>

마이페이지 화면 띄우기 

@GetMapping("/member/myPage")
public String showMyPage(HttpSession session) {

    Member loginUser = (Member)session.getAttribute("loginUser");

    return "member/myPage";
}

컨트롤러에서 세션에 저장한 loginUser로 마이페이지 값을 불러온다. 

내 정보 수정하기 버튼을 누르면 수정 폼으로 이동한다.
수정 폼에서도 동일하게 값을 가져오고 수정할 수 있도록 아이디를 제외하고 readonly를 지워준다.
여기서 문제는 이메일을 저장할 때 email 컬럼에 emailId와 @와 emailAddress 를 합쳐서 저장했기 때문에 불러올 때는
나눠서 불러와야 한다.

<tr>
    <th><label for="email">EMAIL</label></th>
    <td>
        <div id="emailField">
            <input id="emailId" required><span id="middle">@</span><input id="emailAddress">
            <select class="form-select" aria-label="Default select example" id="emailOption"
                    onchange="handleEmailOption()" required>
                <option value="input">직접입력</option>
                <option value="@naver.com">naver.com</option>
                <option value="@hanmail.net">hanmail.net</option>
                <option value="@google.com">google.com</option>
                <option value="@apple.com">apple.com</option>
            </select>
            <input type="hidden" id="totalEmail" name="email" value="">
            <div id="checkEmailResult" style="font-size: 0.8em; display: none;"></div>
        </div>
    </td>
</tr>

이렇게 나눠서 불러오기 위한 코드

function setMyPageEditEmail(email) {
    // 이메일을 @기준으로 분리
    const emailParts = email.split('@');
    // 각각의 필드에 값을 할당 : 아이디 부분은 [0]에, 주소 부분은 [1]에 
    $("#emailId").val(emailParts[0]);
    $("#emailAddress").val(emailParts[1]);
            // @와 주소 저장
    const emailOption = "@" + emailParts[1];
    $("#emailOption").val(emailOption);

    if(emailOption === "input") {
        $("#emailAddress").attr("disabled", false);
    } else {
        $("#emailAddress").attr("disabled", true);
    }
            // 전체 이메일 설정
    $("#totalEmail").val(email);
}

function loadEmail() {
    // 사용자의 이메일 주소를 가져와 함수 호출 
    const currentUserEmail = "${me.email}";
    setMyPageEditEmail(currentUserEmail);
}
loadEmail();

사용자가 수정한 후에 DB에 저장할 때 합쳐서 저장하는 작업을 다시 해주어야 한다.

$("#emailId, #emailAddress, #emailOption").on('blur change', function() {
      email();
  });

  function email() {
      const emailId = $("#emailId").val();
      const middle = $("#middle").text();
      const emailAddress = $("#emailAddress").val();
      if(emailId != null && emailAddress != null) {
          $("#totalEmail").val(emailId+middle+emailAddress);
      }
  }
  function handleEmailOption() {
   var emailOption = $("#emailOption").val();
      if (emailOption === "input") {
          $("#emailAddress").val("").attr("disabled", false);
      } else {
          $("#emailAddress").val(emailOption.replace("@", "")).attr("disabled", true);
      }
  }