1) 구현 이미지
2) HTML
ul과 li 태그를 주로 이용하여 Navbar를 구성하였다.
여기서 어려웠던 점은 전체보기의 바탕색을 화면 끝까지 적용하는 것이었다.
부모 div의 width가 정해져있고 margin: 0 auto로 설정되어 있을 때, 자식 div의 배경 색을 화면 끝까지 적용하는 것이 문제였다.
width 100%로 하면 당연히 부모 div의 크기까지만 적용되기 때문에 사용할 수 없었고, width를 2000, 3000px까지 주면 일단은 어느정도의 크기까지는 커버가 되지만 궁극적인 해결방법은 될 수 없을 것이다.
Navbar 특성 상 position을 겹치게 잡기 위해 부모 div를 어쩔 수 없이 잡아야 하는 상황에서 자식의 width를 조절하는 방법이 있는 지 확인해봐야 할 부분이다.
3) JavaScript
Navbar 부분에서 가장 많이 사용한 자바스크립트는 onMouseEnter와 onMouseLeave에 따라 className 값을 정해주는 방법이었다.
삼항연산자가 익숙하지 않아 state 값을 일일이 className 초기 값으로 적어주었는데, 이는 차후 삼항연산자로 리팩토링 할 예정이다.
가장 어려웠던 부분은 onMouseEnter 했을 때 active된 className이 어느 부분까지 걸려있는 지를 설정하는 부분이었다.
또한 다른 div에 onMouseEnter 했을 때 기존 onMouseEnter했던 className은 deactive되면서 새로운 className이 active되어야 하기 때문에 코드가 복잡해졌다.
우선 내 나름대로의 생각으로 각각 onMouseEnter와 onMouseLeave를 걸어 Navbar를 완성하였지만, 차후 리팩토링 과정에서 코드를 간편화하는 방법을 찾아볼 예정이다.
아직까지 구현하지 못한 Navbar는 장바구니, search, 더보기 아이콘에 대한 정보이며, display:none이었던 Navbar가 나타났을 때, 하단의 Feed 페이지가 내려가는 부분도 향후 수정할 부분이다.
