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 6e8ca823..8f477c8c 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
@@ -11,7 +11,13 @@ import { map, tap } from 'rxjs/operators';
 
 import { Store, select } from '@ngrx/store';
 
-import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
+import {
+  ucapAnimations,
+  DialogService,
+  ConfirmDialogData,
+  ConfirmDialogComponent,
+  ConfirmDialogResult
+} from '@ucap-webmessenger/ui';
 import { UserInfo, GroupDetailData } from '@ucap-webmessenger/protocol-sync';
 
 import * as AppStore from '@app/store';
@@ -295,12 +301,25 @@ export class GroupComponent implements OnInit, OnDestroy {
             EditGroupDialogData,
             EditGroupDialogResult
           >(EditGroupDialogComponent, {
-            width: '220px',
+            width: '600px',
+            height: '500px',
             data: {
-              title: 'Logout',
-              message: 'Logout ?'
+              title: 'Group Name Edit',
+              group
             }
           });
+
+          if (!!result && !!result.choice && result.choice) {
+            if (!!result.groupName && result.groupName.trim().length > 0) {
+              this.store.dispatch(
+                SyncStore.updateGroup({
+                  groupSeq: result.group.seq,
+                  groupName: result.groupName,
+                  userSeqs: result.group.userSeqs
+                })
+              );
+            }
+          }
         }
         break;
       case 'EDIT_MEMBER':
@@ -337,31 +356,21 @@ export class GroupComponent implements OnInit, OnDestroy {
       case 'DELETE':
         {
           const result = await this.dialogService.open<
-            DeleteGroupDialogComponent,
-            DeleteGroupDialogData,
-            DeleteGroupDialogResult
-          >(DeleteGroupDialogComponent, {
+            ConfirmDialogComponent,
+            ConfirmDialogData,
+            ConfirmDialogResult
+          >(ConfirmDialogComponent, {
             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 ?'
+              title: 'Delete group',
+              html: `그룹(${group.name})을 삭제하시겠습니까?<br/>그룹 멤버는 해당 그룹에서만 삭제됩니다.`
             }
           });
+
+          if (!!result && !!result.choice && result.choice) {
+            this.logger.debug('delete group', group);
+            this.store.dispatch(SyncStore.delGroup({ group }));
+          }
         }
         break;
       default:
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.html
index 7e2dcc5e..cd8e6a7f 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.html
@@ -1,8 +1,21 @@
 <mat-card class="confirm-card">
-  <mat-card-header>
-    <mat-card-title>그룹 이름 수정</mat-card-title>
+  <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
+    <mat-card-title>{{ data.title }}</mat-card-title>
   </mat-card-header>
-  <mat-card-content> </mat-card-content>
+  <mat-card-content>
+    <form name="inputForm" [formGroup]="inputForm" novalidate>
+      <mat-form-field hintLabel="특수문자는 '-,_'만 사용할 수 있습니다.">
+        <input
+          matInput
+          #input
+          maxlength="20"
+          placeholder="그룹이름"
+          formControlName="groupName"
+        />
+        <mat-hint align="end">{{ input.value?.length || 0 }}/20</mat-hint>
+      </mat-form-field>
+    </form>
+  </mat-card-content>
   <mat-card-actions class="button-farm flex-row">
     <button
       mat-stroked-button
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.ts
index cc70a84b..c5c4f16b 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.ts
@@ -1,13 +1,17 @@
 import { Component, OnInit, Inject } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { GroupDetailData } from '@ucap-webmessenger/protocol-sync';
 
 export interface EditGroupDialogData {
   title: string;
-  message?: string;
+  group: GroupDetailData;
 }
 
 export interface EditGroupDialogResult {
   choice: boolean;
+  groupName: string;
+  group: GroupDetailData;
 }
 
 @Component({
@@ -16,16 +20,26 @@ export interface EditGroupDialogResult {
   styleUrls: ['./edit-group.dialog.component.scss']
 })
 export class EditGroupDialogComponent implements OnInit {
+  groupName: string;
+  inputForm: FormGroup;
+
   constructor(
     public dialogRef: MatDialogRef<EditGroupDialogData, EditGroupDialogResult>,
-    @Inject(MAT_DIALOG_DATA) public data: EditGroupDialogData
+    @Inject(MAT_DIALOG_DATA) public data: EditGroupDialogData,
+    private formBuilder: FormBuilder
   ) {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.inputForm = this.formBuilder.group({
+      groupName: [this.data.group.name, [Validators.required]]
+    });
+  }
 
   onClickChoice(choice: boolean): void {
     this.dialogRef.close({
-      choice
+      choice,
+      groupName: this.inputForm.get('groupName').value,
+      group: this.data.group
     });
   }
 }
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/actions.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/actions.ts
index ece508d3..53a528f2 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/actions.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/actions.ts
@@ -17,7 +17,9 @@ import { Info } from '@ucap-webmessenger/protocol-event';
 import {
   AddResponse as GroupAddResponse,
   UpdateRequest as GroupUpdateRequest,
-  UpdateResponse as GroupUpdateResponse
+  UpdateResponse as GroupUpdateResponse,
+  DelRequest as GroupDelRequest,
+  DelResponse as GroupDelResponse
 } from '@ucap-webmessenger/protocol-group';
 import {
   AddRequest as BuddyAddRequest,
@@ -115,24 +117,6 @@ export const updateUnreadCount = createAction(
   }>()
 );
 
-/** 새그룹(Only Group) 추가 */
-export const createGroup = createAction(
-  '[Messenger::Sync] Group Create',
-  props<{
-    groupName: string;
-  }>()
-);
-
-export const createGroupSuccess = createAction(
-  '[Messenger::Sync] Group Create Success',
-  props<GroupAddResponse>()
-);
-
-export const createGroupFailure = createAction(
-  '[Messenger::Sync] Group Create Failure',
-  props<{ error: any }>()
-);
-
 /** 새그룹 추가 & 그룹원 추가 */
 export const createGroupAndBuddy = createAction(
   '[Messenger::Sync] Group & Buddy Create',
@@ -206,18 +190,46 @@ export const updateBuddyFailure = createAction(
   props<{ error: any }>()
 );
 
-/** 그룹원 업데이트 */
+/** 새그룹 추가 */
+export const createGroup = createAction(
+  '[Messenger::Sync] Group Create',
+  props<{
+    groupName: string;
+  }>()
+);
+export const createGroupSuccess = createAction(
+  '[Messenger::Sync] Group Create Success',
+  props<GroupAddResponse>()
+);
+export const createGroupFailure = createAction(
+  '[Messenger::Sync] Group Create Failure',
+  props<{ error: any }>()
+);
+/** 그룹 업데이트 */
 export const updateGroup = createAction(
   '[Messenger::Sync] Group Update',
   props<GroupUpdateRequest>()
 );
-
 export const updateGroupSuccess = createAction(
   '[Messenger::Sync] Group Update Success',
   props<GroupUpdateResponse>()
 );
-
 export const updateGroupFailure = createAction(
   '[Messenger::Sync] Group Update Failure',
   props<{ error: any }>()
 );
+/** 그룹 삭제 */
+export const delGroup = createAction(
+  '[Messenger::Sync] Group Del',
+  props<{
+    group: GroupDetailData;
+  }>()
+);
+export const delGroupSuccess = createAction(
+  '[Messenger::Sync] Group Del Success',
+  props<GroupDelResponse>()
+);
+export const delGroupFailure = createAction(
+  '[Messenger::Sync] Group Del Failure',
+  props<{ error: any }>()
+);
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts
index 7c9c07bc..42368032 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts
@@ -1,3 +1,4 @@
+import { GroupProtocolService } from './../../../../../../ucap-webmessenger-protocol-group/src/lib/services/group-protocol.service';
 import { Injectable } from '@angular/core';
 
 import { Actions, ofType, createEffect } from '@ngrx/effects';
@@ -42,7 +43,10 @@ import {
   updateGroupFailure,
   updateGroupMember,
   updateBuddy,
-  delBuddySuccess
+  delBuddySuccess,
+  delGroup,
+  delGroupFailure,
+  delGroupSuccess
 } from './actions';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
@@ -81,9 +85,9 @@ import {
 } from '@ucap-webmessenger/protocol-room';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import {
-  GroupProtocolService,
   AddResponse as GroupAddResponse,
-  UpdateResponse as GroupUpdateResponse
+  UpdateResponse as GroupUpdateResponse,
+  DelResponse as GroupDelResponse
 } from '@ucap-webmessenger/protocol-group';
 import {
   BuddyProtocolService,
@@ -462,11 +466,9 @@ export class Effects {
                 });
 
                 if (addBuddyList.length > 0) {
-                  this.logger.debug('addBuddyList : ', addBuddyList);
                   this.store.dispatch(addBuddy({ userSeqs: addBuddyList }));
                 }
 
-                this.logger.debug('group buddy : ', action.trgtUserSeq);
                 this.store.dispatch(
                   updateGroup({
                     // 0: 동료그룹SEQ(n)
@@ -534,12 +536,10 @@ export class Effects {
           });
 
           if (addBuddyList.length > 0) {
-            this.logger.debug('addBuddyList : ', addBuddyList);
             this.store.dispatch(addBuddy({ userSeqs: addBuddyList }));
           }
 
           if (delBuddyInGroup.length > 0) {
-            this.logger.debug('delBuddyInGroup', delBuddyInGroup);
             // 즐겨찾기 해제.
             delBuddyInGroup.forEach(buddySeq => {
               this.buddyProtocolService
@@ -568,6 +568,75 @@ export class Effects {
     { dispatch: false }
   );
 
+  delGroup$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(delGroup),
+        withLatestFrom(
+          this.store.pipe(
+            select(
+              (state: any) =>
+                state.messenger.sync.group2.entities as Dictionary<
+                  GroupDetailData
+                >
+            )
+          )
+        ),
+        map(([action, groupList]) => {
+          // Del Buddy
+          const trgtBuddys = action.group.userSeqs;
+          // tslint:disable-next-line: no-shadowed-variable
+          const delBuddyList = trgtBuddys.filter(delBuddy => {
+            let exist = false;
+            // tslint:disable-next-line: forin
+            for (const key in groupList) {
+              const group: GroupDetailData = groupList[key];
+              if (
+                group.seq !== action.group.seq &&
+                group.userSeqs.filter(v => v === delBuddy).length > 0
+              ) {
+                exist = true;
+                break;
+              }
+            }
+            return !exist;
+          });
+
+          if (delBuddyList.length > 0) {
+            this.logger.debug('Del Buddy', delBuddyList);
+            // 즐겨찾기 해제.
+            delBuddyList.forEach(buddySeq => {
+              this.buddyProtocolService
+                .update({
+                  seq: buddySeq,
+                  isFavorit: false
+                })
+                .pipe(catchError(error => of(delBuddyFailure({ error }))));
+            });
+
+            // 동료 삭제
+            this.store.dispatch(delBuddy({ userSeqs: delBuddyList }));
+          }
+
+          return action.group;
+        }),
+        tap(group => {
+          this.groupProtocolService
+            .del({
+              groupSeq: group.seq
+            })
+            .pipe(
+              map((res: GroupDelResponse) => {
+                return delGroupSuccess(res);
+              }),
+              catchError(error => of(delGroupFailure({ error })))
+            );
+        })
+      );
+    },
+    { dispatch: false }
+  );
+
   addBuddy$ = createEffect(() =>
     this.actions$.pipe(
       ofType(addBuddy),
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts
index d5704cc5..599c9790 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts
@@ -16,7 +16,8 @@ import {
   updateUnreadCount,
   createGroupSuccess,
   addBuddySuccess,
-  delBuddySuccess
+  delBuddySuccess,
+  delGroupSuccess
 } from './actions';
 import {
   RoomUserDetailData,
@@ -204,6 +205,15 @@ export const reducer = createReducer(
       })
     };
   }),
+  /** 새 그룹 삭제 */
+  on(delGroupSuccess, (state, action) => {
+    return {
+      ...state,
+      group2: adapterGroup2.removeOne(action.groupSeq, {
+        ...state.group2
+      })
+    };
+  }),
 
   on(delBuddySuccess, (state, action) => {
     return {
diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
index 418d6a99..ae10329a 100644
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
@@ -5,7 +5,10 @@
     class="groupExpansionPanel"
   >
     <mat-expansion-panel-header>
-      <mat-panel-title> 즐겨찾기 </mat-panel-title>
+      <mat-panel-title
+        >즐겨찾기
+        <span>({{ favoritBuddyList.length }}명)</span></mat-panel-title
+      >
       <mat-panel-description> </mat-panel-description>
     </mat-expansion-panel-header>
 
@@ -24,7 +27,10 @@
     class="groupExpansionPanel"
   >
     <mat-expansion-panel-header>
-      <mat-panel-title> {{ groupBuddy.group.name }} </mat-panel-title>
+      <mat-panel-title
+        >{{ groupBuddy.group.name }}
+        <span>({{ groupBuddy.buddyList.length }}명)</span></mat-panel-title
+      >
       <mat-panel-description>
         <span class="more-spacer"></span>
         <button