Create Header components

[sosoYim]

Todo

• Create Header : w-1040px #72
  • Logo Implement Logo component #40 Fix Logo animation, size relative props #71
  • GNB Implement GNB component #41
  • SearchBar Implement SearchInput component #33
  • Upload/Create 버튼 : Header의 styled-component
  • Create UserContainer component : Header의 styled-component
    • Create UserIcon component
    • Create USerName component
  • Create MenuDropdown component : 2차 개선 프로젝트시 진행
• SearchBar과 상호작용
• Responsive Header #127
• 키보드 접근성 개선: 운영체제 형식으로 하기

Assignee

• @sosoYim

ETC

• Opinions & Problems
• 컴포넌트 z-index 덮어지지 않게 조심하기 (Giphy 사이트에선 창이 작아질 때 검색바 아래로 드롭다운이 펼쳐짐)

[sosoYim]

aria-expanded MDN

사용자 경험 관련 UX UI 고민

• 국내에서 자주 볼 수 있는 잘못된 사용자 경험 : 컨텐츠로 가기 위해 모든 탭을 탐색해야하는 것.

• 해외의 선례들은 운영체제 경험을 따라가는 추세다.

  • 탭 뿐만이 아니라 방향키를 사용할 수 있도록 하면 좋다.
  • aria-expanded: false? : 탐색할 것인지 아닌지 사용자에게 선택하게 해야 한다.

• 바로 메뉴로 갈 수 있는 단축키 내지 버튼을 줘보는 건 어떨까? 한계를 두지말고 생각해보자.

  • 낯선 단축키? => 가이드를 제공. 이 후 가이드를 다시 볼지에 대한 정보를 캐싱하여 선택할 수 있게 하는 쪽으로 보완할 수도 있다.

• wai-aria landmark role을 사용하면 각 영역들을 보조기기로 탐색할 수 있다.

• 마우스 오버가 됐을 때 보이는 것은 마우스에 제한 적이다. 키보드 접근도 고려해야 함.

[sosoYim]

1040 을 기준으로 잡고 이상은 고정, 미만으로 내려가면 모바일형 네비로 전환하자.