feature: Add renderHeader props to the ChannelSettingsUIProps (#1012)

### ChangeLog & Fix
* Add a `renderHeader` props to the ChannelSettingsUIProps
  ```
  <ChannelSettingsUI
    renderHeader={() => ...}
  />
  ```

Author: HoonBaek

src/modules/ChannelSettings/components/ChannelSettingsUI/ChannelSettingsHeader.tsx

@@ -0,0 +1,39 @@
+import React, { MouseEvent } from 'react';
+
+import { useLocalization } from '../../../../lib/LocalizationContext';
+import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
+
+import Label, { LabelColors, LabelTypography } from '../../../../ui/Label';
+import IconButton from '../../../../ui/IconButton';
+import Icon, { IconTypes } from '../../../../ui/Icon';
+
+export interface ChannelSettingsHeaderProps {
+  onCloseClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+export const ChannelSettingsHeader = ({
+  onCloseClick,
+}: ChannelSettingsHeaderProps) => {
+  const { stringSet } = useLocalization();
+  const { config } = useSendbirdStateContext();
+  const { logger } = config;
+
+  return (
+    <div className="sendbird-channel-settings__header">
+      <Label type={LabelTypography.H_2} color={LabelColors.ONBACKGROUND_1}>
+        {stringSet.CHANNEL_SETTING__HEADER__TITLE}
+      </Label>
+      <div className="sendbird-channel-settings__header-icon">
+        <IconButton
+          width="32px"
+          height="32px"
+          onClick={(e) => {
+            logger.info('ChannelSettings: Click close');
+            onCloseClick(e);
+          }}
+        >
+          <Icon className="sendbird-channel-settings__close-icon" type={IconTypes.CLOSE} height="22px" width="22px" />
+        </IconButton>
+      </div>
+    </div>
+  );
+};

src/modules/ChannelSettings/components/ChannelSettingsUI/index.tsx

@@ -5,17 +5,19 @@ import React, { useContext, useState } from 'react';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
 
+import { ChannelSettingsHeader, type ChannelSettingsHeaderProps } from './ChannelSettingsHeader';
+
 import PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';
 import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import Icon, { IconTypes, IconColors } from '../../../../ui/Icon';
-import IconButton from '../../../../ui/IconButton';
 import ChannelProfile from '../ChannelProfile';
 import ModerationPanel from '../ModerationPanel';
 import LeaveChannelModal from '../LeaveChannel';
 import UserPanel from '../UserPanel';
 
 export interface ChannelSettingsUIProps {
+  renderHeader?: (props: ChannelSettingsHeaderProps) => React.ReactElement;
   renderChannelProfile?: () => React.ReactElement;
   renderModerationPanel?: () => React.ReactElement;
   renderLeaveChannel?: () => React.ReactElement;
@@ -24,61 +26,38 @@ export interface ChannelSettingsUIProps {
 }
 
 const ChannelSettingsUI: React.FC<ChannelSettingsUIProps> = ({
+  renderHeader = (props) => <ChannelSettingsHeader {...props}/>,
   renderLeaveChannel,
   renderChannelProfile,
   renderModerationPanel,
   renderPlaceholderError,
   renderPlaceholderLoading,
 }: ChannelSettingsUIProps) => {
-  const { stringSet } = useContext(LocalizationContext);
-
   const state = useSendbirdStateContext();
+  const isOnline = state?.config?.isOnline;
+  const { stringSet } = useContext(LocalizationContext);
   const { channel, invalidChannel, onCloseClick, loading } = useChannelSettingsContext();
-
   const [showLeaveChannelModal, setShowLeaveChannelModal] = useState(false);
 
-  const isOnline = state?.config?.isOnline;
-  const logger = state?.config?.logger;
-
-  const renderHeaderArea = () => {
-    return (
-      <div className="sendbird-channel-settings__header">
-        <Label type={LabelTypography.H_2} color={LabelColors.ONBACKGROUND_1}>
-          {stringSet.CHANNEL_SETTING__HEADER__TITLE}
-        </Label>
-        <div className="sendbird-channel-settings__header-icon">
-          <IconButton
-            width="32px"
-            height="32px"
-            onClick={() => {
-              logger.info('ChannelSettings: Click close');
-              onCloseClick?.();
-            }}
-          >
-            <Icon className="sendbird-channel-settings__close-icon" type={IconTypes.CLOSE} height="22px" width="22px" />
-          </IconButton>
-        </div>
-      </div>
-    );
-  };
-
   if (loading) {
     if (renderPlaceholderLoading) return renderPlaceholderLoading();
     return <PlaceHolder type={PlaceHolderTypes.LOADING} />;
   }
 
+  const headerProps: ChannelSettingsHeaderProps = { onCloseClick };
+
   if (invalidChannel || !channel) {
     return (
       <div>
-        {renderHeaderArea()}
+        {renderHeader(headerProps)}
         <div>{renderPlaceholderError ? renderPlaceholderError() : <PlaceHolder type={PlaceHolderTypes.WRONG} />}</div>
       </div>
     );
   }
 
   return (
     <>
-      {renderHeaderArea()}
+      {renderHeader(headerProps)}
       <div className="sendbird-channel-settings__scroll-area">
         {renderChannelProfile?.() || <ChannelProfile />}
         {renderModerationPanel?.() || (channel?.myRole === 'operator' ? <ModerationPanel /> : <UserPanel />)}