bubbleColor를 bubbleStyle로 변경 및 link 스타일 적용

titicacadev · Oct 16, 2023 · 11393f0 · 11393f0
1 parent 136c1bb
commit 11393f0
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 46 deletions.
diff --git a/packages/chat/src/bubbles/rich.tsx b/packages/chat/src/bubbles/rich.tsx
@@ -44,7 +44,7 @@ export function RichBubble({
   cloudinaryName,
   mediaUrlBase,
   onImageBubbleClick,
-  bubbleColor,
+  bubbleStyle,
 }: {
   my: boolean
   items: (TextPayload | ImagePayload | ButtonPayload)[]
@@ -54,15 +54,20 @@ export function RichBubble({
   cloudinaryName: string
   mediaUrlBase: string
   onImageBubbleClick?: (imageInfos: MetaDataInterface[]) => void
-  bubbleColor?: { backgroundColor: BackgroundColor; textColor: string }
+  bubbleStyle?: {
+    backgroundColor: BackgroundColor
+    textColor: string
+    linkColor?: string
+    linkUnderline?: boolean
+  }
 }) {
   return (
     <TextBubble
       my={my}
       size={textBubbleFontSize}
       maxWidthOffset={textBubbleMaxWidthOffset}
       margin={my ? { left: 8 } : undefined}
-      bubbleColor={bubbleColor}
+      bubbleStyle={bubbleStyle}
     >
       {items.map((item, index) => {
         switch (item.type) {

diff --git a/packages/chat/src/chat-bubble/blinded.tsx b/packages/chat/src/chat-bubble/blinded.tsx
@@ -15,19 +15,19 @@ const ExclamationMarkIcon = styled.span<{ color?: 'gray' | 'white' }>`
 export default function BlindedBubble({
   my,
   blindedText,
-  bubbleColor,
+  bubbleStyle,
 }: {
   my: boolean
   blindedText?: string
-  bubbleColor?: { backgroundColor: BackgroundColor; textColor: string }
+  bubbleStyle?: { backgroundColor: BackgroundColor; textColor: string }
 }) {
   const { textBubbleMaxWidthOffset } = useChat()
   return (
     <TextBubble
       maxWidthOffset={textBubbleMaxWidthOffset}
       my={my}
       margin={my ? { left: 8 } : undefined}
-      bubbleColor={bubbleColor}
+      bubbleStyle={bubbleStyle}
     >
       <FlexBox flex alignItems="center" gap="4px">
         <ExclamationMarkIcon

diff --git a/packages/chat/src/chat-bubble/bubble-payload.tsx b/packages/chat/src/chat-bubble/bubble-payload.tsx
@@ -8,10 +8,15 @@ import { BackgroundColor } from '../types/ui'
 interface BubblePayloadProps {
   payload: TextPayload | ImagePayload | RichPayload
   my: boolean
-  bubbleColor?: { backgroundColor: BackgroundColor; textColor: string }
+  bubbleStyle?: {
+    backgroundColor: BackgroundColor
+    textColor: string
+    linkColor?: string
+    linkUnderline?: boolean
+  }
 }
 
-const BubblePayload = ({ payload, my, bubbleColor }: BubblePayloadProps) => {
+const BubblePayload = ({ payload, my, bubbleStyle }: BubblePayloadProps) => {
   const {
     textBubbleFontSize,
     textBubbleMaxWidthOffset,
@@ -39,7 +44,7 @@ const BubblePayload = ({ payload, my, bubbleColor }: BubblePayloadProps) => {
           size={textBubbleFontSize}
           maxWidthOffset={textBubbleMaxWidthOffset}
           margin={my ? { left: 8 } : undefined}
-          bubbleColor={bubbleColor}
+          bubbleStyle={bubbleStyle}
         >
           <div
             onClick={onTextBubbleClick}
@@ -64,7 +69,7 @@ const BubblePayload = ({ payload, my, bubbleColor }: BubblePayloadProps) => {
           cloudinaryName={cloudinaryName}
           mediaUrlBase={mediaUrlBase}
           onImageBubbleClick={onImageBubbleClick}
-          bubbleColor={bubbleColor}
+          bubbleStyle={bubbleStyle}
         />
       )
     default:

diff --git a/packages/chat/src/chat-bubble/chat-bubble-ui.tsx b/packages/chat/src/chat-bubble/chat-bubble-ui.tsx
@@ -2,7 +2,7 @@ import React, { PropsWithChildren, useState } from 'react'
 import { Container } from '@titicaca/core-elements'
 
 import { TextPayload, ImagePayload, RichPayload } from '../types'
-import { ChatBubbleColor } from '../types/ui'
+import { ChatBubbleStyle } from '../types/ui'
 
 import { BubbleInfo } from './bubble-info'
 import {
@@ -124,7 +124,7 @@ export interface ChatBubbleUIProps {
    * 'sent' 타입일 때, 메시지 전송 실패할 경우 재시도를 취소하는 함수
    */
   onCancel?: () => void
-  bubbleColor?: ChatBubbleColor
+  bubbleStyle?: ChatBubbleStyle
 }
 
 export function ChatBubbleUI({
@@ -137,11 +137,11 @@ export function ChatBubbleUI({
   blindedAt,
   blindedText,
   onRetry,
-  bubbleColor,
+  bubbleStyle,
 }: ChatBubbleUIProps) {
   switch (type) {
     case 'sent': {
-      const sentBubbleColor = bubbleColor?.sent
+      const sentBubbleStyle = bubbleStyle?.sent
       return (
         <SentChatContainer
           createdAt={createdAt}
@@ -152,13 +152,13 @@ export function ChatBubbleUI({
             <BlindedBubble
               my
               blindedText={blindedText}
-              bubbleColor={
-                sentBubbleColor
+              bubbleStyle={
+                sentBubbleStyle
                   ? {
-                      ...sentBubbleColor,
+                      ...sentBubbleStyle,
                       textColor:
-                        sentBubbleColor.textColor.blinded ||
-                        sentBubbleColor.textColor.normal,
+                        sentBubbleStyle.textColor.blinded ||
+                        sentBubbleStyle.textColor.normal,
                     }
                   : undefined
               }
@@ -167,11 +167,13 @@ export function ChatBubbleUI({
             <BubblePayload
               payload={payload}
               my
-              bubbleColor={
-                sentBubbleColor
+              bubbleStyle={
+                sentBubbleStyle
                   ? {
-                      ...sentBubbleColor,
-                      textColor: sentBubbleColor.textColor.normal,
+                      ...sentBubbleStyle,
+                      textColor: sentBubbleStyle.textColor.normal,
+                      linkColor: sentBubbleStyle.link?.color,
+                      linkUnderline: sentBubbleStyle.link?.underline,
                     }
                   : undefined
               }
@@ -181,7 +183,7 @@ export function ChatBubbleUI({
       )
     }
     case 'received': {
-      const receivedBubbleColor = bubbleColor?.received
+      const receivedBubbleStyle = bubbleStyle?.received
       return (
         <ReceivedChatContainer
           unreadCount={unreadCount}
@@ -193,13 +195,13 @@ export function ChatBubbleUI({
             <BlindedBubble
               my={false}
               blindedText={blindedText}
-              bubbleColor={
-                receivedBubbleColor
+              bubbleStyle={
+                receivedBubbleStyle
                   ? {
-                      ...receivedBubbleColor,
+                      ...receivedBubbleStyle,
                       textColor:
-                        receivedBubbleColor.textColor.blinded ||
-                        receivedBubbleColor.textColor.normal,
+                        receivedBubbleStyle.textColor.blinded ||
+                        receivedBubbleStyle.textColor.normal,
                     }
                   : undefined
               }
@@ -208,11 +210,13 @@ export function ChatBubbleUI({
             <BubblePayload
               payload={payload}
               my={false}
-              bubbleColor={
-                receivedBubbleColor
+              bubbleStyle={
+                receivedBubbleStyle
                   ? {
-                      ...receivedBubbleColor,
-                      textColor: receivedBubbleColor.textColor.normal,
+                      ...receivedBubbleStyle,
+                      textColor: receivedBubbleStyle.textColor.normal,
+                      linkColor: receivedBubbleStyle.link?.color,
+                      linkUnderline: receivedBubbleStyle.link?.underline,
                     }
                   : undefined
               }

diff --git a/packages/chat/src/chat-bubble/chat-bubble.tsx b/packages/chat/src/chat-bubble/chat-bubble.tsx
@@ -11,7 +11,7 @@ import {
   UserType,
 } from '../types'
 import { getProfileImageUrl } from '../utils'
-import { ChatBubbleColor } from '../types/ui'
+import { ChatBubbleStyle } from '../types/ui'
 
 import { ChatBubbleUI } from './chat-bubble-ui'
 
@@ -25,7 +25,7 @@ interface ChatBubbleProps {
   onRetryButtonClick?: (message: MessageInterface) => void
   onRetryCancelButtonClick?: (message: MessageInterface) => void
   blindedText?: string
-  bubbleColor?: ChatBubbleColor
+  bubbleStyle?: ChatBubbleStyle
 }
 
 const ChatBubble = ({
@@ -39,7 +39,7 @@ const ChatBubble = ({
   onRetryCancelButtonClick,
   disableUnreadCount = false,
   blindedText,
-  bubbleColor,
+  bubbleStyle,
 }: ChatBubbleProps) => {
   const otherUserInfo = useMemo(
     () => others.find((other) => other.id === senderId),
@@ -104,7 +104,7 @@ const ChatBubble = ({
       onCancel={onCancel}
       blindedAt={message.blindedAt}
       blindedText={blindedText}
-      bubbleColor={bubbleColor}
+      bubbleStyle={bubbleStyle}
     />
   )
 }

diff --git a/packages/chat/src/chat/chat.tsx b/packages/chat/src/chat/chat.tsx
@@ -19,7 +19,7 @@ import {
 } from '../types'
 import ChatBubble from '../chat-bubble'
 import { HiddenElement } from '../chat-bubble/elements'
-import { ChatBubbleColor } from '../types/ui'
+import { ChatBubbleStyle } from '../types/ui'
 
 import { ChatActions, ChatReducer, initialChatState } from './reducer'
 import { useChat } from './chat-context'
@@ -58,7 +58,7 @@ export interface ChatProps {
   updateChatData?: UpdateChatData
   disableUnreadCount?: boolean
   blindedText?: string
-  bubbleColor?: ChatBubbleColor
+  bubbleStyle?: ChatBubbleStyle
 }
 
 /**
@@ -82,7 +82,7 @@ export const Chat = ({
   updateChatData,
   disableUnreadCount = false,
   blindedText,
-  bubbleColor,
+  bubbleStyle,
   ...props
 }: ChatProps) => {
   const { chatRoomRef, bottomRef, setScrollY, scrollToBottom } =
@@ -302,7 +302,7 @@ export const Chat = ({
                     onRetryCancelButtonClick={onRetryCancel}
                     disableUnreadCount={disableUnreadCount}
                     blindedText={blindedText}
-                    bubbleColor={bubbleColor}
+                    bubbleStyle={bubbleStyle}
                   />
                 </li>
               ))}
@@ -322,7 +322,7 @@ export const Chat = ({
                     onRetryCancelButtonClick={onRetryCancel}
                     disableUnreadCount={disableUnreadCount}
                     blindedText={blindedText}
-                    bubbleColor={bubbleColor}
+                    bubbleStyle={bubbleStyle}
                   />
                 </li>
               ))}

diff --git a/packages/chat/src/types/ui.ts b/packages/chat/src/types/ui.ts
@@ -5,15 +5,19 @@ export interface BackgroundColorInterface {
   received: Extract<BackgroundColor, 'gray' | 'darkGray'>
 }
 
-export interface BubbleColor<T extends 'sent' | 'received'> {
+export interface BubbleStyle<T extends 'sent' | 'received'> {
   backgroundColor: BackgroundColorInterface[T]
   textColor: {
     normal: string
     blinded?: string
   }
+  link?: {
+    color?: string
+    underline?: boolean
+  }
 }
 
-export interface ChatBubbleColor {
-  sent: BubbleColor<'sent'>
-  received: BubbleColor<'received'>
+export interface ChatBubbleStyle {
+  sent: BubbleStyle<'sent'>
+  received: BubbleStyle<'received'>
 }