feat: 채팅 버블 부가 정보 커스텀 스타일 프롭스 추가

Author: dia-triple

packages/tds-widget/src/chat/bubble-container/bubble-container.tsx

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from 'react'
+import { css, CSSProp } from 'styled-components'
 import { Container } from '@titicaca/tds-ui'
 
 import { DEFAULT_MESSAGE_ID_PREFIX } from '../chat/constants'
@@ -41,6 +42,14 @@ interface ContainerBaseProp {
   onReplyClick?: () => void
   /** 메세지 ref에 주입되는 callback 함수 */
   messageRefCallback?: (id: string) => void
+  /** 메세지 부가 정보 (날짜, 프로필 등) 커스텀 스타일 */
+  bubbleInfoStyle?: {
+    dateDivider?: { css?: CSSProp }
+    unreadCount?: { css?: CSSProp }
+    dateTime?: { css?: CSSProp }
+    profile?: { css?: CSSProp }
+    thanks?: { css?: CSSProp }
+  }
 }
 
 type SentBubbleContainerProp = PropsWithChildren<
@@ -66,6 +75,7 @@ function SentBubbleContainer({
   onReplyClick,
   messageRefCallback,
   children,
+  bubbleInfoStyle,
   ...props
 }: SentBubbleContainerProp) {
   return (
@@ -96,6 +106,8 @@ function SentBubbleContainer({
             showTimeInfo={showTimeInfo}
             onReplyClick={onReplyClick}
             css={{ marginRight: 4, textAlign: 'right' }}
+            dateTimeStyle={bubbleInfoStyle?.dateTime}
+            unreadCountStyle={bubbleInfoStyle?.unreadCount}
           />
         ) : null}
 
@@ -107,7 +119,13 @@ function SentBubbleContainer({
           count={thanks.count}
           haveMine={thanks.haveMine}
           onClick={onThanksClick}
-          css={{ display: 'inline-flex', marginTop: 6, marginRight: 10 }}
+          css={css`
+            display: inline-flex;
+            margin-top: 6px;
+            margin-right: 10px;
+
+            ${bubbleInfoStyle?.thanks?.css}
+          `}
         />
       ) : null}
     </Container>
@@ -145,6 +163,7 @@ function ReceivedBubbleContainer({
   messageRefCallback,
   onUserClick,
   children,
+  bubbleInfoStyle,
   ...props
 }: ReceivedBubbleContainerProp) {
   return (
@@ -170,7 +189,12 @@ function ReceivedBubbleContainer({
       ) : null}
       <Container css={{ marginLeft: 40 }}>
         {showProfile ? (
-          <ProfileName size="mini" alpha={0.8} margin={{ bottom: 5 }}>
+          <ProfileName
+            size="mini"
+            alpha={0.8}
+            margin={{ bottom: 5 }}
+            css={bubbleInfoStyle?.profile?.css}
+          >
             {user
               ? formatUsername({
                   name: user?.name,
@@ -192,6 +216,8 @@ function ReceivedBubbleContainer({
             onReplyClick={onReplyClick}
             date={createdAt}
             css={{ marginLeft: 4, textAlign: 'left' }}
+            dateTimeStyle={bubbleInfoStyle?.dateTime}
+            unreadCountStyle={bubbleInfoStyle?.unreadCount}
           />
         ) : null}
 

packages/tds-widget/src/chat/bubble-container/bubble-info.tsx

@@ -1,5 +1,5 @@
 import { Container, Text } from '@titicaca/tds-ui'
-import { styled } from 'styled-components'
+import styled, { CSSProp } from 'styled-components'
 import { format, setDefaultOptions } from 'date-fns'
 import { ko } from 'date-fns/locale'
 
@@ -36,6 +36,8 @@ export function BubbleInfo({
   showTimeInfo = true,
   showDateInfo = false,
   onReplyClick,
+  dateTimeStyle,
+  unreadCountStyle,
   ...props
 }: {
   align: 'left' | 'right'
@@ -44,6 +46,8 @@ export function BubbleInfo({
   showTimeInfo?: boolean
   showDateInfo?: boolean
   onReplyClick?: () => void
+  dateTimeStyle?: { css?: CSSProp }
+  unreadCountStyle?: { css?: CSSProp }
 }) {
   return (
     <BubbleInfoContainer position="relative" display="inline-block" {...props}>
@@ -58,17 +62,19 @@ export function BubbleInfo({
       ) : null}
 
       {unreadCount ? (
-        <UnreadMessageCountText>{unreadCount}</UnreadMessageCountText>
+        <UnreadMessageCountText css={unreadCountStyle?.css}>
+          {unreadCount}
+        </UnreadMessageCountText>
       ) : null}
 
       {showDateInfo ? (
-        <Text size={10} alpha={0.51}>
+        <Text size={10} alpha={0.51} css={dateTimeStyle?.css}>
           {format(new Date(date), 'MM.dd')}
         </Text>
       ) : null}
 
       {showTimeInfo ? (
-        <Text size={10} alpha={0.51}>
+        <Text size={10} alpha={0.51} css={dateTimeStyle?.css}>
           {format(new Date(date), 'a h:mm')}
         </Text>
       ) : null}

packages/tds-widget/src/chat/messages/date-divider.tsx

@@ -1,9 +1,15 @@
 import { Text } from '@titicaca/tds-ui'
 import { format } from 'date-fns'
 
-export function DateDivider({ date }: { date: Date }) {
+export function DateDivider({ date, ...props }: { date: Date }) {
   return (
-    <Text textAlign="center" size={11} color="gray700" margin={{ top: 30 }}>
+    <Text
+      textAlign="center"
+      size={11}
+      color="gray700"
+      margin={{ top: 30 }}
+      {...props}
+    >
       {format(date, 'yyyy년 MM월 dd일')}
     </Text>
   )

packages/tds-widget/src/chat/messages/index.tsx

@@ -2,7 +2,9 @@ import { ComponentType, Fragment } from 'react'
 import { CSSProp } from 'styled-components'
 import { InView } from 'react-intersection-observer'
 
-import BubbleContainer from '../bubble-container/bubble-container'
+import BubbleContainer, {
+  BubbleContainerProp,
+} from '../bubble-container/bubble-container'
 import BubbleUI, { BubbleUIProps } from '../bubble/bubble-ui'
 import { UserInterface } from '../types'
 import AlteredBubble from '../bubble/altered'
@@ -15,7 +17,7 @@ import { DateDivider } from './date-divider'
 interface MessagesProp<
   Message extends MessageBase<User>,
   User extends UserInterface,
-> {
+> extends Pick<BubbleContainerProp, 'bubbleInfoStyle'> {
   messages: MessageInterface<Message, User>[]
   pendingMessages: MessageInterface<Message, User>[]
   failedMessages: MessageInterface<Message, User>[]
@@ -68,6 +70,7 @@ export default function Messages<
   onOpenMenu,
   onParentMessageClick,
   onUserClick,
+  bubbleInfoStyle,
   ...bubbleProps
 }: MessagesProp<Message, User> &
   Omit<
@@ -200,6 +203,7 @@ export default function Messages<
                   ? new Date()
                   : new Date(message.createdAt)
               }
+              css={bubbleInfoStyle?.dateDivider?.css}
             />
           ) : null}
 
@@ -249,6 +253,7 @@ export default function Messages<
                 marginTop: isFirstMessageOfDate ? 20 : showProfile ? 16 : 5,
               }}
               onUserClick={onUserClick}
+              bubbleInfoStyle={bubbleInfoStyle}
             >
               {getBubble({ message, my, hasArrow: showProfile })}
             </BubbleContainer>