diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
index 5e419a00..bfbb5037 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
@@ -10,7 +10,10 @@ import {
   ucapAnimations,
   SnackBarService,
   ClipboardService,
-  DialogService
+  DialogService,
+  ConfirmDialogComponent,
+  ConfirmDialogData,
+  ConfirmDialogResult
 } from '@ucap-webmessenger/ui';
 import { Store, select } from '@ngrx/store';
 import { NGXLogger } from 'ngx-logger';
@@ -336,31 +339,50 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
       case 'DELETE':
         {
           const result = await this.dialogService.open<
-            DeleteMessageDialogComponent,
-            DeleteMessageDialogData,
-            DeleteMessageDialogResult
-          >(DeleteMessageDialogComponent, {
+            ConfirmDialogComponent,
+            ConfirmDialogData,
+            ConfirmDialogResult
+          >(ConfirmDialogComponent, {
             width: '220px',
             data: {
-              title: 'Logout',
-              message: 'Logout ?'
+              title: 'Delete',
+              html: `선택한 메시지를 삭제하시겠습니까?<br/>삭제된 메시지는 내 대화방에서만 적용되며 상대방의 대화방에서는 삭제되지 않습니다.`
             }
           });
+
+          if (!!result && !!result.choice && result.choice) {
+            this.store.dispatch(
+              EventStore.del({
+                roomSeq: this.roomInfo.roomSeq,
+                eventSeq: message.seq
+              })
+            );
+          }
         }
         break;
       case 'RECALL':
         {
           const result = await this.dialogService.open<
-            RecallMessageDialogComponent,
-            RecallMessageDialogData,
-            RecallMessageDialogResult
-          >(RecallMessageDialogComponent, {
+            ConfirmDialogComponent,
+            ConfirmDialogData,
+            ConfirmDialogResult
+          >(ConfirmDialogComponent, {
             width: '220px',
             data: {
-              title: 'Logout',
-              message: 'Logout ?'
+              title: 'ReCall',
+              html: `해당 대화를 회수하시겠습니까?<br/>상대방 대화창에서도 회수됩니다.`
             }
           });
+
+          if (!!result && !!result.choice && result.choice) {
+            this.store.dispatch(
+              EventStore.cancel({
+                roomSeq: this.roomInfo.roomSeq,
+                eventSeq: message.seq,
+                deviceType: this.environmentsInfo.deviceType
+              })
+            );
+          }
         }
         break;
       default:
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts
index eab3cb8c..eeabacb9 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts
@@ -9,7 +9,11 @@ import {
   ReadNotification,
   CancelNotification,
   DelNotification,
-  ReadRequest
+  ReadRequest,
+  DelRequest,
+  DelResponse,
+  CancelRequest,
+  CancelResponse
 } from '@ucap-webmessenger/protocol-event';
 
 export const info = createAction(
@@ -38,13 +42,6 @@ export const newInfo = createAction(
   }>()
 );
 
-export const recallInfoList = createAction(
-  '[Messenger::Event] recall InfoList',
-  props<{
-    eventSeq: number;
-  }>()
-);
-
 export const appendInfoList = createAction(
   '[Messenger::Event] Append InfoList',
   props<{
@@ -70,6 +67,11 @@ export const sendFailure = createAction(
   props<{ error: any }>()
 );
 
+export const sendNotification = createAction(
+  '[Messenger::Event] Send Notification',
+  props<{ noti: SendNotification }>()
+);
+
 export const read = createAction(
   '[Messenger::Event] read',
   props<ReadRequest>()
@@ -88,22 +90,49 @@ export const readFailure = createAction(
   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 cancel = createAction(
+  '[Messenger::Event] Cancel',
+  props<CancelRequest>()
+);
+export const cancelFailure = createAction(
+  '[Messenger::Event] Cancel Failure',
+  props<{ error: any }>()
+);
 export const cancelNotification = createAction(
-  '[Messenger::Event] Cancel Notification',
-  props<{ noti: CancelNotification }>()
+  '[Messenger::Event] Cancel Notification || Response',
+  props<{ noti: CancelNotification | CancelResponse }>()
+);
+/** 대화 회수시 열린 대화방의 대화 내용 갱신 */
+export const recallInfoList = createAction(
+  '[Messenger::Event] Cancel InfoList',
+  props<{
+    eventSeq: number;
+  }>()
 );
 
-export const delNotification = createAction(
-  '[Messenger::Event] Delete Notification',
-  props<{ noti: DelNotification }>()
+/** 대화 삭제 */
+export const del = createAction(
+  '[Messenger::Event] Delete',
+  props<DelRequest>()
+);
+export const delFailure = createAction(
+  '[Messenger::Event] Delete Failure',
+  props<{ error: any }>()
+);
+export const delNotification = createAction(
+  '[Messenger::Event] Delete Notification || Response',
+  props<{ noti: DelNotification | DelResponse }>()
+);
+/** 대화 삭제시 열린 대화방의 대화 내용 갱신 */
+export const delInfoList = createAction(
+  '[Messenger::Event] Delete InfoList',
+  props<{
+    eventSeq: number;
+  }>()
 );
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
index 0e6bb360..c0631f7f 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
@@ -23,7 +23,9 @@ import {
   SSVC_TYPE_EVENT_INFO_DATA,
   SSVC_TYPE_EVENT_INFO_RES,
   SendResponse,
-  ReadResponse
+  ReadResponse,
+  DelResponse,
+  CancelResponse
 } from '@ucap-webmessenger/protocol-event';
 
 import * as ChatStore from '@app/store/messenger/chat';
@@ -44,11 +46,15 @@ import {
   delNotification,
   recallInfoList,
   read,
-  readFailure
+  readFailure,
+  del,
+  delFailure,
+  delInfoList,
+  cancel,
+  cancelFailure
 } from './actions';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { RoomInfo } from '@ucap-webmessenger/protocol-room';
-import { refreshRoom } from '../sync';
 import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
 import { Dictionary } from '@ngrx/entity';
 
@@ -117,21 +123,31 @@ export class Effects {
     { dispatch: false }
   );
 
-  read$ = createEffect(
+  read$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(read),
+      exhaustMap(req =>
+        this.eventProtocolService.read(req).pipe(
+          map((res: ReadResponse) => {
+            return readNotification({ noti: res });
+          }),
+          catchError(error => of(readFailure({ error })))
+        )
+      )
+    )
+  );
+
+  readNotification$ = createEffect(
     () => {
       return this.actions$.pipe(
-        ofType(read),
-        switchMap(req => {
-          return this.eventProtocolService.read(req).pipe(
-            map((res: ReadResponse) => {
-              this.store.dispatch(
-                SyncStore.updateUnreadCount({
-                  roomSeq: res.roomSeq,
-                  noReadCnt: 0
-                })
-              );
-            }),
-            catchError(error => of(readFailure({ error })))
+        ofType(readNotification),
+        map(action => action.noti),
+        tap(noti => {
+          this.store.dispatch(
+            SyncStore.updateUnreadCount({
+              roomSeq: noti.roomSeq,
+              noReadCnt: 0
+            })
           );
         })
       );
@@ -246,15 +262,18 @@ export class Effects {
     { dispatch: false }
   );
 
-  readNotification$ = createEffect(
-    () => {
-      return this.actions$.pipe(
-        ofType(readNotification),
-        map(action => action.noti),
-        tap(noti => {})
-      );
-    },
-    { dispatch: false }
+  cancel$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(cancel),
+      exhaustMap(req =>
+        this.eventProtocolService.cancel(req).pipe(
+          map((res: CancelResponse) => {
+            return cancelNotification({ noti: res });
+          }),
+          catchError(error => of(cancelFailure({ error })))
+        )
+      )
+    )
   );
 
   cancelNotification$ = createEffect(
@@ -269,7 +288,6 @@ export class Effects {
         tap(([action, roomInfo]) => {
           // 현재 방이 오픈되어 있으면 방내용 갱신
           if (!!roomInfo && roomInfo.roomSeq === action.noti.roomSeq) {
-            this.logger.debug('cancelNotification$', action, roomInfo);
             this.store.dispatch(
               recallInfoList({ eventSeq: action.noti.eventSeq })
             );
@@ -291,12 +309,48 @@ export class Effects {
     { dispatch: false }
   );
 
+  del$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(del),
+      exhaustMap(req =>
+        this.eventProtocolService.del(req).pipe(
+          map((res: DelResponse) => {
+            return delNotification({ noti: res });
+          }),
+          catchError(error => of(delFailure({ error })))
+        )
+      )
+    )
+  );
+
   delNotification$ = createEffect(
     () => {
       return this.actions$.pipe(
         ofType(delNotification),
         map(action => action.noti),
-        tap(noti => {})
+        withLatestFrom(
+          this.store.pipe(
+            select((state: any) => state.messenger.room.roomInfo as RoomInfo)
+          )
+        ),
+        tap(([noti, roomInfo]) => {
+          // 현재 방이 오픈되어 있으면 방내용 갱신
+          if (!!roomInfo && roomInfo.roomSeq === noti.roomSeq) {
+            this.store.dispatch(delInfoList({ eventSeq: noti.eventSeq }));
+          }
+
+          // 대화 > 리스트의 항목 갱신
+          const loginInfo = this.sessionStorageService.get<LoginInfo>(
+            KEY_LOGIN_INFO
+          );
+          this.store.dispatch(
+            SyncStore.refreshRoom({
+              roomSeq: noti.roomSeq,
+              isDetail: true,
+              localeCode: loginInfo.localeCode
+            })
+          );
+        })
       );
     },
     { dispatch: false }
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts
index 5c6f8811..39378335 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts
@@ -5,7 +5,8 @@ import {
   appendInfoList,
   info,
   infoFailure,
-  recallInfoList
+  recallInfoList,
+  delInfoList
 } from './actions';
 import * as AuthenticationStore from '@app/store/account/authentication';
 import { Info, EventType } from '@ucap-webmessenger/protocol-event';
@@ -73,6 +74,15 @@ export const reducer = createReducer(
     };
   }),
 
+  on(delInfoList, (state, action) => {
+    const eventSeq = action.eventSeq;
+
+    return {
+      ...state,
+      infoList: adapterInfoList.removeOne(eventSeq, { ...state.infoList })
+    };
+  }),
+
   on(AuthenticationStore.logout, (state, action) => {
     return {
       ...initialState
diff --git a/projects/ucap-webmessenger-protocol-event/src/lib/services/event-protocol.service.ts b/projects/ucap-webmessenger-protocol-event/src/lib/services/event-protocol.service.ts
index 5d5d8cf5..f8d32533 100644
--- a/projects/ucap-webmessenger-protocol-event/src/lib/services/event-protocol.service.ts
+++ b/projects/ucap-webmessenger-protocol-event/src/lib/services/event-protocol.service.ts
@@ -53,12 +53,6 @@ import {
   decodeReadNotification,
   ReadNotification
 } from '../protocols/read';
-import {
-  DelRequest,
-  DelResponse,
-  encodeDel,
-  decodeDel
-} from '@ucap-webmessenger/protocol-buddy';
 import {
   CancelRequest,
   CancelResponse,
@@ -67,7 +61,14 @@ import {
   CancelNotification,
   decodeCancelNotification
 } from '../protocols/cancel';
-import { decodeDelNotification, DelNotification } from '../protocols/del';
+import {
+  decodeDelNotification,
+  DelNotification,
+  DelRequest,
+  DelResponse,
+  encodeDel,
+  decodeDel
+} from '../protocols/del';
 
 type Notifications =
   | SendNotification
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/recall.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/recall.component.html
index b520dfd4..20979451 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/recall.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/recall.component.html
@@ -1,3 +1,5 @@
-<p>
-  회수된 메시지
-</p>
+<div class="bubble-main">
+  <span>
+    회수된 메시지
+  </span>
+</div>
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/recall.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/recall.component.scss
index e69de29b..0980d504 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/recall.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/recall.component.scss
@@ -0,0 +1,4 @@
+.bubble-main {
+  padding: 14px;
+  text-align:left;
+}
\ No newline at end of file