1:1 대화방이며 대화방명이 지정되지 않았을 경우에 대화방명에 "이름 직급 내선 모바일" 로 표현하도록 기능 추가.

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

@@ -91,6 +91,36 @@
                 </ng-template>
                 <ng-template #roomNameNotExist>
                   {{ getRoomNameByRoomUser(_roomUserInfos) }}
+                  <span
+                    *ngIf="roomInfoSubject.value.roomType === RoomType.Single"
+                    class="more-info"
+                  >
+                    <span>
+                      {{ getSingleRoomUserInfosGrade(_roomUserInfos) }}
+                    </span>
+                    <span
+                      *ngIf="
+                        _roomUserInfos.length > 0 &&
+                        !!_roomUserInfos[0].lineNumber &&
+                        _roomUserInfos[0].lineNumber.trim().length > 0
+                      "
+                      (click)="onClickSendClickToCall('LINE')"
+                      class="callable"
+                    >
+                      / {{ getSingleRoomUserInfosLineNumber(_roomUserInfos) }}
+                    </span>
+                    <span
+                      *ngIf="
+                        _roomUserInfos.length > 0 &&
+                        !!_roomUserInfos[0].hpNumber &&
+                        _roomUserInfos[0].hpNumber.trim().length > 0
+                      "
+                      (click)="onClickSendClickToCall('MOBILE')"
+                      class="callable"
+                    >
+                      / {{ getSingleRoomUserInfosHpNumber(_roomUserInfos) }}
+                    </span>
+                  </span>
                 </ng-template>
               </ng-container>
             </ng-container>

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

@@ -77,6 +77,14 @@
         font-size: 0.94rem;
         line-height: normal;
         @include ellipsis(1);
+
+        .more-info {
+          font-size: 0.9rem;
+          color: #656565;
+          .callable {
+            cursor: pointer;
+          }
+        }
       }
       .room-type {
         font-size: 0.9rem;

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

@@ -27,7 +27,8 @@ import {
   AlertSnackbarComponent,
   AlertSnackbarData,
   TranslateService as UiTranslateService,
-  TranslatePipe as UiTranslatePipe
+  TranslatePipe as UiTranslatePipe,
+  StringFormatterPhonePipe
 } from '@ucap-webmessenger/ui';
 import { Store, select } from '@ngrx/store';
 import { NGXLogger } from 'ngx-logger';
@@ -143,6 +144,7 @@ import {
   EventDownloadRequest
 } from '@ucap-webmessenger/api-message';
 import moment from 'moment';
+import { start } from 'repl';
 
 @Component({
   selector: 'app-layout-messenger-messages',
@@ -158,6 +160,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
   }>();
   @Output()
   closeRightDrawer = new EventEmitter();
+  @Output()
+  sendCall = new EventEmitter<string>();
 
   @ViewChild('chatSearch', { static: false })
   private chatSearch: SearchComponent;
@@ -534,6 +538,46 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
     return roomName;
   }
 
+  getSingleRoomUserInfosGrade(roomUserInfos: any[]) {
+    if (roomUserInfos.length > 0) {
+      return new UiTranslatePipe(
+        this.uiTranslateService,
+        this.changeDetectorRef
+      ).transform(roomUserInfos, 'grade', ',');
+    }
+    return '';
+  }
+  getSingleRoomUserInfosLineNumber(roomUserInfos: any[]) {
+    if (
+      roomUserInfos.length > 0 &&
+      !!roomUserInfos[0].lineNumber &&
+      roomUserInfos[0].lineNumber.trim().length > 0
+    ) {
+      return `${new StringFormatterPhonePipe().transform(
+        roomUserInfos[0].lineNumber
+      )}`;
+    }
+  }
+  getSingleRoomUserInfosHpNumber(roomUserInfos: any[]) {
+    if (
+      roomUserInfos.length > 0 &&
+      !!roomUserInfos[0].hpNumber &&
+      roomUserInfos[0].hpNumber.trim().length > 0
+    ) {
+      return `${new StringFormatterPhonePipe().transform(
+        roomUserInfos[0].hpNumber
+      )}`;
+    }
+  }
+
+  onClickSendClickToCall(type: string) {
+    if(type === 'LINE') {
+      this.sendCall.emit(this._roomUserInfos[0].lineNumber);
+    } else if(type === 'MOBILE') {
+      this.sendCall.emit(this._roomUserInfos[0].hpNumber);
+    }
+  }
+
   /** 대화전송 가능한 방인지 판단 */
   getEnableSend() {
     if (!this.roomInfoSubject.value) {

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html

@@ -32,6 +32,7 @@
         *ngIf="!!(this.selectedChat$ | async)"
         (openProfile)="onClickOpenProfile($event)"
         (closeRightDrawer)="onCloseRightDrawer()"
+        (sendCall)="sendClickToCall($event)"
       ></app-layout-messenger-messages>
       <button
         mat-icon-button