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

hwe/ts/PageFront.vue

@@ -458,6 +458,7 @@ watch(refreshCounter, async () => {
 @import "@scss/common/break_500px.scss";
 :deep() {
   @import "@scss/gameEvent.scss";
+  @import "@scss/battleLog.scss";
 }
 
 #mobileBottomBar {

hwe/ts/components/GameBottomBar.vue

@@ -83,16 +83,16 @@
             <li><a class="dropdown-item disabled">메시지</a></li>
             <hr class="dropdown-divider" />
             <li>
-              <button type="button" class="dropdown-item" @click="scrollToSelector('.PublicTalk')">전체</button>
+              <button type="button" class="dropdown-item" @click="scrollToSelector('.PublicTalk > .stickyAnchor')">전체</button>
             </li>
             <li>
-              <button type="button" class="dropdown-item" @click="scrollToSelector('.NationalTalk')">국가</button>
+              <button type="button" class="dropdown-item" @click="scrollToSelector('.NationalTalk > .stickyAnchor')">국가</button>
             </li>
             <li>
-              <button type="button" class="dropdown-item" @click="scrollToSelector('.PrivateTalk')">개인</button>
+              <button type="button" class="dropdown-item" @click="scrollToSelector('.PrivateTalk > .stickyAnchor')">개인</button>
             </li>
             <li>
-              <button type="button" class="dropdown-item" @click="scrollToSelector('.DiplomacyTalk')">외교</button>
+              <button type="button" class="dropdown-item" @click="scrollToSelector('.DiplomacyTalk > .stickyAnchor')">외교</button>
             </li>
             <li>
               <button type="button" class="btn btn-sammo-base2" @click="moveLobby">로비로</button>

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>