쪽지 store 로 처리 > 상세보기, 뱃지카운트, 삭제, 발송취소

2019-12-27 15:26:03 +09:00 · 2019-12-27 15:26:03 +09:00 · 88e23c2f8c
commit 88e23c2f8c
parent d195fe0e19
10 changed files with 505 additions and 218 deletions
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
@ -91,8 +91,8 @@
        <!--<mat-icon>device_hub</mat-icon>-->
        <div
          class="icon-item"
-          [matBadgeHidden]="badgeMessageUnReadCount <= 0"
-          [matBadge]="badgeMessageUnReadCount"
+          [matBadgeHidden]="(badgeMessageUnReadCount$ | async) <= 0"
+          [matBadge]="badgeMessageUnReadCount$ | async"
          matBadgeDescription="확인하지 않은 메시지가 있습니다."
          matBadgeColor="accent"
          matBadgePosition="above after"
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
@ -17,11 +17,12 @@ import {
  CreateChatDialogData,
  CreateChatDialogResult
 } from '@app/layouts/messenger/dialogs/chat/create-chat.dialog.component';
-import { Subscription, of } from 'rxjs';
+import { Subscription, of, Observable } from 'rxjs';
 import { Store, select } from '@ngrx/store';

 import * as AppStore from '@app/store';
 import * as ChatStore from '@app/store/messenger/chat';
+import * as MessageStore from '@app/store/messenger/message';
 import * as SyncStore from '@app/store/messenger/sync';
 import { UserInfo } from '@ucap-webmessenger/protocol-sync';
 import {
@ -36,9 +37,7 @@ import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { MessageApiService, MessageType } from '@ucap-webmessenger/api-message';
 import { DeviceType } from '@ucap-webmessenger/core';
-import { UnreadCountRequest } from 'projects/ucap-webmessenger-api-message/src/lib/apis/unread-count';
 import { map, catchError, tap } from 'rxjs/operators';
-import { MessageStatusCode } from '@ucap-webmessenger/api';
 import {
  MessageWriteDialogComponent,
  MessageWriteDialogResult,
@ -87,8 +86,7 @@ export class LeftSideComponent implements OnInit, OnDestroy {

  badgeChatUnReadCount: number;
  badgeChatUnReadCountSubscription: Subscription;
-  badgeMessageUnReadCount: number;
-  badgeMessageUnReadCountSubscription: Subscription;
+  badgeMessageUnReadCount$: Observable<number>;
  badgeMessageInterval: any;

  /** 조직도에서 부서원 선택 */
@ -109,7 +107,6 @@ export class LeftSideComponent implements OnInit, OnDestroy {
    private store: Store<any>,
    private dialogService: DialogService,
    private sessionStorageService: SessionStorageService,
-    private messageApiService: MessageApiService,
    private logger: NGXLogger
  ) {
    this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
@ -139,6 +136,11 @@ export class LeftSideComponent implements OnInit, OnDestroy {
      )
      .subscribe();

+    /** About Message Badge */
+    this.badgeMessageUnReadCount$ = this.store.pipe(
+      select(AppStore.MessengerSelector.MessageSelector.unReadMessageCount)
+    );
+
    this.getMessageUnreadCount();
    this.badgeMessageInterval = setInterval(
      () => this.getMessageUnreadCount(),
@ -153,9 +155,6 @@ export class LeftSideComponent implements OnInit, OnDestroy {
    if (!!this.badgeChatUnReadCountSubscription) {
      this.badgeChatUnReadCountSubscription.unsubscribe();
    }
-    if (!!this.badgeMessageUnReadCountSubscription) {
-      this.badgeMessageUnReadCountSubscription.unsubscribe();
-    }
    if (!!this.loginResSubscription) {
      this.loginResSubscription.unsubscribe();
    }
@ -444,22 +443,7 @@ export class LeftSideComponent implements OnInit, OnDestroy {
  }

  getMessageUnreadCount(): void {
-    this.badgeMessageUnReadCountSubscription = this.messageApiService
-      .retrieveUnreadCount({
-        userSeq: this.loginRes.userSeq,
-        deviceType: DeviceType.PC,
-        tokenKey: this.loginRes.tokenString
-      } as UnreadCountRequest)
-      .pipe(
-        map(res => {
-          if (res.responseCode === MessageStatusCode.Success) {
-            this.badgeMessageUnReadCount = res.unreadCount;
-          } else {
-          }
-        }),
-        catchError(error => of(this.logger.error(error)))
-      )
-      .subscribe();
+    this.store.dispatch(MessageStore.retrieveUnreadCount({}));
  }

  getMyProfileImageWidget(): string {
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.ts
@ -8,9 +8,9 @@ import {
  Input,
  AfterViewChecked
 } from '@angular/core';
-import { of, Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { Store, select } from '@ngrx/store';
-import { map, catchError, take } from 'rxjs/operators';
+import { tap } from 'rxjs/operators';
 import { NGXLogger } from 'ngx-logger';

 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
@ -23,10 +23,7 @@ import {
  MessageType,
  MessageList,
  MessageSearchType,
-  DetailRequest,
-  MessageDetailInfo,
-  DelRequest,
-  CancelReservationRequest
+  MessageDetailInfo
 } from '@ucap-webmessenger/api-message';
 import { DeviceType } from '@ucap-webmessenger/core';
 import { MessageStatusCode } from '@ucap-webmessenger/api';
@ -79,6 +76,8 @@ export class MessageBoxComponent
  messageReservationList$: Observable<MessageList[]>;
  messageSearchList$: Observable<MessageList[]>;

+  messageDetailInfo: Subscription;
+
  currentTabIndex = 0;
  defaultPageSize = 1000; // default

@ -119,9 +118,12 @@ export class MessageBoxComponent
      searchMessageSearchType: [MessageSearchType.Name]
    });

-    this.messageRetrieveList$ = this.store.pipe(
-      select(AppStore.MessengerSelector.MessageSelector.selectAllReceiveList)
-    );
+    this.messageRetrieveList$ = this.store
+      .pipe(
+        select(AppStore.MessengerSelector.MessageSelector.selectAllReceiveList)
+      )
+      .pipe(tap(info => console.log(info)));
+
    this.messageSendList$ = this.store.pipe(
      select(AppStore.MessengerSelector.MessageSelector.selectAllSendList)
    );
@ -134,6 +136,53 @@ export class MessageBoxComponent
      select(AppStore.MessengerSelector.MessageSelector.selectAllSearchList)
    );

+    this.messageDetailInfo = this.store
+      .pipe(
+        select(AppStore.MessengerSelector.MessageSelector.detailMessageInfo)
+      )
+      .subscribe(async info => {
+        if (!!info && info.responseCode === MessageStatusCode.Success) {
+          // Badge Refresh in case Receive Message..
+          if (info.msgInfo.type === MessageType.Receive) {
+            this.doRefreshUnReadCount.emit();
+          }
+
+          // detail view..
+          const result = await this.dialogService.open<
+            MessageDetailDialogComponent,
+            MessageDetailDialogData,
+            MessageDetailDialogResult
+          >(MessageDetailDialogComponent, {
+            width: '600px',
+            data: {
+              detail: info,
+              loginRes: this.loginRes,
+              environmentsInfo: this.environmentsInfo
+            }
+          });
+
+          if (!!result) {
+            // Clear detail Info in state
+            this.store.dispatch(MessageStore.detailMessageClear({}));
+
+            switch (result.returnType) {
+              case 'DEL':
+                // 단건 삭제.
+                this.doMessageDelete([result.messageInfo]);
+                break;
+              case 'CANCEL_RESERVATION':
+                // 단건 발송취소(예약)
+                this.doMessageCancelReservation(result.messageInfo);
+                break;
+              case 'UPDATE':
+                // 예약 수정
+                this.getRetrieveMessage(MessageType.Reservation, 0);
+                break;
+            }
+          }
+        }
+      });
+
    // 초기 검색은 수신함.
    this.getRetrieveMessage(MessageType.Receive, 0);

@ -149,7 +198,11 @@ export class MessageBoxComponent
    }
  }

-  ngOnDestroy(): void {}
+  ngOnDestroy(): void {
+    if (!!this.messageDetailInfo) {
+      this.messageDetailInfo.unsubscribe();
+    }
+  }

  onSelectedIndexTab(value: number) {
    this.tabs.selectedIndex = value;
@ -231,110 +284,34 @@ export class MessageBoxComponent

  /** 쪽지 상세보기 */
  onClickDetail(message: MessageList) {
-    this.messageApiService
-      .detailMessage({
-        userSeq: this.loginRes.userSeq,
-        deviceType: DeviceType.PC,
-        tokenKey: this.loginRes.tokenString,
-        type: message.type,
+    this.store.dispatch(
+      MessageStore.detailMessage({
+        messageType: message.type,
        msgId: message.msgId
-      } as DetailRequest)
-      .pipe(
-        take(1),
-        map(async res => {
-          if (res.responseCode === MessageStatusCode.Success) {
-            // Badge Refresh in case Receive Message..
-            if (res.msgInfo.type === MessageType.Receive) {
-              this.doRefreshUnReadCount.emit();
-            }
-
-            // detail view..
-            const result = await this.dialogService.open<
-              MessageDetailDialogComponent,
-              MessageDetailDialogData,
-              MessageDetailDialogResult
-            >(MessageDetailDialogComponent, {
-              width: '600px',
-              data: {
-                detail: res,
-                loginRes: this.loginRes,
-                environmentsInfo: this.environmentsInfo
-              }
-            });
-
-            if (!!result) {
-              switch (result.returnType) {
-                case 'DEL':
-                  // 단건 삭제.
-                  this.doMessageDelete([result.messageInfo]);
-                  break;
-                case 'CANCEL_RESERVATION':
-                  // 단건 발송취소(예약)
-                  this.doMessageCancelReservation(result.messageInfo);
-                  break;
-                case 'UPDATE':
-                  // 예약 수정
-                  this.getRetrieveMessage(MessageType.Reservation, 0);
-                  break;
-              }
-            }
-          } else {
-          }
-        }),
-        catchError(error => of(this.logger.error(error)))
-      )
-      .subscribe();
+      })
+    );
  }

  /** 쪽지(수신,발신) 삭제 */
  doMessageDelete(messageInfo: MessageDetailInfo[]): void {
    const msgList: { msgId: number }[] = [];
    messageInfo.forEach(info => msgList.push({ msgId: info.msgId }));
-    this.messageApiService
-      .deleteMessage({
-        userSeq: this.loginRes.userSeq,
-        deviceType: DeviceType.PC,
-        tokenKey: this.loginRes.tokenString,
-        type: messageInfo[0].type,
+
+    this.store.dispatch(
+      MessageStore.deleteMessage({
+        messageType: messageInfo[0].type,
        msgList
-      } as DelRequest)
-      .pipe(
-        take(1),
-        map(async res => {
-          if (res.responseCode === MessageStatusCode.Success) {
-          } else {
-            this.logger.error('message delete Error!');
-          }
-          // 현재탭 재조회.
-          this.onSelectedIndexChange(this.currentTabIndex);
-        }),
-        catchError(error => of(this.logger.error(error)))
-      )
-      .subscribe();
+      })
+    );
  }

  /** 쪽지(예약) 삭제 */
  doMessageCancelReservation(messageInfo: MessageDetailInfo): void {
-    this.messageApiService
-      .cancelReservationMessage({
-        userSeq: this.loginRes.userSeq,
-        deviceType: DeviceType.PC,
-        tokenKey: this.loginRes.tokenString,
-        type: messageInfo.type,
+    this.store.dispatch(
+      MessageStore.cancelReservationMessage({
+        messageType: messageInfo.type,
        msgId: messageInfo.msgId
-      } as CancelReservationRequest)
-      .pipe(
-        take(1),
-        map(async res => {
-          if (res.responseCode === MessageStatusCode.Success) {
-          } else {
-            this.logger.error('message(reservation) cancel Error!');
-          }
-          // 현재탭 재조회.
-          this.onSelectedIndexChange(this.currentTabIndex);
-        }),
-        catchError(error => of(this.logger.error(error)))
-      )
-      .subscribe();
+      })
+    );
  }
 }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.ts
@ -122,9 +122,10 @@ export class MessageDetailDialogComponent implements OnInit {
    // contents 내 이미지 Thumnail 파일 정보 수집.
    this.getThumbImage();

-    this.receivers = this.messageDetail.recvList.sort((a, b) =>
-      a.userName < b.userName ? -1 : a.userName > b.userName ? 1 : 0
-    );
+    this.receivers = this.messageDetail.recvList;
+    // this.receivers = this.messageDetail.recvList.sort((a, b) =>
+    //   a.userName < b.userName ? -1 : a.userName > b.userName ? 1 : 0
+    // );
  }

  getSendReceiverNames(): string {
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
@ -13,6 +13,7 @@ import { Store, select } from '@ngrx/store';

 import * as AppStore from '@app/store';
 import * as ChatStore from '@app/store/messenger/chat';
+import * as MessageStore from '@app/store/messenger/message';
 import { Observable, Subscription, of } from 'rxjs';
 import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';

@ -150,49 +151,20 @@ export class MainPageComponent implements OnInit, OnDestroy {
    this.msgOpenMessageSubscription = this.nativeService
      .msgOpenMessage()
      .subscribe(messageSeq => {
-        console.log(messageSeq);
+        // unreadCount refresh..
+        this.store.dispatch(MessageStore.retrieveUnreadCount({}));

        this.ngZone.run(() => {
-          this.messageApiService
-            .detailMessage({
-              userSeq: this.loginRes.userSeq,
-              deviceType: this.environmentsInfo.deviceType,
-              tokenKey: this.loginRes.tokenString,
-              type: MessageType.Receive,
+          /**
+           * 쪽지 상세보기.
+           * state 를 구독하여 Message.component.ts 에서 팝업 띄움.
+           */
+          this.store.dispatch(
+            MessageStore.detailMessage({
+              messageType: MessageType.Receive,
              msgId: Number(messageSeq)
-            } as DetailRequest)
-            .pipe(
-              take(1),
-              map(async res => {
-                if (res.responseCode === MessageStatusCode.Success) {
-                  // detail view..
-                  const result = await this.dialogService.open<
-                    MessageDetailDialogComponent,
-                    MessageDetailDialogData,
-                    MessageDetailDialogResult
-                  >(MessageDetailDialogComponent, {
-                    width: '600px',
-                    data: {
-                      detail: res,
-                      loginRes: this.loginRes,
-                      environmentsInfo: this.environmentsInfo
-                    }
-                  });
-
-                  if (!!result) {
-                    switch (result.returnType) {
-                      case 'DEL':
-                        // 단건 삭제.
-                        this.doMessageDelete([result.messageInfo]);
-                        break;
-                    }
-                  }
-                } else {
-                }
-              }),
-              catchError(error => of(this.logger.error(error)))
-            )
-            .subscribe();
+            })
+          );
        });
      });

@ -385,29 +357,4 @@ export class MainPageComponent implements OnInit, OnDestroy {
  onCloseRightDrawer() {
    this.rightDrawer.close();
  }
-
-  /** 쪽지(수신,발신) 삭제 */
-  doMessageDelete(messageInfo: MessageDetailInfo[]): void {
-    const msgList: { msgId: number }[] = [];
-    messageInfo.forEach(info => msgList.push({ msgId: info.msgId }));
-    this.messageApiService
-      .deleteMessage({
-        userSeq: this.loginRes.userSeq,
-        deviceType: DeviceType.PC,
-        tokenKey: this.loginRes.tokenString,
-        type: messageInfo[0].type,
-        msgList
-      } as DelRequest)
-      .pipe(
-        take(1),
-        map(async res => {
-          if (res.responseCode === MessageStatusCode.Success) {
-          } else {
-            this.logger.error('message delete Error!');
-          }
-        }),
-        catchError(error => of(this.logger.error(error)))
-      )
-      .subscribe();
-  }
 }
--- a/projects/ucap-webmessenger-app/src/app/services/notification.service.ts
+++ b/projects/ucap-webmessenger-app/src/app/services/notification.service.ts
@ -81,6 +81,7 @@ import {
 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 MessageStore from '@app/store/messenger/message';
 import * as SyncStore from '@app/store/messenger/sync';
 import * as RoomStore from '@app/store/messenger/room';
 import * as StatusStore from '@app/store/messenger/status';
@ -102,6 +103,7 @@ import { AppUserInfo, KEY_APP_USER_INFO } from '@app/types/app-user-info.type';
 import { environment } from '../../environments/environment';
 import { NotificationMethod } from '@ucap-webmessenger/core';
 import { Dictionary } from '@ngrx/entity';
+import { MessageType } from '@ucap-webmessenger/api-message';

@Injectable()
 export class AppNotificationService {
@ -559,7 +561,17 @@ export class AppNotificationService {
                  'Notification::umgProtocolService::UmgNotiNotification',
                  noti
                );
-                console.log(noti);
+
+                // unreadCount refresh..
+                this.store.dispatch(MessageStore.retrieveUnreadCount({}));
+
+                // Receive Message List refresh..
+                this.store.dispatch(
+                  MessageStore.retrieveMessage({
+                    messageType: MessageType.Receive
+                  })
+                );
+
                // notification..
                const appUserInfo = this.localStorageService.encGet<
                  AppUserInfo
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/message/actions.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/message/actions.ts
@ -2,9 +2,48 @@ import { createAction, props } from '@ngrx/store';
 import {
  MessageType,
  RetrieveResponse,
-  MessageSearchType
+  MessageSearchType,
+  DelRequest,
+  DelResponse,
+  DetailResponse
 } from '@ucap-webmessenger/api-message';

+export const detailMessage = createAction(
+  '[Messenger::Message] Detail Message',
+  props<{
+    messageType: MessageType;
+    msgId: number;
+  }>()
+);
+export const detailMessageSuccess = createAction(
+  '[Messenger::Message] Detail Message Success',
+  props<{
+    res: DetailResponse;
+  }>()
+);
+export const detailMessageFailure = createAction(
+  '[Messenger::Message] Detail Message Failure',
+  props<{ error: any }>()
+);
+
+export const detailMessageClear = createAction(
+  '[Messenger::Message] Detail Message',
+  props()
+);
+
+export const retrieveUnreadCount = createAction(
+  '[Messenger::Message] RetrieveMessage UnreadCount',
+  props()
+);
+export const retrieveUnreadCountSuccess = createAction(
+  '[Messenger::Message] RetrieveMessage UnreadCount Success',
+  props<{ count: number }>()
+);
+export const retrieveUnreadCountFailure = createAction(
+  '[Messenger::Message] RetrieveMessage UnreadCount Failure',
+  props<{ error: any }>()
+);
+
 export const retrieveMessage = createAction(
  '[Messenger::Message] RetrieveMessage',
  props<{
@ -40,3 +79,41 @@ export const searchMessageFailure = createAction(
  '[Messenger::Message] searchMessage Failure',
  props<{ error: any }>()
 );
+
+export const deleteMessage = createAction(
+  '[Messenger::Message] Delete Message',
+  props<{
+    messageType: MessageType;
+    msgList: { msgId: number }[];
+  }>()
+);
+export const deleteMessageSuccess = createAction(
+  '[Messenger::Message] Delete Message Success',
+  props<{
+    messageType: MessageType;
+    msgList: { msgId: number }[];
+  }>()
+);
+export const deleteMessageFailure = createAction(
+  '[Messenger::Message] Delete Message Failure',
+  props<{ error: any }>()
+);
+
+export const cancelReservationMessage = createAction(
+  '[Messenger::Message] Cancel Reservation Message',
+  props<{
+    messageType: MessageType;
+    msgId: number;
+  }>()
+);
+export const cancelReservationMessageSuccess = createAction(
+  '[Messenger::Message] Cancel Reservation Message Success',
+  props<{
+    messageType: MessageType;
+    msgId: number;
+  }>()
+);
+export const cancelReservationMessageFailure = createAction(
+  '[Messenger::Message] Cancel Reservation Message Failure',
+  props<{ error: any }>()
+);
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/message/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/message/effects.ts
@ -27,10 +27,9 @@ import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { KEY_ENVIRONMENTS_INFO } from './../../../types/environment.type';
 import { LoginInfo, KEY_LOGIN_INFO, EnvironmentsInfo } from '@app/types';
 import { Dictionary } from '@ngrx/entity';
-import { openSuccess, openFailure } from '../room';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
-import { StatusCode, MessageStatusCode } from '@ucap-webmessenger/api';
+import { MessageStatusCode } from '@ucap-webmessenger/api';
 import { environment } from '../../../../environments/environment';
 import {
  AlertDialogComponent,
@ -44,27 +43,126 @@ import {
  retrieveMessageSuccess,
  searchMessage,
  searchMessageSuccess,
-  searchMessageFailure
+  searchMessageFailure,
+  retrieveUnreadCount,
+  retrieveUnreadCountSuccess,
+  retrieveUnreadCountFailure,
+  deleteMessage,
+  deleteMessageSuccess,
+  deleteMessageFailure,
+  cancelReservationMessage,
+  cancelReservationMessageSuccess,
+  cancelReservationMessageFailure,
+  detailMessage,
+  detailMessageFailure,
+  detailMessageSuccess
 } from './actions';
 import {
  MessageApiService,
  RetrieveRequest,
  MessageType,
  RetrieveSearchRequest,
-  MessageSearchType
+  MessageSearchType,
+  DelRequest,
+  CancelReservationRequest,
+  DetailRequest
 } from '@ucap-webmessenger/api-message';
+import { UnreadCountRequest } from 'projects/ucap-webmessenger-api-message/src/lib/apis/unread-count';
+import {
+  MessageDetailDialogComponent,
+  MessageDetailDialogResult,
+  MessageDetailDialogData
+} from '@app/layouts/messenger/dialogs/message/message-detail.dialog.component';

@Injectable()
 export class Effects {
+  detailMessage$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(detailMessage),
+        withLatestFrom(
+          this.store.pipe(
+            select(
+              (state: any) =>
+                state.account.authentication.loginRes as LoginResponse
+            )
+          )
+        ),
+        switchMap(([req, loginResInfo]) => {
+          const environmentsInfo = this.sessionStorageService.get<
+            EnvironmentsInfo
+          >(KEY_ENVIRONMENTS_INFO);
+
+          const request: DetailRequest = {
+            userSeq: loginResInfo.userSeq,
+            deviceType: environmentsInfo.deviceType,
+            tokenKey: loginResInfo.tokenString,
+            type: req.messageType,
+            msgId: req.msgId
+          };
+          return this.messageApiService.detailMessage(request).pipe(
+            map(res => {
+              if (res.responseCode === MessageStatusCode.Success) {
+                this.store.dispatch(
+                  detailMessageSuccess({
+                    res
+                  })
+                );
+              }
+            }),
+            catchError(error => of(detailMessageFailure({ error })))
+          );
+        })
+      );
+    },
+    { dispatch: false }
+  );
+
+  retrieveUnreadCount$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(retrieveUnreadCount),
+        withLatestFrom(
+          this.store.pipe(
+            select(
+              (state: any) =>
+                state.account.authentication.loginRes as LoginResponse
+            )
+          )
+        ),
+        switchMap(([req, loginResInfo]) => {
+          // const loginResInfo: LoginResponse = this.sessionStorageService.get<
+          //   LoginResponse
+          // >(KEY_LOGIN_RES_INFO);
+          const environmentsInfo = this.sessionStorageService.get<
+            EnvironmentsInfo
+          >(KEY_ENVIRONMENTS_INFO);
+
+          const request: UnreadCountRequest = {
+            userSeq: loginResInfo.userSeq,
+            deviceType: environmentsInfo.deviceType,
+            tokenKey: loginResInfo.tokenString
+          };
+          return this.messageApiService.retrieveUnreadCount(request).pipe(
+            map(res => {
+              if (res.responseCode === MessageStatusCode.Success) {
+                this.store.dispatch(
+                  retrieveUnreadCountSuccess({
+                    count: res.unreadCount
+                  })
+                );
+              }
+            }),
+            catchError(error => of(retrieveUnreadCountFailure({ error })))
+          );
+        })
+      );
+    },
+    { dispatch: false }
+  );
+
  retrieveMessage$ = createEffect(
    () => {
-      // const loginResInfo: LoginResponse = this.sessionStorageService.get<
-      //   LoginResponse
-      // >(KEY_LOGIN_RES_INFO);
-      const environmentsInfo = this.sessionStorageService.get<EnvironmentsInfo>(
-        KEY_ENVIRONMENTS_INFO
-      );
-
      return this.actions$.pipe(
        ofType(retrieveMessage),
        withLatestFrom(
@ -76,6 +174,10 @@ export class Effects {
          )
        ),
        switchMap(([req, loginResInfo]) => {
+          const environmentsInfo = this.sessionStorageService.get<
+            EnvironmentsInfo
+          >(KEY_ENVIRONMENTS_INFO);
+
          const request: RetrieveRequest = {
            userSeq: loginResInfo.userSeq,
            deviceType: environmentsInfo.deviceType,
@ -144,10 +246,6 @@ export class Effects {

  searchMessage$ = createEffect(
    () => {
-      const environmentsInfo = this.sessionStorageService.get<EnvironmentsInfo>(
-        KEY_ENVIRONMENTS_INFO
-      );
-
      return this.actions$.pipe(
        ofType(searchMessage),
        withLatestFrom(
@ -159,6 +257,10 @@ export class Effects {
          )
        ),
        switchMap(([req, loginResInfo]) => {
+          const environmentsInfo = this.sessionStorageService.get<
+            EnvironmentsInfo
+          >(KEY_ENVIRONMENTS_INFO);
+
          const request: RetrieveRequest = {
            userSeq: loginResInfo.userSeq,
            deviceType: environmentsInfo.deviceType,
@ -199,6 +301,94 @@ export class Effects {
    { dispatch: false }
  );

+  deleteMessage$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(deleteMessage),
+        withLatestFrom(
+          this.store.pipe(
+            select(
+              (state: any) =>
+                state.account.authentication.loginRes as LoginResponse
+            )
+          )
+        ),
+        switchMap(([action, loginResInfo]) => {
+          const environmentsInfo = this.sessionStorageService.get<
+            EnvironmentsInfo
+          >(KEY_ENVIRONMENTS_INFO);
+
+          const request: DelRequest = {
+            userSeq: loginResInfo.userSeq,
+            deviceType: environmentsInfo.deviceType,
+            tokenKey: loginResInfo.tokenString,
+            type: action.messageType,
+            msgList: action.msgList
+          };
+
+          return this.messageApiService.deleteMessage(request).pipe(
+            map(res => {
+              if (res.responseCode === MessageStatusCode.Success) {
+                this.store.dispatch(
+                  deleteMessageSuccess({
+                    messageType: action.messageType,
+                    msgList: action.msgList
+                  })
+                );
+              }
+            }),
+            catchError(error => of(deleteMessageFailure({ error })))
+          );
+        })
+      );
+    },
+    { dispatch: false }
+  );
+
+  cancelReservationMessage$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(cancelReservationMessage),
+        withLatestFrom(
+          this.store.pipe(
+            select(
+              (state: any) =>
+                state.account.authentication.loginRes as LoginResponse
+            )
+          )
+        ),
+        switchMap(([action, loginResInfo]) => {
+          const environmentsInfo = this.sessionStorageService.get<
+            EnvironmentsInfo
+          >(KEY_ENVIRONMENTS_INFO);
+
+          const request: CancelReservationRequest = {
+            userSeq: loginResInfo.userSeq,
+            deviceType: environmentsInfo.deviceType,
+            tokenKey: loginResInfo.tokenString,
+            type: action.messageType,
+            msgId: action.msgId
+          };
+
+          return this.messageApiService.cancelReservationMessage(request).pipe(
+            map(res => {
+              if (res.responseCode === MessageStatusCode.Success) {
+                this.store.dispatch(
+                  cancelReservationMessageSuccess({
+                    messageType: action.messageType,
+                    msgId: action.msgId
+                  })
+                );
+              }
+            }),
+            catchError(error => of(cancelReservationMessageFailure({ error })))
+          );
+        })
+      );
+    },
+    { dispatch: false }
+  );
+
  constructor(
    private actions$: Actions,
    private store: Store<any>,
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/message/reducers.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/message/reducers.ts
@ -11,13 +11,26 @@ import {
  retrieveMessageSuccess,
  retrieveMessage,
  searchMessage,
-  searchMessageSuccess
+  searchMessageSuccess,
+  retrieveUnreadCountSuccess,
+  deleteMessageSuccess,
+  cancelReservationMessageSuccess,
+  detailMessageSuccess,
+  detailMessageClear,
+  detailMessage
 } from './actions';
 import { MessageType } from '@ucap-webmessenger/api-message';

 export const reducer = createReducer(
  initialState,

+  on(retrieveUnreadCountSuccess, (state, action) => {
+    return {
+      ...state,
+      unReadMessageCount: action.count
+    };
+  }),
+
  on(retrieveMessage, (state, action) => {
    switch (action.messageType) {
      case MessageType.Receive: {
@ -92,6 +105,74 @@ export const reducer = createReducer(
    };
  }),

+  on(deleteMessageSuccess, (state, action) => {
+    if (action.messageType === MessageType.Receive) {
+      return {
+        ...state,
+        receiveList: adapterReceiveList.removeMany(
+          action.msgList.map(item => item.msgId),
+          {
+            ...state.receiveList
+          }
+        ),
+        searchList: adapterSearchList.removeMany(
+          action.msgList.map(item => item.msgId),
+          {
+            ...state.searchList
+          }
+        )
+      };
+    } else if (action.messageType === MessageType.Send) {
+      return {
+        ...state,
+        sendList: adapterSendList.removeMany(
+          action.msgList.map(item => item.msgId),
+          {
+            ...state.sendList
+          }
+        ),
+        searchList: adapterSearchList.removeMany(
+          action.msgList.map(item => item.msgId),
+          {
+            ...state.searchList
+          }
+        )
+      };
+    }
+  }),
+
+  on(cancelReservationMessageSuccess, (state, action) => {
+    return {
+      ...state,
+      reservationList: adapterReservationList.removeOne(action.msgId, {
+        ...state.reservationList
+      }),
+      searchList: adapterSearchList.removeOne(action.msgId, {
+        ...state.searchList
+      })
+    };
+  }),
+
+  on(detailMessageSuccess, (state, action) => {
+    return {
+      ...state,
+      detailMessageInfo: action.res
+    };
+  }),
+
+  on(detailMessage, (state, action) => {
+    return {
+      ...state,
+      detailMessageInfo: null
+    };
+  }),
+  on(detailMessageClear, (state, action) => {
+    return {
+      ...state,
+      detailMessageInfo: null
+    };
+  }),
+
  on(AuthenticationStore.logoutInitialize, (state, action) => {
    return {
      ...initialState
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/message/state.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/message/state.ts
@ -1,7 +1,7 @@
 import { Selector, createSelector } from '@ngrx/store';
 import { EntityState, createEntityAdapter } from '@ngrx/entity';

-import { MessageList } from '@ucap-webmessenger/api-message';
+import { MessageList, DetailResponse } from '@ucap-webmessenger/api-message';

 import {
  InfoResponse,
@ -20,6 +20,7 @@ export interface FileInfoListState extends EntityState<FileInfo> {}
 export interface FileInfoCheckListState extends EntityState<FileDownloadInfo> {}

 export interface State {
+  // list [S]
  receiveListProcessing: boolean;
  receiveList: ReceiveListState;
  receiveTotalCount: number;
@ -39,6 +40,10 @@ export interface State {
  searchList: SearchListState;
  searchTotalCount: number;
  searchPage: number;
+  // list [E]
+
+  unReadMessageCount: number;
+  detailMessageInfo: DetailResponse | null;
 }

 export const adapterReceiveList = createEntityAdapter<MessageList>({
@ -96,7 +101,10 @@ export const initialState: State = {
  searchListProcessing: false,
  searchList: searchListInitialState,
  searchTotalCount: 0,
-  searchPage: 0
+  searchPage: 0,
+
+  unReadMessageCount: 0,
+  detailMessageInfo: null
 };

 const {
@ -143,6 +151,11 @@ export function selectors<S>(selector: Selector<any, State>) {
  );

  return {
+    unReadMessageCount: createSelector(
+      selector,
+      (state: State) => state.unReadMessageCount
+    ),
+
    receiveListProcessing: createSelector(
      selector,
      (state: State) => state.receiveListProcessing
@ -213,6 +226,11 @@ export function selectors<S>(selector: Selector<any, State>) {
        selectSearchList,
        ngeSelectEntitiesSearchList,
        (_, entities) => (!!entities ? entities[seq] : undefined)
-      )
+      ),
+
+    detailMessageInfo: createSelector(
+      selector,
+      (state: State) => state.detailMessageInfo
+    )
  };
 }