Enhance FormControl 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

None

Summary

FormControl 컴포넌트를 개선합니다.

Details

• forwardRef를 추가합니다.
• useEffect 를 통해 마운트 여부를 체크하던 로직을 Callback ref를 사용한 방식으로 리팩토링합니다. 컨텍스트 사용처에서 더 깔끔한 방식으로 마운트 여부를 체크할 수 있도록 합니다.
  • 정확히 말하면 리팩토링은 아닙니다. 기존의 마운트 여부를 React Component 라이프사이클에서 DOM Node의 라이프사이클(렌더링 여부)로 체크하도록 변경했기때문에 더 의도에 맞는 코드가 되었습니다.
• TODO Resolve: labelPosition top일 때, Wrapper에 AlphaStack 을 사용하도록 리팩토링합니다.
• labelPosition left일 때, styled prop을 통해 leftLabelHeight를 전달받던 것을 CSS Variable로 리팩토링합니다.
• 기타 스타일 수정

Breaking change or not (Yes/No)

No

References

None

[changeset-bot]

🦋 Changeset detected

Latest commit: 0783cd2

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	Patch
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

Patch coverage: 93.10% and project coverage change: -0.02 ⚠️

Comparison is base (e2b4291) 78.12% compared to head (0783cd2) 78.11%.

Additional details and impacted files

@@             Coverage Diff             @@
##           next-v1    #1265      +/-   ##
===========================================
- Coverage    78.12%   78.11%   -0.02%     
===========================================
  Files          294      294              
  Lines         3795     3793       -2     
  Branches       844      841       -3     
===========================================
- Hits          2965     2963       -2     
  Misses         546      546              
  Partials       284      284              

Impacted Files	Coverage Δ
...t/src/components/Forms/FormControl/FormControl.tsx	91.83% <88.23%> (+0.72%)	⬆️
...components/Forms/FormControl/FormControl.styled.ts	100.00% <100.00%> (ø)
...components/Forms/FormControl/FormControlContext.ts	100.00% <100.00%> (ø)
...er-react/src/components/Forms/FormControl/index.ts	100.00% <100.00%> (ø)
...react/src/components/Forms/FormGroup/FormGroup.tsx	100.00% <100.00%> (ø)
...components/Forms/FormHelperText/FormHelperText.tsx	100.00% <100.00%> (ø)

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 in Codecov by Sentry.
📢 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