[chore] messageBox 말풍선 스타일 추가

re-Duck · Dec 18, 2023 · e8ed8cd · e8ed8cd
1 parent 98601bc
commit e8ed8cd
Showing 1 changed file with 10 additions and 6 deletions.
diff --git a/client/src/components/Chat/chat-message.tsx b/client/src/components/Chat/chat-message.tsx
@@ -27,16 +27,18 @@ export default function ChatMessage({
 }: IChatMessage) {
   const Style = {
     my: {
-      wrapper: 'ml-auto mr2 flex-row-reverse',
+      wrapper: 'ml-auto mr-2 flex-row-reverse',
       box: 'text-right',
       messageWrapper: 'flex-row-reverse',
-      message: 'bg-indigo-500 rounded-tr-none ml-auto',
+      message:
+        'bg-indigo-500 ml-auto after:right-0 after:border-l-indigo-500 after:border-r-0 after:-mr-2',
     },
     other: {
-      wrapper: 'mr-auto ml-2',
+      wrapper: 'mr-auto ml-2 after:left-0',
       box: 'text-left',
       messageWrapper: 'flex-row',
-      message: 'bg-slate-500 rounded-tl-none',
+      message:
+        'bg-slate-500 after:left-0 after:border-r-slate-500 after:border-l-0 after:-ml-2',
     },
   };
   const time = formatDateToHHMM(messageTime);
@@ -53,9 +55,11 @@ export default function ChatMessage({
       )}
       <div className={Style[type].box}>
         <span>{name}</span>
-        <div className={`flex items-end gap-2 ${Style[type].messageWrapper}`}>
+        <div
+          className={`relative flex items-end gap-2 ${Style[type].messageWrapper}`}
+        >
           <div
-            className={`w-fit p-2 text-white text-left rounded-xl ${Style[type].message}`}
+            className={`w-fit p-2 text-white text-left rounded-xl ${Style[type].message} after:content-[""] after:absolute after:top-[40%] after:w-0 after:h-0 after:border-8 after:border-solid after:border-transparent after:border-t-0 after:-mt-1`}
           >
             <span>{message}</span>
           </div>