diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
index 9a1f51b2..03e79699 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
@@ -92,6 +92,9 @@
           <button mat-menu-item (click)="onClickContextMenu('OPEN_FILE_LIST')">
             파일함
           </button>
+          <button mat-menu-item (click)="onClickContextMenu('OPEN_ROOM_USER')">
+            대화참여자목록
+          </button>
           <button mat-menu-item (click)="onClickContextMenu('ADD_MEMBER')">
             대화상대추가
           </button>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
index 2c3e2a0a..b6dfa404 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
@@ -6,7 +6,7 @@ import {
   ElementRef,
   AfterViewInit,
   Output,
-  EventEmitter
+  EventEmitter,
 } from '@angular/core';
 import {
   ucapAnimations,
@@ -20,7 +20,7 @@ import {
   AlertDialogData,
   AlertDialogResult,
   FileUploadQueueComponent,
-  StringUtil
+  StringUtil,
 } from '@ucap-webmessenger/ui';
 import { Store, select } from '@ngrx/store';
 import { NGXLogger } from 'ngx-logger';
@@ -33,7 +33,7 @@ import {
   isRecallable,
   InfoResponse,
   EventJson,
-  FileEventJson
+  FileEventJson,
 } from '@ucap-webmessenger/protocol-event';
 
 import * as AppStore from '@app/store';
@@ -47,36 +47,36 @@ import {
   EnvironmentsInfo,
   KEY_ENVIRONMENTS_INFO,
   UserSelectDialogType,
-  RightDrawer
+  RightDrawer,
 } from '@app/types';
 import { RoomInfo, UserInfo, RoomType } from '@ucap-webmessenger/protocol-room';
 import { tap, take, map, catchError } from 'rxjs/operators';
 import {
   FileInfo,
-  FormComponent as UCapUiChatFormComponent
+  FormComponent as UCapUiChatFormComponent,
 } from '@ucap-webmessenger/ui-chat';
 import { KEY_VER_INFO } from '@app/types/ver-info.type';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import {
   MatMenuTrigger,
   MatSnackBarRef,
-  SimpleSnackBar
+  SimpleSnackBar,
 } from '@angular/material';
 import {
   CommonApiService,
   FileUploadItem,
   FileTalkSaveRequest,
-  FileTalkSaveResponse
+  FileTalkSaveResponse,
 } from '@ucap-webmessenger/api-common';
 import {
   CreateChatDialogComponent,
   CreateChatDialogData,
-  CreateChatDialogResult
+  CreateChatDialogResult,
 } from '../dialogs/chat/create-chat.dialog.component';
 import {
   FileViewerDialogComponent,
   FileViewerDialogData,
-  FileViewerDialogResult
+  FileViewerDialogResult,
 } from '@app/layouts/common/dialogs/file-viewer.dialog.component';
 import { CONST, FileUtil } from '@ucap-webmessenger/core';
 import { PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';
@@ -84,12 +84,12 @@ import { StatusCode } from '@ucap-webmessenger/api';
 import {
   EditChatRoomDialogComponent,
   EditChatRoomDialogResult,
-  EditChatRoomDialogData
+  EditChatRoomDialogData,
 } from '../dialogs/chat/edit-chat-room.dialog.component';
 import {
   SelectGroupDialogComponent,
   SelectGroupDialogResult,
-  SelectGroupDialogData
+  SelectGroupDialogData,
 } from '../dialogs/group/select-group.dialog.component';
 import { GroupDetailData } from '@ucap-webmessenger/protocol-sync';
 
@@ -97,7 +97,7 @@ import { GroupDetailData } from '@ucap-webmessenger/protocol-sync';
   selector: 'app-layout-messenger-messages',
   templateUrl: './messages.component.html',
   styleUrls: ['./messages.component.scss'],
-  animations: ucapAnimations
+  animations: ucapAnimations,
 })
 export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
   @Output()
@@ -379,7 +379,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
           // duration: 3000,
           verticalPosition: 'bottom',
           horizontalPosition: 'center',
-          panelClass: ['chat-snackbar-class']
+          panelClass: ['chat-snackbar-class'],
         });
         this.snackBarPreviewEvent.onAction().subscribe(() => {
           this.setEventMoreInit();
@@ -420,7 +420,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
         EventStore.info({
           roomSeq: this.roomInfo.roomSeq,
           baseSeq: seq,
-          requestCount: CONST.EVENT_INFO_READ_COUNT
+          requestCount: CONST.EVENT_INFO_READ_COUNT,
         })
       );
     }
@@ -438,8 +438,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
         width: '360px',
         data: {
           title: 'Alert',
-          message: `대화내용을 입력해주세요.`
-        }
+          message: `대화내용을 입력해주세요.`,
+        },
       });
       return;
     }
@@ -453,8 +453,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             roomSeq: this.roomInfo.roomSeq,
             eventType: EventType.MassText,
             // sentMessage: message.replace(/\n/gi, '\r\n')
-            sentMessage: message
-          }
+            sentMessage: message,
+          },
         })
       );
     } else {
@@ -464,8 +464,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
           req: {
             roomSeq: this.roomInfo.roomSeq,
             eventType: EventType.Character,
-            sentMessage: message
-          }
+            sentMessage: message,
+          },
         })
       );
     }
@@ -479,7 +479,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
   onMassDetail(value: number) {
     this.store.dispatch(
       ChatStore.selectedMassDetail({
-        massEventSeq: value
+        massEventSeq: value,
       })
     );
   }
@@ -492,7 +492,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
       FileViewerDialogResult
     >(FileViewerDialogComponent, {
       position: {
-        top: '30px'
+        top: '30px',
       },
       maxWidth: '100vw',
       maxHeight: '100vh',
@@ -505,8 +505,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
         downloadUrl: this.sessionVerInfo.downloadUrl,
         deviceType: this.environmentsInfo.deviceType,
         token: this.loginRes.tokenString,
-        userSeq: this.loginRes.userSeq
-      }
+        userSeq: this.loginRes.userSeq,
+      },
     });
   }
 
@@ -532,7 +532,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
 
     const info = {
       senderSeq: this.loginRes.userSeq,
-      roomSeq: this.roomInfo.roomSeq
+      roomSeq: this.roomInfo.roomSeq,
     };
 
     const allObservables: Observable<FileTalkSaveResponse>[] = [];
@@ -553,7 +553,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
           'rv',
           'ts',
           'webm',
-          'wmv'
+          'wmv',
         ].indexOf(FileUtil.getExtension(fileUploadItem.file.name))
       ) {
         thumbnail = await FileUtil.thumbnail(fileUploadItem.file);
@@ -568,7 +568,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
         file: fileUploadItem.file,
         fileName: fileUploadItem.file.name,
         thumb: thumbnail,
-        fileUploadItem
+        fileUploadItem,
       };
 
       allObservables.push(
@@ -600,8 +600,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
                 req: {
                   roomSeq: info.roomSeq,
                   eventType: EventType.File,
-                  sentMessage: res.returnJson
-                }
+                  sentMessage: res.returnJson,
+                },
               })
             );
           }
@@ -627,7 +627,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
     this.messageContextMenuTrigger.menu.focusFirstItem('mouse');
     this.messageContextMenuTrigger.menuData = {
       message: params.message,
-      loginRes: this.loginRes
+      loginRes: this.loginRes,
     };
     this.messageContextMenuTrigger.openMenu();
   }
@@ -647,7 +647,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
                   this.snackBarService.open('클립보드에 복사되었습니다.', '', {
                     duration: 3000,
                     verticalPosition: 'top',
-                    horizontalPosition: 'center'
+                    horizontalPosition: 'center',
                   });
                 }
               }
@@ -659,7 +659,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
                     userSeq: this.loginRes.userSeq,
                     deviceType: this.environmentsInfo.deviceType,
                     token: this.loginRes.tokenString,
-                    eventMassSeq: message.seq
+                    eventMassSeq: message.seq,
                   })
                   .pipe(take(1))
                   .subscribe(res => {
@@ -670,7 +670,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
                         {
                           duration: 3000,
                           verticalPosition: 'top',
-                          horizontalPosition: 'center'
+                          horizontalPosition: 'center',
                         }
                       );
                     }
@@ -694,8 +694,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             data: {
               type: UserSelectDialogType.MessageForward,
               title: 'MessageForward',
-              ignoreRoom: [this.roomInfo]
-            }
+              ignoreRoom: [this.roomInfo],
+            },
           });
 
           if (!!result && !!result.choice && result.choice) {
@@ -719,10 +719,10 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
                   req: {
                     roomSeq: '-999',
                     eventType: message.type,
-                    sentMessage: message.sentMessage
+                    sentMessage: message.sentMessage,
                   },
                   trgtUserSeqs: userSeqs,
-                  trgtRoomSeq: roomSeq
+                  trgtRoomSeq: roomSeq,
                 })
               );
             }
@@ -738,9 +738,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
                 req: {
                   roomSeq: '-999',
                   eventType: message.type,
-                  sentMessage: message.sentMessage
+                  sentMessage: message.sentMessage,
                 },
-                trgtUserSeqs: [this.loginRes.talkWithMeBotSeq]
+                trgtUserSeqs: [this.loginRes.talkWithMeBotSeq],
               })
             );
           }
@@ -756,15 +756,15 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             width: '220px',
             data: {
               title: 'Delete',
-              html: `선택한 메시지를 삭제하시겠습니까?<br/>삭제된 메시지는 내 대화방에서만 적용되며 상대방의 대화방에서는 삭제되지 않습니다.`
-            }
+              html: `선택한 메시지를 삭제하시겠습니까?<br/>삭제된 메시지는 내 대화방에서만 적용되며 상대방의 대화방에서는 삭제되지 않습니다.`,
+            },
           });
 
           if (!!result && !!result.choice && result.choice) {
             this.store.dispatch(
               EventStore.del({
                 roomSeq: this.roomInfo.roomSeq,
-                eventSeq: message.seq
+                eventSeq: message.seq,
               })
             );
           }
@@ -780,8 +780,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             width: '220px',
             data: {
               title: 'ReCall',
-              html: `해당 대화를 회수하시겠습니까?<br/>상대방 대화창에서도 회수됩니다.`
-            }
+              html: `해당 대화를 회수하시겠습니까?<br/>상대방 대화창에서도 회수됩니다.`,
+            },
           });
 
           if (!!result && !!result.choice && result.choice) {
@@ -789,7 +789,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
               EventStore.cancel({
                 roomSeq: this.roomInfo.roomSeq,
                 eventSeq: message.seq,
-                deviceType: this.environmentsInfo.deviceType
+                deviceType: this.environmentsInfo.deviceType,
               })
             );
           }
@@ -806,7 +806,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
         {
           this.store.dispatch(
             ChatStore.selectedRightDrawer({
-              req: RightDrawer.AlbumBox
+              req: RightDrawer.AlbumBox,
             })
           );
         }
@@ -815,7 +815,16 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
         {
           this.store.dispatch(
             ChatStore.selectedRightDrawer({
-              req: RightDrawer.FileBox
+              req: RightDrawer.FileBox,
+            })
+          );
+        }
+        break;
+      case 'OPEN_ROOM_USER':
+        {
+          this.store.dispatch(
+            ChatStore.selectedRightDrawer({
+              req: RightDrawer.RoomUser,
             })
           );
         }
@@ -833,8 +842,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
               title: 'Edit Chat Member',
               curRoomUser: this.userInfoList.filter(
                 user => user.seq !== this.loginRes.userSeq
-              )
-            }
+              ),
+            },
           });
 
           if (!!result && !!result.choice && result.choice) {
@@ -856,8 +865,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
                 RoomStore.inviteOrOpen({
                   req: {
                     divCd: 'Invite',
-                    userSeqs
-                  }
+                    userSeqs,
+                  },
                 })
               );
             }
@@ -873,8 +882,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
           >(SelectGroupDialogComponent, {
             width: '600px',
             data: {
-              title: 'Group Select'
-            }
+              title: 'Group Select',
+            },
           });
 
           if (!!result && !!result.choice && result.choice) {
@@ -891,7 +900,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
               this.store.dispatch(
                 SyncStore.updateGroupMember({
                   oldGroup,
-                  trgtUserSeq
+                  trgtUserSeq,
                 })
               );
             }
@@ -908,8 +917,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             width: '600px',
             data: {
               title: 'Edit Chat Room',
-              roomInfo: this.roomInfo
-            }
+              roomInfo: this.roomInfo,
+            },
           });
 
           if (!!result && !!result.choice && result.choice) {
@@ -926,8 +935,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
                   roomName,
                   receiveAlarm: roomInfo.receiveAlarm,
                   syncAll:
-                    roomNameChangeTarget.toUpperCase() === 'ALL' ? true : false
-                }
+                    roomNameChangeTarget.toUpperCase() === 'ALL' ? true : false,
+                },
               })
             );
 
@@ -939,7 +948,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
               this.store.dispatch(
                 RoomStore.updateTimeRoomInterval({
                   roomSeq: roomInfo.roomSeq,
-                  timerInterval: timeRoomInterval
+                  timerInterval: timeRoomInterval,
                 })
               );
             }
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html
index 0337b70b..979983c7 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html
@@ -4,4 +4,10 @@
 
   <app-layout-chat-right-drawer-album-box *ngSwitchCase="RightDrawer.AlbumBox">
   </app-layout-chat-right-drawer-album-box>
+
+  <app-layout-chat-right-drawer-room-user-list
+    *ngSwitchCase="RightDrawer.RoomUser"
+    (openProfile)="onClickOpenProfile($event)"
+  >
+  </app-layout-chat-right-drawer-room-user-list>
 </ng-container>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.ts
index 0b0f4893..e0712a21 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.ts
@@ -1,18 +1,33 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { RightDrawer } from '@app/types';
+import { UserInfo } from '@ucap-webmessenger/protocol-room';
+import {
+  UserInfoSS,
+  UserInfoF,
+  UserInfoDN,
+} from '@ucap-webmessenger/protocol-query';
 
 @Component({
   selector: 'app-layout-messenger-right-drawer',
   templateUrl: './right-drawer.component.html',
-  styleUrls: ['./right-drawer.component.scss']
+  styleUrls: ['./right-drawer.component.scss'],
 })
 export class RightDrawerComponent implements OnInit {
   @Input()
   selectedRightDrawer: RightDrawer;
 
+  @Output()
+  openProfile = new EventEmitter<
+    UserInfo | UserInfoSS | UserInfoF | UserInfoDN
+  >();
+
   RightDrawer = RightDrawer;
 
   constructor() {}
 
   ngOnInit() {}
+
+  onClickOpenProfile(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
+    this.openProfile.emit(userInfo);
+  }
 }
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/index.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/index.ts
index dc7431d2..b10fa90c 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/index.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/index.ts
@@ -1,4 +1,9 @@
 import { FileBoxComponent } from './file-box.component';
 import { AlbumBoxComponent } from './album-box.component';
+import { RoomUserListComponent } from './room-user-list.component';
 
-export const RIGHT_DRAWER_COMPONENTS = [FileBoxComponent, AlbumBoxComponent];
+export const RIGHT_DRAWER_COMPONENTS = [
+  FileBoxComponent,
+  AlbumBoxComponent,
+  RoomUserListComponent,
+];
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html
new file mode 100644
index 00000000..df71280d
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html
@@ -0,0 +1,25 @@
+<div fxLayout="column" class="list">
+  <div class="search-list">
+    <ucap-profile-user-list-item
+      *ngFor="let userInfo of userInfoList"
+      [userInfo]="userInfo"
+      [presence]="getStatusBulkInfo(userInfo) | async"
+      [sessionVerinfo]="sessionVerinfo"
+      (openProfile)="onClickOpenProfile($event)"
+    >
+    </ucap-profile-user-list-item>
+  </div>
+  <div
+    fxFlex="1 1 50px"
+    fxLayout="row"
+    fxLayoutAlign="center center"
+    class="btn-box"
+  >
+    <button mat-flat-button class="mat-primary" (click)="onClickAddMember()">
+      대화상대추가
+    </button>
+    <button mat-flat-button class="mat-primary" (click)="onClickAddGroup()">
+      그룹멤버로추가
+    </button>
+  </div>
+</div>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.scss
new file mode 100644
index 00000000..4269c3e8
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.scss
@@ -0,0 +1,15 @@
+.list {
+  width: 300px;
+  height: 100%;
+  overflow: hidden;
+
+  .search-list {
+    overflow: auto;
+  }
+}
+
+.btn-box {
+  button {
+    margin: 5px;
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.spec.ts
new file mode 100644
index 00000000..2509f62a
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RoomUserListComponent } from './room-user-list.component';
+
+describe('RoomUserListComponent', () => {
+  let component: RoomUserListComponent;
+  let fixture: ComponentFixture<RoomUserListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RoomUserListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RoomUserListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.ts
new file mode 100644
index 00000000..560935c2
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.ts
@@ -0,0 +1,168 @@
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { Subscription } from 'rxjs';
+import { Store, select } from '@ngrx/store';
+import { tap, map } from 'rxjs/operators';
+
+import * as AppStore from '@app/store';
+import * as SyncStore from '@app/store/messenger/sync';
+import * as RoomStore from '@app/store/messenger/room';
+
+import { UserInfo } from '@ucap-webmessenger/protocol-room';
+import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
+import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+import { KEY_VER_INFO } from '@app/types/ver-info.type';
+import { DialogService } from '@ucap-webmessenger/ui';
+import {
+  SelectGroupDialogComponent,
+  SelectGroupDialogResult,
+  SelectGroupDialogData,
+} from '../../dialogs/group/select-group.dialog.component';
+import { GroupDetailData } from '@ucap-webmessenger/protocol-sync';
+import {
+  CreateChatDialogComponent,
+  CreateChatDialogResult,
+  CreateChatDialogData,
+} from '../../dialogs/chat/create-chat.dialog.component';
+import { UserSelectDialogType } from '@app/types';
+import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
+import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
+
+@Component({
+  selector: 'app-layout-chat-right-drawer-room-user-list',
+  templateUrl: './room-user-list.component.html',
+  styleUrls: ['./room-user-list.component.scss'],
+})
+export class RoomUserListComponent implements OnInit, OnDestroy {
+  @Output()
+  openProfile = new EventEmitter<UserInfo>();
+
+  userInfoList: UserInfo[];
+  userInfoListSubscription: Subscription;
+
+  loginRes: LoginResponse;
+  sessionVerinfo: VersionInfo2Response;
+
+  constructor(
+    private store: Store<any>,
+    private sessionStorageService: SessionStorageService,
+    private dialogService: DialogService
+  ) {
+    this.loginRes = this.sessionStorageService.get<LoginResponse>(
+      KEY_LOGIN_RES_INFO
+    );
+    this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
+      KEY_VER_INFO
+    );
+  }
+
+  ngOnInit() {
+    this.userInfoListSubscription = this.store
+      .pipe(
+        select(AppStore.MessengerSelector.RoomSelector.selectUserinfolist),
+        tap(userInfoList => {
+          this.userInfoList = userInfoList;
+        })
+      )
+      .subscribe();
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.userInfoListSubscription) {
+      this.userInfoListSubscription.unsubscribe();
+    }
+  }
+
+  getStatusBulkInfo(buddy: UserInfo) {
+    return this.store.pipe(
+      select(
+        AppStore.MessengerSelector.StatusSelector.selectEntitiesStatusBulkInfo
+      ),
+      map(statusBulkInfo =>
+        !!statusBulkInfo ? statusBulkInfo[buddy.seq] : undefined
+      )
+    );
+  }
+
+  onClickOpenProfile(userInfo: UserInfo) {
+    this.openProfile.emit(userInfo);
+  }
+
+  async onClickAddMember() {
+    const result = await this.dialogService.open<
+      CreateChatDialogComponent,
+      CreateChatDialogData,
+      CreateChatDialogResult
+    >(CreateChatDialogComponent, {
+      width: '600px',
+      data: {
+        type: UserSelectDialogType.EditChatMember,
+        title: 'Edit Chat Member',
+        curRoomUser: this.userInfoList.filter(
+          user => user.seq !== this.loginRes.userSeq
+        ),
+      },
+    });
+
+    if (!!result && !!result.choice && result.choice) {
+      const userSeqs: number[] = [];
+      if (!!result.selectedUserList && result.selectedUserList.length > 0) {
+        result.selectedUserList.map(user => {
+          userSeqs.push(user.seq);
+        });
+      }
+
+      if (userSeqs.length > 0) {
+        // include me
+        userSeqs.push(this.loginRes.userSeq);
+
+        this.store.dispatch(
+          RoomStore.inviteOrOpen({
+            req: {
+              divCd: 'Invite',
+              userSeqs,
+            },
+          })
+        );
+      }
+    }
+  }
+
+  async onClickAddGroup() {
+    const result = await this.dialogService.open<
+      SelectGroupDialogComponent,
+      SelectGroupDialogData,
+      SelectGroupDialogResult
+    >(SelectGroupDialogComponent, {
+      width: '600px',
+      data: {
+        title: 'Group Select',
+      },
+    });
+
+    if (!!result && !!result.choice && result.choice) {
+      if (!!result.group) {
+        const oldGroup: GroupDetailData = result.group;
+        const trgtUserSeq: number[] = [];
+        result.group.userSeqs.map(seq => trgtUserSeq.push(seq));
+        this.userInfoList
+          .filter(v => result.group.userSeqs.indexOf(v.seq) < 0)
+          .forEach(user => {
+            trgtUserSeq.push(user.seq);
+          });
+
+        this.store.dispatch(
+          SyncStore.updateGroupMember({
+            oldGroup,
+            trgtUserSeq,
+          })
+        );
+      }
+    }
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
index dff20e2b..a2c6940b 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
@@ -28,6 +28,7 @@
     >
       <app-layout-messenger-right-drawer
         [selectedRightDrawer]="selectedRightDrawer$ | async"
+        (openProfile)="onClickOpenProfile($event)"
       >
       </app-layout-messenger-right-drawer>
     </mat-drawer>
diff --git a/projects/ucap-webmessenger-app/src/app/types/right-drawer.type.ts b/projects/ucap-webmessenger-app/src/app/types/right-drawer.type.ts
index 52f5e317..6f76b5cc 100644
--- a/projects/ucap-webmessenger-app/src/app/types/right-drawer.type.ts
+++ b/projects/ucap-webmessenger-app/src/app/types/right-drawer.type.ts
@@ -1,4 +1,5 @@
 export enum RightDrawer {
+  RoomUser = 'ROOM_USER',
   FileBox = 'FILE_BOX',
-  AlbumBox = 'ALBUM_BOX'
+  AlbumBox = 'ALBUM_BOX',
 }