✨[Feat] Common SortingButton 구현 #94

[sunnwave]

#️⃣연관된 이슈

#94

📝작업 내용

정렬에 사용되는 토글 버튼. 마감임박순, 최신순/오래된순으로 사용 가능

미리보기, 사용방법 및 결과물

마감임박순


최신순/오래된순


최신순/오래된 순의 경우 active표시와 버튼의 라벨 변경도 이루어집니다

주요 기능

사용 방법

• props로 variant를 입력합니다
• props로 onClickSorting을 입력하여 정렬기준값을 저장합니다.

부모 컴포넌트의 예시 코드입니다

const Parent = () => {
  //선택된 정렬 기준을 저장할 변수
  const [sortBy, setSortBy] = useState<string | undefined>('NEWEST');

  //SortingButton에서 변경된 정렬을 처리하는 함수
  const onChangeSelection = (order: string | undefined) => {
    setSortBy(order);
  };
  return (
    <SortingButton
      variant="byDeadline" // variant 예시: 'byDeadLine', "byDate"
      onClickSorting={onChangeSelection} // 선택된 항목 처리
    />
  );
};

💬리뷰 요구사항

최신순/오래된순 을 토글로 생각하고 구현을 하긴 했는데 오래된 순에서 active 상태로 색상이 변경되는 것이 사용상 어색(오래된 순으로 정렬하는 것이 주 기능인 것처럼 느껴짐)한 느낌이 있는데 의견 있으실까요?

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
bookco	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 11, 2024 4:50am

[wynter24]

active 상태로 색상이 변경되니까 선택된 라벨이 주기능처럼 보이긴하네요...
차라리 아예 색이 빼는 것도 좋을 것 같아요!

수고하셨습니다!

[cloud0406]

수고하셨습니다~.~

[cloud0406]

p5: props로 들어오는 함수가 아마 정렬을 하는 함수일텐데 나중에 스웨거가 나오면 param 값을 실제 사용하는 값들로 변경해도 좋을 것 같아요!
ex) Newest -> createdDT

[sunnwave]

새로 만들어진 API에서 북클럽 목록 조회 부분을 확인 했을 때 정렬 방법을 따로 parameter 로 입력받더라구요. 구체적으로 어떤 값을 넣을지는 백엔드 분들과 상의를 해봐야할 것 같습니다!

[haegu97]

넵 저도 최신 순 / 오래된 순 버튼 디자인 통일 하는 게 좋을 거 같다고 생각해요!