쪽지 - 스크롤적용

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html

@@ -37,52 +37,57 @@
       </form>
     </div>
   </div>
-  <div *ngIf="!isSearch">
+  <div *ngIf="!isSearch" class="message-section">
     <mat-tab-group
       #tabs
       mat-stretch-tabs
       animationDuration="0ms"
       [selectedIndex]="0"
       (selectedIndexChange)="onSelectedIndexChange($event)"
+      class="message-tab"
     >
       <mat-tab [label]="MessageType.Receive">
         <ng-template mat-tab-label>
           {{ 'message.messageTypeReceiving' | translate }}
         </ng-template>
-
-        <ucap-message-list-item
-          *ngFor="let message of messageRetrieveList$ | async"
-          [message]="message"
-          (click)="onClickDetail(message)"
-          class="message-item"
-        ></ucap-message-list-item>
+        <perfect-scrollbar fxFlex="1 1 auto">
+          <ucap-message-list-item
+            *ngFor="let message of messageRetrieveList$ | async"
+            [message]="message"
+            (click)="onClickDetail(message)"
+            class="message-item"
+          ></ucap-message-list-item>
+        </perfect-scrollbar>
       </mat-tab>
       <mat-tab [label]="MessageType.Send">
         <ng-template mat-tab-label>
           {{ 'message.messageTypeOutgoing' | translate }}
         </ng-template>
-
-        <ucap-message-list-item
-          *ngFor="let message of messageSendList$ | async"
-          [message]="message"
-          (click)="onClickDetail(message)"
-          class="message-item"
-        ></ucap-message-list-item>
+        <perfect-scrollbar fxFlex="1 1 auto">
+          <ucap-message-list-item
+            *ngFor="let message of messageSendList$ | async"
+            [message]="message"
+            (click)="onClickDetail(message)"
+            class="message-item"
+          ></ucap-message-list-item>
+        </perfect-scrollbar>
       </mat-tab>
       <mat-tab [label]="MessageType.Reservation">
         <ng-template mat-tab-label>
           {{ 'message.messageTypeReservation' | translate }}
         </ng-template>
-
-        <ucap-message-list-item
-          *ngFor="let message of messageReservationList$ | async"
-          [message]="message"
-          (click)="onClickDetail(message)"
-          class="message-item"
-        ></ucap-message-list-item>
+        <perfect-scrollbar fxFlex="1 1 auto">
+          <ucap-message-list-item
+            *ngFor="let message of messageReservationList$ | async"
+            [message]="message"
+            (click)="onClickDetail(message)"
+            class="message-item"
+          ></ucap-message-list-item>
+        </perfect-scrollbar>
       </mat-tab>
     </mat-tab-group>
   </div>
+
   <div *ngIf="isSearch">
     <div class="search-sub">
       <form [formGroup]="fgSearchType" class="w-100-p">

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss

@@ -1,3 +1,7 @@
+.message-box {
+  position: relative;
+  height: 100%;
+}
 .current-head {
   h3 {
     display: inline-flex;
@@ -65,7 +69,16 @@
 .mat-tab-label-active {
   opacity: 1;
 }
-
 .message-item {
   cursor: pointer;
 }
+::ng-deep .message-box {
+  .message-section {
+    position: relative;
+    height: calc(100% - 130px);
+    .message-tab {
+      position: relative;
+      height: 100%;
+    }
+  }
+}

projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html

@@ -13,7 +13,7 @@
     </span>
     <button
       mat-stroked-button
-      class="btn-translation-send"
+      class="btn-translation-send bg-accent-color"
       (click)="onClickSendTranslationMessage(translationPreviewInfo)"
     >
       <!--{{ 'chat.send' | translate }}-->