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

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

@@ -6,7 +6,7 @@ interface Props {
     messageList: string[]
 }
 
-// 챗봇 커스텀 말풍선 컴포넌트
+// 챗봇 커스텀 말풍선 컴포넌트 (꼬랑지가 붙은 버젼)
 // /n(new line) 등이 반영되도록 whitespace-pre-wrap 스타일 적용한 말풍선
 const RookiePreformattedMessage = ({messageList}: Props) => {
   return (

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

@@ -0,0 +1,32 @@
+import React from "react";
+import Image from "next/image";
+import tailIcon from "@/src/assets/webp/chatbot_message_left_tail_white_big.webp";  // 꼬랑지
+
+interface Props {
+    messageList: string[]
+}
+
+// 챗봇 커스텀 말풍선 컴포넌트 (꼬랑지가 붙은 버젼)
+// 메시지를 리스트로 출력
+const RookieWhiteListMessageWithTail = ({messageList}: Props) => {
+  return (
+    <div className="relative bg-main-0 p-3 rounded-lg text-xs font-regular text-grayscale-90 max-w-xs">
+        {/* 말풍선 꼬랑지 */}
+        <Image src={tailIcon} alt="꼬랑지" className="absolute left-[-12px] top-2 w-5 h-5"/>
+
+        {/** 메시지 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 RookieWhiteListMessageWithTail;