스프링 게시판 만들기 (4) : login 페이지

Login.html

gnb에 만들어놓은 로그인 버튼을 클릭하면 이동하는 로그인 페이지를 어떤 팝업으로 할 지, 페이지 이동으로 할지 요즘 대세는 어떤것인지 파악하고 그에 맞는 동작을 수행하는게 구성하기 편하다.

이렇게 코드를 직접 짤때 고민을 하게되면 뭔가 진행상황이 부진한것 같고, 주제를 도는 느낌을 받는다. 개발을 하며 하루종일 붙잡고 있어도 한걸음도 나아가지 못하는 날도 많지만, html에서 그런 고민을 하고싶진 않다.

 

그래서, 설계라는것이 중요하다.

 

미리 어떤 페이지를 만들지, 디자인은 어떻게 구성할지, 필요한 기능이 무엇인지 등을 모두 계산해놓고 구성해놔야 실제로 코드로 작업을 할때 계속해서 수정하지 않고 시간을 오히려 단축시킬 수 있다.

무작정 버튼을 만들어놓고 개발자도구를 눌러 css를 추가하며 진행할 수도 있지만, 미리 설계해두는 것이 훨씬 더 편하게 작업할 수 있다.

그래서 사용하는 툴이 바로 Figma다.

 

Figma: The Collaborative Interface Design Tool

Figma: The Collaborative Interface Design Tool

 

피그마는 디자인을 위한 웹 포토샵같은 느낌이다, 협업이 가능하며 지원하는 플러그인이 많고 템플릿, 포맷 등의 정보가 셀 수 없이 많다. 사용하기 쉬운 아이콘 등이 모여있는 것도 큰 장점이고, 레이어를 나누거나, 섹션을 나누거나 하는 작업도 쉽게 작동한다.

 

피그마 뿐 아니라 여러 협업 설계 툴이 있겠지만, 제일 자주 사용되는 것은 피그마다. 피그마를 사용할 줄 아는게 우대사항인 회사들도 있을 만틈 어엿한 작업 툴이기 때문에 사용법을 아두자

<script>
        // Run function when the document has loaded
        $(function() {
            dialog();
        });
        function dialog() {

            var dialogBox = $('.dialog'),
                dialogTrigger = $('.dialog__trigger'),
                dialogClose = $('.dialog__close'),
                dialogTitle = $('.dialog__title'),
                dialogContent = $('.dialog__content'),
                dialogAction = $('.dialog__action');

            // Open the dialog
            dialogTrigger.on('click', function(e) {
                dialogBox.toggleClass('dialog--active');
                e.stopPropagation()
            });

            // Close the dialog - click close button
            dialogClose.on('click', function() {
                dialogBox.removeClass('dialog--active');
            });

            // Close the dialog - press escape key // key#27
            $(document).keyup(function(e) {
                if (e.keyCode === 27) {
                    dialogBox.removeClass('dialog--active');
                }
            });

            // Close dialog - click outside
            $(document).on("click", function(e) {
                if ($(e.target).is(dialogBox) === false &&
                    $(e.target).is(dialogTitle) === false &&
                    $(e.target).is(dialogContent) === false &&
                    $(e.target).is(dialogAction) === false) {
                    dialogBox.removeClass("dialog--active");
                }
            });

        };
    </script>
    
    <div class="login-content">
  <div class="login-form">
    <h2>로고</h2>
    <form method="post">
      <div class="form-group">
        <label th:for="username">아이디</label>
        <input type="text" name="username" class="form-control" placeholder="아이디 입력해주세요">
      </div>
      <div class="form-group">
        <label th:for="password">비밀번호</label>
        <input type="password" class="form-control" name="password" placeholder="비밀번호 입력해주세요">
      </div>
      <button type="submit" class="btn btn-primary" id="btn_loginForm">로그인</button>
    </form>
    <div class="login-form-bottom">
      <label> 아이디 찾기 </label>
      <label>|</label>
      <label> 비밀번호 찾기 </label>
      <label>|</label>
      <label> 회원가입 </label>
    </div>
    <div>-</div>
  </div>
</div>

login.html 페이지 자체를 레이어화해서 팝업을 올릴 수도 있지만, 공용gnb이고, 언제나 가운데에 플로팅 될 공간이기 때문에 gnb.html에 해당 코드를 추가해 제이쿼리를 이용한 css 클래스를 변환시켜주며 작동한다.

추후 로직으로 작동시킬 login 내부의 버튼들도 같이 그려줬다.

본문의 스크립트를 사용하면 팝업 레이어의 테두리 부분을 제외하고, 내부 폼이나 글자를 클릭하면 dialog--active 속성이 사라지기 때문에 팝업 레이어도 사라지는 것을 볼 수 있다. 상위 div 요소에서 그 하위 요소까지 모두 선택하는 제이쿼리 선택자를 활용해서 해당 기능을 수정한다.

 

			let loginForm = $('.login-form');
            let childElements = loginForm.find('*');
            
            // Close dialog - click outside
            $(document).on("click", function(e) {
                if ($(e.target).is(dialogBox) === false &&
                    $(e.target).is(dialogTitle) === false &&
                    $(e.target).is(dialogContent) === false &&
                    $(e.target).is(dialogAction) === false &&
                    $(e.target).is(loginForm) === false &&
                    $(e.target).is(childElements) === false) {
                    dialogBox.removeClass("dialog--active");
                }
            });

추가되는 부분은 위와 같이 loginForm, childElements로, .login-form 내부에 있는 모든 하위요소를 선택하는 childElements 변수를 사용한다. 이 기능을 적용하여 해당 폼 이외에 다른곳을 클릭했을 때에만 팝업이 사라지도록 작동한다.

 

https://github.com/HWOwoo/TheCp

GitHub - HWOwoo/TheCp: 스프링부트를 이용한 개인 프로젝트

소스코드는 위에 깃허브에 계속해서 업로드 중이기 때문에, 전문을 확인해야 한다면 해당 페이지에서 확인할 수 있다.