From c6dcdc6f45d6f62cc8e9b0fac646bd190cbd5877 Mon Sep 17 00:00:00 2001
From: leejinho <lilis7575@gmail.com>
Date: Mon, 11 Nov 2019 14:31:26 +0900
Subject: [PATCH] =?UTF-8?q?=ED=8C=8C=EC=9D=BC=ED=95=A8,=20=EC=95=A8?=
 =?UTF-8?q?=EB=B2=94=ED=95=A8=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=88=98?=
 =?UTF-8?q?=EC=A7=91=20=EB=B0=8F=20drawer=20=EA=B8=B0=EC=B4=88=EC=9E=91?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/layouts/messenger/components/index.ts |  6 +-
 .../components/messages.component.html        | 26 +++--
 .../components/messages.component.ts          | 27 ++++-
 .../components/right-drawer.component.html    |  7 ++
 .../components/right-drawer.component.scss    |  0
 .../components/right-drawer.component.spec.ts | 25 +++++
 .../components/right-drawer.component.ts      | 18 ++++
 .../right-drawer/album-box.component.html     |  1 +
 .../right-drawer/album-box.component.scss     |  0
 .../right-drawer/album-box.component.spec.ts  | 25 +++++
 .../right-drawer/album-box.component.ts       | 12 +++
 .../right-drawer/file-box.component.html      |  1 +
 .../right-drawer/file-box.component.scss      |  0
 .../right-drawer/file-box.component.spec.ts   | 25 +++++
 .../right-drawer/file-box.component.ts        | 12 +++
 .../components/right-drawer/index.ts          |  4 +
 .../components/main.page.component.html       | 19 ++--
 .../components/main.page.component.ts         | 35 ++++++-
 .../src/app/store/messenger/chat/actions.ts   | 10 ++
 .../src/app/store/messenger/chat/effects.ts   |  4 +-
 .../src/app/store/messenger/chat/reducers.ts  | 17 +++-
 .../src/app/store/messenger/chat/state.ts     |  9 +-
 .../src/app/store/messenger/event/actions.ts  | 33 +++++--
 .../src/app/store/messenger/event/effects.ts  | 76 +++++++++++++-
 .../src/app/store/messenger/event/reducers.ts | 34 ++++++-
 .../src/app/store/messenger/event/state.ts    | 98 ++++++++++++++++++-
 .../src/app/types/index.ts                    |  1 +
 .../src/app/types/right-drawer.type.ts        |  4 +
 .../src/lib/types/file.type.ts                | 12 +--
 29 files changed, 503 insertions(+), 38 deletions(-)
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.spec.ts
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.ts
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.spec.ts
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.spec.ts
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.ts
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/index.ts
 create mode 100644 projects/ucap-webmessenger-app/src/app/types/right-drawer.type.ts

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/index.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/index.ts
index 53ac688b..17ab1479 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/index.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/index.ts
@@ -2,14 +2,18 @@ import { IntroComponent } from './intro.component';
 import { LeftSideComponent } from './left-side.component';
 import { MessagesComponent } from './messages.component';
 import { RightSideComponent } from './right-side.component';
+import { RightDrawerComponent } from './right-drawer.component';
 
 import { LEFT_SIDENAV_COMPONENTS } from './left-sidenav';
+import { RIGHT_DRAWER_COMPONENTS } from './right-drawer';
 
 export const COMPONENTS = [
   IntroComponent,
   LeftSideComponent,
   MessagesComponent,
   RightSideComponent,
+  RightDrawerComponent,
 
-  ...LEFT_SIDENAV_COMPONENTS
+  ...LEFT_SIDENAV_COMPONENTS,
+  ...RIGHT_DRAWER_COMPONENTS
 ];
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
index 55021b72..0c6e4b26 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
@@ -11,15 +11,24 @@
           class="responsive-chats-button"
         >
           <!--<mat-icon>chat</mat-icon>-->
-          <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="currentColor"
-            stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
-
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="30"
+            height="30"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="butt"
+            stroke-linejoin="round"
+          >
             <g>
-              <path d="M3,21.8c-0.2,0-0.4-0.1-0.5-0.2c-0.2-0.2-0.3-0.5-0.2-0.8l1.8-5.4c-0.6-1.2-0.8-2.5-0.8-3.9c0-3.5,2-6.7,5.1-8.3
+              <path
+                d="M3,21.8c-0.2,0-0.4-0.1-0.5-0.2c-0.2-0.2-0.3-0.5-0.2-0.8l1.8-5.4c-0.6-1.2-0.8-2.5-0.8-3.9c0-3.5,2-6.7,5.1-8.3
                       		c1.3-0.6,2.7-0.9,4.1-1H13c4.7,0.3,8.5,4,8.7,8.7l0,0.5c0,1.4-0.3,2.9-1,4.1c-1.6,3.2-4.7,5.1-8.3,5.1c0,0,0,0,0,0
                       		c-1.3,0-2.6-0.3-3.8-0.8l-5.4,1.8C3.2,21.7,3.1,21.8,3,21.8z M12.5,3.8C11.3,3.8,10.1,4,9,4.6c-2.6,1.3-4.3,4-4.3,6.9
                       		c0,1.2,0.3,2.4,0.8,3.5c0.1,0.2,0.1,0.4,0,0.6l-1.4,4.3l4.3-1.4c0.2-0.1,0.4,0,0.6,0c1.1,0.5,2.3,0.8,3.5,0.8c3,0,5.6-1.6,6.9-4.3
-                      		c0.5-1.1,0.8-2.3,0.8-3.5c0,0,0,0,0,0V11C20,7.1,16.9,4,13,3.7L12.5,3.8C12.5,3.8,12.5,3.8,12.5,3.8z" />
+                      		c0.5-1.1,0.8-2.3,0.8-3.5c0,0,0,0,0,0V11C20,7.1,16.9,4,13,3.7L12.5,3.8C12.5,3.8,12.5,3.8,12.5,3.8z"
+              />
             </g>
             <g>
               <circle cx="9" cy="12" r="1" />
@@ -27,7 +36,6 @@
               <circle cx="16" cy="12" r="1" />
             </g>
           </svg>
-
         </button>
         <!-- / RESPONSIVE CHATS BUTTON-->
         <button
@@ -78,6 +86,12 @@
         </button>
 
         <mat-menu #contactMenu="matMenu" [hasBackdrop]="false">
+          <button mat-menu-item (click)="onClickContextMenu('OPEN_ALBUM_LIST')">
+            앨범함
+          </button>
+          <button mat-menu-item (click)="onClickContextMenu('OPEN_FILE_LIST')">
+            파일함
+          </button>
           <button mat-menu-item (click)="onClickContextMenu('ADD_MEMBER')">
             대화상대추가
           </button>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
index 6bcfd2b7..2c3e2a0a 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
@@ -46,7 +46,8 @@ import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import {
   EnvironmentsInfo,
   KEY_ENVIRONMENTS_INFO,
-  UserSelectDialogType
+  UserSelectDialogType,
+  RightDrawer
 } from '@app/types';
 import { RoomInfo, UserInfo, RoomType } from '@ucap-webmessenger/protocol-room';
 import { tap, take, map, catchError } from 'rxjs/operators';
@@ -85,7 +86,11 @@ import {
   EditChatRoomDialogResult,
   EditChatRoomDialogData
 } from '../dialogs/chat/edit-chat-room.dialog.component';
-import { SelectGroupDialogComponent, SelectGroupDialogResult, SelectGroupDialogData } from '../dialogs/group/select-group.dialog.component';
+import {
+  SelectGroupDialogComponent,
+  SelectGroupDialogResult,
+  SelectGroupDialogData
+} from '../dialogs/group/select-group.dialog.component';
 import { GroupDetailData } from '@ucap-webmessenger/protocol-sync';
 
 @Component({
@@ -797,6 +802,24 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
 
   async onClickContextMenu(menuType: string) {
     switch (menuType) {
+      case 'OPEN_ALBUM_LIST':
+        {
+          this.store.dispatch(
+            ChatStore.selectedRightDrawer({
+              req: RightDrawer.AlbumBox
+            })
+          );
+        }
+        break;
+      case 'OPEN_FILE_LIST':
+        {
+          this.store.dispatch(
+            ChatStore.selectedRightDrawer({
+              req: RightDrawer.FileBox
+            })
+          );
+        }
+        break;
       case 'ADD_MEMBER':
         {
           const result = await this.dialogService.open<
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html
new file mode 100644
index 00000000..0337b70b
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html
@@ -0,0 +1,7 @@
+<ng-container *ngIf="selectedRightDrawer" [ngSwitch]="selectedRightDrawer">
+  <app-layout-chat-right-drawer-file-box *ngSwitchCase="RightDrawer.FileBox">
+  </app-layout-chat-right-drawer-file-box>
+
+  <app-layout-chat-right-drawer-album-box *ngSwitchCase="RightDrawer.AlbumBox">
+  </app-layout-chat-right-drawer-album-box>
+</ng-container>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.spec.ts
new file mode 100644
index 00000000..0db929d6
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RightDrawerComponent } from './right-drawer.component';
+
+describe('RightDrawerComponent', () => {
+  let component: RightDrawerComponent;
+  let fixture: ComponentFixture<RightDrawerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RightDrawerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RightDrawerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.ts
new file mode 100644
index 00000000..0b0f4893
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { RightDrawer } from '@app/types';
+
+@Component({
+  selector: 'app-layout-messenger-right-drawer',
+  templateUrl: './right-drawer.component.html',
+  styleUrls: ['./right-drawer.component.scss']
+})
+export class RightDrawerComponent implements OnInit {
+  @Input()
+  selectedRightDrawer: RightDrawer;
+
+  RightDrawer = RightDrawer;
+
+  constructor() {}
+
+  ngOnInit() {}
+}
diff --git 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
new file mode 100644
index 00000000..26983003
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
@@ -0,0 +1 @@
+<p>album-box works!</p>
diff --git 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
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.spec.ts
new file mode 100644
index 00000000..e3f18dc0
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlbumBoxComponent } from './album-box.component';
+
+describe('AlbumBoxComponent', () => {
+  let component: AlbumBoxComponent;
+  let fixture: ComponentFixture<AlbumBoxComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AlbumBoxComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlbumBoxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts
new file mode 100644
index 00000000..e4737472
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-layout-chat-right-drawer-album-box',
+  templateUrl: './album-box.component.html',
+  styleUrls: ['./album-box.component.scss']
+})
+export class AlbumBoxComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}
diff --git 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
new file mode 100644
index 00000000..e361c50b
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html
@@ -0,0 +1 @@
+<p>file-box works!</p>
diff --git 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
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.spec.ts
new file mode 100644
index 00000000..2f2d4ef3
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileBoxComponent } from './file-box.component';
+
+describe('FileBoxComponent', () => {
+  let component: FileBoxComponent;
+  let fixture: ComponentFixture<FileBoxComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FileBoxComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FileBoxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.ts
new file mode 100644
index 00000000..dd06f32f
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-layout-chat-right-drawer-file-box',
+  templateUrl: './file-box.component.html',
+  styleUrls: ['./file-box.component.scss']
+})
+export class FileBoxComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/index.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/index.ts
new file mode 100644
index 00000000..dc7431d2
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/index.ts
@@ -0,0 +1,4 @@
+import { FileBoxComponent } from './file-box.component';
+import { AlbumBoxComponent } from './album-box.component';
+
+export const RIGHT_DRAWER_COMPONENTS = [FileBoxComponent, AlbumBoxComponent];
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
index 72e84557..dff20e2b 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
@@ -5,12 +5,11 @@
     ></app-layout-messenger-left-side>
   </div>
   <mat-drawer-container class="contents" autosize>
-    <mat-drawer #drawer mode="over">
+    <!-- <mat-drawer #drawer mode="over">
       <p>Auto-resizing sidenav</p>
-    </mat-drawer>
+    </mat-drawer> -->
     <div class="messages">
       <app-layout-messenger-intro
-        (click)="drawer.toggle()"
         *ngIf="!(this.selectedChat$ | async)"
       ></app-layout-messenger-intro>
       <!-- <app-layout-messenger-intro
@@ -21,9 +20,17 @@
         (openProfile)="onClickOpenProfile($event)"
       ></app-layout-messenger-messages>
     </div>
-    <!-- <mat-drawer #drawer mode="side" position="end">
-      <p>Auto-resizing sidenav</p>
-    </mat-drawer> -->
+    <mat-drawer
+      #rightDrawer
+      mode="side"
+      position="end"
+      (openedChange)="onOpenedChange($event)"
+    >
+      <app-layout-messenger-right-drawer
+        [selectedRightDrawer]="selectedRightDrawer$ | async"
+      >
+      </app-layout-messenger-right-drawer>
+    </mat-drawer>
   </mat-drawer-container>
 
   <!-- <div class="right-side">
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
index 6eece5bd..65d424a8 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
@@ -1,9 +1,10 @@
 import { map, tap } from 'rxjs/operators';
-import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
+import { Component, OnInit, Inject, OnDestroy, ViewChild } from '@angular/core';
 
 import { Store, select } from '@ngrx/store';
 
 import * as AppSotre from '@app/store';
+import * as ChatStore from '@app/store/messenger/chat';
 import { Observable, Subscription } from 'rxjs';
 import {
   WindowIdle,
@@ -25,6 +26,7 @@ import {
   ProfileDialogData,
   ProfileDialogResult
 } from '@app/layouts/messenger/dialogs/profile/profile.dialog.component';
+import { MatSidenav, MatDrawer } from '@angular/material';
 
 @Component({
   selector: 'app-page-messenger-main',
@@ -33,8 +35,11 @@ import {
 })
 export class MainPageComponent implements OnInit {
   selectedChat$: Observable<string | null>;
+  selectedRightDrawer$: Observable<string | null>;
   idleStateChangedSubscription: Subscription;
 
+  @ViewChild('rightDrawer', { static: true }) rightDrawer: MatDrawer;
+
   constructor(
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
     private store: Store<any>,
@@ -44,7 +49,23 @@ export class MainPageComponent implements OnInit {
 
   ngOnInit(): void {
     this.selectedChat$ = this.store.pipe(
-      select(AppSotre.MessengerSelector.ChatSelector.selectedRoom)
+      select(AppSotre.MessengerSelector.ChatSelector.selectedRoom),
+      tap(selectedRoom => {
+        if (!selectedRoom) {
+          this.rightDrawer.close();
+        }
+        return selectedRoom;
+      })
+    );
+    this.selectedRightDrawer$ = this.store.pipe(
+      select(AppSotre.MessengerSelector.ChatSelector.selectedRightDrawer),
+      tap(selectedRightDrawer => {
+        if (!!selectedRightDrawer) {
+          this.rightDrawer.open();
+        } else {
+          this.rightDrawer.close();
+        }
+      })
     );
 
     this.idleStateChangedSubscription = this.nativeService
@@ -75,6 +96,16 @@ export class MainPageComponent implements OnInit {
     }
   }
 
+  onOpenedChange(event: boolean) {
+    if (!event) {
+      this.store.dispatch(
+        ChatStore.selectedRightDrawer({
+          req: null
+        })
+      );
+    }
+  }
+
   onClickOpenProfile(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
     this.dialogService.open<
       ProfileDialogComponent,
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/chat/actions.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/chat/actions.ts
index 8f9fa8e2..cc3f7e8e 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/chat/actions.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/chat/actions.ts
@@ -4,6 +4,7 @@ import {
   MassTalkDownloadRequest,
   MassTalkDownloadResponse
 } from '@ucap-webmessenger/api-common';
+import { RightDrawer } from '@app/types';
 
 export const selectedRoom = createAction(
   '[Messenger::Chat] selectedRoom',
@@ -43,3 +44,12 @@ export const openRoom = createAction(
   '[Messenger::Chat] Open Room',
   props<{ userSeqList: number[]; isTimeRoom?: boolean }>()
 );
+
+export const selectedRightDrawer = createAction(
+  '[Messenger::Chat] Selected Right Drawer',
+  props<{ req: RightDrawer }>()
+);
+export const clearRightDrawer = createAction(
+  '[Messenger::Chat] Clear Right Drawer',
+  props()
+);
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/chat/effects.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/chat/effects.ts
index cd310079..0f453a30 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/chat/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/chat/effects.ts
@@ -10,7 +10,8 @@ import {
   selectedMassDetail,
   massTalkDownload,
   massTalkDownloadFailure,
-  massTalkDownloadSuccess
+  massTalkDownloadSuccess,
+  clearSelectedRoom
 } from './actions';
 import { of } from 'rxjs';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
@@ -24,6 +25,7 @@ import {
   AlertDialogComponent,
   AlertDialogData
 } from '@ucap-webmessenger/ui';
+import { initialState } from '../event';
 
 @Injectable()
 export class Effects {
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/chat/reducers.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/chat/reducers.ts
index 0fcb219b..7dbb464e 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/chat/reducers.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/chat/reducers.ts
@@ -6,7 +6,9 @@ import {
   massTalkDownloadFailure,
   massTalkDownload,
   massTalkDownloadSuccess,
-  clearSelectedRoom
+  clearSelectedRoom,
+  selectedRightDrawer,
+  clearRightDrawer
 } from './actions';
 
 export const reducer = createReducer(
@@ -49,5 +51,18 @@ export const reducer = createReducer(
       ...state,
       massDetailProcessing: false
     };
+  }),
+
+  on(selectedRightDrawer, (state, action) => {
+    return {
+      ...state,
+      selectedRightDrawer: action.req
+    };
+  }),
+  on(clearRightDrawer, (state, action) => {
+    return {
+      ...state,
+      selectedRightDrawer: null
+    };
   })
 );
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/chat/state.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/chat/state.ts
index 42bd9edd..aefa6492 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/chat/state.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/chat/state.ts
@@ -5,12 +5,15 @@ export interface State {
 
   selectedMassDetail: number | null;
   massDetailProcessing: boolean;
+
+  selectedRightDrawer: string | null;
 }
 
 export const initialState: State = {
   selectedRoom: null,
   selectedMassDetail: null,
-  massDetailProcessing: false
+  massDetailProcessing: false,
+  selectedRightDrawer: ''
 };
 
 export function selectors<S>(selector: Selector<any, State>) {
@@ -22,6 +25,10 @@ export function selectors<S>(selector: Selector<any, State>) {
     selectedMassDetail: createSelector(
       selector,
       (state: State) => state.selectedMassDetail
+    ),
+    selectedRightDrawer: createSelector(
+      selector,
+      (state: State) => state.selectedRightDrawer
     )
   };
 }
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts
index 46c214fb..19830be0 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts
@@ -16,12 +16,17 @@ import {
   CancelResponse,
   EventJson
 } from '@ucap-webmessenger/protocol-event';
+import {
+  InfoRequest as FileInfoRequest,
+  InfoResponse as FileInfoResponse,
+  FileDownloadInfo,
+  FileInfo
+} from '@ucap-webmessenger/protocol-file';
 
 export const info = createAction(
   '[Messenger::Event] Info',
   props<InfoRequest>()
 );
-
 export const infoSuccess = createAction(
   '[Messenger::Event] Info Success',
   props<{
@@ -29,6 +34,27 @@ export const infoSuccess = createAction(
     res: InfoResponse;
   }>()
 );
+export const infoFailure = createAction(
+  '[Messenger::Event] Info Failure',
+  props<{ error: any }>()
+);
+
+export const fileInfo = createAction(
+  '[Messenger::Event] File Info',
+  props<{ req: FileInfoRequest }>()
+);
+export const fileInfoSuccess = createAction(
+  '[Messenger::Event] File Info Success',
+  props<{
+    fileInfoList: FileInfo[];
+    fileInfoCheckList: FileDownloadInfo[];
+    res: FileInfoResponse;
+  }>()
+);
+export const fileInfoFailure = createAction(
+  '[Messenger::Event] File Info Failure',
+  props<{ error: any }>()
+);
 
 export const infoMoreSuccess = createAction(
   '[Messenger::Event] Info More Success',
@@ -43,11 +69,6 @@ export const infoIntervalClear = createAction(
   props()
 );
 
-export const infoFailure = createAction(
-  '[Messenger::Event] Info Failure',
-  props<{ error: any }>()
-);
-
 export const newInfo = createAction(
   '[Messenger::Event] New Info',
   props<{
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
index f83dc4c8..091e8d0a 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
@@ -70,7 +70,10 @@ import {
   sendMass,
   sendMassFailure,
   infoMoreSuccess,
-  infoIntervalClear
+  infoIntervalClear,
+  fileInfo,
+  fileInfoSuccess,
+  fileInfoFailure
 } from './actions';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import {
@@ -85,6 +88,18 @@ import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
 import { StatusCode } from '@ucap-webmessenger/api';
 import { CONST } from '@ucap-webmessenger/core';
+import {
+  FileProtocolService,
+  SSVC_TYPE_FILE_INFO_DATA,
+  SSVC_TYPE_FILE_INFO_CHECK_DATA,
+  SSVC_TYPE_FILE_INFO_RES,
+  FileInfo,
+  FileDownloadInfo,
+  InfoData as FileInfoData,
+  InfoCheckData as FileInfoCheckData,
+  InfoResponse as FileInfoResponse,
+  FileType
+} from '@ucap-webmessenger/protocol-file';
 
 @Injectable()
 export class Effects {
@@ -136,7 +151,8 @@ export class Effects {
                     }
 
                     if (req.baseSeq === 0) {
-                      // 최초 이벤트 목록 조회시 SSVC_TYPE_EVENT_READ_REQ 수행.
+                      // 최초 이벤트 목록 조회
+                      // SSVC_TYPE_EVENT_READ_REQ 수행.
                       const maxSeq = Math.max.apply(
                         Math,
                         infoList.map(v => v.seq)
@@ -147,6 +163,17 @@ export class Effects {
                           lastReadSeq: Number(maxSeq)
                         })
                       );
+
+                      // File 정보 수집.
+                      this.store.dispatch(
+                        fileInfo({
+                          req: {
+                            roomSeq: req.roomSeq,
+                            // { 파일타입 } cf) I : 이미지 V: 동영상 F: 파일 "" 빈값이면 모든 타입을 내려줌
+                            type: FileType.All
+                          }
+                        })
+                      );
                     }
                   }
                   break;
@@ -160,6 +187,50 @@ export class Effects {
     { dispatch: false }
   );
 
+  fileInfo$ = createEffect(
+    () => {
+      let fileInfoList: FileInfo[];
+      let fileInfoCheckList: FileDownloadInfo[];
+
+      return this.actions$.pipe(
+        ofType(fileInfo),
+        tap(() => {
+          fileInfoList = [];
+          fileInfoCheckList = [];
+        }),
+        switchMap(action => {
+          return this.fileProtocolService.info(action.req).pipe(
+            map(res => {
+              switch (res.SSVC_TYPE) {
+                case SSVC_TYPE_FILE_INFO_DATA:
+                  fileInfoList.push(...(res as FileInfoData).fileInfos);
+                  break;
+                case SSVC_TYPE_FILE_INFO_CHECK_DATA:
+                  fileInfoCheckList.push(
+                    ...(res as FileInfoCheckData).fileDownloadInfos
+                  );
+                  break;
+                case SSVC_TYPE_FILE_INFO_RES:
+                  {
+                    this.store.dispatch(
+                      fileInfoSuccess({
+                        fileInfoList,
+                        fileInfoCheckList,
+                        res: res as FileInfoResponse
+                      })
+                    );
+                  }
+                  break;
+              }
+            }),
+            catchError(error => of(fileInfoFailure({ error })))
+          );
+        })
+      );
+    },
+    { dispatch: false }
+  );
+
   infoIntervalClear$ = createEffect(
     () => {
       return this.actions$.pipe(
@@ -584,6 +655,7 @@ export class Effects {
     private store: Store<any>,
     private commonApiService: CommonApiService,
     private eventProtocolService: EventProtocolService,
+    private fileProtocolService: FileProtocolService,
     private roomProtocolService: RoomProtocolService,
     private sessionStorageService: SessionStorageService,
     private logger: NGXLogger
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts
index f336d5ff..a6706e54 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts
@@ -1,5 +1,10 @@
 import { createReducer, on } from '@ngrx/store';
-import { initialState, adapterInfoList } from './state';
+import {
+  initialState,
+  adapterInfoList,
+  adapterFileInfoList,
+  adapterFileInfoCheckList
+} from './state';
 import {
   infoSuccess,
   appendInfoList,
@@ -7,9 +12,11 @@ import {
   infoFailure,
   recallInfoList,
   delInfoList,
-  infoMoreSuccess
+  infoMoreSuccess,
+  fileInfoSuccess
 } from './actions';
 import * as AuthenticationStore from '@app/store/account/authentication';
+import * as ChatStore from '@app/store/messenger/chat';
 import { Info, EventType, EventJson } from '@ucap-webmessenger/protocol-event';
 import { CONST } from '@ucap-webmessenger/core';
 
@@ -52,7 +59,6 @@ export const reducer = createReducer(
           : false
     };
   }),
-
   on(infoFailure, (state, action) => {
     return {
       ...state,
@@ -60,6 +66,23 @@ export const reducer = createReducer(
     };
   }),
 
+  on(fileInfoSuccess, (state, action) => {
+    return {
+      ...state,
+      fileInfoList: adapterFileInfoList.addAll(action.fileInfoList, {
+        ...state.fileInfoList
+      }),
+      fileInfoCheckList: adapterFileInfoCheckList.addAll(
+        action.fileInfoCheckList,
+        {
+          ...state.fileInfoCheckList
+        }
+      ),
+      fileInfoListProcessing: false,
+      fileInfoSyncDate: new Date().toString()
+    };
+  }),
+
   on(appendInfoList, (state, action) => {
     const eventinfo = action.info;
 
@@ -109,5 +132,10 @@ export const reducer = createReducer(
     return {
       ...initialState
     };
+  }),
+  on(ChatStore.clearSelectedRoom, (state, action) => {
+    return {
+      ...initialState
+    };
   })
 );
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/state.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/state.ts
index c57dac3a..53d1c3d7 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/state.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/state.ts
@@ -5,14 +5,22 @@ import {
   EventJson
 } from '@ucap-webmessenger/protocol-event';
 import { EntityState, createEntityAdapter } from '@ngrx/entity';
+import { FileInfo, FileDownloadInfo } from '@ucap-webmessenger/protocol-file';
 
 export interface InfoListState extends EntityState<Info<EventJson>> {}
+export interface FileInfoListState extends EntityState<FileInfo> {}
+export interface FileInfoCheckListState extends EntityState<FileDownloadInfo> {}
 
 export interface State {
   infoListProcessing: boolean;
   infoList: InfoListState;
   infoStatus: InfoResponse | null;
   remainInfo: boolean;
+
+  fileInfoListProcessing: boolean;
+  fileInfoList: FileInfoListState;
+  fileInfoCheckList: FileInfoCheckListState;
+  fileInfoSyncDate: string;
 }
 
 export const adapterInfoList = createEntityAdapter<Info<EventJson>>({
@@ -21,14 +29,37 @@ export const adapterInfoList = createEntityAdapter<Info<EventJson>>({
     return a.seq - b.seq;
   }
 });
+export const adapterFileInfoList = createEntityAdapter<FileInfo>({
+  selectId: info => info.seq,
+  sortComparer: (a, b) => {
+    return b.seq - a.seq;
+  }
+});
+export const adapterFileInfoCheckList = createEntityAdapter<FileDownloadInfo>({
+  selectId: info => info.seq,
+  sortComparer: (a, b) => {
+    return b.seq - a.seq;
+  }
+});
 
 const infoListInitialState: InfoListState = adapterInfoList.getInitialState({});
+const fileInfoListInitialState: FileInfoListState = adapterFileInfoList.getInitialState(
+  {}
+);
+const fileInfoCheckListInitialState: FileInfoCheckListState = adapterFileInfoCheckList.getInitialState(
+  {}
+);
 
 export const initialState: State = {
   infoListProcessing: false,
   infoList: infoListInitialState,
   infoStatus: null,
-  remainInfo: false
+  remainInfo: false,
+
+  fileInfoListProcessing: false,
+  fileInfoList: fileInfoListInitialState,
+  fileInfoCheckList: fileInfoCheckListInitialState,
+  fileInfoSyncDate: ''
 };
 
 const {
@@ -37,12 +68,32 @@ const {
   selectIds: ngeSelectIdsInfoList,
   selectTotal: ngeSelectTotalInfoList
 } = adapterInfoList.getSelectors();
+const {
+  selectAll: ngeSelectAllFileInfoList,
+  selectEntities: ngeSelectEntitiesFileInfoList,
+  selectIds: ngeSelectIdsFileInfoList,
+  selectTotal: ngeSelectTotalFileInfoList
+} = adapterFileInfoList.getSelectors();
+const {
+  selectAll: ngeSelectAllFileInfoCheckList,
+  selectEntities: ngeSelectEntitiesFileInfoCheckList,
+  selectIds: ngeSelectIdsFileInfoCheckList,
+  selectTotal: ngeSelectTotalFileInfoCheckList
+} = adapterFileInfoCheckList.getSelectors();
 
 export function selectors<S>(selector: Selector<any, State>) {
   const selectInfoList = createSelector(
     selector,
     (state: State) => state.infoList
   );
+  const selectFileInfoList = createSelector(
+    selector,
+    (state: State) => state.fileInfoList
+  );
+  const selectFileInfoCheckList = createSelector(
+    selector,
+    (state: State) => state.fileInfoCheckList
+  );
 
   return {
     infoListProcessing: createSelector(
@@ -75,6 +126,51 @@ export function selectors<S>(selector: Selector<any, State>) {
         selectInfoList,
         ngeSelectEntitiesInfoList,
         (_, entities) => (!!entities ? entities[seq] : undefined)
+      ),
+
+    fileInfoListProcessing: createSelector(
+      selector,
+      (state: State) => state.fileInfoListProcessing
+    ),
+    fileInfoSyncDate: createSelector(
+      selector,
+      (state: State) => state.fileInfoSyncDate
+    ),
+    fileInfoList: createSelector(
+      selector,
+      (state: State) => state.fileInfoList
+    ),
+    fileInfoCheckList: createSelector(
+      selector,
+      (state: State) => state.fileInfoCheckList
+    ),
+    selectAllFileInfoList: createSelector(
+      selectFileInfoList,
+      ngeSelectAllFileInfoList
+    ),
+    selectEntitiesFileInfoList: createSelector(
+      selectFileInfoList,
+      ngeSelectEntitiesFileInfoList
+    ),
+    selectFileInfoList: (seq: number) =>
+      createSelector(
+        selectFileInfoList,
+        ngeSelectEntitiesFileInfoList,
+        (_, entities) => (!!entities ? entities[seq] : undefined)
+      ),
+    selectAllFileInfoCheckList: createSelector(
+      selectFileInfoCheckList,
+      ngeSelectAllFileInfoCheckList
+    ),
+    selectEntitiesFileInfoCheckList: createSelector(
+      selectFileInfoCheckList,
+      ngeSelectEntitiesFileInfoCheckList
+    ),
+    selectFileInfoCheckList: (seq: number) =>
+      createSelector(
+        selectFileInfoCheckList,
+        ngeSelectEntitiesFileInfoCheckList,
+        (_, entities) => (!!entities ? entities[seq] : undefined)
       )
   };
 }
diff --git a/projects/ucap-webmessenger-app/src/app/types/index.ts b/projects/ucap-webmessenger-app/src/app/types/index.ts
index 7deddfe7..672ab428 100644
--- a/projects/ucap-webmessenger-app/src/app/types/index.ts
+++ b/projects/ucap-webmessenger-app/src/app/types/index.ts
@@ -1,3 +1,4 @@
 export * from './environment.type';
 export * from './login-info.type';
 export * from './userselect.dialog.type';
+export * from './right-drawer.type';
diff --git a/projects/ucap-webmessenger-app/src/app/types/right-drawer.type.ts b/projects/ucap-webmessenger-app/src/app/types/right-drawer.type.ts
new file mode 100644
index 00000000..52f5e317
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/types/right-drawer.type.ts
@@ -0,0 +1,4 @@
+export enum RightDrawer {
+  FileBox = 'FILE_BOX',
+  AlbumBox = 'ALBUM_BOX'
+}
diff --git a/projects/ucap-webmessenger-protocol-file/src/lib/types/file.type.ts b/projects/ucap-webmessenger-protocol-file/src/lib/types/file.type.ts
index 109130ff..79628746 100644
--- a/projects/ucap-webmessenger-protocol-file/src/lib/types/file.type.ts
+++ b/projects/ucap-webmessenger-protocol-file/src/lib/types/file.type.ts
@@ -1,12 +1,12 @@
 export enum FileType {
-  // I : 이미지
+  /** I : 이미지 */
   Image = 'I',
-  // V : 동영상
+  /** V : 동영상 */
   Video = 'V',
-  // F : 파일
+  /** F : 파일 */
   File = 'F',
-  // S : 사운드파일
+  /** S : 사운드파일 */
   Sound = 'S',
-  // "" 빈값이면 모든 타입을 내려줌
-  All = ''
+  /** "" 빈값이면 모든 타입을 내려줌 */
+  All = ' '
 }