[FE] 전체 참여자 관리 : 참여자 이름 정렬

[soi-ha]

issue

• close [FE] 전체 참여자 관리 : 참여자 이름 정렬 #823

구현 목적

기존에는 전체 참여자 관리 페이지에서 참여자의 정렬이 이뤄지지 않고 있습니다. 이런 방식은 참여자가 많아질 경우, 관리자가 참여자를 찾는 것에 불편함을 줍니다. 참여자의 상태를 관리하기 위해 관리자가 참여자의 이름을 찾는 과정에서 참여자 이름에 규칙이 존재하지 않기 때문에 어느 위치에 존재하는지 찾기가 어려워지기 때문입니다.

따라서, 참여자의 이름을 사용자 브라우저의 언어 설정에 맞게 (ㄱ-ㅎ,a-z / 한글 언어 설정 기준) 순으로 정렬하는 기능을 추가했습니다.

구현 방법

sort 메서드를 활용하여 initialReports를 이름을 기준으로 정렬했습니다.

useEventMember hook은 기존에 서버로부터 reports 데이터 값을 받아오면 useEffect를 사용하여 initalReports의 값이 변화가 생기면 reports 클라이언트 값을 바꾸도록 했습니다. 이 과정에서 reports에 값을 set을 통해 변경하기 전, initalReports를 이름을 기준으로 정렬하는 과정을 추가했습니다.

useEffect(() => {
  const sortedMemberNameReports = initialReports.sort((a, b) => a.memberName.localeCompare(b.memberName));

  setReports(sortedMemberNameReports);
}, [initialReports]);

sort 메소드를 활용하여 정렬했습니다. 이때, 두개의 요소 a와 b를 비교하는 콜백함수를 받습니다.

• (a, b) => a.memberName.localeCompare(b.memberName, 'en')

  localeCompare 메서드는 두 문자열을 비교하여 정렬 순서를 결정합니다. 문자열을 사전적으로 비교하며, 언어 및 지역 설정을 기준으로 비교합니다.

  a.memberName과 b.memberName을 비교하며, 이때, 지역 설정은 브라우저 설정에 맞게 정렬되도록 했습니다. 따로 코드에 ‘ko’를 추가하여 지역설정을 해줄 경우 무조건적으로 참여자 이름 정렬이 한글-영어 순으로 적용됩니다. ‘en’으로 설정할 경우 영어-한글 순으로 정렬됩니다.
  그러나, 지역설정을 아무것도(위 코드처럼) 하지 않았다면, 유저가 사용하는 브라우저의 언어 설정에 맞게 이름이 정렬됩니다.

결과

현재 api가 변동되어 실제로 반영된 화면은 없습니다.. 추후 추가하도록 하겠습니다!

논의하고 싶은 점

이름 정렬을 사용자 브라우저 설정에 맞춰주는 것이 아니라 강제적으로 'ko'로 할지 고민되었습니다! 여러분은 어떻게 생각하시는지 궁금합니다~

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-cfaafrbegm.chromatic.com/

[jinhokim98]

고생했습니다!! 간단한 코멘트 하나 남겨놨습니다

[jinhokim98]

localeCompare 함수 사용 좋습니다! 저도 저번에 코테 준비하면서 처음 알게 됐는데 좋더라구요.

한글로 고정하는 것이 걱정이 된다면 여기를 참고해보는 것도 좋을 것 같아요.
https://hasudoki.tistory.com/entry/Javascript-timezone-language-%EA%B5%AC%ED%95%98%EA%B8%B0%ED%83%80%EC%9E%84%EC%A1%B4-%EC%96%B8%EC%96%B4-%EA%B5%AD%EA%B0%80

여기서 navigator.language를 이용하면 현재 사용자 브라우저의 언어 설정을 가져올 수 있다고 해요

저는 함수 호출위치에 대해서 코멘트를 드리고 싶어요. useRequestGetReport hook 내부에서 useQuery로 데이터를 fetching 하고 있잖아요! 그 내부에서 select를 사용하면 데이터를 정제해서 내보내줄 수 있어요.

const {data} = useQuery({
  queryKey: [...],
  queryFn: request..,
  select: (data) => data.sort()
})

위 처럼 useQuery 훅에서 select를 사용해서 정렬을 먼저 해주고 바깥으로 내보내주는 방식은 어떨지 제안드려요!

[soi-ha]

쿠키가 말씀해주신 것처럼 useRequestGetReport에서 정렬해서 내보낼까 고민했었는데요! 해당 부분에서 정렬을 진행하면 해당 함수가 하는 일을 하나 더 부과한다(?)고 생각이 들어서 useEventMember에서 정렬을 진행해줬어요! 근데, 아래 토다리가 말해준 것처럼 다른 곳에서도 동일된 값을 받는게 데이터 통일성이 있어서 좋을 것 같긴 하네용! 생각해보고 반영하겠습니당 :) 좋은 의견 고마워용

[Todari]

잘 변경해 준 것 같아요~!
쿠키가 언급했던, useQuery 내부에서의 정렬을 이용하면, 다른곳에서도 동일하게 값을 받아볼 수 있으니 이것도 좋을 것 같다는 생각이 드네용
고생 많았어요 소하~!

[pakxe]

좋네요좋아요 역시나 직접 써봐야 확인할 수 있는 개선점들도 많은 것 같아요

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-qywmduxyzw.chromatic.com/