styled span 적용

titicacadev · Nov 4, 2024 · 9810196 · 9810196
1 parent 093acce
commit 9810196
Showing 1 changed file with 12 additions and 2 deletions.
diff --git a/packages/chat/src/bubble/altered.tsx b/packages/chat/src/bubble/altered.tsx
@@ -1,10 +1,19 @@
 import { FlexBox } from '@titicaca/core-elements'
+import styled, { css } from 'styled-components'
 
 import ExclamationMarkIcon from '../icons/ExclamationMarkIcon'
 
 import Bubble from './bubble'
 import { BlindedBubbleProp } from './type'
 
+const AlteredText = styled.span<{ color?: string }>`
+  ${({ color }) =>
+    color &&
+    css`
+      color: ${color};
+    `}
+`
+
 export default function AlteredBubble({
   my,
   parentMessage,
@@ -14,13 +23,14 @@ export default function AlteredBubble({
 }: BlindedBubbleProp) {
   const alteredCSS = {
     margin: my ? '0 0 0 8px' : undefined,
-    ...(textColor && { color: textColor }),
   }
   return (
     <Bubble my={my} {...props} css={alteredCSS}>
       <FlexBox flex alignItems="center" gap="4px">
         <ExclamationMarkIcon color={textColor} />
-        <span>{alternativeText ?? '관리자에 의해 삭제되었습니다'}</span>
+        <AlteredText color={textColor}>
+          {alternativeText ?? '관리자에 의해 삭제되었습니다'}
+        </AlteredText>
       </FlexBox>
     </Bubble>
   )