[portfolio] 반응하는 로그인 화면 구현

　1993년 6월, 이건희 삼성전자 회장은 프랑크프루트 선언에서 "마누라와 자식 빼고 다 바꾸자. 앞으로 세상에 디자인이 제일 중요해진다"고 했습니다. 이 말은 단순히 예쁜 것을 만들자는 말이 아닙니다. 물론 디자인은 예뻐야 하지만 무엇보다 목적과 의도, 상황에 맞게 설계 되어야 하는 작업입니다. 그래서 디자인은 미술보다는 미술이 곁들어진 공학에 가깝습니다.

반응하는 로그인 화면에서 사용자는 마우스에 손을 대지 않고도 아이디를 입력할 수 있습니다. 아이디 입력 후에는 엔터만 치면 비밀번호를 입력할 수 있게 됩니다. 아이디를 잘못 입력했는데, 비밀번호 창으로 넘어갔다면 그냥 백스페이스를 누르기만 하면 됩니다. 이 화면은 분명 예쁜 화면이지만 사용자 목적 달성을 가장 염두에 둔 화면입니다. 이건 미술이 아닌 컴퓨터 공학입니다.

완성된 화면

조건

① 아이디를 입력하고 엔터를 치면 비밀번호 창이 활성화됩니다.
② 비밀번호를 입력하고 엔터를 치면 아이디와 비밀번호가 서버로 전송됩니다.
③ 만약 비밀번호 창에 입력된 값이 없고, 사용자가 backspace를 누른다면, 비밀번호 창이 비활성화되고, focus가 아이디 창으로 이동됩니다.

js 코드

$(function() {
  login.init();
});

let login = {
  init: function () {
    let _this = this;

    /* id 입력창 */
    $("#id").on('keydown', function (e) {

        /* 아이디를 입력한 경우 enter icon 표시 */
        if ($("#id").val().length + 1 > 0) {
            $("#idIcon").attr('style', 'display: show');
        }

        /* 아이디에 값이 있는 경우 */
        if ($("#id").val() != "") {
            $("#idIcon").attr('style', 'display: show');
        }

        /* 아이디를 입력하지 않고 엔터를 누른 경우 */
        if (e.keyCode === 13 && $("#id").val().length == 0) {
            swal({
                title: "아이디를 입력하세요.",
            });
            return false;
        }

        /* 아이디를 입력하고 엔터를 누른 경우 */
        if (e.keyCode === 13 && $("#id").val().length > 0) {
            $("#password").attr('style', 'display: show');
            $("#idIcon").attr('style', 'display: none');
            $("#password").focus();
        }
    })

      /* 아이디의 값을 모두 지운 경우 */
      $("#id").on("input", function() {
          if ($(this).val().length == 0) {
              $("#idIcon").attr('style', 'display: none');
              $("#passwordIcon").attr('style', 'display: none');
              $("#password").attr('style', 'display: none');
              $("#password").val('');
          }
      });

      /* 패스워드의 값을 모두 지운 경우 */
      $("#password").on("input", function() {
          if ($(this).val().length == 0) {
              $("#id").focus();
              $("#passwordIcon").attr('style', 'display: none');
              $("#password").attr('style', 'display: none');
              $("#password").val('');
          }
      });

    /* password 입력창 */
    $("#password").on('keydown', function (e) {

        /* 비밀번호를 입력하지 않고 엔터를 누른 경우 */
        if (e.keyCode === 13 && $("#password").val().length == 0) {
            swal({
                title: "비밀번호를 입력하세요."
            });
            return false;
        }

        /* 비밀번호를 입력한 경우 */
        if ( $("#password").val().length + 1 > 0) {
            $("#idIcon").attr('style', 'display: none');
            $("#passwordIcon").attr('style', 'display: show');
        }

        /* 비밀번호를 입력하고 엔터를 누른 경우 */
        if (e.keyCode === 13 && $("#password").val().length + 1 > 0) {
            alert($("#id").val() + $("#password").val());
            // 로그인 API 호출
        }
    })
   }
}