fix(view): Vertical Cluster List 에서 사용자들 추가 제한하는 방식으로 수정 (#524) #570
Conversation
|
10명 이상인 경우 Vertical Cluster List를 클릭하면 프로필 이미지가 추가되는 이유가 현재 선택한 Cluster에 기여한 인원을 한 눈에 파악하기 위함인 것 같아서 '프로필 이미지 추가 제한 방식'에 아래 로직도 추가하면 어떤가 하여 의견 말씀드려요~ Vertical Cluster List 클릭 시 프로필 이미지가 추가될 때 이미 프로필이 떠 있는 사용자라면 추가되지 않도록 제한하면 더 좋을 것 같아요. 다른 분들은 어떻게 생각하시나요? 🤔🤔🤔🤔 |
사실 저도 해당 기능의 목적이 정확히 어떤 것인지 약간 애매한 부분이 있어 임의대로 판단하여 구현하게 되었습니다...! 감사합니다ㅎㅎ 다른 의견들도 궁금하네요..!!😁 |
| const selectedClustersLength = selectedClusters.length - filteredSelectedData.length; | ||
|
|
||
| // 이미 선택된 사용자를 관리 | ||
| const addedAuthors = new Set(); |
There was a problem hiding this comment.
이미 추가된 사용자라면 나오지 않게 하는 방식이 저도 좋은 것 같다고 생각합니다! Set을 활용하는 방법 배워갑니다,,🙂👍👍
There was a problem hiding this comment.
|
|
||
| return ( | ||
| <div className="selected-container"> | ||
| {authSrcMap && | ||
| selectedClusters.map((selectedCluster) => { | ||
| filteredSelectedData.reverse().map((selectedCluster) => { |
There was a problem hiding this comment.
(궁금합니다..!) 12번째 줄에서 reverse를 했는데 여기서 또 reverse를 하는 이유가 있을까요?? 그리고 map함수라면 어차피 전체 배열을 순회하는데 reverse를 하신 이유도 궁금합니다!
저도 이거 좋은 생각 같습니다!! (사실 지금 저렇게 뿌려주는 UX 도 애매하긴 합니다만... ㅎㅎ) |
| @@ -9,21 +9,36 @@ const FilteredAuthors = () => { | |||
| const { selectedData } = useGlobalData(); | |||
| const authSrcMap = usePreLoadAuthorImg(); | |||
| const selectedClusters = getInitData(selectedData); | |||
| const filteredSelectedData = selectedClusters.reverse().slice(0, 9); | |||
There was a problem hiding this comment.
10이라는 숫자는 변수화 시켜주는게 좋을 것 같습니다!
그리고, 숫자 10에 대한 명확한 근거가 있는게 아니라면, 해당 수치의 정당성(?)에 대해 고민은 좀 해봐야할 것 같습니다.
그렇네요! 중복을 제거한다면 대개는 author 수가 그렇게까지 많지 않을 것 같아요 |
Related issue
#524
Result
선택된 사용자가 10명 이상이라면 추가 인원을 + more 로 표시 시키고 가장 최근에 선택된 10명만 리스트에 보이게 하도록 수정하였습니다.
Work list
Discussion
스크롤 방식도 있겠지만 UI가 지저분 해지지 않을까 싶기도 했고 단순히 보여주는 것 외에 큰 기능이 없었기 때문에 선택된 사용자는 chart에서 확인 해도 된다고 생각하여 사용자를 전부 보여주는것이 아니라 일부만 표시하게 구현하였습니다...! 혹시 더 좋은 생각이 있으시다면 언제든 환영입니다...!!😄