Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

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

@@ -17,7 +17,7 @@ import {
   CreateChatDialogData,
   CreateChatDialogResult
 } from '@app/layouts/messenger/dialogs/chat/create-chat.dialog.component';
-import { Subscription, of, Observable } from 'rxjs';
+import { Subscription, Observable } from 'rxjs';
 import { Store, select } from '@ngrx/store';
 
 import * as AppStore from '@app/store';
@@ -35,9 +35,8 @@ import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { OpenProfileOptions } from '@ucap-webmessenger/protocol-buddy';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
-import { MessageApiService, MessageType } from '@ucap-webmessenger/api-message';
-import { DeviceType } from '@ucap-webmessenger/core';
-import { map, catchError, tap } from 'rxjs/operators';
+import { MessageType } from '@ucap-webmessenger/api-message';
+import { tap } from 'rxjs/operators';
 import {
   MessageWriteDialogComponent,
   MessageWriteDialogResult,
@@ -46,8 +45,7 @@ import {
 import {
   EnvironmentsInfo,
   KEY_ENVIRONMENTS_INFO,
-  KEY_VER_INFO,
-  KEY_LOGIN_RES_INFO
+  KEY_VER_INFO
 } from '@app/types';
 import { MessageBoxComponent } from './left-sidenav/message.component';
 import { environment } from '../../../../environments/environment';
@@ -70,7 +68,7 @@ export enum MainMenu {
 export class LeftSideComponent implements OnInit, OnDestroy {
   @Output()
   openProfile = new EventEmitter<{
-    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
+    userSeq: number;
     openProfileOptions?: OpenProfileOptions;
   }>();
   @Output()
@@ -264,11 +262,11 @@ export class LeftSideComponent implements OnInit, OnDestroy {
   }
 
   onClickOpenProfile(params: {
-    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
+    userSeq: number;
     openProfileOptions?: OpenProfileOptions;
   }) {
     this.openProfile.emit({
-      userInfo: params.userInfo,
+      userSeq: params.userSeq,
       openProfileOptions: params.openProfileOptions
     });
   }

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

@@ -86,7 +86,7 @@ export class GroupComponent implements OnInit, OnDestroy {
   newGroupAndMember = new EventEmitter();
   @Output()
   openProfile = new EventEmitter<{
-    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
+    userSeq: number;
     openProfileOptions?: OpenProfileOptions;
   }>();
 
@@ -432,7 +432,7 @@ export class GroupComponent implements OnInit, OnDestroy {
     switch (menuType) {
       case 'VIEW_PROFILE':
         this.openProfile.emit({
-          userInfo,
+          userSeq: userInfo.seq,
           openProfileOptions: {
             useDelBuddybutton:
               !!group &&
@@ -570,11 +570,11 @@ export class GroupComponent implements OnInit, OnDestroy {
   }
 
   onClickOpenProfile(
-    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN,
+    userSeq: number,
     group: GroupDetailData
   ) {
     this.openProfile.emit({
-      userInfo,
+      userSeq,
       openProfileOptions: {
         useDelBuddybutton:
           !!group &&

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

@@ -75,7 +75,6 @@ import {
   CommonApiService,
   FileTalkSaveRequest,
   FileTalkSaveResponse,
-  TranslationReqRequest,
   TranslationSaveRequest,
   TranslationSaveResponse
 } from '@ucap-webmessenger/api-common';
@@ -117,7 +116,9 @@ import {
 })
 export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
   @Output()
-  openProfile = new EventEmitter<{ userInfo: UserInfo }>();
+  openProfile = new EventEmitter<{
+    userSeq: number;
+  }>();
 
   @ViewChild('chatForm', { static: false })
   private chatForm: UCapUiChatFormComponent;
@@ -1322,7 +1323,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
     }
   }
 
-  onClickOpenProfile(userInfo: UserInfo) {
+  onClickOpenProfile(userSeq: number) {
     if (
       this.roomInfo.roomType !== RoomType.Allim &&
       this.roomInfo.roomType !== RoomType.Bot &&
@@ -1330,7 +1331,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
       this.roomInfo.roomType !== RoomType.Allim_Elephant &&
       this.roomInfo.roomType !== RoomType.Allim_TMS
     ) {
-      this.openProfile.emit({ userInfo });
+      this.openProfile.emit({ userSeq });
     }
   }
 

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

@@ -1,11 +1,5 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { RightDrawer } from '@app/types';
-import { UserInfo } from '@ucap-webmessenger/protocol-room';
-import {
-  UserInfoSS,
-  UserInfoF,
-  UserInfoDN
-} from '@ucap-webmessenger/protocol-query';
 
 @Component({
   selector: 'app-layout-messenger-right-drawer',
@@ -18,7 +12,7 @@ export class RightDrawerComponent implements OnInit {
 
   @Output()
   openProfile = new EventEmitter<{
-    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
+    userSeq: number;
   }>();
   @Output()
   closeRightDrawer = new EventEmitter();
@@ -29,8 +23,8 @@ export class RightDrawerComponent implements OnInit {
 
   ngOnInit() {}
 
-  onClickOpenProfile(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
-    this.openProfile.emit({ userInfo });
+  onClickOpenProfile(userSeq: number) {
+    this.openProfile.emit({ userSeq });
   }
 
   onClickClose() {

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

@@ -6,7 +6,7 @@
       [presence]="getStatusBulkInfo(userInfo) | async"
       [sessionVerinfo]="sessionVerinfo"
       (contextmenu)="onContextMenuRoomUser($event, userInfo)"
-      (openProfile)="onClickOpenProfile($event)"
+      (openProfile)="onClickOpenProfile(userInfo.seq)"
     >
     </ucap-profile-user-list-item>
   </div>

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

@@ -49,7 +49,7 @@ import { MatMenuTrigger, MatDialog } from '@angular/material';
 })
 export class RoomUserListComponent implements OnInit, OnDestroy {
   @Output()
-  openProfile = new EventEmitter<UserInfo>();
+  openProfile = new EventEmitter<number>();
 
   @ViewChild('roomUserContextMenuTrigger', { static: true })
   roomUserContextMenuTrigger: MatMenuTrigger;
@@ -131,8 +131,8 @@ export class RoomUserListComponent implements OnInit, OnDestroy {
     );
   }
 
-  onClickOpenProfile(userInfo: UserInfo) {
-    this.openProfile.emit(userInfo);
+  onClickOpenProfile(userSeq: number) {
+    this.openProfile.emit(userSeq);
   }
 
   async onClickAddMember() {

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

@@ -4,186 +4,274 @@
   </div>
   <div class="app-layout-native-title-bar-title">DS Talk</div>
   <div class="app-layout-native-title-bar-spacer"></div>
-  <div *ngIf="!!loginRes" class="app-layout-native-title-bar-link">
-    <button
-      mat-icon-button
-      *ngFor="let link of weblink"
-      class="button app-layout-native-title-bar-logout"
-      [matTooltip]="link.title"
-      (click)="onClickWebLink(link)"
-    >
-      <svg class="svg-icon" viewBox="0 0 24 24" fill="currentColor">
-        <path
-          d="M13.29 9.29l-4 4a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4-4a1 1 0 0 0-1.42-1.42z"
-        />
-        <path
-          d="M12.28 17.4L11 18.67a4.2 4.2 0 0 1-5.58.4 4 4 0 0 1-.27-5.93l1.42-1.43a1 1 0 0 0 0-1.42 1 1 0 0 0-1.42 0l-1.27 1.28a6.15 6.15 0 0 0-.67 8.07 6.06 6.06 0 0 0 9.07.6l1.42-1.42a1 1 0 0 0-1.42-1.42z"
-        />
-        <path
-          d="M19.66 3.22a6.18 6.18 0 0 0-8.13.68L10.45 5a1.09 1.09 0 0 0-.17 1.61 1 1 0 0 0 1.42 0L13 5.3a4.17 4.17 0 0 1 5.57-.4 4 4 0 0 1 .27 5.95l-1.42 1.43a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l1.42-1.42a6.06 6.06 0 0 0-.6-9.06z"
-        />
-      </svg>
-    </button>
-    <span class="stroke-bar"></span>
-    <button
-      mat-icon-button
-      *ngFor="let link of weblinkBadgeTypes"
-      class="button app-layout-native-title-bar-logout"
-      [matBadgeHidden]="getHideWebLinkbadge(link)"
-      [matBadge]="getWebLinkBadgeCount(link)"
-      matBadgeDescription="확인하지 않은 메시지가 있습니다."
-      matBadgeColor="accent"
-      matBadgePosition="above after"
-      [matTooltip]="link.title"
-      (click)="onClickWebLink(link)"
-    >
-      <svg class="svg-icon" viewBox="0 0 24 24" fill="currentColor">
-        <path
-          d="M13.29 9.29l-4 4a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4-4a1 1 0 0 0-1.42-1.42z"
-        />
-        <path
-          d="M12.28 17.4L11 18.67a4.2 4.2 0 0 1-5.58.4 4 4 0 0 1-.27-5.93l1.42-1.43a1 1 0 0 0 0-1.42 1 1 0 0 0-1.42 0l-1.27 1.28a6.15 6.15 0 0 0-.67 8.07 6.06 6.06 0 0 0 9.07.6l1.42-1.42a1 1 0 0 0-1.42-1.42z"
-        />
-        <path
-          d="M19.66 3.22a6.18 6.18 0 0 0-8.13.68L10.45 5a1.09 1.09 0 0 0-.17 1.61 1 1 0 0 0 1.42 0L13 5.3a4.17 4.17 0 0 1 5.57-.4 4 4 0 0 1 .27 5.95l-1.42 1.43a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l1.42-1.42a6.06 6.06 0 0 0-.6-9.06z"
-        />
-      </svg>
-    </button>
-
-    <span class="stroke-bar"></span>
-
-    <button
-      *ngIf="updateInfo$ | async as updateInfo"
-      mat-icon-button
-      class="button app-layout-native-title-bar-setting"
-      matTooltip="업데이트"
-      (click)="onClickUpdate()"
-    >
-      <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="업데이트"
+  <div class="btn-area">
+    <div *ngIf="!!loginRes" class="app-layout-native-title-bar-link">
+      <!--s[추가된 전체 웹링크] weblink-->
+      <button
+        mat-icon-button
+        *ngFor="let link of weblink"
+        class="button"
+        [matTooltip]="link.title"
+        matTooltip="웹하드"
+        (click)="onClickWebLink(link)"
       >
-        <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>
+        <span class="weblink webhard">웹하드</span>
+      </button>
+      <button
+        mat-icon-button
+        *ngFor="let link of weblink"
+        class="button"
+        [matTooltip]="link.title"
+        matTooltip="DSP"
+        (click)="onClickWebLink(link)"
+      >
+        <span class="weblink dsp">DSP</span>
+      </button>
+      <button
+        mat-icon-button
+        *ngFor="let link of weblink"
+        class="button"
+        [matTooltip]="link.title"
+        matTooltip="SMS"
+        (click)="onClickWebLink(link)"
+      >
+        <span class="weblink sms">SMS</span>
+      </button>
+      <button
+        mat-icon-button
+        *ngFor="let link of weblink"
+        class="button"
+        [matTooltip]="link.title"
+        matTooltip="화상회의"
+        (click)="onClickWebLink(link)"
+      >
+        <span class="weblink vc">화상회의</span>
+      </button>
+      <button
+        mat-icon-button
+        *ngFor="let link of weblink"
+        class="button"
+        [matTooltip]="link.title"
+        matTooltip="EP"
+        (click)="onClickWebLink(link)"
+      >
+        <span class="weblink ep">EP</span>
+      </button>
+      <button
+        mat-icon-button
+        *ngFor="let link of weblink"
+        class="button"
+        [matTooltip]="link.title"
+        matTooltip="S&OM"
+        (click)="onClickWebLink(link)"
+      >
+        <span class="weblink S_OM">S&OM</span>
+      </button>
+      <button
+        mat-icon-button
+        *ngFor="let link of weblink"
+        class="button"
+        [matTooltip]="link.title"
+        matTooltip="코끼리"
+        (click)="onClickWebLink(link)"
+      >
+        <span class="weblink elephant">코끼리</span>
+      </button>
+      <button
+        mat-icon-button
+        *ngFor="let link of weblink"
+        class="button"
+        [matTooltip]="link.title"
+        matTooltip="IT서비스"
+        (click)="onClickWebLink(link)"
+      >
+        <span class="weblink it-service">IT</span>
+      </button>
+      <button
+        mat-icon-button
+        *ngFor="let link of weblink"
+        class="button"
+        [matTooltip]="link.title"
+        matTooltip="개인속보"
+        (click)="onClickWebLink(link)"
+      >
+        <span class="weblink Personal-news">NEWS</span>
+      </button>
+      <button
+        mat-icon-button
+        *ngFor="let link of weblink"
+        class="button"
+        [matTooltip]="link.title"
+        matTooltip="메일"
+        (click)="onClickWebLink(link)"
+      >
+        <span class="weblink mail">메일</span>
+      </button>
+      <button
+        mat-icon-button
+        *ngFor="let link of weblink"
+        class="button"
+        [matTooltip]="link.title"
+        matTooltip="결제"
+        (click)="onClickWebLink(link)"
+      >
+        <span class="weblink approved">결제</span>
+      </button>
+      <!--E[추가된 전체 웹링크] weblink-->
+      <button
+        mat-icon-button
+        *ngFor="let link of weblink"
+        class="button app-layout-native-title-bar-logout"
+        [matTooltip]="link.title"
+        (click)="onClickWebLink(link)"
+      >
+        <svg class="svg-icon" viewBox="0 0 24 24" fill="currentColor">
+          <path
+            d="M13.29 9.29l-4 4a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4-4a1 1 0 0 0-1.42-1.42z"
+          />
+          <path
+            d="M12.28 17.4L11 18.67a4.2 4.2 0 0 1-5.58.4 4 4 0 0 1-.27-5.93l1.42-1.43a1 1 0 0 0 0-1.42 1 1 0 0 0-1.42 0l-1.27 1.28a6.15 6.15 0 0 0-.67 8.07 6.06 6.06 0 0 0 9.07.6l1.42-1.42a1 1 0 0 0-1.42-1.42z"
+          />
+          <path
+            d="M19.66 3.22a6.18 6.18 0 0 0-8.13.68L10.45 5a1.09 1.09 0 0 0-.17 1.61 1 1 0 0 0 1.42 0L13 5.3a4.17 4.17 0 0 1 5.57-.4 4 4 0 0 1 .27 5.95l-1.42 1.43a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l1.42-1.42a6.06 6.06 0 0 0-.6-9.06z"
+          />
+        </svg>
+      </button>
 
-    <button
-      mat-icon-button
-      class="button app-layout-native-title-bar-setting"
-      matTooltip="공지사항"
-      (click)="onClickNotice()"
-    >
-      <svg class="svg-icon" viewBox="0 0 24 24" fill="currentColor">
-        <path
-          d="M22.13,8.91h-1.94V1.56c0-0.31-0.18-0.58-0.47-0.7c-0.28-0.12-0.61-0.05-0.82,0.16c-3.35,3.35-6.25,4.95-8.09,5.7
+      <button
+        mat-icon-button
+        *ngFor="let link of weblinkBadgeTypes"
+        class="button app-layout-native-title-bar-logout"
+        [matBadgeHidden]="getHideWebLinkbadge(link)"
+        [matBadge]="getWebLinkBadgeCount(link)"
+        matBadgeDescription="확인하지 않은 메시지가 있습니다."
+        matBadgeColor="accent"
+        matBadgePosition="above after"
+        [matTooltip]="link.title"
+        (click)="onClickWebLink(link)"
+      >
+        <svg class="svg-icon" viewBox="0 0 24 24" fill="currentColor">
+          <path
+            d="M13.29 9.29l-4 4a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4-4a1 1 0 0 0-1.42-1.42z"
+          />
+          <path
+            d="M12.28 17.4L11 18.67a4.2 4.2 0 0 1-5.58.4 4 4 0 0 1-.27-5.93l1.42-1.43a1 1 0 0 0 0-1.42 1 1 0 0 0-1.42 0l-1.27 1.28a6.15 6.15 0 0 0-.67 8.07 6.06 6.06 0 0 0 9.07.6l1.42-1.42a1 1 0 0 0-1.42-1.42z"
+          />
+          <path
+            d="M19.66 3.22a6.18 6.18 0 0 0-8.13.68L10.45 5a1.09 1.09 0 0 0-.17 1.61 1 1 0 0 0 1.42 0L13 5.3a4.17 4.17 0 0 1 5.57-.4 4 4 0 0 1 .27 5.95l-1.42 1.43a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l1.42-1.42a6.06 6.06 0 0 0-.6-9.06z"
+          />
+        </svg>
+      </button>
+      <button
+        *ngIf="updateInfo$ | async as updateInfo"
+        mat-icon-button
+        class="button app-layout-native-title-bar-setting"
+        matTooltip="업데이트"
+        (click)="onClickUpdate()"
+      >
+        <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>
+      <span class="stroke-bar"></span>
+      <!--S[삭제예정] 마이프로필 설정을 이동
+      <button
+        mat-icon-button
+        class="button app-layout-native-title-bar-setting"
+        matTooltip="공지사항"
+        (click)="onClickNotice()"
+      >
+        <svg class="svg-icon" viewBox="0 0 24 24" fill="currentColor">
+          <path
+            d="M22.13,8.91h-1.94V1.56c0-0.31-0.18-0.58-0.47-0.7c-0.28-0.12-0.61-0.05-0.82,0.16c-3.35,3.35-6.25,4.95-8.09,5.7
       	C8.82,7.54,7.61,7.56,7.6,7.56H1.87c-0.42,0-0.76,0.34-0.76,0.76v6.76c0,0.42,0.34,0.76,0.76,0.76h0.77l2.86,6.9
       	c0.12,0.28,0.39,0.47,0.7,0.47h4.19c0,0,0,0,0,0c0.42,0,0.76-0.34,0.76-0.76c0-0.12-0.03-0.23-0.08-0.33l-2.55-6.16
       	c1.69,0.33,5.57,1.6,10.38,6.42c0.14,0.14,0.34,0.22,0.53,0.22c0,0,0.01,0,0.01,0c0.41-0.01,0.74-0.34,0.74-0.76
       	c0-0.02,0-0.03,0-0.05l0-7.31h1.94c0.42,0,0.76-0.34,0.76-0.76V9.67C22.88,9.25,22.54,8.91,22.13,8.91z M2.63,9.07h4.22v5.25H2.63
       	V9.07z M6.7,21.68l-2.35-5.67h2.55l2.35,5.67H6.7z M8.36,14.39V9c1.57-0.24,5.45-1.26,10.31-5.68v6.34v0v4.05c0,0,0,0,0,0l0,6.34
       	C13.81,15.65,9.93,14.63,8.36,14.39z M21.37,12.97h-1.19v-2.54h1.19V12.97z"
-        />
-      </svg>
-    </button>
+          />
+        </svg>
+      </button>
 
-    <button
-      mat-icon-button
-      class="button app-layout-native-title-bar-setting"
-      matTooltip="환경설정"
-      (click)="onClickSettings()"
-    >
-      <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="환경설정"
+      <button
+        mat-icon-button
+        class="button app-layout-native-title-bar-setting"
+        matTooltip="환경설정"
+        (click)="onClickSettings()"
       >
-        <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>
+        <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"
+           matTooltip="환경설정"
+        >
+          <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"
-      matTooltip="로그아웃"
-      (click)="onClickLogout()"
-    >
-      <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"
+      <button
+        mat-icon-button
+        class="button app-layout-native-title-bar-logout"
+        matTooltip="로그아웃"
+        (click)="onClickLogout()"
       >
-        <path
-          d="M10 3H6a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h4M16 17l5-5-5-5M19.8 12H9"
-        />
-      </svg>
-    </button>
-
-    <ucap-profile-my-profile-widget
-      [profileImageRoot]="sessionVerinfo.profileRoot"
-      [profileImageFile]="getMyProfileImageWidget()"
-      (openProfile)="onClickOpenProfile()"
-      class="myprofile"
-    ></ucap-profile-my-profile-widget>
-    <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"
-      (click)="onClickMinimize()"
-    >
-      <!--<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"
-        alt="창 최소화"
+        <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"
+          matTooltip="로그아웃"
+          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>
+      E[삭제예정] 마이프로필 설정을 이동-->
+      <ucap-profile-my-profile-widget
+        [profileImageRoot]="sessionVerinfo.profileRoot"
+        [profileImageFile]="getMyProfileImageWidget()"
+        (openProfile)="onClickOpenProfile()"
+        class="myprofile"
+      ></ucap-profile-my-profile-widget>
+    </div>
+    <div class="app-layout-native-title-bar-actions">
+      <button
+        mat-icon-button
+        class="button app-layout-native-title-bar-minimize"
+        (click)="onClickMinimize()"
       >
-        <line x1="5" y1="18" x2="19" y2="18"></line>
-      </svg>
-    </button>
-    <button
-      mat-icon-button
-      class="button app-layout-native-title-bar-maximize"
-      (click)="onClickMaxmize()"
-    >
-      <ng-container [ngSwitch]="windowStateChanged$ | async">
-        <!--<mat-icon *ngSwitchCase="WindowState.Maximized">filter_none</mat-icon>-->
+        <!--<mat-icon>minimize</mat-icon>-->
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="20"
@@ -194,20 +282,65 @@
           stroke-width="2"
           stroke-linecap="butt"
           stroke-linejoin="round"
-          *ngSwitchCase="WindowState.Maximized"
-          alt="창 이전크기"
+          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"
-          />
+          <line x1="5" y1="18" x2="19" y2="18"></line>
         </svg>
+      </button>
+      <button
+        mat-icon-button
+        class="button app-layout-native-title-bar-maximize"
+        (click)="onClickMaxmize()"
+      >
+        <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"
+            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"
+            />
+          </svg>
 
-        <!--<mat-icon *ngSwitchDefault>crop_din</mat-icon>-->
+          <!--<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
+            alt="창크기 최대"
+          >
+            <rect x="5" y="5" width="12" height="12" rx="2" ry="2"></rect>
+          </svg>
+        </ng-container>
+      </button>
+      <button
+        mat-icon-button
+        class="button app-layout-native-title-bar-close"
+        (click)="onClickClose()"
+      >
+        <!--<mat-icon>close</mat-icon>-->
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="20"
@@ -218,34 +351,12 @@
           stroke-width="2"
           stroke-linecap="butt"
           stroke-linejoin="round"
-          *ngSwitchDefault
-          alt="창크기 최대"
+          alt="창닫기"
         >
-          <rect x="5" y="5" width="12" height="12" rx="2" ry="2"></rect>
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
         </svg>
-      </ng-container>
-    </button>
-    <button
-      mat-icon-button
-      class="button app-layout-native-title-bar-close"
-      (click)="onClickClose()"
-    >
-      <!--<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"
-        alt="창닫기"
-      >
-        <line x1="18" y1="6" x2="6" y2="18"></line>
-        <line x1="6" y1="6" x2="18" y2="18"></line>
-      </svg>
-    </button>
+      </button>
+    </div>
   </div>
 </mat-toolbar>

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

@@ -27,108 +27,162 @@
     .app-layout-native-title-bar-spacer {
       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;
+    .btn-area {
+      display: flex;
+      margin-left: auto;
+      flex-flow: row;
+      justify-items: center;
+      .app-layout-native-title-bar-link {
+        align-items: center;
+        position: relative;
+        display: flex;
+        .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: 30px;
+          min-width: 30px;
+          max-width: 30px;
+          padding: 3px;
+          line-height: 10px;
+          background-color: #ffffff;
           border-radius: 50%;
-        }
-        &:hover {
-          opacity: 0.7;
+          transition: background 0.2s linear, color 0.2s linear;
+          text-align: center;
+          font-size: 10px;
+          vertical-align: middle;
+          margin-left: 14px;
+          .weblink {
+            display: inline-flex;
+            line-height: 24px;
+            font-size: 12px;
+            font-weight: bold;
+            text-align: center;
+            width: 24px;
+            height: 24px;
+            background-repeat: no-repeat;
+            background-position: 50% 50%;
+            text-indent: -1000000px;
+            justify-content: center;
+            &.dsp {
+              text-indent: 0;
+            }
+            &.sms {
+              text-indent: 0;
+              letter-spacing: -1px;
+            }
+            &.ep,
+            &.it-service {
+              text-indent: 0;
+              font-size: 13px;
+            }
+            &.S_OM,
+            &.Personal-news {
+              text-indent: 0;
+              font-size: 11px;
+              letter-spacing: -1px;
+            }
+          }
+
+          &.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 {
-        -webkit-app-region: no-drag;
-        outline: 0;
-        cursor: pointer;
-        border: none;
-        height: 30px;
-        min-width: 30px;
-        max-width: 30px;
-        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: 6px;
-        transform: translateY(-2px);
-        .mat-icon {
-          //transform: translateY(-2px);
-          width: 16px;
-          height: 16px;
-          min-height: 16px;
-          min-width: 16px;
-          font-size: 16px;
-        }
-
-        &.app-layout-native-title-bar-close,
-        &.app-layout-native-title-bar-maximize,
-        &.app-layout-native-title-bar-minimize {
-          color: darken(white, 20%);
-          font-weight: lighter;
-        }
-
-        // &.app-layout-native-title-bar-minimize .mat-icon {
-        //   transform: translateY(-43%);
-        // }
-
-        &:hover {
-          border-radius: 4px;
-          &.app-layout-native-title-bar-close {
-            background: darken(#000000, 10%);
-            color: darken(white, 0);
+      .app-layout-native-title-bar-actions {
+        align-items: center;
+        position: relative;
+        .button {
+          -webkit-app-region: no-drag;
+          outline: 0;
+          cursor: pointer;
+          border: none;
+          height: 30px;
+          min-width: 30px;
+          max-width: 30px;
+          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: 6px;
+          transform: translateY(-2px);
+          .mat-icon {
+            //transform: translateY(-2px);
+            width: 16px;
+            height: 16px;
+            min-height: 16px;
+            min-width: 16px;
+            font-size: 16px;
           }
 
+          &.app-layout-native-title-bar-close,
+          &.app-layout-native-title-bar-maximize,
           &.app-layout-native-title-bar-minimize {
-            background: darken(#000000, 10%);
-            color: darken(white, 0);
+            color: darken(white, 20%);
+            font-weight: lighter;
           }
 
-          &.app-layout-native-title-bar-maximize {
-            background: darken(#000000, 10%);
-            color: darken(white, 0);
+          // &.app-layout-native-title-bar-minimize .mat-icon {
+          //   transform: translateY(-43%);
+          // }
+
+          &:hover {
+            border-radius: 4px;
+            &.app-layout-native-title-bar-close {
+              background: darken(#000000, 10%);
+              color: darken(white, 0);
+            }
+
+            &.app-layout-native-title-bar-minimize {
+              background: darken(#000000, 10%);
+              color: darken(white, 0);
+            }
+
+            &.app-layout-native-title-bar-maximize {
+              background: darken(#000000, 10%);
+              color: darken(white, 0);
+            }
           }
         }
       }
     }
   }
 }
+@mixin weblink($color) {
+  $color: rgba($color, 0.999);
+  .webhard {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='#{$color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M4.5,4.3L1.7,10v5c0,0.9,0.7,1.7,1.7,1.7h13.3c0.9,0,1.7-0.7,1.7-1.7v-5l-2.9-5.7c-0.3-0.6-0.9-0.9-1.5-0.9H6 C5.4,3.3,4.8,3.7,4.5,4.3z'/%3E%3Cline class='st0' x1='5' y1='13.3' x2='5' y2='13.3'/%3E%3Cline class='st0' x1='8.3' y1='13.3' x2='8.3' y2='13.3'/%3E%3C/svg%3E");
+  }
+  .vc {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='#{$color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-video'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'%3E%3C/polygon%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'%3E%3C/rect%3E%3C/svg%3E");
+  }
+  .elephant {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='#{$color}' stroke='none' xml:space='preserve'%3E%3Cpath d='M19.1,5c-1,0-2,0.4-2.7,1.1c-1.2-1-2.9-1.5-4.7-1.5c-1.7,0-3.3,0.5-4.5,1.4C6.6,5.3,5.7,5,4.8,5C2.6,5,0.9,6.7,0.9,8.8 c0,1.1,1.1,4.6,2.7,5.7c0.3,0.2,0.7,0.3,1.1,0.3c0.2,0,0.4,0,0.6-0.1c0.5-0.2,0.9-0.4,1.3-0.6c0.6,0.6,1.3,1,2.1,1.4l0.8,1.2 c0.3,0.5,0.5,1.1,0.6,1.7H9.2c-0.7,0-1.2,0.6-1.2,1.2s0.6,1.2,1.2,1.2h0.4c2.5,0,4.6-1.7,5.2-4.1l0.4-1.4c0.7-0.4,1.4-0.8,1.9-1.3 c0.4,0.3,0.9,0.5,1.5,0.8c0.2,0.1,0.4,0.1,0.6,0.1c0.4,0,0.7-0.1,1.1-0.3c1.6-1.1,2.7-4.6,2.7-5.7C22.9,6.7,21.2,5,19.1,5z M5,14.1 c-0.3,0.1-0.7,0.1-1-0.2C2.7,13,1.7,9.8,1.7,8.8c0-1.7,1.4-3.1,3.1-3.1c0.7,0,1.4,0.3,2,0.7C6.4,6.8,6.1,7.1,5.8,7.5 C5.5,7.3,5.1,7.2,4.8,7.2c-1.2,0-2.1,1-2.1,2.1c0,0.6,0.6,2.5,1.5,3.1c0.2,0.1,0.4,0.2,0.6,0.2c0.1,0,0.3,0,0.4-0.1 c0.1,0,0.2-0.1,0.3-0.1c0.2,0.4,0.4,0.8,0.7,1.1C5.8,13.8,5.4,13.9,5,14.1z M5.1,11.8c-0.1,0-0.2,0.1-0.3,0.1 c-0.1,0-0.2,0.1-0.4-0.1c-0.6-0.4-1.2-2-1.2-2.5c0-0.8,0.6-1.4,1.4-1.4C5,7.9,5.2,8,5.4,8.1c-0.3,0.7-0.5,1.4-0.5,2.2 C4.9,10.8,5,11.3,5.1,11.8z M14.7,14.8c-0.1,0-0.2,0.1-0.2,0.2l-0.4,1.6c-0.5,2.1-2.4,3.5-4.5,3.5H9.2c-0.3,0-0.5-0.2-0.5-0.5 c0-0.3,0.2-0.5,0.5-0.5h1.1c0.3,0,0.5-0.2,0.5-0.5c0-0.8-0.2-1.6-0.7-2.3L9.3,15c0-0.1-0.1-0.1-0.2-0.1c-0.8-0.3-1.5-0.8-2.1-1.3 c0,0,0-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1c-0.4-0.4-0.7-0.9-0.9-1.4c0,0,0-0.1,0-0.1c-0.2-0.5-0.3-1-0.3-1.5c0-2.8,2.7-5,6.1-5 s6.1,2.3,6.1,5C17.9,12.2,16.7,13.9,14.7,14.8z M18.2,8.3c0.3-0.2,0.6-0.4,0.9-0.4c0.8,0,1.4,0.6,1.4,1.4c0,0.5-0.5,2.1-1.2,2.5 C19.2,12,19.1,12,19,11.9c-0.2-0.1-0.4-0.2-0.6-0.3c0.1-0.4,0.2-0.9,0.2-1.3C18.6,9.6,18.5,8.9,18.2,8.3z M19.8,13.9 c-0.3,0.2-0.7,0.3-1,0.2c-0.5-0.2-0.9-0.4-1.3-0.7c0.3-0.3,0.5-0.7,0.7-1.1c0.2,0.1,0.4,0.2,0.6,0.3c0.1,0.1,0.3,0.1,0.4,0.1 c0.2,0,0.4-0.1,0.6-0.2c0.9-0.6,1.5-2.5,1.5-3.1c0-1.2-1-2.1-2.1-2.1c-0.5,0-0.9,0.2-1.3,0.4c-0.2-0.4-0.5-0.7-0.9-1.1 c0.6-0.6,1.3-0.9,2.1-0.9c1.7,0,3.1,1.4,3.1,3.1C22.2,9.8,21.1,13,19.8,13.9z'/%3E%3Cpath d='M11.5,16.5h1c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5h-1c-0.3,0-0.5,0.2-0.5,0.5S11.2,16.5,11.5,16.5z'/%3E%3Cpath d='M13,17.6H11c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5H13c0.3,0,0.5-0.2,0.5-0.5S13.3,17.6,13,17.6z'/%3E%3Cpath d='M17,12.4c0,0.5-0.4,0.8-0.8,0.8c-0.5,0-0.8-0.4-0.8-0.8s0.4-0.8,0.8-0.8C16.7,11.6,17,12,17,12.4z'/%3E%3Cpath d='M8.5,12.4c0,0.5-0.4,0.8-0.8,0.8c-0.5,0-0.8-0.4-0.8-0.8s0.4-0.8,0.8-0.8C8.1,11.6,8.5,12,8.5,12.4z'/%3E%3C/svg%3E");
+  }
+  .mail {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='#{$color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E");
+  }
+  .approved {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='#{$color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z'%3E%3C/path%3E%3Cline x1='16' y1='8' x2='2' y2='22'%3E%3C/line%3E%3Cline x1='17.5' y1='15' x2='9' y2='15'%3E%3C/line%3E%3C/svg%3E");
+  }
+}
+
+@include weblink(#425888);

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

@@ -16,12 +16,6 @@ import * as MessageStore from '@app/store/messenger/message';
 import { Observable, Subscription, of } from 'rxjs';
 import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
 
-import { UserInfo } from '@ucap-webmessenger/protocol-sync';
-import {
-  UserInfoSS,
-  UserInfoF,
-  UserInfoDN
-} from '@ucap-webmessenger/protocol-query';
 import { StatusProtocolService } from '@ucap-webmessenger/protocol-status';
 import { StatusType, StatusCode } from '@ucap-webmessenger/core';
 import {
@@ -211,14 +205,17 @@ export class MainPageComponent implements OnInit, OnDestroy {
   }
 
   onClickOpenProfile(params: {
-    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
+    userSeq: number;
     openProfileOptions?: OpenProfileOptions;
   }) {
+    if (!params.userSeq || params.userSeq < 0) {
+      return;
+    }
     // [GROUP]
     // this.queryProtocolService
     //   .dataUser({
     //     divCd: 'OPENPROF',
-    //     seq: userInfo.seq,
+    //     seq: params.userSeq,
     //     senderCompanyCode: this.loginRes.userInfo.companyCode,
     //     senderEmployeeType: this.loginRes.userInfo.employeeType
     //   })
@@ -244,7 +241,7 @@ export class MainPageComponent implements OnInit, OnDestroy {
     this.daesangProtocolService
       .dataUserDaesang({
         divCd: 'OPENPROF',
-        seq: params.userInfo.seq,
+        seq: params.userSeq,
         senderCompanyCode: this.loginRes.userInfo.companyCode,
         senderEmployeeType: this.loginRes.userInfo.employeeType
       })

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

@@ -17,6 +17,7 @@ import { EventType, Info, EventJson } from '@ucap-webmessenger/protocol-event';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { StatusCode as ApiStatusCode } from '@ucap-webmessenger/api';
 import { StatusCode } from '@ucap-webmessenger/core';
+import { WorkStatusType } from 'projects/ucap-webmessenger-protocol-status/src/lib/types/work-status.type';
 
 @Component({
   selector: 'app-template.page',
@@ -73,7 +74,8 @@ export const status: StatusBulkInfo = {
   // 단말상태정보(s)
   terminalStatus: TerminalStatusInfo.Idle,
   // 단말상태번호(n)
-  terminalStatusNumber: TerminalStatusNumber.Idle
+  terminalStatusNumber: TerminalStatusNumber.Idle,
+  workstatus: WorkStatusType.Work
 };
 export const buddyData: UserInfo = {
   seq: 15,

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

@@ -138,7 +138,7 @@ export class Effects {
       map(action => {
         const roomInfo = action.roomInfo;
         let requestCount =
-          environment.productConfig.CommonSetting.eventRequestDefaultCount;
+          environment.productConfig.CommonSetting.eventRequestInitCount;
 
         // 여기까지 읽음 처리..
         if (!!roomInfo.finalEventSeq && !!roomInfo.lastReadEventSeq) {
@@ -146,11 +146,11 @@ export class Effects {
 
           // 기존 요청개수보다 요청할 갯수가 적을 경우 기본값.
           if (
-            environment.productConfig.CommonSetting.eventRequestDefaultCount >=
+            environment.productConfig.CommonSetting.eventRequestInitCount >=
             requestCount
           ) {
             requestCount =
-              environment.productConfig.CommonSetting.eventRequestDefaultCount;
+              environment.productConfig.CommonSetting.eventRequestInitCount;
           } else {
             // 여기까지 읽음 처리를 위한 최대 요청 개수 제한.
             if (

projects/ucap-webmessenger-app/src/environments/environment.daesang.dev.ts

@@ -75,6 +75,7 @@ export const environment: Environment = {
       maxChatRoomUser: 300,
       masstextLength: 800,
 
+      eventRequestInitCount: 15,
       eventRequestDefaultCount: 50,
 
       readHereShowMinimumEventCount: 10,

projects/ucap-webmessenger-app/src/environments/environment.daesang.prod.ts

@@ -75,6 +75,7 @@ export const environment: Environment = {
       maxChatRoomUser: 300,
       masstextLength: 800,
 
+      eventRequestInitCount: 30,
       eventRequestDefaultCount: 50,
 
       readHereShowMinimumEventCount: 10,

projects/ucap-webmessenger-app/src/environments/environment.dev.ts

@@ -75,6 +75,7 @@ export const environment: Environment = {
       maxChatRoomUser: 300,
       masstextLength: 800,
 
+      eventRequestInitCount: 15,
       eventRequestDefaultCount: 50,
 
       readHereShowMinimumEventCount: 10,

projects/ucap-webmessenger-app/src/environments/environment.prod.ts

@@ -75,6 +75,7 @@ export const environment: Environment = {
       maxChatRoomUser: 300,
       masstextLength: 800,
 
+      eventRequestInitCount: 15,
       eventRequestDefaultCount: 50,
 
       readHereShowMinimumEventCount: 10,

projects/ucap-webmessenger-app/src/environments/environment.type.ts

@@ -82,6 +82,8 @@ export interface Environment {
       /** 대용량대화 기준 */
       masstextLength: number;
 
+      /** 대화방 초기 로딩 이벤트 갯수 */
+      eventRequestInitCount: number;
       /** 대화방 이벤트 조회 개수 */
       eventRequestDefaultCount: number;
 

projects/ucap-webmessenger-daesang/src/lib/protocols/data-user.ts

@@ -11,6 +11,7 @@ import {
   UserInfoSS,
   DataUserResponse
 } from '@ucap-webmessenger/protocol-query';
+import { WorkStatusType } from 'projects/ucap-webmessenger-protocol-status/src/lib/types/work-status.type';
 
 // export interface UserInfoSSForDaesang extends UserInfoSS {
 //   /****** For daesang ******/
@@ -69,7 +70,7 @@ export const decodeDataUser: ProtocolDecoder<DataUserResponse> = (
       // [daesang]
       companyName: info[29],
       responsibilities: info[30],
-      workstatus: info[31],
+      workstatus: info[31] as WorkStatusType,
       job: info[32],
       customerInfo: info[33],
       workplace: info[34]

projects/ucap-webmessenger-protocol-query/src/lib/models/user-info-ss.ts

@@ -1,6 +1,7 @@
 import { RoleCode } from '@ucap-webmessenger/protocol-authentication';
 import { CallMode } from '@ucap-webmessenger/core';
 import { EmployeeType } from '@ucap-webmessenger/protocol-room';
+import { WorkStatusType } from 'projects/ucap-webmessenger-protocol-status/src/lib/types/work-status.type';
 
 export interface UserInfoSS {
   /** 사용자SEQ */
@@ -67,7 +68,7 @@ export interface UserInfoSS {
   /** 담당업무 */
   responsibilities?: string;
   /** 업무 상태 */
-  workstatus?: string;
+  workstatus?: WorkStatusType;
   /** SC직무 */
   job?: string;
   /** 거래처정보 */

projects/ucap-webmessenger-protocol-status/src/lib/models/status-bulk-info.ts

@@ -3,6 +3,7 @@ import {
   TerminalStatusInfo,
   TerminalStatusNumber
 } from '../types/terminal-status.type';
+import { WorkStatusType } from '../types/work-status.type';
 
 export interface StatusBulkInfo extends StatusInfo {
   // 사용자SEQ
@@ -18,4 +19,7 @@ export interface StatusBulkInfo extends StatusInfo {
   terminalStatus: TerminalStatusInfo;
   /** 단말상태번호(n) */
   terminalStatusNumber: TerminalStatusNumber;
+
+  /** 업무상태정보(s) */
+  workstatus: WorkStatusType;
 }

projects/ucap-webmessenger-protocol-status/src/lib/models/status-info.ts

@@ -1,20 +1,24 @@
 import { StatusCode } from '@ucap-webmessenger/core';
+import { WorkStatusType } from '../types/work-status.type';
 
 export interface StatusInfo {
-  // 사용자SEQ
+  /** 사용자SEQ */
   userSeq: number;
-  // 상태코드(PC)
+  /** 상태코드(PC) */
   pcStatus: StatusCode;
-  // 상태코드(통화)
+  /** 상태코드(통화) */
   phoneStatus: StatusCode;
-  // 상태코드(모바일)
+  /** 상태코드(모바일) */
   mobileStatus: StatusCode;
-  // 상태코드(PC화상)
+  /** 상태코드(PC화상) */
   conferenceStatus: StatusCode;
-  // 상태메시지
+  /** 상태메시지 */
   statusMessage: string;
-  // 상태코드(Mobile화상)
+  /** 상태코드(Mobile화상) */
   mobileConferenceStatus: StatusCode;
-  // 상태코드(iMessenger)
+  /** 상태코드(iMessenger) */
   imessengerStatus: StatusCode;
+
+  /** 업무상태 */
+  workstatus?: WorkStatusType;
 }

projects/ucap-webmessenger-protocol-status/src/lib/protocols/bulk-info.ts

@@ -17,6 +17,7 @@ import {
 } from '../types/terminal-status.type';
 import { StatusInfo } from '../models/status-info';
 import { StatusBulkInfo } from '../models/status-bulk-info';
+import { WorkStatusType } from '../types/work-status.type';
 
 export interface BulkInfoRequest extends ProtocolRequest {
   /** DivCD(s) */
@@ -72,7 +73,8 @@ export const decodeBulkInfoData: ProtocolDecoder<BulkInfoData> = (
       mobileConferenceStatus: info[6] as StatusCode,
       imessengerStatus: info[7] as StatusCode,
       terminalStatus: info[8] as TerminalStatusInfo,
-      terminalStatusNumber: Number(info[9]) as TerminalStatusNumber
+      terminalStatusNumber: Number(info[9]) as TerminalStatusNumber,
+      workstatus: info[10] as WorkStatusType
     });
   });
   return decodeProtocolMessage(message, {

projects/ucap-webmessenger-protocol-status/src/lib/protocols/status.ts

@@ -12,6 +12,7 @@ import {
 } from '@ucap-webmessenger/protocol';
 import { StatusType, StatusCode } from '@ucap-webmessenger/core';
 import { StatusInfo } from '../models/status-info';
+import { WorkStatusType } from '../types/work-status.type';
 
 export interface StatusRequest extends ProtocolRequest {
   // 상태타입(s)
@@ -74,6 +75,7 @@ export const decodeStatusNotification: ProtocolDecoder<StatusNotification> = (
     conferenceStatus: info[4] as StatusCode,
     statusMessage: info[5],
     mobileConferenceStatus: info[6] as StatusCode,
-    imessengerStatus: info[7] as StatusCode
+    imessengerStatus: info[7] as StatusCode,
+    workstatus: info[8] as WorkStatusType
   } as StatusNotification);
 };

projects/ucap-webmessenger-protocol-status/src/lib/types/work-status.type.ts

@@ -0,0 +1,41 @@
+export enum WorkStatusType {
+  /** 근무중 */
+  Work = 'W01',
+
+  /** 휴가 */
+  /** 오전 */
+  VacationAM = 'V01',
+  /** 오후 */
+  VacationPM = 'V02',
+  /** 휴가 */
+  VacationAll = 'V03',
+  /** 휴직 */
+  LeaveOfAbsence = 'V04',
+  /** 장기 리프레쉬 */
+  LongtermRefresh = 'V05'
+  // /** 교육 */
+  // /** 오전교육 */
+  // EducationAm = 'E01',
+  // /** 오후교육 */
+  // EducationPm = 'E02',
+  // /** 종일교육 */
+  // EducationAll = 'E03',
+  // /** 장기교육 */
+  // EducationLongterm = 'E04',
+  // /** 휴직 */
+  // /** 일반휴직 */
+  // LTRNormal = 'R01',
+  // /** 육아휴직 */
+  // LTRBaby = 'R02',
+  // /** 기타휴직 */
+  // LTREtc = 'R03',
+  // /** 일반출장 */
+  // /** 출장 */
+  // BusinessTrip = 'T01',
+  // /** 해외출장 */
+  // BusinessTripOverseas = 'T02',
+  // /** 국내출장 */
+  // BusinessTripLocal = 'T03',
+  // /** 장기출장 */
+  // BusinessLongterm = 'T04',
+}

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

@@ -120,7 +120,7 @@
             [base]="profileImageRoot"
             [path]="getUserProfile(message.senderSeq)"
             [default]="'assets/images/img_nophoto_50.png'"
-            (click)="onClickOpenProfile($event, getUerInfo(message.senderSeq))"
+            (click)="onClickOpenProfile($event, message.senderSeq)"
           />
           <!-- <ucap-ui-imaage
             [style]="'width: 50px; height: 50px;'"

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts

@@ -54,7 +54,7 @@ export class MessagesComponent implements OnInit {
   translationSimpleview = false;
 
   @Output()
-  openProfile = new EventEmitter<UserInfo>();
+  openProfile = new EventEmitter<number>();
   @Output()
   moreEvent = new EventEmitter<number>();
   @Output()
@@ -120,18 +120,6 @@ export class MessagesComponent implements OnInit {
     }
     return '';
   }
-  getUerInfo(seq: number): UserInfo {
-    if (!this.userInfos) {
-      return null;
-    }
-
-    const userInfo: UserInfo[] = this.userInfos.filter(
-      user => user.seq === seq
-    );
-    if (!!userInfo && userInfo.length > 0) {
-      return userInfo[0];
-    }
-  }
   getEventSearched(seq: number): boolean {
     return (
       !!this.searchedList &&
@@ -213,11 +201,11 @@ export class MessagesComponent implements OnInit {
     return false;
   }
 
-  onClickOpenProfile(event: MouseEvent, userInfo: UserInfo) {
+  onClickOpenProfile(event: MouseEvent, userSeq: number) {
     event.preventDefault();
     event.stopPropagation();
 
-    this.openProfile.emit(userInfo);
+    this.openProfile.emit(userSeq);
   }
 
   onClickMore(event: any) {

projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.html

@@ -10,18 +10,20 @@
   </span>
   <div class="btn-setting">
     <span class="presence pcOff"></span>
-    <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>
+    <button>
+      <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>
+    </button>
   </div>
 </div>

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

@@ -3,7 +3,6 @@
   flex-flow: row;
   width: 60px;
   height: 30px;
-  bottom: 10px;
   color: #ffffff;
   font-size: 11px;
   justify-items: flex-end;
@@ -28,6 +27,7 @@
   }
   .btn-setting {
     position: absolute;
+    height: 100%;
     bottom: 0;
     display: inline-flex;
     justify-items: flex-end;
@@ -36,13 +36,22 @@
       display: inline-block;
       bottom: 0;
       width: 10px;
-      height: 11px;
+      height: 10px;
       border: 1px solid #ffffff;
       align-self: flex-end;
     }
-    svg {
-      &.on {
-        transform: rotate(180deg);
+    button {
+      cursor: pointer;
+      width: 20px;
+      height: 100%;
+      align-items: center;
+      background: none;
+      border: none;
+      svg {
+        stroke: #ffffff;
+        &.on {
+          transform: rotate(180deg);
+        }
       }
     }
   }

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

@@ -16,6 +16,7 @@ import { FormControl } from '@angular/forms';
 import { SmsUtils } from '@ucap-webmessenger/daesang';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
+import { WorkStatusType } from 'projects/ucap-webmessenger-protocol-status/src/lib/types/work-status.type';
 
 @Component({
   selector: 'ucap-profile-profile',
@@ -138,20 +139,20 @@ export class ProfileComponent implements OnInit {
     let workstatus = '';
     if (!!userInfo && !!userInfo.workstatus) {
       switch (userInfo.workstatus) {
-        case 'V01':
-          workstatus = '오전휴가';
+        case WorkStatusType.VacationAM:
+          workstatus = '오전';
           break;
-        case 'V02':
-          workstatus = '오후휴가';
+        case WorkStatusType.VacationPM:
+          workstatus = '오후';
           break;
-        case 'V03':
-          workstatus = '종일휴가';
+        case WorkStatusType.VacationAll:
+          workstatus = '휴가';
           break;
-        case 'V04':
-          workstatus = '장기휴가';
+        case WorkStatusType.LeaveOfAbsence:
+          workstatus = '휴직';
           break;
-        case 'V05':
-          workstatus = '장기 리프레쉬';
+        case WorkStatusType.LongtermRefresh:
+          workstatus = '장기';
           break;
       }
     }

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

@@ -11,7 +11,7 @@
           [base]="profileImageRoot"
           [path]="userInfo.profileImageFile"
           [default]="'assets/images/img_nophoto_50.png'"
-          (click)="onClickOpenProfile($event, userInfo)"
+          (click)="onClickOpenProfile($event, userInfo.seq)"
         />
       </div>
       <span

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

@@ -52,9 +52,7 @@ export class UserListItemComponent implements OnInit {
     userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
   }>();
   @Output()
-  openProfile = new EventEmitter<
-    UserInfo | UserInfoSS | UserInfoF | UserInfoDN
-  >();
+  openProfile = new EventEmitter<number>();
 
   PresenceType = PresenceType;
 
@@ -108,13 +106,10 @@ export class UserListItemComponent implements OnInit {
     });
   }
 
-  onClickOpenProfile(
-    event: MouseEvent,
-    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN
-  ) {
+  onClickOpenProfile(event: MouseEvent, userSeq: number) {
     event.preventDefault();
     event.stopPropagation();
 
-    this.openProfile.emit(userInfo);
+    this.openProfile.emit(userSeq);
   }
 }