split 기능 추가.

package.json

@@ -60,6 +60,7 @@
     "@types/webpack": "^4.39.5",
     "@types/webpack-merge": "^4.1.5",
     "@types/webpack-node-externals": "^1.6.3",
+    "angular-split": "^3.0.2",
     "awesome-node-loader": "^1.1.1",
     "awesome-typescript-loader": "^5.2.1",
     "clean-webpack-plugin": "^3.0.0",

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

@@ -1,9 +1,25 @@
 <div class="container">
+  <as-split
+    unit="pixel"
+    gutterSize="5"
+    useTransition="true"
+    gutterDblClickDuration="300"
+    (dragEnd)="onGutterDragEnd($event)"
+    (gutterDblClick)="onGutterDblClick($event)"
+  >
+    <as-split-area
+      #asSplitLeft
+      [size]="leftSideComponentWidth"
+      minSize="300"
+      maxSize="500"
+    >
       <div class="left-side">
         <app-layout-messenger-left-side
           (openProfile)="onClickOpenProfile($event)"
         ></app-layout-messenger-left-side>
       </div>
+    </as-split-area>
+    <as-split-area size="*">
       <mat-drawer-container class="contents" autosize>
         <!-- <mat-drawer #drawer mode="over">
           <p>Auto-resizing sidenav</p>
@@ -33,6 +49,8 @@
           </app-layout-messenger-right-drawer>
         </mat-drawer>
       </mat-drawer-container>
+    </as-split-area>
+  </as-split>
 
   <!-- <div class="right-side">
     <app-layout-messenger-right-side></app-layout-messenger-right-side>

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

@@ -7,7 +7,7 @@
   border-top: none;
 
   .left-side {
-    width: 380px;
+    width: 100%;
     height: 100%;
     flex: 0 0 auto;
     position: relative;

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

@@ -1,37 +1,38 @@
-import { map, tap } from "rxjs/operators";
+import { map, tap } from 'rxjs/operators';
-import { Component, OnInit, Inject, OnDestroy, ViewChild } from "@angular/core";
+import { Component, OnInit, Inject, OnDestroy, ViewChild } from '@angular/core';
 
-import { Store, select } from "@ngrx/store";
+import { Store, select } from '@ngrx/store';
 
-import * as AppSotre from "@app/store";
+import * as AppSotre from '@app/store';
-import * as ChatStore from "@app/store/messenger/chat";
+import * as ChatStore from '@app/store/messenger/chat';
-import { Observable, Subscription } from "rxjs";
+import { Observable, Subscription } from 'rxjs';
 import {
   WindowIdle,
   UCAP_NATIVE_SERVICE,
-  NativeService
+  NativeService,
-} from "@ucap-webmessenger/native";
+} from '@ucap-webmessenger/native';
 
-import { UserInfo } from "@ucap-webmessenger/protocol-sync";
+import { UserInfo } from '@ucap-webmessenger/protocol-sync';
 import {
   UserInfoSS,
   UserInfoF,
-  UserInfoDN
+  UserInfoDN,
-} from "@ucap-webmessenger/protocol-query";
+} from '@ucap-webmessenger/protocol-query';
-import { StatusProtocolService } from "@ucap-webmessenger/protocol-status";
+import { StatusProtocolService } from '@ucap-webmessenger/protocol-status';
-import { StatusType, StatusCode } from "@ucap-webmessenger/core";
+import { StatusType, StatusCode } from '@ucap-webmessenger/core';
-import { DialogService } from "@ucap-webmessenger/ui";
+import { DialogService } from '@ucap-webmessenger/ui';
 import {
   ProfileDialogComponent,
   ProfileDialogData,
-  ProfileDialogResult
+  ProfileDialogResult,
-} from "@app/layouts/messenger/dialogs/profile/profile.dialog.component";
+} from '@app/layouts/messenger/dialogs/profile/profile.dialog.component';
-import { MatSidenav, MatDrawer } from "@angular/material";
+import { MatSidenav, MatDrawer } from '@angular/material';
+import { SplitAreaDirective } from 'angular-split';
 
 @Component({
-  selector: "app-page-messenger-main",
+  selector: 'app-page-messenger-main',
-  templateUrl: "./main.page.component.html",
+  templateUrl: './main.page.component.html',
-  styleUrls: ["./main.page.component.scss"]
+  styleUrls: ['./main.page.component.scss'],
 })
 export class MainPageComponent implements OnInit {
   selectedChat$: Observable<string | null>;
@@ -39,7 +40,10 @@ export class MainPageComponent implements OnInit {
   idleStateChangedSubscription: Subscription;
   chatOpenRoomSubscription: Subscription;
 
-  @ViewChild("rightDrawer", { static: true }) rightDrawer: MatDrawer;
+  defaultLeftSideComponentWidth = 380;
+  leftSideComponentWidth = this.defaultLeftSideComponentWidth;
+
+  @ViewChild('rightDrawer', { static: true }) rightDrawer: MatDrawer;
 
   constructor(
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
@@ -75,7 +79,7 @@ export class MainPageComponent implements OnInit {
         console.log(action);
         let statusType: StatusCode;
 
-        if (action === "IDLE") {
+        if (action === 'IDLE') {
           // away
           statusType = StatusCode.Away;
         } else {
@@ -86,7 +90,7 @@ export class MainPageComponent implements OnInit {
         this.statusProtocolService.status({
           statusDivisionType: StatusType.Messenger,
           statusType,
-          statusMessage: ""
+          statusMessage: '',
         });
       });
 
@@ -111,12 +115,19 @@ export class MainPageComponent implements OnInit {
     if (!event) {
       this.store.dispatch(
         ChatStore.selectedRightDrawer({
-          req: null
+          req: null,
         })
       );
     }
   }
 
+  onGutterDragEnd(e: { gutterNum: number; sizes: Array<number> }) {
+    this.leftSideComponentWidth = e.sizes[0];
+  }
+  onGutterDblClick(e: { gutterNum: number; sizes: Array<number> }) {
+    this.leftSideComponentWidth = this.defaultLeftSideComponentWidth;
+  }
+
   onClickOpenProfile(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
     this.dialogService.open<
       ProfileDialogComponent,
@@ -124,8 +135,8 @@ export class MainPageComponent implements OnInit {
       ProfileDialogResult
     >(ProfileDialogComponent, {
       data: {
-        userInfo
+        userInfo,
-      }
+      },
     });
   }
 }

projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts

@@ -11,15 +11,19 @@ import { AppMessengerRoutingPageModule } from './messenger-routing.page.module';
 
 import { COMPONENTS } from './components';
 
+import { AngularSplitModule } from 'angular-split';
+
 @NgModule({
   imports: [
     CommonModule,
     FlexLayoutModule,
     MatSidenavModule,
     AppMessengerLayoutModule,
-    AppMessengerRoutingPageModule
+    AppMessengerRoutingPageModule,
+
+    AngularSplitModule.forRoot(),
   ],
   declarations: [...COMPONENTS],
-  entryComponents: []
+  entryComponents: [],
 })
 export class AppMessengerPageModule {}