Feature/2/커스텀 라디오 버튼

[leeminhee119]

라디오 버튼 컴포넌트

---

🏄🏼‍♂️‍ Summary (요약)

• 커스텀 라디오버튼 컴포넌트 작성

🫨 Describe your Change (변경사항)

• ListItemCard: 라디오버튼 형태가 라디오버튼 뿐만 아니라 아래와 같은 경우들에도 쓰일 것 같아 공통 컴포넌트로 빼두었습니다. 이 경우에도 카드라고 칭하는게 적합한지 모르겠는데 더 좋은 이름 있으면 추천해주세요..!

• 라디오 버튼: 아래와 같이 작성하면 영상과 같이 작동합니다.

  const [selectedValue, setSelectedValue] = useState<string>();

  return (
      <RadioButtonGroup radioName={"프로젝트 주기"} selectedValue={selectedValue} onChange={setSelectedValue}>
        <Radio value={"0"}>주 1회</Radio>
        <Radio value={"1"}>월 1회</Radio>
        <Radio value={"2"}>분기별</Radio>
        <Radio value={"3"}>프로젝트 끝난 후</Radio>
      </RadioButtonGroup>
  );

2024-07-06.11.32.44.mov

🧐 Issue number and link (참고)

• 공통 컴포넌트 정의 #11

• 커밋메시지에 이슈 번호를 #2로 잘못 적었네요.. 몇개 깜빡하고 누락도 됐어요 죄송합니다아

• 원래는 라디오 버튼에 국한되지 않고 props로 다중 선택이 가능하도록 지정하면 다중 선택도 가능하도록 개발하고 싶었는데, PR이 늦어질 것 같아 우선 라디오버튼이라도 올립니다!

  • 사실 이렇게 개발하면 checkbox겸 radio의 기능을 동시에 하는 컴포넌트가 되는 건데, 이렇게 겸용으로 쓸 수 있게 개발하는 게 나을지, 아니면 각각의 컴포넌트로 개발하는 게 나을지 고민이긴 합니다. 어떻게 생각하시는지 궁금해요!

• 변수/함수명, 로직, 구조 등등 피드백 많이 많이 해주세요!! 🙇‍♀️

📚 Reference (참조)

• React에서 라디오버튼 사용하기

[klmhyeonwoo]

children을 옵셔널하게 사용하는거면 PropsWithChildren을 사용해도 좋을 것 같다는 생각도 들어요 🤔

[leeminhee119]

오호 PropsWithChildren이라는 게 있군요! 하나 알아갑니다 감사해요 👍
여기 children은 항상 들어가게 될 텐데 잘못 적은 것 같네요 !! 수정할게용

[klmhyeonwoo]

제 웹 스톰 프리티어 이슈,, 감사합니다 😊

[donghunee]

selectedValue를 Optional로 설정하지 않은 이유가 있을까요?
string | undefined면 Optional하게 설정하는 것도 좋아보입니다~!!

[leeminhee119]

넵넵! 아무것도 선택하지 않은 경우는 값이 undefined인데, undefined 이더라도 반드시 props로 전달해야 Radio 컴포넌트 안에서 값을 읽을 수 있어서 이렇게 작성했습니다 !! optional로 설정하면 개발자 실수로 props를 전달하지 않게 될 수 있을 것 같아서요!

[donghunee]

고생하셨습니다 🍕

[klmhyeonwoo]

LGTM ✨