기능추가 :: 그룹명 변경

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

@@ -301,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':

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

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
     });
   }
 }

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

@@ -9,7 +9,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>
 
@@ -28,7 +31,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