Allow `iconName` prop of `Button`, `Banner`, `SectionLabel` component to include `BezierIcon` type

[yangwooseong]

Self Checklist

• [x] I wrote a PR title in English.
• [x] I added an appropriate label to the PR.
• [x] I wrote a commit message in English.
• [x] I wrote a commit message according to the Conventional Commits specification.
• [x] 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.
• [x] [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

Partial Fix of #762

Summary

• Button, Banner, SectionLabel 컴포넌트들의 icon prop 에 대해 BezierIcon 타입을 넘길 수 있도록 변경합니다.
• 위 컴포넌트에 대해 베지어 내부적으로 iconName 을 사용하고 있는 곳을 BezierIcon type 으로 변경합니다.

Details

• 현재 메이저 버전(1.x.x)에서는 backward compatibility 를 위해 iconName 타입 지원을 남겨놓은 후에 2.x.x 버전부터 iconName 지원을 제거할 예정입니다.
• 주 사용처인 데스크 에서는 로컬로 베지어를 빌드 한 후에 @channel.io/bezier-codemod 를 사용하여 iconName -> BezierIcon 으로 마이그레이션을 완료한 상태입니다. 이 때 베지어에서 icon type 이 string 을 허용하지 않도록 하고 로컬 빌드 한 후 데스크에서 이걸 설치해서 타입 에러를 확인하면서 마이그레이션 하였습니다. 따라서 ts 가 아닌 곳에서 사용하고 있다면 체크가 누락되지만.. 이거는 어차피 ts-morph 를 사용하고 있어서 피할 수 없는 문제인 것 같습니다.
• 또한 Button 다음으로 Banner 에서 use case 가 많은데 @channel.io/bezier-codemod 에서는 Button 만 지원하고 있습니다. 그래서 살짝 번거롭긴 하지만 icon-name-to-bezier-icons.ts 에서 meta 를 Banner 로 변경, 빌드 한 후에 데스크에서 아래 커맨드로 패키지를 로컬로 실행하면 마이그레이션이 가능합니다.

  npm exec ~/(적절한 경로)/bezier-react/packages/bezier-codemod/node_modules/.bin/bezier-codemod (or npx instead of npm exec)

• 다음 메이저 버전 업을 할 때 iconName 지원을 제거하면 LegacyIcon 도 지워지고 #762 이슈도 resolve 될 것이라 기대하고 있습니다.

Breaking change or not (Yes/No)

• No

References

• 762

• https://docs.npmjs.com/cli/v8/commands/npm-exec

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: f32961b2b1b7f8737053467a8e5a637469c2af58

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

This PR includes changesets to release 3 packages

| Name | Type | | -------------------------- | ----- | | @channel.io/bezier-codemod | Minor | | @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[bot]]

Chromatic Report

🚀 Congratulations! Your build was successful!

• Storybook Preview
• Chromatic Build

[codecov[bot]]

Codecov Report

Patch coverage: 78.12% and project coverage change: -0.18% :warning:

Comparison is base (0d54036) 87.18% compared to head (f32961b) 87.00%.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #1562 +/- ## ========================================== - Coverage 87.18% 87.00% -0.18% ========================================== Files 281 281 Lines 3855 3879 +24 Branches 809 817 +8 ========================================== + Hits 3361 3375 +14 - Misses 421 430 +9 - Partials 73 74 +1 ``` | [Files Changed](https://app.codecov.io/gh/channel-io/bezier-react/pull/1562?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=channel-io) | Coverage Δ | | |---|---|---| | [...bezier-react/src/components/Banner/Banner.types.ts](https://app.codecov.io/gh/channel-io/bezier-react/pull/1562?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=channel-io#diff-cGFja2FnZXMvYmV6aWVyLXJlYWN0L3NyYy9jb21wb25lbnRzL0Jhbm5lci9CYW5uZXIudHlwZXMudHM=) | `100.00% <ø> (ø)` | | | [...bezier-react/src/components/Button/Button.types.ts](https://app.codecov.io/gh/channel-io/bezier-react/pull/1562?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=channel-io#diff-cGFja2FnZXMvYmV6aWVyLXJlYWN0L3NyYy9jb21wb25lbnRzL0J1dHRvbi9CdXR0b24udHlwZXMudHM=) | `100.00% <ø> (ø)` | | | [...ages/bezier-react/src/components/Banner/Banner.tsx](https://app.codecov.io/gh/channel-io/bezier-react/pull/1562?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=channel-io#diff-cGFja2FnZXMvYmV6aWVyLXJlYWN0L3NyYy9jb21wb25lbnRzL0Jhbm5lci9CYW5uZXIudHN4) | `82.35% <50.00%> (-10.24%)` | :arrow_down: | | [...ages/bezier-react/src/components/Button/Button.tsx](https://app.codecov.io/gh/channel-io/bezier-react/pull/1562?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=channel-io#diff-cGFja2FnZXMvYmV6aWVyLXJlYWN0L3NyYy9jb21wb25lbnRzL0J1dHRvbi9CdXR0b24udHN4) | `97.36% <80.00%> (-2.64%)` | :arrow_down: | | [...react/src/components/SectionLabel/SectionLabel.tsx](https://app.codecov.io/gh/channel-io/bezier-react/pull/1562?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=channel-io#diff-cGFja2FnZXMvYmV6aWVyLXJlYWN0L3NyYy9jb21wb25lbnRzL1NlY3Rpb25MYWJlbC9TZWN0aW9uTGFiZWwudHN4) | `90.74% <83.33%> (-4.92%)` | :arrow_down: | | [...ezier-react/src/components/Banner/Banner.styled.ts](https://app.codecov.io/gh/channel-io/bezier-react/pull/1562?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=channel-io#diff-cGFja2FnZXMvYmV6aWVyLXJlYWN0L3NyYy9jb21wb25lbnRzL0Jhbm5lci9CYW5uZXIuc3R5bGVkLnRz) | `100.00% <100.00%> (ø)` | | | [...-react/src/components/Modals/Modal/Modal.styled.ts](https://app.codecov.io/gh/channel-io/bezier-react/pull/1562?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=channel-io#diff-cGFja2FnZXMvYmV6aWVyLXJlYWN0L3NyYy9jb21wb25lbnRzL01vZGFscy9Nb2RhbC9Nb2RhbC5zdHlsZWQudHM=) | `100.00% <100.00%> (ø)` | | | [...src/components/SectionLabel/SectionLabel.styled.ts](https://app.codecov.io/gh/channel-io/bezier-react/pull/1562?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=channel-io#diff-cGFja2FnZXMvYmV6aWVyLXJlYWN0L3NyYy9jb21wb25lbnRzL1NlY3Rpb25MYWJlbC9TZWN0aW9uTGFiZWwuc3R5bGVkLnRz) | `95.45% <100.00%> (+0.45%)` | :arrow_up: | ... and [1 file with indirect coverage changes](https://app.codecov.io/gh/channel-io/bezier-react/pull/1562/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=channel-io)

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[sungik-choi]

또한 Button 다음으로 Banner 에서 use case 가 많은데 @channel.io/bezier-codemod 에서는 Button 만 지원하고 있습니다. 그래서 살짝 번거롭긴 하지만 icon-name-to-bezier-icons.ts 에서 meta 를 Banner 로 변경, 빌드 한 후에 데스크에서 아래 커맨드로 패키지를 로컬로 실행하면 마이그레이션이 가능합니다.

Button, Banner 모두 지원하도록 마이그레이션 스크립트도 변경되면 좋을 거 같습니다

[yangwooseong]

iconName을 사용할 경우, 런타임에 console.warn 등으로 에러를 띄워주는 것도 좋을 거 같아요. (참고)

console.warn('
  Deprecation: `IconName` as a value for the `leftContent` property of a `Button` has been deprecated. Use the Icon of bezier-icons instead.
')

좋네요! 여기 보니 메이저 버전 바뀔 때마다 가이드 해주고 있는데 저희도 나중에 해보면 좋겠네요!

[yangwooseong]

iconName을 사용할 경우, 런타임에 console.warn 등으로 에러를 띄워주는 것도 좋을 거 같아요. (참고)

console.warn('
  Deprecation: `IconName` as a value for the `leftContent` property of a `Button` has been deprecated. Use the Icon of bezier-icons instead.
')

이거 개발 환경에서만 콘솔을 띄우는 게 좋을 것 같은데 어떻게 생각하시나요? process.env.NODE_ENV 로 검사하는게 맞을지 의문이네요

[sungik-choi]

iconName을 사용할 경우, 런타임에 console.warn 등으로 에러를 띄워주는 것도 좋을 거 같아요. (참고)

console.warn('
  Deprecation: `IconName` as a value for the `leftContent` property of a `Button` has been deprecated. Use the Icon of bezier-icons instead.
')

이거 개발 환경에서만 콘솔을 띄우는 게 좋을 것 같은데 어떻게 생각하시나요? process.env.NODE_ENV 로 검사하는게 맞을지 의문이네요

좋은 거 같아요. process.env.NODE_ENV === 'development 로 검사하면 거의 모든 상황에서 괜찮지 않을까? 싶네요 정확히는 모르겠지만, 대부분 케이스에서 예약어처럼 사용되는 거 같아서요. 이거 빠르게 별도 PR로 작업해서 올려볼게요

[sungik-choi]

1602

[sungik-choi]

1602 적용 커밋 추가 후 머지해주시면 될 거 같습니다! @yangwooseong