Sprint 6 - 디자인

진행한 것

1) 포스트 조회수

2) 투표한 사람 조회

투표한 사람을 보여주기 위해서는 투표 버튼 내부에 있는 숫자 이외에 마우스를 hover하고 클릭할 수 있는 영역이 필요했다.

hover하고 클릭할 수 있는 영역의 UI를 유저 display name으로할지 유저 아바타로 할지 고민해봤고 유저 아바타가 눈에 더 잘 보이고 클릭을 많이 할 것 같아서 유저 아바타 UI로 결정했다.

유저 아바타에 마우스를 올리면 아래와 같이 투표한 사람들을 Tooltip에 담아서 보여주기로 했는데 이 과정에서 기존의 Tooltip 컴포넌트를 리팩토링 했다. 기존의 Tooltip 컴포넌트는 위치를 하드 코딩 했었는데 앞으로 Tooltip을 계속 쓸 수 있도록 Tooltip이 사용되는 컴포넌트의 가운데에 Tooltip이 올수록 코드를 수정!

유저 아바타를 클릭하면 아래 이미지처럼 모달이 뜨게 해서 투표한 사람들의 프로필 목록을 볼 수 있게 했는데 이때 이름, 유저 ID, 직군과 소속, 그리고 프로필 설명 중 어떤 정보들을 보여줄지 고민을 했다. 디스콰이엇은 메이커들이 서로 네트워킹을 하면서 도움을 주고 받기를 원한다. 네트워킹할때 사람들이 프로필을 클릭해보고 싶도록 호기심을 자극하는 것은 직군과 소속임으로 이름, 직군, 소속만 남기고 나머지는 뺐다. 나중에 팔로우 버튼도 넣을 계획.