badge is added

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

@@ -14,7 +14,13 @@
     </mat-tab>
     <mat-tab>
       <ng-template mat-tab-label>
-        <mat-icon>chat</mat-icon>
+        <mat-icon
+          matBadge="22"
+          matBadgeDescription="확인하지 않은 메시지가 있습니다."
+          matBadgeColor="accent"
+          matBadgePosition="above after"
+          >chat</mat-icon
+        >
       </ng-template>
       <app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
     </mat-tab>

projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 
+import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatDialogModule } from '@angular/material/dialog';
@@ -30,6 +31,7 @@ import { DIALOGS } from './dialogs';
     CommonModule,
     FlexLayoutModule,
     DragDropModule,
+    MatBadgeModule,
     MatButtonModule,
     MatCardModule,
     MatDialogModule,