binary viewer is added

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html

@@ -1,18 +1,53 @@
-<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
+<div class="ucap-binary-viewer-container">
+  <mat-toolbar color="accent" class="ucap-binary-viewer-header">
+    <mat-icon class="ucap-binary-viewer-icon">attachment</mat-icon>
+    <span class="ucap-binary-viewer-title">{{ fileInfo.fileName }}</span>
+    <span class="ucap-binary-viewer-spacer"></span>
+
+    <button
+      mat-icon-button
+      class="ucap-binary-viewer-action"
+      matTooltip="다운로드"
+      matTooltipPosition="below"
+      aria-label=""
+      (click)="onClickDownload()"
     >
-    <mat-icon
-      class="example-icon"
-      aria-hidden="false"
-      aria-label="Example delete icon"
-      >delete</mat-icon
+      <mat-icon>get_app</mat-icon>
+    </button>
+
+    <button
+      mat-raised-button
+      color="primary"
+      class="ucap-binary-viewer-action"
+      (click)="onClickClose()"
     >
+      Close
+    </button>
   </mat-toolbar>
+  <div class="ucap-binary-viewer-body">
+    <div
+      class="ucap-binary-viewer-content-wrapper"
+      fxLayout="column"
+      fxLayout.xs="row"
+      fxFlexFill
+      fxLayoutAlign="center center"
+    >
+      <div [ngClass]="['mime-icon', 'light', 'ico-' + fileInfo.fileExt]">
+        <div class="ico"></div>
+      </div>
+      <div>
+        미리보기를 지원하지 않는 파일입니다.
+      </div>
+      <div>
+        <button
+          color="warn"
+          mat-raised-button
+          aria-label=""
+          (click)="onClickDownload()"
+        >
+          Download
+        </button>
+      </div>
+    </div>
+  </div>
 </div>

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss

@@ -6,8 +6,27 @@
     width: 100%;
     height: 50px;
 
+    .ucap-binary-viewer-icon {
+    }
+
+    .ucap-binary-viewer-title {
+    }
+
     .ucap-binary-viewer-spacer {
       flex: 1 1 auto;
     }
+
+    .ucap-binary-viewer-action {
+    }
+  }
+
+  .ucap-binary-viewer-body {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: white;
+
+    .ucap-binary-viewer-content-wrapper {
+    }
   }
 }

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.ts

@@ -26,7 +26,9 @@ export class BinaryViewerComponent implements OnInit {
 
   ngOnInit() {}
 
-  onClickDownload(): void {}
+  onClickDownload(): void {
+    this.download.emit();
+  }
 
   onClickClose(): void {
     this.closed.emit();