대화방 리스트 virture scroll 적용.

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

@@ -167,7 +167,9 @@
       class="left-side-tabs-contents"
       style="display: none;"
     >
-      <app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
+      <app-layout-chat-left-sidenav-chat
+        [isVisible]="currentTabLable === MainMenu.Chat"
+      ></app-layout-chat-left-sidenav-chat>
     </div>
     <div
       #tabs

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

@@ -50,9 +50,14 @@
   </div>
 </div>
 <div *ngIf="!isSearch" class="app-layout-chat-left-sidenav-chat-list">
-  <perfect-scrollbar fxFlex="1 1 auto">
+  <cdk-virtual-scroll-viewport
+    #cvsvChatList
+    itemSize="80"
+    perfectScrollbar
+    fxFlexFill
+  >
     <ucap-room-list-item
-      *ngFor="let room of roomList"
+      *cdkVirtualFor="let room of roomList"
       [loginRes]="loginRes"
       [roomInfo]="room"
       [roomUserInfo]="getRoomUserList(room)"
@@ -62,19 +67,7 @@
       class="ucap-clickable"
     >
     </ucap-room-list-item>
-  </perfect-scrollbar>
-  <!-- <cdk-virtual-scroll-viewport itemSize="40" perfectScrollbar fxFlexFill>
-    <ucap-room-list-item
-      *cdkVirtualFor="let room of roomList"
-      [loginRes]="loginRes"
-      [roomInfo]="room"
-      [roomUserInfo]="getRoomUserList(room)"
-      [sessionVerinfo]="sessionVerinfo"
-      (click)="onClickContextMenu('SELECT_ROOM', room)"
-      (contextmenu)="onContextMenuChat($event, room)"
-    >
-    </ucap-room-list-item>
-  </cdk-virtual-scroll-viewport> -->
+  </cdk-virtual-scroll-viewport>
 </div>
 <div *ngIf="!!isSearch" class="app-layout-chat-left-sidenav-chat-list search">
   <perfect-scrollbar fxFlex="1 1 auto">

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

@@ -1,5 +1,12 @@
 import { exit } from './../../../../store/messenger/room/actions';
-import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ViewChild,
+  AfterViewChecked,
+  Input
+} from '@angular/core';
 import {
   ucapAnimations,
   DialogService,
@@ -29,6 +36,8 @@ import { KEY_VER_INFO } from '@app/types';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { MatMenuTrigger } from '@angular/material';
 import { FormGroup, FormBuilder } from '@angular/forms';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
 
 @Component({
   selector: 'app-layout-chat-left-sidenav-chat',
@@ -36,7 +45,16 @@ import { FormGroup, FormBuilder } from '@angular/forms';
   styleUrls: ['./chat.component.scss'],
   animations: ucapAnimations
 })
-export class ChatComponent implements OnInit, OnDestroy {
+export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
+  @Input()
+  isVisible = true;
+
+  @ViewChild('cvsvChatList', { static: false })
+  cvsvChatList: CdkVirtualScrollViewport;
+
+  @ViewChild(PerfectScrollbarDirective, { static: false })
+  psDirectiveRef?: PerfectScrollbarDirective;
+
   @ViewChild('chatContextMenuTrigger', { static: true })
   chatContextMenuTrigger: MatMenuTrigger;
   chatContextMenuPosition = { x: '0px', y: '0px' };
@@ -56,6 +74,9 @@ export class ChatComponent implements OnInit, OnDestroy {
   recommendedWordList: string[];
   filteredRecommendedWordList: string[];
 
+  /** 채팅 리스트에 virture scroll의 size check */
+  isInitList = false;
+
   constructor(
     private store: Store<any>,
     private formBuilder: FormBuilder,
@@ -133,6 +154,10 @@ export class ChatComponent implements OnInit, OnDestroy {
           }
 
           this.recommendedWordList = [...recommendedWordList];
+
+          if (!!this.psDirectiveRef) {
+            this.psDirectiveRef.update();
+          }
         })
       )
       .subscribe();
@@ -156,6 +181,19 @@ export class ChatComponent implements OnInit, OnDestroy {
     }
   }
 
+  ngAfterViewChecked(): void {
+    if (
+      !!this.cvsvChatList &&
+      !!this.roomList &&
+      this.roomList.length > 0 &&
+      !this.isInitList &&
+      this.isVisible
+    ) {
+      this.isInitList = true;
+      this.cvsvChatList.checkViewportSize();
+    }
+  }
+
   onClickSearchCancel() {
     this.isSearch = false;
     this.searchRoomList = [];