diff --git 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
index 30182570..7a29dd73 100644
--- 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
@@ -10,33 +10,25 @@
       <ng-template mat-tab-label>
         <mat-icon>group</mat-icon>
       </ng-template>
-      <ng-template matTabContent>
-        <app-layout-chat-left-sidenav-group></app-layout-chat-left-sidenav-group>
-      </ng-template>
+      <app-layout-chat-left-sidenav-group></app-layout-chat-left-sidenav-group>
     </mat-tab>
     <mat-tab>
       <ng-template mat-tab-label>
         <mat-icon>chat</mat-icon>
       </ng-template>
-      <ng-template matTabContent>
-        <app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
-      </ng-template>
+      <app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
     </mat-tab>
     <mat-tab>
       <ng-template mat-tab-label>
         <mat-icon>device_hub</mat-icon>
       </ng-template>
-      <ng-template matTabContent>
-        <app-layout-chat-left-sidenav-organization></app-layout-chat-left-sidenav-organization>
-      </ng-template>
+      <app-layout-chat-left-sidenav-organization></app-layout-chat-left-sidenav-organization>
     </mat-tab>
     <mat-tab>
       <ng-template mat-tab-label>
         <mat-icon>phone</mat-icon>
       </ng-template>
-      <ng-template matTabContent>
-        <app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
-      </ng-template>
+      <app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
     </mat-tab>
   </mat-tab-group>
 </div>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
index 1804ecb4..1f727051 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
@@ -142,7 +142,7 @@
     >
       그룹 멤버 변경
     </button>
-    <button mat-menu-item (click)="onClickGroupContextMenu('REMOVE', group)">
+    <button mat-menu-item (click)="onClickGroupContextMenu('DELETE', group)">
       그룹 삭제
     </button>
   </ng-template>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts
index 3434ba34..9388544b 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts
@@ -31,6 +31,22 @@ import {
 import { MatMenuTrigger } from '@angular/material';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { KEY_VER_INFO } from '@app/types/ver-info.type';
+import {
+  DeleteGroupDialogComponent,
+  DeleteGroupDialogData,
+  DeleteGroupDialogResult
+} from '@app/layouts/messenger/dialogs/delete-group.dialog.component';
+
+import {
+  EditGroupDialogComponent,
+  EditGroupDialogData,
+  EditGroupDialogResult
+} from '@app/layouts/messenger/dialogs/edit-group.dialog.component';
+import {
+  EditGroupMemberDialogComponent,
+  EditGroupMemberDialogData,
+  EditGroupMemberDialogResult
+} from '@app/layouts/messenger/dialogs/edit-group-member.dialog.component';
 
 @Component({
   selector: 'app-layout-chat-left-sidenav-group',
@@ -44,11 +60,10 @@ export class GroupComponent implements OnInit, OnDestroy {
 
   @ViewChild('profileContextMenuTrigger', { static: true })
   profileContextMenuTrigger: MatMenuTrigger;
+  profileContextMenuPosition = { x: '0px', y: '0px' };
 
   @ViewChild('groupContextMenuTrigger', { static: true })
   groupContextMenuTrigger: MatMenuTrigger;
-
-  profileContextMenuPosition = { x: '0px', y: '0px' };
   groupContextMenuPosition = { x: '0px', y: '0px' };
 
   groupBuddyList$: Observable<
@@ -171,8 +186,8 @@ export class GroupComponent implements OnInit, OnDestroy {
   }
 
   onSelectBuddy(buddy: UserInfo) {
-    // this.store.dispatch(ChatStore.selectedRoom({ roomSeq: String(buddy.seq) }));
     this.logger.debug('onSelectBuddy', buddy);
+    this.store.dispatch(ChatStore.openRoom({ userSeqList: [buddy.seq] }));
   }
 
   getStatusBulkInfo(buddy: UserInfo) {
@@ -229,7 +244,7 @@ export class GroupComponent implements OnInit, OnDestroy {
     this.profileContextMenuTrigger.openMenu();
   }
 
-  onClickGroupContextMenu(menuType: string, group: GroupDetailData) {
+  async onClickGroupContextMenu(menuType: string, group: GroupDetailData) {
     this.logger.debug(
       'onClickGroupContextMenu',
       'menuType',
@@ -246,10 +261,64 @@ export class GroupComponent implements OnInit, OnDestroy {
       case 'SEND_NOTE':
         break;
       case 'RENAME':
+        {
+          const result = await this.dialogService.open<
+            EditGroupDialogComponent,
+            EditGroupDialogData,
+            EditGroupDialogResult
+          >(EditGroupDialogComponent, {
+            width: '220px',
+            data: {
+              title: 'Logout',
+              message: 'Logout ?'
+            }
+          });
+        }
         break;
       case 'EDIT_MEMBER':
+        {
+          const result = await this.dialogService.open<
+            EditGroupMemberDialogComponent,
+            EditGroupMemberDialogData,
+            EditGroupMemberDialogResult
+          >(EditGroupMemberDialogComponent, {
+            width: '220px',
+            data: {
+              title: 'Logout',
+              message: 'Logout ?'
+            }
+          });
+        }
         break;
-      case 'REMOVE':
+      case 'DELETE':
+        {
+          const result = await this.dialogService.open<
+            DeleteGroupDialogComponent,
+            DeleteGroupDialogData,
+            DeleteGroupDialogResult
+          >(DeleteGroupDialogComponent, {
+            width: '220px',
+            data: {
+              title: 'Logout',
+              message: 'Logout ?'
+            }
+          });
+        }
+        break;
+      case 'EDIT_MEMBER':
+        {
+          const result = await this.dialogService.open<
+            EditGroupMemberDialogComponent,
+            EditGroupMemberDialogData,
+            EditGroupMemberDialogResult
+          >(EditGroupMemberDialogComponent, {
+            width: '220px',
+            data: {
+              title: 'Logout',
+              message: 'Logout ?'
+            }
+          });
+        }
         break;
       default:
         break;
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
index 995c7140..e1c70420 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
@@ -1,15 +1,25 @@
-<div class="oraganization-tab" fxLayout="column">
+<div
+  class="oraganization-tab"
+  fxLayout="column"
+  *ngIf="departmentInfoList$ | async"
+>
   <div class="oraganization-tab-tree" fxFlex="50" style="overflow: scroll">
-    <ucap-organization-tree [oraganizationList]="departmentInfoList$ | async"
-      (selected)="onSelectedOrganization($event)"></ucap-organization-tree>
+    <ucap-organization-tree
+      [oraganizationList]="departmentInfoList$ | async"
+      (selected)="onSelectedOrganization($event)"
+    ></ucap-organization-tree>
   </div>
   <div fxFlex="50" style="overflow: scroll">
     <div>
       (선택된부서명)
     </div>
     <div>
-      <ucap-profile-user-list-item *ngFor="let userInfo of selectedDepartmentUserInfoList$ | async"
-        [userInfo]="userInfo" [checkable]="true" [sessionVerinfo]="sessionVerinfo">
+      <ucap-profile-user-list-item
+        *ngFor="let userInfo of selectedDepartmentUserInfoList$ | async"
+        [userInfo]="userInfo"
+        [checkable]="true"
+        [sessionVerinfo]="sessionVerinfo"
+      >
       </ucap-profile-user-list-item>
     </div>
     <div>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
index 4dab8b5c..0329993b 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
@@ -5,20 +5,37 @@
     <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
       <div fxLayout="row" fxLayoutAlign="start center">
         <!-- RESPONSIVE CHATS BUTTON-->
-        <button mat-icon-button aria-label="chats button" fxHide.gt-md class="responsive-chats-button">
+        <button
+          mat-icon-button
+          aria-label="chats button"
+          fxHide.gt-md
+          class="responsive-chats-button"
+        >
           <mat-icon>chat</mat-icon>
         </button>
         <!-- / RESPONSIVE CHATS BUTTON-->
       </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
+          *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">
+        <button
+          mat-icon-button
+          [matMenuTriggerFor]="contactMenu"
+          aria-label="more"
+        >
           <mat-icon>more_vert</mat-icon>
         </button>
 
@@ -31,7 +48,10 @@
     </div>
   </mat-toolbar>
   <!-- / CHAT TOOLBAR -->
-  <mat-progress-bar *ngIf="eventListProcessing$ | async" mode="indeterminate"></mat-progress-bar>
+  <mat-progress-bar
+    *ngIf="eventListProcessing$ | async"
+    mode="indeterminate"
+  ></mat-progress-bar>
   <!-- CHAT CONTENT -->
   <div fxFlex="1 1 auto" class="chat-content" #messageBoxContainer>
     <!-- Timer Room Info -->
@@ -39,9 +59,16 @@
     <!-- Timer Room Info -->
 
     <!-- CHAT MESSAGES -->
-    <ucap-chat-messages [messages]="eventList$ | async" [userInfos]="userInfoList$ | async" [loginRes]="loginRes"
-      [sessionVerInfo]="sessionVerInfo" (massDetail)="onMassDetail($event)" (save)="onSave($event)"
-      (imageViewer)="onImageViewer($event)">
+    <ucap-chat-messages
+      [messages]="eventList$ | async"
+      [userInfos]="userInfoList$ | async"
+      [loginRes]="loginRes"
+      [sessionVerInfo]="sessionVerInfo"
+      (massDetail)="onMassDetail($event)"
+      (save)="onSave($event)"
+      (imageViewer)="onImageViewer($event)"
+      (contextMenu)="onContextMenuMessage($event)"
+    >
     </ucap-chat-messages>
     <!-- CHAT MESSAGES -->
   </div>
@@ -56,3 +83,49 @@
   <!-- / CHAT FOOTER-->
 </div>
 <!-- / CHAT -->
+
+<div
+  style="visibility: hidden; position: fixed"
+  [style.left]="messageContextMenuPosition.x"
+  [style.top]="messageContextMenuPosition.y"
+  #messageContextMenuTrigger="matMenuTrigger"
+  [matMenuTriggerFor]="messageContextMenu"
+></div>
+<mat-menu #messageContextMenu="matMenu" [overlapTrigger]="false">
+  <ng-template matMenuContent let-message="message" let-loginRes="loginRes">
+    <ng-container *ngIf="!isRecalledMessage(message.type)">
+      <button
+        mat-menu-item
+        *ngIf="isCopyableMessage(message.type)"
+        (click)="onClickMessageContextMenu('COPY', message)"
+      >
+        대화 복사
+      </button>
+      <button
+        mat-menu-item
+        (click)="onClickMessageContextMenu('REPLAY', message)"
+      >
+        대화 전달
+      </button>
+      <button
+        mat-menu-item
+        (click)="onClickMessageContextMenu('REPLAY_TO_ME', message)"
+      >
+        대화 나에게 전달
+      </button>
+      <button
+        mat-menu-item
+        (click)="onClickMessageContextMenu('DELETE', message)"
+      >
+        대화 삭제
+      </button>
+      <button
+        mat-menu-item
+        *ngIf="isRecallableMessage(message, loginRes.userSeq)"
+        (click)="onClickMessageContextMenu('RECALL', message)"
+      >
+        대화 회수
+      </button>
+    </ng-container>
+  </ng-template>
+</mat-menu>
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 68fd6ebe..76d8591e 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,13 @@ import { ucapAnimations } from '@ucap-webmessenger/ui';
 import { Store, select } from '@ngrx/store';
 import { NGXLogger } from 'ngx-logger';
 import { Observable, Subscription } from 'rxjs';
-import { Info, EventType } from '@ucap-webmessenger/protocol-event';
+import {
+  Info,
+  EventType,
+  isRecalled,
+  isCopyable,
+  isRecallable
+} from '@ucap-webmessenger/protocol-event';
 
 import * as AppStore from '@app/store';
 import * as EventStore from '@app/store/messenger/event';
@@ -24,6 +30,7 @@ import { tap } from 'rxjs/operators';
 import { FileInfo } from '@ucap-webmessenger/ui-chat';
 import { KEY_VER_INFO } from '@app/types/ver-info.type';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
+import { MatMenuTrigger } from '@angular/material';
 
 @Component({
   selector: 'app-layout-messenger-messages',
@@ -35,6 +42,10 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
   @ViewChild('messageBoxContainer', { static: true })
   private messageBoxContainer: ElementRef;
 
+  @ViewChild('messageContextMenuTrigger', { static: true })
+  messageContextMenuTrigger: MatMenuTrigger;
+  messageContextMenuPosition = { x: '0px', y: '0px' };
+
   loginRes: LoginResponse;
   loginResSubscription: Subscription;
   eventList$: Observable<Info[]>;
@@ -46,6 +57,10 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
     KEY_VER_INFO
   );
 
+  isRecalledMessage = isRecalled;
+  isCopyableMessage = isCopyable;
+  isRecallableMessage = isRecallable;
+
   constructor(
     private store: Store<any>,
     private sessionStorageService: SessionStorageService,
@@ -143,4 +158,46 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
   onSave(value: { fileInfo: FileInfo; type: string }) {
     this.logger.debug('fileSave', value);
   }
+
+  onContextMenuMessage(params: { event: MouseEvent; message: Info }) {
+    params.event.preventDefault();
+    params.event.stopPropagation();
+
+    this.messageContextMenuPosition.x = params.event.clientX + 'px';
+    this.messageContextMenuPosition.y = params.event.clientY + 'px';
+    this.messageContextMenuTrigger.menu.focusFirstItem('mouse');
+    this.messageContextMenuTrigger.menuData = {
+      message: params.message,
+      loginRes: this.loginRes
+    };
+    this.messageContextMenuTrigger.openMenu();
+  }
+
+  onClickMessageContextMenu(menuType: string, message: Info) {
+    switch (menuType) {
+      case 'COPY':
+        {
+          this.logger.debug('onClickMessageContextMenu', menuType, message);
+        }
+        break;
+      case 'REPLAY':
+        {
+        }
+        break;
+      case 'REPLAY_TO_ME':
+        {
+        }
+        break;
+      case 'DELETE':
+        {
+        }
+        break;
+      case 'RECALL':
+        {
+        }
+        break;
+      default:
+        break;
+    }
+  }
 }
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/create-group.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/create-group.dialog.component.html
index 09d25dfe..2229c733 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/create-group.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/create-group.dialog.component.html
@@ -1,5 +1,5 @@
 <mat-card class="confirm-card">
-  <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
+  <mat-card-header>
     <mat-card-title>새 그룹 추가</mat-card-title>
   </mat-card-header>
   <mat-card-content> </mat-card-content>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/delete-group.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/delete-group.dialog.component.html
new file mode 100644
index 00000000..a6ad0056
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/delete-group.dialog.component.html
@@ -0,0 +1,18 @@
+<mat-card class="confirm-card">
+  <mat-card-header>
+    <mat-card-title>그룹 삭제</mat-card-title>
+  </mat-card-header>
+  <mat-card-content> </mat-card-content>
+  <mat-card-actions class="button-farm flex-row">
+    <button
+      mat-stroked-button
+      (click)="onClickChoice(false)"
+      class="mat-primary"
+    >
+      No
+    </button>
+    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
+      Yes
+    </button>
+  </mat-card-actions>
+</mat-card>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/delete-group.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/delete-group.dialog.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/delete-group.dialog.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/delete-group.dialog.component.spec.ts
new file mode 100644
index 00000000..e279601d
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/delete-group.dialog.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditGroupDialogComponent } from './edit-group.dialog.component';
+
+describe('app::layouts::messenger::EditGroupDialogComponent', () => {
+  let component: EditGroupDialogComponent;
+  let fixture: ComponentFixture<EditGroupDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [EditGroupDialogComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditGroupDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/delete-group.dialog.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/delete-group.dialog.component.ts
new file mode 100644
index 00000000..db8d4026
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/delete-group.dialog.component.ts
@@ -0,0 +1,34 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+export interface DeleteGroupDialogData {
+  title: string;
+  message?: string;
+}
+
+export interface DeleteGroupDialogResult {
+  choice: boolean;
+}
+
+@Component({
+  selector: 'app-layout-messenger-delete-group',
+  templateUrl: './delete-group.dialog.component.html',
+  styleUrls: ['./delete-group.dialog.component.scss']
+})
+export class DeleteGroupDialogComponent implements OnInit {
+  constructor(
+    public dialogRef: MatDialogRef<
+      DeleteGroupDialogData,
+      DeleteGroupDialogResult
+    >,
+    @Inject(MAT_DIALOG_DATA) public data: DeleteGroupDialogData
+  ) {}
+
+  ngOnInit(): void {}
+
+  onClickChoice(choice: boolean): void {
+    this.dialogRef.close({
+      choice
+    });
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group-member.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group-member.dialog.component.html
new file mode 100644
index 00000000..f0f997bf
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group-member.dialog.component.html
@@ -0,0 +1,18 @@
+<mat-card class="confirm-card">
+  <mat-card-header>
+    <mat-card-title>그룹 맴버 수정</mat-card-title>
+  </mat-card-header>
+  <mat-card-content> </mat-card-content>
+  <mat-card-actions class="button-farm flex-row">
+    <button
+      mat-stroked-button
+      (click)="onClickChoice(false)"
+      class="mat-primary"
+    >
+      No
+    </button>
+    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
+      Yes
+    </button>
+  </mat-card-actions>
+</mat-card>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group-member.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group-member.dialog.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group-member.dialog.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group-member.dialog.component.spec.ts
new file mode 100644
index 00000000..24f3444d
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group-member.dialog.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditGroupMemberDialogComponent } from './edit-group-member.dialog.component';
+
+describe('app::layouts::messenger::EditGroupMemberDialogComponent', () => {
+  let component: EditGroupMemberDialogComponent;
+  let fixture: ComponentFixture<EditGroupMemberDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [EditGroupMemberDialogComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditGroupMemberDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group-member.dialog.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group-member.dialog.component.ts
new file mode 100644
index 00000000..2656c44f
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group-member.dialog.component.ts
@@ -0,0 +1,34 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+export interface EditGroupMemberDialogData {
+  title: string;
+  message?: string;
+}
+
+export interface EditGroupMemberDialogResult {
+  choice: boolean;
+}
+
+@Component({
+  selector: 'app-layout-messenger-edit-group-member',
+  templateUrl: './edit-group-member.dialog.component.html',
+  styleUrls: ['./edit-group-member.dialog.component.scss']
+})
+export class EditGroupMemberDialogComponent implements OnInit {
+  constructor(
+    public dialogRef: MatDialogRef<
+      EditGroupMemberDialogData,
+      EditGroupMemberDialogResult
+    >,
+    @Inject(MAT_DIALOG_DATA) public data: EditGroupMemberDialogData
+  ) {}
+
+  ngOnInit(): void {}
+
+  onClickChoice(choice: boolean): void {
+    this.dialogRef.close({
+      choice
+    });
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group.dialog.component.html
new file mode 100644
index 00000000..7e2dcc5e
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group.dialog.component.html
@@ -0,0 +1,18 @@
+<mat-card class="confirm-card">
+  <mat-card-header>
+    <mat-card-title>그룹 이름 수정</mat-card-title>
+  </mat-card-header>
+  <mat-card-content> </mat-card-content>
+  <mat-card-actions class="button-farm flex-row">
+    <button
+      mat-stroked-button
+      (click)="onClickChoice(false)"
+      class="mat-primary"
+    >
+      No
+    </button>
+    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
+      Yes
+    </button>
+  </mat-card-actions>
+</mat-card>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group.dialog.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group.dialog.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group.dialog.component.spec.ts
new file mode 100644
index 00000000..e279601d
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group.dialog.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditGroupDialogComponent } from './edit-group.dialog.component';
+
+describe('app::layouts::messenger::EditGroupDialogComponent', () => {
+  let component: EditGroupDialogComponent;
+  let fixture: ComponentFixture<EditGroupDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [EditGroupDialogComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditGroupDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group.dialog.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group.dialog.component.ts
new file mode 100644
index 00000000..cc70a84b
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/edit-group.dialog.component.ts
@@ -0,0 +1,31 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+export interface EditGroupDialogData {
+  title: string;
+  message?: string;
+}
+
+export interface EditGroupDialogResult {
+  choice: boolean;
+}
+
+@Component({
+  selector: 'app-layout-messenger-edit-group',
+  templateUrl: './edit-group.dialog.component.html',
+  styleUrls: ['./edit-group.dialog.component.scss']
+})
+export class EditGroupDialogComponent implements OnInit {
+  constructor(
+    public dialogRef: MatDialogRef<EditGroupDialogData, EditGroupDialogResult>,
+    @Inject(MAT_DIALOG_DATA) public data: EditGroupDialogData
+  ) {}
+
+  ngOnInit(): void {}
+
+  onClickChoice(choice: boolean): void {
+    this.dialogRef.close({
+      choice
+    });
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts
index ca2df322..afaf3b73 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts
@@ -1,4 +1,13 @@
 import { CreateGroupDialogComponent } from './create-group.dialog.component';
 import { CreateChatDialogComponent } from './create-chat.dialog.component';
+import { DeleteGroupDialogComponent } from './delete-group.dialog.component';
+import { EditGroupDialogComponent } from './edit-group.dialog.component';
+import { EditGroupMemberDialogComponent } from './edit-group-member.dialog.component';
 
-export const DIALOGS = [CreateGroupDialogComponent, CreateChatDialogComponent];
+export const DIALOGS = [
+  CreateChatDialogComponent,
+  CreateGroupDialogComponent,
+  DeleteGroupDialogComponent,
+  EditGroupDialogComponent,
+  EditGroupMemberDialogComponent
+];
diff --git a/projects/ucap-webmessenger-protocol-event/src/lib/models/info.ts b/projects/ucap-webmessenger-protocol-event/src/lib/models/info.ts
index fa28fc20..6f1b9ca9 100644
--- a/projects/ucap-webmessenger-protocol-event/src/lib/models/info.ts
+++ b/projects/ucap-webmessenger-protocol-event/src/lib/models/info.ts
@@ -14,3 +14,19 @@ export interface Info {
   // 수신자수
   receiverCount: number;
 }
+
+export function isCopyable(eventType: EventType): boolean {
+  return (
+    EventType.Character === eventType || EventType.Translation === eventType
+  );
+}
+
+export function isRecalled(eventType: EventType): boolean {
+  return EventType.RecalledMessage === eventType;
+}
+
+export function isRecallable(event: Info, userSeq: number): boolean {
+  return (
+    event.senderSeq === userSeq && event.type !== EventType.RecalledMessage
+  );
+}
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
index 80bec251..522791c0 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
@@ -92,9 +92,7 @@
         <ucap-chat-message-box-text
           *ngSwitchCase="EventType.Character"
           [message]="message"
-          (contextmenu)="
-            onContextMenuMessage($event, EventType.Character, message)
-          "
+          (contextmenu)="onContextMenuMessage($event, message)"
         >
         </ucap-chat-message-box-text>
         <div *ngSwitchDefault>
@@ -120,23 +118,3 @@
     </ng-template>
   </div>
 </div>
-
-<div
-  style="visibility: hidden; position: fixed"
-  [style.left]="messageContextMenuPosition.x"
-  [style.top]="messageContextMenuPosition.y"
-  [matMenuTriggerFor]="messageContextMenu"
-></div>
-<mat-menu #messageContextMenu="matMenu" [overlapTrigger]="false">
-  <ng-template matMenuContent let-eventType="eventType" let-message="message">
-    <ng-container *ngIf="!isRecalledMessage(eventType)">
-      <button mat-menu-item *ngIf="isCopyableMessage(eventType)">
-        대화 복사
-      </button>
-      <button mat-menu-item>대화 전달</button>
-      <button mat-menu-item>대화 나에게 전달</button>
-      <button mat-menu-item>대화 삭제</button>
-      <button mat-menu-item *ngIf="isRecallable(message)">대화 회수</button>
-    </ng-container>
-  </ng-template>
-</mat-menu>
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
index e43b886f..7587dc46 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
@@ -43,10 +43,11 @@ export class MessagesComponent implements OnInit {
   @Output()
   save = new EventEmitter<{ fileInfo: FileInfo; type: string }>();
 
-  @ViewChildren(MatMenuTrigger) menuTriggerList: QueryList<MatMenuTrigger>;
-  @ViewChild('messageContextMenu', { static: true })
-  messageContextMenu: MatMenu;
-  messageContextMenuPosition = { x: '0px', y: '0px' };
+  @Output()
+  contextMenu = new EventEmitter<{
+    event: MouseEvent;
+    message: Info;
+  }>();
 
   EventType = EventType;
   profileImageRoot: string;
@@ -126,23 +127,6 @@ export class MessagesComponent implements OnInit {
     return false;
   }
 
-  isCopyableMessage(eventType: EventType): boolean {
-    return (
-      EventType.Character === eventType || EventType.Translation === eventType
-    );
-  }
-
-  isRecalledMessage(eventType: EventType): boolean {
-    return EventType.RecalledMessage === eventType;
-  }
-
-  isRecallable(message: Info): boolean {
-    return (
-      message.senderSeq === this.loginRes.userSeq &&
-      message.type !== EventType.RecalledMessage
-    );
-  }
-
   /** [Event] MassTalk Detail View */
   onMassDetail(value: number) {
     this.massDetail.emit(value);
@@ -158,15 +142,7 @@ export class MessagesComponent implements OnInit {
     this.save.emit(value);
   }
 
-  onContextMenuMessage(event: MouseEvent, eventType: EventType, message: Info) {
-    event.preventDefault();
-
-    this.messageContextMenu.focusFirstItem('mouse');
-
-    this.messageContextMenuPosition.x = event.clientX + 'px';
-    this.messageContextMenuPosition.y = event.clientY + 'px';
-    const messageContextMenuTrigger = this.menuTriggerList.toArray()[0];
-    messageContextMenuTrigger.menuData = { eventType, message };
-    messageContextMenuTrigger.openMenu();
+  onContextMenuMessage(event: MouseEvent, message: Info) {
+    this.contextMenu.emit({ event, message });
   }
 }