Merge pull request #50 from Leets-Official/46-feat/ChatBubble-컴포넌트-제작

[Feat] ChatBubble 컴포넌트 제작

Author: YeBeenChoi

src/pages/playground.tsx

@@ -1,6 +1,7 @@
 import { BannerCard } from '@shared/ui/BannerCard/BannerCard';
 import { Button } from '@shared/ui/Button/Button';
 import { Card } from '@shared/ui/Card/Card';
+import { ChatBubble } from '@shared/ui/ChatBubble';
 import { ChatInput } from '@shared/ui/ChatInput';
 import { ChatPromptList } from '@shared/ui/ChatPromptList';
 import { Checkbox } from '@shared/ui/Checkbox/Checkbox';
@@ -136,6 +137,20 @@ 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" role="log" aria-live="polite">
+          <ChatBubble variant="receiver" message="대답" meta="오전 00:00" metaDateTime="2024-01-01T00:00:00+09:00" />
+          <ChatBubble variant="sender" message="직접질문" meta="오후 00:00" metaDateTime="2024-01-01T12:00:00+09:00" />
+          <ChatBubble
+            variant="sender"
+            message="메시지가 길어질 경우에는 이렇게 줄바꿈이 됩니다아아아아아아아아아아 얼마나 늘려야 줄바꿈이 될까요"
+            meta="오후 00:00"
+            metaDateTime="2024-01-01T12:00:00+09:00"
+          />
+        </div>
+      </section>
       {/* Chat Input */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">ChatInput</h2>

src/shared/ui/ChatBubble/ChatBubble.tsx

@@ -0,0 +1,27 @@
+import { chatBubbleVariants } from './ChatBubble.variants';
+import type { ComponentPropsWithoutRef } from 'react';
+import type { VariantProps } from 'tailwind-variants';
+
+export type ChatBubbleProps = ComponentPropsWithoutRef<'div'> &
+  VariantProps<typeof chatBubbleVariants> & {
+    message: string;
+    meta?: string;
+    metaDateTime?: string;
+  };
+
+export const ChatBubble = ({ message, meta, metaDateTime, variant, className, ...props }: ChatBubbleProps) => {
+  const styles = chatBubbleVariants({ variant });
+
+  return (
+    <div className={styles.root({ className })} role="listitem" {...props}>
+      <div className={styles.bubble()}>
+        <span className={styles.text()}>{message}</span>
+      </div>
+      {meta && (
+        <time className={styles.meta()} dateTime={metaDateTime}>
+          {meta}
+        </time>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,40 @@
+import { tv } from 'tailwind-variants';
+
+export const chatBubbleVariants = tv({
+  slots: {
+    root: ['flex w-full items-end gap-[10px]'],
+    bubble: [
+      'inline-flex',
+      'items-center',
+      'justify-center',
+      'min-h-[60px]',
+      'px-[31px]',
+      'py-[18px]',
+      'rounded-[var(--radius-l)]',
+      'max-w-[559px]',
+    ],
+    text: ['typo-body-1', 'whitespace-pre-wrap', 'break-words'],
+    meta: ['typo-caption-2', 'text-[var(--color-gray-400)]'],
+  },
+
+  variants: {
+    variant: {
+      receiver: {
+        root: ['justify-start'],
+        bubble: ['bg-[var(--color-gray-100)]'],
+        text: ['text-[var(--color-gray-900)]'],
+        meta: ['order-last'],
+      },
+      sender: {
+        root: ['justify-end', 'flex-row-reverse'],
+        bubble: ['bg-[var(--color-brand-primary)]'],
+        text: ['text-[var(--color-gray-900)]'],
+        meta: ['order-last'],
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'receiver',
+  },
+});

src/shared/ui/ChatBubble/index.ts

@@ -0,0 +1 @@
+export { ChatBubble } from './ChatBubble';