feat: PageFront의 메시지란에 sticky 적용

hwe/ts/components/MessagePanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="MessagePanel">
-    <div class="MessageInputForm row gx-0">
+    <div class="MessageInputForm bg0 row gx-0">
       <div id="mailbox_list-col" class="col-6 col-md-2 d-grid">
         <BFormSelect v-model="targetMailbox" class="bg-dark text-white">
           <optgroup
@@ -34,6 +34,7 @@
       </div>
     </div>
     <div class="PublicTalk">
+      <div class="stickyAnchor"></div>
       <div class="BoardHeader bg0">전체 메시지</div>
       <template v-if="messagePublic.length == 0">
         <div>메시지가 없습니다.</div>
@@ -51,6 +52,7 @@
       </template>
     </div>
     <div class="NationalTalk">
+      <div class="stickyAnchor"></div>
       <div class="BoardHeader bg0">국가 메시지</div>
       <template v-if="messageNational.length == 0">
         <div>메시지가 없습니다.</div>
@@ -68,6 +70,7 @@
       </template>
     </div>
     <div class="PrivateTalk">
+      <div class="stickyAnchor"></div>
       <div class="BoardHeader bg0">개인 메시지</div>
       <template v-if="messagePrivate.length == 0">
         <div>메시지가 없습니다.</div>
@@ -85,6 +88,7 @@
       </template>
     </div>
     <div class="DiplomacyTalk">
+      <div class="stickyAnchor"></div>
       <div class="BoardHeader bg0">외교 메시지</div>
       <template v-if="messageDiplomacy.length == 0">
         <div>메시지가 없습니다.</div>
@@ -512,4 +516,26 @@ onMounted(async () => {
     border-right: 1px solid gray;
   }
 }
+
+@include media-500px{
+
+  #msg_submit-col{
+    order: 2;
+  }
+  #msg_input-col {
+    order: 3;
+  }
+
+  .MessageInputForm{
+    position: sticky;
+    top: 0px;
+    z-index: 5;
+  }
+
+  .stickyAnchor{
+    position: relative;
+    top: -68px;
+    visibility: hidden;
+  }
+}
 </style>