Merge branch 'master' of http://10.81.13.221:6990/Web/next-ucap-messenger

projects/ucap-webmessenger-app/src/app/app.theme.scss

@@ -103,29 +103,51 @@ body.theme-pink-dark {
 // -----------------------------------------------------------------------------------------------------
 
 // Define the primary, accent and warn palettes
-/*$pink-light-theme-primary-palette: mat-palette($mat-grey,800);
+$lgRed-light-theme-primary-palette: mat-palette($mat-grey,800);
-$pink-light-theme-accent-palette: mat-palette($lg-red, 400);
+$lgRed-light-theme-accent-palette: mat-palette($lg-red, 400);
-$pink-light-theme-warn-palette: mat-palette($mat-red);*/
+$lgRed-light-theme-warn-palette: mat-palette($mat-cyan);
-
-$pink-light-theme-primary-palette: mat-palette($daesang-grey, 900);
-$pink-light-theme-accent-palette: mat-palette($daesang);
-$pink-light-theme-warn-palette: mat-palette($mat-deep-orange);
 
 
 // Create the Material theme object
-$pink-light-theme: mat-light-theme(
+$lgRed-light-theme: mat-light-theme(
-  $pink-light-theme-primary-palette,
+  $lgRed-light-theme-primary-palette,
-  $pink-light-theme-accent-palette,
+  $lgRed-light-theme-accent-palette,
-  $pink-light-theme-warn-palette
+  $lgRed-light-theme-warn-palette
 );
 
 // Add ".theme-pink-dark" class to the body to activate this theme.
 // Class name must start with "theme-" !!!
-body.theme-default  {
+body.theme-lgRed{
   // Generate the Angular Material theme
-  @include angular-material-theme($pink-light-theme);
+  @include angular-material-theme($lgRed-light-theme);
 
   // Apply the theme to the user components
-  @include components-theme($pink-light-theme);
+  @include components-theme($lgRed-light-theme);
-  @include ucap-material-theme($pink-light-theme);
+  @include ucap-material-theme($lgRed-light-theme);
+}
+
+// -----------------------------------------------------------------------------------------------------
+//aqua-blue-daesang
+// -----------------------------------------------------------------------------------------------------
+
+$aquaBlue-light-theme-primary-palette: mat-palette($daesang-grey, 900);
+$aquaBlue-theme-accent-palette: mat-palette($aquaBlue-daesang);
+$aquaBlue-theme-warn-palette: mat-palette($mat-orange);
+
+// Create the Material theme object
+$aquaBlue-light-theme: mat-light-theme(
+  $aquaBlue-light-theme-primary-palette,
+  $aquaBlue-theme-accent-palette,
+  $aquaBlue-theme-warn-palette
+);
+
+// Add ".theme-pink-dark" class to the body to activate this theme.
+// Class name must start with "theme-" !!!
+body.theme-default {
+  // Generate the Angular Material theme
+  @include angular-material-theme($aquaBlue-light-theme);
+
+  // Apply the theme to the user components
+  @include components-theme($aquaBlue-light-theme);
+  @include ucap-material-theme($aquaBlue-light-theme);
 }

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

@@ -85,6 +85,30 @@
         </div>
       </ng-template>
     </mat-tab>
+
+    <mat-tab [aria-label]="MainMenu.Message">
+      <ng-template mat-tab-label>
+        <!--<mat-icon>device_hub</mat-icon>-->
+        <div class="icon-item" matTooltip="Message" matTooltipPosition="after">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#000000"
+            stroke-width="1.5"
+            stroke-linecap="butt"
+            stroke-linejoin="bevel"
+          >
+            <polygon
+              points="21.368 12.001 3 21.609 3 14 11 12 3 9.794 3 2.394"
+            />
+          </svg>
+        </div>
+      </ng-template>
+    </mat-tab>
+
     <mat-tab [aria-label]="MainMenu.Call">
       <ng-template mat-tab-label>
         <!--<mat-icon>phone</mat-icon>-->
@@ -116,6 +140,11 @@
     </mat-tab>
   </mat-tab-group>
 
+  <div class="myprofile">
+    <span class="myprofile-img"></span>
+    <span>내프로필</span>
+  </div>
+
   <div class="left-side-tabs-body">
     <div
       #tabs
@@ -145,6 +174,7 @@
     >
       <app-layout-chat-left-sidenav-organization
         [selectedUserList]="selectedUserList"
+        [isVisible]="currentTabLable === MainMenu.Organization"
         (checkAllUser)="onCheckAllUser($event)"
         (checkUser)="onCheckUser($event)"
         (openProfile)="onClickOpenProfile($event)"
@@ -157,6 +187,16 @@
       id="tabs-3"
       class="left-side-tabs-contents"
       style="display: none;"
+    >
+      <app-layout-chat-left-sidenav-message
+        [isVisible]="currentTabLable === MainMenu.Message"
+      ></app-layout-chat-left-sidenav-message>
+    </div>
+    <div
+      #tabs
+      id="tabs-4"
+      class="left-side-tabs-contents"
+      style="display: none;"
     >
       <app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
     </div>

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

@@ -34,6 +34,29 @@
   flex-direction: row;
 }
 
+.myprofile {
+  position: absolute;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  height: 80px;
+  width: 68px;
+  bottom: 10px;
+  color: #ffffff;
+  font-size: 11px;
+  text-align: center;
+
+  .myprofile-img {
+    display: block;
+    border-radius: 10px;
+    height: 42px;
+    width: 42px;
+    background-color: #efefef;
+    align-self: center;
+    margin-bottom: 6px;
+  }
+}
+
 ::ng-deep .organization-side {
   flex-direction: column;
   height: 100%;
@@ -43,7 +66,7 @@
     .mat-tab-list {
       .mat-tab-labels {
         flex-flow: column;
-        height: 280px;
+        height: 360px;
         padding-top: 10px;
         border-bottom: none;
         .mat-tab-label {

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'
 }
@@ -52,6 +53,7 @@ export class LeftSideComponent implements OnInit, OnDestroy {
   >();
 
   @ViewChildren('tabs') tabs: QueryList<ElementRef<HTMLDivElement>>;
+  currentTabLable: string;
 
   badgeChatUnReadCount: number;
   badgeChatUnReadCountSubscription: Subscription;
@@ -81,6 +83,7 @@ export class LeftSideComponent implements OnInit, OnDestroy {
       });
 
     this.setFabInitial(MainMenu.Group);
+    this.currentTabLable = MainMenu.Group;
   }
 
   ngOnDestroy(): void {
@@ -158,6 +161,7 @@ export class LeftSideComponent implements OnInit, OnDestroy {
 
   onSelectedTabChange(event: MatTabChangeEvent) {
     this.setFabInitial(event.tab.ariaLabel);
+    this.currentTabLable = event.tab.ariaLabel;
 
     this.tabs.forEach(tab => {
       if (`tabs-${event.index}` === tab.nativeElement.id) {
@@ -177,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'
             }
           ];
         }
@@ -297,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/group.component.html

@@ -92,11 +92,17 @@
     <span>새 그룹 추가</span>
   </button>
   <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')">
-    <mat-icon>expand_more</mat-icon>
+    <!--<mat-icon>expand_more</mat-icon>-->
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+      <path d="M6 9l6 6 6-6" /></svg>
     <span>그룹 전체 열기</span>
   </button>
   <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_LESS')">
-    <mat-icon>expand_less</mat-icon>
+    <!--<mat-icon>expand_less</mat-icon>-->
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+        <path d="M18 15l-6-6-6 6" /></svg>
     <span>그룹 전체 닫기</span>
   </button>
   <!-- <button mat-menu-item (click)="onClickGroupMenu('GROUP_SAVE')">

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/left-sidenav/organization.component.html

@@ -44,8 +44,13 @@
     <div *ngIf="selectedDepartmentProcessing">
       <mat-progress-bar mode="indeterminate"></mat-progress-bar>
     </div>
-    <div *ngIf="!isShowSearch" class="search-list">
+    <div class="search-list">
-      <cdk-virtual-scroll-viewport itemSize="20" perfectScrollbar fxFlexFill>
+      <cdk-virtual-scroll-viewport
+        itemSize="80"
+        #cvsvDeptUser
+        perfectScrollbar
+        fxFlexFill
+      >
         <ucap-profile-user-list-item
           *cdkVirtualFor="let userInfo of selectedDepartmentUserInfoList"
           [userInfo]="userInfo"
@@ -57,15 +62,15 @@
           (openProfile)="onClickOpenProfile($event)"
           (click)="onToggleUser(userInfo)"
         >
-          Loading...
         </ucap-profile-user-list-item>
       </cdk-virtual-scroll-viewport>
     </div>
     <div *ngIf="isShowSearch" class="search-result">
       <cdk-virtual-scroll-viewport
+        #cvsvDeptSearchUser
         itemSize="20"
         perfectScrollbar
-        style="height: 100%;"
+        fxFlexFill
       >
         <ucap-profile-user-list-item
           *cdkVirtualFor="let userInfo of searchUserInfos"

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

@@ -155,13 +155,3 @@
     }
   }
 }
-::ng-deep .oraganization-tab{
- .oraganization-tab-tree,
- .select-list{
-  .ps{
-    .ps-content{
-      height:100%;
-    }
-  }
-}
-}

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

@@ -4,7 +4,11 @@ import {
   OnDestroy,
   Output,
   EventEmitter,
-  Input
+  Input,
+  ViewChild,
+  AfterViewInit,
+  AfterContentChecked,
+  AfterViewChecked
 } from '@angular/core';
 import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
 import { Observable, Subscription, of } from 'rxjs';
@@ -41,6 +45,8 @@ import {
 } from '../../dialogs/group/select-group.dialog.component';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { Company } from '@ucap-webmessenger/api-external';
+import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 
 @Component({
   selector: 'app-layout-chat-left-sidenav-organization',
@@ -48,7 +54,8 @@ import { Company } from '@ucap-webmessenger/api-external';
   styleUrls: ['./organization.component.scss'],
   animations: ucapAnimations
 })
-export class OrganizationComponent implements OnInit, OnDestroy {
+export class OrganizationComponent
+  implements OnInit, OnDestroy, AfterViewChecked {
   @Input()
   showTitle = true;
   @Input()
@@ -57,6 +64,8 @@ export class OrganizationComponent implements OnInit, OnDestroy {
   @Input()
   /** 선택된 사용자의 리스트 */
   selectedUserList?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
+  @Input()
+  isVisible = true;
 
   @Output()
   checkUser = new EventEmitter<{
@@ -77,11 +86,13 @@ export class OrganizationComponent implements OnInit, OnDestroy {
     UserInfo | UserInfoSS | UserInfoF | UserInfoDN
   >();
 
+  @ViewChild('cvsvDeptUser', { static: false })
+  cvsvDeptUser: CdkVirtualScrollViewport;
+
   companyList$: Observable<Company[]>;
   companyCode: string;
 
   departmentInfoList$: Observable<DeptInfo[]>;
-  selectedDepartmentUserInfoList$: Observable<UserInfoSS[]>;
   selectedDepartmentUserInfoList: UserInfoSS[] = [];
   selectedDepartmentUserInfoListSubscription: Subscription;
   selectedDepartmentStatus$: Observable<DeptUserResponse>;
@@ -96,6 +107,9 @@ export class OrganizationComponent implements OnInit, OnDestroy {
   isShowSearch = false;
   searchUserInfos: UserInfoSS[] = [];
 
+  /** 부서원 리스트에 virture scroll의 size 가 체킹되지 않아 강제 수행. 1번만. */
+  isInitList = false;
+
   constructor(
     private store: Store<any>,
     private sessionStorageService: SessionStorageService,
@@ -173,6 +187,19 @@ export class OrganizationComponent implements OnInit, OnDestroy {
       .subscribe();
   }
 
+  ngAfterViewChecked(): void {
+    if (
+      !!this.cvsvDeptUser &&
+      !!this.selectedDepartmentUserInfoList &&
+      this.selectedDepartmentUserInfoList.length > 0 &&
+      !this.isInitList &&
+      this.isVisible
+    ) {
+      this.isInitList = true;
+      this.cvsvDeptUser.checkViewportSize();
+    }
+  }
+
   ngOnDestroy(): void {
     if (!!this.selectedDepartmentUserInfoListSubscription) {
       this.selectedDepartmentUserInfoListSubscription.unsubscribe();

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

@@ -534,11 +534,11 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
       FileViewerDialogResult
     >(FileViewerDialogComponent, {
       position: {
-        top: '30px'
+        top: '50px'
       },
       maxWidth: '100vw',
       maxHeight: '100vh',
-      height: 'calc(100% - 30px)',
+      height: 'calc(100% - 50px)',
       width: '100%',
       hasBackdrop: false,
       panelClass: 'app-dialog-full',

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/file-box.component.html

@@ -40,9 +40,9 @@
         </div>
         <ul>
           <li class="name">{{ selectedFile.info.name }}</li>
-          <li>size : {{ selectedFile.info.size | ucapBytes }}</li>
+          <li><span class="text-accent-color">size :</span> {{ selectedFile.info.size | ucapBytes }}</li>
           <li>
-            date :
+            <span class="text-accent-color">date :</span>
             {{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
           </li>
         </ul>

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/layouts/messenger/dialogs/chat/create-chat.dialog.component.html

@@ -125,6 +125,7 @@
                 [showTitle]="false"
                 [selectedUserList]="selectedUserList"
                 [isUserSelect]="true"
+                [isVisible]="currentTabIndex === 1"
                 (checkAllUser)="onCheckAllUser($event)"
                 (checkUser)="onCheckUser($event)"
                 (toggleUser)="onToggleUser($event)"

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.ts

@@ -110,6 +110,8 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     );
   }
 
+  currentTabIndex: number;
+
   UserSelectDialogType = UserSelectDialogType;
 
   loginRes: LoginResponse;
@@ -237,6 +239,8 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     if (this.data.type === UserSelectDialogType.EditChatMember) {
       this.selectedUserList = this.data.curRoomUser;
     }
+
+    this.currentTabIndex = 0;
   }
 
   ngOnDestroy(): void {
@@ -284,6 +288,8 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
   }
 
   onSelectedTabChange(tabChangeEvent: MatTabChangeEvent): void {
+    this.currentTabIndex = tabChangeEvent.index;
+
     if (tabChangeEvent.index === 2) {
       this.selectedUserList = [];
       this.isShowSelectedUserList = false;
@@ -451,12 +457,13 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
   }
 
   getCheckableRoom(roomInfo: RoomInfo) {
-    if (!!this.data.ignoreRoom && this.data.ignoreRoom.length > 0) {
+    // // 현재 방도 체크 전달 할수 있도록 수정. (끌어올리기 개념.)
-      return !(
+    // if (!!this.data.ignoreRoom && this.data.ignoreRoom.length > 0) {
-        this.data.ignoreRoom.filter(room => room.roomSeq === roomInfo.roomSeq)
+    //   return !(
-          .length > 0
+    //     this.data.ignoreRoom.filter(room => room.roomSeq === roomInfo.roomSeq)
-      );
+    //       .length > 0
-    }
+    //   );
+    // }
     return true;
   }
   getCheckedRoom(roomInfo: RoomInfo) {

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html

@@ -4,7 +4,29 @@
   </div>
   <div class="app-layout-native-title-bar-title">UCAP M Messenger</div>
   <div class="app-layout-native-title-bar-spacer"></div>
+  <div class="app-layout-native-title-bar-link">
+
+    <button mat-icon-button class="button app-layout-native-title-bar-setting">
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" alt="환경설정">
+        <circle cx="12" cy="12" r="3"></circle>
+        <path
+          d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
+        </path>
+      </svg>
+    </button>
+
+    <button mat-icon-button class="button app-layout-native-title-bar-logout">
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" alt="로그아웃" class="stroke-warn-color" >
+        <path d="M10 3H6a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h4M16 17l5-5-5-5M19.8 12H9" /></svg>
+    </button>
+
+    <span class="stroke-bar"></span>
+
+  </div>
   <div class="app-layout-native-title-bar-actions">
+
     <button
       mat-icon-button
       class="button app-layout-native-title-bar-minimize"
@@ -12,7 +34,7 @@
     >
       <!--<mat-icon>minimize</mat-icon>-->
       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" alt="창 최소화">
         <line x1="5" y1="18" x2="19" y2="18"></line>
       </svg>
     </button>
@@ -24,7 +46,7 @@
       <ng-container [ngSwitch]="windowStateChanged$ | async">
         <!--<mat-icon *ngSwitchCase="WindowState.Maximized">filter_none</mat-icon>-->
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-          stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchCase="WindowState.Maximized">
+          stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchCase="WindowState.Maximized" alt="창 이전크기">
           <path class="st0"
             d="M15,9.5v7c0,0.8-0.7,1.5-1.5,1.5h-7C5.7,18,5,17.3,5,16.5v-7C5,8.7,5.7,8,6.5,8h7C14.3,8,15,8.7,15,9.5z" />
           <path class="st0" d="M8.8,6.8V6c0-0.8,0.7-1.5,1.5-1.5H17c0.8,0,1.5,0.7,1.5,1.5v6.8c0,0.8-0.7,1.5-1.5,1.5h-0.8" />
@@ -32,7 +54,7 @@
 
         <!--<mat-icon *ngSwitchDefault>crop_din</mat-icon>-->
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-          stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchDefault>
+          stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchDefault alt="창크기 최대">
           <rect x="5" y="5" width="12" height="12" rx="2" ry="2"></rect>
         </svg>
 
@@ -45,7 +67,7 @@
     >
       <!--<mat-icon>close</mat-icon>-->
       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" alt="창닫기">
         <line x1="18" y1="6" x2="6" y2="18"></line>
         <line x1="6" y1="6" x2="18" y2="18"></line>
       </svg>

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss

@@ -9,8 +9,8 @@
     display: flex;
     padding: 0 10px;
     cursor: pointer;
-    height: 30px;
+    height: 50px;
-    color:#ffffff;
+    color: #ffffff;
     //background: rgba(37, 27, 30, 0.9);
     //border-bottom: 1px solid #d5dadb;
 
@@ -28,7 +28,49 @@
       flex: 1 1 auto;
     }
 
+    .app-layout-native-title-bar-link {
+      align-items: center;
+      position: relative;
+
+      .stroke-bar {
+        width: 1px;
+        height: 20px;
+        background-color: rgba(256, 256, 256, 0.3);
+        margin: 0 10px 0 20px;
+        display: inline-flex;
+      }
+      .button {
+        -webkit-app-region: no-drag;
+        outline: 0;
+        cursor: pointer;
+        border: none;
+        height: 28px;
+        min-width: 28px;
+        max-width: 28px;
+        padding: 5px;
+        line-height: 10px;
+        border-radius: 0;
+        background: transparent;
+        transition: background 0.2s linear, color 0.2s linear;
+        text-align: center;
+        font-size: 10px;
+        vertical-align: middle;
+        margin-left: 10px;
+        transform: translateY(-2px);
+
+        &.app-layout-native-title-bar-logout,
+        &.app-layout-native-title-bar-setting {
+          background-color: #efefef;
+          border-radius: 50%;
+        }
+        &:hover {
+          opacity: 0.7;
+        }
+      }
+    }
+
     .app-layout-native-title-bar-actions {
+      align-items: center;
       position: relative;
 
       .button {
@@ -47,14 +89,14 @@
         text-align: center;
         font-size: 10px;
         vertical-align: middle;
-        margin-left:6px;
+        margin-left: 6px;
         transform: translateY(-2px);
         .mat-icon {
           //transform: translateY(-2px);
           width: 16px;
           height: 16px;
-          min-height:16px;
+          min-height: 16px;
-          min-width:16px;
+          min-width: 16px;
           font-size: 16px;
         }
 
@@ -70,6 +112,7 @@
         // }
 
         &:hover {
+          border-radius: 4px;
           &.app-layout-native-title-bar-close {
             background: darken(#000000, 10%);
             color: darken(white, 0);
@@ -77,7 +120,7 @@
 
           &.app-layout-native-title-bar-minimize {
             background: darken(#000000, 10%);
-            color: darken(white,0);
+            color: darken(white, 0);
           }
 
           &.app-layout-native-title-bar-maximize {

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

@@ -1,16 +1,16 @@
 .main-container {
-  height:100%;
+  height: 100%;
   display: flex;
   flex-flow: row;
-  padding-top: 27px;
+  padding-top: 47px;
   border-top: none;
-  .split-area{
+  .split-area {
     overflow: hidden;
     .left-side {
-    width: 100%;
+      width: 100%;
-    height: 100%;
+      height: 100%;
-    flex: 0 0 auto;
+      flex: 0 0 auto;
-    position: relative;
+      position: relative;
     }
   }
 
@@ -22,14 +22,14 @@
       width: 100%;
       height: 100%;
     }
-    .rightDrawer{
+    .rightDrawer {
-      width:400px;
+      width: 400px;
       height: 100%;
       flex: 0 0 auto;
       overflow: hidden;
-      -webkit-box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
+      -webkit-box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.3);
-      -moz-box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
+      -moz-box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.3);
-      box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
+      box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.3);
     }
   }
   .right-side {
@@ -38,6 +38,6 @@
   }
 }
 
-::ng-deep .mat-drawer-inner-container{
+::ng-deep .mat-drawer-inner-container {
   overflow: unset !important;
 }

projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts

@@ -101,6 +101,7 @@ import {
   InfoResponse as FileInfoResponse,
   FileType
 } from '@ucap-webmessenger/protocol-file';
+import { RoomUserData } from '@ucap-webmessenger/protocol-sync';
 
 @Injectable()
 export class Effects {
@@ -393,21 +394,41 @@ export class Effects {
     () => {
       return this.actions$.pipe(
         ofType(forward),
-        map(action => {
+        withLatestFrom(
+          this.store.pipe(
+            select(
+              (state: any) =>
+                state.messenger.sync.roomUserShort.entities as Dictionary<
+                  RoomUserData
+                >
+            )
+          )
+        ),
+        tap(([action, roomUserList]) => {
           if (!!action.trgtRoomSeq) {
             this.store.dispatch(
-              ChatStore.selectedRoom({ roomSeq: action.trgtRoomSeq })
+              forwardAfterRoomOpen({
-            );
-            this.store.dispatch(
-              send({
                 senderSeq: action.senderSeq,
-                req: {
+                req: action.req,
-                  roomSeq: action.trgtRoomSeq,
+                trgtUserSeqs: roomUserList[action.trgtRoomSeq].userInfos.map(
-                  eventType: action.req.eventType,
+                  user => user.seq
-                  sentMessage: action.req.sentMessage
+                )
-                }
               })
             );
+
+            // this.store.dispatch(
+            //   ChatStore.selectedRoom({ roomSeq: action.trgtRoomSeq })
+            // );
+            // this.store.dispatch(
+            //   send({
+            //     senderSeq: action.senderSeq,
+            //     req: {
+            //       roomSeq: action.trgtRoomSeq,
+            //       eventType: action.req.eventType,
+            //       sentMessage: action.req.sentMessage
+            //     }
+            //   })
+            // );
           } else if (!!action.trgtUserSeqs && action.trgtUserSeqs.length > 0) {
             // 방오픈 후 대화전달.
             this.store.dispatch(forwardAfterRoomOpen(action));

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'
 }

projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss

@@ -46,12 +46,12 @@ ol {
   list-style: none;
 }
 $lg-red: (
-  50: #faf3f6,
+  50: #fff9fc,
   100: #f8bbd0,
   200: #f48fb1,
-  300: #f06292,
+  /*300: #f06292,*/ 300: #ef4c73,
-  400: #ef4c73,
+  400: #ec407a,
-  /* 400: #ec407a,*/ 500: #ed097e,
+  500: #ed097e,
   600: #d81b60,
   700: #c2185b,
   800: #ad1457,
@@ -84,7 +84,7 @@ $lg-red: (
   )
 );
 
-$daesang: (
+$aquaBlue-daesang: (
   50: #f9feff,
   //#e0f7fa,
     100: #b2ebf2,
@@ -94,7 +94,7 @@ $daesang: (
   400: #26c6da,
   500: #00bcd4,
   /*600: #00acc1,*/ 600: #00b6d5,
-  700: #0097a7,
+  700: #1ea7b9,
   800: #0367a6,
   900: #024873,
   A100: #84ffff,
@@ -139,7 +139,7 @@ $daesang-grey: (
   A100: #ffffff,
   A200: #eeeeee,
   A400: #bdbdbd,
-  A700: #616161,
+  A700: #1e2b3a,
   contrast: (
     50: $dark-primary-text,
     100: $dark-primary-text,
@@ -173,6 +173,10 @@ $daesang-grey: (
   $gradient-light: mat-color($accent, G100);
 
   //basic
+  .bg-primary-darkest {
+    background: mat-color($primary, 900);
+    color: mat-color($primary, default-contrast);
+  }
   .bg-primary-dark {
     background: mat-color($primary, 900);
     color: mat-color($primary, default-contrast);
@@ -186,7 +190,7 @@ $daesang-grey: (
     color: mat-color($primary, default-contrast);
   }
   .bg-accent-darkest {
-    background: mat-color($accent, 900);
+    background: mat-color($accent, 800);
     color: mat-color($primary, default-contrast);
   }
   .bg-accent-dark {
@@ -209,13 +213,13 @@ $daesang-grey: (
     color: mat-color($primary);
   }
   .text-accent-darkest {
-    color: mat-color($accent, 900);
+    color: mat-color($accent, 800);
   }
   .text-accent-color {
     color: mat-color($accent);
   }
   .text-warn-color {
-    color: mat-color($warn);
+    color: mat-color($warn, 800);
   }
   .border-primary-color {
     border: 1px solid mat-color($primary);
@@ -223,7 +227,12 @@ $daesang-grey: (
   .border-accent-color {
     border: 1px solid mat-color($accent);
   }
-
+  .border-warn-color {
+    border: mat-color($warn);
+  }
+  .stroke-warn-color {
+    stroke: mat-color($warn, 900);
+  }
   // sass 정의
   .mat-toolbar {
     background-color: mat-color($accent, B100);
@@ -239,7 +248,7 @@ $daesang-grey: (
     cursor: pointer;
   }
 
-  .policy{
+  .policy {
     background-color: mat-color($accent, B100);
   }
   .mat-badge-accent .mat-badge-content {
@@ -251,7 +260,11 @@ $daesang-grey: (
     background-color: mat-color($accent, 400);
   }
   .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
-    background-color: mat-color($accent, 200);
+    background-color: mat-color($accent, 700);
+    cursor: pointer;
+    .mat-chip-remove {
+      opacity: 0.6;
+    }
   }
 
   .global-menu {
@@ -341,7 +354,7 @@ $daesang-grey: (
   }
   .profile-img {
     .responsive-chats-button:last-child {
-      background-color: $gradient-light;
+      background-color: mat-color($accent, B100);
     }
   }
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html

@@ -56,14 +56,14 @@
     </mat-form-field>
 
     <button
-      class="send-message-button bg-accent-darkest"
+      class="send-message-button bg-primary-darkest"
       mat-icon-button
       type="submit"
       aria-label="Send message"
     >
-      <i class="material-icons">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-        send
+        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
-      </i>
+        <path d="M12 19V6M5 12l7-7 7 7" /></svg>
     </button>
   </form>
 </div>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/file.component.ts

@@ -42,7 +42,7 @@ export class FileComponent implements OnInit {
   getExpiredFile() {
     if (
       !!this.eventInfoStatus &&
-      this.eventInfoStatus.validFileBaseSeq < this.message.seq
+      this.eventInfoStatus.validFileBaseSeq <= this.message.seq
     ) {
       return false;
     } else {

projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.scss

@@ -28,8 +28,8 @@
   .mat-card-header{
     justify-content: center;
     padding-bottom: 40px;
-    background: #ce395d;
+    background: #76d9c5;
-    background: linear-gradient(to right, #345385, #ef4c73);
+    /*background: linear-gradient(to right, #345385, #ef4c73);*/
     color: #ffffff;
     padding-top: 20px;
     width:100%;

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html

@@ -1,12 +1,7 @@
 <!--체크박스 보여줄때는 <div class="list-item checkbox" matRipple>  클래스에 checkbox만 추가-->
 <div class="list-item" *ngIf="userInfo" matRipple>
   <!--pcOn , pcOut  pcOff , pcOther-->
-  <span
+  <span class="presence" [ngClass]="getPresence(PresenceType.PC)"> </span>
-    class="presence"
-    [ngClass]="getPresence(PresenceType.PC)"
-    *ngIf="presence && presence.pcStatus"
-    >{{ presence.pcStatus }}
-  </span>
   <dl class="item-default">
     <dt>
       <img

projects/ucap-webmessenger-ui/src/assets/scss/partials/_presence.scss

@@ -8,7 +8,7 @@
   margin-right: 4px;
   border-radius: 100px;
 }
-.presence{
+.presence {
   @extend %presence;
   &.pcOn {
     background-color: #28ad66;
@@ -16,7 +16,7 @@
   &.pcOut {
     background-color: #f35b5b;
   }
-  & .pcOff {
+  &.pcOff {
     background-color: #a29f9f;
   }
   &.pcOther {

projects/ucap-webmessenger-ui/src/lib/components/float-action-button.component.scss

@@ -1,7 +1,7 @@
 .fab-container {
   position: absolute;
   bottom: 15px;
-  right: 15px;
+  right: 40px;
   z-index: 100;
   display: flex;
   flex-direction: column-reverse;