feat: 개인/외교 메시지 수신시 버튼 추가

hwe/ts/components/MessagePanel.vue

@@ -173,6 +173,8 @@ import MessagePlate from "@/components/MessagePlate.vue";
 import { useToast, BFormSelect } from "bootstrap-vue-3";
 import { unwrap } from "@/util/unwrap";
 import { isBrightColor } from "@/util/isBrightColor";
+import { getNewMsgToast } from "@/utilGame/getNewMsgToast";
+import { scrollToSelector } from "@/util/scrollToSelector";
 
 const serverID = staticValues.serverID;
 const toasts = unwrap(useToast());
@@ -269,10 +271,20 @@ function _updateLatestMsg(msg: MsgItem) {
       toasts.remove(toastID);
     }
     const newToastID = toasts.show(
-      {
+      getNewMsgToast(
-        title: "새로운 개인 메시지",
+        "새로운 개인 메시지",
-        body: "새로운 개인 메시지가 도착했습니다.",
+        "새로운 개인 메시지가 도착했습니다.",
-      },
+        (type, e)=>{
+          if(type === 'goto'){
+            scrollToSelector('.PrivateTalk > .stickyAnchor')
+            return;
+          }
+          if(type === 'ignore'){
+            readLatestMsg('private');
+            return;
+          }
+        }
+      ),
       {
         delay: 1000 * 60 * 10,
         variant: 'warning'
@@ -292,10 +304,20 @@ function _updateLatestMsg(msg: MsgItem) {
       toasts.remove(toastID);
     }
     const newToastID = toasts.show(
-      {
+      getNewMsgToast(
-        title: "새로운 외교 메시지",
+        "새로운 외교 메시지",
-        body: "새로운 외교 메시지가 도착했습니다.",
+        "새로운 외교 메시지가 도착했습니다.",
-      },
+        (type, e)=>{
+          if(type === 'goto'){
+            scrollToSelector('.DiplomacyTalk > .stickyAnchor')
+            return;
+          }
+          if(type === 'ignore'){
+            readLatestMsg('diplomacy');
+            return;
+          }
+        }
+      ),
       {
         delay: 1000 * 60 * 10,
         variant: 'warning'

hwe/ts/utilGame/getNewMsgToast.ts

@@ -0,0 +1,21 @@
+import { BButton } from "bootstrap-vue-3";
+import type { ToastContent } from "bootstrap-vue-3/dist/components/BToast/plugin";
+import { h } from "vue";
+
+type CallbackType = (type: "goto" | "ignore", e: MouseEvent) => void;
+
+export function getNewMsgToast(title: string, body: string, callback: CallbackType): ToastContent{
+  const bodyNode = h(
+    "span",
+    null,
+    [
+      body,
+      h(BButton, { variant: "primary", size: "sm", onClick: (e)=>{ callback('goto', e) } }, "보러가기"),
+      h(BButton, { variant: "secondary", size: "sm", onClick: (e)=>{ callback('ignore', e)} }, "이미읽음"),
+    ]
+  );
+  return {
+    title,
+    body: bodyNode,
+  }
+}