영화 예매 사이트 (MoVieCinema) - 회원 가입 시 이메일 저장

회원 가입시 발생한 문제점 : DB에 email 컬럼에 이메일 아이디와 직접입력 또는 사용자가 선택한 이메일 주소를 묶어서 같이 저장해야 하는데, 자꾸 이메일 아이디만 저장된다.

MemberEntity

@Entity
@Data
@SequenceGenerator(name = "member_SEQ", sequenceName = "member_SEQ", allocationSize = 1)
@EntityListeners(AuditingEntityListener.class)
public class Member {
    @Id
    @GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "member_SEQ")
    private Long memberId;
    private String username;
    private String password;
    private String name;
    private String email;
    private String phoneNumber;
    private String homeAddress;
    @CreatedDate
    @LastModifiedDate
    private LocalDateTime createdAt;
    private LocalDateTime modifiedAt;
    private LocalDateTime withdrawnAt;
    private Character isWithdrawn;
}

Member 엔티티는 이메일 컬럼이 한개만 있기 때문에 사용자가 입력한 이메일 아이디와 @ , 이메일 주소를 한 번에 묶어서 DB에 저장해야 한다.
따라서 register.jsp의 이메일을 입력받는 부분을 3등분? 해준다.

<div>
  <input id="emailId" required><span id="middle">@</span><input id="emailAddress">
  <select class="form-select" aria-label="Default select example" id="emailOption"
          onchange="handleEmailOption()">
      <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>

<input id="emailId" required><span id="middle">@</span><input id="emailAddress">

아이디 받는 부분, @ 들어가는 부분과 주소가 들어가는 부분으로 나누어 주고, 각 input에 id를 부여해준다.

그러면 사용자가 아이디와 주소를 직접 입력하거나 선택한다.

$("#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);
    }
}

.on('blur change', function() { ... }); 는 선택된 요소들에 이벤트 핸들러를 연결하는 jQuery 메서드로 
여기서는 blur와 change 이벤트에 대한 핸들러를 연결한다.
- blur 이벤트는 해당 요소가 포커스를 잃을 때 발생한다.
- change 이벤트는 입력 요소의 값이 변경될 때 발생한다.

function() { email(); }); 은 지정된 이벤트가 선택된 요소들에서 발생할 때 실행할 콜백 함수로 email ( ) 함수를 호출한다.
email ( ) 함수에서는 사용자가 입력한 emailId와 @와 이메일 주소 값을 추출해서 변수에 저장하고 
emailId와 emailAddress가 모두 null이 아니라면, #totalEmail이라는 요소의 값을 emailId + middle + emailAddress로 설정한다.

 <input type="hidden" id="totalEmail" name="email" value="">

#totalEmail의 name은 "email"로 내가 정한 DB 컬럼에 저장이 된다.

function handleEmailOption() {
var emailOption = $("#emailOption").val();
  if (emailOption === "input") {
      $("#emailAddress").val("").attr("disabled", false);
  } else {
      $("#emailAddress").val(emailOption.replace("@", "")).attr("disabled", true);
  }
}

if (emailOption === "input") {
만약 emailOption 값이 input인 경우 ( 사용자가 직접 입력을 선택한 경우 ) #emailAddress 요소의 값을 비우고 ( disabled 속성을 해제하고 ) 사용자가 입력할 수 있도록 설정한다.
} else { 
그렇지 않으면 ( 사용자가 직접 입력을 선택하지 않은 경우 ), #emailAddress 요소의 값을 emailOption에서 @ 문자를 제거한 값으로 설정하고, 입력 필드를 비활성화 해준다.