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

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;

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) {
+    if (!this.getExpiredFile()) {
       this.fileViewer.emit(fileInfo);
     }
+  }
 
   onSave(value: string) {
+    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;
+  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();
+  }
 }