기능추가 :: 대화방 > 대화방명 데이터 매핑.

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

@@ -16,7 +16,7 @@
         <!-- / RESPONSIVE CHATS BUTTON-->
       </div>
       <div class="room-name">
-        대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명
+        {{ getRoomName() }}
       </div>
       <div class="room-option">
         <button
@@ -72,7 +72,7 @@
     <!-- CHAT MESSAGES -->
     <ucap-chat-messages
       [messages]="eventList$ | async"
-      [userInfos]="userInfoList$ | async"
+      [userInfos]="userInfoList"
       [loginRes]="loginRes"
       [sessionVerInfo]="sessionVerInfo"
       (massDetail)="onMassDetail($event)"

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

@@ -29,13 +29,8 @@ import * as ChatStore from '@app/store/messenger/chat';
 import * as RoomStore from '@app/store/messenger/room';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
-import {
-  LoginInfo,
-  KEY_LOGIN_INFO,
-  EnvironmentsInfo,
-  KEY_ENVIRONMENTS_INFO
-} from '@app/types';
-import { RoomInfo, UserInfo } from '@ucap-webmessenger/protocol-room';
+import { EnvironmentsInfo, KEY_ENVIRONMENTS_INFO } from '@app/types';
+import { RoomInfo, UserInfo, RoomType } from '@ucap-webmessenger/protocol-room';
 import { tap, take } from 'rxjs/operators';
 import { FileInfo } from '@ucap-webmessenger/ui-chat';
 import { KEY_VER_INFO } from '@app/types/ver-info.type';
@@ -80,7 +75,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
   eventList$: Observable<Info[]>;
   roomInfo: RoomInfo;
   roomInfoSubscription: Subscription;
-  userInfoList$: Observable<UserInfo[]>;
+  userInfoList: UserInfo[];
+  userInfoListSubscription: Subscription;
   eventListProcessing$: Observable<boolean>;
   sessionVerInfo: VersionInfo2Response;
 
@@ -110,8 +106,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
   }
 
   ngOnInit() {
-    const loginInfo = this.sessionStorageService.get<LoginInfo>(KEY_LOGIN_INFO);
-
     this.loginResSubscription = this.store
       .pipe(
         select(AppStore.AccountSelector.AuthenticationSelector.loginRes),
@@ -130,9 +124,14 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
       )
       .subscribe();
 
-    this.userInfoList$ = this.store.pipe(
-      select(AppStore.MessengerSelector.RoomSelector.userInfoList)
-    );
+    this.userInfoListSubscription = this.store
+      .pipe(
+        select(AppStore.MessengerSelector.RoomSelector.userInfoList),
+        tap(userInfoList => {
+          this.userInfoList = userInfoList;
+        })
+      )
+      .subscribe();
 
     this.eventListProcessing$ = this.store.pipe(
       select(AppStore.MessengerSelector.EventSelector.infoListProcessing)
@@ -152,12 +151,39 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
     if (!!this.roomInfoSubscription) {
       this.roomInfoSubscription.unsubscribe();
     }
+    if (!!this.userInfoListSubscription) {
+      this.userInfoListSubscription.unsubscribe();
+    }
   }
 
   ngAfterViewChecked(): void {
     this.scrollToBottomForMessageBoxContainer();
   }
 
+  getRoomName() {
+    if (!this.roomInfo || !this.userInfoList) {
+      return '대화방명을 가져오고 있습니다..';
+    }
+
+    if (!!this.roomInfo.roomName && '' !== this.roomInfo.roomName.trim()) {
+      return this.roomInfo.roomName;
+    } else if (this.roomInfo.roomType === RoomType.Mytalk) {
+      return 'MyTalk';
+    } else {
+      return this.userInfoList
+        .filter(user => {
+          if (this.roomInfo.roomType === RoomType.Single) {
+            return user.seq !== this.loginRes.userSeq;
+          } else {
+            return true;
+          }
+        })
+        .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0))
+        .map(user => user.name)
+        .join(',');
+    }
+  }
+
   selectContact() {}
 
   onSendMessage(message: string) {