(#72) 🎨 design: 루키 화이트 리스트 말풍선 제작

src/pages/Chatbot/components/message/custom/RookieWhiteListMessage.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+interface Props {
+    messageList: string[]
+}
+
+// 챗봇 커스텀 말풍선 컴포넌트
+// 메시지를 리스트로 출력
+const RookieWhiteListMessage = ({messageList}: Props) => {
+  return (
+    <div className="bg-main-0 p-3 rounded-lg text-xs font-regular text-grayscale-90 max-w-xs">
+        {/** 메시지 1줄 이상 배열로 받아서 여러 li 태그로 메시지 출력하기 */}
+        <ul className="space-y-1.5">
+            {messageList.map((message, index) => (
+                <li
+                key={index}
+                className="px-2 text-xs min-w-[180px] w-full text-left font-regular text-grayscale-90 rounded-md"
+                >
+                  {message}
+                </li>
+            ))}
+        </ul>
+    </div>
+  );
+};
+
+export default RookieWhiteListMessage;