만료된 파일 클릭시 뷰어 오픈 안되도록 수정.

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: row;
   padding: 14px;
+  min-width: 200px;
   .file-img {
     display: inline-flex;
     width: 50px;
@@ -102,13 +103,13 @@
         height: 100%;
       }
     }
-    &.expired{
-      li{
-        width:100%;
+    &.expired {
+      li {
+        width: 100%;
         white-space: nowrap;
-        color:#999999;
+        color: #999999;
         align-items: center;
-        line-height:40px;
+        line-height: 40px;
       }
     }
   }

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/file.component.ts

@@ -51,10 +51,14 @@ export class FileComponent implements OnInit {
   }
 
   onClickFileViewer(fileInfo: FileEventJson) {
-    this.fileViewer.emit(fileInfo);
+    if (!this.getExpiredFile()) {
+      this.fileViewer.emit(fileInfo);
+    }
   }
 
   onSave(value: string) {
-    this.save.emit({ fileInfo: this.fileInfo, type: value });
+    if (!this.getExpiredFile()) {
+      this.save.emit({ fileInfo: this.fileInfo, type: value });
+    }
   }
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.html

@@ -1,3 +1,10 @@
-<div class="bubble-main">
+<div
+  class="bubble-main"
+  (mouseenter)="mouseEnter($event)"
+  (mouseleave)="mouseLeave($event)"
+>
+  <div *ngIf="showExpired" class="expired-text">
+    <span>기간이 만료된 파일입니다</span>
+  </div>
   <img [src]="fileInfo.thumbUrl" />
 </div>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.scss

@@ -1,7 +1,24 @@
-.bubble-main{
-  padding:10px;
-  img{
-    height:140px;
-    width:auto;
+.bubble-main {
+  padding: 10px;
+  position: relative;
+
+  img {
+    height: 140px;
+    width: auto;
   }
-}
+
+  .expired-text {
+    position: absolute;
+    background-color: rgb(255, 255, 255, 0.6);
+    width: calc(100% - 20px);
+    height: calc(100% - 20px);
+    text-align: center;
+    display: table;
+
+    span {
+      color: #666666;
+      display: table-cell;
+      vertical-align: middle;
+    }
+  }
+}

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
 import { NGXLogger } from 'ngx-logger';
 import { FileEventJson } from '@ucap-webmessenger/protocol-event';
 
@@ -13,7 +13,24 @@ export class ImageComponent implements OnInit {
   @Input()
   expired = false;
 
+  showExpired = false;
+
   constructor(private logger: NGXLogger) {}
 
   ngOnInit() {}
+
+  mouseEnter(event: MouseEvent): void {
+    if (this.expired) {
+      this.showExpired = true;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  mouseLeave(event: MouseEvent): void {
+    if (this.expired) {
+      this.showExpired = false;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+  }
 }