그룹 익스펜션 more menu 
  그룹 수정
  그룹 삭제
  그룹 대화

  <mat-menu #groupMenu="matMenu">
  <span class="manu-title">{{ groupName }}</span>
  <ng-template matMenuContent let-group="group">
    <button mat-menu-item style="display: none;"></button>
    <button
      mat-menu-item
      *ngIf="getShowGroupContextMenu('CHAT', group)"
      (click)="onClickGroupContextMenu('CHAT', group)"
    >
      <!-- {{ 'group.startChatWithGroup' | translate }} -->
    </button>
    <button
      mat-menu-item
      *ngIf="getShowGroupContextMenu('SEND_MESSAGE', group)"
      (click)="onClickGroupContextMenu('SEND_MESSAGE', group)"
    >
      <!-- {{ 'group.sendMessageToGroup' | translate }} -->
    </button>
    <mat-divider *ngIf="getShowGroupContextMenu('DIV1', group)"></mat-divider>
    <button
      mat-menu-item
      *ngIf="getShowGroupContextMenu('RENAME', group)"
      (click)="onClickGroupContextMenu('RENAME', group)"
    >
      <!-- {{ 'group.changeGroupName' | translate }} -->
    </button>
    <button
      mat-menu-item
      *ngIf="getShowGroupContextMenu('EDIT_MEMBER', group)"
      (click)="onClickGroupContextMenu('EDIT_MEMBER', group)"
    >
      <!-- {{ 'group.modifyGroupMember' | translate }} -->
    </button>
    <button
      mat-menu-item
      *ngIf="getShowGroupContextMenu('DELETE', group)"
      (click)="onClickGroupContextMenu('DELETE', group)"
    >
      <!-- {{ 'group.removeGroup' | translate }} -->
    </button>
  </ng-template>
</mat-menu>



profile.component.html backup

<div class="mainProfile">
  <mat-card class="example-card">
    <mat-card-header>
      <div mat-card-avatar class="profileImage" style="background-size: cover;">
        <img
          src="https://material.angular.io/assets/img/examples/shiba2.jpg"
          style="width: 50px; height: auto;"
        />
      </div>
      <mat-card-title class="name"
        >{{ userInfo?.name }}
        <span class="grade">{{ userInfo?.grade }}</span></mat-card-title
      >
      <mat-card-subtitle>({{ userInfo?.nameEn }})</mat-card-subtitle>
      <mat-card-subtitle><span>O</span>온라인</mat-card-subtitle>

      <mat-card-actions>
        <button
          mat-icon-button
          aria-label="button-favorite-toggle"
          (click)="onToggleFavorit()"
        >
          <mat-icon *ngIf="isFavorite">favorite</mat-icon>
          <mat-icon *ngIf="!isFavorite">favorite_border</mat-icon>
        </button>

        <button
          mat-icon-button
          aria-label="buddy-toggle"
          (click)="onClickToggleBuddy()"
        >
          <mat-icon *ngIf="!isBuddy">add</mat-icon>
          <mat-icon *ngIf="isBuddy">remove</mat-icon>
        </button>
      </mat-card-actions>
    </mat-card-header>

    <mat-card-content>
      <ng-container *ngIf="isMe; then isMine; else other"></ng-container>

      <ng-template #isMine>
        <div class="intro">
          <mat-form-field class="example-full-width">
            <mat-label>이름 부서명, 전화번호, 이메일</mat-label>
            <input matInput placeholder="인트로" value="" />
            <mat-icon matSuffix>search</mat-icon>
          </mat-form-field>
        </div>
      </ng-template>
      <ng-template #other>
        <mat-card-actions>
          <button
            mat-button
            class="info"
            (click)="onClickActionButton($event, 'CHAT')"
          >
            {{ 'profile.labels.chat' | ucapI18n }}
          </button>
          <button
            mat-button
            class="info"
            (click)="onClickActionButton($event, 'MESSAGE')"
          >
            {{ 'profile.labels.message' | ucapI18n }}
          </button>
          <button
            mat-button
            class="info"
            (click)="onClickActionButton($event, 'SMS')"
          >
            {{ 'profile.labels.sms' | ucapI18n }}
          </button>
          <button
            mat-button
            class="info"
            [disabled]="isDisabledCallButton('MOBILE')"
            (click)="onClickActionButton($event, 'CALL_MOBILE')"
          >
            {{ 'profile.labels.mobilePhoneNumber' | ucapI18n }}
          </button>
          <button
            mat-button
            class="info"
            [disabled]="isDisabledCallButton('LINE')"
            (click)="onClickActionButton($event, 'CALL_LINE')"
          >
            {{ 'profile.labels.linePhoneNumber' | ucapI18n }}
          </button>
          <button
            mat-button
            class="info"
            [disabled]="!canVideoConfernece"
            (click)="onClickActionButton($event, 'CONFERENCE')"
          >
            {{ 'profile.labels.videoConference' | ucapI18n }}
          </button>
        </mat-card-actions>
      </ng-template>

      <ul>
        <li class="company">
          <label>{{ 'profile.labels.company' | ucapI18n }}</label
          >{{ userInfo?.companyName }}
        </li>
        <li class="dept">
          <label>{{ 'profile.labels.department' | ucapI18n }}</label
          >{{ userInfo?.deptName }}
        </li>
        <li class="email">
          <label>{{ 'profile.labels.email' | ucapI18n }}</label
          >{{ userInfo?.email }}
        </li>
        <li class="office">
          <label>{{ 'profile.labels.linePhoneNumber' | ucapI18n }}</label
          >{{ userInfo?.lineNumber }}
        </li>
        <li class="mobile">
          <label>{{ 'profile.labels.mobilePhoneNumber' | ucapI18n }}</label
          >{{ userInfo?.hpNumber }}
        </li>
      </ul>
    </mat-card-content>
    <mat-card-actions style="display: none;">
      <button mat-button class="info">info</button>
      <button mat-button class="theme">theme1</button>
      <button mat-button class="theme">theme2</button>
      <button mat-button class="theme checked">theme3</button>
    </mat-card-actions>
  </mat-card>
</div>



<div class="search-container">
  <div class="selectbox">
    <mat-select
      class="search-selec-box"
      [(value)]="companyCode"
      disableOptionCentering
    >
      <mat-option
        *ngFor="let company of companyList"
        [value]="company.companyCode"
        >{{ company.companyName }}
      </mat-option>
    </mat-select>
  </div>
  <div class="searchbox">
    <mat-form-field>
      <mat-label>이름 부서명, 전화번호, 이메일</mat-label>
      <input
        matInput
        #searchWordInput
        placeholder="이름 부서명, 전화번호, 이메일"
        (keydown.enter)="onKeyDownEnter(searchWordInput.value)"
      />
      <button
        mat-button
        matSuffix
        mat-icon-button
        aria-label="Clear"
        (click)="searchWordInput.value = ''; onClickCancel()"
      >
        <mat-icon>close</mat-icon>
      </button>
      <button mat-flat-button color="primary" class="btn-ico-search">
        <mat-icon>search</mat-icon>
      </button>
    </mat-form-field>
  </div>
</div>