Skip to content

feat: useRadio 훅 추가 #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 17, 2024
Merged

feat: useRadio 훅 추가 #9

merged 4 commits into from
May 17, 2024

Conversation

d0422
Copy link
Member

@d0422 d0422 commented May 17, 2024

  • useRadio 훅추가
  • useRadio README, storybook 작성
  • 테스트 코드 작성

useRadio

훅을 통해 아래와 같이 사용할 수 있습니다.
제네릭을 활용하여 Radio value에 대해서 자동완성을 지원합니다.

type RadioType = '🍕' | '🍔' | '🍟' | '🌭';

export default function Radio() {
  const { value, Radio, RadioGroup } = useRadio<RadioType>('🍕');
  return (
    <div>
      <RadioGroup>
        <Radio value="🍕">🍕</Radio>
        <Radio value="🍔">🍔</Radio>
        <Radio value="🍟">🍟</Radio>
        <Radio value="🌭">🌭</Radio>
      </RadioGroup>
    </div>
  );
}

@d0422 d0422 requested a review from HBSPS May 17, 2024 07:29
@d0422 d0422 self-assigned this May 17, 2024
@d0422 d0422 added the feature label May 17, 2024
Copy link
Contributor

@HBSPS HBSPS left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다!

Comment on lines +9 to +25
const RadioGroup = <T extends RadioValue>({
radioState,
className,
style,
children,
}: {
radioState: [T | undefined, React.Dispatch<React.SetStateAction<T | undefined>>];
className?: string;
style?: CSSProperties;
children: ReactNode;
}) => {
return (
<fieldset className={className} style={style}>
<RadioContext.Provider value={radioState}>{children}</RadioContext.Provider>
</fieldset>
);
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

- <RadioGroup>
-   <Radio />
- </RadioGroup>

+ <Radio>
+   <Radio.Value/>
+ </Radio>

이런식으로 compound 방식을 사용해도 좋을 것 같아요!
서로 연관된 Element임을 알 수 있고 구조를 파악하기 더 쉬울 것 같아요

@d0422 d0422 merged commit db4074f into Rapiders:main May 17, 2024
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants