virture scroll 기능 추가.

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

@@ -20,7 +20,8 @@
     </button>
   </mat-form-field>
 </div>
-<div>
+<div style="height:100%">
+  <cdk-virtual-scroll-viewport itemSize="20" style="height: 100%">
     <ucap-room-list-item
       *ngFor="let room of getRoomList()"
       [loginRes]="loginRes"
@@ -31,6 +32,7 @@
       (contextmenu)="onContextMenuChat($event, room)"
     >
     </ucap-room-list-item>
+  </cdk-virtual-scroll-viewport>
 </div>
 
 <div

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

@@ -17,8 +17,15 @@
       <mat-progress-bar mode="indeterminate"></mat-progress-bar>
     </div>
     <div class="search-list">
+      <cdk-virtual-scroll-viewport
+        itemSize="20"
+        style="height: calc(100% - 20px);"
+      >
         <ucap-profile-user-list-item
-        *ngFor="let userInfo of selectedDepartmentUserInfoList$ | async"
+          *cdkVirtualFor="
+            let userInfo of selectedDepartmentUserInfoList$ | async;
+            templateCacheSize: 20
+          "
           [userInfo]="userInfo"
           [checkable]="true"
           [sessionVerinfo]="sessionVerinfo"
@@ -26,20 +33,42 @@
           [isChecked]="getCheckedUser(userInfo)"
           (checkUser)="onCheckUser($event)"
         >
+          Loading...
         </ucap-profile-user-list-item>
+      </cdk-virtual-scroll-viewport>
     </div>
   </div>
   <div *ngIf="!isUserSelect" class="btn-box">
     <!--선택된 후에는 disabled="true" 빼주세요. -->
-    <button mat-stroked-button  class="mat-primary" (click)="onClickShowSelectedUserList()">
+    <button
+      mat-stroked-button
+      class="mat-primary"
+      (click)="onClickShowSelectedUserList()"
+    >
       선택<span *ngIf="selectedUserList.length > 0"
         >({{ selectedUserList.length }})</span
       >
     </button>
     <ul>
-    <li><button mat-flat-button (click)="onClickAddGroup()" class="mat-primary">그룹에 추가</button></li>
-    <li><button mat-flat-button (click)="onClickChatOpen()" class="mat-primary">대화</button></li>
-    <li><button mat-flat-button (click)="onClickConference()" class="mat-primary">화상회의</button></li>
+      <li>
+        <button mat-flat-button (click)="onClickAddGroup()" class="mat-primary">
+          그룹에 추가
+        </button>
+      </li>
+      <li>
+        <button mat-flat-button (click)="onClickChatOpen()" class="mat-primary">
+          대화
+        </button>
+      </li>
+      <li>
+        <button
+          mat-flat-button
+          (click)="onClickConference()"
+          class="mat-primary"
+        >
+          화상회의
+        </button>
+      </li>
     </ul>
   </div>
 </div>

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html

@@ -33,12 +33,14 @@
             <ng-template mat-tab-label>
               <mat-icon>group</mat-icon>
             </ng-template>
-
+            <div>
               <div>
                 <ucap-organization-tenant-search
                   [companyList]="companyList$ | async"
                   [companyCode]="companyCode"
-                (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
+                  (keyDownEnter)="
+                    onKeyDownEnterOrganizationTenantSearch($event)
+                  "
                   (cancel)="onClickCancel($event)"
                 ></ucap-organization-tenant-search>
               </div>
@@ -79,22 +81,27 @@
                 >
                 </ucap-profile-user-list-item>
               </div>
+            </div>
           </mat-tab>
           <mat-tab>
             <ng-template mat-tab-label>
               <mat-icon>device_hub</mat-icon>
             </ng-template>
+            <div style="height:500px">
               <app-layout-chat-left-sidenav-organization
                 [selectedUserList]="selectedUserList"
                 [isUserSelect]="true"
                 (checkUser)="onCheckUser($event)"
               >
               </app-layout-chat-left-sidenav-organization>
+            </div>
           </mat-tab>
           <mat-tab *ngIf="data.type === UserSelectDialogType.MessageForward">
             <ng-template mat-tab-label>
               <mat-icon>chat</mat-icon>
             </ng-template>
+            <div style="height:500px">
+              <cdk-virtual-scroll-viewport itemSize="20" style="height: 100%">
                 <ucap-room-list-item
                   *ngFor="let room of roomList"
                   [loginRes]="loginRes"
@@ -107,6 +114,8 @@
                   (checkRoom)="onCheckRoom($event)"
                 >
                 </ucap-room-list-item>
+              </cdk-virtual-scroll-viewport>
+            </div>
           </mat-tab>
         </mat-tab-group>
       </div>