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
index 58079e3f..1a7dd94b 100644
--- 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
@@ -51,11 +51,31 @@
           <li>
             <span class="text-accent-color">date :</span>
             {{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
+            <span *ngIf="loginRes.fileRetentionPeriod > 0">
+              ~
+              {{
+                selectedFile.info.sendDate
+                  | dateDistanceToDay: loginRes.fileRetentionPeriod
+                  | dateToStringFormat: 'YYYY.MM.DD'
+              }}
+            </span>
           </li>
         </ul>
       </div>
       <div class="select-file-option">
-        <span matTooltip="다운로드" class="text-accent-darkest">
+        <span
+          matTooltip="다운로드"
+          class="text-accent-darkest"
+          (click)="onClickDownload(selectedFile)"
+        >
+          <mat-progress-spinner
+            *ngIf="selectedFile.fileDownloadItem.downloadingProgress$ | async"
+            mode="determinate"
+            diameter="30"
+            strokeWidth="2"
+            [value]="selectedFile.fileDownloadItem.downloadingProgress$ | async"
+            style="position: absolute;"
+          ></mat-progress-spinner>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="20"
@@ -162,8 +182,24 @@
             </div>
             <div class="download-period text-accent-color">
               <!--{{ element.info.size | ucapBytes }}-->
-              {{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }} ~
-              2020.01.23
+              {{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
+              <span *ngIf="loginRes.fileRetentionPeriod > 0">
+                ~
+                {{
+                  element.info.sendDate
+                    | dateDistanceToDay: loginRes.fileRetentionPeriod
+                    | dateToStringFormat: 'YYYY.MM.DD'
+                }}
+              </span>
+            </div>
+            <div
+              *ngIf="element.fileDownloadItem.downloadingProgress$ | async"
+              class="progress"
+            >
+              <mat-progress-bar
+                mode="determinate"
+                [value]="element.fileDownloadItem.downloadingProgress$ | async"
+              ></mat-progress-bar>
             </div>
           </td>
         </ng-container>
@@ -203,6 +239,7 @@
         mat-flat-button
         [disabled]="selectedFileList.length > 0 ? 'false' : 'true'"
         class="mat-primary"
+        (click)="onClickDownloadAll()"
       >
         Download All
       </button>
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
index 0636fcfe..758d7345 100644
--- 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
@@ -107,6 +107,14 @@
         width: 100%;
         @include ellipsis(1);
       }
+
+      .progress {
+        position: relative;
+
+        .mat-progress-bar {
+          position: absolute;
+        }
+      }
     }
   }
 }
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
index 8d65597d..eb8a3dd6 100644
--- 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
@@ -9,15 +9,16 @@ 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 { tap, map, take, finalize } from 'rxjs/operators';
+import { FileUtil, MimeUtil, DeviceType } 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';
 import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
 import { NGXLogger } from 'ngx-logger';
 import { FileDownloadItem } from '@ucap-webmessenger/api';
+import { SnackBarService } from '@ucap-webmessenger/ui';
+import { CommonApiService } from '@ucap-webmessenger/api-common';
 
 export interface FileInfoTotal {
   info: FileInfo;
@@ -51,6 +52,8 @@ export class FileBoxComponent implements OnInit, OnDestroy {
   constructor(
     private store: Store<any>,
     private sessionStorageService: SessionStorageService,
+    private commonApiService: CommonApiService,
+    private snackBarService: SnackBarService,
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
     private logger: NGXLogger
   ) {
@@ -220,10 +223,62 @@ export class FileBoxComponent implements OnInit, OnDestroy {
     this.selectedFile = row;
   }
 
+  onClickDownload(fileInfo: FileInfoTotal) {
+    this.commonApiService
+      .fileTalkDownload({
+        userSeq: this.loginRes.userSeq,
+        deviceType: DeviceType.PC,
+        token: this.loginRes.tokenString,
+        attachmentsSeq: fileInfo.info.seq,
+        fileDownloadItem: fileInfo.fileDownloadItem
+      })
+      .pipe(
+        take(1),
+        map(async rawBlob => {
+          const mimeType = MimeUtil.getMimeFromExtension(
+            FileUtil.getExtension(fileInfo.info.name)
+          );
+          const blob = rawBlob.slice(0, rawBlob.size, mimeType);
+
+          FileUtil.fromBlobToBuffer(blob)
+            .then(buffer => {
+              this.nativeService
+                .saveFile(buffer, fileInfo.info.name, mimeType)
+                .then(result => {
+                  if (!!result) {
+                    this.snackBarService.open(
+                      `파일이 경로[${result}]에 저장되었습니다.`,
+                      '',
+                      {
+                        duration: 3000,
+                        verticalPosition: 'bottom'
+                      }
+                    );
+                  } else {
+                    this.snackBarService.open('파일 저장에 실패하였습니다.');
+                  }
+                })
+                .catch(reason => {
+                  this.snackBarService.open('파일 저장에 실패하였습니다.');
+                });
+            })
+            .catch(reason => {
+              this.logger.error('download', reason);
+            });
+        }),
+        finalize(() => {
+          setTimeout(() => {
+            fileInfo.fileDownloadItem.downloadingProgress$ = undefined;
+          }, 1000);
+        })
+      )
+      .subscribe();
+  }
+
   onClickDownloadAll(): void {
-    // this.selectedFileList.forEach(fileInfo => {
-    //   this.onClickDownload(fileInfo);
-    // });
+    this.selectedFileList.forEach(fileInfo => {
+      this.onClickDownload(fileInfo);
+    });
   }
 
   onClickOpenDownloadFolder(): void {
diff --git a/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts b/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts
index 76deb328..504d3656 100644
--- a/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts
@@ -3,7 +3,7 @@ import { StringUtil } from '../utils/string.util';
 import moment from 'moment';
 
 @Pipe({
-  name: 'dateToStringChatList',
+  name: 'dateToStringChatList'
 })
 export class DateToStringForChatRoomListPipe implements PipeTransform {
   transform(value: any): string {
@@ -39,7 +39,7 @@ export class DateToStringForChatRoomListPipe implements PipeTransform {
 }
 
 @Pipe({
-  name: 'dateToStringFormat',
+  name: 'dateToStringFormat'
 })
 export class DateToStringFormatPipe implements PipeTransform {
   transform(value: any, format?: string): string {
@@ -52,3 +52,15 @@ export class DateToStringFormatPipe implements PipeTransform {
     }
   }
 }
+
+@Pipe({
+  name: 'dateDistanceToDay'
+})
+export class DateDistanceToDatePipe implements PipeTransform {
+  transform(value: any, distanceDay?: number): Date {
+    distanceDay = distanceDay || 0;
+    const date: Date = moment(value.toString()).toDate();
+    date.setDate(date.getDate() + distanceDay);
+    return date;
+  }
+}
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 a9bcf747..8ebef4f7 100644
--- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
@@ -48,7 +48,8 @@ import { BytesPipe } from './pipes/bytes.pipe';
 import { LinefeedToHtmlPipe, HtmlToLinefeedPipe } from './pipes/linefeed.pipe';
 import {
   DateToStringForChatRoomListPipe,
-  DateToStringFormatPipe
+  DateToStringFormatPipe,
+  DateDistanceToDatePipe
 } from './pipes/dates.pipe';
 import { SecondsToMinutesPipe } from './pipes/seconds-to-minutes.pipe';
 import { LinkyPipe } from './pipes/linky.pipe';
@@ -83,6 +84,7 @@ const PIPES = [
   HtmlToLinefeedPipe,
   DateToStringForChatRoomListPipe,
   DateToStringFormatPipe,
+  DateDistanceToDatePipe,
   SecondsToMinutesPipe,
   LinkyPipe
 ];