feat: 메시지 빠른 답장 대상 지정

hwe/ts/components/MessagePanel.vue

@@ -35,7 +35,14 @@
     </div>
     <div class="PublicTalk">
       <div class="stickyAnchor"></div>
-      <div class="BoardHeader bg0">전체 메시지</div>
+      <div class="BoardHeader bg0 d-flex">
+        <div class="flex-grow-1 align-self-center">전체 메시지</div>
+        <div>
+          <BButton size="sm" class="btn-more-small" variant="primary" @click="targetMailbox = 9999"
+            ><i class="bi bi-reply-fill" />여기로</BButton
+          >
+        </div>
+      </div>
       <template v-if="messagePublic.length == 0">
         <div>메시지가 없습니다.</div>
       </template>
@@ -48,6 +55,7 @@
           :generalName="generalName"
           :nationID="nationID"
           :permissionLevel="permissionLevel"
+          @setTarget="setTarget"
         ></MessagePlate>
         <div class="d-grid Actions">
           <button type="button" class="btn btn-dark only-mobile" @click="foldMessage($event, 'public')">접기</button>
@@ -59,7 +67,14 @@
     </div>
     <div class="NationalTalk">
       <div class="stickyAnchor"></div>
-      <div class="BoardHeader bg0">국가 메시지</div>
+      <div class="BoardHeader bg0 d-flex">
+        <div class="flex-grow-1 align-self-center">국가 메시지</div>
+        <div>
+          <BButton size="sm" class="btn-more-small" variant="primary" @click="targetMailbox = 9000 + props.nationID"
+            ><i class="bi bi-reply-fill" />여기로</BButton
+          >
+        </div>
+      </div>
       <template v-if="messageNational.length == 0">
         <div>메시지가 없습니다.</div>
       </template>
@@ -72,6 +87,7 @@
           :generalName="generalName"
           :nationID="nationID"
           :permissionLevel="permissionLevel"
+          @setTarget="setTarget"
         ></MessagePlate>
         <div class="d-grid Actions">
           <button type="button" class="btn btn-dark only-mobile" @click="foldMessage($event, 'national')">접기</button>
@@ -87,9 +103,10 @@
         <div class="flex-grow-1 align-self-center">개인 메시지</div>
         <div>
           <BButton
-            v-if="messagePrivate.length > 0 && latestPrivateMsgToastInfo[2] > latestPrivateMsgToastInfo[1]"
             size="sm"
+            class="btn-more-small"
             variant="secondary"
+            :disabled="!(messagePrivate.length > 0 && latestPrivateMsgToastInfo[2] > latestPrivateMsgToastInfo[1])"
             @click="readLatestMsg('private')"
             >모두 읽음</BButton
           >
@@ -107,7 +124,12 @@
           :generalName="generalName"
           :nationID="nationID"
           :permissionLevel="permissionLevel"
-          @response="()=>{readLatestMsg('private')}"
+          @response="
+            () => {
+              readLatestMsg('private');
+            }
+          "
+          @setTarget="setTarget"
         ></MessagePlate>
         <div class="d-grid Actions">
           <button type="button" class="btn btn-dark only-mobile" @click="foldMessage($event, 'private')">접기</button>
@@ -123,9 +145,10 @@
         <div class="flex-grow-1 align-self-center">외교 메시지</div>
         <div>
           <BButton
-            v-if="messageDiplomacy.length > 0 && latestDiplomacyMsgToastInfo[2] > latestDiplomacyMsgToastInfo[1]"
-            ize="sm"
+            size="sm"
+            class="btn-more-small"
             variant="secondary"
+            :disabled="!(messagePrivate.length > 0 && latestPrivateMsgToastInfo[2] > latestPrivateMsgToastInfo[1])"
             @click="readLatestMsg('diplomacy')"
             >모두 읽음</BButton
           >
@@ -143,7 +166,12 @@
           :generalName="generalName"
           :nationID="nationID"
           :permissionLevel="permissionLevel"
-          @response="()=>{readLatestMsg('diplomacy')}"
+          @response="
+            () => {
+              readLatestMsg('diplomacy');
+            }
+          "
+          @setTarget="setTarget"
         ></MessagePlate>
         <div class="d-grid Actions">
           <button type="button" class="btn btn-dark only-mobile" @click="foldMessage($event, 'diplomacy')">접기</button>
@@ -170,7 +198,7 @@ import { onMounted, ref, toRef, watch, type Ref } from "vue";
 import { delay } from "@/util/delay";
 import { SammoAPI } from "@/SammoAPI";
 import { isString } from "lodash-es";
-import type { MabilboxListResponse, MsgItem, MsgResponse, MsgType } from "@/defs/API/Message";
+import type { MabilboxListResponse, MsgItem, MsgResponse, MsgTarget, MsgType } from "@/defs/API/Message";
 import MessagePlate from "@/components/MessagePlate.vue";
 import { useToast, BFormSelect } from "bootstrap-vue-next";
 import { unwrap } from "@/util/unwrap";
@@ -273,24 +301,20 @@ function _updateLatestMsg(msg: MsgItem) {
       toasts.remove(toastID);
     }
     const newToastID = toasts.show(
-      getNewMsgToast(
-        "새로운 개인 메시지",
-        "새로운 개인 메시지가 도착했습니다.",
-        (type, e)=>{
-          if(type === 'goto'){
-            readLatestMsg('private');
-            scrollToSelector('.PrivateTalk > .stickyAnchor');
-            return;
-          }
-          if(type === 'ignore'){
-            readLatestMsg('private');
-            return;
-          }
+      getNewMsgToast("새로운 개인 메시지", "새로운 개인 메시지가 도착했습니다.", (type, e) => {
+        if (type === "goto") {
+          readLatestMsg("private");
+          scrollToSelector(".PrivateTalk > .stickyAnchor");
+          return;
         }
-      ),
+        if (type === "ignore") {
+          readLatestMsg("private");
+          return;
+        }
+      }),
       {
         delay: 1000 * 60 * 10,
-        variant: 'warning'
+        variant: "warning",
       }
     ).options.id;
     latestPrivateMsgToastInfo.value = [newToastID, latestMsgID, msg.id];
@@ -298,7 +322,7 @@ function _updateLatestMsg(msg: MsgItem) {
   }
 
   if (msgType == "diplomacy") {
-    if (permissionLevel.value < 4){
+    if (permissionLevel.value < 4) {
       return;
     }
     const [toastID, latestMsgID] = latestDiplomacyMsgToastInfo.value;
@@ -311,24 +335,20 @@ function _updateLatestMsg(msg: MsgItem) {
       toasts.remove(toastID);
     }
     const newToastID = toasts.show(
-      getNewMsgToast(
-        "새로운 외교 메시지",
-        "새로운 외교 메시지가 도착했습니다.",
-        (type, e)=>{
-          if(type === 'goto'){
-            readLatestMsg('diplomacy');
-            scrollToSelector('.DiplomacyTalk > .stickyAnchor')
-            return;
-          }
-          if(type === 'ignore'){
-            readLatestMsg('diplomacy');
-            return;
-          }
+      getNewMsgToast("새로운 외교 메시지", "새로운 외교 메시지가 도착했습니다.", (type, e) => {
+        if (type === "goto") {
+          readLatestMsg("diplomacy");
+          scrollToSelector(".DiplomacyTalk > .stickyAnchor");
+          return;
         }
-      ),
+        if (type === "ignore") {
+          readLatestMsg("diplomacy");
+          return;
+        }
+      }),
       {
         delay: 1000 * 60 * 10,
-        variant: 'warning'
+        variant: "warning",
       }
     ).options.id;
     latestDiplomacyMsgToastInfo.value = [newToastID, latestMsgID, msg.id];
@@ -522,10 +542,31 @@ type MailboxTarget = {
   disabled?: true;
   color?: string;
 };
+const mailboxMap = ref(new Map<number, MailboxTarget>());
 const mailboxList = ref<MailboxGroup[]>([]);
 const newMessageText = ref<string>("");
 
+function setTarget(type: MsgType, target: MsgTarget): void {
+  const item = mailboxMap.value.get(
+    (() => {
+      if (type == "diplomacy" || type == "national") {
+        if (target.nation_id == nationID.value) {
+          return target.id;
+        }
+        return target.nation_id + 9000;
+      }
+      return target.id;
+    })()
+  );
+  if (!item) {
+    return;
+  }
+  targetMailbox.value = item.value;
+}
+
 function refreshMailboxList(obj: MabilboxListResponse) {
+  const newMailboxMap = new Map<number, MailboxTarget>();
+
   let myNationColor = "#000000";
   const diplomacyMailboxList: MailboxGroup = {
     label: "외교메시지",
@@ -590,6 +631,7 @@ function refreshMailboxList(obj: MabilboxListResponse) {
         target.disabled = true;
       }
       nationBox.options.push(target);
+      newMailboxMap.set(destGeneralID, target);
     }
     nationMailboxList.push(nationBox);
 
@@ -597,12 +639,14 @@ function refreshMailboxList(obj: MabilboxListResponse) {
       continue;
     }
 
-    diplomacyMailboxList.options.push({
+    const target: MailboxTarget = {
       value: nation.mailbox,
       text: nation.name,
       nationID: nation.nationID,
       color: nation.color,
-    });
+    };
+    newMailboxMap.set(nation.mailbox, target);
+    diplomacyMailboxList.options.push(target);
   }
 
   const favoriteBox: MailboxGroup = {
@@ -624,6 +668,7 @@ function refreshMailboxList(obj: MabilboxListResponse) {
   };
 
   mailboxList.value = [favoriteBox, diplomacyMailboxList, ...nationMailboxList];
+  mailboxMap.value = newMailboxMap;
 }
 
 function foldMessage($event: MouseEvent, type: MsgType) {
@@ -722,6 +767,11 @@ onMounted(async () => {
 <style lang="scss" scoped>
 @import "@scss/common/break_500px.scss";
 
+.btn-more-small {
+  font-size: 0.8rem;
+  padding: 0.15rem 0.4rem;
+}
+
 .BoardHeader {
   color: white;
   outline-style: solid;

hwe/ts/components/MessagePlate.vue

@@ -25,13 +25,21 @@
           <template v-if="src.name == generalName">
             <span :class="`msg_target msg_${srcColorType}`" :style="{ backgroundColor: src.color }">나</span
             ><span class="msg_from_to">▶</span
-            ><span :class="`msg_target msg_${destColorType}`" :style="{ backgroundColor: dest.color }"
-              >{{ dest.name }}:{{ dest.nation }}</span
-            >
+            ><span
+              role="button"
+              :class="`msg_target msg_${destColorType}`"
+              :style="{ backgroundColor: dest.color }"
+              @click="emit('setTarget', msg.msgType, dest)"
+              >{{ dest.name }}:{{ dest.nation }} | <i class="bi bi-reply-fill"
+            /></span>
           </template>
           <template v-else>
-            <span :class="`msg_target msg_${srcColorType}`" :style="{ backgroundColor: src.color }"
-              >{{ src.name }}:{{ src.nation }}</span
+            <span
+              role="button"
+              :class="`msg_target msg_${srcColorType}`"
+              :style="{ backgroundColor: src.color }"
+              @click="emit('setTarget', msg.msgType, src)"
+              >{{ src.name }}:{{ src.nation }} | <i class="bi bi-reply-fill" /></span
             ><span class="msg_from_to">▶</span
             ><span :class="`msg_target msg_${destColorType}`" :style="{ backgroundColor: dest.color }">나</span>
           </template>
@@ -39,6 +47,28 @@
         <template v-else-if="msg.msgType == 'national' && src.nation_id === dest.nation_id">
           <span :class="`msg_target msg_${srcColorType}`" :style="{ backgroundColor: src.color }">{{ src.name }}</span>
         </template>
+        <template v-else-if="(msg.msgType == 'national' || msg.msgType == 'diplomacy') && permissionLevel >= 4">
+          <template v-if="src.nation_id == nationID">
+            <span :class="`msg_target msg_${srcColorType}`" :style="{ backgroundColor: src.color }">{{ src.name }}</span
+            ><span class="msg_from_to">▶</span
+            ><span
+              role="button"
+              :class="`msg_target msg_${destColorType}`"
+              :style="{ backgroundColor: dest.color }"
+              @click="emit('setTarget', msg.msgType, dest)"
+              >{{ dest.nation }} | <i class="bi bi-reply-fill"
+            /></span>
+          </template>
+          <template v-else>
+            <span
+              role="button"
+              :class="`msg_target msg_${srcColorType}`"
+              :style="{ backgroundColor: src.color }"
+              @click="emit('setTarget', msg.msgType, src)"
+              >{{ src.name }}:{{ src.nation }} | <i class="bi bi-reply-fill" /></span
+            ><span class="msg_from_to"></span>
+          </template>
+        </template>
         <template v-else-if="msg.msgType == 'national' || msg.msgType == 'diplomacy'">
           <template v-if="src.nation_id == nationID">
             <span :class="`msg_target msg_${srcColorType}`" :style="{ backgroundColor: src.color }">{{ src.name }}</span
@@ -53,15 +83,24 @@
             ><span class="msg_from_to"></span>
           </template>
         </template>
+        <template v-else-if="src.id != props.generalID">
+          <span
+            role="button"
+            :class="`msg_target msg_${srcColorType}`"
+            :style="{ backgroundColor: src.color }"
+            @click="emit('setTarget', msg.msgType, src)"
+            >{{ src.name }}:{{ src.nation }} | <i class="bi bi-reply-fill"
+          /></span>
+        </template>
         <template v-else>
-          <span :class="`msg_target msg_${srcColorType}`" :style="{ backgroundColor: dest.color }"
-            >{{ src.name }}:{{ src.nation }}</span
-          >
+          <span :class="`msg_target msg_${srcColorType}`" :style="{ backgroundColor: src.color }">{{ src.name }}</span>
         </template>
         <span class="msg_time">&lt;{{ msg.time }}&gt;</span>
       </div>
       <!-- eslint-disable-next-line vue/no-v-html vue/max-attributes-per-line -->
-      <div :class="['msg_content', isValidMsg ? 'msg_valid' : 'msg_invalid']" v-html="isValidMsg ? linkifyStr(msg.text) : '삭제된 메시지입니다'"
+      <div
+        :class="['msg_content', isValidMsg ? 'msg_valid' : 'msg_invalid']"
+        v-html="isValidMsg ? linkifyStr(msg.text) : '삭제된 메시지입니다'"
       ></div>
       <div v-if="msg.option.action" class="msg_prompt">
         <button
@@ -86,7 +125,7 @@
 </template>
 
 <script setup lang="ts">
-import type { MsgItem, MsgTarget } from "@/defs/API/Message";
+import type { MsgItem, MsgTarget, MsgType } from "@/defs/API/Message";
 import { parseTime } from "@/util/parseTime";
 import { differenceInMilliseconds, addMinutes } from "date-fns/esm";
 import { computed, ref, toRef, watch, type ComputedRef, type Ref } from "vue";
@@ -106,13 +145,14 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (event: "response"): void;
+  (event: "setTarget", type: MsgType, target: MsgTarget): void;
   (event: "request-refresh"): void;
 }>();
 
 const src: Ref<MsgTarget> = ref(props.modelValue.src);
 const dest: Ref<MsgTarget> = ref(props.modelValue.dest ?? props.modelValue.src);
-const srcColorType = computed(() => isBrightColor(src.value.color) ? "bright" : "dark");
-const destColorType = computed(() => isBrightColor(dest.value.color) ? "bright" : "dark");
+const srcColorType = computed(() => (isBrightColor(src.value.color) ? "bright" : "dark"));
+const destColorType = computed(() => (isBrightColor(dest.value.color) ? "bright" : "dark"));
 
 const msg = toRef(props, "modelValue");
 const defaultIcon = `${window.pathConfig.sharedIcon}/default.jpg`;
@@ -128,23 +168,20 @@ watch(
   }
 );
 
-watch(
-  msg,
-  (msg) => {
-    isValidMsg.value = testValidMsg(msg);
-    deletable.value = testDeletable(msg);
+watch(msg, (msg) => {
+  isValidMsg.value = testValidMsg(msg);
+  deletable.value = testDeletable(msg);
 
-    src.value = msg.src;
-    dest.value = msg.dest ?? {
-      id: 0,
-      name: "",
-      nation: "재야",
-      nation_id: 0,
-      color: "#000000",
-      icon: defaultIcon,
-    };
-  },
-);
+  src.value = msg.src;
+  dest.value = msg.dest ?? {
+    id: 0,
+    name: "",
+    nation: "재야",
+    nation_id: 0,
+    color: "#000000",
+    icon: defaultIcon,
+  };
+});
 
 const deletableTimer: Ref<number | undefined> = ref();
 const allowButton = computed(() => {
@@ -264,101 +301,100 @@ async function tryDecline() {
 
 <style lang="scss" scoped>
 .msg_plate {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 64px 1fr;
-    border-bottom: solid 1px gray;
-    min-height: 64px;
-    font-size: 12.5px;
-    word-break: break-all;
-    color: white;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 64px 1fr;
+  border-bottom: solid 1px gray;
+  min-height: 64px;
+  font-size: 12.5px;
+  word-break: break-all;
+  color: white;
 }
 
 .msg_plate_private {
-    background-color: #5d1e1a;
+  background-color: #5d1e1a;
 }
 
 .msg_plate_private.msg_plate_dest {
-    background-color: #5d461a;
+  background-color: #5d461a;
 }
 
 .msg_plate_public {
-    background-color: #141c65;
+  background-color: #141c65;
 }
 
 .msg_plate_national,
 .msg_plate_diplomacy {
-    background-color: #00582c;
+  background-color: #00582c;
 }
 
 .msg_plate_national.msg_plate_dest,
 .msg_plate_diplomacy.msg_plate_dest {
-    background-color: #704615;
+  background-color: #704615;
 }
 
 .msg_plate_national.msg_plate_src,
 .msg_plate_diplomacy.msg_plate_src {
-    background-color: #70153b;
+  background-color: #70153b;
 }
 
 .msg_icon {
-    width: 64px;
-    height: 64px;
-    border-right: solid 1px gray;
+  width: 64px;
+  height: 64px;
+  border-right: solid 1px gray;
 }
 
 .msg_time {
-    font-size: 0.75em;
-    font-weight: normal;
+  font-size: 0.75em;
+  font-weight: normal;
 }
 
 .msg_header {
-    font-weight: bold;
-    margin-bottom: 3px;
-    color: white;
-    position: relative;
+  font-weight: bold;
+  margin-bottom: 3px;
+  color: white;
+  position: relative;
 }
 
 .msg_invalid {
-    color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.5);
 }
 
 .msg_content {
-    margin-left: 10px;
-    margin-right: 5px;
-    overflow: hidden;
+  margin-left: 10px;
+  margin-right: 5px;
+  overflow: hidden;
 }
 
 .msg_target {
-    margin: 2px 2px 0 2px;
-    padding: 2px 3px;
-    display: inline-block;
-    box-shadow: 2px 2px black;
-    border-radius: 3px;
+  margin: 2px 2px 0 2px;
+  padding: 2px 3px;
+  display: inline-block;
+  box-shadow: 2px 2px black;
+  border-radius: 3px;
 }
 .msg_target.msg_bright {
-    color: black;
+  color: black;
 }
 
 .msg_target.msg_dark {
-    color: white;
+  color: white;
 }
 
 .msg_from_to {
-    display: inline-block;
+  display: inline-block;
 }
 
 .msg_prompt {
-    text-align: right;
-    margin-top: 5px;
-    margin-right: 5px;
+  text-align: right;
+  margin-top: 5px;
+  margin-right: 5px;
 }
 .btn-delete-msg {
-    position: absolute;
-    right: 0;
-    top: 0;
-    margin: 2px 2px 0 2px;
-    font-size: 8px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  margin: 2px 2px 0 2px;
+  font-size: 8px;
 }
-
-</style>
+</style>