fix(warn): Optimize console warnings to prevent excessive output in development (#2661)

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [ ] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [ ] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue

<!-- Please link to issue if one exists -->

- Fixes #2644

## Summary

Optimizes the `warn` utility function to prevent excessive console
warnings in development mode, specifically addressing performance issues
when many components trigger the same warning (e.g., legacy icon
deprecation).

## Details

This PR introduces a `scope` parameter to the `warn` function. When a
`scope` is provided, the warning message for that specific scope will
only be logged to the console once per development session.

This change was made to:
- Prevent UI blocking and developer tool freezing caused by hundreds or
thousands of identical console warnings, especially when using
components with deprecated features (like legacy icons) in large lists.
- Improve the developer experience by reducing console noise while still
providing necessary warnings.

**Key Changes:**
- **`packages/bezier-react/src/utils/assert.ts`**:
    - `warn` function overloaded to accept an optional `scope` string.
- Uses an internal `Set` (`devWarningScopes`) to track and ensure each
scoped warning is logged only once.
- **Component Updates**:
- Applied the new `scope` parameter to existing legacy icon deprecation
warnings in `Button`, `Banner`, and `SectionLabel` components.
- **Test Coverage**:
- Added new tests for the `warn` function to verify that warnings are
logged only once per scope and that different scopes are handled
independently.

### Breaking change? (Yes/No)

No. This is an internal utility improvement that only affects
development-mode console output.

## References

- Inspired by `react-window`'s warning mechanism:
-
https://github.com/bvaughn/react-window/blob/72db696dd8ebb7f0f287c78d037ff68ba9534183/src/createListComponent.js#L674-L682
-
https://github.com/bvaughn/react-window/blob/72db696dd8ebb7f0f287c78d037ff68ba9534183/src/__tests__/FixedSizeList.js#L868-L885

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

* **신규 기능**
  * 경고 메시지에 scope(범위) 파라미터가 추가되어, 동일 범위 내에서는 경고가 한 번만 표시됩니다.

* **버그 수정**
* Button, Banner, SectionLabel 컴포넌트의 레거시 아이콘 사용 시 과도한 경고로 인한 UI 지연 현상이
개선되었습니다.

* **테스트**
  * scope별 경고 동작을 검증하는 테스트가 추가되었습니다.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Cursor Agent <[email protected]>
Co-authored-by: ed <[email protected]>

Author: 3 people

.changeset/warn-scope-optimization.md

@@ -0,0 +1,10 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+Optimize warn function to prevent duplicate console logs
+
+- Add `scope` parameter to `warn` so each message logs only once per scope
+- Apply the scoped warning to legacy-icon deprecation in Button, Banner, SectionLabel
+- Add comprehensive tests for the new `warn` behavior
+- Prevent UI blocking and developer tool freezing when using legacy icons with virtual lists

packages/bezier-react/src/components/Banner/Banner.tsx

@@ -77,7 +77,8 @@ export const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
 ) {
   if (isIconName(icon)) {
     warn(
-      'Deprecation: IconName as a value for the icon property of Banner has been deprecated. Use the Icon of bezier-icons instead.'
+      'Deprecation: IconName as a value for the icon property of Banner has been deprecated. Use the Icon of bezier-icons instead.',
+      'Banner.IconName'
     )
   }
 

packages/bezier-react/src/components/Button/Button.tsx

@@ -64,7 +64,8 @@ function ButtonSideContent({
 }) {
   if (isIconName(children)) {
     warn(
-      'Deprecation: IconName as a value for the leftContent property of a Button has been deprecated. Use the Icon of bezier-icons instead.'
+      'Deprecation: IconName as a value for the leftContent property of a Button has been deprecated. Use the Icon of bezier-icons instead.',
+      'Button.IconName'
     )
     return (
       <LegacyIcon

packages/bezier-react/src/components/SectionLabel/SectionLabel.tsx

@@ -40,7 +40,8 @@ function LeftContent({ children }: { children: SectionLabelLeftContent }) {
 
   if (isLegacyIcon) {
     warn(
-      'Deprecation: IconName as a value for the icon property of SectionLabel has been deprecated. Use the Icon of bezier-icons instead.'
+      'Deprecation: IconName as a value for the icon property of SectionLabel has been deprecated. Use the Icon of bezier-icons instead.',
+      'SectionLabel.LeftContent.IconName'
     )
   }
 
@@ -76,7 +77,8 @@ function RightContent({ children }: { children: SectionLabelRightContent }) {
 
   if (isLegacyIcon) {
     warn(
-      'Deprecation: IconName as a value for the icon property of SectionLabel has been deprecated. Use the Icon of bezier-icons instead.'
+      'Deprecation: IconName as a value for the icon property of SectionLabel has been deprecated. Use the Icon of bezier-icons instead.',
+      'SectionLabel.RightContent.IconName'
     )
   }
 

packages/bezier-react/src/utils/assert.test.ts

@@ -86,4 +86,47 @@ describe('warn', () => {
 
     warnSpy.mockRestore()
   })
+
+  it('should output the message only once per scope when scope is provided', () => {
+    process.env.NODE_ENV = 'development'
+
+    const warnSpy = jest.spyOn(console, 'warn')
+
+    warn('Warning message', 'test-scope')
+    warn('Warning message', 'test-scope')
+    warn('Warning message', 'test-scope')
+
+    expect(warnSpy).toHaveBeenCalledTimes(1)
+    expect(warnSpy).toHaveBeenCalledWith('Warning message')
+
+    warnSpy.mockRestore()
+  })
+
+  it('should output different messages for different scopes', () => {
+    process.env.NODE_ENV = 'development'
+
+    const warnSpy = jest.spyOn(console, 'warn')
+
+    warn('Warning message 1', 'scope-1')
+    warn('Warning message 2', 'scope-2')
+    warn('Warning message 1', 'scope-1') // Should not be called again
+
+    expect(warnSpy).toHaveBeenCalledTimes(2)
+    expect(warnSpy).toHaveBeenNthCalledWith(1, 'Warning message 1')
+    expect(warnSpy).toHaveBeenNthCalledWith(2, 'Warning message 2')
+
+    warnSpy.mockRestore()
+  })
+
+  it('should not output warning in production environment even with scope', () => {
+    process.env.NODE_ENV = 'production'
+
+    const warnSpy = jest.spyOn(console, 'warn')
+
+    warn('Warning message', 'test-scope')
+
+    expect(warnSpy).not.toHaveBeenCalled()
+
+    warnSpy.mockRestore()
+  })
 })

packages/bezier-react/src/utils/assert.ts

@@ -2,10 +2,22 @@ export function isDev() {
   return process.env.NODE_ENV !== 'production'
 }
 
-export function warn(message: string) {
+const devWarningScopes = new Set<string>()
+
+export function warn(message: string): void
+export function warn(message: string, scope: string): void
+export function warn(message: string, scope?: string) {
   if (isDev()) {
-    // eslint-disable-next-line no-console
-    console.warn(message)
+    if (scope) {
+      if (!devWarningScopes.has(scope)) {
+        devWarningScopes.add(scope)
+        // eslint-disable-next-line no-console
+        console.warn(message)
+      }
+    } else {
+      // eslint-disable-next-line no-console
+      console.warn(message)
+    }
   }
 }