Merge branch 'master' of http://10.81.13.221:6990/Web/next-ucap-messenger

2019-11-12 18:54:30 +09:00 · 2019-11-12 18:54:30 +09:00 · 09148e04bb
commit 09148e04bb
parent e9b444e64b 3227747a8d
23 changed files with 1069 additions and 143 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/album-box.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
@ -1 +1,104 @@
-<p>album-box works!</p>
+<div fxLayout="column" style="width: 600px;" class="album-box">
+  <div>
+    <mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
+      <mat-tab label="Image"></mat-tab>
+      <mat-tab label="Video"></mat-tab>
+    </mat-tab-group>
+  </div>
+  <div fxFlex="0 0 400px">
+    <ng-container *ngIf="!selectedFile">
+      Select File.
+    </ng-container>
+    <ng-container *ngIf="selectedFile">
+      <img
+        *ngIf="selectedFile.info.type === FileType.Image"
+        [src]="getImageUrl(selectedFile)"
+        class="preview-image"
+      />
+      <video
+        controls
+        *ngIf="selectedFile.info.type === FileType.Video"
+        class="preview-image"
+      >
+        <source [src]="getImageUrl(selectedFile)" />
+      </video>
+      <ul>
+        <li>name : {{ selectedFile.info.name }}</li>
+        <li>size : {{ selectedFile.info.size | ucapBytes }}</li>
+        <li>
+          date :
+          {{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
+        </li>
+      </ul>
+    </ng-container>
+  </div>
+  <div class="search-list">
+    <div
+      *ngFor="let fileInfo of filteredList"
+      class="img-item"
+      matTooltip="fileInfo.info.name"
+      (click)="onClickImage($event, fileInfo)"
+    >
+      <dl>
+        <dt>
+          <div
+            *ngIf="
+              !!fileInfo.eventInfo &&
+                !!fileInfo.eventInfo.sentMessageJson &&
+                !!fileInfo.eventInfo.sentMessageJson.thumbUrl;
+              then thumb;
+              else icon
+            "
+          ></div>
+          <ng-template #thumb>
+            <img [src]="fileInfo.eventInfo.sentMessageJson.thumbUrl" />
+          </ng-template>
+          <ng-template #icon>
+            <div
+              [ngClass]="[
+                'mime-icon',
+                'light',
+                'ico-' + getExtention(fileInfo.info.name)
+              ]"
+            >
+              <div class="ico"></div>
+            </div>
+          </ng-template>
+        </dt>
+        <dd>
+          <span>
+            <mat-checkbox
+              #checkbox
+              [checked]="getCheckItem(fileInfo)"
+              (change)="onCheckItem(checkbox.checked, fileInfo)"
+              (click)="$event.stopPropagation()"
+            >
+            </mat-checkbox>
+          </span>
+          <span>
+            <button mat-button (click)="onClickDownload(fileInfo)">
+              <mat-icon>vertical_align_bottom</mat-icon>
+            </button>
+          </span>
+        </dd>
+      </dl>
+    </div>
+  </div>
+  <div
+    fxFlex="1 1 50px"
+    fxLayout="row"
+    fxLayoutAlign="center center"
+    class="btn-box"
+  >
+    <button
+      mat-flat-button
+      [disabled]="selectedFileList.length > 0 ? 'false' : 'true'"
+      class="mat-primary"
+    >
+      Download All
+    </button>
+    <button mat-flat-button class="mat-primary">
+      Open Folder
+    </button>
+  </div>
+</div>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
@ -0,0 +1,24 @@
+.album-box {
+  height: 100%;
+  overflow: hidden;
+
+  .search-list {
+    overflow: auto;
+  }
+}
+
+.img-item {
+  cursor: pointer;
+  max-width: 150px;
+  min-width: 150px;
+}
+
+.preview-image {
+  max-height: 300px;
+}
+
+.btn-box {
+  button {
+    margin: 5px;
+  }
+}
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts
@ -1,12 +1,198 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
+import { MatPaginator, MatTableDataSource } from '@angular/material';
+import {
+  FileInfo,
+  FileDownloadInfo,
+  FileType,
+} from '@ucap-webmessenger/protocol-file';
+import { Subscription, combineLatest } from 'rxjs';
+import { Store, select } from '@ngrx/store';
+
+import * as AppStore from '@app/store';
+import * as ChatStore from '@app/store/messenger/chat';
+import { tap, map } from 'rxjs/operators';
+import {
+  Info,
+  EventJson,
+  FileEventJson,
+} from '@ucap-webmessenger/protocol-event';
+import { FileUtil } from '@ucap-webmessenger/core';
+import { CommonApiService } from '@ucap-webmessenger/api-common';
+import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
+import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
+import { EnvironmentsInfo, KEY_ENVIRONMENTS_INFO } from '@app/types';
+import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
+import { KEY_VER_INFO } from '@app/types/ver-info.type';
+
+export interface FileInfoTotal {
+  info: FileInfo;
+  checkInfo: FileDownloadInfo[];
+  eventInfo?: Info<FileEventJson>;
+}

@Component({
  selector: 'app-layout-chat-right-drawer-album-box',
  templateUrl: './album-box.component.html',
-  styleUrls: ['./album-box.component.scss']
+  styleUrls: ['./album-box.component.scss'],
 })
-export class AlbumBoxComponent implements OnInit {
-  constructor() {}
+export class AlbumBoxComponent implements OnInit, OnDestroy {
+  filteredList: FileInfoTotal[] = [];
+  fileInfoTotal: FileInfoTotal[];
+  fileInfoList: FileInfo[];
+  fileInfoListSubscription: Subscription;

-  ngOnInit() {}
+  selectedFile: FileInfoTotal;
+  selectedFileList: FileInfoTotal[] = [];
+
+  loginRes: LoginResponse;
+  environmentsInfo: EnvironmentsInfo;
+  sessionVerinfo: VersionInfo2Response;
+
+  FileType = FileType;
+  currentTabIndex = 0;
+
+  constructor(
+    private store: Store<any>,
+    private sessionStorageService: SessionStorageService,
+    private commonApiService: CommonApiService
+  ) {
+    this.loginRes = this.sessionStorageService.get<LoginResponse>(
+      KEY_LOGIN_RES_INFO
+    );
+    this.environmentsInfo = this.sessionStorageService.get<EnvironmentsInfo>(
+      KEY_ENVIRONMENTS_INFO
+    );
+    this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
+      KEY_VER_INFO
+    );
+  }
+
+  ngOnInit() {
+    this.fileInfoListSubscription = combineLatest([
+      this.store.pipe(select(AppStore.MessengerSelector.RoomSelector.roomInfo)),
+      this.store.pipe(
+        select(AppStore.MessengerSelector.EventSelector.selectAllFileInfoList)
+      ),
+      this.store.pipe(
+        select(
+          AppStore.MessengerSelector.EventSelector.selectAllFileInfoCheckList
+        )
+      ),
+      this.store.pipe(
+        select(AppStore.MessengerSelector.EventSelector.selectAllInfoList)
+      ),
+    ])
+      .pipe(
+        tap(() => (this.fileInfoTotal = [])),
+        tap(([roomInfo, fileInfoList, fileInfoCheckList, eventList]) => {
+          this.fileInfoList = fileInfoList.filter(fileInfo => {
+            if (
+              fileInfo.roomSeq === roomInfo.roomSeq &&
+              (fileInfo.type === FileType.Image ||
+                fileInfo.type === FileType.Video)
+            ) {
+              return true;
+            } else {
+              return false;
+            }
+          });
+
+          this.fileInfoList.map(fileInfo => {
+            const events = eventList.filter(
+              event => event.seq === fileInfo.eventSeq
+            );
+
+            this.fileInfoTotal.push({
+              info: fileInfo,
+              checkInfo: fileInfoCheckList.filter(
+                checkInfo => checkInfo.seq === fileInfo.seq
+              ),
+              eventInfo:
+                events.length > 0 ? (events[0] as Info<FileEventJson>) : null,
+            });
+          });
+
+          this.onSelectedIndexChange(this.currentTabIndex);
+        })
+      )
+      .subscribe();
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.fileInfoListSubscription) {
+      this.fileInfoListSubscription.unsubscribe();
+    }
+  }
+
+  getExtention(name: string): string {
+    return FileUtil.getExtension(name);
+  }
+
+  getImageUrl(fileInfo: FileInfoTotal): string {
+    return this.commonApiService.urlForFileTalkDownload(
+      {
+        userSeq: this.loginRes.userSeq,
+        deviceType: this.environmentsInfo.deviceType,
+        token: this.loginRes.tokenString,
+        attachmentsSeq: fileInfo.info.seq,
+      },
+      this.sessionVerinfo.downloadUrl
+    );
+  }
+
+  onSelectedIndexChange(index: number) {
+    this.selectedFile = null;
+    this.currentTabIndex = index;
+    if (this.currentTabIndex === 0) {
+      // Image
+      this.filteredList = this.fileInfoTotal.filter(
+        fileInfo => fileInfo.info.type === FileType.Image
+      );
+    } else {
+      // Video
+      this.filteredList = this.fileInfoTotal.filter(
+        fileInfo => fileInfo.info.type === FileType.Video
+      );
+    }
+  }
+
+  onClickImage(event: MouseEvent, fileInfo: FileInfoTotal) {
+    if (!!event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    this.selectedFile = fileInfo;
+  }
+
+  getCheckItem(fileInfo: FileInfoTotal) {
+    if (this.selectedFileList) {
+      if (
+        this.selectedFileList.filter(
+          info => info.info.seq === fileInfo.info.seq
+        ).length > 0
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    } else {
+      return false;
+    }
+  }
+  onCheckItem(value: boolean, fileInfo: FileInfoTotal) {
+    if (value) {
+      this.onClickImage(undefined, fileInfo);
+      this.selectedFileList.push(fileInfo);
+    } else {
+      this.selectedFileList = this.selectedFileList.filter(
+        info => info.info.seq !== fileInfo.info.seq
+      );
+    }
+  }
+
+  onClickDownload(fileInfo: FileInfoTotal) {
+    console.log(fileInfo);
+  }
 }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html
@ -1 +1,108 @@
-<p>file-box works!</p>
+<div fxLayout="column">
+  <div>
+    <mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
+      <mat-tab label="Receive"></mat-tab>
+      <mat-tab label="Send"></mat-tab>
+    </mat-tab-group>
+  </div>
+  <div fxFlex="1 1 300px">
+    <ng-container *ngIf="!selectedFile">
+      Select File.
+    </ng-container>
+    <ng-container *ngIf="selectedFile">
+      <div
+        [ngClass]="[
+          'mime-icon',
+          'light',
+          'ico-' + getExtention(selectedFile.info.name)
+        ]"
+      >
+        <div class="ico"></div>
+      </div>
+      <ul>
+        <li>name : {{ selectedFile.info.name }}</li>
+        <li>size : {{ selectedFile.info.size | ucapBytes }}</li>
+        <li>
+          date :
+          {{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
+        </li>
+      </ul>
+    </ng-container>
+  </div>
+  <div fxFlex="1 1 auto">
+    <table mat-table [dataSource]="dataSource" matSort>
+      <ng-container matColumnDef="check">
+        <th mat-header-cell *matHeaderCellDef>
+          <mat-checkbox
+            #checkboxAll
+            [checked]="getCheckAllUser()"
+            (change)="onCheckAllkUser(checkboxAll.checked)"
+            (click)="$event.stopPropagation()"
+          >
+          </mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <mat-checkbox
+            #checkbox
+            [checked]="getCheckUser(element)"
+            (change)="onCheckUser(checkbox.checked, element)"
+            (click)="$event.stopPropagation()"
+          >
+          </mat-checkbox>
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
+        <td mat-cell *matCellDef="let element">{{ element.info.name }}</td>
+      </ng-container>
+      <ng-container matColumnDef="size">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Size</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.info.size | ucapBytes }}
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="sendDate">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>sendDate</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="receivedUserCount">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>receivedUser</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.info.receivedUserCount }}
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr
+        mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        (click)="onClickRow(row)"
+      ></tr>
+    </table>
+
+    <mat-paginator
+      [pageSize]="10"
+      [pageSizeOptions]="[5, 10, 20]"
+      showFirstLastButtons
+    ></mat-paginator>
+  </div>
+  <div
+    fxFlex="1 1 50px"
+    fxLayout="row"
+    fxLayoutAlign="center center"
+    class="btn-box"
+  >
+    <button
+      mat-flat-button
+      [disabled]="selectedFileList.length > 0 ? 'false' : 'true'"
+      class="mat-primary"
+    >
+      Download All
+    </button>
+    <button mat-flat-button class="mat-primary">
+      Open Folder
+    </button>
+  </div>
+</div>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
@ -0,0 +1,14 @@
+table {
+  width: 100%;
+}
+
+.mat-row:hover {
+  background: rgba(0, 0, 0, 0.04);
+  cursor: pointer;
+}
+
+.btn-box {
+  button {
+    margin: 5px;
+  }
+}
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.ts
@ -1,12 +1,218 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
+import { MatPaginator, MatTableDataSource, MatSort } from '@angular/material';
+import {
+  FileInfo,
+  FileDownloadInfo,
+  FileType,
+} from '@ucap-webmessenger/protocol-file';
+import { Subscription, combineLatest } from 'rxjs';
+import { Store, select } from '@ngrx/store';
+
+import * as AppStore from '@app/store';
+import * as ChatStore from '@app/store/messenger/chat';
+import { tap, map } from 'rxjs/operators';
+import { FileUtil } from '@ucap-webmessenger/core';
+import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
+import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
+
+export interface FileInfoTotal {
+  info: FileInfo;
+  checkInfo: FileDownloadInfo[];
+}

@Component({
  selector: 'app-layout-chat-right-drawer-file-box',
  templateUrl: './file-box.component.html',
-  styleUrls: ['./file-box.component.scss']
+  styleUrls: ['./file-box.component.scss'],
 })
-export class FileBoxComponent implements OnInit {
-  constructor() {}
+export class FileBoxComponent implements OnInit, OnDestroy {
+  displayedColumns: string[] = [
+    'check',
+    'name',
+    'size',
+    'sendDate',
+    'receivedUserCount',
+  ];
+  dataSource = new MatTableDataSource<FileInfoTotal>();

-  ngOnInit() {}
+  fileInfoTotal: FileInfoTotal[];
+  fileInfoList: FileInfo[];
+  fileInfoListSubscription: Subscription;
+
+  selectedFile: FileInfoTotal;
+  selectedFileList: FileInfoTotal[] = [];
+
+  loginRes: LoginResponse;
+
+  currentTabIndex = 0;
+
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  constructor(
+    private store: Store<any>,
+    private sessionStorageService: SessionStorageService
+  ) {
+    this.loginRes = this.sessionStorageService.get<LoginResponse>(
+      KEY_LOGIN_RES_INFO
+    );
+  }
+
+  ngOnInit() {
+    this.fileInfoListSubscription = combineLatest([
+      this.store.pipe(select(AppStore.MessengerSelector.RoomSelector.roomInfo)),
+      this.store.pipe(
+        select(AppStore.MessengerSelector.EventSelector.selectAllFileInfoList)
+      ),
+      this.store.pipe(
+        select(
+          AppStore.MessengerSelector.EventSelector.selectAllFileInfoCheckList
+        )
+      ),
+    ])
+      .pipe(
+        tap(() => (this.fileInfoTotal = [])),
+        tap(([roomInfo, fileInfoList, fileInfoCheckList]) => {
+          this.fileInfoList = fileInfoList.filter(fileInfo => {
+            if (
+              fileInfo.roomSeq === roomInfo.roomSeq &&
+              (fileInfo.type === FileType.File ||
+                fileInfo.type === FileType.Sound)
+            ) {
+              return true;
+            } else {
+              return false;
+            }
+          });
+
+          this.fileInfoList.map(fileInfo => {
+            this.fileInfoTotal.push({
+              info: fileInfo,
+              checkInfo: fileInfoCheckList.filter(
+                checkInfo => checkInfo.seq === fileInfo.seq
+              ),
+            });
+          });
+
+          this.onSelectedIndexChange(this.currentTabIndex);
+        })
+      )
+      .subscribe();
+
+    this.dataSource.sortingDataAccessor = (item, property) => {
+      switch (property) {
+        case 'name':
+          return item.info.name;
+        case 'size':
+          return item.info.size;
+        case 'sendDate':
+          return item.info.sendDate;
+        case 'receivedUserCount':
+          return item.info.receivedUserCount;
+        default:
+          return item[property];
+      }
+    };
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.fileInfoListSubscription) {
+      this.fileInfoListSubscription.unsubscribe();
+    }
+  }
+
+  getExtention(name: string): string {
+    return FileUtil.getExtension(name);
+  }
+
+  onSelectedIndexChange(index: number) {
+    this.selectedFile = null;
+    this.currentTabIndex = index;
+    if (this.currentTabIndex === 0) {
+      // Receive
+      this.dataSource.data = this.fileInfoTotal.filter(
+        fileInfo => fileInfo.info.senderSeq !== this.loginRes.userSeq
+      );
+    } else {
+      // send
+      this.dataSource.data = this.fileInfoTotal.filter(
+        fileInfo => fileInfo.info.senderSeq === this.loginRes.userSeq
+      );
+    }
+  }
+
+  getCheckAllUser() {
+    const data = this.dataSource
+      .sortData(this.dataSource.data, this.sort)
+      .filter((u, i) => i >= this.paginator.pageSize * this.paginator.pageIndex)
+      .filter((u, i) => i < this.paginator.pageSize);
+    if (
+      data.filter(
+        dInfo =>
+          this.selectedFileList.filter(
+            fileInfo => fileInfo.info.seq === dInfo.info.seq
+          ).length === 0
+      ).length > 0
+    ) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+  onCheckAllkUser(value: boolean) {
+    const data = this.dataSource
+      .sortData(this.dataSource.data, this.sort)
+      .filter((u, i) => i >= this.paginator.pageSize * this.paginator.pageIndex)
+      .filter((u, i) => i < this.paginator.pageSize);
+
+    if (!!data && data.length > 0) {
+      if (value) {
+        this.selectedFileList.push(
+          ...data.filter(dInfo =>
+            this.selectedFileList.filter(
+              fileInfo => fileInfo.info.seq !== dInfo.info.seq
+            )
+          )
+        );
+      } else {
+        this.selectedFileList = this.selectedFileList.filter(
+          fileInfo =>
+            !(
+              data.filter(dInfo => dInfo.info.seq === fileInfo.info.seq)
+                .length > 0
+            )
+        );
+      }
+    }
+  }
+  getCheckUser(fileInfo: FileInfoTotal) {
+    if (this.selectedFileList) {
+      if (
+        this.selectedFileList.filter(
+          info => info.info.seq === fileInfo.info.seq
+        ).length > 0
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    } else {
+      return false;
+    }
+  }
+  onCheckUser(value: boolean, fileInfo: FileInfoTotal) {
+    if (value) {
+      this.selectedFileList.push(fileInfo);
+    } else {
+      this.selectedFileList = this.selectedFileList.filter(
+        info => info.info.seq !== fileInfo.info.seq
+      );
+    }
+  }
+  onClickRow(row: FileInfoTotal) {
+    this.selectedFile = row;
+  }
 }
--- 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/layouts/messenger/messenger.layout.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
@ -22,7 +22,13 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { MatCheckboxModule } from '@angular/material';
+import {
+  MatCheckboxModule,
+  MatTableModule,
+  MatPaginatorModule,
+  MatRippleModule,
+  MatSortModule,
+} from '@angular/material';
 import { MatListModule } from '@angular/material/list';
 import { MatChipsModule } from '@angular/material/chips';

@ -70,6 +76,10 @@ import { DIALOGS } from './dialogs';
    MatCheckboxModule,
    MatRadioModule,
    MatSelectModule,
+    MatTableModule,
+    MatSortModule,
+    MatPaginatorModule,
+    MatRippleModule,

    PerfectScrollbarModule,

@ -80,10 +90,10 @@ import { DIALOGS } from './dialogs';
    UCapUiGroupModule,
    UCapUiOrganizationModule,

-    AppCommonLayoutModule
+    AppCommonLayoutModule,
  ],
  exports: [...COMPONENTS, ...DIALOGS],
  declarations: [...COMPONENTS, ...DIALOGS],
-  entryComponents: [...DIALOGS]
+  entryComponents: [...DIALOGS],
 })
 export class AppMessengerLayoutModule {}
--- 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',
 }
--- a/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.spec.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.spec.ts
@ -1,11 +0,0 @@
-/* tslint:disable:no-unused-variable */
-
-import { TestBed, async } from '@angular/core/testing';
-import { DatesPipe } from './dates.pipe';
-
-describe('Pipe: Datese', () => {
-  it('create an instance', () => {
-    let pipe = new DatesPipe();
-    expect(pipe).toBeTruthy();
-  });
-});
--- a/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts
@ -2,7 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 import { StringUtil } from '../utils/string.util';

@Pipe({
-  name: 'dateToStringChatList'
+  name: 'dateToStringChatList',
 })
 export class DateToStringForChatRoomListPipe implements PipeTransform {
  transform(value: any): string {
@ -36,3 +36,18 @@ export class DateToStringForChatRoomListPipe implements PipeTransform {
    }
  }
 }
+
+@Pipe({
+  name: 'dateToStringFormat',
+})
+export class DateToStringFormatPipe implements PipeTransform {
+  transform(value: any, format?: string): string {
+    const date = new Date(value.toString());
+
+    if (!!format) {
+      return StringUtil.dateFormat(date, format);
+    } else {
+      return StringUtil.dateFormat(date, 'YYYY.MM.DD');
+    }
+  }
+}
--- a/projects/ucap-webmessenger-ui/src/lib/pipes/linefeed.pipe.spec.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/pipes/linefeed.pipe.spec.ts
@ -1,11 +0,0 @@
-/* tslint:disable:no-unused-variable */
-
-import { TestBed, async } from '@angular/core/testing';
-import { LinefeedPipe } from './linefeed.pipe';
-
-describe('Pipe: Linefeede', () => {
-  it('create an instance', () => {
-    let pipe = new LinefeedPipe();
-    expect(pipe).toBeTruthy();
-  });
-});
--- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
@ -39,7 +39,10 @@ import { ConfirmDialogComponent } from './dialogs/confirm.dialog.component';

 import { BytesPipe } from './pipes/bytes.pipe';
 import { LinefeedToHtmlPipe, HtmlToLinefeedPipe } from './pipes/linefeed.pipe';
-import { DateToStringForChatRoomListPipe } from './pipes/dates.pipe';
+import {
+  DateToStringForChatRoomListPipe,
+  DateToStringFormatPipe,
+} from './pipes/dates.pipe';
 import { SecondsToMinutesPipe } from './pipes/seconds-to-minutes.pipe';

 const COMPONENTS = [
@ -51,26 +54,27 @@ const COMPONENTS = [
  DocumentViewerComponent,
  ImageViewerComponent,
  SoundViewerComponent,
-  VideoViewerComponent
+  VideoViewerComponent,
 ];
 const DIALOGS = [AlertDialogComponent, ConfirmDialogComponent];
 const DIRECTIVES = [
  ClickOutsideDirective,
  FileUploadForDirective,
-  ImageDirective
+  ImageDirective,
 ];
 const PIPES = [
  BytesPipe,
  LinefeedToHtmlPipe,
  HtmlToLinefeedPipe,
  DateToStringForChatRoomListPipe,
-  SecondsToMinutesPipe
+  DateToStringFormatPipe,
+  SecondsToMinutesPipe,
 ];
 const SERVICES = [
  BottomSheetService,
  ClipboardService,
  DialogService,
-  SnackBarService
+  SnackBarService,
 ];

@NgModule({
@ -86,17 +90,17 @@ const SERVICES = [
    MatSnackBarModule,
    MatToolbarModule,
    MatTooltipModule,
-    DragDropModule
+    DragDropModule,
  ],
  exports: [...COMPONENTS, ...DIRECTIVES, ...PIPES],
  declarations: [...COMPONENTS, ...DIALOGS, ...DIRECTIVES, ...PIPES],
-  entryComponents: [...DIALOGS]
+  entryComponents: [...DIALOGS],
 })
 export class UCapUiModule {
  public static forRoot(): ModuleWithProviders<UCapUiModule> {
    return {
      ngModule: UCapUiModule,
-      providers: [...SERVICES]
+      providers: [...SERVICES],
    };
  }
 }
--- a/projects/ucap-webmessenger-ui/src/lib/utils/string.util.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/utils/string.util.ts
@ -2,7 +2,7 @@ import {
  EventType,
  EventJson,
  FileEventJson,
-  MassTextEventJson
+  MassTextEventJson,
 } from '@ucap-webmessenger/protocol-event';
 import { FileType } from '@ucap-webmessenger/protocol-file';

@ -79,7 +79,7 @@ export class StringUtil {
      '수요일',
      '목요일',
      '금요일',
-      '토요일'
+      '토요일',
    ];

    const weekKorShortName = ['일', '월', '화', '수', '목', '금', '토'];
@ -91,56 +91,62 @@ export class StringUtil {
      'Wednesday',
      'Thursday',
      'Friday',
-      'Saturday'
+      'Saturday',
    ];

    const weekEngShortName = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

-    return f.replace(/(yyyy|yy|MM|dd|KS|KL|ES|EL|HH|hh|mm|ss|a\/p)/gi, $1 => {
-      switch ($1) {
-        case 'yyyy':
-          return date.getFullYear().toString(); // 년 (4자리)
+    return f.replace(
+      /(YYYY|yyyy|YY|yy|MM|DD|dd|KS|KL|ES|EL|HH|hh|mm|ss|a\/p)/gi,
+      $1 => {
+        switch ($1) {
+          case 'YYYY':
+          case 'yyyy':
+            return date.getFullYear().toString(); // 년 (4자리)

-        case 'yy':
-          return StringUtil.zeroFill(date.getFullYear() % 1000, 2); // 년 (2자리)
+          case 'YY':
+          case 'yy':
+            return StringUtil.zeroFill(date.getFullYear() % 1000, 2); // 년 (2자리)

-        case 'MM':
-          return StringUtil.zeroFill(date.getMonth() + 1, 2); // 월 (2자리)
+          case 'MM':
+            return StringUtil.zeroFill(date.getMonth() + 1, 2); // 월 (2자리)

-        case 'dd':
-          return StringUtil.zeroFill(date.getDate(), 2); // 일 (2자리)
+          case 'DD':
+          case 'dd':
+            return StringUtil.zeroFill(date.getDate(), 2); // 일 (2자리)

-        case 'KS':
-          return weekKorShortName[date.getDay()]; // 요일 (짧은 한글)
+          case 'KS':
+            return weekKorShortName[date.getDay()]; // 요일 (짧은 한글)

-        case 'KL':
-          return weekKorName[date.getDay()]; // 요일 (긴 한글)
+          case 'KL':
+            return weekKorName[date.getDay()]; // 요일 (긴 한글)

-        case 'ES':
-          return weekEngShortName[date.getDay()]; // 요일 (짧은 영어)
+          case 'ES':
+            return weekEngShortName[date.getDay()]; // 요일 (짧은 영어)

-        case 'EL':
-          return weekEngName[date.getDay()]; // 요일 (긴 영어)
+          case 'EL':
+            return weekEngName[date.getDay()]; // 요일 (긴 영어)

-        case 'HH':
-          return StringUtil.zeroFill(date.getHours(), 2); // 시간 (24시간 기준, 2자리)
+          case 'HH':
+            return StringUtil.zeroFill(date.getHours(), 2); // 시간 (24시간 기준, 2자리)

-        case 'hh':
-          return StringUtil.zeroFill(date.getHours() % 12, 2); // 시간 (12시간 기준, 2자리)
+          case 'hh':
+            return StringUtil.zeroFill(date.getHours() % 12, 2); // 시간 (12시간 기준, 2자리)

-        case 'mm':
-          return StringUtil.zeroFill(date.getMinutes(), 2); // 분 (2자리)
+          case 'mm':
+            return StringUtil.zeroFill(date.getMinutes(), 2); // 분 (2자리)

-        case 'ss':
-          return StringUtil.zeroFill(date.getSeconds(), 2); // 초 (2자리)
+          case 'ss':
+            return StringUtil.zeroFill(date.getSeconds(), 2); // 초 (2자리)

-        case 'a/p':
-          return date.getHours() < 12 ? '오전' : '오후'; // 오전/오후 구분
+          case 'a/p':
+            return date.getHours() < 12 ? '오전' : '오후'; // 오전/오후 구분

-        default:
-          return $1;
+          default:
+            return $1;
+        }
      }
-    });
+    );
  }

  public static convertFinalEventMessage(