팀 프로젝트에서 반응형 헤더를 구현한 기록을 정리
📍max-width 를 사용하여 화면이 꽉차지 않게 하기
랜딩 페이지에서 헤더 아래의 캐러셀만 화면에 꽉차게 하고,
헤더(GNB), 메인 컨텐츠, 푸터는 max-width: 1200px 을 주어 화면에 꽉차지 않게 설정
width 1200px이 넘는 뷰포트에서도 최대 1200px 까지만 늘어남
추가로 padding: 0 1rem; 을 부여
📍모바일 드롭다운 메뉴 구현
width 768px 이하의 뷰포트에서는 display: none; 으로 navbar를 없어지게 하고,
모바일 메뉴 버튼 (햄버거 아이콘)을 생기게 한다
레이아웃 컴포넌트에서 모바일 메뉴 버튼을 클릭함에 따라 메뉴 오픈, 클로즈상태로 바뀌게 한다
왜 헤더가 아닌 레이아웃 컴포넌트에서 상태를 갖냐면..
헤더 컴포넌트의 사촌 컴포넌트로 모바일 메뉴 컴포넌트를 조건부 렌더링하기 때문(메뉴 오픈 상태에 따라)
📍모바일 웹에서 데스크탑 웹으로 사이즈 바뀔 때 모바일 메뉴 알아서 닫기
window.innerWidth를 통해 뷰포트의 width를 감지할 수 있다
또한 window 에 resize 이벤트 핸들러를 부착하여, 메뉴 오픈 상태일 때 뷰포트 width가 모바일보다 커지면,
메뉴 클로즈 상태로 변경해 준다!