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

2019-12-06 17:53:28 +09:00 · 2019-12-06 17:53:28 +09:00 · 0f0d3a8338
commit 0f0d3a8338
parent 1738b0776c 82b7f070a2
22 changed files with 681 additions and 131 deletions
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html
@ -114,32 +114,13 @@
        </mat-radio-group>
      </form>
    </div>
-    <div
-      *ngFor="let message of messageList"
-      (click)="onClickDetail(message)"
-      class="message-item"
-    >
-      <dl>
-        <dt>
-          <mat-icon
-            *ngIf="!!message.resType && message.resType === ContentType.Image"
-            >image</mat-icon
-          >
-          <mat-icon
-            *ngIf="
-              !!message.resType && message.resType === ContentType.AttachFile
-            "
-            >attach_file</mat-icon
-          >
-          <ul>
-            <li>{{ message.userName }}</li>
-            <li>{{ message.title }}</li>
-          </ul>
-        </dt>
-        <dd>
-          {{ message.regDate | dateToStringFormat: 'MM:DD' }}
-        </dd>
-      </dl>
+    <div>
+      <ucap-message-list-item
+        *ngFor="let message of messageList"
+        [message]="message"
+        (click)="onClickDetail(message)"
+        class="message-item"
+      ></ucap-message-list-item>
    </div>
  </div>
 </div>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
@ -59,9 +59,10 @@
        <ucap-profile-user-list-item
          *cdkVirtualFor="let userInfo of selectedDepartmentUserInfoList"
          [userInfo]="userInfo"
-          [checkable]="true"
          [sessionVerinfo]="sessionVerinfo"
          [selectedUserList]="selectedUserList"
+          [checkable]="true"
+          [checkDisabled]="!getCheckableUser(userInfo)"
          [isChecked]="getCheckedUser(userInfo)"
          (checkUser)="onCheckUser($event)"
          (openProfile)="onClickOpenProfile($event)"
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.ts
@ -6,8 +6,6 @@ import {
  EventEmitter,
  Input,
  ViewChild,
-  AfterViewInit,
-  AfterContentChecked,
  AfterViewChecked
 } from '@angular/core';
 import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
@ -65,6 +63,9 @@ export class OrganizationComponent
  /** 선택된 사용자의 리스트 */
  selectedUserList?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
  @Input()
+  /** 선택할 수 없는 사용자 리스트 */
+  ignoreUserList?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
+  @Input()
  isVisible = true;

  @Output()
@ -339,6 +340,17 @@ export class OrganizationComponent
      return true;
    }
  }
+  /** ignoreUserList(선택 무시할 인원) 이 있을 경우 판단하여 checkable 판단. */
+  getCheckableUser(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
+    if (
+      !!this.ignoreUserList &&
+      this.ignoreUserList.filter(user => user.seq === userInfo.seq).length > 0
+    ) {
+      return false;
+    }
+
+    return true;
+  }
  /** 리스트 checkable 할 경우 checkbox 의 isChecked 를 관장하며 리스트의 전체선택 여부를 판단한다. */
  getCheckedUser(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
    if (!!this.selectedUserList && this.selectedUserList.length > 0) {
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
@ -1,14 +1,16 @@
 <div fxLayout="column" class="rightDrawer-albumbox">
  <div>
-    <mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
+    <mat-tab-group
+      mat-stretch-tabs
+      animationDuration="0ms"
+      (selectedIndexChange)="onSelectedIndexChange($event)"
+    >
      <mat-tab label="Image"></mat-tab>
      <mat-tab label="Video"></mat-tab>
    </mat-tab-group>
  </div>
  <div fxFlex="1 1 240px" class="select-filebox bg-accent-brightest">
-    <!--<ng-container *ngIf="!selectedFile">-->
    <ng-container *ngIf="!selectedFile">
-      <!--이미지 빈화면-->
      <div class="empty-msg" *ngIf="currentTabIndex === 0">
        <svg
          xmlns="http://www.w3.org/2000/svg"
@ -20,6 +22,7 @@
          stroke-width="1.5"
          stroke-linecap="butt"
          stroke-linejoin="round"
+          aria-label="image"
        >
          <rect x="3" y="3" width="18" height="18" rx="2" />
          <circle cx="8.5" cy="8.5" r="1.5" />
@ -27,7 +30,7 @@
        </svg>
        <span>Select File.</span>
      </div>
-      <!--비디오 빈화면-->
+
      <div class="empty-msg" *ngIf="currentTabIndex === 1">
        <svg
          xmlns="http://www.w3.org/2000/svg"
@ -39,6 +42,7 @@
          stroke-width="1.5"
          stroke-linecap="butt"
          stroke-linejoin="round"
+          aria-label="video"
        >
          <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
          <line x1="7" y1="2" x2="7" y2="22"></line>
@ -89,6 +93,12 @@
      >
        <dl>
          <dt>
+            <div
+              *ngIf="fileInfo.fileDownloadItem.downloadingProgress$ | async"
+              class="spinner"
+            >
+              <span class="mdi mdi-spin mdi-loading mdi-48px"></span>
+            </div>
            <div
              *ngIf="
                !!fileInfo.eventInfo &&
@ -146,6 +156,7 @@
      mat-flat-button
      [disabled]="selectedFileList.length > 0 ? 'false' : 'true'"
      class="mat-primary"
+      (click)="onClickDownloadAll()"
    >
      Download All
    </button>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
@ -23,56 +23,56 @@
  }
 }

-.select-filebox{
-  display:flex;
+.select-filebox {
+  display: flex;
  flex-flow: column;
-  margin:10px;
-  padding:10px;
-  border:1px solid #cccccc;
+  margin: 10px;
+  padding: 10px;
+  border: 1px solid #cccccc;
  border-radius: 4px;
-  .select-file{
+  .select-file {
    color: #212121;
    border-bottom: 1px dotted #dddddd;
-    text-align:center;
-    padding-bottom:10px;
+    text-align: center;
+    padding-bottom: 10px;
  }
-  ul{
-    padding-top:10px;
-    li{
+  ul {
+    padding-top: 10px;
+    li {
      @include ellipsis(1);
-      &.name{
-        font-weight:600;
+      &.name {
+        font-weight: 600;
      }
    }
  }
-  .empty-msg{
-    display:inline-flex;
+  .empty-msg {
+    display: inline-flex;
    flex-flow: column;
-    margin:auto 0;
+    margin: auto 0;
    align-items: center;
    justify-content: center;
-    color:#999999;
-    span{
-      padding:6px;
+    color: #999999;
+    span {
+      padding: 6px;
    }
  }
 }

-.search-list{
-  display:flex;
-  padding:0 10px;
+.search-list {
+  display: flex;
+  padding: 0 10px;
  height: calc(100% - 450px);
  overflow-y: auto;
  flex-wrap: wrap;

  .img-item {
    cursor: pointer;
-    margin-bottom:10px;
-    margin-right:9px;
+    margin-bottom: 10px;
+    margin-right: 9px;
    position: relative;
    height: 150px;
-    dl{
-      dt{
+    dl {
+      dt {
        display: flex;
        justify-content: center;
        align-items: center;
@ -81,43 +81,59 @@
        background-color: #efefef;
        border: 1px dotted #cccccc;
        box-sizing: border-box;
-        img{
-          width:100%;
-          height:100%;
+        img {
+          width: 100%;
+          height: 100%;
        }
      }
-      dd{
-        .btn-download{
-        margin-left:auto;
+      dd {
+        .btn-download {
+          margin-left: auto;
        }
      }
    }
-    &:nth-child(3n+0){
-      margin-right:0;
+    &:nth-child(3n + 0) {
+      margin-right: 0;
    }
  }
 }

-::ng-deep .album-scrollbar{
-  .ps{
-    .ps-content{
-      display:flex;
+::ng-deep .album-scrollbar {
+  .ps {
+    .ps-content {
+      display: flex;
      flex-flow: wrap;
    }
  }
 }
 .preview-image,
-.preview-video{
+.preview-video {
  max-height: 140px;
 }

 .btn-box {
-  position:absolute;
-  bottom:0;
-  height:50px;
-  margin-bottom:10px;
-  width:100%;
+  position: absolute;
+  bottom: 0;
+  height: 50px;
+  margin-bottom: 10px;
+  width: 100%;
  button {
    margin: 5px;
  }
 }
+
+.spinner {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  padding: 15px 0;
+  background: rgb(255, 255, 255, 0.6);
+  display: table;
+  text-align: center;
+
+  span {
+    display: table-cell;
+    vertical-align: middle;
+    color: #666666;
+  }
+}
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts
@ -1,5 +1,4 @@
-import { Component, OnInit, ViewChild, OnDestroy, Inject } from '@angular/core';
-import { MatPaginator, MatTableDataSource } from '@angular/material';
+import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
 import {
  FileInfo,
  FileDownloadInfo,
@ -9,14 +8,9 @@ import { Subscription, combineLatest } from 'rxjs';
 import { Store, select } from '@ngrx/store';

 import * as AppStore from '@app/store';
-import * as ChatStore from '@app/store/messenger/chat';
-import { tap, map } from 'rxjs/operators';
-import {
-  Info,
-  EventJson,
-  FileEventJson
-} from '@ucap-webmessenger/protocol-event';
-import { FileUtil } from '@ucap-webmessenger/core';
+import { tap, map, take, finalize } from 'rxjs/operators';
+import { Info, FileEventJson } from '@ucap-webmessenger/protocol-event';
+import { FileUtil, MimeUtil, DeviceType } from '@ucap-webmessenger/core';
 import { CommonApiService } from '@ucap-webmessenger/api-common';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
@ -26,11 +20,14 @@ import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { KEY_VER_INFO } from '@app/types/ver-info.type';
 import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
 import { NGXLogger } from 'ngx-logger';
+import { SnackBarService } from '@ucap-webmessenger/ui';
+import { FileDownloadItem } from '@ucap-webmessenger/api';

 export interface FileInfoTotal {
  info: FileInfo;
  checkInfo: FileDownloadInfo[];
  eventInfo?: Info<FileEventJson>;
+  fileDownloadItem: FileDownloadItem;
 }

@Component({
@ -58,8 +55,9 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
    private store: Store<any>,
    private sessionStorageService: SessionStorageService,
    private commonApiService: CommonApiService,
+    private snackBarService: SnackBarService,
    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
-    private loggger: NGXLogger
+    private logger: NGXLogger
  ) {
    this.loginRes = this.sessionStorageService.get<LoginResponse>(
      KEY_LOGIN_RES_INFO
@ -113,7 +111,8 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
                checkInfo => checkInfo.seq === fileInfo.seq
              ),
              eventInfo:
-                events.length > 0 ? (events[0] as Info<FileEventJson>) : null
+                events.length > 0 ? (events[0] as Info<FileEventJson>) : null,
+              fileDownloadItem: new FileDownloadItem()
            });
          });

@ -197,7 +196,61 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
  }

  onClickDownload(fileInfo: FileInfoTotal) {
-    console.log(fileInfo);
+    this.commonApiService
+      .fileTalkDownload({
+        userSeq: this.loginRes.userSeq,
+        deviceType: DeviceType.PC,
+        token: this.loginRes.tokenString,
+        attachmentsSeq: fileInfo.info.seq,
+        fileDownloadItem: fileInfo.fileDownloadItem
+      })
+      .pipe(
+        take(1),
+        map(async rawBlob => {
+          const mimeType = MimeUtil.getMimeFromExtension(
+            FileUtil.getExtension(fileInfo.info.name)
+          );
+          const blob = rawBlob.slice(0, rawBlob.size, mimeType);
+
+          FileUtil.fromBlobToBuffer(blob)
+            .then(buffer => {
+              this.nativeService
+                .saveFile(buffer, fileInfo.info.name, mimeType)
+                .then(result => {
+                  if (!!result) {
+                    this.snackBarService.open(
+                      `파일이 경로[${result}]에 저장되었습니다.`,
+                      '',
+                      {
+                        duration: 3000,
+                        verticalPosition: 'bottom'
+                      }
+                    );
+                  } else {
+                    this.snackBarService.open('파일 저장에 실패하였습니다.');
+                  }
+                })
+                .catch(reason => {
+                  this.snackBarService.open('파일 저장에 실패하였습니다.');
+                });
+            })
+            .catch(reason => {
+              this.logger.error('download', reason);
+            });
+        }),
+        finalize(() => {
+          setTimeout(() => {
+            fileInfo.fileDownloadItem.downloadingProgress$ = undefined;
+          }, 1000);
+        })
+      )
+      .subscribe();
+  }
+
+  onClickDownloadAll(): void {
+    this.selectedFileList.forEach(fileInfo => {
+      this.onClickDownload(fileInfo);
+    });
  }

  onClickOpenDownloadFolder(): void {
@ -210,7 +263,7 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
        }
      })
      .catch(reason => {
-        this.loggger.error(reason);
+        this.logger.error(reason);
      });
  }
 }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html
@ -1,6 +1,10 @@
 <div fxLayout="column" class="rightDrawer-filebox">
  <div class="rightDrawer-tab">
-    <mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
+    <mat-tab-group
+      mat-stretch-tabs
+      animationDuration="0ms"
+      (selectedIndexChange)="onSelectedIndexChange($event)"
+    >
      <mat-tab label="Receive"></mat-tab>
      <mat-tab label="Send"></mat-tab>
    </mat-tab-group>
@ -47,11 +51,31 @@
          <li>
            <span class="text-accent-color">date :</span>
            {{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
+            <span *ngIf="loginRes.fileRetentionPeriod > 0">
+              ~
+              {{
+                selectedFile.info.sendDate
+                  | dateDistanceToDay: loginRes.fileRetentionPeriod
+                  | dateToStringFormat: 'YYYY.MM.DD'
+              }}
+            </span>
          </li>
        </ul>
      </div>
      <div class="select-file-option">
-        <span matTooltip="다운로드" class="text-accent-darkest">
+        <span
+          matTooltip="다운로드"
+          class="text-accent-darkest"
+          (click)="onClickDownload(selectedFile)"
+        >
+          <mat-progress-spinner
+            *ngIf="selectedFile.fileDownloadItem.downloadingProgress$ | async"
+            mode="determinate"
+            diameter="30"
+            strokeWidth="2"
+            [value]="selectedFile.fileDownloadItem.downloadingProgress$ | async"
+            style="position: absolute;"
+          ></mat-progress-spinner>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
@ -158,8 +182,24 @@
            </div>
            <div class="download-period text-accent-color">
              <!--{{ element.info.size | ucapBytes }}-->
-              {{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }} ~
-              2020.01.23
+              {{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
+              <span *ngIf="loginRes.fileRetentionPeriod > 0">
+                ~
+                {{
+                  element.info.sendDate
+                    | dateDistanceToDay: loginRes.fileRetentionPeriod
+                    | dateToStringFormat: 'YYYY.MM.DD'
+                }}
+              </span>
+            </div>
+            <div
+              *ngIf="element.fileDownloadItem.downloadingProgress$ | async"
+              class="progress"
+            >
+              <mat-progress-bar
+                mode="determinate"
+                [value]="element.fileDownloadItem.downloadingProgress$ | async"
+              ></mat-progress-bar>
            </div>
          </td>
        </ng-container>
@ -199,6 +239,7 @@
        mat-flat-button
        [disabled]="selectedFileList.length > 0 ? 'false' : 'true'"
        class="mat-primary"
+        (click)="onClickDownloadAll()"
      >
        Download All
      </button>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
@ -107,6 +107,14 @@
        width: 100%;
        @include ellipsis(1);
      }
+
+      .progress {
+        position: relative;
+
+        .mat-progress-bar {
+          position: absolute;
+        }
+      }
    }
  }
 }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.ts
@ -9,18 +9,21 @@ import { Subscription, combineLatest } from 'rxjs';
 import { Store, select } from '@ngrx/store';

 import * as AppStore from '@app/store';
-import * as ChatStore from '@app/store/messenger/chat';
-import { tap, map } from 'rxjs/operators';
-import { FileUtil } from '@ucap-webmessenger/core';
+import { tap, map, take, finalize } from 'rxjs/operators';
+import { FileUtil, MimeUtil, DeviceType } from '@ucap-webmessenger/core';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
 import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
 import { NGXLogger } from 'ngx-logger';
+import { FileDownloadItem } from '@ucap-webmessenger/api';
+import { SnackBarService } from '@ucap-webmessenger/ui';
+import { CommonApiService } from '@ucap-webmessenger/api-common';

 export interface FileInfoTotal {
  info: FileInfo;
  checkInfo: FileDownloadInfo[];
+  fileDownloadItem: FileDownloadItem;
 }

@Component({
@ -49,8 +52,10 @@ export class FileBoxComponent implements OnInit, OnDestroy {
  constructor(
    private store: Store<any>,
    private sessionStorageService: SessionStorageService,
+    private commonApiService: CommonApiService,
+    private snackBarService: SnackBarService,
    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
-    private loggger: NGXLogger
+    private logger: NGXLogger
  ) {
    this.loginRes = this.sessionStorageService.get<LoginResponse>(
      KEY_LOGIN_RES_INFO
@ -89,7 +94,8 @@ export class FileBoxComponent implements OnInit, OnDestroy {
              info: fileInfo,
              checkInfo: fileInfoCheckList.filter(
                checkInfo => checkInfo.seq === fileInfo.seq
-              )
+              ),
+              fileDownloadItem: new FileDownloadItem()
            });
          });

@ -217,6 +223,64 @@ export class FileBoxComponent implements OnInit, OnDestroy {
    this.selectedFile = row;
  }

+  onClickDownload(fileInfo: FileInfoTotal) {
+    this.commonApiService
+      .fileTalkDownload({
+        userSeq: this.loginRes.userSeq,
+        deviceType: DeviceType.PC,
+        token: this.loginRes.tokenString,
+        attachmentsSeq: fileInfo.info.seq,
+        fileDownloadItem: fileInfo.fileDownloadItem
+      })
+      .pipe(
+        take(1),
+        map(async rawBlob => {
+          const mimeType = MimeUtil.getMimeFromExtension(
+            FileUtil.getExtension(fileInfo.info.name)
+          );
+          const blob = rawBlob.slice(0, rawBlob.size, mimeType);
+
+          FileUtil.fromBlobToBuffer(blob)
+            .then(buffer => {
+              this.nativeService
+                .saveFile(buffer, fileInfo.info.name, mimeType)
+                .then(result => {
+                  if (!!result) {
+                    this.snackBarService.open(
+                      `파일이 경로[${result}]에 저장되었습니다.`,
+                      '',
+                      {
+                        duration: 3000,
+                        verticalPosition: 'bottom'
+                      }
+                    );
+                  } else {
+                    this.snackBarService.open('파일 저장에 실패하였습니다.');
+                  }
+                })
+                .catch(reason => {
+                  this.snackBarService.open('파일 저장에 실패하였습니다.');
+                });
+            })
+            .catch(reason => {
+              this.logger.error('download', reason);
+            });
+        }),
+        finalize(() => {
+          setTimeout(() => {
+            fileInfo.fileDownloadItem.downloadingProgress$ = undefined;
+          }, 1000);
+        })
+      )
+      .subscribe();
+  }
+
+  onClickDownloadAll(): void {
+    this.selectedFileList.forEach(fileInfo => {
+      this.onClickDownload(fileInfo);
+    });
+  }
+
  onClickOpenDownloadFolder(): void {
    this.nativeService
      .openDefaultDownloadFolder()
@ -227,7 +291,7 @@ export class FileBoxComponent implements OnInit, OnDestroy {
        }
      })
      .catch(reason => {
-        this.loggger.error(reason);
+        this.logger.error(reason);
      });
  }
 }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
@ -73,6 +73,7 @@
                  #groupExpansionPanel
                  [groupBuddyList]="groupBuddyList$ | async"
                  [selectedUserList]="selectedUserList"
+                  [ignoreUserList]="data.curRoomUser"
                  [checkable]="true"
                  (checkGroup)="onCheckGroup($event)"
                  class="group-expansion"
@ -84,6 +85,7 @@
                    [selectedUserList]="selectedUserList"
                    [isChecked]="getCheckedUser(userInfo)"
                    [checkable]="true"
+                    [checkDisabled]="!getCheckableUser(userInfo)"
                    (checkUser)="onCheckUser($event)"
                    (click)="onToggleUser(userInfo)"
                    class="list-item-frame"
@ -117,6 +119,7 @@
                  [selectedUserList]="selectedUserList"
                  [isChecked]="getCheckedUser(userInfo)"
                  [checkable]="true"
+                  [checkDisabled]="!getCheckableUser(userInfo)"
                  (checkUser)="onCheckUser($event)"
                  (click)="onToggleUser(userInfo)"
                >
@ -134,6 +137,7 @@
              <app-layout-chat-left-sidenav-organization
                [showTitle]="false"
                [selectedUserList]="selectedUserList"
+                [ignoreUserList]="data.curRoomUser"
                [isUserSelect]="true"
                [isVisible]="currentTabIndex === 1"
                (checkAllUser)="onCheckAllUser($event)"
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.ts
@ -63,7 +63,7 @@ export interface CreateChatDialogData {
  group?: GroupDetailData;
  /** CASE :: EventForward */
  ignoreRoom?: RoomInfo[];
-  /** CASE :: EditCharMember */
+  /** CASE :: EditChatMember */
  curRoomUser?: (
    | UserInfo
    | UserInfoSS
@ -367,20 +367,47 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
    groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] };
  }) {
    if (params.isChecked) {
-      params.groupBuddyList.buddyList.forEach(item => {
-        if (
-          this.selectedUserList.filter(user => user.seq === item.seq).length ===
-          0
-        ) {
-          this.selectedUserList = [...this.selectedUserList, item];
-        }
-      });
+      if (this.data.type === UserSelectDialogType.EditChatMember) {
+        params.groupBuddyList.buddyList.forEach(item => {
+          if (
+            this.selectedUserList.filter(user => user.seq === item.seq)
+              .length === 0 &&
+            this.data.curRoomUser.filter(curUser => curUser.seq === item.seq)
+              .length === 0
+          ) {
+            this.selectedUserList = [...this.selectedUserList, item];
+          }
+        });
+      } else {
+        params.groupBuddyList.buddyList.forEach(item => {
+          if (
+            this.selectedUserList.filter(user => user.seq === item.seq)
+              .length === 0
+          ) {
+            this.selectedUserList = [...this.selectedUserList, item];
+          }
+        });
+      }
    } else {
-      this.selectedUserList = this.selectedUserList.filter(
-        item =>
-          params.groupBuddyList.buddyList.filter(del => del.seq === item.seq)
-            .length === 0
-      );
+      if (this.data.type === UserSelectDialogType.EditChatMember) {
+        this.selectedUserList = this.selectedUserList.filter(
+          item =>
+            params.groupBuddyList.buddyList
+              .filter(
+                del =>
+                  this.data.curRoomUser.filter(
+                    curUser => curUser.seq === del.seq
+                  ).length === 0
+              )
+              .filter(del => del.seq === item.seq).length === 0
+        );
+      } else {
+        this.selectedUserList = this.selectedUserList.filter(
+          item =>
+            params.groupBuddyList.buddyList.filter(del => del.seq === item.seq)
+              .length === 0
+        );
+      }
    }
    this.changeDetectorRef.detectChanges();
  }
@ -390,20 +417,51 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
    isChecked: boolean;
    userInfos: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[];
  }) {
-    params.userInfos.forEach(userInfo => {
-      if (params.isChecked) {
-        if (
-          this.selectedUserList.filter(user => user.seq === userInfo.seq)
-            .length === 0
-        ) {
-          this.selectedUserList = [...this.selectedUserList, userInfo];
-        }
+    // params.userInfos.forEach(userInfo => {
+    if (params.isChecked) {
+      if (this.data.type === UserSelectDialogType.EditChatMember) {
+        params.userInfos.forEach(item => {
+          if (
+            this.selectedUserList.filter(user => user.seq === item.seq)
+              .length === 0 &&
+            this.data.curRoomUser.filter(curUser => curUser.seq === item.seq)
+              .length === 0
+          ) {
+            this.selectedUserList = [...this.selectedUserList, item];
+          }
+        });
+      } else {
+        params.userInfos.forEach(item => {
+          if (
+            this.selectedUserList.filter(user => user.seq === item.seq)
+              .length === 0
+          ) {
+            this.selectedUserList = [...this.selectedUserList, item];
+          }
+        });
+      }
+    } else {
+      if (this.data.type === UserSelectDialogType.EditChatMember) {
+        this.selectedUserList = this.selectedUserList.filter(
+          item =>
+            params.userInfos
+              .filter(
+                del =>
+                  this.data.curRoomUser.filter(
+                    curUser => curUser.seq === del.seq
+                  ).length === 0
+              )
+              .filter(del => del.seq === item.seq).length === 0
+        );
      } else {
        this.selectedUserList = this.selectedUserList.filter(
-          user => user.seq !== userInfo.seq
+          item =>
+            params.userInfos.filter(userInfo => userInfo.seq === item.seq)
+              .length === 0
        );
      }
-    });
+    }
+    // });
  }

  /** 동료그룹>부서원, 조직도>부서원 :: 리스트의 checkbox 의 이벤트를 받아 선택된 유저리스트를 수집. */
@ -412,6 +470,15 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
  }) {
    if (params.isChecked) {
+      if (this.data.type === UserSelectDialogType.EditChatMember) {
+        if (
+          this.data.curRoomUser.filter(user => user.seq === params.userInfo.seq)
+            .length > 0
+        ) {
+          return;
+        }
+      }
+
      if (
        this.selectedUserList.filter(user => user.seq === params.userInfo.seq)
          .length === 0 &&
@ -420,6 +487,15 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
        this.selectedUserList = [...this.selectedUserList, params.userInfo];
      }
    } else {
+      if (this.data.type === UserSelectDialogType.EditChatMember) {
+        if (
+          this.data.curRoomUser.filter(user => user.seq === params.userInfo.seq)
+            .length > 0
+        ) {
+          return;
+        }
+      }
+
      this.selectedUserList = this.selectedUserList.filter(
        item => item.seq !== params.userInfo.seq
      );
@ -427,6 +503,15 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
    this.changeDetectorRef.detectChanges();
  }
  onToggleUser(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
+    if (this.data.type === UserSelectDialogType.EditChatMember) {
+      if (
+        this.data.curRoomUser.filter(user => user.seq === userInfo.seq).length >
+        0
+      ) {
+        return;
+      }
+    }
+
    if (
      this.selectedUserList.filter(user => user.seq === userInfo.seq).length ===
      0
@ -459,6 +544,20 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
    }
  }

+  /** 그룹>부서원의 체크 가능여부 판단. */
+  getCheckableUser(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
+    if (this.data.type === UserSelectDialogType.EditChatMember) {
+      if (
+        this.data.curRoomUser.filter(user => user.seq === userInfo.seq).length >
+        0
+      ) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
  /** 그룹>부서원 리스트의 ischecked 를 판단. */
  getCheckedUser(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
    if (!!this.selectedUserList && this.selectedUserList.length > 0) {
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
@ -16,7 +16,8 @@ import {
  MatRippleModule,
  MatSortModule,
  MatTooltipModule,
-  MatSidenavModule
+  MatSidenavModule,
+  MatProgressSpinnerModule
 } from '@angular/material';

 import { MatSelectModule } from '@angular/material/select';
@ -75,6 +76,7 @@ import { DIALOGS } from './dialogs';
    MatMenuModule,
    MatListModule,
    MatProgressBarModule,
+    MatProgressSpinnerModule,
    MatTabsModule,
    MatToolbarModule,
    MatChipsModule,
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
@ -5,6 +5,33 @@
  <div class="app-layout-native-title-bar-title">UCAP M Messenger</div>
  <div class="app-layout-native-title-bar-spacer"></div>
  <div *ngIf="!!loginRes" class="app-layout-native-title-bar-link">
+    <button
+      mat-icon-button
+      class="button app-layout-native-title-bar-logout"
+      matTooltip="웹링크"
+      (click)="onToggleWebLinkSelector()"
+    >
+      <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>
+
    <button
      mat-icon-button
      class="button app-layout-native-title-bar-setting"
@ -176,3 +203,18 @@
    </button>
  </div>
 </mat-toolbar>
+
+<div [style.display]="showWeblink ? 'inherit' : 'none'" class="weblink">
+  <div class="container">
+    <div class="img-item">
+      <ul>
+        <li *ngFor="let link of weblink">
+          <div class="icon">
+            <span class="mdi mdi-star-circle-outline mdi-48px"></span>
+          </div>
+          <div class="description ellipsis">{{ link.title }}</div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
@ -132,3 +132,58 @@
    }
  }
 }
+
+.weblink {
+  position: absolute;
+  width: 350px;
+  height: 40%;
+  top: 60px;
+  right: 15px;
+  background: #fff;
+  border-radius: 5px;
+  border: 1px solid #666;
+  z-index: 2;
+  padding: 10px;
+  display: none;
+
+  .container {
+    display: flex;
+    padding: 0 10px;
+    height: 100%;
+    overflow-y: auto;
+    flex-wrap: wrap;
+
+    .img-item {
+      cursor: pointer;
+      margin-bottom: 10px;
+      margin-right: 9px;
+      position: relative;
+      height: 150px;
+
+      ul {
+        li {
+          list-style: none;
+          float: left;
+          margin: 0 10px 20px 10px;
+
+          .icon {
+            height: 50px;
+            width: 50px;
+            line-height: 50px;
+          }
+          .description {
+            width: 50px;
+            text-align: center;
+          }
+          .ellipsis {
+            display: block;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            word-wrap: normal;
+            overflow: hidden;
+          }
+        }
+      }
+    }
+  }
+}
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
@ -1,4 +1,4 @@
-import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
+import { Component, OnInit, Inject, OnDestroy, ViewChild } from '@angular/core';
 import {
  UCAP_NATIVE_SERVICE,
  NativeService,
@ -28,6 +28,121 @@ export class TopBarComponent implements OnInit, OnDestroy {
  loginRes: LoginResponse;
  loginResSubscription: Subscription;

+  showWeblink = false;
+  weblink: {
+    title: string;
+    url: string;
+    order: number;
+    activeYn: boolean;
+  }[] = [
+    {
+      order: 0,
+      title: '웹하드',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=WHD_78&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: 'DSP',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=GWS_01&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: 'SMS',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=SMS_21&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: '화상회의',
+      activeYn: true,
+      url:
+        'http://dsview.daesang.com/plugin/sso_login.asp?userid=(%USER_FIELD4%)'
+    },
+    {
+      order: 0,
+      title: 'EP',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=EPS_07&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: 'S & OP회의',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=SOP_05&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: 'S & OM회의',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=SOM_09&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: '코끼리',
+      activeYn: true,
+      url:
+        'http://dsp.daesang.com/names.nsf?login&username=(%USER_ID%)&password=(%USER_PASS%)&RedirectTo=http%3A%2F%2Fdsp%2Edaesang%2Ecom%3A80%2FDS%5F10%2Femate%5Fapp%2Felephant%2Fmaster%2Ensf%2Fmain%2Ehtml%3Freadform%26kind%3D3'
+    },
+    {
+      order: 0,
+      title: 'IT서비스데스크',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=HPD_13&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: '개인속보',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=DSB_43&eMatePTK=(%USER_ID%)'
+    },
+
+    {
+      order: 0,
+      title: '메일 count url',
+      activeYn: true,
+      url:
+        'http://dsp.daesang.com/names.nsf?login&username=(%USER_ID%)&password=(%USER_PASS%)&RedirectTo=http://dsp.daesang.com/common/sysorg.nsf/unreadmailcount2?openagent%26empno=(%USER_FIELD4%)'
+    },
+    {
+      order: 0,
+      title: '메일 link url',
+      activeYn: true,
+      url:
+        'http://dsp.daesang.com/names.nsf?login&username=(%USER_ID%)&password=(%USER_PASS%)&RedirectTo=%2Fportal%2Ensf%2Fmailredirect%3Fopenpage%26mode%3Dm'
+    },
+    {
+      order: 0,
+      title: '결제 count url',
+      activeYn: true,
+      url:
+        'http://dsp.daesang.com/names.nsf?login&username=(%USER_ID%)&password=(%USER_PASS%)&RedirectTo=http://dsp.daesang.com/common/sysorg.nsf/unreadmailcount2?openagent%26empno=(%USER_FIELD4%)'
+    },
+    {
+      order: 0,
+      title: '결제 link url',
+      activeYn: true,
+      url:
+        'http://dsp.daesang.com/names.nsf?login&username=(%USER_ID%)&password=(%USER_PASS%)&RedirectTo=%2Fportal%2Ensf%2Fmailredirect%3Fopenpage%26mode%3Dm'
+    },
+
+    {
+      order: 0,
+      title: '3개월 비밀번호 변경창 url',
+      activeYn: true,
+      url: 'sso.daesang.com / modify.do'
+    }
+  ];
+
  constructor(
    private store: Store<any>,
    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
@ -75,4 +190,8 @@ export class TopBarComponent implements OnInit, OnDestroy {
      })
    );
  }
+
+  onToggleWebLinkSelector(): void {
+    this.showWeblink = !this.showWeblink;
+  }
 }
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/query/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/query/effects.ts
@ -82,6 +82,10 @@ export class Effects {
                  userInfos.push(...(res as DeptUserData).userInfos);
                  break;
                case SSVC_TYPE_QUERY_DEPT_USER_RES:
+                  userInfos.sort((a, b) => {
+                    return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
+                  });
+
                  this.store.dispatch(
                    deptUserSuccess({
                      userInfos,
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
@ -76,6 +76,7 @@
            *ngIf="checkable"
            #checkbox
            [checked]="getCheckedGroup(node.groupDetail)"
+            [disabled]="!getCheckableGroup(node.groupDetail)"
            (change)="onChangeCheck(checkbox.checked, node.groupDetail)"
            (click)="$event.stopPropagation()"
            class="group-check"
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts
@ -135,10 +135,12 @@ export class ExpansionPanelComponent

  @Input()
  checkable = false;
-
  @Input()
  /** 선택된 사용자의 리스트 */
  selectedUserList?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
+  @Input()
+  /** 선택할 수 없는 사용자 리스트 */
+  ignoreUserList?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];

  @Output()
  more = new EventEmitter<{
@ -270,6 +272,24 @@ export class ExpansionPanelComponent
    }
  }

+  getCheckableGroup(group: GroupDetailData) {
+    if (!!this.ignoreUserList && this.ignoreUserList.length > 0) {
+      let allExist = true;
+      group.userSeqs.some(seq => {
+        if (this.ignoreUserList.filter(item => item.seq === seq).length === 0) {
+          allExist = false;
+          return true;
+        }
+      });
+
+      if (allExist) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
  /** 그룹리스트가 checkable 할 경우 checkbox 의 isChecked 를 관장하며, 하위 부서원들의 전체선택여부를 판단한다. */
  getCheckedGroup(group: GroupDetailData) {
    if (!group || group === undefined) {
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
@ -36,6 +36,7 @@
    *ngIf="checkable"
    #checkbox
    [checked]="isChecked"
+    [disabled]="checkDisabled"
    (change)="onChangeCheck(checkbox.checked, userInfo)"
    (click)="$event.stopPropagation()"
  >
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts
@ -35,6 +35,8 @@ export class UserListItemComponent implements OnInit {
  @Input()
  checkable = false;
  @Input()
+  checkDisabled = false;
+  @Input()
  isChecked = false;
  @Input()
  compactable = false;
--- a/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts
@ -3,7 +3,7 @@ import { StringUtil } from '../utils/string.util';
 import moment from 'moment';

@Pipe({
-  name: 'dateToStringChatList',
+  name: 'dateToStringChatList'
 })
 export class DateToStringForChatRoomListPipe implements PipeTransform {
  transform(value: any): string {
@ -39,7 +39,7 @@ export class DateToStringForChatRoomListPipe implements PipeTransform {
 }

@Pipe({
-  name: 'dateToStringFormat',
+  name: 'dateToStringFormat'
 })
 export class DateToStringFormatPipe implements PipeTransform {
  transform(value: any, format?: string): string {
@ -52,3 +52,15 @@ export class DateToStringFormatPipe implements PipeTransform {
    }
  }
 }
+
+@Pipe({
+  name: 'dateDistanceToDay'
+})
+export class DateDistanceToDatePipe implements PipeTransform {
+  transform(value: any, distanceDay?: number): Date {
+    distanceDay = distanceDay || 0;
+    const date: Date = moment(value.toString()).toDate();
+    date.setDate(date.getDate() + distanceDay);
+    return date;
+  }
+}
--- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
@ -56,7 +56,8 @@ import { BytesPipe } from './pipes/bytes.pipe';
 import { LinefeedToHtmlPipe, HtmlToLinefeedPipe } from './pipes/linefeed.pipe';
 import {
  DateToStringForChatRoomListPipe,
-  DateToStringFormatPipe
+  DateToStringFormatPipe,
+  DateDistanceToDatePipe
 } from './pipes/dates.pipe';
 import { SecondsToMinutesPipe } from './pipes/seconds-to-minutes.pipe';
 import { LinkyPipe } from './pipes/linky.pipe';
@ -93,6 +94,7 @@ const PIPES = [
  HtmlToLinefeedPipe,
  DateToStringForChatRoomListPipe,
  DateToStringFormatPipe,
+  DateDistanceToDatePipe,
  SecondsToMinutesPipe,
  LinkyPipe
 ];