하단 NavigationBar 구현

[cys4585]

PR의 목적이 무엇인가요?

하단 NavigationBar를 구현했어요.

이슈 ID는 무엇인가요?

• close 하단 네비게이션 바 구현 #201

설명

• 네비게이션 바를 구현하기 위해 기본적인 컴포넌트 구조를 작성했어요.
• 네비게이션 바의 스타일링을 입혔어요.
• 네비게이션 바 아이템이 선택됐을 때 활성화된 상태를 표시한 수 있도록 색상을 적용했어요.
• 네비게이션 바가 하단에 고정되도록 레이아웃 작업을 했어요.
• 필요한 페이지에 하단 네비게이션 바를 적용했어요.
• 지난 스프린트 코드 병합으로 인한 에러를 잡았어요. (타 PR과 충돌 여지가 있습니다!)

NavigationBar 스타일링 디테일

NavigationBar의 모든 아이템들의 영역을 동일하게 적용했어요. 그리고 모든 아이템들의 아이콘의 크기를 24 x 24로 통일했어요.

flex와 정렬을 활용해 아이템이 가운데로 오도록 하고 영역은 남은 모든 부분을 차지하도록 했어요.

width는 100%로 모든 화면을 차지하도록 했고, height는 Figma와 동일하게 90px(9rem)을 줬어요.

shadow를 적용했어요. 디테일한 표현보다는 입체감을 주는 게 목적이었어요.

NavigationBar 레이아웃 디테일

우선 MainPage에서 테스트하면서 작업을 했어요. 메인 페이지 최 하단에 NavigationBarWrapper를 뒀어요. 이 Wrapper는 HomeLayout의 바깥에 있어요. 페이지의 레이아웃보다 상위 개념이라 생각했어요. (이 부분을 상위로 추상화를 하면 좋을 것 같지만, 지금 수준에서 굳이 꼭 해야하는 건 아닌 것 같아서 안했습니다!)

하단 바의 height를 9rem으로 상수화했어요. 하단 바 자체의 css도 적용하고, 거기에 영향받는 다른 Layout에도 height만큼 margin을 주도록 하기 위함이에요.

NavigationBar의 height를 100%로 두고, 그 Wrapper에 9rem을 적용했어요. 위치와 면적은 레이아웃 단에서 관리하는 게 적절하다 생각했어요.

fixed는 항상 고정된 위치에 있지만, sticky는 스크롤 위치에 따라 고정 여부가 결정돼요. 그래서 fixed로 고정했어요. 일반적으로 항상 화면에 보여야 하는 헤더나 네비게이션 바에 고정되는 위치를 적용할 수 있는 fixed를 사용한다고 합니다!

NavigationBar 페이지 디테일

main, chat 페이지에만 NavigationBarWrapper 적용했어요. 다른 페이지에는 하단 바 레이아웃을 적용하지 않았어요.

이참에 router도 정리할까 했지만, 꼭 필요한 작업도 아니고 지금 작업하고 있는 이슈와도 연관있는 작업도 아니고, 전역적인 영향을 주는 작업이라 동료들과 논의도 해야하기 때문에 하지 않았어요. 추후에 페이지 구조가 복잡해질 때 논의해봐도 좋을 것 같아요~

질문 혹은 공유 사항 (Optional)