fix: merge conflict 해결

Author: YeBeenChoi

src/pages/playground.tsx

@@ -137,6 +137,19 @@ export default function Playground() {
           onPromptClick={(prompt) => console.log('prompt click:', prompt)}
         />
       </section>
+      {/* Chat Bubble */}
+      <section className="flex flex-col gap-4">
+        <h2 className="typo-body-1">ChatBubble</h2>
+        <div className="flex flex-col gap-6">
+          <ChatBubble variant="receiver" message="대답" meta="오전 00:00" />
+          <ChatBubble variant="sender" message="직접질문" meta="오후 00:00" />
+          <ChatBubble
+            variant="sender"
+            message="메시지가 길어질 경우에는 이렇게 줄바꿈이 됩니다아아아아아아아아아아 얼마나 늘려야 줄바꿈이 될까요"
+            meta="오후 00:00"
+          />
+        </div>
+      </section>
       {/* Chat Input */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">ChatInput</h2>

src/shared/ui/ChatBubble/ChatBubble.variants.ts

@@ -21,13 +21,21 @@ export const chatBubbleVariants = tv({
     variant: {
       receiver: {
         root: ['justify-start'],
+<<<<<<< HEAD
         bubble: ['bg-[var(--color-gray-100)]'],
+=======
+        bubble: ['!bg-[var(--color-gray-100)]'],
+>>>>>>> 67c0c13991f2933a74320aa0a1b83d97e6760eab
         text: ['text-[var(--color-gray-900)]'],
         meta: ['order-last'],
       },
       sender: {
         root: ['justify-end', 'flex-row-reverse'],
+<<<<<<< HEAD
         bubble: ['bg-[var(--color-brand-primary)]'],
+=======
+        bubble: ['bg-[var(--color-brand-primary,var(--color-green-300))]'],
+>>>>>>> 67c0c13991f2933a74320aa0a1b83d97e6760eab
         text: ['text-[var(--color-gray-900)]'],
         meta: ['order-last'],
       },