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

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>

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,
                 })
               );
             }

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>

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);
+  }
 }

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>

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;
+  }
+}

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 {
+export class AlbumBoxComponent implements OnInit, OnDestroy {
-  constructor() {}
+  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);
+  }
 }

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>

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;
+  }
+}

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 {
+export class FileBoxComponent implements OnInit, OnDestroy {
-  constructor() {}
+  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;
+  }
 }

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,
+];

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>

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;
+  }
+}

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();
+  });
+});

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,
+          })
+        );
+      }
+    }
+  }
+}

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 {}

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>

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',
 }

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();
-  });
-});

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');
+    }
+  }
+}

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();
-  });
-});

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],
     };
   }
 }

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,22 +91,27 @@ 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 => {
+    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':
           case 'yy':
             return StringUtil.zeroFill(date.getFullYear() % 1000, 2); // 년 (2자리)
 
           case 'MM':
             return StringUtil.zeroFill(date.getMonth() + 1, 2); // 월 (2자리)
 
+          case 'DD':
           case 'dd':
             return StringUtil.zeroFill(date.getDate(), 2); // 일 (2자리)
 
@@ -140,7 +145,8 @@ export class StringUtil {
           default:
             return $1;
         }
-    });
+      }
+    );
   }
 
   public static convertFinalEventMessage(