feat : 모바일 GNB 구현

[y00eunji]

작업 내용

• 모바일 GNB UI를 구현했습니다.
• 라우트 별로 색상 및 UI 다르게 표현 (메인 화면, 이외 화면 구분)

추가한 파일 구조

Header/Mobile/
├── MobileHeader.tsx          # 모바일 헤더 컨테이너
├── MobileNavigation.tsx      # 3단계 네비게이션 드로어
├── MobileLanguageToggle.tsx  # 언어 토글 컴포넌트
└── HamburgerButton.tsx       # 햄버거 메뉴 버튼

고민 및 공유할 내용

🤔 메인 화면과 이외 화면의 색상이 다른 것

• 피그마에 메인화면이 아닌 경우에는 색상이 다르게 되어있어, 색상이 다르게 구현을 했습니다. 다만, 펼쳐졌을때의 디자인이 없어서
  • 메인 화면 : 투명한 헤더 , 블러처리 된 배경
  • 이외 화면 : 메인 색상인 초록색 배경 -> 투명한 배경으로 하니 글자가 많은 화면에서는 흰색 네비게이션 글자가 잘 안보이길래 추가했습니닷,,,🫣
    아래 사진같이 구현을 했는데, 혹시 디자인 의도와 다른 구현일 수 도 있을 것 같아서,,확인 부탁드립니다!

🤔 2번째 뎁스에 화살표가 없는 것

• 피그마 상에는 2번째 뎁스 메뉴의 경우에 3번째 뎁스로 가는 화살표가 없습니다. 하지만 사용자에게 3번째 뎁스가 있음을 알려주는 것이 사용자가 인지하기에 쉽다고(?) 생각해서 추가를 헀습니다. 하지만 이것도 저의 임의로 추가를 한거라서 디자인팀에 확인이 한 번 더 필요할 것 같습니다..!

[ (좌측) 개발 화면, (우측) 피그마 디자인 ]

🤔 마이페이지 화면

• 피그마 상에서는 로그인 성공을 하게 되면 모바일 UI 하단의 "로그인"이 "마이페이지"로 변경되어있습니다. 하지만 데스크탑 기준 마이페이지가 없는 것으로 보여 로그아웃으로 구현을 했습니다. 혹시 마이페이지가 따로 있다면 다시 변경하겠습니다.

수정해야하는 부분 알려주시면 바로 수정하겠습니다!