diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
index 3784e5ce..927d1354 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
@@ -11,7 +11,9 @@
       <ng-template mat-tab-label>
         <mat-icon>group</mat-icon>
       </ng-template>
-      <app-layout-chat-left-sidenav-group class="left-group-side"></app-layout-chat-left-sidenav-group>
+      <app-layout-chat-left-sidenav-group
+        class="left-group-side"
+      ></app-layout-chat-left-sidenav-group>
     </mat-tab>
     <mat-tab>
       <ng-template mat-tab-label>
@@ -44,8 +46,8 @@
       <app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
     </mat-tab>
   </mat-tab-group>
-  <ucap-ui-float-action-button
+  <ucap-float-action-button
     [fabButtons]="fabButtons"
     (buttonClick)="onClickFab($event)"
-  ></ucap-ui-float-action-button>
+  ></ucap-float-action-button>
 </div>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
index d1843a20..dcdb7630 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
@@ -50,17 +50,18 @@
   </div>
 
   <div *ngIf="!isSearch" class="app-layout-chat-left-sidenav-chat-list">
-    <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
+    <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"
   >
@@ -75,6 +76,7 @@
     >
     </ucap-room-list-item>
   </cdk-virtual-scroll-viewport> -->
+    </perfect-scrollbar>
   </div>
   <div *ngIf="!!isSearch" class="app-layout-chat-left-sidenav-chat-list search">
     <ucap-room-list-item
@@ -114,7 +116,7 @@
   <mat-menu
     #chatContextMenu="matMenu"
     [hasBackdrop]="false"
-    (ucapUiClickOutside)="chatContextMenuTrigger.closeMenu()"
+    (ucapClickOutside)="chatContextMenuTrigger.closeMenu()"
   >
     <ng-template matMenuContent let-roomInfo="roomInfo">
       <button mat-menu-item (click)="onSelectedRoom(roomInfo)">
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
index fff2e121..dfd0661d 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
@@ -1,91 +1,93 @@
-
-  <div>
-    <div class="current-head">
-      <h3>그룹</h3>
-      <div class="btn-box">
-        <button mat-icon-button>
-          <mat-icon>person_add</mat-icon>
-        </button>
-        <button
-          mat-icon-button
-          #groupMenuTrigger="matMenuTrigger"
-          [matMenuTriggerFor]="groupMenu"
-          aria-label="group menu"
-          (ucapUiClickOutside)="groupMenuTrigger.closeMenu()"
-        >
-          <mat-icon>more_vert</mat-icon>
-        </button>
-      </div>
-    </div>
-    <ucap-organization-tenant-search
-      [companyList]="companyList$ | async"
-      [companyCode]="companyCode"
-      (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
-      (cancel)="onClickCancel($event)"
-    ></ucap-organization-tenant-search>
-
-    <mat-menu
-      #groupMenu="matMenu"
-      xPosition="after"
-      yPosition="below"
-      [hasBackdrop]="false"
-    >
-      <button mat-menu-item (click)="onClickGroupMenu('GROUP_NEW')">
-        <mat-icon>group_add</mat-icon>
-        <span>새 그룹 추가</span>
+<div>
+  <div class="current-head">
+    <h3>그룹</h3>
+    <div class="btn-box">
+      <button mat-icon-button>
+        <mat-icon>person_add</mat-icon>
       </button>
-      <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')">
-        <mat-icon>expand_more</mat-icon>
-        <span>그룹 전체 열기</span>
-      </button>
-      <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_LESS')">
-        <mat-icon>expand_less</mat-icon>
-        <span>그룹 전체 닫기</span>
-      </button>
-      <button mat-menu-item (click)="onClickGroupMenu('GROUP_SAVE')">
-        <mat-icon>save</mat-icon>
-        <span>그룹 저장하기</span>
-      </button>
-      <button mat-menu-item (click)="onClickGroupMenu('GROUP_RESTORE')">
-        <mat-icon>restore</mat-icon>
-        <span>그룹 가져오기</span>
-      </button>
-    </mat-menu>
-  </div>
-  <div *ngIf="!isShowSearch" class="search-result" style="overflow: auto;">
-    <ucap-group-expansion-panel
-      #groupExpansionPanel
-      [groupBuddyList]="groupBuddyList$ | async"
-      [favoritBuddyList]="favoritBuddyList$ | async"
-      [myProfileInfo]="loginRes.userInfo"
-      (more)="onMoreGroup($event)"
-    >
-      <ucap-profile-user-list-item
-        *ucapGroupExpansionPanelItem="let userInfo"
-        [userInfo]="userInfo"
-        [presence]="getStatusBulkInfo(userInfo) | async"
-        [sessionVerinfo]="sessionVerinfo"
-        (click)="onSelectBuddy(userInfo)"
-        (contextmenu)="onContextMenuProfile($event, userInfo)"
+      <button
+        mat-icon-button
+        #groupMenuTrigger="matMenuTrigger"
+        [matMenuTriggerFor]="groupMenu"
+        aria-label="group menu"
+        (ucapClickOutside)="groupMenuTrigger.closeMenu()"
       >
-      </ucap-profile-user-list-item>
-    </ucap-group-expansion-panel>
-  </div>
-  <div *ngIf="isShowSearch" class="search-result">
-    <div *ngIf="searchProcessing">
-      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+        <mat-icon>more_vert</mat-icon>
+      </button>
     </div>
-    <div class="result-num">검색결과<span class="text-accent-color">({{ searchUserInfos.length }}명)</span></div>
+  </div>
+  <ucap-organization-tenant-search
+    [companyList]="companyList$ | async"
+    [companyCode]="companyCode"
+    (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
+    (cancel)="onClickCancel($event)"
+  ></ucap-organization-tenant-search>
+
+  <mat-menu
+    #groupMenu="matMenu"
+    xPosition="after"
+    yPosition="below"
+    [hasBackdrop]="false"
+  >
+    <button mat-menu-item (click)="onClickGroupMenu('GROUP_NEW')">
+      <mat-icon>group_add</mat-icon>
+      <span>새 그룹 추가</span>
+    </button>
+    <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')">
+      <mat-icon>expand_more</mat-icon>
+      <span>그룹 전체 열기</span>
+    </button>
+    <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_LESS')">
+      <mat-icon>expand_less</mat-icon>
+      <span>그룹 전체 닫기</span>
+    </button>
+    <button mat-menu-item (click)="onClickGroupMenu('GROUP_SAVE')">
+      <mat-icon>save</mat-icon>
+      <span>그룹 저장하기</span>
+    </button>
+    <button mat-menu-item (click)="onClickGroupMenu('GROUP_RESTORE')">
+      <mat-icon>restore</mat-icon>
+      <span>그룹 가져오기</span>
+    </button>
+  </mat-menu>
+</div>
+<div *ngIf="!isShowSearch" class="search-result" style="overflow: auto;">
+  <ucap-group-expansion-panel
+    #groupExpansionPanel
+    [groupBuddyList]="groupBuddyList$ | async"
+    [favoritBuddyList]="favoritBuddyList$ | async"
+    [myProfileInfo]="loginRes.userInfo"
+    (more)="onMoreGroup($event)"
+  >
     <ucap-profile-user-list-item
-      *ngFor="let userInfo of searchUserInfos"
+      *ucapGroupExpansionPanelItem="let userInfo"
       [userInfo]="userInfo"
       [presence]="getStatusBulkInfo(userInfo) | async"
       [sessionVerinfo]="sessionVerinfo"
       (click)="onSelectBuddy(userInfo)"
+      (contextmenu)="onContextMenuProfile($event, userInfo)"
     >
     </ucap-profile-user-list-item>
+  </ucap-group-expansion-panel>
+</div>
+<div *ngIf="isShowSearch" class="search-result">
+  <div *ngIf="searchProcessing">
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
   </div>
-
+  <div class="result-num">
+    검색결과<span class="text-accent-color"
+      >({{ searchUserInfos.length }}명)</span
+    >
+  </div>
+  <ucap-profile-user-list-item
+    *ngFor="let userInfo of searchUserInfos"
+    [userInfo]="userInfo"
+    [presence]="getStatusBulkInfo(userInfo) | async"
+    [sessionVerinfo]="sessionVerinfo"
+    (click)="onSelectBuddy(userInfo)"
+  >
+  </ucap-profile-user-list-item>
+</div>
 
 <div
   style="visibility: hidden; position: fixed"
@@ -97,7 +99,7 @@
 <mat-menu
   #profileContextMenu="matMenu"
   [hasBackdrop]="false"
-  (ucapUiClickOutside)="profileContextMenuTrigger.closeMenu()"
+  (ucapClickOutside)="profileContextMenuTrigger.closeMenu()"
 >
   <ng-template matMenuContent let-userInfo="userInfo">
     <button
@@ -164,7 +166,7 @@
 <mat-menu
   #groupContextMenu="matMenu"
   [hasBackdrop]="false"
-  (ucapUiClickOutside)="groupContextMenuTrigger.closeMenu()"
+  (ucapClickOutside)="groupContextMenuTrigger.closeMenu()"
 >
   <ng-template matMenuContent let-group="group">
     <button mat-menu-item (click)="onClickGroupContextMenu('CHAT', group)">
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
index 71104e9f..178cffb2 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
@@ -74,7 +74,7 @@
           <img
             class="avatar"
             style="width: 50px; height: 50px;"
-            ucapUiImage
+            ucapImage
             [base]="profileImageRoot"
             [path]="getUserProfile(message.senderSeq)"
             [default]="'assets/images/img_nophoto_50.png'"
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
index 45480112..0f0f8a6d 100644
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
@@ -11,7 +11,7 @@
     <dt>
       <img
         class="thumbnail"
-        ucapUiImage
+        ucapImage
         [base]="profileImageRoot"
         [path]="userInfo.profileImageFile"
         [default]="'assets/images/img_nophoto_50.png'"
diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
index 65f730fd..2cb3cde0 100644
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
@@ -1,29 +1,25 @@
 <div class="list-item">
   <dl class="item-default">
     <dt>
-      <!-- <img class="thumbnail" /> -->
       <img
         class="thumbnail"
-        ucapUiImage
+        ucapImage
         [base]="sessionVerinfo.profileRoot"
         [path]="imagePath"
         [default]="defaultPath"
       />
       <span *ngIf="roomInfo.isTimeRoom" class="text-warn-color badge-timer">
-          <mat-icon>timer</mat-icon>
+        <mat-icon>timer</mat-icon>
       </span>
-      <!-- <ucap-ui-imaage
-        [imageClass]="'thumbnail'"
-        [base]="sessionVerinfo.profileRoot"
-        [path]="imagePath"
-        [default]="defaultPath"
-      ></ucap-ui-imaage> -->
     </dt>
     <dd class="info">
       <div class="detail">
         <div class="room-name">
           <div class="name">{{ getRoomName(roomInfo) }}</div>
-          <div class="num text-accent-color"  *ngIf="roomInfo.roomType === RoomType.Multi">
+          <div
+            class="num text-accent-color"
+            *ngIf="roomInfo.roomType === RoomType.Multi"
+          >
             {{ roomInfo.joinUserCount }}명
           </div>
           <div *ngIf="!checkable && !roomInfo.receiveAlarm">
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/float-action-button.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/float-action-button.component.ts
index efcee52a..733e7562 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/float-action-button.component.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/components/float-action-button.component.ts
@@ -9,7 +9,7 @@ export interface FloatActionButton {
 }
 
 @Component({
-  selector: 'ucap-ui-float-action-button',
+  selector: 'ucap-float-action-button',
   templateUrl: './float-action-button.component.html',
   styleUrls: ['./float-action-button.component.scss'],
   animations: ucapAnimations
diff --git a/projects/ucap-webmessenger-ui/src/lib/directives/click-outside.directive.ts b/projects/ucap-webmessenger-ui/src/lib/directives/click-outside.directive.ts
index 5df142c7..5abb1edb 100644
--- a/projects/ucap-webmessenger-ui/src/lib/directives/click-outside.directive.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/directives/click-outside.directive.ts
@@ -15,7 +15,7 @@ import {
 } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 
-@Directive({ selector: '[ucapUiClickOutside]' })
+@Directive({ selector: '[ucapClickOutside]' })
 export class ClickOutsideDirective implements OnInit, OnChanges, OnDestroy {
   @Input()
   clickOutsideEnabled = true;
@@ -39,7 +39,7 @@ export class ClickOutsideDirective implements OnInit, OnChanges, OnDestroy {
   clickOutsideEvents = '';
 
   @Output()
-  ucapUiClickOutside: EventEmitter<Event> = new EventEmitter<Event>();
+  ucapClickOutside: EventEmitter<Event> = new EventEmitter<Event>();
 
   private nodesExcluded: Array<HTMLElement> = [];
   private events: Array<string> = ['click', 'contextmenu'];
@@ -164,7 +164,7 @@ export class ClickOutsideDirective implements OnInit, OnChanges, OnDestroy {
       return;
     }
 
-    this.ngZone.run(() => this.ucapUiClickOutside.emit(ev));
+    this.ngZone.run(() => this.ucapClickOutside.emit(ev));
   }
 
   private _shouldExclude(target): boolean {
diff --git a/projects/ucap-webmessenger-ui/src/lib/directives/image.directive.ts b/projects/ucap-webmessenger-ui/src/lib/directives/image.directive.ts
index 362503da..d13bed19 100644
--- a/projects/ucap-webmessenger-ui/src/lib/directives/image.directive.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/directives/image.directive.ts
@@ -12,7 +12,7 @@ import {
 import { NGXLogger } from 'ngx-logger';
 
 @Directive({
-  selector: 'img[ucapUiImage]'
+  selector: 'img[ucapImage]'
 })
 export class ImageDirective implements OnInit, AfterViewInit {
   @Input()
diff --git a/projects/ucap-webmessenger-ui/tslint.json b/projects/ucap-webmessenger-ui/tslint.json
index 3aaa0743..c3395596 100644
--- a/projects/ucap-webmessenger-ui/tslint.json
+++ b/projects/ucap-webmessenger-ui/tslint.json
@@ -1,7 +1,7 @@
 {
   "extends": "../../tslint.json",
   "rules": {
-    "directive-selector": [true, "attribute", "ucapUi", "camelCase"],
-    "component-selector": [true, "element", "ucap-ui", "kebab-case"]
+    "directive-selector": [true, "attribute", "ucap", "camelCase"],
+    "component-selector": [true, "element", "ucap", "kebab-case"]
   }
 }