fix: Use await inside of the Component, not in global scope (#1113)

[CLNP-3433](https://sendbird.atlassian.net/browse/CLNP-3433)

### Issue
```
Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
```

![image](https://github.com/sendbird/sendbird-uikit-react/assets/46333979/5221f359-ea3b-4fa8-baab-1a7810e1e438)


[CLNP-3433]:
https://sendbird.atlassian.net/browse/CLNP-3433?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: HoonBaek

src/stories/common/getSampleChannel.ts

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import SendbirdChat from "@sendbird/chat";
+import { GroupChannel, GroupChannelListOrder, GroupChannelModule } from "@sendbird/chat/groupChannel";
+import { OpenChannelModule } from "@sendbird/chat/openChannel";
+import { useAsyncEffect } from "@sendbird/uikit-tools";
+import { STORYBOOK_APP_ID, STORYBOOK_USER_ID } from '../common/const';
+
+type UseSampleChannelParams = {
+  appId?: string;
+  userId?: string;
+}
+export const useSampleChannel = ({
+  appId = STORYBOOK_APP_ID,
+  userId = STORYBOOK_USER_ID,
+}: UseSampleChannelParams = {}): GroupChannel | null => {
+  const [channel, setChannel] = useState<GroupChannel | null>(null);
+  useAsyncEffect(async () => {
+    try {
+      const chat = SendbirdChat.init({
+        appId,
+        modules: [new GroupChannelModule, new OpenChannelModule],
+      });
+
+      await chat.connect(userId);
+      const query = chat.groupChannel.createMyGroupChannelListQuery({ limit: 1, order: GroupChannelListOrder.LATEST_LAST_MESSAGE });
+      const channelList = await query.next();
+
+      if (channelList.length > 0) {
+        setChannel(channelList[0]);
+      } {
+        const query = chat.createApplicationUserListQuery({ limit: 10 });
+        const userList = await query.next();
+        const newChannel = await chat.groupChannel.createChannel({ invitedUserIds: userList.map(user => user.userId) });
+        setChannel(newChannel);
+      }
+    } catch (err) {
+      console.warn('Sendbird storybook - useSampleChannel: ', err);
+    }
+  }, []);
+  return channel;
+};

src/stories/common/useSampleChannel.ts

@@ -4,7 +4,7 @@ import type { Meta } from '@storybook/react';
 import SendbirdProvider from '../../lib/Sendbird';
 import ChannelSettings from '../../modules/ChannelSettings';
 import { STORYBOOK_APP_ID, STORYBOOK_USER_ID, STORYBOOK_NICKNAME } from '../common/const';
-import { getSampleChannel } from '../common/getSampleChannel';
+import { useSampleChannel } from '../common/useSampleChannel';
 
 const meta: Meta<typeof ChannelSettings> = {
   title: '1.Module/ChannelSettings',
@@ -74,7 +74,9 @@ const meta: Meta<typeof ChannelSettings> = {
 };
 export default meta;
 
-export const Default = (args): React.ReactElement => {
+export const Default = (): React.ReactElement => {
+  const channel = useSampleChannel();
+
   return (
     <div style={{ height: 500 }}>
       <SendbirdProvider
@@ -84,14 +86,10 @@ export const Default = (args): React.ReactElement => {
         breakpoint={/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)}
       >
         <ChannelSettings
-          {...args}
+          channelUrl={channel?.url ?? ''}
+          disableUserProfile={false}
         />
       </SendbirdProvider>
     </div>
   );
 };
-const channel = await getSampleChannel({ appId: STORYBOOK_APP_ID, userId: STORYBOOK_USER_ID });
-Default.args = {
-  channelUrl: channel.url,
-  disableUserProfile: false,
-};

src/stories/modules/ChannelSettings.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta } from '@storybook/react';
 import SendbirdProvider from '../../lib/Sendbird';
 import GroupChannel from '../../modules/GroupChannel';
 import { STORYBOOK_APP_ID, STORYBOOK_USER_ID, STORYBOOK_NICKNAME } from '../common/const';
-import { getSampleChannel } from '../common/getSampleChannel';
+import { useSampleChannel } from '../common/useSampleChannel';
 
 const meta: Meta<typeof GroupChannel> = { 
   title: '1.Module/GroupChannel',
@@ -103,7 +103,9 @@ const meta: Meta<typeof GroupChannel> = {
 };
 export default meta;
 
-export const Default = (args): React.ReactElement => {
+export const Default = (): React.ReactElement => {
+  const channel = useSampleChannel();
+
   return (
     <div style={{ height: 500 }}>
       <SendbirdProvider
@@ -113,20 +115,17 @@ export const Default = (args): React.ReactElement => {
         breakpoint={/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)}
       >
         <GroupChannel
-          {...args}
+          {...{
+            channelUrl: channel?.url ?? '',
+            isReactionEnabled: true,
+            isMessageGroupingEnabled: true,
+            showSearchIcon: true,
+            replyType: 'THREAD',
+            isMultipleFilesMessageEnabled: true,
+            disableUserProfile: false,
+          }}
         />
       </SendbirdProvider>
     </div>
   );
 };
-const channel = await getSampleChannel({ appId: STORYBOOK_APP_ID, userId: STORYBOOK_USER_ID });
-Default.args = {
-  channelUrl: channel.url,
-  isReactionEnabled: true,
-  isMessageGroupingEnabled: true,
-  showSearchIcon: true,
-  replyType: 'THREAD',
-  threadReplySelectType: 'THREAD',
-  isMultipleFilesMessageEnabled: true,
-  disableUserProfile: false,
-};

src/stories/modules/GroupChannel.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta } from '@storybook/react';
 import SendbirdProvider from '../../lib/Sendbird';
 import MessageSearch from '../../modules/MessageSearch';
 import { STORYBOOK_APP_ID, STORYBOOK_USER_ID } from '../common/const';
-import { getSampleChannel } from '../common/getSampleChannel';
+import { useSampleChannel } from '../common/useSampleChannel';
 
 const meta: Meta<typeof MessageSearch> = {
   title: '1.Module/MessageSearch',
@@ -61,20 +61,18 @@ const meta: Meta<typeof MessageSearch> = {
 };
 export default meta;
 
-export const Default = (args): React.ReactElement => {
+export const Default = (): React.ReactElement => {
+  const channel = useSampleChannel();
+
   return (
     <div style={{ height: 520 }}>
       <SendbirdProvider
         appId={STORYBOOK_APP_ID}
         userId={STORYBOOK_USER_ID}
         breakpoint={/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)}
       >
-        <MessageSearch {...args} />
+        <MessageSearch channelUrl={channel?.url ?? ''} />
       </SendbirdProvider>
     </div>
   );
 };
-const channel = await getSampleChannel({ appId: STORYBOOK_APP_ID, userId: STORYBOOK_USER_ID });
-Default.args = {
-  channelUrl: channel.url,
-};