Implement AlphaSmoothCornersBox component

[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 #1315

Summary

Implement AlphaSmoothCornersBox.

AlphaSmoothCornersBox is a simple div element with smooth corners.
It is available by enabling the SmoothCornersFeature.

<FeatureProvider features={[SmoothCornersFeature]}>
  <AlphaSmoothCornersBox />
</FeatureProvider>

• Change to use AlphaSmoothCornersBox for Avatar's internal implementation. Avatar's border is now implemented as a box-shadow instead of a qseudo element.
• Change to use AlphaSmoothCornersBox for ellipsis icon of AvatarGroup's internal implementation.

Details

• #1315의 첫번째 스텝으로 AlphaSmoothCorners 를 구현합니다.
• 다음 스텝으로 Enhance CheckableAvatar component to behave as an actual Checkbox #1237 과 함께 CheckableAvatar 의 내부 구현에 AlphaSmoothCorners 를 적용하고, smoothCorners 믹스인을 제거할 예정입니다.
• 컴포넌트 개별적으로 smooth corners를 비활성화할 수 있도록 disabled 속성을 추가하고, Avatar 에도 마찬가지로 smoothCorners 속성을 추가했습니다(default true, disabled의 default는 false).
• Avatar 의 스타일링을 class name과 css variable을 통한 방식으로 변경합니다. (related to Remove the CSS-in-JS library #1106)
• box-shadow를 통한 Avatar 의 border 스타일링이 잘 되어서, 수도 엘리먼트를 사용한 스타일링을 제거합니다.

Breaking change or not (Yes/No)

No

References

None

[changeset-bot]

🦋 Changeset detected

Latest commit: 8187774

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

[github-actions]

Chromatic Report

🚀 Congratulations! Your build was successful!

• Storybook Preview
• Chromatic Build

[codecov]

Codecov Report

Patch coverage: 95.45% and project coverage change: +0.04 🎉

Comparison is base (6b4bf96) 77.72% compared to head (8187774) 77.76%.

Additional details and impacted files

@@             Coverage Diff             @@
##           next-v1    #1317      +/-   ##
===========================================
+ Coverage    77.72%   77.76%   +0.04%     
===========================================
  Files          299      302       +3     
  Lines         3847     3855       +8     
  Branches       842      849       +7     
===========================================
+ Hits          2990     2998       +8     
- Misses         571      577       +6     
+ Partials       286      280       -6     

Impacted Files	Coverage Δ
...eact/src/components/Avatars/Avatar/Avatar.types.ts	100.00% <ø> (ø)
...bezier-react/src/components/Avatars/AvatarStyle.ts	100.00% <ø> (ø)
packages/bezier-react/src/utils/styleUtils.ts	92.85% <80.00%> (-1.74%)	⬇️
...ts/AlphaSmoothCornersBox/AlphaSmoothCornersBox.tsx	93.75% <93.75%> (ø)
...haSmoothCornersBox/AlphaSmoothCornersBox.styled.ts	100.00% <100.00%> (ø)
...eact/src/components/AlphaSmoothCornersBox/index.ts	100.00% <100.00%> (ø)
...act/src/components/Avatars/Avatar/Avatar.styled.ts	100.00% <100.00%> (+22.22%)	⬆️
...ier-react/src/components/Avatars/Avatar/Avatar.tsx	87.17% <100.00%> (+1.88%)	⬆️
...mponents/Avatars/AvatarGroup/AvatarGroup.styled.ts	100.00% <100.00%> (+7.69%)	⬆️
...src/components/Avatars/AvatarGroup/AvatarGroup.tsx	86.95% <100.00%> (ø)

... and 4 files with indirect coverage changes

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