Re-implement Radio component using RadioGroup in Radix UI

[sungik-choi]

Self Checklist

• I wrote a PR title in English.
• I added an appropriate label to the PR.
• I wrote a commit message in English.
• I wrote a commit message according to the Conventional Commits specification.
• I added the appropriate changeset for the changes.
• [Component] I wrote a unit test about the implementation.
• [Component] I wrote a storybook document about the implementation.
• [Component] I tested the implementation in various browsers.
  • Windows: Chrome, Edge, (Optional) Firefox
  • macOS: Chrome, Edge, Safari, (Optional) Firefox
• [New Component] I added my username to the correct directory in the CODEOWNERS file.

Related Issue

Fixes #709

Summary

RadioGroup 컴포넌트를 구현하고, Radio 컴포넌트를 재구현합니다.

Details

• Radix UI의 RadioGroup.Root 컴포넌트를 사용하여 RadioGroup 컴포넌트를 구현합니다.
• Radix UI의 RadioGroup.Item 컴포넌트를 사용하여 Radio 컴포넌트를 재구현합니다.

Breaking change or not (Yes/No)

Yes

• Legacy Radio component is now exported with namespace LEGACY__Radio. It will be deprecated.
• New Radio component must be used with the new RadioGroup component. See below.

// AS-IS
<Radio 
  value={value} 
  watchingValue={watchingValue}
  onClick={() => setWatchingValue(value)}
/>
// TO-BE
<RadioGroup 
  value={watchingValue}
  onChangeValue={setWatchingValue}
>
  <Radio value={value} />
</RadioGroup>

References

• https://www.radix-ui.com/docs/primitives/components/radio-group

[changeset-bot]

🦋 Changeset detected

Latest commit: c905017

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@channel.io/bezier-react	Minor
bezier-figma-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codecov]

Codecov Report

Base: 72.75% // Head: 72.88% // Increases project coverage by +0.13% 🎉

Coverage data is based on head (c905017) compared to base (f6789fa).
Patch coverage: 90.90% of modified lines in pull request are covered.

Additional details and impacted files

@@             Coverage Diff             @@
##           next-v1    #1071      +/-   ##
===========================================
+ Coverage    72.75%   72.88%   +0.13%     
===========================================
  Files          362      366       +4     
  Lines         4371     4404      +33     
  Branches       852      855       +3     
===========================================
+ Hits          3180     3210      +30     
- Misses        1117     1119       +2     
- Partials        74       75       +1     

Impacted Files	Coverage Δ
...ier-react/src/components/Forms/RadioGroup/index.ts	0.00% <0.00%> (ø)
...act/src/components/Forms/RadioGroup/RadioGroup.tsx	90.00% <90.00%> (ø)
...er-react/src/components/Forms/RadioGroup/Radio.tsx	100.00% <100.00%> (ø)
...c/components/Forms/RadioGroup/RadioGroup.styled.ts	100.00% <100.00%> (ø)
packages/bezier-react/src/utils/styleUtils.ts	97.22% <100.00%> (+0.16%)	⬆️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[github-actions]

Chromatic Report

🚀 Congratulations! Your build was successful!

• Storybook Preview
• Chromatic Build

[sungik-choi]

FormControl 컨텍스트 아래에서 사용할 수 있도록합니다. 하위 Item에 대한 컨트롤은 Radix 라이브러리-RadioGroupPrimitive.Root-에서 담당하므로, 개별 Item(Radio)에서 FormFieldProps를 사용하는게 아닌 RadioGroup 에서 FormFieldProps를 사용하도록 구현했습니다. 잘 동작하려면, 제시한 예시처럼 Radio 는 무조건 RadioGroup 하위에서만 사용되어야 합니다.

[dinohan]

shared-components와 front에서 이거 쓰도록 수정해야겠네요.

[sungik-choi]

채널 데스크 어플리케이션에 모달 마이그레이션 작업 완료 이후 머지할 예정입니다.