Merge pull request #46 from Soohyuniii/feature/chatroom-text-field

feat: chat message component 개발

Author: Soohyuniii

src/components/ChatMessage.tsx

@@ -0,0 +1,29 @@
+interface ChatMessageProps {
+  message: string;
+  myMessage: boolean;
+}
+
+const ChatMessage = ({ message, myMessage }: ChatMessageProps) => {
+  const textColor = myMessage ? "text-[#FFFFFF]" : "text-gray-900";
+  const backgroundColor = myMessage ? "bg-gray-900" : "bg-[#FFFFFF]";
+  const borderStyle = myMessage
+    ? "rounded-tr-none"
+    : "rounded-tl-none border border-gray-100";
+
+  return (
+    <div className="flex w-full justify-center items-center mb-2">
+      <div
+        className={`max-w-xs px-2.5 py-3 rounded-[12px] ${borderStyle} ${backgroundColor} ${textColor}`}
+        style={{
+          fontWeight: 500,
+          fontSize: "16px",
+          lineHeight: "24px"
+        }}
+      >
+        {message}
+      </div>
+    </div>
+  );
+};
+
+export default ChatMessage;