hwe/ts/components/MessagePanel.vue

@@ -39,7 +39,7 @@
       <template v-if="messagePublic.length == 0">
         <div>메시지가 없습니다.</div>
       </template>
-      <template v-else>
+      <div v-else class="MessageList">
         <MessagePlate
           v-for="msg of messagePublic"
           :key="msg.id"
@@ -55,7 +55,7 @@
             이전 메시지 불러오기
           </button>
         </div>
-      </template>
+      </div>
     </div>
     <div class="NationalTalk">
       <div class="stickyAnchor"></div>
@@ -63,7 +63,7 @@
       <template v-if="messageNational.length == 0">
         <div>메시지가 없습니다.</div>
       </template>
-      <template v-else>
+      <div v-else class="MessageList">
         <MessagePlate
           v-for="msg of messageNational"
           :key="msg.id"
@@ -79,7 +79,7 @@
             이전 메시지 불러오기
           </button>
         </div>
-      </template>
+      </div>
     </div>
     <div class="PrivateTalk">
       <div class="stickyAnchor"></div>
@@ -87,7 +87,7 @@
       <template v-if="messagePrivate.length == 0">
         <div>메시지가 없습니다.</div>
       </template>
-      <template v-else>
+      <div v-else class="MessageList">
         <MessagePlate
           v-for="msg of messagePrivate"
           :key="msg.id"
@@ -103,7 +103,7 @@
             이전 메시지 불러오기
           </button>
         </div>
-      </template>
+      </div>
     </div>
     <div class="DiplomacyTalk">
       <div class="stickyAnchor"></div>
@@ -111,7 +111,7 @@
       <template v-if="messageDiplomacy.length == 0">
         <div>메시지가 없습니다.</div>
       </template>
-      <template v-else>
+      <div v-else class="MessageList">
         <MessagePlate
           v-for="msg of messageDiplomacy"
           :key="msg.id"
@@ -127,7 +127,7 @@
             이전 메시지 불러오기
           </button>
         </div>
-      </template>
+      </div>
     </div>
   </div>
 </template>
@@ -591,6 +591,12 @@ onMounted(async () => {
   .only-mobile {
     display: none;
   }
+
+  .MessageList{
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 650px;
+  }
 }
 
 @include media-500px {