키패드로 비밀번호 입력하기 (HTML+SASS+JavaScript)

키보드에서 입력을 받지 않고 직접 키패드를 클릭하여 비밀번호를 체크하는 기능을 만들어보았습니다. 

참고로 단순히 웹단에서 정해진 값을 입력값과 비교하는 로직만 있습니다. 

자바스크립트는 OOP기반으로 작성하였습니다. 

결과화면

 

 

1. 마크업 스타일

<div class="pwWrap">
    <div class="pwSection">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <p class="message">&nbsp;</p>
    </div>
    <div class="numberSection">
        <button class="number">1</button>
        <button class="number">2</button>
        <button class="number">3</button>
        <button class="number">4</button>
        <button class="number">5</button>
        <button class="number">6</button>
        <button class="number">7</button>
        <button class="number">8</button>
        <button class="number">9</button>
        <button class="number">0</button>
    </div>
</div>

1-1. SCSS사용시

$errorColor: red;
$confirmColor: green; 

.pwWrap {
  width: 80%; 
  max-width: 450px;
  background: lightGrey; 
  margin: 20px auto;
  
  .pwSection {
    position: relative; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    height: 150px; 
    .dot {
      display: block; 
      width: 10px; 
      height: 10px; 
      background: darkgrey;
      border-radius: 100%; 
      margin: 0 5px;
      &.active {
        background: rgba(0,0,0,0.7);
      }
    }
    .message {
      position: absolute; 
      bottom: 5px; 
      left: 0; 
      z-index: 1; 
      min-width: 100%;
      text-align: center; 
      font-size: 14px;
      font-weight: bold;
      letter-spacing: -0.03em;
      opacity: 0; 
      transition: .2s ease-out;
    }
  }
  .numberSection {
    overflow: hidden;
    .number {
      float: left; 
      width: 33.33%;
      border: 1px solid rgba(0,0,0,0.1); 
      padding: 12px 0;
      cursor: pointer; 
      background: #F8F2F2;
      &:last-child {
        margin-left: 33.33%;
      }
    }
  }
  
  &.error {
     .message {
        opacity: 1; 
        color: $errorColor; 
      }
  }
  &.confirm {
     .message {
        opacity: 1; 
        color: $confirmColor; 
      }
  }
}

1-2. CSS 사용 시

.pwWrap {
  width: 80%;
  max-width: 450px;
  background: lightGrey;
  margin: 20px auto;
}

.pwWrap .pwSection {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150px;
}

.pwWrap .pwSection .dot {
  display: block;
  width: 10px;
  height: 10px;
  background: darkgrey;
  border-radius: 100%;
  margin: 0 5px;
}

.pwWrap .pwSection .dot.active {
  background: rgba(0, 0, 0, 0.7);
}

.pwWrap .pwSection .message {
  position: absolute;
  bottom: 5px;
  left: 0;
  z-index: 1;
  min-width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: -0.03em;
  opacity: 0;
  transition: .2s ease-out;
}

.pwWrap .numberSection {
  overflow: hidden;
}

.pwWrap .numberSection .number {
  float: left;
  width: 33.33%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 12px 0;
  cursor: pointer;
  background: #F8F2F2;
}

.pwWrap .numberSection .number:last-child {
  margin-left: 33.33%;
}

.pwWrap.error .message {
  opacity: 1;
  color: red;
}

.pwWrap.confirm .message {
  opacity: 1;
  color: green;
}

 

2. 스크립트 작성하기

저는 이렇게 만들어보았습니다. 

 

1. 숫자 버튼 클릭, 클릭된 숫자를 배열에 담기

2. 버튼 클릭 횟수 체크

3. 버튼 클릭 횟수가 4일 때 넘어온 비밀번호와 입력한 값 비교

4. 3번 비교가 틀리면 리셋 및 에러 메시지 출력

5. 3번 비교가 맞으면 성공 메세지 출력

 

pwCheck라는 함수를 생성한 뒤, 내부에 필요한 변수를 지정합니다. 

필요한 객체들도 불러옵니다. 

function PwCheck(pw) { 
    const _this = this; 
    _this.pwStr = pw.toString(); // 문자, 숫자열을 모두 허용하기 위해 무조건 한가지 타입으로 맞춤
    _this.password = []; // 지정된 패스워드
    _this.passwordNumber = []; // 입력할 패스워드
    _this.cnt = 0; // 입력횟수 체크
    _this.compChk = false; // 입력완료 체크 
    _this.msg = [
        'Wrong Password! Try Again! 👿',
        'Success! 😍'
    ]; 
    _this.parent = document.querySelector('.pwWrap');
    _this.dots = document.querySelectorAll('.dot');
    _this.numbers = document.querySelectorAll('.number');
    _this.message = document.querySelector('.message');
    
}

여기서 this는 pwCheck함수를 가리키며, this를 _this안에 담았기 때문에, 

안에서 선언한 변수와 함수들은 외부에서 바로 접근이 되지 않습니다. 

 

PwCheck에서 넘겨받는 pw를 실제 비밀번호라고 가정합니다. 

pw를 굳이 string으로 받는 이유는 넘어오는 pw가 숫자인 경우 배열에 넣지 못하기 때문입니다. 

반드시 배 열대 배열로 비교할 필요는 없지만 저는 입력받은 값을 하나씩 배열에 담기 때문에 배열끼리 비교를 하고자 합니다. 

 

먼저 받은 pw값을 받자마자 배열화 합니다.

    // 비밀번호를 배열에 넣음 
    _this.getPw = function(){
        for(let i=0; i<_this.pwStr.length; i++) {
            _this.password[i] = _this.pwStr[i];
        }
    }

이렇게 선언한 뒤 즉시 실행시켜주기 위해 init함수를 하나 더 만들 겁니다. 

init내부 함수들은 모두 즉시 호출됩니다.

    _this.init = function(){
        _this.getPw();
    }();

 

그리고 즉시 실행되어야 할 함수가 하나  더 있습니다. 

버튼 클릭 이벤트입니다. 

{...}    
    
    // 숫자버튼 click이벤트 연동
    _this.handleListener = function(){
        if(!_this.compChk) {
            _this.numbers.forEach(function(number){
                number.addEventListener('click', function(){console.log("number")});
            })
        }
    }
    
    _this.init = function(){
        _this.handleListener();
        _this.getPw();
    }();

이렇게 하면 각각 클릭한 버튼을 제대로 가지고 옵니다. 

이때 원래는 id를 두거나 따로 attribute를 따로 설정하여 value값을 지정하지만, 저는 그냥 textContent로 가져왔습니다.

 

handleNumber라는 함수를 따로 두고 여기에 클릭한 숫자를 넘길 겁니다. 

클릭할 때마다 passwordNumber 배열에 하나씩 넣어주고 카운트를 증가시켜줍니다. 

만약 카운트가 4가 된다면, handleResult함수로 넘겨 결과를 처리합니다. 

그리고 UI를 담당하는 handleDotActive라는 함수를 두고 입력한 숫자는 동그라미 색을 바꿔줍니다. 

 

    // 숫자키를 눌렀을때 이벤트 
    _this.handleNumber = function(number){
        _this.passwordNumber[_this.cnt] = number.textContent;
        _this.handleDotActive(true);
        _this.cnt++; //  _this.passwordNumber[_this.cnt] 넣어준 후에 증가시켜주세요!
        if(_this.cnt === 4) {
            _this.handleResult();
        }
    }
    // dot 활성화 
    _this.handleDotActive = function(type){
        if(type) {
            _this.dots.forEach(function(dot, i){
                if(i === _this.cnt) dot.classList.add('active'); 
            })
        } else {
            _this.dots.forEach(function(dot){
               dot.classList.remove('active'); 
            })
        }
    }
    // 결과처리 
    _this.handleResult = function(){
        // 결과처리하는 구간!
    }

handleDotActive에서 type을 받는 이유는 비밀번호가 틀렸을 경우 리셋을 처리하는 부분을 같이 사용하기 위해서입니다. 이제 handleResult까지 마무리해봅시다. 

저는 비교만 하는 함수를 따로 두어 boolean값을 리턴하도록 하였습니다. 

    // 비밀번호 비교
    _this.handleCheckPw = function(){
        let compare = JSON.stringify(_this.password) === JSON.stringify(_this.passwordNumber);
        return compare; 
    }
    // 결과처리 
    _this.handleResult = function(){
        if(_this.handleCheckPw()) { 
        	// 비밀번호 맞으면
            _this.parent.classList.add('confirm');
            _this.message.textContent = _this.msg[1];
            _this.compChk = true;
        } else {
        	// 비밀번호 틀리면
            _this.parent.classList.add('error');
            _this.message.textContent = _this.msg[0];
            // 입력상태 초기화 
            _this.passwordNumber = [];
            _this.cnt = 0; 
            setTimeout(function(){
                _this.parent.classList.remove('error');
                _this.handleDotActive(); // 동그라미 UI 초기화
            }, 800);
        }
    }

JSON.stringify로 전체 문자를 비교해야 순서까지 통째로 비교가 됩니다. 

( for문으로도 비교할 수 있지만 이게 훨씬 간단하고 편해요! )

비밀번호가 틀렸을 때 setTimeout을 통해 에러 문구를 잠시 보여준 뒤 다시 입력할 수 있도록 상태 초기화를 시켜줍니다. 

이렇게 하면 완성인 것 같지만! 🤔

 

에러 문구가 떠있는 동안 다른 키를 눌러버린다면, 그 눌린 값이 쌓여 버리게 돼요!

그래서 에러 문구가 떠있는 동안에는 키 입력을 해도 동작이 되지 않도록 막아야 합니다. 

그래서 _this.comp라는 변수를 정의해 놓았습니다. 

 

{...}

    // 숫자버튼 click이벤트 연동
    _this.handleListener = function(){
        if(!_this.compChk) { // 추가!
            _this.numbers.forEach(function(number){
                {...}
            })
        }
    }
    
    // 숫자키를 눌렀을때 이벤트 
    _this.handleNumber = function(number){
        if(!_this.compChk) { // 추가
            _this.passwordNumber[_this.cnt] = number.textContent;
            {...}
        }
    }
    
        // 결과처리 
    _this.handleResult = function(){
        if(_this.handleCheckPw()) {
           {...}
            _this.compChk = true;
        } else {
            {...}
            // 일시적인 클릭 방지 
            _this.compChk = true;
            setTimeout(function(){
                _this.compChk = false; // 다시 false로 바꿔줘야 클릭이벤트가 작동되겠지요?
                {...}
            }, 800);
        }
    }

{...}

이렇게 하면 비로소 끝났습니다! 

함수를 호출하기 위해 새로운 변수에 할당하고 비밀번호를 넘겨줍니다. 

let pwCheck = new PwCheck(1234);

 

---

플러스로 심심해서(?) 키 입력값도 받아보았습니다. 

사실 키보드 입력으로 할 거라면 굳이 키패드가 필요 없는데, 그냥 이유 없이 만들어 보았습니다. 🤣

기본 로직은 모두 같고 버튼 클릭을 키보드 클릭으로 바꿔주기만 하면 됩니다. 

또한 키 입력을 표시하기 위해 키패드 UI도 추가해줍니다. 

 

handleListener함수를 수정하고,  handleButtonActive를 만들어 키보드 클릭 시 키패드가 활성화되도록 해보겠습니다. 

    // 키보드 click이벤트 연동 (변경)
    _this.handleListener = function(){
        window.addEventListener('keydown', function(e){
            _this.handleButtonActive(e.key);      
            _this.handleNumber(e.key);  
        })
    }

    // 버튼활성화 (추가)
    _this.handleButtonActive = function(key){
        _this.numbers.forEach(function(number){
            if(number.textContent === key) number.style.background = "lightblue";
            setTimeout(function(){ number.style.background = "#F8F2F2" }, 140);
        })
    }

그리고 handleListener에서 e.key를 넘겼기 때문에 기존에 handleNumber에서는 number.textContent로 값을 가져왔지만, 여기서는 그냥 number로 수정해 줘야 합니다. 

    // 숫자키를 눌렀을때 이벤트 
    _this.handleNumber = function(number){
        if(!_this.compChk) { // 999
            // _this.passwordNumber[_this.cnt] = number.textContent;
            _this.passwordNumber[_this.cnt] = number;  // <- 이렇게 수정
            {...}
        }
    }

그럼 완료되었습니다.