diff --git a/projects/ucap-webmessenger-api-common/src/lib/apis/file-profile-save.ts b/projects/ucap-webmessenger-api-common/src/lib/apis/file-profile-save.ts
index adc9979b..22ef07f0 100644
--- a/projects/ucap-webmessenger-api-common/src/lib/apis/file-profile-save.ts
+++ b/projects/ucap-webmessenger-api-common/src/lib/apis/file-profile-save.ts
@@ -8,7 +8,7 @@ import {
 } from '@ucap-webmessenger/api';
 
 export interface FileProfileSaveRequest extends APIRequest {
-  userSeq: string;
+  userSeq: number;
   deviceType: DeviceType;
   token: string;
   file?: File;
diff --git a/projects/ucap-webmessenger-api-common/src/lib/apis/file-talk-download.ts b/projects/ucap-webmessenger-api-common/src/lib/apis/file-talk-download.ts
index bcc03955..3534793d 100644
--- a/projects/ucap-webmessenger-api-common/src/lib/apis/file-talk-download.ts
+++ b/projects/ucap-webmessenger-api-common/src/lib/apis/file-talk-download.ts
@@ -1,17 +1,38 @@
 import { DeviceType } from '@ucap-webmessenger/core';
-import { APIRequest, APIEncoder, ParameterUtil } from '@ucap-webmessenger/api';
+import {
+  APIRequest,
+  APIEncoder,
+  ParameterUtil,
+  APIFormDataEncoder
+} from '@ucap-webmessenger/api';
+import { FileDownloadItem } from '../models/file-download-item';
 
 export interface FileTalkDownloadRequest extends APIRequest {
-  userSeq: string;
+  userSeq: number;
   deviceType: DeviceType;
   token: string;
-  attachmentsSeq?: string;
+  attachmentsSeq?: number;
+  fileDownloadItem?: FileDownloadItem;
 }
 
-const fileTalkDownloadEncodeMap = {};
-
-export const encodeFileTalkDownload: APIEncoder<FileTalkDownloadRequest> = (
-  req: FileTalkDownloadRequest
-) => {
-  return ParameterUtil.encode(fileTalkDownloadEncodeMap, req);
+const fileTalkDownloadEncodeMap = {
+  userSeq: 'p_user_seq',
+  deviceType: 'p_device_type',
+  token: 'p_token',
+  attachmentsSeq: 'p_att_seq'
+};
+
+export const encodeFileTalkDownload: APIFormDataEncoder<
+  FileTalkDownloadRequest
+> = (req: FileTalkDownloadRequest) => {
+  const extraParams: any = {};
+
+  extraParams.userSeq = String(req.userSeq);
+  extraParams.attachmentsSeq = String(req.attachmentsSeq);
+
+  return ParameterUtil.encodeFormData(
+    fileTalkDownloadEncodeMap,
+    req,
+    extraParams
+  );
 };
diff --git a/projects/ucap-webmessenger-api-common/src/lib/apis/file-talk-share.ts b/projects/ucap-webmessenger-api-common/src/lib/apis/file-talk-share.ts
index e6335e7c..6213f701 100644
--- a/projects/ucap-webmessenger-api-common/src/lib/apis/file-talk-share.ts
+++ b/projects/ucap-webmessenger-api-common/src/lib/apis/file-talk-share.ts
@@ -10,7 +10,7 @@ import {
 } from '@ucap-webmessenger/api';
 
 export interface FileTalkShareRequest extends APIRequest {
-  userSeq: string;
+  userSeq: number;
   deviceType: DeviceType;
   token: string;
   attachmentsSeq?: string;
diff --git a/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-download.ts b/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-download.ts
index f22618a5..51d5a288 100644
--- a/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-download.ts
+++ b/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-download.ts
@@ -8,7 +8,7 @@ import {
 } from '@ucap-webmessenger/api';
 
 export interface TransMassTalkDownloadRequest extends APIRequest {
-  userSeq: string;
+  userSeq: number;
   deviceType: DeviceType;
   token: string;
   eventTransSeq?: string;
diff --git a/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-save.ts b/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-save.ts
index b427d664..7c33d94a 100644
--- a/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-save.ts
+++ b/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-save.ts
@@ -10,7 +10,7 @@ import {
 } from '@ucap-webmessenger/api';
 
 export interface TransMassTalkSaveRequest extends APIRequest {
-  userSeq: string;
+  userSeq: number;
   deviceType: DeviceType;
   token: string;
   original?: string;
diff --git a/projects/ucap-webmessenger-api-common/src/lib/apis/translation-req.ts b/projects/ucap-webmessenger-api-common/src/lib/apis/translation-req.ts
index 082ec110..8ad80f3a 100644
--- a/projects/ucap-webmessenger-api-common/src/lib/apis/translation-req.ts
+++ b/projects/ucap-webmessenger-api-common/src/lib/apis/translation-req.ts
@@ -8,7 +8,7 @@ import {
 } from '@ucap-webmessenger/api';
 
 export interface TranslationReqRequest extends APIRequest {
-  userSeq: string;
+  userSeq: number;
   deviceType: DeviceType;
   token: string;
   original: string;
diff --git a/projects/ucap-webmessenger-api-common/src/lib/apis/translation-save.ts b/projects/ucap-webmessenger-api-common/src/lib/apis/translation-save.ts
index 60007e88..36596042 100644
--- a/projects/ucap-webmessenger-api-common/src/lib/apis/translation-save.ts
+++ b/projects/ucap-webmessenger-api-common/src/lib/apis/translation-save.ts
@@ -10,7 +10,7 @@ import {
 } from '@ucap-webmessenger/api';
 
 export interface TranslationSaveRequest extends APIRequest {
-  userSeq: string;
+  userSeq: number;
   deviceType: DeviceType;
   token: string;
   roomSeq?: string;
diff --git a/projects/ucap-webmessenger-api-common/src/lib/models/file-download-item.ts b/projects/ucap-webmessenger-api-common/src/lib/models/file-download-item.ts
new file mode 100644
index 00000000..e2d6a3f5
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/src/lib/models/file-download-item.ts
@@ -0,0 +1,27 @@
+import { Observable, Subject } from 'rxjs';
+import { share } from 'rxjs/operators';
+
+export class FileDownloadItem {
+  downloadTime: number;
+  downloadingProgress$: Observable<number>;
+
+  private downloadingProgress: Subject<number>;
+  private downloadStartTime: number;
+
+  constructor() {}
+
+  downloadStart(): Subject<number> {
+    this.downloadStartTime = new Date().getTime();
+    this.downloadingProgress = new Subject<number>();
+    this.downloadingProgress$ = this.downloadingProgress
+      .asObservable()
+      .pipe(share());
+    return this.downloadingProgress;
+  }
+
+  downloadComplete() {
+    const endTime = new Date().getTime();
+    this.downloadTime = endTime - this.downloadStartTime;
+    this.downloadingProgress.complete();
+  }
+}
diff --git a/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts b/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts
index 600935df..7d3d0baf 100644
--- a/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts
+++ b/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts
@@ -6,7 +6,7 @@ import {
   HttpRequest
 } from '@angular/common/http';
 
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { map, filter } from 'rxjs/operators';
 
 import { _MODULE_CONFIG } from '../types/token';
@@ -100,14 +100,37 @@ export class CommonApiService {
     req: FileTalkDownloadRequest,
     fileTalkDownloadUrl?: string
   ): Observable<Blob> {
-    return this.httpClient.post<Blob>(
+    const httpReq = new HttpRequest(
+      'POST',
       !!fileTalkDownloadUrl
         ? fileTalkDownloadUrl
         : this.moduleConfig.urls.fileTalkDownload,
-      { responseType: 'blob' },
-      {
-        params: encodeFileTalkDownload(req)
-      }
+      encodeFileTalkDownload(req),
+      { reportProgress: true, responseType: 'arraybuffer' }
+    );
+
+    let progress: Subject<number>;
+    if (!!req.fileDownloadItem) {
+      progress = req.fileDownloadItem.downloadStart();
+    }
+
+    return this.httpClient.request(httpReq).pipe(
+      filter(event => {
+        if (event instanceof HttpResponse) {
+          return true;
+        } else if (HttpEventType.DownloadProgress === event.type) {
+          if (!!progress) {
+            progress.next(Math.round((100 * event.loaded) / event.total));
+          }
+        }
+        return false;
+      }),
+      map((event: HttpResponse<any>) => {
+        if (!!progress) {
+          req.fileDownloadItem.downloadComplete();
+        }
+        return event.body;
+      })
     );
   }
 
@@ -115,8 +138,6 @@ export class CommonApiService {
     req: FileTalkSaveRequest,
     fileTalkSaveUrl?: string
   ): Observable<FileTalkSaveResponse> {
-    const asa = encodeFileTalkSave(req);
-
     const httpReq = new HttpRequest(
       'POST',
       !!fileTalkSaveUrl ? fileTalkSaveUrl : this.moduleConfig.urls.fileTalkSave,
diff --git a/projects/ucap-webmessenger-api-common/src/public-api.ts b/projects/ucap-webmessenger-api-common/src/public-api.ts
index 351d4812..0a47d28d 100644
--- a/projects/ucap-webmessenger-api-common/src/public-api.ts
+++ b/projects/ucap-webmessenger-api-common/src/public-api.ts
@@ -15,6 +15,7 @@ export * from './lib/apis/trans-mass-talk-save';
 export * from './lib/apis/translation-req';
 export * from './lib/apis/translation-save';
 
+export * from './lib/models/file-download-item';
 export * from './lib/models/file-upload-item';
 
 export * from './lib/services/common-api.service';
diff --git a/projects/ucap-webmessenger-api-external/src/lib/apis/company-list.ts b/projects/ucap-webmessenger-api-external/src/lib/apis/company-list.ts
index 03f47356..e2db7796 100644
--- a/projects/ucap-webmessenger-api-external/src/lib/apis/company-list.ts
+++ b/projects/ucap-webmessenger-api-external/src/lib/apis/company-list.ts
@@ -8,7 +8,7 @@ import {
 import { Company } from '../models/company';
 
 export interface CompanyListRequest extends APIRequest {
-  userSeq?: string;
+  userSeq?: number;
   appType?: AppType;
   deviceType?: DeviceType;
   token?: string;
@@ -23,7 +23,7 @@ export const encodeCompanyList: APIEncoder<CompanyListRequest> = (
   req: CompanyListRequest
 ) => {
   return {
-    p_user_seq: req.userSeq,
+    p_user_seq: String(req.userSeq),
     p_app_type: req.appType,
     p_device_type: req.deviceType,
     p_token: req.token,
diff --git a/projects/ucap-webmessenger-api-external/src/lib/apis/token-update.ts b/projects/ucap-webmessenger-api-external/src/lib/apis/token-update.ts
index ecc38112..452dbb2e 100644
--- a/projects/ucap-webmessenger-api-external/src/lib/apis/token-update.ts
+++ b/projects/ucap-webmessenger-api-external/src/lib/apis/token-update.ts
@@ -7,7 +7,7 @@ import {
 } from '@ucap-webmessenger/api';
 
 export interface TokenUpdateRequest extends APIRequest {
-  userSeq: string;
+  userSeq: number;
   deviceType: DeviceType;
   token: string;
   mobilePid?: string;
@@ -21,7 +21,7 @@ export const encodeTokenUpdate: APIEncoder<TokenUpdateRequest> = (
   req: TokenUpdateRequest
 ) => {
   return {
-    p_user_seq: req.userSeq,
+    p_user_seq: String(req.userSeq),
     p_device_type: req.deviceType,
     p_token: req.token,
     p_mobile_pid: req.mobilePid,
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/file-viewer.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/file-viewer.dialog.component.html
index f497ef54..8b644891 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/file-viewer.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/file-viewer.dialog.component.html
@@ -1 +1,8 @@
-<ucap-file-viewer></ucap-file-viewer>
+<ucap-file-viewer
+  [fileInfo]="fileInfo"
+  [downloadUrl]="downloadUrl"
+  [userSeq]="userSeq"
+  [deviceType]="deviceType"
+  [token]="token"
+  (closed)="onClosedViewer()"
+></ucap-file-viewer>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/file-viewer.dialog.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/file-viewer.dialog.component.ts
index 787ae77a..cac29042 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/file-viewer.dialog.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/file-viewer.dialog.component.ts
@@ -8,8 +8,16 @@ import {
 
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { NGXLogger } from 'ngx-logger';
+import { FileEventJson } from '@ucap-webmessenger/protocol-event';
+import { DeviceType } from '@ucap-webmessenger/core';
 
-export interface FileViewerDialogData {}
+export interface FileViewerDialogData {
+  fileInfo: FileEventJson;
+  downloadUrl: string;
+  userSeq: number;
+  deviceType: DeviceType;
+  token: string;
+}
 
 export interface FileViewerDialogResult {}
 
@@ -19,6 +27,12 @@ export interface FileViewerDialogResult {}
   styleUrls: ['./file-viewer.dialog.component.scss']
 })
 export class FileViewerDialogComponent implements OnInit, OnDestroy {
+  fileInfo: FileEventJson;
+  downloadUrl: string;
+  userSeq: number;
+  deviceType: DeviceType;
+  token: string;
+
   constructor(
     public dialogRef: MatDialogRef<
       FileViewerDialogData,
@@ -26,9 +40,19 @@ export class FileViewerDialogComponent implements OnInit, OnDestroy {
     >,
     @Inject(MAT_DIALOG_DATA) public data: FileViewerDialogData,
     private logger: NGXLogger
-  ) {}
+  ) {
+    this.fileInfo = data.fileInfo;
+    this.downloadUrl = data.downloadUrl;
+    this.userSeq = data.userSeq;
+    this.deviceType = data.deviceType;
+    this.token = data.token;
+  }
 
   ngOnInit() {}
 
   ngOnDestroy(): void {}
+
+  onClosedViewer(): void {
+    this.dialogRef.close();
+  }
 }
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 64968c7a..f2afc39c 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
@@ -29,7 +29,8 @@ import {
   isCopyable,
   isRecallable,
   InfoResponse,
-  EventJson
+  EventJson,
+  FileEventJson
 } from '@ucap-webmessenger/protocol-event';
 
 import * as AppStore from '@app/store';
@@ -348,8 +349,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
     );
   }
 
-  async onImageViewer(value: FileInfo) {
-    this.logger.debug('imageViewer', value);
+  async onImageViewer(fileInfo: FileEventJson) {
+    this.logger.debug('imageViewer', fileInfo);
     const result = await this.dialogService.open<
       FileViewerDialogComponent,
       FileViewerDialogData,
@@ -364,7 +365,13 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
       width: '100%',
       hasBackdrop: false,
       panelClass: 'app-dialog-full',
-      data: {}
+      data: {
+        fileInfo,
+        downloadUrl: this.sessionVerInfo.downloadUrl,
+        deviceType: this.environmentsInfo.deviceType,
+        token: this.loginRes.tokenString,
+        userSeq: this.loginRes.userSeq
+      }
     });
   }
 
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/file.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/file.component.ts
index 9a7463ab..c5408204 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/file.component.ts
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/file.component.ts
@@ -51,7 +51,7 @@ export class FileComponent implements OnInit {
   }
 
   onClickImageViewer(fileInfo: FileEventJson) {
-    this.imageViewer.emit(this.fileInfo);
+    this.imageViewer.emit(fileInfo);
   }
 
   onSave(value: string) {
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
index 7ebf3c6e..28c2ed48 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
@@ -12,7 +12,8 @@ import {
   Info,
   EventType,
   InfoResponse,
-  EventJson
+  EventJson,
+  FileEventJson
 } from '@ucap-webmessenger/protocol-event';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { UserInfo } from '@ucap-webmessenger/protocol-room';
@@ -45,7 +46,7 @@ export class MessagesComponent implements OnInit {
   @Output()
   massDetail = new EventEmitter<number>();
   @Output()
-  imageViewer = new EventEmitter<FileInfo>();
+  imageViewer = new EventEmitter<FileEventJson>();
   @Output()
   save = new EventEmitter<{ fileInfo: FileInfo; type: string }>();
   @Output()
@@ -157,8 +158,8 @@ export class MessagesComponent implements OnInit {
   }
 
   /** [Event] Image Viewer */
-  onImageViewer(value: FileInfo) {
-    this.imageViewer.emit(value);
+  onImageViewer(fileInfo: FileEventJson) {
+    this.imageViewer.emit(fileInfo);
   }
 
   /** [Event] Attach File Save & Save As */
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.html
index 54e4756b..0d22febe 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.html
@@ -1,18 +1,50 @@
-<div class="ucap-image-viewer-container">
-  <div class="ucap-image-viewer-header">
-    <span>Third Line</span>
-    <span class="ucap-image-viewer-spacer"></span>
-    <mat-icon
-      class="example-icon"
-      aria-hidden="false"
-      aria-label="Example heart icon"
-      >favorite</mat-icon
-    >
-    <mat-icon
-      class="example-icon"
-      aria-hidden="false"
-      aria-label="Example delete icon"
-      >delete</mat-icon
-    >
-  </div>
+<div
+  class="ucap-file-viewer-container"
+  [ngSwitch]="detectFileViewerType(fileInfo)"
+>
+  <ucap-document-viewer
+    *ngSwitchCase="FileViewerType.Document"
+    [fileInfo]="fileInfo"
+    [downloadUrl]="downloadUrl"
+    [userSeq]="userSeq"
+    [deviceType]="deviceType"
+    [token]="token"
+    (closed)="onClosedViewer()"
+  ></ucap-document-viewer>
+  <ucap-image-viewer
+    *ngSwitchCase="FileViewerType.Image"
+    [fileInfo]="fileInfo"
+    [downloadUrl]="downloadUrl"
+    [userSeq]="userSeq"
+    [deviceType]="deviceType"
+    [token]="token"
+    (closed)="onClosedViewer()"
+  ></ucap-image-viewer>
+  <ucap-sound-viewer
+    *ngSwitchCase="FileViewerType.Sound"
+    [fileInfo]="fileInfo"
+    [downloadUrl]="downloadUrl"
+    [userSeq]="userSeq"
+    [deviceType]="deviceType"
+    [token]="token"
+    (closed)="onClosedViewer()"
+  ></ucap-sound-viewer>
+  <ucap-video-viewer
+    *ngSwitchCase="FileViewerType.Video"
+    [fileInfo]="fileInfo"
+    [downloadUrl]="downloadUrl"
+    [userSeq]="userSeq"
+    [deviceType]="deviceType"
+    [token]="token"
+    (closed)="onClosedViewer()"
+  ></ucap-video-viewer>
+  <ucap-binary-viewer
+    *ngSwitchDefault
+    [fileInfo]="fileInfo"
+    [downloadUrl]="downloadUrl"
+    [userSeq]="userSeq"
+    [deviceType]="deviceType"
+    [token]="token"
+    (closed)="onClosedViewer()"
+  ></ucap-binary-viewer>
 </div>
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.scss
index df1f5bbd..9e8bf81f 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.scss
@@ -1,13 +1,4 @@
-.ucap-image-viewer-container {
+.ucap-file-viewer-container {
   width: 100%;
   height: 100%;
-
-  .ucap-image-viewer-header {
-    width: 100%;
-    height: 50px;
-
-    .ucap-image-viewer-spacer {
-      flex: 1 1 auto;
-    }
-  }
 }
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.ts
index c4fa82ad..3862f5d7 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer.component.ts
@@ -1,5 +1,9 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { ucapAnimations } from '../animations';
+import { Info, FileEventJson } from '@ucap-webmessenger/protocol-event';
+import { FileViewerType } from '../types/file-viewer.type';
+import { FileType } from '@ucap-webmessenger/protocol-file';
+import { DeviceType } from '@ucap-webmessenger/core';
 
 @Component({
   selector: 'ucap-file-viewer',
@@ -8,9 +12,44 @@ import { ucapAnimations } from '../animations';
   animations: ucapAnimations
 })
 export class FileViewerComponent implements OnInit {
+  @Input()
+  fileInfo: FileEventJson;
+
+  @Input()
+  downloadUrl: string;
+
+  @Input()
+  userSeq: number;
+
+  @Input()
+  deviceType: DeviceType;
+
+  @Input()
+  token: string;
+
   @Output()
   closed = new EventEmitter<void>();
 
+  FileViewerType = FileViewerType;
+
   constructor() {}
+
   ngOnInit() {}
+
+  detectFileViewerType(fileInfo: FileEventJson): FileViewerType {
+    switch (fileInfo.fileType) {
+      case FileType.Image:
+        return FileViewerType.Image;
+      case FileType.Sound:
+        return FileViewerType.Sound;
+      case FileType.Video:
+        return FileViewerType.Video;
+      default:
+        return FileViewerType.Binary;
+    }
+  }
+
+  onClosedViewer(): void {
+    this.closed.emit();
+  }
 }
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html
new file mode 100644
index 00000000..25607b58
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html
@@ -0,0 +1,18 @@
+<div class="ucap-image-viewer-container">
+  <mat-toolbar color="primary">
+    <span>Third Line</span>
+    <span class="ucap-image-viewer-spacer"></span>
+    <mat-icon
+      class="example-icon"
+      aria-hidden="false"
+      aria-label="Example heart icon"
+      >favorite</mat-icon
+    >
+    <mat-icon
+      class="example-icon"
+      aria-hidden="false"
+      aria-label="Example delete icon"
+      >delete</mat-icon
+    >
+  </mat-toolbar>
+</div>
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss
new file mode 100644
index 00000000..bd6ac4d2
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss
@@ -0,0 +1,13 @@
+.ucap-binary-viewer-container {
+  width: 100%;
+  height: 100%;
+
+  .ucap-binary-viewer-header {
+    width: 100%;
+    height: 50px;
+
+    .ucap-binary-viewer-spacer {
+      flex: 1 1 auto;
+    }
+  }
+}
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.spec.ts b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.spec.ts
new file mode 100644
index 00000000..b5932b4b
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { BinaryViewerComponent } from './binary-viewer.component';
+
+describe('BinaryViewerComponent', () => {
+  let component: BinaryViewerComponent;
+  let fixture: ComponentFixture<BinaryViewerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [BinaryViewerComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BinaryViewerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.ts
new file mode 100644
index 00000000..81a0cfa3
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { ucapAnimations } from '../../animations';
+import { FileEventJson } from '@ucap-webmessenger/protocol-event';
+import { DeviceType } from '@ucap-webmessenger/core';
+
+@Component({
+  selector: 'ucap-binary-viewer',
+  templateUrl: './binary-viewer.component.html',
+  styleUrls: ['./binary-viewer.component.scss'],
+  animations: ucapAnimations
+})
+export class BinaryViewerComponent implements OnInit {
+  @Input()
+  fileInfo: FileEventJson;
+
+  @Input()
+  downloadUrl: string;
+
+  @Input()
+  userSeq: number;
+
+  @Input()
+  deviceType: DeviceType;
+
+  @Input()
+  token: string;
+
+  @Output()
+  closed = new EventEmitter<void>();
+
+  constructor() {}
+  ngOnInit() {}
+}
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.scss
index 77d7ecbd..9c406efa 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.scss
@@ -1,4 +1,13 @@
-.ucap-image-viewer-container {
+.ucap-document-viewer-container {
   width: 100%;
   height: 100%;
+
+  .ucap-document-viewer-header {
+    width: 100%;
+    height: 50px;
+
+    .ucap-document-viewer-spacer {
+      flex: 1 1 auto;
+    }
+  }
 }
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.ts
index d3bd1470..44926295 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { ucapAnimations } from '../../animations';
+import { FileEventJson } from '@ucap-webmessenger/protocol-event';
+import { DeviceType } from '@ucap-webmessenger/core';
 
 @Component({
   selector: 'ucap-document-viewer',
@@ -8,6 +10,21 @@ import { ucapAnimations } from '../../animations';
   animations: ucapAnimations
 })
 export class DocumentViewerComponent implements OnInit {
+  @Input()
+  fileInfo: FileEventJson;
+
+  @Input()
+  downloadUrl: string;
+
+  @Input()
+  userSeq: number;
+
+  @Input()
+  deviceType: DeviceType;
+
+  @Input()
+  token: string;
+
   @Output()
   closed = new EventEmitter<void>();
 
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
index 25607b58..981db2ee 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
@@ -1,18 +1,57 @@
 <div class="ucap-image-viewer-container">
-  <mat-toolbar color="primary">
-    <span>Third Line</span>
+  <mat-toolbar color="primary" class="ucap-image-viewer-header">
+    <mat-icon class="ucap-image-viewer-icon">image</mat-icon>
+    <span class="ucap-image-viewer-title">{{ fileInfo.fileName }}</span>
     <span class="ucap-image-viewer-spacer"></span>
-    <mat-icon
-      class="example-icon"
-      aria-hidden="false"
-      aria-label="Example heart icon"
-      >favorite</mat-icon
+
+    <button
+      mat-icon-button
+      class="ucap-image-viewer-action"
+      matTooltip="이미지 크기 재설정"
+      matTooltipPosition="below"
+      aria-label="Button that displays a tooltip in various positions"
     >
-    <mat-icon
-      class="example-icon"
-      aria-hidden="false"
-      aria-label="Example delete icon"
-      >delete</mat-icon
+      <mat-icon>settings_overscan</mat-icon>
+    </button>
+    <button
+      mat-icon-button
+      class="ucap-image-viewer-action"
+      matTooltip="축소"
+      matTooltipPosition="below"
+      aria-label="Button that displays a tooltip in various positions"
     >
+      <mat-icon>zoom_out</mat-icon>
+    </button>
+    <button
+      mat-icon-button
+      class="ucap-image-viewer-action"
+      matTooltip="확대"
+      matTooltipPosition="below"
+      aria-label="Button that displays a tooltip in various positions"
+    >
+      <mat-icon>zoom_in</mat-icon>
+    </button>
+    <button
+      mat-icon-button
+      class="ucap-image-viewer-action"
+      matTooltip="다운로드"
+      matTooltipPosition="below"
+      aria-label="Button that displays a tooltip in various positions"
+    >
+      <mat-icon>get_app</mat-icon>
+    </button>
+
+    <button
+      mat-raised-button
+      color="primary"
+      class="ucap-image-viewer-action"
+      (click)="onClickClose()"
+    >
+      Close
+    </button>
   </mat-toolbar>
+  <div class="ucap-image-viewer-body">
+    <img />
+    {{ fileDownloadItem.downloadingProgress$ | async }}
+  </div>
 </div>
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.scss
index 77d7ecbd..936b5b31 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.scss
@@ -1,4 +1,25 @@
 .ucap-image-viewer-container {
   width: 100%;
   height: 100%;
+
+  .ucap-image-viewer-header {
+    width: 100%;
+    height: 50px;
+
+    .ucap-image-viewer-icon {
+    }
+
+    .ucap-image-viewer-title {
+    }
+
+    .ucap-image-viewer-spacer {
+      flex: 1 1 auto;
+    }
+
+    .ucap-image-viewer-action {
+    }
+  }
+
+  .ucap-image-viewer-body {
+  }
 }
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.ts
index 71a17a66..9c6a455e 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.ts
@@ -1,5 +1,12 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { ucapAnimations } from '../../animations';
+import { FileEventJson } from '@ucap-webmessenger/protocol-event';
+import { DeviceType } from '@ucap-webmessenger/core';
+import {
+  CommonApiService,
+  FileDownloadItem
+} from '@ucap-webmessenger/api-common';
+import { take, map } from 'rxjs/operators';
 
 @Component({
   selector: 'ucap-image-viewer',
@@ -8,9 +15,54 @@ import { ucapAnimations } from '../../animations';
   animations: ucapAnimations
 })
 export class ImageViewerComponent implements OnInit {
+  @Input()
+  fileInfo: FileEventJson;
+
+  @Input()
+  downloadUrl: string;
+
+  @Input()
+  userSeq: number;
+
+  @Input()
+  deviceType: DeviceType;
+
+  @Input()
+  token: string;
+
   @Output()
   closed = new EventEmitter<void>();
 
-  constructor() {}
-  ngOnInit() {}
+  imageSrc: string;
+
+  fileDownloadItem: FileDownloadItem;
+
+  constructor(private commonApiService: CommonApiService) {}
+
+  ngOnInit() {
+    this.fileDownloadItem = new FileDownloadItem();
+
+    this.commonApiService
+      .fileTalkDownload(
+        {
+          userSeq: this.userSeq,
+          deviceType: this.deviceType,
+          token: this.token,
+          attachmentsSeq: this.fileInfo.attachmentSeq,
+          fileDownloadItem: this.fileDownloadItem
+        },
+        this.downloadUrl
+      )
+      .pipe(
+        take(1),
+        map(aaa => {
+          console.log('fileTalkDownload', aaa);
+        })
+      )
+      .subscribe();
+  }
+
+  onClickClose(): void {
+    this.closed.emit();
+  }
 }
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss
index 77d7ecbd..acffcbee 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss
@@ -1,4 +1,13 @@
-.ucap-image-viewer-container {
+.ucap-sound-viewer-container {
   width: 100%;
   height: 100%;
+
+  .ucap-sound-viewer-header {
+    width: 100%;
+    height: 50px;
+
+    .ucap-sound-viewer-spacer {
+      flex: 1 1 auto;
+    }
+  }
 }
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.ts
index 822a83d5..06e025c3 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { ucapAnimations } from '../../animations';
+import { FileEventJson } from '@ucap-webmessenger/protocol-event';
+import { DeviceType } from '@ucap-webmessenger/core';
 
 @Component({
   selector: 'ucap-sound-viewer',
@@ -8,6 +10,21 @@ import { ucapAnimations } from '../../animations';
   animations: ucapAnimations
 })
 export class SoundViewerComponent implements OnInit {
+  @Input()
+  fileInfo: FileEventJson;
+
+  @Input()
+  downloadUrl: string;
+
+  @Input()
+  userSeq: number;
+
+  @Input()
+  deviceType: DeviceType;
+
+  @Input()
+  token: string;
+
   @Output()
   closed = new EventEmitter<void>();
 
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.scss
index 77d7ecbd..d5420d73 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.scss
@@ -1,4 +1,13 @@
-.ucap-image-viewer-container {
+.ucap-video-viewer-container {
   width: 100%;
   height: 100%;
+
+  .ucap-video-viewer-header {
+    width: 100%;
+    height: 50px;
+
+    .ucap-video-viewer-spacer {
+      flex: 1 1 auto;
+    }
+  }
 }
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.ts
index 1d2e1223..e934f02c 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { ucapAnimations } from '../../animations';
+import { FileEventJson } from '@ucap-webmessenger/protocol-event';
+import { DeviceType } from '@ucap-webmessenger/core';
 
 @Component({
   selector: 'ucap-video-viewer',
@@ -8,6 +10,21 @@ import { ucapAnimations } from '../../animations';
   animations: ucapAnimations
 })
 export class VideoViewerComponent implements OnInit {
+  @Input()
+  fileInfo: FileEventJson;
+
+  @Input()
+  downloadUrl: string;
+
+  @Input()
+  userSeq: number;
+
+  @Input()
+  deviceType: DeviceType;
+
+  @Input()
+  token: string;
+
   @Output()
   closed = new EventEmitter<void>();
 
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/index.ts b/projects/ucap-webmessenger-ui/src/lib/components/index.ts
deleted file mode 100644
index 990e9e01..00000000
--- a/projects/ucap-webmessenger-ui/src/lib/components/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { FileUploadQueueComponent } from './file-upload-queue.component';
-import { FloatActionButtonComponent } from './float-action-button.component';
-import { FileViewerComponent } from './file-viewer.component';
-
-import { DocumentViewerComponent } from './file-viewer/document-viewer.component';
-import { ImageViewerComponent } from './file-viewer/image-viewer.component';
-import { SoundViewerComponent } from './file-viewer/sound-viewer.component';
-import { VideoViewerComponent } from './file-viewer/video-viewer.component';
-
-export const UI_COMMON_COMPONENTS = [
-  FileUploadQueueComponent,
-  FloatActionButtonComponent,
-  FileViewerComponent,
-
-  DocumentViewerComponent,
-  ImageViewerComponent,
-  SoundViewerComponent,
-  VideoViewerComponent
-];
diff --git a/projects/ucap-webmessenger-ui/src/lib/types/file-viewer.type.ts b/projects/ucap-webmessenger-ui/src/lib/types/file-viewer.type.ts
new file mode 100644
index 00000000..dc1cede3
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/types/file-viewer.type.ts
@@ -0,0 +1,7 @@
+export enum FileViewerType {
+  Document = 'Document',
+  Image = 'Image',
+  Sound = 'Sound',
+  Video = 'Video',
+  Binary = 'Binary'
+}
diff --git a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
index d2aa0003..7eaa1e55 100644
--- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
@@ -14,7 +14,15 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { DragDropModule } from '@angular/cdk/drag-drop';
 
-import { UI_COMMON_COMPONENTS } from './components/index';
+import { FileUploadQueueComponent } from './components/file-upload-queue.component';
+import { FloatActionButtonComponent } from './components/float-action-button.component';
+import { FileViewerComponent } from './components/file-viewer.component';
+
+import { BinaryViewerComponent } from './components/file-viewer/binary-viewer.component';
+import { DocumentViewerComponent } from './components/file-viewer/document-viewer.component';
+import { ImageViewerComponent } from './components/file-viewer/image-viewer.component';
+import { SoundViewerComponent } from './components/file-viewer/sound-viewer.component';
+import { VideoViewerComponent } from './components/file-viewer/video-viewer.component';
 
 import { BottomSheetService } from './services/bottom-sheet.service';
 import { ClipboardService } from './services/clipboard.service';
@@ -32,7 +40,17 @@ import { BytesPipe } from './pipes/bytes.pipe';
 import { LinefeedToHtmlPipe, HtmlToLinefeedPipe } from './pipes/linefeed.pipe';
 import { DateToStringForChatRoomListPipe } from './pipes/dates.pipe';
 
-const COMPONENTS = [...UI_COMMON_COMPONENTS];
+const COMPONENTS = [
+  FileUploadQueueComponent,
+  FloatActionButtonComponent,
+  FileViewerComponent,
+
+  BinaryViewerComponent,
+  DocumentViewerComponent,
+  ImageViewerComponent,
+  SoundViewerComponent,
+  VideoViewerComponent
+];
 const DIALOGS = [AlertDialogComponent, ConfirmDialogComponent];
 const DIRECTIVES = [
   ClickOutsideDirective,
diff --git a/projects/ucap-webmessenger-ui/src/public-api.ts b/projects/ucap-webmessenger-ui/src/public-api.ts
index f2516526..50a0fdd2 100644
--- a/projects/ucap-webmessenger-ui/src/public-api.ts
+++ b/projects/ucap-webmessenger-ui/src/public-api.ts
@@ -4,7 +4,14 @@
 
 export * from './lib/animations';
 
+export * from './lib/components/file-viewer/document-viewer.component';
+export * from './lib/components/file-viewer/image-viewer.component';
+export * from './lib/components/file-viewer/sound-viewer.component';
+export * from './lib/components/file-viewer/video-viewer.component';
+
 export * from './lib/components/file-upload-queue.component';
+export * from './lib/components/file-viewer.component';
+export * from './lib/components/float-action-button.component';
 
 export * from './lib/dialogs/alert.dialog.component';
 export * from './lib/dialogs/confirm.dialog.component';
@@ -18,6 +25,8 @@ export * from './lib/services/clipboard.service';
 export * from './lib/services/dialog.service';
 export * from './lib/services/snack-bar.service';
 
+export * from './lib/types/file-viewer.type';
+
 export * from './lib/utils/string.util';
 
 export * from './lib/ucap-ui.module';