Alpine.js 기초 이벤트(event) #3

Alpine.js 기초
이벤트(event)
#3

 

 

 

 

---

 

상황

• Alpine.js 기초, 셋팅 #2 에 이어 이제 이벤트들을 달아보려고 한다.

 

개발 - 이벤트 

• 벨리데이션 체크 함수들은 기초 유효성 체크 #2번에서 첨부한 validation.js 라이브러리를 사용한다. 
  https://yourusername.tistory.com/143

Alpine.js 기초 유효성 (validation) 체크 #2

 

• 오류나 장애로 인한 처리는 일단 표시만 해놓고 backend 처리할때 추가작업을 해준다.

1. 이름, 핸드폰번호가 입력되지 않은 상태에서 인증번호전송 버튼을 누르면 오류메시지를 input창 아래 띄워주고 제일 처음 걸리는 유효성 검증 오류를 alert으로 띄워준다.

2. 이름과 핸드폰번호가 정상적으로 입력되어 있는 상태에서 인증번호 전송 버튼을 클릭하면 인증번호를 발송한다. 
    + 발송 실패 처리 필요 ( 서버장애나, 기타 오류 발생시 ) * 나중에 backend 구현할때 하자
    + 발송 성공시 displayChkTime 값을 chkTime값으로 바꿔주고 "인증번호가 발송되었습니다. ~ 초안에 인증번호를 입력하고, 확인하기 버튼을 눌러주세요" 라고 알림 메시지 띄워준다

3. 인증번호 전송 성공 시 인증번호 입력 창 아래 displayChkTime 값을 보여주고 -1씩. 카운트다운한다. ( 59s 58s 57s ...) 그리고 인증번호 전송버튼은 disable 해준다. ( 60초동안 클릭하지 못하게 )

4. displayChkTime이 0이 되면 인증번호 입력 창 아래 displayChkTime 값 보여주던걸 숨기고 인증번호 전송 버튼을 enable  로 바꿔준다. (다시 인증 요청 할수있게)

5. 인증번호 입력창은 displayChkTime이  0보다 클경우에만 enable 해준다. (60초동안 인증번호 입력할수 있게)

6. displayChkTime이 0이 되면 인증번호 입력창을 disable 하고 값이 있었다면 없애 준다 

7. 인증번호 입력창에 값이 없다면 확인버튼 클릭 시 "인증번호를 입력 후 확인버튼을 눌러주세요" 라고 메시지를 띄워준다.

8. 인증번호 입력창에 값이 있다면 확인버튼을 클릭하면 인증번호 확인 절차 필요 * 나중에 backend 구현할때 하자
    + 인증번호 입력창에 값만 있다면 일단 "인증성공" 이라고 띄워준다.

 

• 1번, 인증번호 전송 버튼에 일단 클릭이벤트 추가한다 @click= 함수

<button x-text="table.authNumSendBtnLabel" @click="sendAuthNumber()"></button>

 

• 그리고 Alpine data에 sendAuthNumber 함수를 추가하고, 함수 안에 checkValidationAll() 를 해서 false일 경우 제일 처음 걸리는 유효성 검증 오류를 alert으로 띄워준다.

checkValidationAll
x-validation 이라고 추가된 element들의 값에서 벨리데이션 체크 해서 true, false 를 리턴하는 함수

getFirstValidErrorMessage
validation 체크해서 첫번째 걸리는 오류 메시지를 리턴한다.

Alpine.data("data", () =>
    Object.assign(
      {
        title: "인증하기",
        ...
        displayChkTime: 0,
        sendAuthNumber: function(){
            var isValid = this.checkValidationAll();
            if(!isValid){
                alert(this.getFirstValidErrorMessage());
            }
        }
    }, vaidatableForm()));
});

 

• [2-4번] 이름, 핸드폰번호가 정상적으로 입력되었을 경우 전송 메시지를 띄워주고 카운트 다운을 시작한다. (setInterval 사용)

sendAuthNumber: function () {
  var isValid = this.checkValidationAll();
  if (!isValid) {
    // 유효성 검증 error
    alert(this.getFirstValidErrorMessage());
  } else {
    alert(this.defaultChkTime +"초 안에 인증번호를 입력하고, 확인하기 버튼을 눌러주세요.");
    // 유효성 검증 success
    // displayChkTime를 기본 값으로 셋팅
    this.displayChkTime = this.defaultChkTime;
    // defaultChkTime 으로 -1씩 카운트 다운 시작 
    let interval = setInterval(() => {
      this.displayChkTime--;
      if (!this.isRunTimer || this.displayChkTime < 1) {
        clearInterval(interval);
        this.displayChkTime = 0;
        this.isRunTimer = false;
      }
    }, 1000);
  }
}

 

• 버튼에 x-bind:disabled="displayChkTime > 0" 값을 주어서 chkTime이 0보다 클때 버튼이 disable 되도록 설정한다.
• 인증번호 입력창 아래 span 엘리먼트에 displayChkTime가 0보다 클때만 나타나도록 설정하고, x-text로 displayChkTime이 찍히도록 한다 ( 카운트다운 )
• [5-6번] 인증번호 입력창은 x-bind:disable로 displayChkTime가 1보다 작으면 disable시키도록 한다 (크면 enable된다)

...
<button x-text="table.authNumSendBtnLabel" @click="sendAuthNumber()" x-bind:disabled="displayChkTime > 0"></button>
...
<!-- 인증번호 입력창 -->
<input id="authNumInput" type="text" x-model="table.authNumInput" x-bind:disabled="displayChkTime < 1" />
<button x-text="confirmBtnLabel"></button>
<br>
<span x-text="displayChkTime +'s'" x-show="displayChkTime > 0"></span>

 

• this.isRunTimer = false; 밑에  this.table.authNumInput = ""; 를 넣어준다 (러너가 false거나, displayChkTime이 1 이하로 떨어지면 즉, 0이면 인증번호 입력창에 값을 "" 으로 바꿔라라는 의미)

let interval = setInterval(() => {
  this.displayChkTime--;
  if (!this.isRunTimer || this.displayChkTime < 1) {
    clearInterval(interval);
    this.displayChkTime = 0;
    this.isRunTimer = false;
    this.table.authNumInput = "";
  }
}, 1000);

 

• [7-8]번은 authNumConfirm() 함수를 만든다음 확인하기 버튼에 @click= 에 달아준다, authNumConfirm 함수 내용은 인증번호 입력창에 값이 있다면 "인증확인", 없다면 "인증번호 입력 후 확인버튼을 눌러주세요" 라고 alert으로 띄워준다.