ToggleButton 공통 컴포넌트 구현

[1g2g]

⚙️ PR 타입

• Feature
• Hotfix

✨ 기능 설명 or 🚨 문제 상황

공통으로 사용되는 토글 버튼과 관련 훅을 만들었습니다.

👨‍💻 구현 내용 or 👍 해결 내용

단일 토글 버튼

<ToggleButton
  label="버튼 레이블" // 버튼에 표시될 레이블
  value="button1" // 버튼의 값
  isActive={true} // 버튼의 활성화 상태
  width={200} // 버튼의 너비 (기본값: '100%')
  height="50px" // 버튼의 높이 (기본값: '60px')
  fontSize="16px" // 버튼의 글꼴 크기 (기본값: theme.FONT_SIZE.MD)
  border="none" // border 속성 (기본값: `1px solid ${isActive ? theme.PALETTE.RED_400 : theme.PALETTE.GRAY_400}`)
  onToggle={(value) => {
    // 버튼이 토글될 때 호출되는 콜백 함수
    console.log(`버튼 "${value}"이(가) 토글되었습니다.`);
  }}
/>

둘 중 하나 선택

예시 코드

  const ReviewComponent = () => {
  const items: any = [
    { value: 'GOOD', label: '좋아요' },
    { value: 'BAD', label: '별로에요' },
  ];

  const [review, setReview] = useState<string[]>();

  const handledToggle = (value: string[]) => {
    setReview(value);
  };

  const { handleToggle, selectedItems } = useToggleButtons({
    onToggle: handledToggle,
    isMultipleSelect: false,
  });
  return (
    <>
      {items.map((item: any) => (
        <ToggleButton
          key={item.value}
          value={item.value}
          label={item.label}
          isActive={selectedItems.includes(item.value)}
          onToggle={handleToggle}
        />
      ))}
      선택된 값 : {review}
    </>
  );
};

다중 선택

예시 코드

const PositionComponent = () => {
  const positions = ['C', 'PF', 'SF', 'PG', 'SG', '없음'];

  const [selectedPosition, setSelectedPosition] = useState<string[]>();

  const handledToggle = (value: string[]) => {
    setSelectedPosition(value);
  };

  const { handleToggle, selectedItems } = useToggleButtons({
    onToggle: handledToggle,
    isMultipleSelect: true,
  });
  return (
    <StyledButtonGroup>
      {positions.map((position) => (
        <ToggleButton
          key={position}
          value={position}
          isActive={selectedItems.includes(position)}
          onToggle={handleToggle}
        />
      ))}
      {JSON.stringify(selectedPosition)}
    </StyledButtonGroup>
  );
};

🎯 PR 포인트

📝 참고 사항

• Button 컴포넌트 머지되면 반영하겠습니다.
• 토글 버튼으로 셀렉트 박스 만들 예정입니다.
• border 속성을 추가했습니다.

❓ 궁금한 점

• 부족한 부분이 있으면 알려주세요!

[1eecan]

🎉 @imb96 님 랜덤 리뷰어로 당첨되셨습니다! 리뷰를 부탁드립니다. 🙏

[dlwl98]

LGTM