[스틸스] header 컴포넌트 구현

 

 

먼저 이 프로젝트는 프론트엔드 프로젝트임을 밝히며 글을 시작하겠다.

 

 

헤더 컴포넌트는 팀원이 반응형 웹을 구현하는 과정에서 어려움을 느껴 팀원을 대신해 구현을 하게 되었다.

 

 

 

1. 헤더 컴포넌트 구현

 

먼저, 웹 화면에서 nav bar를 구현한 상태였기에 collapsible과 toggle을 활용해 모바일 메뉴 토글을 구현하려고 했다.

그러나 collapsible을 적용하는 과정에서 메뉴 아이콘에 toggle script가 적용되지 않거나, nav bar 형태 그대로 toggle되는 등 오류가 발생했다.

 

 

따라서 다른 구현 방법을 고민하게 됐다. div로 새로운 모바일 메뉴 요소를 구현해주고, media 쿼리를 이용해 display:none 속성을 적용하면되지 않을까라는 생각을 하게 됐다.

media 쿼리로 768px미만의 화면에서는 div 요소가 보이도록 설정하고, 768px 이상의 화면에서는 display:none으로 화면에 보이지 않도록 css를 적용했다.

또한 모바일 메뉴 토글을 구현하기 위해 css로 요소들을 배치하고 정렬해주었고, script코드로 toggle을 구현해주었다.

 

<div class="nav__div">

      <div class="div__item">

        <a href="/html/all_product_page.html">전체 상품</a>

      </div>

      <div class="div__item">

        <a href="/html/living_product_page.html">가구 상품</a>

      </div>

      <div class="div__item">

        <a href="/html/outdoor_product_page.html">야외 상품</a>

      </div>

      <div class="div__item">

        <a href="/html/life_product_page.html">생활 상품</a>

      </div>

      <div class="div__item">

        <a href="/html/customer_page.html">고객 지원</a>

      </div>

    </div>

 

 

html로 새로운 nav를 형성한 코드이다.

위의 div에 toggle script를 적용했으며 script코드는 아래와 같다.

 

<script>

      $(document).ready(function () {

        $(".nav__toggle").click(function () {

          $(".nav__div").toggle();

        });

 

        $(window).resize(function () {

          $(".nav__div").hide();

        });

      });

    </script>

 

 

---

 

 

2. toggle 메뉴 계속 열려있는 오류 수정

 

script로 toggle을 처음 구현했을 때는 웹 창의 크기가 768px 미만이면 메뉴를 보이게 하고, 그 외라면 메뉴를 숨기는 방식으로 코드를 작성했었다.

 

그러나, 이 코드는 toggle 메뉴를 열고난 뒤 화면의 크기를 키우면 메뉴가 사라지는 것이 아니라 화면에 깨진 형태로 그대로 남아있는 것을 발견했다.

오류를 해결하기 위해 코드를 분석했고, 768px 미만이면 메뉴를 보이는 toggle만 구현했다는 것을 확인했다.

 

 

따라서 조건문을 없애고 화면의 크기가 변경될 시 토글 메뉴를 숨기는 방식으로 코드를 수정해주어 문제를 해결했다.

 

toggle script

 

 

메뉴 토글 구현 화면

 

 

---

 

 

3. 로그인 팝업 시 백그라운드 블러처리

 

헤더에서 로그인 버튼을 누르면 로그인을 할 수 있는 팝업 창이 뜨게 되는데, 배경이 어두워지거나 블러처리 되지 않으면 팝업창을 알아보기가 어렵겠다고 생각이 들었다.

 

따라서 팝업창 백그라운드를 블러처리해 기능을 개선해야겠다고 생각했고,

처음에는 login form을 구현한 팝업 코드에 backdrop-filter:blur()를 사용했으나, 로그인 창에 전혀 적용되지 않는 문제가 생겨 다른 방법을 구상하게 되었다.

 

 

따라서 background로 활용할 div를 하나 정의해주고 div를 블러처리해보자는 아이디어가 떠올랐다.

 

css로 새로운 div에 backdrop-filter:blur()로 블러 효과를 주었고, 초기에는 display:none으로 보이지 않게한 후 팝업창이 보일 때만 display:block 속성으로 보이게 해주었다.

 

로그인 background div 생성

 

 

.blur-background {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(5px);

    z-index: 10000;

    display: none;

}

.home.show .blur-background {

    display: block;

}

 

 

로그인 백그라운드 블러 처리

 

 

---

 

4. 회원가입 비밀번호 일치 확인 오류 해결

 

회원가입 컴포넌트는 팀원이 제작한 컴포넌트였지만, 회원가입 시 설정한 비밀번호와 비밀번호 확인이 일치하지 않아도 회원가입이 된다는 오류가 발생했었다.

 

팀원이 비밀번호 조건을 확인하는 script를 작성함에 어려움을 느껴 대신 오류를 해결하게 되었다.

 

 

비밀번호 input value를 받아와 서로 동일한 조건을 추가하고, 상황에 맞는 alert()함수가 뜨도록 script 코드를 작성해줬다.

input value를 가져오는 변수 선언을 eventlistner 함수 밖에 설정해 조건이 제대로 안먹는 상황이 발생하기도 했지만, 바로 변수 선언을 함수 안으로 이동시켜 로직을 정상적으로 작동할 수 있었다.

 

value를 가져올 html 코드에 id를 부여하고 javascript코드를 활용해 클릭 이벤트 함수를 정의했다.

 

<div class="form signup_form">

        <form action="#">

            <h2>회원 가입</h2>

            <div class="input_box">

              <input type="email" placeholder="이메일을 입력하기" required />

              <i class="uil uil-envelope-alt email"></i>

            </div>

            <div class="input_box" id="new-pw">

              <input

                type="password"

                placeholder="새로운 비밀번호 만들기"

                required

              />

              <i class="uil uil-lock password"></i>

              <i class="uil uil-eye-slash pw_hide"></i>

            </div>

            <div class="input_box" id="chk-pw">

              <input type="password" placeholder="비밀번호 확인" required />

              <i class="uil uil-lock password"></i>

              <i class="uil uil-eye-slash pw_hide"></i>

            </div>

            <button type="reset" class="button signed-in">회원 가입하기</button>

            <div class="login_signup">

              이미 계정 있으신가요? <a href="#" id="login">로그인</a>

            </div>

       </form>

</div>

signedBtn.addEventListener("click", (e) => {

        event.preventDefault();

        var newPw = document

          .getElementById("new-pw")

          .querySelector("input").value;

        var chkPw = document

          .getElementById("chk-pw")

          .querySelector("input").value;

        if (newPw === chkPw) {

          alert("회원 가입에 성공하셨습니다!");

          home.classList.remove("show");

        } else {

          alert("설정한 비밀 번호와 비밀 번호 확인이 일치하지 않습니다.");

        }

 });

 

 

---

 

 

5. 특정 페이지 헤더 컴포넌트 정렬이상 해결

 

헤더 컴포넌트에 있는 모든 요소들을 가운데 정렬하기 위해 line-height 속성을 사용했었다.

 

그러나 특정한 1개의 페이지에서만 line-height뿐만 아니라 헤더의 height 조차도 적용이 되지 않는 것을 발견했다.

 

 

따라서 line-height 속성을 제외하고, nav정렬을 위해 display:flex 속성도 같이 주고 있었기 때문에 align-items:center를 활용하여 정렬 방법을 변경해 문제를 해결했다.

 

.header {

      background-color: #1E2022;

      width: 100%;

      height: 75px;

      display: flex;

      justify-content: space-between;

      align-items: center;

      position: fixed;

      top: 0;

      left: 0;

      z-index: 9998;

  }