쪽지 right drawer 에서 left side navi 로 이동.

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

@@ -89,11 +89,7 @@
     <mat-tab [aria-label]="MainMenu.Message">
       <ng-template mat-tab-label>
         <!--<mat-icon>device_hub</mat-icon>-->
-        <div
+        <div class="icon-item" matTooltip="Message" matTooltipPosition="after">
-          class="icon-item"
-          matTooltip="Organization"
-          matTooltipPosition="after"
-        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"
@@ -187,7 +183,9 @@
       class="left-side-tabs-contents"
       style="display: none;"
     >
-      <!--<app-layout-chat-left-sidenav-message></app-layout-chat-left-sidenav-message>-->
+      <app-layout-chat-left-sidenav-message
+        [isVisible]="currentTabLable === MainMenu.Message"
+      ></app-layout-chat-left-sidenav-message>
     </div>
     <div
       #tabs

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

@@ -35,6 +35,7 @@ export enum MainMenu {
   Group = 'GROUP',
   Chat = 'CAHT',
   Organization = 'ORGANIZATION',
+  Message = 'MESSAGE',
   Call = 'CALL',
   Conversation = 'CONVERSATION'
 }
@@ -180,11 +181,6 @@ export class LeftSideComponent implements OnInit, OnDestroy {
               icon: 'add',
               tooltip: 'New Group Add',
               divisionType: 'GROUP_NEW_ADD'
-            },
-            {
-              icon: 'sms',
-              tooltip: 'Message',
-              divisionType: 'MESSAGE'
             }
           ];
         }
@@ -300,16 +296,6 @@ export class LeftSideComponent implements OnInit, OnDestroy {
           this.onClickNewChat('TIMER');
         }
         break;
-
-      case 'MESSAGE':
-        {
-          this.store.dispatch(
-            ChatStore.selectedRightDrawer({
-              req: RightDrawer.Message
-            })
-          );
-        }
-        break;
     }
   }
 }

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

@@ -2,10 +2,12 @@ import { CallComponent } from './call.component';
 import { ChatComponent } from './chat.component';
 import { GroupComponent } from './group.component';
 import { OrganizationComponent } from './organization.component';
+import { MessageBoxComponent } from './message.component';
 
 export const LEFT_SIDENAV_COMPONENTS = [
   CallComponent,
   ChatComponent,
   GroupComponent,
-  OrganizationComponent
+  OrganizationComponent,
+  MessageBoxComponent
 ];

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

@@ -1,4 +1,15 @@
 <div class="message-box container">
+  <div class="current-head">
+    <h3>쪽지</h3>
+    <div class="btn-box">
+      <!-- <button mat-icon-button>
+        <mat-icon>timer</mat-icon>
+      </button>
+      <button mat-icon-button>
+        <mat-icon> add_comment</mat-icon>
+      </button> -->
+    </div>
+  </div>
   <div class="list-search">
     <div class="searchbox">
       <form [formGroup]="fgSearch" class="w-100-p">
@@ -26,13 +37,15 @@
       </form>
     </div>
   </div>
-  <div class="container">
+  <div>
     <mat-tab-group
+      #tabs
       mat-stretch-tabs
       animationDuration="0ms"
+      [selectedIndex]="0"
       (selectedIndexChange)="onSelectedIndexChange($event)"
     >
-      <mat-tab>
+      <mat-tab [label]="MessageType.Receive">
         <ng-template mat-tab-label>
           수신
         </ng-template>
@@ -64,7 +77,7 @@
           </dl>
         </div>
       </mat-tab>
-      <mat-tab>
+      <mat-tab [label]="MessageType.Send">
         <ng-template mat-tab-label>
           발신
         </ng-template>
@@ -96,7 +109,7 @@
           </dl>
         </div>
       </mat-tab>
-      <mat-tab>
+      <mat-tab [label]="MessageType.Reservation">
         <ng-template mat-tab-label>
           예약
         </ng-template>

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

@@ -1,3 +1,18 @@
+.current-head {
+  h3 {
+    display: inline-flex;
+    padding-left: 10px;
+    align-items: center;
+    color: #ffffff;
+  }
+  .btn-box {
+    height: 100%;
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
 .list-search {
   display: flex;
   flex-direction: row;
@@ -46,3 +61,7 @@
     }
   }
 }
+
+.mat-tab-label-active {
+  opacity: 1;
+}

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

@@ -1,6 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MessageBoxComponent } from './message-box.component';
+import { MessageBoxComponent } from './message.component';
 
 describe('MessageBoxComponent', () => {
   let component: MessageBoxComponent;
@@ -8,9 +8,8 @@ describe('MessageBoxComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ MessageBoxComponent ]
+      declarations: [MessageBoxComponent]
-    })
+    }).compileComponents();
-    .compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -3,7 +3,10 @@ import {
   OnInit,
   OnDestroy,
   Output,
-  EventEmitter
+  EventEmitter,
+  ViewChild,
+  Input,
+  AfterViewChecked
 } from '@angular/core';
 import { Subscription, of } from 'rxjs';
 import { Store, select } from '@ngrx/store';
@@ -28,13 +31,21 @@ import { DeviceType } from '@ucap-webmessenger/core';
 import { MessageStatusCode } from '@ucap-webmessenger/api';
 import { ContentType } from '@ucap-webmessenger/api-message';
 import { FormGroup, FormBuilder } from '@angular/forms';
+import { MatTabGroup } from '@angular/material';
 
 @Component({
-  selector: 'app-layout-chat-right-drawer-message-box',
+  selector: 'app-layout-chat-left-sidenav-message',
-  templateUrl: './message-box.component.html',
+  templateUrl: './message.component.html',
-  styleUrls: ['./message-box.component.scss']
+  styleUrls: ['./message.component.scss']
 })
-export class MessageBoxComponent implements OnInit, OnDestroy {
+export class MessageBoxComponent
+  implements OnInit, OnDestroy, AfterViewChecked {
+  @Input()
+  isVisible = false;
+
+  @ViewChild('tabs', { static: false }) tabs: MatTabGroup;
+  isInitTabs = false;
+
   fgSearch: FormGroup;
 
   userInfoList: UserInfo[];
@@ -60,6 +71,7 @@ export class MessageBoxComponent implements OnInit, OnDestroy {
   currentPage = 0;
 
   ContentType = ContentType;
+  MessageType = MessageType;
 
   constructor(
     private store: Store<any>,
@@ -92,6 +104,17 @@ export class MessageBoxComponent implements OnInit, OnDestroy {
 
     // 초기 검색은 수신함.
     this.getRetrieveMessage(MessageType.Receive, this.recieveCurrentPage);
+
+    if (!!this.tabs) {
+      this.tabs.realignInkBar();
+    }
+  }
+
+  ngAfterViewChecked(): void {
+    if (!!this.tabs && !this.isInitTabs && this.isVisible) {
+      this.isInitTabs = true;
+      this.tabs.realignInkBar();
+    }
   }
 
   ngOnDestroy(): void {

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

@@ -28,7 +28,5 @@
   <!-- [E] About Chat room -->
 
   <!-- [S] About Common -->
-  <app-layout-chat-right-drawer-message-box *ngSwitchCase="RightDrawer.Message">
-  </app-layout-chat-right-drawer-message-box>
   <!-- [E] About Common -->
 </ng-container>

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

@@ -1,11 +1,9 @@
 import { FileBoxComponent } from './file-box.component';
 import { AlbumBoxComponent } from './album-box.component';
 import { RoomUserListComponent } from './room-user-list.component';
-import { MessageBoxComponent } from './message-box.component';
 
 export const RIGHT_DRAWER_COMPONENTS = [
   FileBoxComponent,
   AlbumBoxComponent,
-  RoomUserListComponent,
+  RoomUserListComponent
-  MessageBoxComponent
 ];

projects/ucap-webmessenger-app/src/app/types/right-drawer.type.ts

@@ -4,8 +4,5 @@ export enum RightDrawer {
   /** 대화방 > 파일함 */
   FileBox = 'FILE_BOX',
   /** 대화방 > 대화참여자목록 */
-  RoomUser = 'ROOM_USER',
+  RoomUser = 'ROOM_USER'
-
-  /** 쪽지함 */
-  Message = 'MESSAGE_BOX'
 }