Merge branch 'master' of http://10.81.13.221:6990/Web/next-ucap-messenger

# Conflicts:
#	projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
#	projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
#	projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html

@@ -36,8 +36,17 @@
     </mat-menu>
   </div>
   <div>
-    <ucap-group-expansion-panel #groupExpansionPanel [groupBuddyList]="groupBuddyList$ | async"
+    <ucap-group-expansion-panel
-      [favoritBuddyList]="favoritBuddyList$ | async" (selectBuddy)="onSelectBuddy($event)">
+      #groupExpansionPanel
+      [groupBuddyList]="groupBuddyList$ | async"
+      [favoritBuddyList]="favoritBuddyList$ | async"
+    >
+      <ucap-profile-user-list-item
+        *ucapGroupExpansionPanelItem="let userInfo"
+        [userInfo]="userInfo"
+        (click)="onSelectBuddy(userInfo)"
+      >
+      </ucap-profile-user-list-item>
     </ucap-group-expansion-panel>
   </div>
 </div>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts

@@ -144,7 +144,8 @@ export class GroupComponent implements OnInit {
   }
 
   onSelectBuddy(buddy: UserInfo) {
-    this.store.dispatch(ChatStore.selectedRoom({ roomSeq: String(buddy.seq) }));
+    // this.store.dispatch(ChatStore.selectedRoom({ roomSeq: String(buddy.seq) }));
+    this.logger.debug('onSelectBuddy', buddy);
   }
 
   onKeyDownEnterOrganizationTenantSearch(params: {

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

@@ -12,6 +12,12 @@
       </div>
 
       <div>
+        <button *ngIf="!!roomInfo" mat-icon-button (click)="onClickReceiveAlarm($event)"
+          aria-label="Toggle Receive Alarm">
+          <mat-icon class="amber-fg" *ngIf="roomInfo.receiveAlarm">notifications_active</mat-icon>
+          <mat-icon class="secondary-text" *ngIf="!roomInfo.receiveAlarm">notifications_off</mat-icon>
+        </button>
+
         <button mat-icon-button [matMenuTriggerFor]="contactMenu" aria-label="more">
           <mat-icon>more_vert</mat-icon>
         </button>

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

@@ -15,6 +15,7 @@ import { Info, EventType } from '@ucap-webmessenger/protocol-event';
 import * as AppStore from '@app/store';
 import * as EventStore from '@app/store/messenger/event';
 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 } from '@app/types';
@@ -109,6 +110,10 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
     );
   }
 
+  onClickReceiveAlarm() {
+    this.store.dispatch(RoomStore.updateOnlyAlarm({ roomInfo: this.roomInfo }));
+  }
+
   private scrollToBottomForMessageBoxContainer(): void {
     try {
       this.messageBoxContainer.nativeElement.scrollTop = this.messageBoxContainer.nativeElement.scrollHeight;

projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.ts

@@ -106,7 +106,7 @@ const roomInfo: RoomInfo = {
   finalEventDate: '2019-09-30 13:57:06',
   joinUserCount: 2,
   noReadCnt: 0,
-  isAlarm: true,
+  receiveAlarm: true,
   isJoinRoom: true,
   expiredFileStdSeq: 0,
   isTimeRoom: true,

projects/ucap-webmessenger-app/src/app/services/notification.service.ts

@@ -12,8 +12,6 @@ import {
   LogoutRemoteNotification
 } from '@ucap-webmessenger/protocol-authentication';
 
-import * as AuthenticationStore from '@app/store/account/authentication';
-import * as EventStore from '@app/store/messenger/event';
 import { NGXLogger } from 'ngx-logger';
 import {
   EventProtocolService,
@@ -53,6 +51,12 @@ import {
   UpdateFontNotification
 } from '@ucap-webmessenger/protocol-room';
 
+import * as AuthenticationStore from '@app/store/account/authentication';
+import * as InfoStore from '@app/store/account/info';
+import * as EventStore from '@app/store/messenger/event';
+import * as RoomStore from '@app/store/messenger/room';
+import * as StatusStore from '@app/store/messenger/status';
+
 @Injectable()
 export class AppNotificationService {
   constructor(
@@ -108,19 +112,9 @@ export class AppNotificationService {
                   noti
                 );
 
-                const appendInfo: Info = {
-                  seq: noti.seq,
-                  type: noti.eventType,
-                  senderSeq: noti.SENDER_SEQ,
-                  sendDate: noti.sendDate,
-                  sentMessage: noti.message,
-                  receiverCount: noti.receiverCount
-                };
-
                 this.store.dispatch(
-                  EventStore.newInfo({
+                  EventStore.sendNotification({
-                    roomSeq: noti.roomSeq,
+                    noti
-                    info: appendInfo
                   })
                 );
               }
@@ -133,6 +127,11 @@ export class AppNotificationService {
                   'Notification::eventProtocolService::ReadNotification',
                   noti
                 );
+                this.store.dispatch(
+                  EventStore.readNotification({
+                    noti
+                  })
+                );
               }
               break;
             case SSVC_TYPE_EVENT_CANCEL_NOTI:
@@ -142,6 +141,11 @@ export class AppNotificationService {
                   'Notification::eventProtocolService::CancelNotification',
                   noti
                 );
+                this.store.dispatch(
+                  EventStore.cancelNotification({
+                    noti
+                  })
+                );
               }
               break;
             case SSVC_TYPE_EVENT_DEL_RES:
@@ -151,6 +155,11 @@ export class AppNotificationService {
                   'Notification::eventProtocolService::DelNotification',
                   noti
                 );
+                this.store.dispatch(
+                  EventStore.delNotification({
+                    noti
+                  })
+                );
               }
               break;
             default:
@@ -170,6 +179,11 @@ export class AppNotificationService {
                   'Notification::infoProtocolService::UserNotification',
                   noti
                 );
+                this.store.dispatch(
+                  InfoStore.userNotification({
+                    noti
+                  })
+                );
               }
               break;
             default:
@@ -189,6 +203,11 @@ export class AppNotificationService {
                   'Notification::roomProtocolService::InviteNotification',
                   noti
                 );
+                this.store.dispatch(
+                  RoomStore.inviteNotification({
+                    noti
+                  })
+                );
               }
               break;
             case SSVC_TYPE_ROOM_EXIT_NOTI:
@@ -198,6 +217,11 @@ export class AppNotificationService {
                   'Notification::roomProtocolService::ExitNotification',
                   noti
                 );
+                this.store.dispatch(
+                  RoomStore.exitNotification({
+                    noti
+                  })
+                );
               }
               break;
             case SSVC_TYPE_ROOM_EXIT_FORCING_NOTI:
@@ -207,6 +231,11 @@ export class AppNotificationService {
                   'Notification::roomProtocolService::ExitForcingNotification',
                   noti
                 );
+                this.store.dispatch(
+                  RoomStore.exitForcingNotification({
+                    noti
+                  })
+                );
               }
               break;
             case SSVC_TYPE_ROOM_FONT_UPD_NOTI:
@@ -216,6 +245,11 @@ export class AppNotificationService {
                   'Notification::roomProtocolService::UpdateFontNotification',
                   noti
                 );
+                this.store.dispatch(
+                  RoomStore.updateFontNotification({
+                    noti
+                  })
+                );
               }
               break;
             default:
@@ -235,6 +269,11 @@ export class AppNotificationService {
                   'Notification::statusProtocolService::StatusNotification',
                   noti
                 );
+                this.store.dispatch(
+                  StatusStore.statusNotification({
+                    noti
+                  })
+                );
               }
               break;
             default:

projects/ucap-webmessenger-app/src/app/store/account/index.ts

@@ -2,16 +2,22 @@ import { Type } from '@angular/core';
 import { Action, combineReducers, Selector, createSelector } from '@ngrx/store';
 
 import * as AuthenticationStore from './authentication';
+import * as InfoStore from './info';
 
 export interface State {
   authentication: AuthenticationStore.State;
+  info: InfoStore.State;
 }
 
-export const effects: Type<any>[] = [AuthenticationStore.Effects];
+export const effects: Type<any>[] = [
+  AuthenticationStore.Effects,
+  InfoStore.Effects
+];
 
 export function reducers(state: State | undefined, action: Action) {
   return combineReducers({
-    authentication: AuthenticationStore.reducer
+    authentication: AuthenticationStore.reducer,
+    info: InfoStore.reducer
   })(state, action);
 }
 
@@ -22,6 +28,13 @@ export function selectors<S>(selector: Selector<any, State>) {
         selector,
         (state: State) => state.authentication
       )
+    ),
+
+    InfoSelector: InfoStore.selectors(
+      createSelector(
+        selector,
+        (state: State) => state.info
+      )
     )
   };
 }

projects/ucap-webmessenger-app/src/app/store/account/info/actions.ts

@@ -0,0 +1,8 @@
+import { createAction, props } from '@ngrx/store';
+
+import { UserNotification } from '@ucap-webmessenger/protocol-info';
+
+export const userNotification = createAction(
+  '[Account::Info] User Notification',
+  props<{ noti: UserNotification }>()
+);

projects/ucap-webmessenger-app/src/app/store/account/info/effects.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+
+import { Store } from '@ngrx/store';
+
+import { NGXLogger } from 'ngx-logger';
+import { userNotification } from './actions';
+import { map, tap } from 'rxjs/operators';
+
+@Injectable()
+export class Effects {
+  userNotification$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(userNotification),
+        map(action => action.noti),
+        tap(noti => {})
+      );
+    },
+    { dispatch: false }
+  );
+
+  constructor(
+    private actions$: Actions,
+    private store: Store<any>,
+    private logger: NGXLogger
+  ) {}
+}

projects/ucap-webmessenger-app/src/app/store/account/info/index.ts

@@ -0,0 +1,4 @@
+export * from './actions';
+export * from './effects';
+export * from './reducers';
+export * from './state';

projects/ucap-webmessenger-app/src/app/store/account/info/reducers.ts

@@ -0,0 +1,4 @@
+import { createReducer, on } from '@ngrx/store';
+import { initialState } from './state';
+
+export const reducer = createReducer(initialState);

projects/ucap-webmessenger-app/src/app/store/account/info/state.ts

@@ -0,0 +1,18 @@
+import { Selector, createSelector } from '@ngrx/store';
+
+export interface State {
+  selectedRoom: string | null;
+}
+
+export const initialState: State = {
+  selectedRoom: null
+};
+
+export function selectors<S>(selector: Selector<any, State>) {
+  return {
+    selectedRoom: createSelector(
+      selector,
+      (state: State) => state.selectedRoom
+    )
+  };
+}

projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts

@@ -4,7 +4,11 @@ import {
   Info,
   InfoResponse,
   SendResponse,
-  SendRequest
+  SendRequest,
+  SendNotification,
+  ReadNotification,
+  CancelNotification,
+  DelNotification
 } from '@ucap-webmessenger/protocol-event';
 
 export const info = createAction(
@@ -57,3 +61,23 @@ export const sendFailure = createAction(
   '[Messenger::Event] Send Failure',
   props<{ error: any }>()
 );
+
+export const sendNotification = createAction(
+  '[Messenger::Event] Send Notification',
+  props<{ noti: SendNotification }>()
+);
+
+export const readNotification = createAction(
+  '[Messenger::Event] Read Notification',
+  props<{ noti: ReadNotification }>()
+);
+
+export const cancelNotification = createAction(
+  '[Messenger::Event] Cancel Notification',
+  props<{ noti: CancelNotification }>()
+);
+
+export const delNotification = createAction(
+  '[Messenger::Event] Delete Notification',
+  props<{ noti: DelNotification }>()
+);

projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts

@@ -35,7 +35,11 @@ import {
   sendSuccess,
   sendFailure,
   appendInfoList,
-  newInfo
+  newInfo,
+  sendNotification,
+  readNotification,
+  cancelNotification,
+  delNotification
 } from './actions';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { RoomInfo } from '@ucap-webmessenger/protocol-room';
@@ -130,6 +134,30 @@ export class Effects {
     { dispatch: false }
   );
 
+  sendNotification$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(sendNotification),
+        map(action => action.noti),
+        tap(noti => {
+          const appendInfo: Info = {
+            seq: noti.seq,
+            type: noti.eventType,
+            senderSeq: noti.SENDER_SEQ,
+            sendDate: noti.sendDate,
+            sentMessage: noti.message,
+            receiverCount: noti.receiverCount
+          };
+
+          this.store.dispatch(
+            newInfo({ roomSeq: noti.roomSeq, info: appendInfo })
+          );
+        })
+      );
+    },
+    { dispatch: false }
+  );
+
   newInfo$ = createEffect(
     () => {
       return this.actions$.pipe(
@@ -151,6 +179,39 @@ export class Effects {
     { dispatch: false }
   );
 
+  readNotification$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(readNotification),
+        map(action => action.noti),
+        tap(noti => {})
+      );
+    },
+    { dispatch: false }
+  );
+
+  cancelNotification$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(cancelNotification),
+        map(action => action.noti),
+        tap(noti => {})
+      );
+    },
+    { dispatch: false }
+  );
+
+  delNotification$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(delNotification),
+        map(action => action.noti),
+        tap(noti => {})
+      );
+    },
+    { dispatch: false }
+  );
+
   constructor(
     private actions$: Actions,
     private store: Store<any>,

projects/ucap-webmessenger-app/src/app/store/messenger/room/actions.ts

@@ -3,7 +3,13 @@ import {
   InfoRequest,
   RoomInfo,
   UserInfoShort,
-  UserInfo
+  UserInfo,
+  InviteNotification,
+  ExitNotification,
+  ExitForcingNotification,
+  UpdateFontNotification,
+  UpdateResponse,
+  UpdateRequest
 } from '@ucap-webmessenger/protocol-room';
 
 export const info = createAction(
@@ -24,3 +30,45 @@ export const infoFailure = createAction(
   '[Messenger::Room] Info Failure',
   props<{ error: any }>()
 );
+
+export const inviteNotification = createAction(
+  '[Messenger::Room] Invite Notification',
+  props<{ noti: InviteNotification }>()
+);
+
+export const exitNotification = createAction(
+  '[Messenger::Room] Exit Notification',
+  props<{ noti: ExitNotification }>()
+);
+
+export const exitForcingNotification = createAction(
+  '[Messenger::Room]  Exit Forcing Notification',
+  props<{ noti: ExitForcingNotification }>()
+);
+
+export const updateFontNotification = createAction(
+  '[Messenger::Room]  Update Font Notification',
+  props<{ noti: UpdateFontNotification }>()
+);
+
+export const updateOnlyAlarm = createAction(
+  '[Messenger::Room] Update Only Alarm',
+  props<{ roomInfo: RoomInfo }>()
+);
+
+export const update = createAction(
+  '[Messenger::Room] Update',
+  props<{ req: UpdateRequest }>()
+);
+
+export const updateSuccess = createAction(
+  '[Messenger::Room] Update Success',
+  props<{
+    res: UpdateResponse;
+  }>()
+);
+
+export const updateFailure = createAction(
+  '[Messenger::Room] Update Failure',
+  props<{ error: any }>()
+);

projects/ucap-webmessenger-app/src/app/store/messenger/room/effects.ts

@@ -2,12 +2,19 @@ import { Injectable } from '@angular/core';
 
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 
-import { Store } from '@ngrx/store';
+import { Store, select } from '@ngrx/store';
 
 import { NGXLogger } from 'ngx-logger';
 
 import { of } from 'rxjs';
-import { tap, switchMap, map, catchError } from 'rxjs/operators';
+import {
+  tap,
+  switchMap,
+  map,
+  catchError,
+  exhaustMap,
+  withLatestFrom
+} from 'rxjs/operators';
 import {
   RoomInfo,
   UserInfoShort,
@@ -19,12 +26,25 @@ import {
   SSVC_TYPE_ROOM_INFO_USER2,
   SSVC_TYPE_ROOM_INFO_RES,
   UserShortData,
-  UserData
+  UserData,
+  UpdateResponse
 } from '@ucap-webmessenger/protocol-room';
 
 import * as ChatStore from '@app/store/messenger/chat';
 
-import { info, infoSuccess, infoFailure } from './actions';
+import {
+  info,
+  infoSuccess,
+  infoFailure,
+  inviteNotification,
+  exitNotification,
+  exitForcingNotification,
+  updateFontNotification,
+  updateOnlyAlarm,
+  update,
+  updateSuccess,
+  updateFailure
+} from './actions';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
 
@@ -91,6 +111,79 @@ export class Effects {
     { dispatch: false }
   );
 
+  update$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(update),
+      map(action => action.req),
+      exhaustMap(req => {
+        return this.roomProtocolService.update(req).pipe(
+          map((res: UpdateResponse) => {
+            return updateSuccess({ res });
+          }),
+          catchError(error => of(updateFailure({ error })))
+        );
+      })
+    )
+  );
+
+  updateOnlyAlarm$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(updateOnlyAlarm),
+      map(action => action.roomInfo),
+      map(roomInfo =>
+        update({
+          req: {
+            roomSeq: roomInfo.roomSeq,
+            roomName: roomInfo.roomName,
+            receiveAlarm: !roomInfo.receiveAlarm,
+            syncAll: false
+          }
+        })
+      )
+    )
+  );
+
+  inviteNotification$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(inviteNotification),
+        map(action => action.noti),
+        tap(noti => {})
+      );
+    },
+    { dispatch: false }
+  );
+  exitNotification$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(exitNotification),
+        map(action => action.noti),
+        tap(noti => {})
+      );
+    },
+    { dispatch: false }
+  );
+  exitForcingNotification$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(exitForcingNotification),
+        map(action => action.noti),
+        tap(noti => {})
+      );
+    },
+    { dispatch: false }
+  );
+  updateFontNotification$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(updateFontNotification),
+        map(action => action.noti),
+        tap(noti => {})
+      );
+    },
+    { dispatch: false }
+  );
+
   constructor(
     private actions$: Actions,
     private store: Store<any>,

projects/ucap-webmessenger-app/src/app/store/messenger/room/reducers.ts

@@ -1,6 +1,6 @@
 import { createReducer, on } from '@ngrx/store';
 import { initialState } from './state';
-import { infoSuccess } from './actions';
+import { infoSuccess, updateSuccess } from './actions';
 
 import * as AuthenticationStore from '@app/store/account/authentication';
 
@@ -15,6 +15,17 @@ export const reducer = createReducer(
     };
   }),
 
+  on(updateSuccess, (state, action) => {
+    return {
+      ...state,
+      roomInfo: {
+        ...state.roomInfo,
+        roomName: action.res.roomName,
+        receiveAlarm: action.res.receiveAlarm
+      }
+    };
+  }),
+
   on(AuthenticationStore.logout, (state, action) => {
     return {
       ...initialState

projects/ucap-webmessenger-app/src/app/store/messenger/status/actions.ts

@@ -1,7 +1,8 @@
 import { createAction, props } from '@ngrx/store';
 import {
   BulkInfoRequest,
-  StatusBulkInfo
+  StatusBulkInfo,
+  StatusNotification
 } from '@ucap-webmessenger/protocol-status';
 
 export const bulkInfo = createAction(
@@ -18,3 +19,8 @@ export const bulkInfoFailure = createAction(
   '[Messenger::Status] Bulk Info Failure',
   props<{ error: any }>()
 );
+
+export const statusNotification = createAction(
+  '[Messenger::Status]  Status Notification',
+  props<{ noti: StatusNotification }>()
+);

projects/ucap-webmessenger-app/src/app/store/messenger/status/effects.ts

@@ -6,7 +6,12 @@ import { Store } from '@ngrx/store';
 
 import { NGXLogger } from 'ngx-logger';
 import * as SyncStore from '@app/store/messenger/sync';
-import { bulkInfo, bulkInfoSuccess, bulkInfoFailure } from './actions';
+import {
+  bulkInfo,
+  bulkInfoSuccess,
+  bulkInfoFailure,
+  statusNotification
+} from './actions';
 import { tap, switchMap, map, catchError } from 'rxjs/operators';
 import {
   StatusProtocolService,
@@ -68,6 +73,17 @@ export class Effects {
     { dispatch: false }
   );
 
+  // statusNotification$ = createEffect(
+  //   () => {
+  //     return this.actions$.pipe(
+  //       ofType(statusNotification),
+  //       map(action => action.noti),
+  //       tap(noti => {})
+  //     );
+  //   },
+  //   { dispatch: false }
+  // );
+
   constructor(
     private actions$: Actions,
     private store: Store<any>,

projects/ucap-webmessenger-app/src/app/store/messenger/status/reducers.ts

@@ -1,15 +1,41 @@
 import { createReducer, on } from '@ngrx/store';
-import { initialState } from './state';
+import { initialState, State, adapterStatusBulkInfo } from './state';
-import { bulkInfoSuccess } from './actions';
+import { bulkInfoSuccess, statusNotification } from './actions';
 
 import * as AuthenticationStore from '@app/store/account/authentication';
+import { StatusBulkInfo } from '@ucap-webmessenger/protocol-status';
 
 export const reducer = createReducer(
   initialState,
   on(bulkInfoSuccess, (state, action) => {
     return {
       ...state,
-      statusBulkInfoList: action.statusBulkInfoList
+      statusBulkInfo: adapterStatusBulkInfo.addAll(action.statusBulkInfoList, {
+        ...state.statusBulkInfo
+      })
+    } as State;
+  }),
+
+  on(statusNotification, (state, action) => {
+    const noti = action.noti;
+
+    const statusBulkInfoState: StatusBulkInfo = {
+      ...state.statusBulkInfo.entities[noti.userSeq],
+      conferenceStatus: noti.conferenceStatus,
+      imessengerStatus: noti.imessengerStatus,
+      mobileConferenceStatus: noti.mobileConferenceStatus,
+      mobileStatus: noti.mobileStatus,
+      pcStatus: noti.pcStatus,
+      phoneStatus: noti.phoneStatus,
+      statusMessage: noti.statusMessage
+    };
+
+    return {
+      ...state,
+      statusBulkInfo: adapterStatusBulkInfo.updateOne(
+        { id: noti.userSeq, changes: statusBulkInfoState },
+        { ...state.statusBulkInfo }
+      )
     };
   }),
 

projects/ucap-webmessenger-app/src/app/store/messenger/status/state.ts

@@ -1,19 +1,48 @@
 import { Selector, createSelector } from '@ngrx/store';
 import { StatusBulkInfo } from '@ucap-webmessenger/protocol-status';
+import { EntityState, createEntityAdapter } from '@ngrx/entity';
+
+export interface StatusBulkInfoState extends EntityState<StatusBulkInfo> {}
 
 export interface State {
-  statusBulkInfoList: StatusBulkInfo[];
+  statusBulkInfo: StatusBulkInfoState;
 }
 
+export const adapterStatusBulkInfo = createEntityAdapter<StatusBulkInfo>({
+  selectId: statusBulkInfo => statusBulkInfo.userSeq
+});
+
+const statusBulkInfoInitialState: StatusBulkInfoState = adapterStatusBulkInfo.getInitialState(
+  {}
+);
+
 export const initialState: State = {
-  statusBulkInfoList: []
+  statusBulkInfo: statusBulkInfoInitialState
 };
 
+const {
+  selectAll: ngeSelectAllStatusBulkInfo,
+  selectEntities: ngeSelectEntitiesStatusBulkInfo,
+  selectIds: ngeSelectIdsStatusBulkInfo,
+  selectTotal: ngeSelectTotalStatusBulkInfo
+} = adapterStatusBulkInfo.getSelectors();
+
 export function selectors<S>(selector: Selector<any, State>) {
+  const selectStatusBulkInfo = createSelector(
+    selector,
+    (state: State) => state.statusBulkInfo
+  );
+
   return {
-    statusBulkInfoList: createSelector(
+    selectAllStatusBulkInfo: createSelector(
-      selector,
+      selectStatusBulkInfo,
-      (state: State) => state.statusBulkInfoList
+      ngeSelectAllStatusBulkInfo
-    )
+    ),
+    selectStatusBulkInfo: (userSeq: number) =>
+      createSelector(
+        selectStatusBulkInfo,
+        ngeSelectEntitiesStatusBulkInfo,
+        (_, entities) => entities[userSeq]
+      )
   };
 }

projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts

@@ -19,6 +19,8 @@ import {
 } from '@ucap-webmessenger/protocol-sync';
 
 import * as AuthenticationStore from '@app/store/account/authentication';
+import * as RoomStore from '@app/store/messenger/room';
+import { RoomInfo } from '@ucap-webmessenger/protocol-room';
 
 export const reducer = createReducer(
   initialState,
@@ -95,6 +97,22 @@ export const reducer = createReducer(
     };
   }),
 
+  on(RoomStore.updateSuccess, (state, action) => {
+    const roomInfo: RoomInfo = {
+      ...state.room.entities[action.res.roomSeq],
+      roomName: action.res.roomName,
+      receiveAlarm: action.res.receiveAlarm
+    };
+
+    return {
+      ...state,
+      room: adapterRoom.updateOne(
+        { id: action.res.roomSeq, changes: roomInfo },
+        { ...state.room }
+      )
+    };
+  }),
+
   on(AuthenticationStore.logout, (state, action) => {
     return {
       ...initialState

projects/ucap-webmessenger-protocol-room/src/lib/models/room-info.ts

@@ -2,30 +2,30 @@ import { RoomType } from '../types/room.type';
 import { EventType } from '@ucap-webmessenger/protocol-event';
 
 export interface RoomInfo {
-  // 0. 대화방SEQ
+  /** 0. 대화방SEQ */
   roomSeq: string;
-  // 1. 대화방종류
+  /** 1. 대화방종류 */
   roomType: RoomType;
-  // 2. 대화방명
+  /** 2. 대화방명 */
   roomName: string;
-  // 3. 최종타입
+  /** 3. 최종타입 */
   finalEventType: EventType;
-  // 4. 최종대화
+  /** 4. 최종대화 */
   finalEventMessage: string;
-  // 5. 최종시간
+  /** 5. 최종시간 */
   finalEventDate: string;
-  // 6. 참여인원수
+  /** 6. 참여인원수 */
   joinUserCount: number;
-  // 7. 안읽은수
+  /** 7. 안읽은수 */
   noReadCnt: number;
-  // 8. 알람여부
+  /** 8. 알람여부 */
-  isAlarm: boolean;
+  receiveAlarm: boolean;
-  // 9. 참여여부
+  /** 9. 참여여부 */
   isJoinRoom: boolean;
-  // 10. 유효한파일 이벤트 기준 SEQ
+  /** 10. 유효한파일 이벤트 기준 SEQ */
   expiredFileStdSeq: number;
-  // 11. 타이머대화방여부YN
+  /** 11. 타이머대화방여부YN */
   isTimeRoom: boolean;
-  // 12. 타이머시간(n)
+  /** 12. 타이머시간(n) */
   timeRoomInterval: number;
 }

projects/ucap-webmessenger-protocol-room/src/lib/protocols/info.ts

@@ -90,7 +90,7 @@ export const decodeInfoData: ProtocolDecoder<InfoData> = (
         finalEventDate: info[5],
         joinUserCount: Number(info[6]),
         noReadCnt: Number(info[7]),
-        isAlarm: info[8] !== 'N' ? true : false,
+        receiveAlarm: info[8] !== 'N' ? true : false,
         isJoinRoom: info[9] === 'Y' ? true : false,
         expiredFileStdSeq: Number(info[10]),
         isTimeRoom: info[11] === 'Y' ? true : false,

projects/ucap-webmessenger-protocol-room/src/lib/protocols/update.ts

@@ -11,25 +11,25 @@ import {
 } from '@ucap-webmessenger/protocol';
 
 export interface UpdateRequest extends ProtocolRequest {
-  // 대화방SEQ(s)
+  /** 대화방SEQ(s) */
   roomSeq: string;
-  // 대화방제목(s)
+  /** 대화방제목(s) */
   roomName: string;
-  // 알람여부(y)
+  /** 알람여부(y) */
-  isAlarm: boolean;
+  receiveAlarm: boolean;
-  // 동기화여부(s)
+  /** 동기화여부(s) */
-  isSyncAll: boolean;
+  syncAll: boolean;
 }
 
 export interface UpdateResponse extends ProtocolResponse {
-  // 대화방SEQ(s)
+  /** 대화방SEQ(s) */
   roomSeq: string;
-  // 대화방제목(s)
+  /** 대화방제목(s) */
   roomName: string;
-  // 알람여부(y)
+  /** 알람여부(y) */
-  isAlarm: boolean;
+  receiveAlarm: boolean;
-  // 동기화여부(s)
+  /** 동기화여부(s) */
-  isSyncAll: boolean;
+  syncAll: boolean;
 }
 
 export const encodeUpdate: ProtocolEncoder<UpdateRequest> = (
@@ -41,11 +41,11 @@ export const encodeUpdate: ProtocolEncoder<UpdateRequest> = (
   bodyList.push({ type: PacketBodyValue.String, value: req.roomName });
   bodyList.push({
     type: PacketBodyValue.String,
-    value: req.isAlarm ? 'Y' : 'N'
+    value: req.receiveAlarm ? 'Y' : 'N'
   });
   bodyList.push({
     type: PacketBodyValue.String,
-    value: req.isSyncAll ? 'Y' : 'N'
+    value: req.syncAll ? 'Y' : 'N'
   });
   return bodyList;
 };
@@ -56,8 +56,8 @@ export const decodeUpdate: ProtocolDecoder<UpdateResponse> = (
   return decodeProtocolMessage(message, {
     roomSeq: message.bodyList[0],
     roomName: message.bodyList[1],
-    isAlarm: message.bodyList[2] === 'Y' ? true : false,
+    receiveAlarm: message.bodyList[2] === 'Y' ? true : false,
-    isSyncAll: message.bodyList[3] === 'Y' ? true : false
+    syncAll: message.bodyList[3] === 'Y' ? true : false
   } as UpdateResponse);
 };
 

projects/ucap-webmessenger-protocol-room/src/lib/services/room-protocol.service.ts

@@ -286,6 +286,7 @@ export class RoomProtocolService {
         })
       );
   }
+
   public updateTimerSet(
     req: UpdateTimerSetRequest
   ): Observable<UpdateTimerSetResponse> {
@@ -302,6 +303,7 @@ export class RoomProtocolService {
         })
       );
   }
+
   public updateFont(req: UpdateFontRequest): Observable<UpdateFontResponse> {
     return this.protocolService
       .call(

projects/ucap-webmessenger-protocol-sync/src/lib/protocols/room.ts

@@ -84,7 +84,7 @@ export const decodeRoomData: ProtocolDecoder<RoomData> = (
         finalEventDate: info[5],
         joinUserCount: Number(info[6]),
         noReadCnt: Number(info[7]),
-        isAlarm: info[8] !== 'N' ? true : false,
+        receiveAlarm: info[8] !== 'N' ? true : false,
         isJoinRoom: info[9] === 'Y' ? true : false,
         expiredFileStdSeq: Number(info[10]),
         isTimeRoom: info[11] === 'Y' ? true : false,

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

@@ -39,24 +39,28 @@ export class MessagesComponent implements OnInit {
   }
 
   getUserName(seq: number): string {
-    if (!!this.userInfos) {
+    if (!this.userInfos) {
-      const userInfo: UserInfo[] = this.userInfos.filter(
+      return '';
-        user => user.seq === seq
+    }
-      );
+
-      if (!!userInfo && userInfo.length > 0) {
+    const userInfo: UserInfo[] = this.userInfos.filter(
-        return userInfo[0].name;
+      user => user.seq === seq
-      }
+    );
+    if (!!userInfo && userInfo.length > 0) {
+      return userInfo[0].name;
     }
     return '(알수없는 사용자)';
   }
   getUserProfile(seq: number): string {
-    if (!!this.userInfos) {
+    if (!this.userInfos) {
-      const userInfo: UserInfo[] = this.userInfos.filter(
+      return '';
-        user => user.seq === seq
+    }
-      );
+
-      if (!!userInfo && userInfo.length > 0) {
+    const userInfo: UserInfo[] = this.userInfos.filter(
-        return this.profileImageRoot + userInfo[0].profileImageFile;
+      user => user.seq === seq
-      }
+    );
+    if (!!userInfo && userInfo.length > 0) {
+      return this.profileImageRoot + userInfo[0].profileImageFile;
     }
     return '';
   }

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html

@@ -5,9 +5,20 @@
       <mat-panel-description> </mat-panel-description>
     </mat-expansion-panel-header>
 
-    <ucap-profile-user-list-item *ngFor="let favUserList of favoritBuddyList" [userInfo]="favUserList"
+    <ng-container *ngFor="let favUserList of favoritBuddyList">
-      (click)="onClickBuddy(favUserList)">
+      <ng-template
-    </ucap-profile-user-list-item>
+        [ngTemplateOutlet]="expansionPanelItemTemplateRef"
+        [ngTemplateOutletContext]="{ $implicit: favUserList }"
+      >
+      </ng-template>
+    </ng-container>
+
+    <!-- <ucap-profile-user-list-item
+      *ngFor="let favUserList of favoritBuddyList"
+      [userInfo]="favUserList"
+      (click)="onClickBuddy(favUserList)"
+    >
+    </ucap-profile-user-list-item> -->
   </mat-expansion-panel>
 
   <mat-expansion-panel *ngFor="let groupBuddy of groupBuddyList">
@@ -16,9 +27,19 @@
       <mat-panel-description> </mat-panel-description>
     </mat-expansion-panel-header>
 
-    <ucap-profile-user-list-item *ngFor="let userInfo of groupBuddy.buddyList" [userInfo]="userInfo"
+    <ng-container *ngFor="let userInfo of groupBuddy.buddyList">
-      (click)="onClickBuddy(userInfo)">
+      <ng-template
-    </ucap-profile-user-list-item>
+        [ngTemplateOutlet]="expansionPanelItemTemplateRef"
+        [ngTemplateOutletContext]="{ $implicit: userInfo }"
+      ></ng-template>
+    </ng-container>
+
+    <!-- <ucap-profile-user-list-item
+      *ngFor="let userInfo of groupBuddy.buddyList"
+      [userInfo]="userInfo"
+      (click)="onClickBuddy(userInfo)"
+    >
+    </ucap-profile-user-list-item> -->
     <!-- <ucap-profile-user-list-item *ngFor="let userInfo of groupBuddy.buddyList" [userInfo]="userInfo"
       [presence]="presence">
     </ucap-profile-user-list-item> -->

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts

@@ -4,13 +4,16 @@ import {
   Input,
   Output,
   EventEmitter,
-  ViewChild
+  ViewChild,
+  ContentChild,
+  TemplateRef
 } from '@angular/core';
 
 import { ucapAnimations } from '@ucap-webmessenger/ui';
 
 import { GroupDetailData, UserInfo } from '@ucap-webmessenger/protocol-sync';
 import { MatAccordion } from '@angular/material';
+import { ExpansionPanelItemDirective } from '../directives/expansion-panel-item.directive';
 
 @Component({
   selector: 'ucap-group-expansion-panel',
@@ -28,6 +31,12 @@ export class ExpansionPanelComponent implements OnInit {
   @Output()
   selectBuddy = new EventEmitter<UserInfo>();
 
+  @ContentChild(ExpansionPanelItemDirective, {
+    read: TemplateRef,
+    static: true
+  })
+  expansionPanelItemTemplateRef: TemplateRef<ExpansionPanelItemDirective>;
+
   @ViewChild('groupAccordion', { static: true }) groupAccordion: MatAccordion;
 
   constructor() {}