From e91da7d0c01c0948a5d3e35a5e2950d83d499e29 Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Thu, 2 May 2024 14:26:03 +0900
Subject: [PATCH 1/2] Use classnames for className

---
 src/hooks/useModal/index.tsx                  |  4 ++--
 src/modules/App/DesktopLayout.tsx             | 11 +++++-----
 .../components/FrozenNotification/index.tsx   |  3 ++-
 .../MessageInputWrapperView.tsx               |  2 +-
 .../SuggestedUserMentionItem.tsx              |  3 ++-
 .../components/UnreadCount/index.tsx          |  3 ++-
 .../GroupChannelListHeader/index.tsx          |  3 ++-
 .../components/MessageSearchUI/index.tsx      | 14 +++++-------
 src/modules/MessageSearch/index.tsx           | 22 +++++++++----------
 .../components/OpenChannelPreview.tsx         |  7 ++----
 .../components/OpenChannelPreview/index.tsx   |  5 +++--
 .../components/ParentMessageInfo/index.tsx    | 11 +++++++---
 .../ThreadList/ThreadListItemContent.tsx      | 19 ++++++++--------
 .../components/ThreadMessageInput/index.tsx   |  3 ++-
 src/ui/Accordion/Accordion.tsx                |  3 ++-
 src/ui/Avatar/AvatarDefault.tsx               |  3 ++-
 src/ui/BottomSheet/index.tsx                  |  6 ++---
 src/ui/Header/index.tsx                       |  6 ++---
 src/ui/MentionLabel/index.tsx                 | 11 +++++-----
 src/ui/MentionUserLabel/index.tsx             |  3 ++-
 .../MessageContent/MessageProfile/index.tsx   |  4 ++--
 src/ui/MessageInput/index.tsx                 |  4 ++--
 src/ui/MessageStatus/index.tsx                |  6 ++---
 src/ui/MobileMenu/MobileBottomSheet.tsx       | 18 +++++++--------
 .../MobileMenu/ReactedMembersBottomSheet.tsx  |  9 ++++----
 src/ui/OGMessageItemBody/index.tsx            |  7 ++++--
 src/ui/ProgressBar/index.tsx                  |  3 ++-
 src/ui/VoiceMessageInput/index.tsx            |  3 ++-
 src/ui/VoiceMessageItemBody/index.tsx         |  3 ++-
 29 files changed, 107 insertions(+), 92 deletions(-)

diff --git a/src/hooks/useModal/index.tsx b/src/hooks/useModal/index.tsx
index 3b2518fba..18f07c738 100644
--- a/src/hooks/useModal/index.tsx
+++ b/src/hooks/useModal/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useCallback, ReactElement, createContext, useMemo, useContext } from 'react';
 import { match } from 'ts-pattern';
 
-import { noop } from '../../utils/utils';
+import { classnames, noop } from '../../utils/utils';
 import Modal, { type ModalProps } from '../../ui/Modal';
 
 export type OpenGlobalModalProps = {
@@ -39,7 +39,7 @@ export const GlobalModalProvider = ({ children }: GlobalModalProviderProps) => {
         return (
           <Modal
             {...modalProps}
-            className={`sendbird-global-modal ${modalProps?.className}`}
+            className={classnames('sendbird-global-modal', modalProps?.className)}
             onClose={() => {
               modalProps?.onClose?.();
               closeModal();
diff --git a/src/modules/App/DesktopLayout.tsx b/src/modules/App/DesktopLayout.tsx
index 3787cd889..0eed0ddba 100644
--- a/src/modules/App/DesktopLayout.tsx
+++ b/src/modules/App/DesktopLayout.tsx
@@ -12,6 +12,7 @@ import ChannelSettings from '../ChannelSettings';
 import MessageSearchPannel from '../MessageSearch';
 import Thread from '../Thread';
 import { SendableMessageType } from '../../utils';
+import { classnames } from '../../utils/utils';
 
 export const DesktopLayout: React.FC<DesktopLayoutProps> = (props: DesktopLayoutProps) => {
   const {
@@ -113,11 +114,11 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = (props: DesktopLayout
         {enableLegacyChannelModules ? <ChannelList {...channelListProps} /> : <GroupChannelList {...channelListProps} />}
       </div>
       <div
-        className={`
-          ${showSettings ? 'sendbird-app__conversation--settings-open' : ''}
-          ${showSearch ? 'sendbird-app__conversation--search-open' : ''}
-          sendbird-app__conversation-wrap
-        `}
+        className={classnames(
+          'sendbird-app__conversation-wrap',
+          showSettings && 'sendbird-app__conversation--settings-open',
+          showSearch && 'sendbird-app__conversation--search-open',
+        )}
       >
         {enableLegacyChannelModules ? <Channel {...channelProps} /> : <GroupChannel {...channelProps} />}
       </div>
diff --git a/src/modules/GroupChannel/components/FrozenNotification/index.tsx b/src/modules/GroupChannel/components/FrozenNotification/index.tsx
index 1ec5ce319..1c898fa08 100644
--- a/src/modules/GroupChannel/components/FrozenNotification/index.tsx
+++ b/src/modules/GroupChannel/components/FrozenNotification/index.tsx
@@ -3,6 +3,7 @@ import React, { useContext } from 'react';
 
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import Label, { LabelTypography } from '../../../../ui/Label';
+import { classnames } from '../../../../utils/utils';
 
 export interface FrozenNotificationProps {
   className?: string;
@@ -13,7 +14,7 @@ export const FrozenNotification = ({
 }: FrozenNotificationProps): React.ReactElement => {
   const { stringSet } = useContext(LocalizationContext);
   return (
-    <div className={`sendbird-notification sendbird-notification--frozen ${className}`}>
+    <div className={classnames('sendbird-notification', 'sendbird-notification--frozen', className)}>
       <Label
         className="sendbird-notification__text"
         type={LabelTypography.CAPTION_2}
diff --git a/src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx b/src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx
index d4958be8e..a172ab2ec 100644
--- a/src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx
+++ b/src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx
@@ -146,7 +146,7 @@ export const MessageInputWrapperView = React.forwardRef((
   }
   // other conditions
   return (
-    <div className={`sendbird-message-input-wrapper${showVoiceMessageInput ? '--voice-message' : ''}`}>
+    <div className={showVoiceMessageInput ? 'sendbird-message-input-wrapper--voice-message' : 'sendbird-message-input-wrapper'}>
       {showSuggestedMentionList && (
         <SuggestedMentionList
           currentChannel={currentChannel}
diff --git a/src/modules/GroupChannel/components/SuggestedMentionList/SuggestedUserMentionItem.tsx b/src/modules/GroupChannel/components/SuggestedMentionList/SuggestedUserMentionItem.tsx
index e2bbc3cf9..43c4aff8c 100644
--- a/src/modules/GroupChannel/components/SuggestedMentionList/SuggestedUserMentionItem.tsx
+++ b/src/modules/GroupChannel/components/SuggestedMentionList/SuggestedUserMentionItem.tsx
@@ -6,6 +6,7 @@ import Avatar from '../../../../ui/Avatar';
 import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import uuidv4 from '../../../../utils/uuid';
+import { classnames } from '../../../../utils/utils';
 
 type MentionItemUIEvent = {
   event: any,
@@ -64,7 +65,7 @@ function SuggestedUserMentionItem(props: SuggestedUserMentionItemProps): JSX.Ele
   }
   return (
     <div
-      className={`sendbird-mention-suggest-list__user-item ${isFocused ? 'focused' : ''}`}
+      className={classnames('sendbird-mention-suggest-list__user-item', isFocused && 'focused')}
       onClick={(event) => onClick?.({ event, member: (member as Member), itemRef: scrollRef })}
       onMouseOver={(event) => onMouseOver?.({ event, member: (member as Member), itemRef: scrollRef })}
       onMouseMove={(event) => onMouseMove?.({ event, member: (member as Member), itemRef: scrollRef })}
diff --git a/src/modules/GroupChannel/components/UnreadCount/index.tsx b/src/modules/GroupChannel/components/UnreadCount/index.tsx
index 3cf0248fb..f3d64dee2 100644
--- a/src/modules/GroupChannel/components/UnreadCount/index.tsx
+++ b/src/modules/GroupChannel/components/UnreadCount/index.tsx
@@ -5,6 +5,7 @@ import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
 import Icon, { IconTypes, IconColors } from '../../../../ui/Icon';
 import format from 'date-fns/format';
+import { classnames } from '../../../../utils/utils';
 
 export interface UnreadCountProps {
   className?: string;
@@ -37,7 +38,7 @@ export const UnreadCount: React.FC<UnreadCountProps> = ({
 
   return (
     <div
-      className={`sendbird-notification${count < 1 ? '--hide' : ''} ${className}`}
+      className={classnames(count < 1 ? 'sendbird-notification--hide' : 'sendbird-notification', className)}
       onClick={onClick}
     >
       <Label className="sendbird-notification__text" color={LabelColors.ONCONTENT_1} type={LabelTypography.CAPTION_2}>
diff --git a/src/modules/GroupChannelList/components/GroupChannelListHeader/index.tsx b/src/modules/GroupChannelList/components/GroupChannelListHeader/index.tsx
index c0e64dce0..a67cb9a17 100644
--- a/src/modules/GroupChannelList/components/GroupChannelListHeader/index.tsx
+++ b/src/modules/GroupChannelList/components/GroupChannelListHeader/index.tsx
@@ -6,6 +6,7 @@ import { useLocalization } from '../../../../lib/LocalizationContext';
 import Avatar from '../../../../ui/Avatar';
 import Label, { LabelColors, LabelTypography } from '../../../../ui/Label';
 import Header, { HeaderCustomProps } from '../../../../ui/Header';
+import { classnames } from '../../../../utils/utils';
 
 export interface GroupChannelListHeaderProps extends HeaderCustomProps {
   /** @deprecated Use the props `renderMiddle` instead */
@@ -33,7 +34,7 @@ export const GroupChannelListHeader = ({
 
   return (
     <Header
-      className={`sendbird-channel-header ${allowProfileEdit ? 'sendbird-channel-header--allow-edit' : ''}`}
+      className={classnames('sendbird-channel-header', allowProfileEdit && 'sendbird-channel-header--allow-edit')}
       renderLeft={renderLeft}
       renderMiddle={() => (
         renderProfile?.() ?? (
diff --git a/src/modules/MessageSearch/components/MessageSearchUI/index.tsx b/src/modules/MessageSearch/components/MessageSearchUI/index.tsx
index 473e4cdcc..6ba415f87 100644
--- a/src/modules/MessageSearch/components/MessageSearchUI/index.tsx
+++ b/src/modules/MessageSearch/components/MessageSearchUI/index.tsx
@@ -10,8 +10,6 @@ import PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';
 import MessageSearchFileItem from '../../../../ui/MessageSearchFileItem';
 import { ClientSentMessages } from '../../../../types';
 
-const COMPONENT_CLASS_NAME = 'sendbird-message-search';
-
 export interface MessageSearchUIProps {
   renderPlaceHolderError?: (props: void) => React.ReactElement;
   renderPlaceHolderLoading?: (props: void) => React.ReactElement;
@@ -88,7 +86,7 @@ export const MessageSearchUI: React.FC<MessageSearchUIProps> = ({
 
   if (isInvalid && searchString && requestString) {
     return renderPlaceHolderError?.() || (
-      <div className={COMPONENT_CLASS_NAME}>
+      <div className="sendbird-message-search">
         <PlaceHolder
           type={PlaceHolderTypes.WRONG}
           retryToConnect={handleRetryToConnect}
@@ -99,7 +97,7 @@ export const MessageSearchUI: React.FC<MessageSearchUIProps> = ({
 
   if (loading && searchString && requestString) {
     return renderPlaceHolderLoading?.() || (
-      <div className={COMPONENT_CLASS_NAME}>
+      <div className="sendbird-message-search">
         <PlaceHolder type={PlaceHolderTypes.SEARCHING} />
       </div>
     );
@@ -107,7 +105,7 @@ export const MessageSearchUI: React.FC<MessageSearchUIProps> = ({
 
   if (!searchString) {
     return renderPlaceHolderNoString?.() || (
-      <div className={COMPONENT_CLASS_NAME}>
+      <div className="sendbird-message-search">
         <PlaceHolder
           type={PlaceHolderTypes.SEARCH_IN}
           searchInString={getChannelName()}
@@ -118,7 +116,7 @@ export const MessageSearchUI: React.FC<MessageSearchUIProps> = ({
 
   return (
     <div
-      className={COMPONENT_CLASS_NAME}
+      className="sendbird-message-search"
       onScroll={handleOnScroll}
       ref={scrollRef}
     >
@@ -132,7 +130,7 @@ export const MessageSearchUI: React.FC<MessageSearchUIProps> = ({
               if (message.messageType === 'file') {
                 return (
                   <MessageSearchFileItem
-                    className={`${COMPONENT_CLASS_NAME}__message-search-item`}
+                    className="sendbird-message-search__message-search-item"
                     message={message as FileMessage}
                     key={message.messageId}
                     selected={(selectedMessageId === message.messageId)}
@@ -145,7 +143,7 @@ export const MessageSearchUI: React.FC<MessageSearchUIProps> = ({
               }
               return (
                 <MessageSearchItem
-                  className={`${COMPONENT_CLASS_NAME}__message-search-item`}
+                  className="sendbird-message-search__message-search-item"
                   message={message as UserMessage}
                   key={message.messageId}
                   selected={(selectedMessageId === message.messageId)}
diff --git a/src/modules/MessageSearch/index.tsx b/src/modules/MessageSearch/index.tsx
index 53236c6a6..256df816c 100644
--- a/src/modules/MessageSearch/index.tsx
+++ b/src/modules/MessageSearch/index.tsx
@@ -12,8 +12,6 @@ export interface MessageSearchPannelProps extends MessageSearchUIProps, MessageS
   onCloseClick?: () => void;
 }
 
-const COMPONENT_CLASS_NAME = 'sendbird-message-search-pannel';
-
 function MessageSearchPannel(props: MessageSearchPannelProps): JSX.Element {
   const {
     channelUrl,
@@ -59,32 +57,32 @@ function MessageSearchPannel(props: MessageSearchPannelProps): JSX.Element {
   };
 
   return (
-    <div className={COMPONENT_CLASS_NAME}>
+    <div className="sendbird-message-search-pannel">
       <Header
-        className={`${COMPONENT_CLASS_NAME}__header`}
+        className="sendbird-message-search-pannel__header"
         renderMiddle={() => (
           <Header.Title title={stringSet.SEARCH_IN_CHANNEL} />
         )}
         renderRight={() => (
           <Header.IconButton
-            className={`${COMPONENT_CLASS_NAME}__header__close-button`}
+            className="sendbird-message-search-pannel__header__close-button"
             onClick={onCloseClick}
             type={IconTypes.CLOSE}
             color={IconColors.ON_BACKGROUND_1}
           />
         )}
       />
-      <div className={`${COMPONENT_CLASS_NAME}__input`}>
-        <div className={`${COMPONENT_CLASS_NAME}__input__container`}>
+      <div className="sendbird-message-search-pannel__input">
+        <div className="sendbird-message-search-pannel__input__container">
           <Icon
-            className={`${COMPONENT_CLASS_NAME}__input__container__search-icon`}
+            className="sendbird-message-search-pannel__input__container__search-icon"
             type={IconTypes.SEARCH}
             fillColor={IconColors.ON_BACKGROUND_3}
             width="24px"
             height="24px"
           />
           <input
-            className={`${COMPONENT_CLASS_NAME}__input__container__input-area`}
+            className="sendbird-message-search-pannel__input__container__input-area"
             placeholder={stringSet.SEARCH}
             value={inputString}
             onChange={handleOnChangeInputString}
@@ -92,7 +90,7 @@ function MessageSearchPannel(props: MessageSearchPannelProps): JSX.Element {
           {
             inputString && loading && (
               <Loader
-                className={`${COMPONENT_CLASS_NAME}__input__container__spinner`}
+                className="sendbird-message-search-pannel__input__container__spinner"
                 width="20px"
                 height="20px"
               >
@@ -108,7 +106,7 @@ function MessageSearchPannel(props: MessageSearchPannelProps): JSX.Element {
           {
             !loading && inputString && (
               <Icon
-                className={`${COMPONENT_CLASS_NAME}__input__container__reset-input-button`}
+                className="sendbird-message-search-pannel__input__container__reset-input-button"
                 type={IconTypes.REMOVE}
                 fillColor={IconColors.ON_BACKGROUND_3}
                 width="20px"
@@ -119,7 +117,7 @@ function MessageSearchPannel(props: MessageSearchPannelProps): JSX.Element {
           }
         </div>
       </div>
-      <div className={`${COMPONENT_CLASS_NAME}__message-search`}>
+      <div className="sendbird-message-search-pannel__message-search">
         <MessageSearchProvider
           channelUrl={channelUrl}
           searchString={searchString}
diff --git a/src/modules/OpenChannelApp/components/OpenChannelPreview.tsx b/src/modules/OpenChannelApp/components/OpenChannelPreview.tsx
index 9ad3bda36..67f14e814 100644
--- a/src/modules/OpenChannelApp/components/OpenChannelPreview.tsx
+++ b/src/modules/OpenChannelApp/components/OpenChannelPreview.tsx
@@ -7,6 +7,7 @@ import { Freeze } from '../assets/Icons';
 import Avatar from '../../../ui/Avatar';
 import Icon, { IconTypes, IconColors } from '../../../ui/Icon';
 import { OpenChannel } from '@sendbird/chat/openChannel';
+import { classnames } from '../../../utils/utils';
 
 interface Props {
   channel: OpenChannel;
@@ -42,11 +43,7 @@ export default function OpenChannelPreview({
   }, [isStreaming]);
   return (
     <div
-      className={`
-        channel-preview
-        ${selected ? 'channel-preview--selected' : null}
-        ${isStreaming ? 'channel-preview--streaming' : null}
-      `}
+      className={classnames('channel-preview', selected && 'channel-preview--selected', isStreaming && 'channel-preview--streaming')}
       onClick={onClick}
     >
       <div className="channel-preview__selection" />
diff --git a/src/modules/OpenChannelList/components/OpenChannelPreview/index.tsx b/src/modules/OpenChannelList/components/OpenChannelPreview/index.tsx
index 7a167a3bd..320e7361e 100644
--- a/src/modules/OpenChannelList/components/OpenChannelPreview/index.tsx
+++ b/src/modules/OpenChannelList/components/OpenChannelPreview/index.tsx
@@ -5,6 +5,7 @@ import { OpenChannel } from '@sendbird/chat/openChannel';
 import Avatar from '../../../../ui/Avatar';
 import Icon, { IconTypes, IconColors } from '../../../../ui/Icon';
 import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
+import { classnames } from '../../../../utils/utils';
 
 interface OpenChannelPreviewProps {
   className?: string;
@@ -21,7 +22,7 @@ function OpenChannelPreview({
 }: OpenChannelPreviewProps): React.ReactElement {
   return (
     <div
-      className={`sendbird-open-channel-preview ${isSelected ? 'selected' : ''} ${className}`}
+      className={classnames('sendbird-open-channel-preview', isSelected && 'selected', className)}
       onClick={onClick}
     >
       <div className="sendbird-open-channel-preview__cover-image">
@@ -46,7 +47,7 @@ function OpenChannelPreview({
       <div className="sendbird-open-channel-preview__context">
         <div className="sendbird-open-channel-preview__context__title">
           <Label
-            className={`sendbird-open-channel-preview__context__title__channel-name ${channel?.isFrozen ? 'frozen' : ''}`}
+            className={classnames('sendbird-open-channel-preview__context__title__channel-name', channel?.isFrozen && 'frozen')}
             type={LabelTypography.SUBTITLE_2}
             color={isSelected ? LabelColors.PRIMARY : LabelColors.ONBACKGROUND_1}
           >
diff --git a/src/modules/Thread/components/ParentMessageInfo/index.tsx b/src/modules/Thread/components/ParentMessageInfo/index.tsx
index db6e2f269..0ccad035f 100644
--- a/src/modules/Thread/components/ParentMessageInfo/index.tsx
+++ b/src/modules/Thread/components/ParentMessageInfo/index.tsx
@@ -30,6 +30,7 @@ import MobileMenu from '../../../../ui/MobileMenu';
 import { useDirtyGetMentions } from '../../../Message/hooks/useDirtyGetMentions';
 import { User } from '@sendbird/chat';
 import { getCaseResolvedReplyType } from '../../../../lib/utils/resolvedReplyType';
+import { classnames } from '../../../../utils/utils';
 
 export interface ParentMessageInfoProps {
   className?: string;
@@ -270,7 +271,11 @@ export default function ParentMessageInfo({
       <div className="sendbird-parent-message-info__content">
         <div className="sendbird-parent-message-info__content__info">
           <Label
-            className={`sendbird-parent-message-info__content__info__sender-name${isReactionEnabled ? '--use-reaction' : ''}`}
+            className={
+              isReactionEnabled
+                ? 'sendbird-parent-message-info__content__info__sender-name--use-reaction'
+                : 'sendbird-parent-message-info__content__info__sender-name'
+            }
             type={LabelTypography.CAPTION_2}
             color={LabelColors.ONBACKGROUND_2}
           >
@@ -297,7 +302,7 @@ export default function ParentMessageInfo({
       {/* context menu */}
       {!isMobile && (
         <MessageItemMenu
-          className={`sendbird-parent-message-info__context-menu ${isReactionEnabled ? 'use-reaction' : ''} ${supposedHover ? 'sendbird-mouse-hover' : ''}`}
+          className={classnames('sendbird-parent-message-info__context-menu', isReactionEnabled && 'use-reaction', supposedHover && 'sendbird-mouse-hover')}
           channel={currentChannel}
           message={parentMessage}
           isByMe={userId === parentMessage?.sender?.userId}
@@ -314,7 +319,7 @@ export default function ParentMessageInfo({
       )}
       {(isReactionEnabled && !isMobile) && (
         <MessageItemReactionMenu
-          className={`sendbird-parent-message-info__reaction-menu ${supposedHover ? 'sendbird-mouse-hover' : ''}`}
+          className={classnames('sendbird-parent-message-info__reaction-menu', supposedHover && 'sendbird-mouse-hover')}
           message={parentMessage}
           userId={userId}
           emojiContainer={emojiContainer}
diff --git a/src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx b/src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx
index 66bc53e33..4c67e0e7c 100644
--- a/src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx
+++ b/src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx
@@ -43,6 +43,7 @@ import MultipleFilesMessageItemBody, { ThreadMessageKind } from '../../../../ui/
 import { useThreadMessageKindKeySelector } from '../../../Channel/context/hooks/useThreadMessageKindKeySelector';
 import { useFileInfoListWithUploaded } from '../../../Channel/context/hooks/useFileInfoListWithUploaded';
 import { useThreadContext } from '../../context/ThreadProvider';
+import { classnames } from '../../../../utils/utils';
 
 export interface ThreadListItemContentProps {
   className?: string;
@@ -131,10 +132,10 @@ export default function ThreadListItemContent({
 
   return (
     <div
-      className={`sendbird-thread-list-item-content ${className} ${isByMe ? 'outgoing' : 'incoming'}`}
+      className={classnames('sendbird-thread-list-item-content', className, isByMe ? 'outgoing' : 'incoming')}
       ref={mobileMenuRef}
     >
-      <div className={`sendbird-thread-list-item-content__left ${isReactionEnabledInChannel ? 'use-reaction' : ''} ${isByMe ? 'outgoing' : 'incoming'}`}>
+      <div className={classnames('sendbird-thread-list-item-content__left', isReactionEnabledInChannel && 'use-reaction', isByMe ? 'outgoing' : 'incoming')}>
         {(!isByMe && !chainBottom) && (
           <ContextMenu
             menuTrigger={(toggleDropdown) => (
@@ -177,9 +178,12 @@ export default function ThreadListItemContent({
         )}
         {(isByMe && !isMobile) && (
           <div
-            className={`sendbird-thread-list-item-content-menu ${isReactionEnabledInChannel ? 'use-reaction' : ''
-            } ${isByMe ? 'outgoing' : 'incoming'
-            } ${supposedHoverClassName}`}
+            className={classnames(
+              'sendbird-thread-list-item-content-menu',
+              isReactionEnabledInChannel && 'use-reaction',
+              isByMe ? 'outgoing' : 'incoming',
+              supposedHoverClassName,
+            )}
           >
             <MessageItemMenu
               className="sendbird-thread-list-item-content-menu__normal-menu"
@@ -343,10 +347,7 @@ export default function ThreadListItemContent({
           )}
         </div>
       </div>
-      <div
-        className={`sendbird-thread-list-item-content__right ${chainTop ? 'chain-top' : ''
-        } ${isByMe ? 'outgoing' : 'incoming'}`}
-      >
+      <div className={classnames('sendbird-thread-list-item-content__right', chainTop && 'chain-top', isByMe ? 'outgoing' : 'incoming')}>
         {(!isByMe && !isMobile) && (
           <div className={`sendbird-thread-list-item-content-menu ${supposedHoverClassName}`}>
             {isReactionEnabledInChannel && (
diff --git a/src/modules/Thread/components/ThreadMessageInput/index.tsx b/src/modules/Thread/components/ThreadMessageInput/index.tsx
index 3506cb61d..e51827a8a 100644
--- a/src/modules/Thread/components/ThreadMessageInput/index.tsx
+++ b/src/modules/Thread/components/ThreadMessageInput/index.tsx
@@ -18,6 +18,7 @@ import { useDirtyGetMentions } from '../../../Message/hooks/useDirtyGetMentions'
 import { useHandleUploadFiles } from '../../../Channel/context/hooks/useHandleUploadFiles';
 import { isDisabledBecauseFrozen, isDisabledBecauseMuted } from '../../../Channel/context/utils';
 import { User } from '@sendbird/chat';
+import { classnames } from '../../../../utils/utils';
 
 export interface ThreadMessageInputProps {
   className?: string;
@@ -116,7 +117,7 @@ const ThreadMessageInput = (
   }
 
   return (
-    <div className={`sendbird-thread-message-input${showVoiceMessageInput ? '--voice-message' : ''} ${className}`}>
+    <div className={classnames(showVoiceMessageInput ? 'sendbird-thread-message-input--voice-message' : 'sendbird-thread-message-input', className)}>
       {
         displaySuggestedMentionList && (
           <SuggestedMentionList
diff --git a/src/ui/Accordion/Accordion.tsx b/src/ui/Accordion/Accordion.tsx
index 962831531..ce2ea717b 100644
--- a/src/ui/Accordion/Accordion.tsx
+++ b/src/ui/Accordion/Accordion.tsx
@@ -3,6 +3,7 @@ import './index.scss';
 
 import Icon, { IconTypes } from '../Icon';
 import { useAccordionGroupContext } from './AccordionGroup';
+import { classnames } from '../../utils/utils';
 
 export interface AccordionProps {
   className?: string;
@@ -34,7 +35,7 @@ export const Accordion = ({
   };
 
   return (
-    <div className={`sendbird-accordion ${className} ${isOpened ? 'sendbird-accordion--opened' : 'sendbird-accordion--closed'}`}>
+    <div className={classnames('sendbird-accordion', className, isOpened ? 'sendbird-accordion--opened' : 'sendbird-accordion--closed')}>
       <div
         className="sendbird-accordion__panel-header"
         id={id}
diff --git a/src/ui/Avatar/AvatarDefault.tsx b/src/ui/Avatar/AvatarDefault.tsx
index 8716806cf..a06518d2b 100644
--- a/src/ui/Avatar/AvatarDefault.tsx
+++ b/src/ui/Avatar/AvatarDefault.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import pxToNumber from '../../utils/pxToNumber';
 import Icon, { IconColors, IconTypes } from '../Icon';
+import { classnames } from '../../utils/utils';
 
 interface AvatarDefaultProps {
   width: string | number,
@@ -22,7 +23,7 @@ const AvatarDefault = (props: AvatarDefaultProps) => {
 
   return (
     <div
-      className={`sendbird-avatar-img--default ${text ? 'text' : ''}`}
+      className={classnames('sendbird-avatar-img--default', text && 'text')}
       style={{ width, height }}
     >
       {
diff --git a/src/ui/BottomSheet/index.tsx b/src/ui/BottomSheet/index.tsx
index c8ebbaa50..6467353ae 100644
--- a/src/ui/BottomSheet/index.tsx
+++ b/src/ui/BottomSheet/index.tsx
@@ -33,7 +33,7 @@ const BottomSheet: React.FunctionComponent<BottomSheetProps> = (props: BottomShe
       className={`${className} sendbird-bottomsheet`}
     >
       <div
-        className={'sendbird-bottomsheet__content'}
+        className="sendbird-bottomsheet__content"
         role='dialog'
         aria-modal='true'
         aria-expanded='true'
@@ -41,9 +41,7 @@ const BottomSheet: React.FunctionComponent<BottomSheetProps> = (props: BottomShe
         {children}
       </div>
       <div
-        className={`
-          sendbird-bottomsheet__backdrop
-        `}
+        className="sendbird-bottomsheet__backdrop"
         onClick={(e) => {
           e?.stopPropagation();
           onBackdropClick?.();
diff --git a/src/ui/Header/index.tsx b/src/ui/Header/index.tsx
index 8681d5459..18186a287 100644
--- a/src/ui/Header/index.tsx
+++ b/src/ui/Header/index.tsx
@@ -9,7 +9,7 @@ import UIIcon from '../Icon';
 import type { Types as IconTypes } from '../Icon/type';
 import type { Colors as IconColors } from '../Icon/colors';
 import UIIconButton from '../IconButton';
-import { noop } from '../../utils/utils';
+import { classnames, noop } from '../../utils/utils';
 
 export interface HeaderCustomProps {
   renderLeft?: () => ReactNode;
@@ -37,7 +37,7 @@ export const Header = ({
     <div className={`sendbird-ui-header ${className}`}>
       {
         renderLeft ? (
-          <div className={`sendbird-ui-header__left sendbird-ui-header--is-${isMobile ? 'mobile' : 'desktop'}`}>
+          <div className={classnames('sendbird-ui-header__left', isMobile ? 'sendbird-ui-header--is-mobile' : 'sendbird-ui-header--is-desktop')}>
             {renderLeft?.()}
           </div>
         ) : null
@@ -47,7 +47,7 @@ export const Header = ({
       </div>
       {
         renderRight ? (
-          <div className={`sendbird-ui-header__right sendbird-ui-header--is-${isMobile ? 'mobile' : 'desktop'}`}>
+          <div className={classnames('sendbird-ui-header__right', isMobile ? 'sendbird-ui-header--is-mobile' : 'sendbird-ui-header--is-desktop')}>
             {renderRight?.()}
           </div>
         ) : null
diff --git a/src/ui/MentionLabel/index.tsx b/src/ui/MentionLabel/index.tsx
index b28c47638..6b8c13745 100644
--- a/src/ui/MentionLabel/index.tsx
+++ b/src/ui/MentionLabel/index.tsx
@@ -12,6 +12,7 @@ import ContextMenu, { MenuItems } from '../ContextMenu';
 import Label, { LabelTypography, LabelColors } from '../Label';
 import UserProfile from '../UserProfile';
 import useSendbirdStateContext from '../../hooks/useSendbirdStateContext';
+import { classnames } from '../../utils/utils';
 
 interface MentionLabelProps {
   mentionTemplate: string;
@@ -34,7 +35,7 @@ export default function MentionLabel(props: MentionLabelProps): JSX.Element {
   const userId = sendbirdState?.config?.userId;
   const sdk = sendbirdState?.stores?.sdkStore?.sdk;
   const amIBeingMentioned = userId === mentionedUserId;
-  const [user, setUser] = useState<User| null>();
+  const [user, setUser] = useState<User | null>();
   const fetchUser = useCallback(
     (toggleDropdown: () => void) => {
       if (user || !sdk?.createApplicationUserListQuery) {
@@ -57,10 +58,10 @@ export default function MentionLabel(props: MentionLabelProps): JSX.Element {
     <ContextMenu
       menuTrigger={(toggleDropdown: () => void): ReactElement => (
         <a
-          className={`
-            sendbird-word__mention
-            ${amIBeingMentioned ? 'sendbird-word__mention--me' : ''}
-          `}
+          className={classnames(
+            'sendbird-word__mention',
+            amIBeingMentioned && 'sendbird-word__mention--me',
+          )}
           onClick={() => fetchUser(toggleDropdown)}
           ref={mentionRef}
           data-userid={mentionedUserId}
diff --git a/src/ui/MentionUserLabel/index.tsx b/src/ui/MentionUserLabel/index.tsx
index 50e03d236..9f3862e40 100644
--- a/src/ui/MentionUserLabel/index.tsx
+++ b/src/ui/MentionUserLabel/index.tsx
@@ -2,6 +2,7 @@ import './index.scss';
 
 import React from 'react';
 import { MENTION_USER_LABEL_CLASSNAME } from './consts';
+import { classnames } from '../../utils/utils';
 
 interface MentionUserLabelProps {
   className?: string
@@ -20,7 +21,7 @@ export default function MentionUserLabel({
 }: MentionUserLabelProps): JSX.Element {
   return (
     <span
-      className={`${MENTION_USER_LABEL_CLASSNAME} ${className} ${isReverse ? 'reverse' : ''} ${color}`}
+      className={classnames(MENTION_USER_LABEL_CLASSNAME, className, isReverse && 'reverse', color)}
       contentEditable={false}
       data-userid={userId}
       data-sb-mention={true}
diff --git a/src/ui/MessageContent/MessageProfile/index.tsx b/src/ui/MessageContent/MessageProfile/index.tsx
index d53882a84..ba75dd595 100644
--- a/src/ui/MessageContent/MessageProfile/index.tsx
+++ b/src/ui/MessageContent/MessageProfile/index.tsx
@@ -10,6 +10,7 @@ import Avatar from '../../Avatar';
 import UserProfile from '../../UserProfile';
 import { MessageContentProps } from '../index';
 import { UserProfileContext } from '../../../lib/UserProfileContext';
+import { classnames } from '../../../utils/utils';
 
 export interface MessageProfileProps extends MessageContentProps {
   isByMe?: boolean;
@@ -41,8 +42,7 @@ export default function MessageProfile(
     <ContextMenu
       menuTrigger={(toggleDropdown: () => void): ReactElement => (
         <Avatar
-          className={`sendbird-message-content__left__avatar ${displayThreadReplies ? 'use-thread-replies' : ''
-          }`} // @ts-ignore
+          className={classnames('sendbird-message-content__left__avatar', displayThreadReplies && 'use-thread-replies')}
           src={
             channel?.members?.find(
               (member) => member?.userId === message.sender.userId,
diff --git a/src/ui/MessageInput/index.tsx b/src/ui/MessageInput/index.tsx
index 4075e7b19..f876ab94b 100644
--- a/src/ui/MessageInput/index.tsx
+++ b/src/ui/MessageInput/index.tsx
@@ -19,7 +19,7 @@ import { tokenizeMessage } from '../../modules/Message/utils/tokens/tokenize';
 import { USER_MENTION_PREFIX } from '../../modules/Message/consts';
 import { TOKEN_TYPES } from '../../modules/Message/utils/tokens/types';
 import { checkIfFileUploadEnabled } from './messageInputUtils';
-import { isMobileIOS } from '../../utils/utils';
+import { classnames, isMobileIOS } from '../../utils/utils';
 
 import { GroupChannel } from '@sendbird/chat/groupChannel';
 import { User } from '@sendbird/chat';
@@ -531,7 +531,7 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
             // renderFileUploadIcon which is set in code level
             || (isFileUploadEnabled && (
               <IconButton
-                className={`sendbird-message-input--attach ${isVoiceMessageEnabled ? 'is-voice-message-enabled' : ''}`}
+                className={classnames('sendbird-message-input--attach', isVoiceMessageEnabled && 'is-voice-message-enabled')}
                 height="32px"
                 width="32px"
                 onClick={() => {
diff --git a/src/ui/MessageStatus/index.tsx b/src/ui/MessageStatus/index.tsx
index 263f96f52..7b6821f91 100644
--- a/src/ui/MessageStatus/index.tsx
+++ b/src/ui/MessageStatus/index.tsx
@@ -13,6 +13,7 @@ import {
 import { getLastMessageCreatedAt } from '../../modules/ChannelList/components/ChannelPreview/utils';
 import { useLocalization } from '../../lib/LocalizationContext';
 import { Nullable } from '../../types';
+import { classnames } from '../../utils/utils';
 
 export const MessageStatusTypes = OutgoingMessageStates;
 
@@ -75,9 +76,8 @@ export default function MessageStatus({
         </Loader>
       ) : (
         <Icon
-          className={`sendbird-message-status__icon ${hideMessageStatusIcon ? 'hide-icon' : ''} ${status === OutgoingMessageStates.FAILED ? '' : 'sendbird-message-status--sent'
-          }`}
-          type={iconType[status] ?? IconTypes.ERROR}
+          className={classnames('sendbird-message-status__icon', hideMessageStatusIcon && 'hide-icon', status !== OutgoingMessageStates.FAILED && 'sendbird-message-status--sent')}
+          type={iconType[status] || IconTypes.ERROR}
           fillColor={iconColor[status]}
           width="16px"
           height="16px"
diff --git a/src/ui/MobileMenu/MobileBottomSheet.tsx b/src/ui/MobileMenu/MobileBottomSheet.tsx
index 190ebcc3e..eff48d56e 100644
--- a/src/ui/MobileMenu/MobileBottomSheet.tsx
+++ b/src/ui/MobileMenu/MobileBottomSheet.tsx
@@ -23,6 +23,7 @@ import Icon, { IconTypes, IconColors } from '../Icon';
 import Label, { LabelTypography, LabelColors } from '../Label';
 import { useLocalization } from '../../lib/LocalizationContext';
 import useSendbirdStateContext from '../../hooks/useSendbirdStateContext';
+import { classnames } from '../../utils/utils';
 
 const EMOJI_SIZE = 38;
 
@@ -96,12 +97,10 @@ const MobileBottomSheet: React.FunctionComponent<MobileBottomSheetProps> = (prop
               <ul
                 className="sendbird-message__bottomsheet-reaction-bar"
               >
-                <div
-                  className={`
-                    sendbird-message__bottomsheet-reaction-bar__row
-                    ${showEmojisOnly ? 'sendbird-message__bottomsheet-reaction-bar__all' : ''}
-                  `}
-                >
+                <div className={classnames(
+                  'sendbird-message__bottomsheet-reaction-bar__row',
+                  showEmojisOnly && 'sendbird-message__bottomsheet-reaction-bar__all',
+                )}>
                   {visibleEmojis.map((emoji: Emoji): React.ReactElement => {
                     const isReacted: boolean = message?.reactions
                       ?.filter((reaction: Reaction): boolean => reaction.key === emoji.key)[0]
@@ -238,9 +237,10 @@ const MobileBottomSheet: React.FunctionComponent<MobileBottomSheetProps> = (prop
               {
                 showMenuItemReply && (
                   <div
-                    className={`sendbird-message__bottomsheet--action
-                      ${disableReaction ? 'sendbird-message__bottomsheet--action-disabled' : ''}
-                    `}
+                    className={classnames(
+                      'sendbird-message__bottomsheet--action',
+                      disableReaction && 'sendbird-message__bottomsheet--action-disabled',
+                    )}
                     role="menuitem"
                     aria-disabled={disableReaction ? true : false}
                     onClick={() => {
diff --git a/src/ui/MobileMenu/ReactedMembersBottomSheet.tsx b/src/ui/MobileMenu/ReactedMembersBottomSheet.tsx
index aff6cb602..53278ea78 100644
--- a/src/ui/MobileMenu/ReactedMembersBottomSheet.tsx
+++ b/src/ui/MobileMenu/ReactedMembersBottomSheet.tsx
@@ -11,6 +11,7 @@ import ImageRenderer from '../ImageRenderer';
 import Icon, { IconColors, IconTypes } from '../Icon';
 import Label, { LabelColors, LabelTypography } from '../Label';
 import UserListItem from '../UserListItem';
+import { classnames } from '../../utils/utils';
 
 export interface ReactedMembersBottomSheetProps {
   message: SendableMessageType;
@@ -48,10 +49,10 @@ export const ReactedMembersBottomSheet = ({
             return (
               <div
                 key={reaction.key}
-                className={`
-                  sendbird-message__bottomsheet__reacted-members__item
-                  ${selectedEmoji === reaction.key ? 'sendbird-message__bottomsheet__reacted-members__item__selected' : ''}
-                `}
+                className={classnames(
+                  'sendbird-message__bottomsheet__reacted-members__item',
+                  selectedEmoji === reaction.key && 'sendbird-message__bottomsheet__reacted-members__item__selected',
+                )}
                 onClick={() => {
                   setSelectedEmoji(reaction.key);
                 }}
diff --git a/src/ui/OGMessageItemBody/index.tsx b/src/ui/OGMessageItemBody/index.tsx
index 5d825a9d9..193d86078 100644
--- a/src/ui/OGMessageItemBody/index.tsx
+++ b/src/ui/OGMessageItemBody/index.tsx
@@ -11,7 +11,7 @@ import TextFragment from '../../modules/Message/components/TextFragment';
 import { tokenizeMessage } from '../../modules/Message/utils/tokens/tokenize';
 import { OG_MESSAGE_BODY_CLASSNAME } from './consts';
 import { useMediaQueryContext } from '../../lib/MediaQueryContext';
-import { openURL } from '../../utils/utils';
+import { classnames, openURL } from '../../utils/utils';
 
 interface Props {
   className?: string | Array<string>;
@@ -99,7 +99,10 @@ const OGImageSection = (props: { onClick: () => void; ogImage: OGImage; onMessag
   return (
     <div
       ref={imageRef}
-      className={`sendbird-og-message-item-body__og-thumbnail ${ogImage.url ? '' : 'sendbird-og-message-item-body__og-thumbnail__empty'}`}
+      className={classnames(
+        'sendbird-og-message-item-body__og-thumbnail',
+        ogImage.url && 'sendbird-og-message-item-body__og-thumbnail__empty',
+      )}
       onClick={() => onClick()}
     >
       <ImageRenderer
diff --git a/src/ui/ProgressBar/index.tsx b/src/ui/ProgressBar/index.tsx
index a83c362e7..f83d2fdd7 100644
--- a/src/ui/ProgressBar/index.tsx
+++ b/src/ui/ProgressBar/index.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import './index.scss';
+import { classnames } from '../../utils/utils';
 
 /* eslint-disable no-redeclare */
 export const ProgressBarColorTypes = {
@@ -27,7 +28,7 @@ export const ProgressBar = ({
     return `${currentSize / maxSize * 100}%`;
   }, [currentSize, maxSize]);
   return (
-    <div className={`sendbird-progress-bar ${className} ${colorType} ${disabled ? 'progress-bar--disabled' : ''}`}>
+    <div className={classnames('sendbird-progress-bar', className, colorType, disabled && 'progress-bar--disabled')}>
       <div className="sendbird-progress-bar__fill" style={{ width }} />
     </div>
   );
diff --git a/src/ui/VoiceMessageInput/index.tsx b/src/ui/VoiceMessageInput/index.tsx
index 6debeb9ec..59d36cc63 100644
--- a/src/ui/VoiceMessageInput/index.tsx
+++ b/src/ui/VoiceMessageInput/index.tsx
@@ -10,6 +10,7 @@ import { useLocalization } from '../../lib/LocalizationContext';
 import ControlerIcon from './controlerIcons';
 import { VOICE_RECORDER_CLICK_BUFFER_TIME, VOICE_RECORDER_DEFAULT_MIN } from '../../utils/consts';
 import { VoiceMessageInputStatus } from './types';
+import { classnames } from '../../utils/utils';
 
 export interface VoiceMessageInputProps {
   minRecordTime?: number;
@@ -127,7 +128,7 @@ export const VoiceMessageInput = ({
         {
           renderSubmitButton?.() || (
             <div
-              className={`sendbird-voice-message-input__controler__submit ${isSendButtonDisabled ? 'voice-message--disabled' : ''}`}
+              className={classnames('sendbird-voice-message-input__controler__submit', isSendButtonDisabled && 'voice-message--disabled')}
               onClick={handleOnSubmitClick}
             >
               <Icon
diff --git a/src/ui/VoiceMessageItemBody/index.tsx b/src/ui/VoiceMessageItemBody/index.tsx
index 93f12bf84..75d572b44 100644
--- a/src/ui/VoiceMessageItemBody/index.tsx
+++ b/src/ui/VoiceMessageItemBody/index.tsx
@@ -10,6 +10,7 @@ import Loader from '../Loader';
 import Icon, { IconTypes, IconColors } from '../Icon';
 import { LabelTypography, LabelColors } from '../Label';
 import { VOICE_PLAYER_STATUS } from '../../hooks/VoicePlayer/dux/initialState';
+import { classnames } from '../../utils/utils';
 
 export interface VoiceMessageItemBodyProps {
   className?: string;
@@ -59,7 +60,7 @@ export const VoiceMessageItemBody = ({
   }, [message?.metaArrays]);
 
   return (
-    <div className={`sendbird-voice-message-item-body ${className} ${usingReaction ? 'is-reactions-contained' : ''}`}>
+    <div className={classnames('sendbird-voice-message-item-body', className, usingReaction && 'is-reactions-contained')}>
       <ProgressBar
         className="sendbird-voice-message-item-body__progress-bar"
         maxSize={duration || progressBarMaxSize}

From 7c0548f20006d112ba73c2715e970cac2538aa06 Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Thu, 2 May 2024 14:43:13 +0900
Subject: [PATCH 2/2] Fix incorrect converting & Update snapshots

---
 src/ui/Avatar/__tests__/__snapshots__/Avatar.spec.js.snap   | 4 ++--
 .../__tests__/__snapshots__/BottomSheet.spec.js.snap        | 4 +---
 .../__tests__/__snapshots__/MentionUserLabel.spec.js.snap   | 2 +-
 .../__tests__/__snapshots__/MessageContent.spec.js.snap     | 4 ++--
 .../__tests__/__snapshots__/MessageStatus.spec.js.snap      | 6 +++---
 .../__tests__/__snapshots__/OGMessageItemBody.spec.js.snap  | 2 +-
 src/ui/OGMessageItemBody/index.tsx                          | 2 +-
 .../__tests__/__snapshots__/ProgressBar.spec.js.snap        | 2 +-
 src/ui/Word/__tests__/__snapshots__/Word.spec.js.snap       | 5 +----
 9 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/ui/Avatar/__tests__/__snapshots__/Avatar.spec.js.snap b/src/ui/Avatar/__tests__/__snapshots__/Avatar.spec.js.snap
index e8fda54dd..59c3e27ac 100644
--- a/src/ui/Avatar/__tests__/__snapshots__/Avatar.spec.js.snap
+++ b/src/ui/Avatar/__tests__/__snapshots__/Avatar.spec.js.snap
@@ -58,7 +58,7 @@ exports[`ui/Avatar should do a snapshot test of the Avatar DOM with four element
         style="width: 100%; min-width: min(400px, 56px); max-width: 400px;"
       >
         <div
-          class="sendbird-avatar-img--default "
+          class="sendbird-avatar-img--default"
           style="width: 56px; height: 56px;"
         >
           <div
@@ -221,7 +221,7 @@ exports[`ui/Avatar should render default image if src is empty 1`] = `
       style="width: 100%; min-width: min(400px, 56px); max-width: 400px;"
     >
       <div
-        class="sendbird-avatar-img--default "
+        class="sendbird-avatar-img--default"
         style="width: 56px; height: 56px;"
       >
         <div
diff --git a/src/ui/BottomSheet/__tests__/__snapshots__/BottomSheet.spec.js.snap b/src/ui/BottomSheet/__tests__/__snapshots__/BottomSheet.spec.js.snap
index eb4372b7e..01d54c401 100644
--- a/src/ui/BottomSheet/__tests__/__snapshots__/BottomSheet.spec.js.snap
+++ b/src/ui/BottomSheet/__tests__/__snapshots__/BottomSheet.spec.js.snap
@@ -14,9 +14,7 @@ exports[`ui/BottomSheet should do a snapshot test of the default Button DOM 1`]
       role="dialog"
     />
     <div
-      class="
-          sendbird-bottomsheet__backdrop
-        "
+      class="sendbird-bottomsheet__backdrop"
     />
   </div>
 </div>
diff --git a/src/ui/MentionUserLabel/__tests__/__snapshots__/MentionUserLabel.spec.js.snap b/src/ui/MentionUserLabel/__tests__/__snapshots__/MentionUserLabel.spec.js.snap
index c14293da5..9d33e9f0b 100644
--- a/src/ui/MentionUserLabel/__tests__/__snapshots__/MentionUserLabel.spec.js.snap
+++ b/src/ui/MentionUserLabel/__tests__/__snapshots__/MentionUserLabel.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`ui/MentionUserLabel should do a snapshot test of the MentionUserLabel DOM 1`] = `
 <DocumentFragment>
   <span
-    class="sendbird-mention-user-label   undefined"
+    class="sendbird-mention-user-label"
     contenteditable="false"
     data-sb-mention="true"
   />
diff --git a/src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap b/src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap
index 553bea9a6..041340fe6 100644
--- a/src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap
+++ b/src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap
@@ -13,7 +13,7 @@ exports[`ui/MessageContent should do a snapshot test of the MessageContent DOM 1
         style="display: inline;"
       >
         <div
-          class="sendbird-message-content__left__avatar  sendbird-avatar"
+          class="sendbird-message-content__left__avatar sendbird-avatar"
           role="button"
           style="height: 28px; width: 28px; z-index: 0; bottom: 2px;"
           tabindex="0"
@@ -23,7 +23,7 @@ exports[`ui/MessageContent should do a snapshot test of the MessageContent DOM 1
             style="width: 100%; min-width: min(400px, 28px); max-width: 400px;"
           >
             <div
-              class="sendbird-avatar-img--default "
+              class="sendbird-avatar-img--default"
               style="width: 28px; height: 28px;"
             >
               <div
diff --git a/src/ui/MessageStatus/__tests__/__snapshots__/MessageStatus.spec.js.snap b/src/ui/MessageStatus/__tests__/__snapshots__/MessageStatus.spec.js.snap
index 8c366c2b4..cfb738670 100644
--- a/src/ui/MessageStatus/__tests__/__snapshots__/MessageStatus.spec.js.snap
+++ b/src/ui/MessageStatus/__tests__/__snapshots__/MessageStatus.spec.js.snap
@@ -6,7 +6,7 @@ exports[`ui/MessageStatus should do a snapshot test of the MessageStatus DOM 1`]
     class="example-text sendbird-message-status"
   >
     <div
-      class="sendbird-message-status__icon  sendbird-message-status--sent sendbird-icon sendbird-icon-done sendbird-icon-color--sent"
+      class="sendbird-message-status__icon sendbird-message-status--sent sendbird-icon sendbird-icon-done sendbird-icon-color--sent"
       role="button"
       style="width: 16px; min-width: 16px; height: 16px; min-height: 16px;"
       tabindex="0"
@@ -28,7 +28,7 @@ exports[`ui/MessageStatus should do a snapshot test of the failed MessageStatus
     class="example-text sendbird-message-status"
   >
     <div
-      class="sendbird-message-status__icon   sendbird-icon sendbird-icon-error sendbird-icon-color--error"
+      class="sendbird-message-status__icon sendbird-icon sendbird-icon-error sendbird-icon-color--error"
       role="button"
       style="width: 16px; min-width: 16px; height: 16px; min-height: 16px;"
       tabindex="0"
@@ -45,7 +45,7 @@ exports[`ui/MessageStatus should do a snapshot test of the failed MessageStatus
     class="example-text sendbird-message-status"
   >
     <div
-      class="sendbird-message-status__icon   sendbird-icon sendbird-icon-error sendbird-icon-color--error"
+      class="sendbird-message-status__icon sendbird-icon sendbird-icon-error sendbird-icon-color--error"
       role="button"
       style="width: 16px; min-width: 16px; height: 16px; min-height: 16px;"
       tabindex="0"
diff --git a/src/ui/OGMessageItemBody/__tests__/__snapshots__/OGMessageItemBody.spec.js.snap b/src/ui/OGMessageItemBody/__tests__/__snapshots__/OGMessageItemBody.spec.js.snap
index 92cfe23d9..95b3868f8 100644
--- a/src/ui/OGMessageItemBody/__tests__/__snapshots__/OGMessageItemBody.spec.js.snap
+++ b/src/ui/OGMessageItemBody/__tests__/__snapshots__/OGMessageItemBody.spec.js.snap
@@ -15,7 +15,7 @@ exports[`ui/OGMessageItemBody should do a snapshot test of the OGMessageItemBody
       </div>
     </span>
     <div
-      class="sendbird-og-message-item-body__og-thumbnail "
+      class="sendbird-og-message-item-body__og-thumbnail"
     >
       <div
         class="sendbird-og-message-item-body__og-thumbnail__image sendbird-image-renderer"
diff --git a/src/ui/OGMessageItemBody/index.tsx b/src/ui/OGMessageItemBody/index.tsx
index 193d86078..85c66545e 100644
--- a/src/ui/OGMessageItemBody/index.tsx
+++ b/src/ui/OGMessageItemBody/index.tsx
@@ -101,7 +101,7 @@ const OGImageSection = (props: { onClick: () => void; ogImage: OGImage; onMessag
       ref={imageRef}
       className={classnames(
         'sendbird-og-message-item-body__og-thumbnail',
-        ogImage.url && 'sendbird-og-message-item-body__og-thumbnail__empty',
+        !ogImage.url && 'sendbird-og-message-item-body__og-thumbnail__empty',
       )}
       onClick={() => onClick()}
     >
diff --git a/src/ui/ProgressBar/__tests__/__snapshots__/ProgressBar.spec.js.snap b/src/ui/ProgressBar/__tests__/__snapshots__/ProgressBar.spec.js.snap
index bf2ba16e7..3ba9f2398 100644
--- a/src/ui/ProgressBar/__tests__/__snapshots__/ProgressBar.spec.js.snap
+++ b/src/ui/ProgressBar/__tests__/__snapshots__/ProgressBar.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`ui/ProgressBar should do a snapshot test of the PlaceHolder DOM 1`] = `
 <DocumentFragment>
   <div
-    class="sendbird-progress-bar example-text progress-bar-color--primary "
+    class="sendbird-progress-bar example-text progress-bar-color--primary"
   >
     <div
       class="sendbird-progress-bar__fill"
diff --git a/src/ui/Word/__tests__/__snapshots__/Word.spec.js.snap b/src/ui/Word/__tests__/__snapshots__/Word.spec.js.snap
index 99847a1b8..caf7ad2ad 100644
--- a/src/ui/Word/__tests__/__snapshots__/Word.spec.js.snap
+++ b/src/ui/Word/__tests__/__snapshots__/Word.spec.js.snap
@@ -11,10 +11,7 @@ exports[`ui/Word should do a snapshot test of the Word DOM 1`] = `
       style="display: inline;"
     >
       <a
-        class="
-            sendbird-word__mention
-            
-          "
+        class="sendbird-word__mention"
         data-nickname="Hoon Baek"
         data-sb-mention="true"
         data-userid="hoon"