[프로젝트] WantU (3/16 - 3일차)

2차 프로젝트 표지

---

1.  Nav (drop down menu)

drop down menu

---

어제 완성한 nav바에 추가 기능을 구현해보았다. 위 사진은 각 메뉴들에 hover 했을 때 모습이다. 원티드 공식홈페이지에서는 가로형이 아닌 세로형으로 드롭 다운 메뉴들이 배치되어있었다. 그래서 공홈과 같은 세로형으로 만들었다. 개인적으로 느끼기에, 가로 ver. 보다 세로 ver. 이 조금 더 까다롭다고 느껴졌다.

hover 하지 않았을 때 보이지 않게 처리해야하는 부분과 구조를 짤 때도 정확히 어느 부분에 2단 메뉴를 추가해줘야 위의 모양처럼 나오는지 헷갈려서 아주 조금 당황했었다. 또한 햄버거 버튼에 hover를 했을 때 드롭다운메뉴에 마우스가 도달하기도 전에 사라져서 그걸 어떻게 해결 해야할 것인지 혼자 생각해보는 시간을 갖게 되었다.

그래서인지, 이 기능을 구현하고 나니 이젠 정확히 세로 버전의 드롭다운 메뉴를 구성할 때 어떤 방식으로 구성해야할 지를 잘 알게 되었고, 더불어 hover할 때, 메뉴가 보이게 만드는 작업도 어떤 식으로 해야 좋을지도 알게 되었다.

---

< 간략한 원리 설명 >

<ul class="main-menu">
    <li className="main-list" /> // 공백으로 둔 이유 **
    <li className="main-list">
      <a className="main-txt" href="/">
        개발
      </a>
      <ul className="sub-menu">
        <li className="sub-list">
          <a className="sub-txt" href="/">
            Web Backend
          </a>
        </li>

        <li className="sub-list">
          <a className="sub-txt" href="/">
            Web Frontend
          </a>
        </li>
     </li>
</ul>

햄버거 버튼에 hover 하면 사진과 같이 메뉴가 나온다. 하지만, 이 메뉴의 첫번째 단어를 클릭하기도 전에 마우스가 띄어지면 메뉴가 사라져버린다.

그이유는 햄버거 버튼과 드롭 다운 메뉴 사이에 거리가 좀 있기 때문이다. 이를 해결하고자, 위의 코드처럼 첫번째 <li>를 공백으로 두었다.

공백으로 두어서 사용자들 눈에는 아무것도 보이지 않게 처리하면, 마우스가 햄버거 버튼에서 떨어져 있어도 눈에 보이지 않는 첫번째 빈 공백의 <li>가 존재함으로 인해서 메뉴가 사라지지 않는다.

또한, 1단 메뉴에 hover 하면, 2단메뉴가 펼쳐진다. 이 2단 메뉴는 1단 메뉴의 안에 있는 메뉴이기 때문에 1단 메뉴 안에 작성해주도록 한다. 그 후, 스타일링(position)으로 수정해주면 사진과 같은 모양이 된다.    

---

drop down menu 구현영상

자연스러운 hover효과를 볼 수 있는 drop down menu 영상이다. 앞에서 말했듯이, 첫번째 li는 user들 눈에 보이지않는다. 그리고, 햄버거버튼에서 마우스가 떼어져도 메뉴가 사라지지않는 걸 볼 수 있다.

---

2.  Login modal 창 

로그인 모달창 구현

---

로그인 버튼을 누르면, 위 사진과 같은 로그인 모달창이 띄워진다. 카카오 소셜로그인을 구현하기 위해서, 카카오만 만들어 두니 조금 허전해보인다.😂 처음에는 모달창을 어떻게 만들으라는 것인지 감이 오지 않았다. 창을 새로 만들어야하는 건지, css를 이용해서 모달창을 만들어야하는 것인지 감이 오지 않았다. 그래서 원티드 공식홈페이지에 들어갔다. 그리고 정답을 찾게 되었다. 

---

원티드 로그인 모달창 (로그인 버튼 클릭 했을 때)

로그인 모달창을 닫았을 때

로그인 모달창이 열리고 닫혔을 때, 오른쪽 개발자 도구 페이지를 보면 modal이라는 컨텐츠가 열렸을 때는 존재하지만, 닫혔을 때는 존재하지 않는 것을 알 수 있다. 이 점에 착안해서 조건부 렌더링을 통해 모달창을 볼 수 있게 혹은 볼 수 없게 구현하면 된다.

역시 공식홈페이지는 구글링만큼이나 큰 깨달음을 주는 것 같다. 그래서 위의 사진에 있는 로그인 버튼을 클릭 했을 때, 조건부 렌더링을 통해 모달창이 나타나고 나타나지 않는 것을 만들 수 있었다. 아래는 이를 통해 구현한 모달창을 영상으로 기록해 보았다. 

---

로그인 모달창 구현

이상 생각보다 엄청 어렵지 않은 모달창 구현하기였다. 사실 불편하다고만 생각했던 리액트였는데, 오히려 css보다 훨씬 간편한 것 같다. 조건부 렌더링은 정말 신의 한 수 라는 생각을 하게 되었다.  내일은 이어서 소셜로그인을 직접 구현해보려한다. 카카오공식문서를 잘 읽고 내일도 오늘만큼 무언가를 얻어갈 수 있는 하루가 되었으면 좋겠다.