대화방 참여자 목록 보기 기능 구현.

2019-11-12 18:10:38 +09:00 · 2019-11-12 18:10:38 +09:00 · 3227747a8d
commit 3227747a8d
parent 2f684ffdb2
11 changed files with 336 additions and 63 deletions
--- 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>
--- 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,
                })
              );
            }
--- 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>
--- 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);
+  }
 }
--- 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,
+];
--- 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
@ -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>
--- 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
@ -0,0 +1,15 @@
+.list {
+  width: 300px;
+  height: 100%;
+  overflow: hidden;
+
+  .search-list {
+    overflow: auto;
+  }
+}
+
+.btn-box {
+  button {
+    margin: 5px;
+  }
+}
--- 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
@ -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();
+  });
+});
--- 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
@ -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,
+          })
+        );
+      }
+    }
+  }
+}
--- 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>
--- 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',
 }