From 823e9f9f7d5cb7fc909d2f5cfc023b14474a339e Mon Sep 17 00:00:00 2001
From: nayounsang <nayounsang722@gmail.com>
Date: Tue, 29 Oct 2024 18:45:41 +0900
Subject: [PATCH 1/8] refactor: add use client driectvie at top of
 client-component files

components that use react hook or memo...
---
 packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx     | 2 ++
 .../src/components/AlphaAvatarGroup/AvatarGroup.tsx             | 2 ++
 .../src/components/AlphaToggleButton/ToggleButton.tsx           | 2 ++
 .../src/components/AlphaToggleButtonGroup/ToggleButtonGroup.tsx | 2 ++
 .../bezier-react/src/components/AppProvider/AppProvider.tsx     | 2 ++
 packages/bezier-react/src/components/AutoFocus/AutoFocus.tsx    | 2 ++
 packages/bezier-react/src/components/Avatar/Avatar.tsx          | 2 ++
 .../bezier-react/src/components/AvatarGroup/AvatarGroup.tsx     | 2 ++
 packages/bezier-react/src/components/Badge/Badge.tsx            | 2 ++
 packages/bezier-react/src/components/Button/Button.tsx          | 2 ++
 packages/bezier-react/src/components/Checkbox/Checkbox.tsx      | 2 ++
 .../src/components/FeatureProvider/FeatureProvider.tsx          | 2 ++
 .../bezier-react/src/components/FormControl/FormControl.tsx     | 2 ++
 packages/bezier-react/src/components/FormGroup/FormGroup.tsx    | 2 ++
 .../src/components/FormHelperText/FormHelperText.tsx            | 2 ++
 packages/bezier-react/src/components/FormLabel/FormLabel.tsx    | 2 ++
 packages/bezier-react/src/components/Icon/Icon.tsx              | 2 ++
 packages/bezier-react/src/components/LegacyIcon/LegacyIcon.tsx  | 2 ++
 .../src/components/LegacyStack/LegacyStack/LegacyStack.tsx      | 2 ++
 .../bezier-react/src/components/LegacyTooltip/LegacyTooltip.tsx | 2 ++
 .../src/components/LegacyTooltip/LegacyTooltipContent.tsx       | 2 ++
 packages/bezier-react/src/components/Modal/Modal.tsx            | 2 ++
 .../bezier-react/src/components/OutlineItem/OutlineItem.tsx     | 2 ++
 packages/bezier-react/src/components/Overlay/Overlay.tsx        | 2 ++
 .../bezier-react/src/components/ProgressBar/ProgressBar.tsx     | 2 ++
 packages/bezier-react/src/components/RadioGroup/RadioGroup.tsx  | 2 ++
 .../src/components/SegmentedControl/SegmentedControl.tsx        | 2 ++
 packages/bezier-react/src/components/Select/Select.tsx          | 2 ++
 packages/bezier-react/src/components/Slider/Slider.tsx          | 2 ++
 packages/bezier-react/src/components/Status/Status.tsx          | 2 ++
 packages/bezier-react/src/components/Tabs/Tabs.tsx              | 2 ++
 packages/bezier-react/src/components/Tag/Tag.tsx                | 2 ++
 packages/bezier-react/src/components/TextArea/TextArea.tsx      | 2 ++
 packages/bezier-react/src/components/TextField/TextField.tsx    | 2 ++
 .../bezier-react/src/components/ThemeProvider/ThemeProvider.tsx | 2 ++
 packages/bezier-react/src/components/Toast/Toast.tsx            | 2 ++
 .../bezier-react/src/components/TokenProvider/TokenProvider.tsx | 2 ++
 packages/bezier-react/src/components/Tooltip/Tooltip.tsx        | 2 ++
 .../src/components/WindowProvider/WindowProvider.tsx            | 2 ++
 39 files changed, 78 insertions(+)

diff --git a/packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx b/packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx
index ab369b3b5e..3b7626ab05 100644
--- a/packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx
+++ b/packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useMemo } from 'react'
 
 import classNames from 'classnames'
diff --git a/packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.tsx b/packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.tsx
index 7a108dad01..d0ec813653 100644
--- a/packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { forwardRef, useCallback, useMemo } from 'react'
 
 import { MoreIcon } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.tsx b/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.tsx
index ac9743b391..2e69e6cc2f 100644
--- a/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/AlphaToggleButtonGroup/ToggleButtonGroup.tsx b/packages/bezier-react/src/components/AlphaToggleButtonGroup/ToggleButtonGroup.tsx
index 62529781e4..06ca119d20 100644
--- a/packages/bezier-react/src/components/AlphaToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaToggleButtonGroup/ToggleButtonGroup.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useMemo } from 'react'
 
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
diff --git a/packages/bezier-react/src/components/AppProvider/AppProvider.tsx b/packages/bezier-react/src/components/AppProvider/AppProvider.tsx
index 2840a91fed..27019117a5 100644
--- a/packages/bezier-react/src/components/AppProvider/AppProvider.tsx
+++ b/packages/bezier-react/src/components/AppProvider/AppProvider.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useEffect } from 'react'
 
 import { getWindow } from 'ssr-window'
diff --git a/packages/bezier-react/src/components/AutoFocus/AutoFocus.tsx b/packages/bezier-react/src/components/AutoFocus/AutoFocus.tsx
index a2f276dd7b..cba579b81a 100644
--- a/packages/bezier-react/src/components/AutoFocus/AutoFocus.tsx
+++ b/packages/bezier-react/src/components/AutoFocus/AutoFocus.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useState } from 'react'
 
 import { Slot } from '@radix-ui/react-slot'
diff --git a/packages/bezier-react/src/components/Avatar/Avatar.tsx b/packages/bezier-react/src/components/Avatar/Avatar.tsx
index 78a718a8b0..6136f6f626 100644
--- a/packages/bezier-react/src/components/Avatar/Avatar.tsx
+++ b/packages/bezier-react/src/components/Avatar/Avatar.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useMemo } from 'react'
 
 import classNames from 'classnames'
diff --git a/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.tsx b/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.tsx
index 39436bc0f7..409911bf5c 100644
--- a/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.tsx
+++ b/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.tsx
@@ -1,3 +1,5 @@
+'use client' 
+
 import React, { forwardRef, useCallback, useMemo } from 'react'
 
 import { MoreIcon } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/Badge/Badge.tsx b/packages/bezier-react/src/components/Badge/Badge.tsx
index 1398c9ac2d..52d9ceab6b 100644
--- a/packages/bezier-react/src/components/Badge/Badge.tsx
+++ b/packages/bezier-react/src/components/Badge/Badge.tsx
@@ -1,3 +1,5 @@
+'use client' 
+
 import React, { forwardRef, memo } from 'react'
 
 import { isEmpty } from '~/src/utils/type'
diff --git a/packages/bezier-react/src/components/Button/Button.tsx b/packages/bezier-react/src/components/Button/Button.tsx
index 91ad4bb2d1..7f075bdd2f 100644
--- a/packages/bezier-react/src/components/Button/Button.tsx
+++ b/packages/bezier-react/src/components/Button/Button.tsx
@@ -1,3 +1,5 @@
+'use client' 
+
 import React, { forwardRef, useCallback } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/Checkbox/Checkbox.tsx b/packages/bezier-react/src/components/Checkbox/Checkbox.tsx
index a80d1ff310..f908a814a4 100644
--- a/packages/bezier-react/src/components/Checkbox/Checkbox.tsx
+++ b/packages/bezier-react/src/components/Checkbox/Checkbox.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { CheckBoldIcon, HyphenBoldIcon } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/FeatureProvider/FeatureProvider.tsx b/packages/bezier-react/src/components/FeatureProvider/FeatureProvider.tsx
index cc6ac0c5e2..5cf6155136 100644
--- a/packages/bezier-react/src/components/FeatureProvider/FeatureProvider.tsx
+++ b/packages/bezier-react/src/components/FeatureProvider/FeatureProvider.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useMemo, useState } from 'react'
 
 import { useIsomorphicLayoutEffect } from '~/src/hooks/useIsomorphicLayoutEffect'
diff --git a/packages/bezier-react/src/components/FormControl/FormControl.tsx b/packages/bezier-react/src/components/FormControl/FormControl.tsx
index bc3580d2fa..f0ad328e8c 100644
--- a/packages/bezier-react/src/components/FormControl/FormControl.tsx
+++ b/packages/bezier-react/src/components/FormControl/FormControl.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useCallback, useMemo, useState } from 'react'
 
 import classNames from 'classnames'
diff --git a/packages/bezier-react/src/components/FormGroup/FormGroup.tsx b/packages/bezier-react/src/components/FormGroup/FormGroup.tsx
index 9e452fb12c..2c24369897 100644
--- a/packages/bezier-react/src/components/FormGroup/FormGroup.tsx
+++ b/packages/bezier-react/src/components/FormGroup/FormGroup.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import useMergeRefs from '~/src/hooks/useMergeRefs'
diff --git a/packages/bezier-react/src/components/FormHelperText/FormHelperText.tsx b/packages/bezier-react/src/components/FormHelperText/FormHelperText.tsx
index 09884ada99..9fae5b657d 100644
--- a/packages/bezier-react/src/components/FormHelperText/FormHelperText.tsx
+++ b/packages/bezier-react/src/components/FormHelperText/FormHelperText.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'
diff --git a/packages/bezier-react/src/components/FormLabel/FormLabel.tsx b/packages/bezier-react/src/components/FormLabel/FormLabel.tsx
index ab217ee661..ca3732447a 100644
--- a/packages/bezier-react/src/components/FormLabel/FormLabel.tsx
+++ b/packages/bezier-react/src/components/FormLabel/FormLabel.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'
diff --git a/packages/bezier-react/src/components/Icon/Icon.tsx b/packages/bezier-react/src/components/Icon/Icon.tsx
index b025daa9e3..4f216ec43e 100644
--- a/packages/bezier-react/src/components/Icon/Icon.tsx
+++ b/packages/bezier-react/src/components/Icon/Icon.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, memo } from 'react'
 
 import classNames from 'classnames'
diff --git a/packages/bezier-react/src/components/LegacyIcon/LegacyIcon.tsx b/packages/bezier-react/src/components/LegacyIcon/LegacyIcon.tsx
index b61ecc068f..7a384e1fd4 100644
--- a/packages/bezier-react/src/components/LegacyIcon/LegacyIcon.tsx
+++ b/packages/bezier-react/src/components/LegacyIcon/LegacyIcon.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { memo } from 'react'
 
 import { icons } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/LegacyStack/LegacyStack/LegacyStack.tsx b/packages/bezier-react/src/components/LegacyStack/LegacyStack/LegacyStack.tsx
index 56b49e23ae..21e7f55fc5 100644
--- a/packages/bezier-react/src/components/LegacyStack/LegacyStack/LegacyStack.tsx
+++ b/packages/bezier-react/src/components/LegacyStack/LegacyStack/LegacyStack.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   Children,
   cloneElement,
diff --git a/packages/bezier-react/src/components/LegacyTooltip/LegacyTooltip.tsx b/packages/bezier-react/src/components/LegacyTooltip/LegacyTooltip.tsx
index 39d00f69c6..c57e5b766d 100644
--- a/packages/bezier-react/src/components/LegacyTooltip/LegacyTooltip.tsx
+++ b/packages/bezier-react/src/components/LegacyTooltip/LegacyTooltip.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   type Ref,
   forwardRef,
diff --git a/packages/bezier-react/src/components/LegacyTooltip/LegacyTooltipContent.tsx b/packages/bezier-react/src/components/LegacyTooltip/LegacyTooltipContent.tsx
index e53a642f21..8428985d2a 100644
--- a/packages/bezier-react/src/components/LegacyTooltip/LegacyTooltipContent.tsx
+++ b/packages/bezier-react/src/components/LegacyTooltip/LegacyTooltipContent.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import ReactDOM from 'react-dom'
 
diff --git a/packages/bezier-react/src/components/Modal/Modal.tsx b/packages/bezier-react/src/components/Modal/Modal.tsx
index da7b670101..442fc3b16d 100644
--- a/packages/bezier-react/src/components/Modal/Modal.tsx
+++ b/packages/bezier-react/src/components/Modal/Modal.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useCallback, useMemo, useState } from 'react'
 
 import { CancelIcon } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/OutlineItem/OutlineItem.tsx b/packages/bezier-react/src/components/OutlineItem/OutlineItem.tsx
index 9d3b887fe7..67f662504c 100644
--- a/packages/bezier-react/src/components/OutlineItem/OutlineItem.tsx
+++ b/packages/bezier-react/src/components/OutlineItem/OutlineItem.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useMemo } from 'react'
 
 import {
diff --git a/packages/bezier-react/src/components/Overlay/Overlay.tsx b/packages/bezier-react/src/components/Overlay/Overlay.tsx
index 7be4fc30f1..a934978243 100644
--- a/packages/bezier-react/src/components/Overlay/Overlay.tsx
+++ b/packages/bezier-react/src/components/Overlay/Overlay.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   forwardRef,
   useCallback,
diff --git a/packages/bezier-react/src/components/ProgressBar/ProgressBar.tsx b/packages/bezier-react/src/components/ProgressBar/ProgressBar.tsx
index 3c28dd0b5c..48b3afc369 100644
--- a/packages/bezier-react/src/components/ProgressBar/ProgressBar.tsx
+++ b/packages/bezier-react/src/components/ProgressBar/ProgressBar.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'
diff --git a/packages/bezier-react/src/components/RadioGroup/RadioGroup.tsx b/packages/bezier-react/src/components/RadioGroup/RadioGroup.tsx
index 6d9d44a108..87035c6853 100644
--- a/packages/bezier-react/src/components/RadioGroup/RadioGroup.tsx
+++ b/packages/bezier-react/src/components/RadioGroup/RadioGroup.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
diff --git a/packages/bezier-react/src/components/SegmentedControl/SegmentedControl.tsx b/packages/bezier-react/src/components/SegmentedControl/SegmentedControl.tsx
index 6f584507f9..9298df5c45 100644
--- a/packages/bezier-react/src/components/SegmentedControl/SegmentedControl.tsx
+++ b/packages/bezier-react/src/components/SegmentedControl/SegmentedControl.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   type ForwardedRef,
   forwardRef,
diff --git a/packages/bezier-react/src/components/Select/Select.tsx b/packages/bezier-react/src/components/Select/Select.tsx
index a97626352b..ac6fe2e4c4 100644
--- a/packages/bezier-react/src/components/Select/Select.tsx
+++ b/packages/bezier-react/src/components/Select/Select.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   forwardRef,
   useCallback,
diff --git a/packages/bezier-react/src/components/Slider/Slider.tsx b/packages/bezier-react/src/components/Slider/Slider.tsx
index d9bfdaefd9..910ac674f5 100644
--- a/packages/bezier-react/src/components/Slider/Slider.tsx
+++ b/packages/bezier-react/src/components/Slider/Slider.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { type CSSProperties, forwardRef, memo } from 'react'
 
 import * as SliderPrimitive from '@radix-ui/react-slider'
diff --git a/packages/bezier-react/src/components/Status/Status.tsx b/packages/bezier-react/src/components/Status/Status.tsx
index b78bf34231..0322166fe0 100644
--- a/packages/bezier-react/src/components/Status/Status.tsx
+++ b/packages/bezier-react/src/components/Status/Status.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { type CSSProperties, forwardRef, memo } from 'react'
 
 import { LockIcon, MoonFilledIcon } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/Tabs/Tabs.tsx b/packages/bezier-react/src/components/Tabs/Tabs.tsx
index 4cb43aef23..f50ed4a1cb 100644
--- a/packages/bezier-react/src/components/Tabs/Tabs.tsx
+++ b/packages/bezier-react/src/components/Tabs/Tabs.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useMemo } from 'react'
 
 import { OpenInNewIcon } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/Tag/Tag.tsx b/packages/bezier-react/src/components/Tag/Tag.tsx
index 27edd3cd72..2124dae954 100644
--- a/packages/bezier-react/src/components/Tag/Tag.tsx
+++ b/packages/bezier-react/src/components/Tag/Tag.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, memo } from 'react'
 
 import { CancelSmallIcon } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/TextArea/TextArea.tsx b/packages/bezier-react/src/components/TextArea/TextArea.tsx
index 565522d711..0d2a8a294c 100644
--- a/packages/bezier-react/src/components/TextArea/TextArea.tsx
+++ b/packages/bezier-react/src/components/TextArea/TextArea.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useRef } from 'react'
 
 import classNames from 'classnames'
diff --git a/packages/bezier-react/src/components/TextField/TextField.tsx b/packages/bezier-react/src/components/TextField/TextField.tsx
index ffd845c2dc..24b658d35b 100644
--- a/packages/bezier-react/src/components/TextField/TextField.tsx
+++ b/packages/bezier-react/src/components/TextField/TextField.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   forwardRef,
   useCallback,
diff --git a/packages/bezier-react/src/components/ThemeProvider/ThemeProvider.tsx b/packages/bezier-react/src/components/ThemeProvider/ThemeProvider.tsx
index 9ec3a753b8..b23191bd2f 100644
--- a/packages/bezier-react/src/components/ThemeProvider/ThemeProvider.tsx
+++ b/packages/bezier-react/src/components/ThemeProvider/ThemeProvider.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { Slot } from '@radix-ui/react-slot'
diff --git a/packages/bezier-react/src/components/Toast/Toast.tsx b/packages/bezier-react/src/components/Toast/Toast.tsx
index 8f3390b6d6..92f94c8eb3 100644
--- a/packages/bezier-react/src/components/Toast/Toast.tsx
+++ b/packages/bezier-react/src/components/Toast/Toast.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 
diff --git a/packages/bezier-react/src/components/TokenProvider/TokenProvider.tsx b/packages/bezier-react/src/components/TokenProvider/TokenProvider.tsx
index e088f30793..9e19c20f33 100644
--- a/packages/bezier-react/src/components/TokenProvider/TokenProvider.tsx
+++ b/packages/bezier-react/src/components/TokenProvider/TokenProvider.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useMemo } from 'react'
 
 import { tokens } from '@channel.io/bezier-tokens'
diff --git a/packages/bezier-react/src/components/Tooltip/Tooltip.tsx b/packages/bezier-react/src/components/Tooltip/Tooltip.tsx
index 03f8f9e07b..0c0250d24b 100644
--- a/packages/bezier-react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/bezier-react/src/components/Tooltip/Tooltip.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   forwardRef,
   useCallback,
diff --git a/packages/bezier-react/src/components/WindowProvider/WindowProvider.tsx b/packages/bezier-react/src/components/WindowProvider/WindowProvider.tsx
index 280f7c44d7..8d246a31c9 100644
--- a/packages/bezier-react/src/components/WindowProvider/WindowProvider.tsx
+++ b/packages/bezier-react/src/components/WindowProvider/WindowProvider.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useMemo } from 'react'
 
 import { createContext } from '~/src/utils/react'

From 18f41a0d4e25f8b0602cd4e9bcbd2b0b59df249e Mon Sep 17 00:00:00 2001
From: nayounsang <nayounsang722@gmail.com>
Date: Wed, 30 Oct 2024 21:18:48 +0900
Subject: [PATCH 2/8] chore: ignore MODULE_LEVEL_DIRECTIVE warning "Module
 level directives cause errors when bundled" warnings

---
 packages/bezier-react/rollup.config.mjs | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/bezier-react/rollup.config.mjs b/packages/bezier-react/rollup.config.mjs
index 91222e161d..47bd575fe1 100644
--- a/packages/bezier-react/rollup.config.mjs
+++ b/packages/bezier-react/rollup.config.mjs
@@ -113,6 +113,13 @@ const generateConfig = ({ output = [], plugins = [] }) =>
       minifycss(),
       ...plugins,
     ],
+    onwarn(warning, warn) {
+      // Suppress "Module level directives cause errors when bundled" warnings
+      if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
+        return
+      }
+      warn(warning)
+    },
   })
 
 export default defineConfig([

From d4b1d8364b212b4712fba2b8d4425c32f68f8207 Mon Sep 17 00:00:00 2001
From: nayounsang <nayounsang722@gmail.com>
Date: Wed, 30 Oct 2024 21:20:00 +0900
Subject: [PATCH 3/8] Revert "chore: ignore MODULE_LEVEL_DIRECTIVE warning"

I wrote the commit message incorrectly.

This reverts commit 53114f2ee87f9e72bcc283c72e2f0cd6761136
---
 packages/bezier-react/rollup.config.mjs | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/bezier-react/rollup.config.mjs b/packages/bezier-react/rollup.config.mjs
index 47bd575fe1..91222e161d 100644
--- a/packages/bezier-react/rollup.config.mjs
+++ b/packages/bezier-react/rollup.config.mjs
@@ -113,13 +113,6 @@ const generateConfig = ({ output = [], plugins = [] }) =>
       minifycss(),
       ...plugins,
     ],
-    onwarn(warning, warn) {
-      // Suppress "Module level directives cause errors when bundled" warnings
-      if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
-        return
-      }
-      warn(warning)
-    },
   })
 
 export default defineConfig([

From 9cc550df73c469f621a05112eb226d83b55ccacf Mon Sep 17 00:00:00 2001
From: nayounsang <nayounsang722@gmail.com>
Date: Wed, 30 Oct 2024 21:23:32 +0900
Subject: [PATCH 4/8] chore: ignore MODULE_LEVEL_DIRECTIVE warning

---
 packages/bezier-react/rollup.config.mjs | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/bezier-react/rollup.config.mjs b/packages/bezier-react/rollup.config.mjs
index 91222e161d..47bd575fe1 100644
--- a/packages/bezier-react/rollup.config.mjs
+++ b/packages/bezier-react/rollup.config.mjs
@@ -113,6 +113,13 @@ const generateConfig = ({ output = [], plugins = [] }) =>
       minifycss(),
       ...plugins,
     ],
+    onwarn(warning, warn) {
+      // Suppress "Module level directives cause errors when bundled" warnings
+      if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
+        return
+      }
+      warn(warning)
+    },
   })
 
 export default defineConfig([

From 244f821f11e507e8a7a6f57a1ff6dd3afa4cfc40 Mon Sep 17 00:00:00 2001
From: nayounsang <nayounsang722@gmail.com>
Date: Thu, 31 Oct 2024 16:35:42 +0900
Subject: [PATCH 5/8] refactor: add use client directvie to all the rest

---
 .../src/components/AlphaAvatarGroup/AvatarGroup.tsx             | 2 +-
 packages/bezier-react/src/components/AlphaButton/Button.tsx     | 2 ++
 .../src/components/AlphaDialogPrimitive/DialogPrimitive.tsx     | 2 ++
 .../src/components/AlphaFloatingButton/FloatingButton.tsx       | 2 ++
 .../components/AlphaFloatingIconButton/FloatingIconButton.tsx   | 2 ++
 .../bezier-react/src/components/AlphaIconButton/IconButton.tsx  | 2 ++
 packages/bezier-react/src/components/AlphaLoader/Loader.tsx     | 2 ++
 .../src/components/AlphaStatusBadge/StatusBadge.tsx             | 2 ++
 .../src/components/AlphaTooltipPrimitive/TooltipPrimitive.tsx   | 2 ++
 packages/bezier-react/src/components/Banner/Banner.tsx          | 2 ++
 packages/bezier-react/src/components/BaseButton/BaseButton.tsx  | 2 ++
 .../bezier-react/src/components/BaseTagBadge/BaseTagBadge.tsx   | 2 ++
 packages/bezier-react/src/components/Box/Box.tsx                | 2 ++
 .../bezier-react/src/components/ButtonGroup/ButtonGroup.tsx     | 2 ++
 packages/bezier-react/src/components/Center/Center.tsx          | 2 ++
 .../src/components/CheckableAvatar/CheckableAvatar.tsx          | 2 ++
 .../bezier-react/src/components/ConfirmModal/ConfirmModal.tsx   | 2 ++
 packages/bezier-react/src/components/Divider/Divider.tsx        | 2 ++
 packages/bezier-react/src/components/Emoji/Emoji.tsx            | 2 ++
 packages/bezier-react/src/components/Help/Help.tsx              | 2 ++
 .../bezier-react/src/components/KeyValueItem/KeyValueItem.tsx   | 2 ++
 .../src/components/LegacyStack/LegacyHStack/LegacyHStack.tsx    | 2 ++
 .../src/components/LegacyStack/LegacySpacer/LegacySpacer.tsx    | 2 ++
 .../components/LegacyStack/LegacyStackItem/LegacyStackItem.tsx  | 2 ++
 .../src/components/LegacyStack/LegacyVStack/LegacyVStack.tsx    | 2 ++
 packages/bezier-react/src/components/ListItem/ListItem.tsx      | 2 ++
 packages/bezier-react/src/components/NavGroup/NavGroup.tsx      | 2 ++
 packages/bezier-react/src/components/NavItem/NavItem.tsx        | 2 ++
 .../bezier-react/src/components/SectionLabel/SectionLabel.tsx   | 2 ++
 .../src/components/SmoothCornersBox/SmoothCornersBox.tsx        | 2 ++
 packages/bezier-react/src/components/Spinner/Spinner.tsx        | 2 ++
 packages/bezier-react/src/components/Stack/Stack.tsx            | 2 ++
 packages/bezier-react/src/components/Switch/Switch.tsx          | 2 ++
 packages/bezier-react/src/components/Text/Text.tsx              | 2 ++
 .../src/components/VisuallyHidden/VisuallyHidden.tsx            | 2 ++
 35 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.tsx b/packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.tsx
index d0ec813653..5c242d30cd 100644
--- a/packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.tsx
+++ b/packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.tsx
@@ -1,4 +1,4 @@
-'use client';
+'use client'
 
 import React, { forwardRef, useCallback, useMemo } from 'react'
 
diff --git a/packages/bezier-react/src/components/AlphaButton/Button.tsx b/packages/bezier-react/src/components/AlphaButton/Button.tsx
index cbe872c18d..69d6051a5e 100644
--- a/packages/bezier-react/src/components/AlphaButton/Button.tsx
+++ b/packages/bezier-react/src/components/AlphaButton/Button.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/AlphaDialogPrimitive/DialogPrimitive.tsx b/packages/bezier-react/src/components/AlphaDialogPrimitive/DialogPrimitive.tsx
index a03d2770e9..97bb364fd6 100644
--- a/packages/bezier-react/src/components/AlphaDialogPrimitive/DialogPrimitive.tsx
+++ b/packages/bezier-react/src/components/AlphaDialogPrimitive/DialogPrimitive.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import {
   Dialog,
   DialogClose,
diff --git a/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.tsx b/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.tsx
index 9a285e39c1..3f1fd06f02 100644
--- a/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.tsx
+++ b/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx b/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx
index a1683455ac..8155175f22 100644
--- a/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx
+++ b/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx b/packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx
index b6dfca96cb..101329dc54 100644
--- a/packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx
+++ b/packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/AlphaLoader/Loader.tsx b/packages/bezier-react/src/components/AlphaLoader/Loader.tsx
index 09b5a72c31..85bb6b3709 100644
--- a/packages/bezier-react/src/components/AlphaLoader/Loader.tsx
+++ b/packages/bezier-react/src/components/AlphaLoader/Loader.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'
diff --git a/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.tsx b/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.tsx
index 0922b5bd47..28a022c9e0 100644
--- a/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.tsx
+++ b/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { type CSSProperties, forwardRef } from 'react'
 
 import { MoonFilledIcon } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/AlphaTooltipPrimitive/TooltipPrimitive.tsx b/packages/bezier-react/src/components/AlphaTooltipPrimitive/TooltipPrimitive.tsx
index 10c5e2d978..b8f41ede5a 100644
--- a/packages/bezier-react/src/components/AlphaTooltipPrimitive/TooltipPrimitive.tsx
+++ b/packages/bezier-react/src/components/AlphaTooltipPrimitive/TooltipPrimitive.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import {
   Tooltip,
   TooltipArrow,
diff --git a/packages/bezier-react/src/components/Banner/Banner.tsx b/packages/bezier-react/src/components/Banner/Banner.tsx
index f233dfcdbd..de5f2f2b39 100644
--- a/packages/bezier-react/src/components/Banner/Banner.tsx
+++ b/packages/bezier-react/src/components/Banner/Banner.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/BaseButton/BaseButton.tsx b/packages/bezier-react/src/components/BaseButton/BaseButton.tsx
index b658125d5c..0c4687ed82 100644
--- a/packages/bezier-react/src/components/BaseButton/BaseButton.tsx
+++ b/packages/bezier-react/src/components/BaseButton/BaseButton.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'
diff --git a/packages/bezier-react/src/components/BaseTagBadge/BaseTagBadge.tsx b/packages/bezier-react/src/components/BaseTagBadge/BaseTagBadge.tsx
index b85d096a7e..acdc2512e0 100644
--- a/packages/bezier-react/src/components/BaseTagBadge/BaseTagBadge.tsx
+++ b/packages/bezier-react/src/components/BaseTagBadge/BaseTagBadge.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'
diff --git a/packages/bezier-react/src/components/Box/Box.tsx b/packages/bezier-react/src/components/Box/Box.tsx
index 041a0668e5..95568f586f 100644
--- a/packages/bezier-react/src/components/Box/Box.tsx
+++ b/packages/bezier-react/src/components/Box/Box.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { createElement, forwardRef } from 'react'
 
 import classNames from 'classnames'
diff --git a/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.tsx b/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.tsx
index a3ed113335..c96f8b5324 100644
--- a/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { Stack } from '~/src/components/Stack'
diff --git a/packages/bezier-react/src/components/Center/Center.tsx b/packages/bezier-react/src/components/Center/Center.tsx
index 58f37dcda0..7bea576bef 100644
--- a/packages/bezier-react/src/components/Center/Center.tsx
+++ b/packages/bezier-react/src/components/Center/Center.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'
diff --git a/packages/bezier-react/src/components/CheckableAvatar/CheckableAvatar.tsx b/packages/bezier-react/src/components/CheckableAvatar/CheckableAvatar.tsx
index 612a0af481..769a21940b 100644
--- a/packages/bezier-react/src/components/CheckableAvatar/CheckableAvatar.tsx
+++ b/packages/bezier-react/src/components/CheckableAvatar/CheckableAvatar.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { CheckIcon } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/ConfirmModal/ConfirmModal.tsx b/packages/bezier-react/src/components/ConfirmModal/ConfirmModal.tsx
index 031b8cebf5..63cca0eb35 100644
--- a/packages/bezier-react/src/components/ConfirmModal/ConfirmModal.tsx
+++ b/packages/bezier-react/src/components/ConfirmModal/ConfirmModal.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import {
diff --git a/packages/bezier-react/src/components/Divider/Divider.tsx b/packages/bezier-react/src/components/Divider/Divider.tsx
index 0992369408..d703cc6188 100644
--- a/packages/bezier-react/src/components/Divider/Divider.tsx
+++ b/packages/bezier-react/src/components/Divider/Divider.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import * as SeparatorPrimitive from '@radix-ui/react-separator'
diff --git a/packages/bezier-react/src/components/Emoji/Emoji.tsx b/packages/bezier-react/src/components/Emoji/Emoji.tsx
index 296de69652..4559079052 100644
--- a/packages/bezier-react/src/components/Emoji/Emoji.tsx
+++ b/packages/bezier-react/src/components/Emoji/Emoji.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { type CSSProperties, forwardRef } from 'react'
 
 import classNames from 'classnames'
diff --git a/packages/bezier-react/src/components/Help/Help.tsx b/packages/bezier-react/src/components/Help/Help.tsx
index 2d9d621237..6c5a436b31 100644
--- a/packages/bezier-react/src/components/Help/Help.tsx
+++ b/packages/bezier-react/src/components/Help/Help.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { HelpFilledIcon } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/KeyValueItem/KeyValueItem.tsx b/packages/bezier-react/src/components/KeyValueItem/KeyValueItem.tsx
index c5ab5f390b..198174fff8 100644
--- a/packages/bezier-react/src/components/KeyValueItem/KeyValueItem.tsx
+++ b/packages/bezier-react/src/components/KeyValueItem/KeyValueItem.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/LegacyStack/LegacyHStack/LegacyHStack.tsx b/packages/bezier-react/src/components/LegacyStack/LegacyHStack/LegacyHStack.tsx
index 39b89ec1b1..5e34b955d0 100644
--- a/packages/bezier-react/src/components/LegacyStack/LegacyHStack/LegacyHStack.tsx
+++ b/packages/bezier-react/src/components/LegacyStack/LegacyHStack/LegacyHStack.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { LegacyStack } from '~/src/components/LegacyStack/LegacyStack'
diff --git a/packages/bezier-react/src/components/LegacyStack/LegacySpacer/LegacySpacer.tsx b/packages/bezier-react/src/components/LegacyStack/LegacySpacer/LegacySpacer.tsx
index 703afc58a9..0262a06917 100644
--- a/packages/bezier-react/src/components/LegacyStack/LegacySpacer/LegacySpacer.tsx
+++ b/packages/bezier-react/src/components/LegacyStack/LegacySpacer/LegacySpacer.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { LegacyStackItem } from '~/src/components/LegacyStack/LegacyStackItem'
diff --git a/packages/bezier-react/src/components/LegacyStack/LegacyStackItem/LegacyStackItem.tsx b/packages/bezier-react/src/components/LegacyStack/LegacyStackItem/LegacyStackItem.tsx
index 69659cb6e7..40f272902d 100644
--- a/packages/bezier-react/src/components/LegacyStack/LegacyStackItem/LegacyStackItem.tsx
+++ b/packages/bezier-react/src/components/LegacyStack/LegacyStackItem/LegacyStackItem.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'
diff --git a/packages/bezier-react/src/components/LegacyStack/LegacyVStack/LegacyVStack.tsx b/packages/bezier-react/src/components/LegacyStack/LegacyVStack/LegacyVStack.tsx
index b77fa9a03d..4c87f5d5c0 100644
--- a/packages/bezier-react/src/components/LegacyStack/LegacyVStack/LegacyVStack.tsx
+++ b/packages/bezier-react/src/components/LegacyStack/LegacyVStack/LegacyVStack.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { LegacyStack } from '~/src/components/LegacyStack/LegacyStack'
diff --git a/packages/bezier-react/src/components/ListItem/ListItem.tsx b/packages/bezier-react/src/components/ListItem/ListItem.tsx
index 8880030373..f5a52ddc69 100644
--- a/packages/bezier-react/src/components/ListItem/ListItem.tsx
+++ b/packages/bezier-react/src/components/ListItem/ListItem.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/NavGroup/NavGroup.tsx b/packages/bezier-react/src/components/NavGroup/NavGroup.tsx
index c262276598..9286513dd8 100644
--- a/packages/bezier-react/src/components/NavGroup/NavGroup.tsx
+++ b/packages/bezier-react/src/components/NavGroup/NavGroup.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import {
diff --git a/packages/bezier-react/src/components/NavItem/NavItem.tsx b/packages/bezier-react/src/components/NavItem/NavItem.tsx
index 9d8f1a372e..751bdb526e 100644
--- a/packages/bezier-react/src/components/NavItem/NavItem.tsx
+++ b/packages/bezier-react/src/components/NavItem/NavItem.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'
diff --git a/packages/bezier-react/src/components/SectionLabel/SectionLabel.tsx b/packages/bezier-react/src/components/SectionLabel/SectionLabel.tsx
index a512297aa9..cfa9b14bc0 100644
--- a/packages/bezier-react/src/components/SectionLabel/SectionLabel.tsx
+++ b/packages/bezier-react/src/components/SectionLabel/SectionLabel.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'
diff --git a/packages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.tsx b/packages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.tsx
index 921ee6197c..10afd662c6 100644
--- a/packages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.tsx
+++ b/packages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'
diff --git a/packages/bezier-react/src/components/Spinner/Spinner.tsx b/packages/bezier-react/src/components/Spinner/Spinner.tsx
index 84c868996d..c1ac9b6907 100644
--- a/packages/bezier-react/src/components/Spinner/Spinner.tsx
+++ b/packages/bezier-react/src/components/Spinner/Spinner.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'
diff --git a/packages/bezier-react/src/components/Stack/Stack.tsx b/packages/bezier-react/src/components/Stack/Stack.tsx
index 6e94e96c8e..5d4deb86fa 100644
--- a/packages/bezier-react/src/components/Stack/Stack.tsx
+++ b/packages/bezier-react/src/components/Stack/Stack.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { createElement, forwardRef } from 'react'
 
 import classNames from 'classnames'
diff --git a/packages/bezier-react/src/components/Switch/Switch.tsx b/packages/bezier-react/src/components/Switch/Switch.tsx
index f4ade1fb69..c56f17016e 100644
--- a/packages/bezier-react/src/components/Switch/Switch.tsx
+++ b/packages/bezier-react/src/components/Switch/Switch.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import * as SwitchPrimitive from '@radix-ui/react-switch'
diff --git a/packages/bezier-react/src/components/Text/Text.tsx b/packages/bezier-react/src/components/Text/Text.tsx
index 17cc7877d1..ea95e71249 100644
--- a/packages/bezier-react/src/components/Text/Text.tsx
+++ b/packages/bezier-react/src/components/Text/Text.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { createElement, forwardRef } from 'react'
 
 import classNames from 'classnames'
diff --git a/packages/bezier-react/src/components/VisuallyHidden/VisuallyHidden.tsx b/packages/bezier-react/src/components/VisuallyHidden/VisuallyHidden.tsx
index b7cf5c84a2..27c61f4e33 100644
--- a/packages/bezier-react/src/components/VisuallyHidden/VisuallyHidden.tsx
+++ b/packages/bezier-react/src/components/VisuallyHidden/VisuallyHidden.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 
 import * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden'

From 3552937ba0d900b6445313b887e1dcb96314c3b0 Mon Sep 17 00:00:00 2001
From: nayounsang <nayounsang722@gmail.com>
Date: Thu, 31 Oct 2024 16:45:47 +0900
Subject: [PATCH 6/8] chore: add the changeset

---
 .changeset/gold-nails-crash.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/gold-nails-crash.md

diff --git a/.changeset/gold-nails-crash.md b/.changeset/gold-nails-crash.md
new file mode 100644
index 0000000000..fd96380303
--- /dev/null
+++ b/.changeset/gold-nails-crash.md
@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': patch
+---
+
+The use client directive has been added at the top of all components inside @channel.io/bezier-react.

From bcd997bd09c73aff7b10d4c30b8862292fe52afb Mon Sep 17 00:00:00 2001
From: nayounsang <nayounsang722@gmail.com>
Date: Fri, 1 Nov 2024 16:28:07 +0900
Subject: [PATCH 7/8] chore: change version bump to minor

---
 .changeset/gold-nails-crash.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/gold-nails-crash.md b/.changeset/gold-nails-crash.md
index fd96380303..a47a67c82f 100644
--- a/.changeset/gold-nails-crash.md
+++ b/.changeset/gold-nails-crash.md
@@ -1,5 +1,5 @@
 ---
-'@channel.io/bezier-react': patch
+'@channel.io/bezier-react': minor
 ---
 
 The use client directive has been added at the top of all components inside @channel.io/bezier-react.

From c5f601f9093f28d9697bc75bce4d5989cc7bd0e0 Mon Sep 17 00:00:00 2001
From: nayounsang <nayounsang722@gmail.com>
Date: Fri, 1 Nov 2024 16:31:57 +0900
Subject: [PATCH 8/8] feat: ignore warnings specific to 'use client' directive

---
 packages/bezier-react/rollup.config.mjs | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/bezier-react/rollup.config.mjs b/packages/bezier-react/rollup.config.mjs
index 47bd575fe1..e832213ba4 100644
--- a/packages/bezier-react/rollup.config.mjs
+++ b/packages/bezier-react/rollup.config.mjs
@@ -114,8 +114,10 @@ const generateConfig = ({ output = [], plugins = [] }) =>
       ...plugins,
     ],
     onwarn(warning, warn) {
-      // Suppress "Module level directives cause errors when bundled" warnings
-      if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
+      if (
+        warning.code === 'MODULE_LEVEL_DIRECTIVE' &&
+        warning.message.includes('use client')
+      ) {
         return
       }
       warn(warning)