[FE] feat: 사용자 프로필 정보 및 프로필 탭 구현

[chysis]

• resolves [FE] 로그인 시 보일 사용자 프로필과 프로필 탭을 구현한다. #1020

---

🚀 어떤 기능을 구현했나요 ?

• 로그인 시 Topbar 우측에 뜰 사용자 프로필 정보 컴포넌트를 구현했습니다.
• 프로필 정보 클릭 시 뜨는 프로필 탭을 구현했습니다.

🔥 어떻게 해결했나요 ?

프로필 정보

• 768px 이하에서는 프로필 사진만 보입니다.
• 사용자의 프로필 사진, 프로필 ID를 받아서 보여줍니다.
  • 프로필 사진 src가 없이 오는 경우를 대비해서 기본적으로는 회색으로 보이게끔 했습니다.

프로필 탭

• 768px 이하에서는 탭에 사용자의 ID가 보입니다.

• Dropdown 컴포넌트의 재사용을 고려했으나 다음과 같은 이유로 별도의 컴포넌트로 구현했습니다.

  1. 드롭다운에 추가적인 스타일링이 필요
  2. 기존 드롭다운은 단순 텍스트만 올 수 있는데, 프로필 탭에서는 클릭 불가능한 요소, 클릭 가능한 요소, 구분선 등이 올 수 있기 때문에 이 모든 것을 유연하게 처리하기 위해서는 새로운 컴포넌트를 만드는 것이 유리 (결정적인 이유)

• 탭에 올 수 있는 각 요소들의 특성을 elementType으로 구분해서 적절하게 처리하고, 변화에 유연하게 대처할 수 있게 했습니다.

• 모바일에서만 보여지는 요소인지를 isDisplayedOnlyMobile 속성으로 구분합니다.

▲ 데스크탑

▲ 모바일(768px 이하)

▲ 호버 시

• useProfileTabElements를 통해 프로필 탭에 들어가는 메뉴들과 클릭 이벤트 등을 관리합니다. 현재는 콘솔에 표시만 하고 있지만 추후에 각 페이지의 URL이 결정되면 동작을 수정할 계획입니다.

📝 어떤 부분에 집중해서 리뷰해야 할까요?

• 사용자의 ID가 길어질 경우 별다른 처리를 하고 있지 않아요. 768px 이상에서는 로고와 겹칠 정도로 ID가 길 수 없다고 판단했는데, 혹시 다른 의견 있다면 남겨주세요.

📚 참고 자료, 할 말

[chysis]

프로필 탭은 모달 이외의 다른 모든 요소보다는 위에 떠야 하기 때문에 z-index 값을 조정했습니다.