munu of group is added

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

@@ -45,6 +45,7 @@
       #groupExpansionPanel
       [groupBuddyList]="groupBuddyList$ | async"
       [favoritBuddyList]="favoritBuddyList$ | async"
+      (more)="onMoreGroup($event)"
     >
       <ucap-profile-user-list-item
         *ucapGroupExpansionPanelItem="let userInfo"
@@ -70,3 +71,19 @@
     <button mat-menu-item>Action 2</button>
   </ng-template>
 </mat-menu>
+
+<div
+  style="visibility: hidden; position: fixed"
+  [style.left]="groupContextMenuPosition.x"
+  [style.top]="groupContextMenuPosition.y"
+  [matMenuTriggerFor]="groupContextMenu"
+></div>
+<mat-menu #groupContextMenu="matMenu" [overlapTrigger]="false">
+  <ng-template matMenuContent let-item="group">
+    <button mat-menu-item>그룹 대화하기</button>
+    <button mat-menu-item>그룹 쪽지 보내기</button>
+    <button mat-menu-item>그룹 이름 바꾸기</button>
+    <button mat-menu-item>그룹 멤버 변경</button>
+    <button mat-menu-item>그룹 삭제</button>
+  </ng-template>
+</mat-menu>

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

@@ -53,6 +53,11 @@ export class GroupComponent implements OnInit {
 
   profileContextMenuPosition = { x: '0px', y: '0px' };
 
+  @ViewChild('groupContextMenu', { static: true })
+  groupContextMenu: MatMenu;
+
+  groupContextMenuPosition = { x: '0px', y: '0px' };
+
   groupBuddyList$: Observable<
     { group: GroupDetailData; buddyList: UserInfo[] }[]
   >;
@@ -198,12 +203,18 @@ export class GroupComponent implements OnInit {
     event: MouseEvent;
     userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
   }) {
-    params.event.preventDefault();
     this.profileContextMenuPosition.x = params.event.clientX + 'px';
     this.profileContextMenuPosition.y = params.event.clientY + 'px';
     const profileContextMenuTrigger = this.menuTriggerList.toArray()[1];
-    profileContextMenuTrigger.menu = this.profileContextMenu;
     profileContextMenuTrigger.menuData = { userInfo: params.userInfo };
     profileContextMenuTrigger.openMenu();
   }
+
+  onMoreGroup(params: { event: MouseEvent; group: GroupDetailData }) {
+    this.groupContextMenuPosition.x = params.event.clientX + 'px';
+    this.groupContextMenuPosition.y = params.event.clientY + 'px';
+    const groupContextMenuTrigger = this.menuTriggerList.toArray()[2];
+    groupContextMenuTrigger.menuData = { group: params.group };
+    groupContextMenuTrigger.openMenu();
+  }
 }

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

@@ -1,5 +1,8 @@
 <mat-accordion #groupAccordion="matAccordion" [multi]="true">
-  <mat-expansion-panel *ngIf="favoritBuddyList.length > 0">
+  <mat-expansion-panel
+    *ngIf="favoritBuddyList.length > 0"
+    [togglePosition]="'before'"
+  >
     <mat-expansion-panel-header>
       <mat-panel-title> 즐겨찾기 </mat-panel-title>
       <mat-panel-description> </mat-panel-description>
@@ -21,10 +24,22 @@
     </ucap-profile-user-list-item> -->
   </mat-expansion-panel>
 
-  <mat-expansion-panel *ngFor="let groupBuddy of groupBuddyList">
+  <mat-expansion-panel
+    *ngFor="let groupBuddy of groupBuddyList"
+    [togglePosition]="'before'"
+  >
     <mat-expansion-panel-header>
       <mat-panel-title> {{ groupBuddy.group.name }} </mat-panel-title>
-      <mat-panel-description> </mat-panel-description>
+      <mat-panel-description>
+        <span class="more-spacer"></span>
+        <button
+          mat-icon-button
+          aria-label="group menu"
+          (click)="onClickMore($event, groupBuddy.group)"
+        >
+          <mat-icon>more_vert</mat-icon>
+        </button>
+      </mat-panel-description>
     </mat-expansion-panel-header>
 
     <ng-container *ngFor="let userInfo of groupBuddy.buddyList">

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

@@ -3,50 +3,7 @@
   flex: 1;
   flex-direction: column;
 
-  .contact {
+  .more-spacer {
-    white-space: normal;
+    flex: 1 1 auto;
-    text-align: left;
-    letter-spacing: 0.01em;
-    min-height: 88px;
-    border-bottom: 1px solid;
-    padding: 16px;
-    font-weight: 400;
-    border-radius: 0;
-
-    .avatar-wrapper {
-      .avatar {
-        margin-right: 16px;
-      }
-    }
-
-    .contact-name {
-      font-size: 16px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    .contact-last-message {
-      line-height: normal;
-      margin-top: 0;
-    }
-
-    .contact-last-message-time {
-      font-size: 12px;
-      margin-top: 4px;
-    }
-
-    .contact-mood {
-      line-height: normal;
-      margin: 0;
-    }
-
-    .unread-message-count {
-      font-size: 12px;
-      border-radius: 50%;
-      text-align: center;
-      width: 20px;
-      height: 20px;
-      line-height: 20px;
-    }
   }
 }

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

@@ -28,6 +28,12 @@ export class ExpansionPanelComponent implements OnInit {
   @Input()
   favoritBuddyList: UserInfo[];
 
+  @Output()
+  more = new EventEmitter<{
+    event: MouseEvent;
+    group: GroupDetailData;
+  }>();
+
   @ContentChild(ExpansionPanelItemDirective, {
     read: TemplateRef,
     static: true
@@ -47,4 +53,11 @@ export class ExpansionPanelComponent implements OnInit {
   expandLess() {
     this.groupAccordion.closeAll();
   }
+
+  onClickMore(event: MouseEvent, group: GroupDetailData) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.more.emit({ event, group });
+  }
 }

projects/ucap-webmessenger-ui-group/src/lib/ucap-ui-group.module.ts

@@ -4,7 +4,9 @@ import { ReactiveFormsModule } from '@angular/forms';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 
+import { MatButtonModule } from '@angular/material/button';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
 
 import { ExpansionPanelComponent } from './components/expansion-panel.component';
 import { ExpansionPanelItemDirective } from './directives/expansion-panel-item.directive';
@@ -20,7 +22,9 @@ const SERVICES = [];
     UCapUiProfileModule,
     ReactiveFormsModule,
     FlexLayoutModule,
-    MatExpansionModule
+    MatButtonModule,
+    MatExpansionModule,
+    MatIconModule
   ],
   exports: [...COMPONENTS, ...DIRECTIVES],
   declarations: [...COMPONENTS, ...DIRECTIVES]

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts

@@ -113,6 +113,8 @@ export class UserListItemComponent implements OnInit, OnDestroy {
     event: MouseEvent,
     userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN
   ) {
+    event.preventDefault();
+    event.stopPropagation();
     this.contextMenu.emit({ event, userInfo });
   }
 }