feat: nes dialog

components/MainUI/Dog/bubbleMessage.tsx

@@ -6,31 +6,11 @@ interface BubbleMessageProps {
 
 const BubbleMessage: React.FC<BubbleMessageProps> = ({ message }) => {
   return (
-    <div
-      className="
-        relative
-        bg-orange-300
-        p-4
-        text-gray-800
-        rounded-lg
-        border-2
-        border-orange-400
-        shadow-[4px_4px_0px_0px_rgba(251,146,60,0.7)]
-        before:content-['']
-        before:absolute
-        before:left-4
-        before:bottom-[-8px]
-        before:w-4
-        before:h-4
-        before:bg-orange-300
-        before:rotate-45
-        before:border-b-2
-        before:border-r-2
-        before:border-orange-400
-      "
-    >
-      {message}
-    </div>
+    <section className="message-list">
+      <section className="message -left">
+        <div className="nes-balloon from-left px-6 py-4 text-xl">{message}</div>
+      </section>
+    </section>
   );
 };