1. 타이머대화방 정보알림 처리.

2. 정보성 데이터 분리 처리.
3. 대화 회수 처리.

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html

@@ -34,6 +34,10 @@
   <mat-progress-bar *ngIf="eventListProcessing$ | async" mode="indeterminate"></mat-progress-bar>
   <!-- CHAT CONTENT -->
   <div fxFlex="1 1 auto" class="chat-content" #messageBoxContainer>
+    <!-- Timer Room Info -->
+    <span *ngIf="roomInfo && roomInfo.isTimeRoom">비밀 대화방입니다.</span>
+    <!-- Timer Room Info -->
+
     <!-- CHAT MESSAGES -->
     <ucap-chat-messages [messages]="eventList$ | async" [userInfos]="userInfoList$ | async" [loginRes]="loginRes"
       (massDetail)="onMassDetail($event)" (save)="onSave($event)" (imageViewer)="onImageViewer($event)">

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

@@ -10,6 +10,8 @@ import { Info, EventType } from '@ucap-webmessenger/protocol-event';
 export class InformationComponent implements OnInit {
   @Input()
   message: Info;
+  @Input()
+  senderName?: string;
 
   contents: string;
 
@@ -32,6 +34,59 @@ export class InformationComponent implements OnInit {
       case EventType.Exit:
         this.contents = `${this.message.sentMessage}님이 퇴장하셨습니다.`;
         break;
+      case EventType.RenameRoom:
+        this.contents = `${this.message.sentMessage.substring(
+          0,
+          this.message.sentMessage.indexOf(',')
+        )}님이 대화방명을 '${this.message.sentMessage.substring(
+          this.message.sentMessage.indexOf(',') + 1
+        )}'으로 변경하셨습니다.`;
+        break;
+      case EventType.NotificationForTimerRoom:
+        /**
+         * 타이머대화방 알림으로서 채팅 이벤트에서 처리하지 않고, 대화방 글로벌에서 처리.
+         */
+        this.contents = this.message.sentMessage;
+        break;
+      case EventType.GuideForRoomTimerChanged:
+        const values = this.message.sentMessage.split(',');
+        if (values && values.length === 2) {
+          this.contents = `${
+            this.senderName
+          }님이 타이머를 설정하였습니다.(${this.getCalcTimer(
+            Number(values[1]) * 1000
+          )})`;
+        }
+        break;
+    }
+  }
+
+  getCalcTimer(millisec: number) {
+    switch (millisec) {
+      case 5000:
+        return '5 초';
+      case 10000:
+        return '10 초';
+      case 30000:
+        return '30 초';
+      case 60000:
+        return '1 분';
+      case 300000:
+        return '5 분';
+      case 600000:
+        return '10 분';
+      case 1800000:
+        return '30 분';
+      case 3600000:
+        return '1 시간';
+      case 21600000:
+        return '6 시간';
+      case 43200000:
+        return '12 시간';
+      case 86400000:
+        return '24 시간';
+      default:
+        return '0 초';
     }
   }
 }

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

@@ -0,0 +1,3 @@
+<p>
+  회수된 메시지
+</p>

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -4,59 +4,71 @@
       me: message.senderSeq === loginRes.userSeq,
       contact: message.senderSeq !== loginRes.userSeq
     }">
+
     <ucap-chat-message-box-date-splitter *ngIf="getDateSplitter(i)" [message]="message">
     </ucap-chat-message-box-date-splitter>
 
-    <div *ngIf="message.type !== EventType.Join && message.type !== EventType.Exit">
+    <div *ngIf="getIsInformation(message); then information else contents"></div>
-      <ul>
+    <ng-template #information>
-        <li *ngIf="getUserProfile(message.senderSeq) != ''">
+      <ng-container class="bubble" *ngIf="message.type !== EventType.NotificationForTimerRoom"
-          <img [src]="getUserProfile(message.senderSeq)" onerror="this.src='assets/images/img_nophoto_50.png'"
+        [ngSwitch]="message.type">
-            class="avatar" style="width: 50px; height: 50px;" />
+        <ucap-chat-message-box-information *ngSwitchCase="EventType.Join" [message]="message">
-        </li>
+        </ucap-chat-message-box-information>
-        <li>
+        <ucap-chat-message-box-information *ngSwitchCase="EventType.Exit" [message]="message">
-          {{ getUserName(message.senderSeq) }}
+        </ucap-chat-message-box-information>
-        </li>
+        <ucap-chat-message-box-information *ngSwitchCase="EventType.RenameRoom" [message]="message">
-      </ul>
+        </ucap-chat-message-box-information>
-    </div>
+        <ucap-chat-message-box-information *ngSwitchCase="EventType.GuideForRoomTimerChanged" [message]="message"
-
+          [senderName]="getUserName(message.senderSeq)">
-    <ng-container class="bubble" [ngSwitch]="message.type">
+        </ucap-chat-message-box-information>
-      <ucap-chat-message-box-information *ngSwitchCase="EventType.Join" [message]="message">
+      </ng-container>
-      </ucap-chat-message-box-information>
+    </ng-template>
-      <ucap-chat-message-box-information *ngSwitchCase="EventType.Exit" [message]="message">
+    <ng-template #contents>
-      </ucap-chat-message-box-information>
+      <div>
-      <ucap-chat-message-box-mass *ngSwitchCase="EventType.MassText" [message]="message"
+        <ul>
-        (massDetail)="onMassDetail($event)">
+          <li *ngIf="getUserProfile(message.senderSeq) != ''">
-      </ucap-chat-message-box-mass>
+            <img [src]="getUserProfile(message.senderSeq)" onerror="this.src='assets/images/img_nophoto_50.png'"
-      <ucap-chat-message-box-file *ngSwitchCase="EventType.File" [message]="message" (save)="onSave($event)"
+              class="avatar" style="width: 50px; height: 50px;" />
-        (imageViewer)="onImageViewer($event)">
+          </li>
-      </ucap-chat-message-box-file>
+          <li>
-      <ucap-chat-message-box-sticker *ngSwitchCase="EventType.Sticker" [message]="message">
+            {{ getUserName(message.senderSeq) }}
-      </ucap-chat-message-box-sticker>
+          </li>
-      <ucap-chat-message-box-text *ngSwitchCase="EventType.Character" [message]="message"></ucap-chat-message-box-text>
+        </ul>
-      <div *ngSwitchDefault>
-        mass-translation
-        <ucap-chat-message-box-mass-translation></ucap-chat-message-box-mass-translation>
-        notice
-        <ucap-chat-message-box-notice></ucap-chat-message-box-notice>
-        recall
-        <ucap-chat-message-box-recall></ucap-chat-message-box-recall>
-        <ucap-chat-message-box-schedule></ucap-chat-message-box-schedule>
-        translation
-        <ucap-chat-message-box-translation></ucap-chat-message-box-translation>
-        video-conference
-        <ucap-chat-message-box-video-conference></ucap-chat-message-box-video-conference>
-
-        <div class="message">
-          {{ message.sentMessage }}
-        </div>
       </div>
-    </ng-container>
+
-    <div *ngIf="message.type !== EventType.Join && message.type !== EventType.Exit">
+      <ng-container class="bubble" *ngIf="message.type !== EventType.NotificationForTimerRoom"
+        [ngSwitch]="message.type">
+        <ucap-chat-message-box-mass *ngSwitchCase="EventType.MassText" [message]="message"
+          (massDetail)="onMassDetail($event)">
+        </ucap-chat-message-box-mass>
+        <ucap-chat-message-box-file *ngSwitchCase="EventType.File" [message]="message" (save)="onSave($event)"
+          (imageViewer)="onImageViewer($event)">
+        </ucap-chat-message-box-file>
+        <ucap-chat-message-box-sticker *ngSwitchCase="EventType.Sticker" [message]="message">
+        </ucap-chat-message-box-sticker>
+        <ucap-chat-message-box-recall *ngSwitchCase="EventType.RecalledMessage"></ucap-chat-message-box-recall>
+        <ucap-chat-message-box-text *ngSwitchCase="EventType.Character" [message]="message">
+        </ucap-chat-message-box-text>
+        <div *ngSwitchDefault>
+          mass-translation
+          <ucap-chat-message-box-mass-translation></ucap-chat-message-box-mass-translation>
+          notice
+          <ucap-chat-message-box-notice></ucap-chat-message-box-notice>
+          <ucap-chat-message-box-schedule></ucap-chat-message-box-schedule>
+          translation
+          <ucap-chat-message-box-translation></ucap-chat-message-box-translation>
+          video-conference
+          <ucap-chat-message-box-video-conference></ucap-chat-message-box-video-conference>
+
+          <div class="message">
+            {{ message.sentMessage }}
+          </div>
+        </div>
+      </ng-container>
+
       <div class="time secondary-text">
         {{ message.sendDate | date: 'a hh:mm' }}
       </div>
-    </div>
+    </ng-template>
-
-
   </div>
 </div>

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts

@@ -72,6 +72,23 @@ export class MessagesComponent implements OnInit {
     return '';
   }
 
+  /**
+   * 정보성 Event 인지 판단.
+   * @description 정보성 event 일 경우 프로필, 일시 를 표현하지 않는다.
+   */
+  getIsInformation(info: Info) {
+    if (
+      info.type === EventType.Join ||
+      info.type === EventType.Exit ||
+      info.type === EventType.RenameRoom ||
+      info.type === EventType.NotificationForTimerRoom ||
+      info.type === EventType.GuideForRoomTimerChanged
+    ) {
+      return true;
+    }
+    return false;
+  }
+
   /** Date Splitter check */
   getDateSplitter(curIndex: number): boolean {
     if (curIndex === 0) {