중복선택 버튼 컴포넌트 (체크박스) 작성

[leeminhee119]

중복선택 버튼 컴포넌트 (체크박스) 작성

---

🏄🏼‍♂️‍ Summary (요약)

• 중복 선택이 가능한 버튼그룹 (체크박스) 컴포넌트 개발
• 중복 선택이 불가한 버튼그룹 (라디오버튼) 컴포넌트 리팩토링 (체크박스와 사용방식 통일)

🫨 Describe your Change (변경사항)

• useRadioButton, useCheckBox 훅 작성
  • 각각 selectedValue, setSelectedValues (튜플의 세 번째 값) 값이 선택된 value 정보를 담고 있습니다.
• 라디오버튼은 input의 name 속성에 들어가는 radioName props를 추가로 전달해야 한다는 점 외에는 라디오버튼, 체크박스 사용 방법이 같습니다.

🧐 Issue number and link (참고)

• 공통 컴포넌트 정의 #11

📚 Reference (참조)

• Staging.tsx에 사용 예시를 참고해주세요!

[sean2337]

수고하셨습니다!!

[sean2337]

사용방법이 직관적이어서 좋네요!!

[sean2337]

htmlFor이라는 속성도 있군요!! 하나 또 알아갑니다.

[donghunee]

Suggested change

	import { RadioContextState } from "@/store/context/RadioContext";
	type UseRadioButtonReturn = [RadioContextState["isChecked"], RadioContextState["onChange"], string | undefined];
	export const useRadioButton = (): UseRadioButtonReturn => {
	const [selectedValue, setSelectedValue] = useState<string>();
	const isChecked = (value: string) => selectedValue === value;
	const onChange = (value: string) => setSelectedValue(value);
	return [isChecked, onChange, selectedValue];
	export const useRadioButton = () => {
	const [selectedValue, setSelectedValue] = useState<string>();
	const isChecked = (value: string) => selectedValue === value;
	const onChange = (value: string) => setSelectedValue(value);
	return [isChecked, onChange, selectedValue] as const;
	}

저는 custom hook에서 배열로 반환 시 return type을 설정해줄 때 as const로 명시해주는게 깔끔하더라구요~!!

별개로 object return 이 아닌 array return을 채택하신 이유도 궁금해요~!!

[leeminhee119]

아!! 맞네요 as const로 수정하겠습니다! 감사합니다 🙇‍♀️

+) Staging.tsx 파일에 예시 작성하면서 라디오버튼과 체크박스를 같이 사용할 때 useRadioButton, useCheckBox 훅이 같은 이름(isChecked)을 반환하다보니 충돌이 나더라구요! 저희 프로젝트에서는 아직까지 그럴 일은 없겠지만, 그래도 이름을 사용하는 쪽에서 바꿔서 사용하면 좋겠다는 생각으로 이렇게 작성했습니다!

[donghunee]

자세한 설명 감사합니다👍👍

[donghunee]

수고하셨습니다👏👏