오름차순, 내림차순 정렬

버튼 클릭 시 데이터로 받을 votes가 높은순, 낮은순으로 정렬되는 버튼을 구현 했다.

UserListPage.tsx

API데이터 받는 부분은 어떤식으로 받을지 아직 상의하지 못해서 임의로 dummaydata를 만들어서 구현을 하였다.

const [filter, setFilter] = useState('');

const hendleUpbutton = (): void => {
    setFilter('up');
    setData(
      data.sort((a, b) => {
        return b.votes - a.votes;
      })
    );
  };

  const hendleDownbutton = (): void => {
    setFilter('down');
    setData(
      data.sort((a, b) => {
        return a.votes - b.votes;
      })
    );
  };

filter라는 state를 만들어서 클릭 이벤트가 발생 했을때 string up, down으로 변경되게 해줬다. 오름차순, 내림차순은 받아온 data를 sort함수를 이용해 구현 했다. Up버튼을 눌렀을때는 높은 숫자를 보여줘야 함으로 내림차순 정렬, Down버튼을 눌렀을때는 낮은 숫자를 보여줘야 함으로 오름차순 정렬을 보여줬다.

<S.FilterBox>
  	<S.FilterButton
	onClick={hendleUpbutton}
	className={filter === 'up' ? 'active' : ''}>
  Up
	</S.FilterButton>
	<S.FilterButton
	onClick={hendleDownbutton}
	className={filter === 'down' ? 'active' : ''}>
  Down
	</S.FilterButton>
</S.FilterBox>

버튼 클릭 이벤트가 발생 했을때 filter state가 up이나 down으로 변경되면 className에 active속성을 추가시켜 css스타일을 넣어줬다.

userListStyled.tsx

export const FilterButton = styled.div`
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: ${props => props.theme.font.medium};
  color: #3b4045;
  margin-left: 2px;
  padding: 8px;
  background-color: white;
  border-bottom: 1px solid white;

  &:hover {
    border-bottom: 1px solid ${props => props.theme.colors.yellow};
  }

  &.active {
    font-weight: bold;
    border-bottom: 1px solid ${props => props.theme.colors.yellow};
  }
`;

여기서 주의할 점은 styled컴포넌트에서 className으로 스타일을 주고싶다면
&기호를 넣어주고 class명을 붙여줘야 한다.