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

projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts

@@ -3,7 +3,7 @@ import {
   HttpClient,
   HttpEventType,
   HttpResponse,
-  HttpRequest,
+  HttpRequest
 } from '@angular/common/http';
 
 import { Observable, Subject } from 'rxjs';
@@ -13,60 +13,60 @@ import {
   FileProfileSaveRequest,
   FileProfileSaveResponse,
   encodeFileProfileSave,
-  decodeFileProfileSave,
+  decodeFileProfileSave
 } from '../apis/file-profile-save';
 import {
   FileTalkDownloadRequest,
   encodeFileTalkDownload,
-  encodeFormDataFileTalkDownload,
+  encodeFormDataFileTalkDownload
 } from '../apis/file-talk-download';
 import {
   FileTalkSaveRequest,
   FileTalkSaveResponse,
   encodeFileTalkSave,
-  decodeFileTalkSave,
+  decodeFileTalkSave
 } from '../apis/file-talk-save';
 import {
   FileTalkShareRequest,
   FileTalkShareResponse,
   encodeFileTalkShare,
-  decodeFileTalkShare,
+  decodeFileTalkShare
 } from '../apis/file-talk-share';
 import {
   MassTalkDownloadRequest,
   MassTalkDownloadResponse,
   encodeMassTalkDownload,
-  decodeMassTalkDownload,
+  decodeMassTalkDownload
 } from '../apis/mass-talk-download';
 import {
   MassTalkSaveRequest,
   MassTalkSaveResponse,
   encodeMassTalkSave,
-  decodeMassTalkSave,
+  decodeMassTalkSave
 } from '../apis/mass-talk-save';
 import {
   TransMassTalkDownloadRequest,
   TransMassTalkDownloadResponse,
   encodeTransMassTalkDownload,
-  decodeTransMassTalkDownload,
+  decodeTransMassTalkDownload
 } from '../apis/trans-mass-talk-download';
 import {
   TransMassTalkSaveRequest,
   TransMassTalkSaveResponse,
   encodeTransMassTalkSave,
-  decodeTransMassTalkSave,
+  decodeTransMassTalkSave
 } from '../apis/trans-mass-talk-save';
 import {
   TranslationReqRequest,
   TranslationReqResponse,
   encodeTranslationReq,
-  decodeTranslationReq,
+  decodeTranslationReq
 } from '../apis/translation-req';
 import {
   TranslationSaveRequest,
   TranslationSaveResponse,
   encodeTranslationSave,
-  decodeTranslationSave,
+  decodeTranslationSave
 } from '../apis/translation-save';
 
 import { _MODULE_CONFIG } from '../config/token';
@@ -75,7 +75,7 @@ import { Urls } from '../config/urls';
 import { UrlConfig } from '@ucap-webmessenger/core';
 
 @Injectable({
-  providedIn: 'root',
+  providedIn: 'root'
 })
 export class CommonApiService {
   readonly urls: Urls;
@@ -99,7 +99,7 @@ export class CommonApiService {
         !!fileProfileSaveUrl ? fileProfileSaveUrl : this.urls.fileProfileSave,
         {},
         {
-          params: encodeFileProfileSave(req),
+          params: encodeFileProfileSave(req)
         }
       )
       .pipe(map(res => decodeFileProfileSave(res)));
@@ -114,7 +114,7 @@ export class CommonApiService {
       !!fileTalkDownloadUrl ? fileTalkDownloadUrl : this.urls.fileTalkDownload,
       {},
       {
-        params: encodeFileTalkDownload(req),
+        params: encodeFileTalkDownload(req)
       }
     );
 
@@ -186,7 +186,11 @@ export class CommonApiService {
     );
   }
 
-  public acceptableExtensionForFileTalk(extensions: string[]): boolean {
+  public acceptableExtensionForFileTalk(
+    extensions: string[]
+  ): { accept: boolean; reject: string[] } {
+    let accept = true;
+    const reject: string[] = [];
     for (const extension of extensions) {
       if (
         -1 ===
@@ -194,10 +198,14 @@ export class CommonApiService {
           extension.toLowerCase()
         )
       ) {
-        return false;
+        reject.push(extension);
+        accept = false;
       }
     }
-    return true;
+    return {
+      accept,
+      reject
+    };
   }
 
   public fileTalkShare(
@@ -208,7 +216,7 @@ export class CommonApiService {
         this.urls.fileTalkShare,
         {},
         {
-          params: encodeFileTalkShare(req),
+          params: encodeFileTalkShare(req)
         }
       )
       .pipe(map(res => decodeFileTalkShare(res)));
@@ -223,7 +231,7 @@ export class CommonApiService {
         {},
         {
           params: encodeMassTalkDownload(req),
-          responseType: 'text' as 'json',
+          responseType: 'text' as 'json'
         }
       )
       .pipe(map(res => decodeMassTalkDownload(res)));
@@ -238,7 +246,7 @@ export class CommonApiService {
         {},
         {
           params: encodeMassTalkSave(req),
-          responseType: 'text' as 'json',
+          responseType: 'text' as 'json'
         }
       )
       .pipe(map(res => decodeMassTalkSave(res)));
@@ -252,7 +260,7 @@ export class CommonApiService {
         this.urls.transMassTalkDownload,
         {},
         {
-          params: encodeTransMassTalkDownload(req),
+          params: encodeTransMassTalkDownload(req)
         }
       )
       .pipe(map(res => decodeTransMassTalkDownload(res)));
@@ -266,7 +274,7 @@ export class CommonApiService {
         this.urls.transMassTalkSave,
         {},
         {
-          params: encodeTransMassTalkSave(req),
+          params: encodeTransMassTalkSave(req)
         }
       )
       .pipe(map(res => decodeTransMassTalkSave(res)));
@@ -280,7 +288,7 @@ export class CommonApiService {
         this.urls.translationReq,
         {},
         {
-          params: encodeTranslationReq(req),
+          params: encodeTranslationReq(req)
         }
       )
       .pipe(map(res => decodeTranslationReq(res)));
@@ -294,7 +302,7 @@ export class CommonApiService {
         this.urls.translationSave,
         {},
         {
-          params: encodeTranslationSave(req),
+          params: encodeTranslationSave(req)
         }
       )
       .pipe(map(res => decodeTranslationSave(res)));

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

@@ -5,21 +5,21 @@
 
 ::ng-deep .mat-tab-body-wrapper,
 ::ng-deep .mat-tab-body {
-  height: 0%;
+  height: 100%;
-  width: 0%;
+  width: 100%;
 }
 ::ng-deep .mat-tab-header {
   border-bottom: none !important;
 }
 
 .left-side-tabs-body {
+  position: relative;
+  height: 100%;
+  width: calc(100% - 70px);
+  div[id^='tabs'] {
     height: 100%;
     width: 100%;
-  overflow: hidden;
+    position: relative;
-
-  .left-side-tabs-contents {
-    height: 100%;
-    width: 100%;
   }
 }
 
@@ -47,6 +47,7 @@
         height: 280px;
         padding-top: 10px;
         .mat-tab-label {
+          width: 100%;
           height: 80px;
           padding: 0 16px;
         }

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

@@ -57,7 +57,7 @@
       [roomInfo]="room"
       [roomUserInfo]="getRoomUserList(room)"
       [sessionVerinfo]="sessionVerinfo"
-      (click)="onSelectedRoom(room)"
+      (click)="onClickContextMenu('SELECT_ROOM', room)"
       (contextmenu)="onContextMenuChat($event, room)"
     >
     </ucap-room-list-item>
@@ -86,7 +86,7 @@
       [roomInfo]="room"
       [roomUserInfo]="getRoomUserList(room)"
       [sessionVerinfo]="sessionVerinfo"
-      (click)="onSelectedRoom(room)"
+      (click)="onClickContextMenu('SELECT_ROOM', room)"
       (contextmenu)="onContextMenuChat($event, room)"
     >
     </ucap-room-list-item>
@@ -121,13 +121,16 @@
   (ucapClickOutside)="chatContextMenuTrigger.closeMenu()"
 >
   <ng-template matMenuContent let-roomInfo="roomInfo">
-    <button mat-menu-item (click)="onSelectedRoom(roomInfo)">
+    <button mat-menu-item (click)="onClickContextMenu('SELECT_ROOM', roomInfo)">
       대화방 열기
     </button>
-    <button mat-menu-item (click)="onClickToggleAlarm(roomInfo)">
+    <button
+      mat-menu-item
+      (click)="onClickContextMenu('TOGGLE_ALARM', roomInfo)"
+    >
       대화방 알람 {{ roomInfo.receiveAlarm ? '끄기' : '켜기' }}
     </button>
-    <button mat-menu-item (click)="onClickExit(roomInfo)">
+    <button mat-menu-item (click)="onClickContextMenu('EXIT_ROOM', roomInfo)">
       대화방 나가기
     </button>
   </ng-template>

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

@@ -1,6 +1,12 @@
 import { exit } from './../../../../store/messenger/room/actions';
 import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
-import { ucapAnimations } from '@ucap-webmessenger/ui';
+import {
+  ucapAnimations,
+  DialogService,
+  ConfirmDialogComponent,
+  ConfirmDialogResult,
+  ConfirmDialogData
+} from '@ucap-webmessenger/ui';
 import { NGXLogger } from 'ngx-logger';
 import { Store, select } from '@ngrx/store';
 import { Subscription, combineLatest, Observable } from 'rxjs';
@@ -54,6 +60,7 @@ export class ChatComponent implements OnInit, OnDestroy {
     private store: Store<any>,
     private formBuilder: FormBuilder,
     private logger: NGXLogger,
+    private dialogService: DialogService,
     private sessionStorageService: SessionStorageService
   ) {
     this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
@@ -194,18 +201,35 @@ export class ChatComponent implements OnInit, OnDestroy {
     this.chatContextMenuTrigger.openMenu();
   }
 
-  onSelectedRoom(roomInfo: RoomInfo) {
+  async onClickContextMenu(type: string, roomInfo: RoomInfo) {
-    this.store.dispatch(ChatStore.selectedRoom({ roomSeq: roomInfo.roomSeq }));
+    switch (type) {
-  }
+      case 'SELECT_ROOM':
-  onClickToggleAlarm(roomInfo: RoomInfo) {
-    this.store.dispatch(RoomStore.updateOnlyAlarm({ roomInfo }));
-  }
-  onClickExit(roomInfo: RoomInfo) {
         this.store.dispatch(
-      RoomStore.exit({
+          ChatStore.selectedRoom({ roomSeq: roomInfo.roomSeq })
-        roomSeq: roomInfo.roomSeq
-      })
         );
+        break;
+      case 'TOGGLE_ALARM':
+        this.store.dispatch(RoomStore.updateOnlyAlarm({ roomInfo }));
+        break;
+      case 'EXIT_ROOM':
+        {
+          const result = await this.dialogService.open<
+            ConfirmDialogComponent,
+            ConfirmDialogData,
+            ConfirmDialogResult
+          >(ConfirmDialogComponent, {
+            data: {
+              title: 'Exit Room',
+              html: `대화방을 나가시겠습니까?<br/>나가기를 하면 대화내용 및 대화방 정보가 삭제됩니다.`
+            }
+          });
+
+          if (!!result && !!result.choice && result.choice) {
+            this.store.dispatch(RoomStore.exit({ roomSeq: roomInfo.roomSeq }));
+          }
+        }
+        break;
+    }
   }
 
   getRoomUserList(roomInfo: RoomInfo): (RoomUserInfo | UserInfoShort)[] {

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

@@ -17,6 +17,7 @@
         [oraganizationList]="departmentInfoList$ | async"
         [loginRes]="loginRes"
         (selected)="onSelectedOrganization($event)"
+        class="tab-tree-frame"
       ></ucap-organization-tree>
     </perfect-scrollbar>
   </div>

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

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

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

@@ -607,6 +607,18 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
         },
         error => {
           this.logger.debug('onFileSelected error', error);
+          this.fileUploadQueue.onUploadComplete();
+
+          this.dialogService.open<
+            AlertDialogComponent,
+            AlertDialogData,
+            AlertDialogResult
+          >(AlertDialogComponent, {
+            data: {
+              title: 'Alert',
+              html: `파일전송에 실패하였습니다.<br/>계속 문제 발생 시 관리자에게 문의하세요.`
+            }
+          });
         },
         () => {
           this.fileUploadQueue.onUploadComplete();

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

@@ -168,7 +168,12 @@
     >
       No
     </button>
-    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
+    <button
+      mat-flat-button
+      [disabled]="getBtnValid()"
+      (click)="onClickChoice(true)"
+      class="mat-primary"
+    >
       Yes
     </button>
   </mat-card-actions>

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

@@ -15,6 +15,10 @@
       height:100% !important;
       border-right: 1px solid #dddddd;
       overflow: auto;
+      .tab-tree-frame{
+        width:100%;
+        height:100%;
+      }
     }
     .select-list {
       display: inline-flex;
@@ -66,6 +70,7 @@
 }
 ::ng-deep .mat-dialog-container .mat-tab-body-wrapper {
   height: 380px;
+  width:100%;
 }
 .list-panel{
   overflow: auto;

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

@@ -62,7 +62,8 @@ export interface CreateChatDialogData {
     | UserInfoSS
     | UserInfoF
     | UserInfoDN
-    | RoomUserInfo)[];
+    | RoomUserInfo
+  )[];
 }
 
 export interface CreateChatDialogResult {
@@ -72,7 +73,8 @@ export interface CreateChatDialogResult {
     | UserInfoSS
     | UserInfoF
     | UserInfoDN
-    | RoomUserInfo)[];
+    | RoomUserInfo
+  )[];
   selectedRoom?: RoomInfo;
   groupName?: string;
   oldGroup?: GroupDetailData;
@@ -132,7 +134,8 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     | UserInfoSS
     | UserInfoF
     | UserInfoDN
-    | RoomUserInfo)[] = [];
+    | RoomUserInfo
+  )[] = [];
   isShowSelectedUserList = true;
   selectedRoom: RoomInfo;
 
@@ -449,6 +452,14 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     );
   }
 
+  getBtnValid() {
+    if (this.data.type === UserSelectDialogType.NewGroup) {
+      return this.inputForm.invalid;
+    } else {
+      return false;
+    }
+  }
+
   /** 팝업의 선택 이벤트 전달. */
   onClickChoice(choice: boolean): void {
     this.dialogRef.close({

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/edit-chat-room.dialog.component.html

@@ -5,7 +5,7 @@
   <mat-card-content>
     <form name="inputForm" [formGroup]="inputForm" novalidate>
       <div>
-        <mat-form-field hintLabel="특수문자는 '-,_'만 사용할 수 있습니다.">
+        <mat-form-field hintLabel="">
           <input
             matInput
             #input

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

@@ -12,6 +12,7 @@
       [size]="leftSideComponentWidth"
       minSize="300"
       maxSize="500"
+      class="split-area"
     >
       <div class="left-side">
         <app-layout-messenger-left-side
@@ -41,6 +42,7 @@
           mode="side"
           position="end"
           (openedChange)="onOpenedChange($event)"
+          class="rightDrawer"
         >
           <app-layout-messenger-right-drawer
             [selectedRightDrawer]="selectedRightDrawer$ | async"

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

@@ -6,24 +6,37 @@
   border: 3px solid #4f4f4f;
   border-top: none;
 
+  .split-area{
+    overflow: hidden;
     .left-side {
     width: 100%;
     height: 100%;
     flex: 0 0 auto;
     position: relative;
     }
+  }
+
   .contents {
     flex: 1 1 auto;
     min-width: 400px;
     height: 100%;
-
     .messages {
       width: 100%;
       height: 100%;
     }
+    .rightDrawer{
+      width:420px;
+      height: 100%;
+      flex: 0 0 auto;
+      overflow: hidden;
+    }
   }
   .right-side {
     height: 100%;
     flex: 0 0 auto;
   }
 }
+
+::ng-deep .mat-drawer-inner-container{
+  overflow: unset !important;
+}

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

@@ -46,7 +46,7 @@ ol {
   list-style: none;
 }
 $lg-red: (
-  50: #ffffff,
+  50: #faf3f6,
   100: #f8bbd0,
   200: #f48fb1,
   300: #f06292,
@@ -78,6 +78,39 @@ $lg-red: (
   )
 );
 
+$daesang: (
+  50: #e0f7fa,
+  100: #b2ebf2,
+  200: #80deea,
+  300: #4dd0e1,
+  400: #26c6da,
+  500: #00bcd4,
+  /*600: #00acc1,*/ 600: #00b6d5,
+  700: #0097a7,
+  800: #00838f,
+  900: #006064,
+  A100: #84ffff,
+  A200: #18ffff,
+  A400: #00e5ff,
+  A700: #00b8d4,
+  contrast: (
+    50: $dark-primary-text,
+    100: $dark-primary-text,
+    200: $dark-primary-text,
+    300: $dark-primary-text,
+    400: $dark-primary-text,
+    500: $light-primary-text,
+    600: $light-primary-text,
+    700: $light-primary-text,
+    800: $light-primary-text,
+    900: $light-primary-text,
+    A100: $dark-primary-text,
+    A200: $dark-primary-text,
+    A400: $dark-primary-text,
+    A700: $dark-primary-text,
+  )
+);
+
 @mixin ucap-material-theme($theme) {
   @include ucap-core-theme($theme);
 }
@@ -101,10 +134,18 @@ $lg-red: (
     background: mat-color($primary);
     color: mat-color($primary, default-contrast);
   }
+  .bg-accent-darkest {
+    background: mat-color($accent, 900);
+    color: mat-color($primary, default-contrast);
+  }
   .bg-accent-dark {
     background: mat-color($accent, 600);
     color: mat-color($primary, default-contrast);
   }
+  .bg-accent-brightest {
+    background: mat-color($accent, 50);
+    color: mat-color($primary, $dark-primary-text);
+  }
   .bg-accent-light {
     background: mat-color($accent, 300) !important;
     color: mat-color($primary, default-contrast);

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.scss

@@ -1,3 +1,7 @@
 .bubble-main{
   padding:10px;
+  img{
+    height:140px;
+    width:auto;
+  }
 }

projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html

@@ -1,4 +1,4 @@
-<cdk-virtual-scroll-viewport #cvsvOrganization itemSize="48" fxFlexFill>
+<cdk-virtual-scroll-viewport #cvsvOrganization itemSize="40" fxFlexFill>
   <ng-container
     *cdkVirtualFor="let node of dataSource.expandedData$"
   ></ng-container>
@@ -9,9 +9,9 @@
     class="organization-tree"
   >
     <!-- This is the tree node template for leaf nodes -->
-    <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
+    <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding  class="mat-tree-last-node">
       <li>
-        <div class="mat-tree-node" (click)="onClickNode(node)">
+        <div (click)="onClickNode(node)">
           {{ node.name }}
         </div>
       </li>
@@ -23,7 +23,7 @@
       class="tree-node-frame"
     >
       <li>
-        <div class="mat-tree-node" (click)="onClickNode(node)" class="path">
+        <div  (click)="onClickNode(node)" class="path">
           <span class="horizontal-line"></span>
           <button
             mat-icon-button

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

@@ -6,14 +6,13 @@
     margin-top: 0;
     margin-bottom: 0;
     list-style-type: none;
-    margin-left: 10px;
   }
   .organization-tree-node-invisible {
     display: none;
   }
 }
 
-.tree-node-frame {
+/*.tree-node-frame {
   li {
     .path {
       .horizontal-line {
@@ -33,6 +32,37 @@
       box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
     }
   }
+}*/
+.organization-tree{
+  .tree-node-frame {
+    height:40px;
+    min-height:40px;
+    li{
+      display:flex;
+      align-items: center;
+      cursor:pointer;
+      width:100%;
+    }
+  }
+  .mat-tree-last-node{
+    height:30px;
+    min-height:30px;
+    font-size: 13px;
+    li{
+      display:flex;
+      align-items: center;
+      width:100%;
+      height:100%;
+      padding-left:10px;
+      cursor:pointer;
+      &:hover {
+        background-color: #f4f4f4;
+        border: 1px solid #cccccc;
+        border-radius: 4px;
+        box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
+      }
+    }
+  }
 }
 
 ul .tree-node-frame li .path > .horizontal-line {

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss

@@ -107,7 +107,7 @@ $thumbnail-msize: 40px;
     display: flex;
     margin: 0;
     padding: 0;
-    width: calc(100% - 60px);
+
     .detail {
       flex-direction: column;
       width: calc(100% - 80px);

projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts

@@ -15,6 +15,12 @@ import {
   CommonApiService
 } from '@ucap-webmessenger/api-common';
 import { FileUtil } from '@ucap-webmessenger/core';
+import { DialogService } from '../services/dialog.service';
+import {
+  AlertDialogComponent,
+  AlertDialogResult,
+  AlertDialogData
+} from '../dialogs/alert.dialog.component';
 
 @Directive({
   selector: 'input[ucapFileUploadFor], div[ucapFileUploadFor]'
@@ -40,7 +46,8 @@ export class FileUploadForDirective implements AfterViewInit {
   constructor(
     private commonApiService: CommonApiService,
     private elementRef: ElementRef,
-    private logger: NGXLogger
+    private logger: NGXLogger,
+    private dialogService: DialogService
   ) {}
 
   ngAfterViewInit(): void {}
@@ -66,11 +73,11 @@ export class FileUploadForDirective implements AfterViewInit {
       return;
     }
 
-    if (this.fileUploadQueue.isEventInElement(event)) {
+    // if (this.fileUploadQueue.isEventInElement(event)) {
-      event.dataTransfer.dropEffect = 'copy';
+    //   event.dataTransfer.dropEffect = 'copy';
-    } else {
+    // } else {
-      event.dataTransfer.dropEffect = 'none';
+    //   event.dataTransfer.dropEffect = 'none';
-    }
+    // }
     event.preventDefault();
   }
 
@@ -103,17 +110,32 @@ export class FileUploadForDirective implements AfterViewInit {
     }
     const files: FileList = event.dataTransfer.files;
 
-    if (
+    const checkExt = this.commonApiService.acceptableExtensionForFileTalk(
-      !this.commonApiService.acceptableExtensionForFileTalk(
       FileUtil.getExtensions(files)
-      )
+    );
-    ) {
+    if (!checkExt.accept) {
       this.logger.debug('window:drop not acceptable');
       if (!!this.fileUploadQueue) {
         this.fileUploadQueue.onDragLeave();
       }
       this.elementRef.nativeElement.value = '';
       this.dragOver = false;
+
+      this.dialogService.open<
+        AlertDialogComponent,
+        AlertDialogData,
+        AlertDialogResult
+      >(AlertDialogComponent, {
+        data: {
+          title: 'Alert',
+          html: `지원하지 않는 파일형식입니다.${
+            checkExt.reject.length > 0
+              ? '<br/>(' + checkExt.reject.join(',') + ')'
+              : ''
+          }`
+        }
+      });
+
       return;
     }