tab content is modified

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

@@ -25,11 +25,6 @@
           </svg>
         </div>
       </ng-template>
-      <app-layout-chat-left-sidenav-group
-        class="left-group-side"
-        (newGroupAndMember)="onClickNewGroupAndMember()"
-        (openProfile)="onClickOpenProfile($event)"
-      ></app-layout-chat-left-sidenav-group>
     </mat-tab>
     <mat-tab [aria-label]="MainMenu.Chat">
       <ng-template mat-tab-label>
@@ -66,7 +61,6 @@
           </svg>
         </div>
       </ng-template>
-      <app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
     </mat-tab>
     <mat-tab [aria-label]="MainMenu.Organization">
       <ng-template mat-tab-label>
@@ -92,12 +86,6 @@
           </svg>
         </div>
       </ng-template>
-      <app-layout-chat-left-sidenav-organization
-        [selectedUserList]="selectedUserList"
-        (checkAllUser)="onCheckAllUser($event)"
-        (checkUser)="onCheckUser($event)"
-        class="organization-side"
-      ></app-layout-chat-left-sidenav-organization>
     </mat-tab>
     <mat-tab [aria-label]="MainMenu.Call">
       <ng-template mat-tab-label>
@@ -127,9 +115,33 @@
           </svg>
         </div>
       </ng-template>
-      <app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
     </mat-tab>
   </mat-tab-group>
+
+  <div class="left-side-tabs-body">
+    <div #tabs id="tabs-0" style="display: block;">
+      <app-layout-chat-left-sidenav-group
+        class="left-group-side"
+        (newGroupAndMember)="onClickNewGroupAndMember()"
+        (openProfile)="onClickOpenProfile($event)"
+      ></app-layout-chat-left-sidenav-group>
+    </div>
+    <div #tabs id="tabs-1" style="display: none;">
+      <app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
+    </div>
+    <div #tabs id="tabs-2" style="display: none;">
+      <app-layout-chat-left-sidenav-organization
+        [selectedUserList]="selectedUserList"
+        (checkAllUser)="onCheckAllUser($event)"
+        (checkUser)="onCheckUser($event)"
+        class="organization-side"
+      ></app-layout-chat-left-sidenav-organization>
+    </div>
+    <div #tabs id="tabs-3" style="display: none;">
+      <app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
+    </div>
+  </div>
+
   <ucap-float-action-button
     *ngIf="fabButtonShow"
     [fabButtons]="fabButtons"

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

@@ -5,12 +5,18 @@
 
 ::ng-deep .mat-tab-body-wrapper,
 ::ng-deep .mat-tab-body {
-  height: 100%;
-  width: 100%;
+  height: 0%;
+  width: 0%;
 }
 ::ng-deep .mat-tab-header {
   border-bottom: none !important;
 }
+
+.left-side-tabs-body {
+  height: 100%;
+  width: 100%;
+}
+
 .container {
   display: flex;
   height: 100%;
@@ -18,7 +24,7 @@
 
 .mat-tab-group {
   display: flex;
-  width: 100%;
+  width: 70px;
   flex-direction: row;
 }
 ::ng-deep .organization-side {

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

@@ -1,5 +1,13 @@
 import { UserSelectDialogType } from './../../../types/userselect.dialog.type';
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Output,
+  EventEmitter,
+  ViewChildren,
+  QueryList,
+  ElementRef
+} from '@angular/core';
 import { NGXLogger } from 'ngx-logger';
 import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
 import {
@@ -42,6 +50,8 @@ export class LeftSideComponent implements OnInit {
     UserInfo | UserInfoSS | UserInfoF | UserInfoDN
   >();
 
+  @ViewChildren('tabs') tabs: QueryList<ElementRef<HTMLDivElement>>;
+
   badgeChatUnReadCount$: Observable<number>;
 
   /** 조직도에서 부서원 선택 */
@@ -134,6 +144,14 @@ export class LeftSideComponent implements OnInit {
 
   onSelectedTabChange(event: MatTabChangeEvent) {
     this.setFabInitial(event.tab.ariaLabel);
+
+    this.tabs.forEach(tab => {
+      if (`tabs-${event.index}` === tab.nativeElement.id) {
+        tab.nativeElement.style.display = 'block';
+      } else {
+        tab.nativeElement.style.display = 'none';
+      }
+    });
   }
   setFabInitial(type: string) {
     switch (type) {