feat: 메시지 패널에 모바일용 '접기' 기능 추가

- 접는다기 보다는 '삭제'에 가까움
- 메모리 절약을 위해..

hwe/ts/components/MessagePanel.vue

@@ -49,6 +49,12 @@
           :nationID="nationID"
           :permissionLevel="permissionLevel"
         ></MessagePlate>
+        <div class="d-grid Actions">
+          <button type="button" class="btn btn-dark only-mobile" @click="foldMessage($event, 'public')">접기</button>
+          <button type="button" class="btn btn-secondary" @click="loadOldMessage($event, 'public')">
+            이전 메시지 불러오기
+          </button>
+        </div>
       </template>
     </div>
     <div class="NationalTalk">
@@ -67,6 +73,12 @@
           :nationID="nationID"
           :permissionLevel="permissionLevel"
         ></MessagePlate>
+        <div class="d-grid Actions">
+          <button type="button" class="btn btn-dark only-mobile" @click="foldMessage($event, 'national')">접기</button>
+          <button type="button" class="btn btn-secondary" @click="loadOldMessage($event, 'national')">
+            이전 메시지 불러오기
+          </button>
+        </div>
       </template>
     </div>
     <div class="PrivateTalk">
@@ -85,6 +97,12 @@
           :nationID="nationID"
           :permissionLevel="permissionLevel"
         ></MessagePlate>
+        <div class="d-grid Actions">
+          <button type="button" class="btn btn-dark only-mobile" @click="foldMessage($event, 'private')">접기</button>
+          <button type="button" class="btn btn-secondary" @click="loadOldMessage($event, 'private')">
+            이전 메시지 불러오기
+          </button>
+        </div>
       </template>
     </div>
     <div class="DiplomacyTalk">
@@ -103,6 +121,12 @@
           :nationID="nationID"
           :permissionLevel="permissionLevel"
         ></MessagePlate>
+        <div class="d-grid Actions">
+          <button type="button" class="btn btn-dark only-mobile" @click="foldMessage($event, 'diplomacy')">접기</button>
+          <button type="button" class="btn btn-secondary" @click="loadOldMessage($event, 'diplomacy')">
+            이전 메시지 불러오기
+          </button>
+        </div>
       </template>
     </div>
   </div>
@@ -429,6 +453,43 @@ function refreshMailboxList(obj: MabilboxListResponse) {
   mailboxList.value = [favoriteBox, diplomacyMailboxList, ...nationMailboxList];
 }
 
+function foldMessage($event: MouseEvent, type: MsgType) {
+  const target = messageIndexedList[type].value;
+  if (target.length < 10) {
+    return;
+  }
+  const remain = target.slice(10);
+  target.length = 10;
+
+  for(const msg of remain){
+    messageStorage.delete(msg.id);
+  }
+}
+
+async function loadOldMessage($event: MouseEvent, type: MsgType) {
+  const target = messageIndexedList[type].value;
+  if (target.length == 0) {
+    return;
+  }
+  const last = target[target.length - 1].id;
+
+  try {
+    const response = await SammoAPI.Message.GetOldMessage({
+      to: last,
+      type,
+    });
+    updateMsgResponse(response);
+  } catch (e) {
+    if (isString(e)) {
+      toasts.warning({
+        title: "이전 메시지 불러오기 실패",
+        body: e,
+      });
+    }
+    console.error(e);
+  }
+}
+
 async function sendMessage() {
   const text = newMessageText.value;
   if (!text) {
@@ -495,9 +556,6 @@ onMounted(async () => {
   outline-color: gray;
 }
 
-.PublicTalk {
-}
-
 @include media-1000px {
   .MessagePanel {
     display: grid;
@@ -515,27 +573,36 @@ onMounted(async () => {
   .PrivateTalk {
     border-right: 1px solid gray;
   }
+
+  .only-mobile{
+    display: none;
+  }
 }
 
-@include media-500px{
-
-  #msg_submit-col{
+@include media-500px {
+  #msg_submit-col {
     order: 2;
   }
   #msg_input-col {
     order: 3;
   }
 
-  .MessageInputForm{
+  .MessageInputForm {
     position: sticky;
     top: 0px;
     z-index: 5;
   }
 
-  .stickyAnchor{
+  .stickyAnchor {
     position: relative;
     top: -68px;
     visibility: hidden;
   }
+
+  .d-grid.Actions {
+    grid-template-columns: 1fr 1fr;
+  }
+
+
 }
 </style>