대화리스트 PS 레이아웃 정리.

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

@@ -48,25 +48,11 @@
       </form>
     </div>
   </div>
-
+</div>
-  <div *ngIf="!isSearch" class="app-layout-chat-left-sidenav-chat-list">
+<div *ngIf="!isSearch" class="app-layout-chat-left-sidenav-chat-list">
-    <perfect-scrollbar fxFlex="1 1 auto">
+  <perfect-scrollbar fxFlex="1 1 auto">
-      <ucap-room-list-item
-        *ngFor="let room of roomList"
-        [loginRes]="loginRes"
-        [roomInfo]="room"
-        [roomUserInfo]="getRoomUserList(room)"
-        [sessionVerinfo]="sessionVerinfo"
-        (click)="onSelectedRoom(room)"
-        (contextmenu)="onContextMenuChat($event, room)"
-      >
-      </ucap-room-list-item>
-      <!-- <cdk-virtual-scroll-viewport
-    itemSize="20"
-    class="app-layout-chat-left-sidenav-chat-list-viewport"
-  >
     <ucap-room-list-item
-      *cdkVirtualFor="let room of getRoomList()"
+      *ngFor="let room of roomList"
       [loginRes]="loginRes"
       [roomInfo]="room"
       [roomUserInfo]="getRoomUserList(room)"
@@ -75,10 +61,25 @@
       (contextmenu)="onContextMenuChat($event, room)"
     >
     </ucap-room-list-item>
-  </cdk-virtual-scroll-viewport> -->
+  </perfect-scrollbar>
-    </perfect-scrollbar>
+  <!-- <cdk-virtual-scroll-viewport
-  </div>
+        itemSize="20"
-  <div *ngIf="!!isSearch" class="app-layout-chat-left-sidenav-chat-list search">
+        class="app-layout-chat-left-sidenav-chat-list-viewport"
+      >
+        <ucap-room-list-item
+          *cdkVirtualFor="let room of getRoomList()"
+          [loginRes]="loginRes"
+          [roomInfo]="room"
+          [roomUserInfo]="getRoomUserList(room)"
+          [sessionVerinfo]="sessionVerinfo"
+          (click)="onSelectedRoom(room)"
+          (contextmenu)="onContextMenuChat($event, room)"
+        >
+        </ucap-room-list-item>
+      </cdk-virtual-scroll-viewport> -->
+</div>
+<div *ngIf="!!isSearch" class="app-layout-chat-left-sidenav-chat-list search">
+  <perfect-scrollbar fxFlex="1 1 auto">
     <ucap-room-list-item
       *ngFor="let room of searchRoomList"
       [loginRes]="loginRes"
@@ -89,7 +90,8 @@
       (contextmenu)="onContextMenuChat($event, room)"
     >
     </ucap-room-list-item>
-    <!-- <cdk-virtual-scroll-viewport
+  </perfect-scrollbar>
+  <!-- <cdk-virtual-scroll-viewport
     itemSize="20"
     class="app-layout-chat-left-sidenav-chat-list-viewport"
   >
@@ -104,30 +106,29 @@
     >
     </ucap-room-list-item>
   </cdk-virtual-scroll-viewport> -->
-  </div>
-
-  <div
-    style="visibility: hidden; position: fixed"
-    [style.left]="chatContextMenuPosition.x"
-    [style.top]="chatContextMenuPosition.y"
-    #chatContextMenuTrigger="matMenuTrigger"
-    [matMenuTriggerFor]="chatContextMenu"
-  ></div>
-  <mat-menu
-    #chatContextMenu="matMenu"
-    [hasBackdrop]="false"
-    (ucapClickOutside)="chatContextMenuTrigger.closeMenu()"
-  >
-    <ng-template matMenuContent let-roomInfo="roomInfo">
-      <button mat-menu-item (click)="onSelectedRoom(roomInfo)">
-        대화방 열기
-      </button>
-      <button mat-menu-item (click)="onClickToggleAlarm(roomInfo)">
-        대화방 알람 {{ roomInfo.receiveAlarm ? '끄기' : '켜기' }}
-      </button>
-      <button mat-menu-item (click)="onClickExit(roomInfo)">
-        대화방 나가기
-      </button>
-    </ng-template>
-  </mat-menu>
 </div>
+
+<div
+  style="visibility: hidden; position: fixed"
+  [style.left]="chatContextMenuPosition.x"
+  [style.top]="chatContextMenuPosition.y"
+  #chatContextMenuTrigger="matMenuTrigger"
+  [matMenuTriggerFor]="chatContextMenu"
+></div>
+<mat-menu
+  #chatContextMenu="matMenu"
+  [hasBackdrop]="false"
+  (ucapClickOutside)="chatContextMenuTrigger.closeMenu()"
+>
+  <ng-template matMenuContent let-roomInfo="roomInfo">
+    <button mat-menu-item (click)="onSelectedRoom(roomInfo)">
+      대화방 열기
+    </button>
+    <button mat-menu-item (click)="onClickToggleAlarm(roomInfo)">
+      대화방 알람 {{ roomInfo.receiveAlarm ? '끄기' : '켜기' }}
+    </button>
+    <button mat-menu-item (click)="onClickExit(roomInfo)">
+      대화방 나가기
+    </button>
+  </ng-template>
+</mat-menu>

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

@@ -70,7 +70,7 @@
 }
 
 .app-layout-chat-left-sidenav-chat-list {
-  height: calc(100% - 60px);
+  height: calc(100% - 120px);
 }
 
 .app-layout-chat-left-sidenav-chat-list-viewport {