right drawer 에 title, close button 추가.

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html

@@ -1,3 +1,17 @@
+<div>
+  <span>{{ selectedRightDrawer }}</span>
+  <span>
+    <button
+      mat-button
+      matSuffix
+      mat-icon-button
+      aria-label="Close"
+      (click)="onClickClose()"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </span>
+</div>
 <ng-container *ngIf="selectedRightDrawer" [ngSwitch]="selectedRightDrawer">
   <app-layout-chat-right-drawer-file-box *ngSwitchCase="RightDrawer.FileBox">
   </app-layout-chat-right-drawer-file-box>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.ts

@@ -20,6 +20,8 @@ export class RightDrawerComponent implements OnInit {
   openProfile = new EventEmitter<
     UserInfo | UserInfoSS | UserInfoF | UserInfoDN
   >();
+  @Output()
+  closeRightDrawer = new EventEmitter();
 
   RightDrawer = RightDrawer;
 
@@ -30,4 +32,8 @@ export class RightDrawerComponent implements OnInit {
   onClickOpenProfile(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
     this.openProfile.emit(userInfo);
   }
+
+  onClickClose() {
+    this.closeRightDrawer.emit();
+  }
 }

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html

@@ -45,6 +45,7 @@
           <app-layout-messenger-right-drawer
             [selectedRightDrawer]="selectedRightDrawer$ | async"
             (openProfile)="onClickOpenProfile($event)"
+            (closeRightDrawer)="onCloseRightDrawer($event)"
           >
           </app-layout-messenger-right-drawer>
         </mat-drawer>

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts

@@ -139,4 +139,8 @@ export class MainPageComponent implements OnInit {
       },
     });
   }
+
+  onCloseRightDrawer() {
+    this.rightDrawer.close();
+  }
 }