팝업 전체 사이즈 조정(사이즈 이슈 발생 할 수 있음), 앨범뷰어 저장, 다른이름 저장, 다수대화방 오프라인 표시 적용

2020-03-29 11:27:13 +09:00 · 2020-03-29 11:27:13 +09:00 · 6beb8e5e2b
commit 6beb8e5e2b
parent 4c751b294d
53 changed files with 619 additions and 450 deletions
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
@ -156,7 +156,8 @@ export class LeftSideComponent implements OnInit, OnDestroy {
      CreateChatDialogData,
      CreateChatDialogResult
    >(CreateChatDialogComponent, {
-      width: '600px',
+      maxWidth: '94vw',
+      maxHeight: '90vh',
      data: {
        type: UserSelectDialogType.NewChat,
        title:
@ -188,7 +189,8 @@ export class LeftSideComponent implements OnInit, OnDestroy {
      CreateChatDialogData,
      CreateChatDialogResult
    >(CreateChatDialogComponent, {
-      width: '600px',
+      maxWidth: '94vw',
+      maxHeight: '90vh',
      data: {
        type: UserSelectDialogType.NewGroup,
        title: this.translateService.instant('group.addNew')
@ -220,8 +222,8 @@ export class LeftSideComponent implements OnInit, OnDestroy {
      MessageWriteDialogData,
      MessageWriteDialogResult
    >(MessageWriteDialogComponent, {
-      width: '600px',
-      height: '600px',
+      maxWidth: '90vw',
+      maxHeight: '94vh',
      disableClose: true,
      hasBackdrop: false,
      data: {
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.ts
@ -269,6 +269,7 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
            ConfirmDialogData,
            ConfirmDialogResult
          >(ConfirmDialogComponent, {
+            panelClass: 'miniSize-dialog',
            data: {
              title: this.translateService.instant('chat.exitFromRoom'),
              html: this.translateService.instant('chat.confirmExitFromRoom')
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts
@ -512,7 +512,7 @@ export class GroupComponent implements OnInit, OnDestroy {
              ConfirmDialogData,
              ConfirmDialogResult
            >(ConfirmDialogComponent, {
-              width: '360px',
+              panelClass: 'miniSize-dialog',
              data: {
                title: this.translateService.instant(
                  'group.removeBuddyFromGroup'
@ -547,7 +547,6 @@ export class GroupComponent implements OnInit, OnDestroy {
              SelectGroupDialogData,
              SelectGroupDialogResult
            >(SelectGroupDialogComponent, {
-              width: '600px',
              data: {
                title: this.translateService.instant('group.selectTargetGroup')
              }
@ -586,7 +585,6 @@ export class GroupComponent implements OnInit, OnDestroy {
              SelectGroupDialogData,
              SelectGroupDialogResult
            >(SelectGroupDialogComponent, {
-              width: '600px',
              data: {
                title: this.translateService.instant('group.selectTargetGroup'),
                ignoreGroup: [group]
@ -621,8 +619,8 @@ export class GroupComponent implements OnInit, OnDestroy {
              MessageWriteDialogData,
              MessageWriteDialogResult
            >(MessageWriteDialogComponent, {
-              width: '600px',
-              height: '600px',
+              maxWidth: '90vw',
+              maxHeight: '94vh',
              disableClose: true,
              hasBackdrop: false,
              data: {
@ -715,8 +713,9 @@ export class GroupComponent implements OnInit, OnDestroy {
                MessageWriteDialogData,
                MessageWriteDialogResult
              >(MessageWriteDialogComponent, {
-                width: '600px',
-                height: '600px',
+                minWidth: '600px',
+                maxWidth: '90vw',
+                maxHeight: '94vh',
                disableClose: true,
                hasBackdrop: false,
                data: {
@ -737,6 +736,7 @@ export class GroupComponent implements OnInit, OnDestroy {
              EditGroupDialogData,
              EditGroupDialogResult
            >(EditGroupDialogComponent, {
+              panelClass: 'miniSize-dialog',
              data: {
                title: this.translateService.instant('group.changeGroupName'),
                group
@ -765,7 +765,8 @@ export class GroupComponent implements OnInit, OnDestroy {
              CreateChatDialogData,
              CreateChatDialogResult
            >(CreateChatDialogComponent, {
-              width: '600px',
+              maxWidth: '90vh',
+              maxHeight: '94vh',
              data: {
                type: UserSelectDialogType.EditMember,
                title: this.translateService.instant('group.modifyGroupMember'),
@ -797,7 +798,7 @@ export class GroupComponent implements OnInit, OnDestroy {
              ConfirmDialogData,
              ConfirmDialogResult
            >(ConfirmDialogComponent, {
-              width: '360px',
+              panelClass: 'miniSize-dialog',
              data: {
                title: this.translateService.instant('group.removeGroup'),
                html: this.translateService.instant(
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.ts
@ -202,7 +202,6 @@ export class MessageBoxComponent
            MessageDetailDialogData,
            MessageDetailDialogResult
          >(MessageDetailDialogComponent, {
-            width: '600px',
            hasBackdrop: false,
            data: {
              detail: info,
@ -243,7 +242,7 @@ export class MessageBoxComponent
            AlertDialogData,
            AlertDialogResult
          >(AlertDialogComponent, {
-            width: '360px',
+            panelClass: 'miniSize-dialog',
            data: {
              title: this.translateService.instant('message.errors.label'),
              message: this.translateService.instant(
@ -417,8 +416,8 @@ export class MessageBoxComponent
      MessageWriteDialogData,
      MessageWriteDialogResult
    >(MessageWriteDialogComponent, {
-      width: '600px',
-      height: '600px',
+      maxWidth: '90vw',
+      maxHeight: '94vh',
      disableClose: true,
      hasBackdrop: false,
      data: {
--- 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
@ -595,6 +595,8 @@ export class OrganizationComponent
      SelectedUserListDialogData,
      SelectedUserListDialogResult
    >(SelectedUserListDialogComponent, {
+      maxWidth: '90vw',
+      maxHeight: '94vh',
      data: {
        title: this.translateService.instant('organization.selectedUser'),
        selectedUserList: this.selectedUserList
@ -617,7 +619,8 @@ export class OrganizationComponent
      SelectGroupDialogData,
      SelectGroupDialogResult
    >(SelectGroupDialogComponent, {
-      width: '600px',
+      maxWidth: '90vw',
+      maxHeight: '94vh',
      data: {
        title: this.translateService.instant('group.selectTargetGroup')
      }
@ -747,8 +750,8 @@ export class OrganizationComponent
            MessageWriteDialogData,
            MessageWriteDialogResult
          >(MessageWriteDialogComponent, {
-            width: '600px',
-            height: '600px',
+            maxWidth: '90vw',
+            maxHeight: '94vh',
            disableClose: true,
            hasBackdrop: false,
            data: {
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
@ -48,37 +48,15 @@
        </button>
      </div>
      <div class="room-info">
-        <div
-          *ngIf="roomInfoSubject.value && roomInfoSubject.value.isTimeRoom"
-          class="room-type text-accent-color"
-        >
-          <span class="bg-accent-darkest"
-            >{{ getConvertTimer(roomInfoSubject.value.timeRoomInterval) }}
-          </span>
-        </div>
-        <div
-          *ngIf="
-            roomInfoSubject.value &&
-            (roomInfoSubject.value.roomType === RoomType.Single ||
-              roomInfoSubject.value.roomType === RoomType.Multi) &&
-            offLineUsers.length > 0
-          "
-          class="room-type text-accent-color"
-        >
-          <span
-            *ngIf="roomInfoSubject.value.roomType === RoomType.Single"
-            class="bg-accent-darkest"
-          >
-            {{ 'chat.existOfflineUser' | translate }}
-          </span>
-          <span
-            *ngIf="roomInfoSubject.value.roomType === RoomType.Multi"
-            class="bg-accent-darkest"
-          >
-            {{ 'chat.existOfflineUsers' | translate }}
-          </span>
-        </div>
        <h3 class="room-name">
+          <span
+            *ngIf="roomInfoSubject.value && roomInfoSubject.value.isTimeRoom"
+            class="room-type text-accent-color"
+          >
+            <span class="bg-accent-darkest"
+              >{{ getConvertTimer(roomInfoSubject.value.timeRoomInterval) }}
+            </span>
+          </span>
          <ng-container
            *ngIf="!roomInfoSubject.value || !userInfoListSubject.value"
          >
@ -148,18 +126,22 @@
            </ng-container>
          </ng-container>
        </h3>
-        <!-- Timer Room Info -->
-        <!--<div
-          *ngIf="roomInfoSubject.value && roomInfoSubject.value.isTimeRoom"
-          class="room-type text-accent-color "
+        <div
+          *ngIf="
+            roomInfoSubject.value &&
+            (roomInfoSubject.value.roomType === RoomType.Single ||
+              roomInfoSubject.value.roomType === RoomType.Multi) &&
+            offLineUsers.length > 0
+          "
+          class="member-state-msg text-warn-color"
        >
-          <span class="bg-accent-darkest"
-            >{{
-              getConvertTimer(roomInfoSubject.value.timeRoomInterval)
-            }} </span
-          >{{ 'chat.isRoomTypeSecret' | translate }}
-        </div>-->
-        <!-- Timer Room Info -->
+          <span *ngIf="roomInfoSubject.value.roomType === RoomType.Single">
+            {{ 'chat.existOfflineUser' | translate }}
+          </span>
+          <span *ngIf="roomInfoSubject.value.roomType === RoomType.Multi">
+            {{ 'chat.existOfflineUsers' | translate }}
+          </span>
+        </div>
      </div>
      <div class="room-option">
        <button
@ -168,11 +150,6 @@
          (click)="onClickReceiveAlarm()"
          aria-label="Toggle Receive Alarm"
        >
-          <!--<mat-icon
-            class="amber-fg"
-            *ngIf="roomInfoSubject.value.receiveAlarm"
-            matTooltip="{{ 'chat.notificationIsOn' | translate }}"
-            >notifications_active</mat-icon>-->
          <mat-icon
            class="icon-button"
            *ngIf="roomInfoSubject.value.receiveAlarm"
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
@ -70,14 +70,18 @@
    }
    .room-info {
      display: flex;
-      flex-flow: row;
+      flex-flow: column;
      overflow: hidden;
      align-items: center;
      .room-name {
+        position: relative;
+        display: flex;
+        flex-flow: row;
+        height: 20px;
        font-size: 0.94rem;
        line-height: normal;
+        width: 100%;
        @include ellipsis(1);
-
        .more-info {
          font-size: 0.9rem;
          color: #656565;
@ -86,6 +90,7 @@
          }
        }
      }
+
      .room-type {
        font-size: 0.9rem;
        line-height: normal;
@ -98,6 +103,14 @@
        }
      }
    }
+    .member-state-msg {
+      display: flex;
+      align-items: center;
+      align-self: self-start;
+      padding: 0;
+      font-size: 11px;
+      height: 16px;
+    }
    .room-option {
      margin-left: auto;
      margin-right: -10px;
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
@ -777,13 +777,13 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
            AlertDialogData,
            AlertDialogResult
          >(AlertDialogComponent, {
-            width: '360px',
            data: {
              title: this.translateService.instant('chat.errors.label'),
              message: this.translateService.instant(
                'chat.errors.inputChatMessage'
              )
-            }
+            },
+            panelClass: 'miniSize-dialog'
          });
          return;
        }
@ -1575,7 +1575,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
            ConfirmDialogData,
            ConfirmDialogResult
          >(ConfirmDialogComponent, {
-            width: '400px',
+            panelClass: 'miniSize-dialog',
            data: {
              title: this.translateService.instant('chat.removeEvent'),
              html: this.translateService.instant('chat.confirmRemoveEvent')
@ -1599,7 +1599,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
            ConfirmDialogData,
            ConfirmDialogResult
          >(ConfirmDialogComponent, {
-            width: '400px',
+            panelClass: 'miniSize-dialog',
            data: {
              title: this.translateService.instant('chat.recallEvent'),
              html: this.translateService.instant('chat.confirmRecallEvent')
@ -1716,7 +1716,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
            CreateChatDialogData,
            CreateChatDialogResult
          >(CreateChatDialogComponent, {
-            width: '600px',
            data: {
              type: UserSelectDialogType.EditChatMember,
              title: this.translateService.instant('chat.modifyRoomMember'),
@ -1783,7 +1782,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
            SelectGroupDialogData,
            SelectGroupDialogResult
          >(SelectGroupDialogComponent, {
-            width: '600px',
            data: {
              title: this.translateService.instant('chat.addMemberToGroup')
            }
@ -1819,6 +1817,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
            EditChatRoomDialogResult
          >(EditChatRoomDialogComponent, {
            width: '600px',
+            height: '320px',
            data: {
              title: this.translateService.instant('chat.settingsOfRoom'),
              roomInfo: this.roomInfoSubject.value
--- 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
@ -308,7 +308,6 @@ export class FileBoxComponent implements OnInit, OnDestroy {
      CreateChatDialogData,
      CreateChatDialogResult
    >(CreateChatDialogComponent, {
-      width: '600px',
      data: {
        type: UserSelectDialogType.MessageForward,
        title: this.translateService.instant('chat.forwardFileTo'),
@ -350,7 +349,7 @@ export class FileBoxComponent implements OnInit, OnDestroy {
      ConfirmDialogData,
      ConfirmDialogResult
    >(ConfirmDialogComponent, {
-      width: '400px',
+      panelClass: 'miniSize-dialog',
      data: {
        title: 'Delete',
        html: this.translateService.instant('chat.confirmDeleteFile')
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/notice.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/notice.component.ts
@ -106,7 +106,7 @@ export class NoticeComponent implements OnInit, OnDestroy, AfterViewInit {
      NoticeDetailDialogData
    >(NoticeDetailDialogComponent, {
      disableClose: false,
-      width: '550px',
+      //width: '550px',
      data: {
        notice
      }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.ts
@ -181,7 +181,6 @@ export class RoomUserListComponent implements OnInit, OnDestroy {
      CreateChatDialogData,
      CreateChatDialogResult
    >(CreateChatDialogComponent, {
-      width: '600px',
      data: {
        type: UserSelectDialogType.EditChatMember,
        title: this.translateService.instant('chat.modifyRoomMember'),
@ -237,7 +236,6 @@ export class RoomUserListComponent implements OnInit, OnDestroy {
      SelectGroupDialogData,
      SelectGroupDialogResult
    >(SelectGroupDialogComponent, {
-      width: '600px',
      data: {
        title: this.translateService.instant('group.selectTargetGroup')
      }
@ -291,6 +289,7 @@ export class RoomUserListComponent implements OnInit, OnDestroy {
            ConfirmDialogData,
            ConfirmDialogResult
          >(ConfirmDialogComponent, {
+            panelClass: 'miniSize-dialog',
            data: {
              title: this.translateService.instant('chat.ejectFromRoom'),
              html: this.translateService.instant('chat.confirmEjectFromRoom', {
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/notice.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/notice.dialog.component.scss
@ -1,9 +1,11 @@
-::ng-deep .use-caution {
+.use-caution {
  .btn-dialog-close {
    margin-left: auto;
  }
-  .mat-card-header-text {
+  .mat-card-header {
    width: 100%;
+    justify-content: center;
+    color: #ffffff;
    .mat-card-title {
      justify-content: center;
      color: #ffffff;
@ -28,9 +30,17 @@
    }
  }
 }
-
-form {
-  .mat-form-field {
-    width: 100%;
+::ng-deep.use-caution {
+  .notice {
+    ol {
+      li {
+        list-style: decimal;
+        margin-bottom: 14px;
+        margin-left: 20px;
+        span {
+          color: #ff5722;
+        }
+      }
+    }
  }
 }
--- 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
@ -11,7 +11,10 @@
    </button>
  </mat-card-header>
  <mat-card-content>
-    <div *ngIf="data.type === UserSelectDialogType.NewGroup">
+    <div
+      *ngIf="data.type === UserSelectDialogType.NewGroup"
+      class="newgroup-form"
+    >
      <form name="inputForm" [formGroup]="inputForm" novalidate>
        <mat-form-field
          hintLabel="{{
@ -52,6 +55,7 @@
      fxLayoutAlign="center"
      fxLayoutGap="10px"
      fxLayoutGap.xs="0"
+      class="mat-card-content-frame"
    >
      <div fxFlex class="container">
        <mat-tab-group
@ -60,25 +64,6 @@
        >
          <mat-tab>
            <ng-template mat-tab-label>
-              <!--<mat-icon>group</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="1.5"
-                stroke-linecap="butt"
-                stroke-linejoin="round"
-                matTooltip="{{ 'group.label' | translate }}"
-                matTooltipPosition="after"
-              >
-                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
-                <circle cx="9" cy="7" r="4"></circle>
-                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
-                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
-              </svg>-->
              <button class="icon-button">
                <i class="mid mid-24 mdi-account-multiple"></i>
              </button>
@ -227,24 +212,24 @@
        </mat-tab-group>
      </div>
    </div>
+    <mat-card-actions class="button-form flex-row">
+      <button
+        mat-stroked-button
+        (click)="onClickChoice(false)"
+        class="mat-primary"
+      >
+        {{ 'common.messages.no' | translate }}
+      </button>
+      <button
+        mat-flat-button
+        [disabled]="getBtnValid()"
+        (click)="onClickChoice(true)"
+        class="mat-primary"
+      >
+        {{ 'common.messages.yes' | translate }}
+      </button>
+    </mat-card-actions>
  </mat-card-content>
-  <mat-card-actions class="button-form flex-row">
-    <button
-      mat-stroked-button
-      (click)="onClickChoice(false)"
-      class="mat-primary"
-    >
-      {{ 'common.messages.no' | translate }}
-    </button>
-    <button
-      mat-flat-button
-      [disabled]="getBtnValid()"
-      (click)="onClickChoice(true)"
-      class="mat-primary"
-    >
-      {{ 'common.messages.yes' | translate }}
-    </button>
-  </mat-card-actions>
 </mat-card>

 <ng-template #selectedUserListTemplate>
@ -254,6 +239,7 @@
        *ngFor="let userInfo of selectedUserList"
        [selected]="getChipsRemoveYn(userInfo)"
        (removed)="onClickDeleteUser(userInfo)"
+        [matTooltip]="userInfo.deptName"
      >
        {{ userInfo | ucapTranslate: 'name' }}
        <mat-icon matChipRemove *ngIf="getChipsRemoveYn(userInfo)"
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss
@ -10,24 +10,27 @@
    }
  }
  & > .mat-card-content {
-    //height: 568px;
    position: relative;
-    .container {
-      height: 100%;
-      .container-frame {
-        height: 530px;
+    .mat-card-content-frame {
+      height: calc(100% - 50px);
+      .container {
+        height: 100%;
+        .container-frame {
+          height: 530px;
+        }
      }
    }
-
    //그룹이름 폼 있는 경우
    .newgroup-form {
      height: 70px;
-      + .container {
-        height: calc(100% - 70px);
-        .container-frame {
-          .mat-tab-group {
-            & > .mat-tab-body {
-              height: 380px;
+      & + .mat-card-content-frame {
+        height: calc(100% - 120px);
+        .container {
+          .mat-tab-frame {
+            .mat-tab-group {
+              & > .mat-tab-body {
+                height: 380px;
+              }
            }
          }
        }
@ -44,7 +47,7 @@
 }

 .dialog-tab-grouplist {
-  height: 380px;
+  height: calc(100% - 140px);
  width: 100%;
  .group,
  .search-result {
@ -82,7 +85,7 @@

 ::ng-deep .dialog-tab-orglist {
  width: 100%;
-  height: 380px;
+  height: calc(100% - 150px);
  border-bottom: 1px solid #dddddd;
  position: relative;
  .oraganization {
@ -147,7 +150,7 @@
  }
 }

-/*:ng-deep .dialog-creat-chat {
+/*::ng-deep .dialog-creat-chat {
  & > .mat-tab-body-wrapper {
    .mat-tab-body {
      height: 380px;
@ -162,3 +165,15 @@
  }
 }
 */
+
+.mat-card-content {
+  .mat-card-content-frame {
+    height: 100%;
+    .container {
+      height: 100%;
+      .mat-tab-group {
+        height: 100%;
+      }
+    }
+  }
+}
--- 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
@ -787,7 +787,6 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
        ConfirmDialogData,
        ConfirmDialogResult
      >(ConfirmDialogComponent, {
-        width: '400px',
        data: {
          title: this.translateService.instant('group.addNew'),
          html: cfmMsg
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.html
@ -1,4 +1,4 @@
-<mat-card class="confirm-card mat-elevation-z">
+<mat-card class="confirm-card mat-elevation-z edit-group">
  <mat-card-header>
    <mat-card-title
      cdkDrag
@ -41,22 +41,22 @@
        </mat-error>
      </mat-form-field>
    </form>
+    <mat-card-actions class="button-form flex-row">
+      <button
+        mat-stroked-button
+        (click)="onClickChoice(false)"
+        class="mat-primary"
+      >
+        {{ 'common.messages.no' | translate }}
+      </button>
+      <button
+        mat-flat-button
+        (click)="onClickChoice(true)"
+        [disabled]="inputForm.invalid"
+        class="mat-primary"
+      >
+        {{ 'common.messages.yes' | translate }}
+      </button>
+    </mat-card-actions>
  </mat-card-content>
-  <mat-card-actions class="button-form flex-row">
-    <button
-      mat-stroked-button
-      (click)="onClickChoice(false)"
-      class="mat-primary"
-    >
-      {{ 'common.messages.no' | translate }}
-    </button>
-    <button
-      mat-flat-button
-      (click)="onClickChoice(true)"
-      [disabled]="inputForm.invalid"
-      class="mat-primary"
-    >
-      {{ 'common.messages.yes' | translate }}
-    </button>
-  </mat-card-actions>
 </mat-card>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.scss
@ -1,18 +1,32 @@
-.mat-card-header {
-  .mat-card-header-text {
-    margin: 0;
-  }
-  .btn-dialog-close {
-    font-size: 20px;
-    display: flex;
-    margin-left: auto;
-    align-self: flex-start;
-    color: #444444;
-  }
-}
+.edit-group {
+  width: 100%;
+  height: 100%;

-form {
-  .mat-form-field {
-    width: 100%;
+  .mat-card-header {
+    .mat-card-header-text {
+      margin: 0;
+    }
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
+    }
+  }
+  .mat-card-content {
+    display: flex;
+    flex-flow: column;
+    form {
+      .mat-form-field {
+        width: 100%;
+      }
+    }
+    .mat-card-actions {
+      display: flex;
+      align-self: flex-end;
+      flex-flow: row;
+      margin-top: auto;
+    }
  }
 }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html
@ -1,4 +1,4 @@
-<mat-card class="confirm-card mat-elevation-z">
+<mat-card class="confirm-card mat-elevation-z selected-user">
  <mat-card-header>
    <mat-card-title>{{ data.title }}</mat-card-title>
    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
@ -16,96 +16,98 @@
        <mat-icon>add</mat-icon>
        <span class="mat-fab__label">{{ 'group.addNew' | translate }}</span>
      </button>
-
-      <div *ngIf="isShowAddGroupField" class="input-groupname-box">
-        <form name="inputForm" [formGroup]="inputForm" novalidate>
-          <mat-form-field
-            hintLabel="{{
-              'common.useOnlyForSpecialCharacter'
-                | translate: { specialCharacter: '-,_' }
-            }}"
-          >
-            <input
-              matInput
-              #inputGroupName
-              type="text"
-              maxlength="20"
-              placeholder="{{ 'group.name' | translate }}"
-              value=""
-              formControlName="groupName"
-            />
-            <button
-              mat-button
-              matSuffix
-              mat-icon-button
-              aria-label="Clear"
-              (click)="inputGroupName.value = ''"
-            >
-              <mat-icon>close</mat-icon>
-            </button>
-            <mat-hint align="end"
-              >{{ inputGroupName.value?.length || 0 }}/20</mat-hint
-            >
-            <mat-error
-              *ngIf="inputForm.get('groupName').hasError('groupNameBanned')"
-            >
-              {{
-                'group.errors.bannedWords'
-                  | translate: { bannedWords: bannedWords.join(',') }
-              }}
-            </mat-error>
-            <mat-error
-              *ngIf="inputForm.get('groupName').hasError('groupNameSamed')"
-            >
-              {{ 'group.errors.sameNameExist' | translate }}
-            </mat-error>
-          </mat-form-field>
-        </form>
-
-        <div class="btn-box">
-          <button mat-stroked-button (click)="onClickAddGroupCancel()">
-            {{ 'common.messages.close' | translate }}
-          </button>
+    </div>
+    <div *ngIf="isShowAddGroupField" class="input-groupname-box">
+      <form name="inputForm" [formGroup]="inputForm" novalidate>
+        <mat-form-field
+          hintLabel="{{
+            'common.useOnlyForSpecialCharacter'
+              | translate: { specialCharacter: '-,_' }
+          }}"
+        >
+          <input
+            matInput
+            #inputGroupName
+            type="text"
+            maxlength="20"
+            placeholder="{{ 'group.name' | translate }}"
+            value=""
+            formControlName="groupName"
+          />
          <button
-            mat-stroked-button
-            color="accent"
-            (click)="onClickAddGroup(inputGroupName.value)"
-            class="mat-accent"
-            [disabled]="inputForm.invalid"
+            mat-button
+            matSuffix
+            mat-icon-button
+            aria-label="Clear"
+            (click)="inputGroupName.value = ''"
          >
-            {{ 'group.addNew' | translate }}
+            <mat-icon>close</mat-icon>
          </button>
-        </div>
+          <mat-hint align="end"
+            >{{ inputGroupName.value?.length || 0 }}/20</mat-hint
+          >
+          <mat-error
+            *ngIf="inputForm.get('groupName').hasError('groupNameBanned')"
+          >
+            {{
+              'group.errors.bannedWords'
+                | translate: { bannedWords: bannedWords.join(',') }
+            }}
+          </mat-error>
+          <mat-error
+            *ngIf="inputForm.get('groupName').hasError('groupNameSamed')"
+          >
+            {{ 'group.errors.sameNameExist' | translate }}
+          </mat-error>
+        </mat-form-field>
+      </form>
+
+      <div class="btn-box">
+        <button mat-stroked-button (click)="onClickAddGroupCancel()">
+          {{ 'common.messages.close' | translate }}
+        </button>
+        <button
+          mat-stroked-button
+          color="accent"
+          (click)="onClickAddGroup(inputGroupName.value)"
+          class="mat-accent"
+          [disabled]="inputForm.invalid"
+        >
+          {{ 'group.addNew' | translate }}
+        </button>
      </div>
    </div>
    <mat-selection-list #groups>
-      <mat-list-option
-        *ngFor="let groupBuddy of groupBuddyList$ | async"
-        [value]="groupBuddy.group"
-        [disabled]="getDisabled(groupBuddy)"
-        class="group-list"
-      >
-        <div class="group-name">
-          <span class="title-name ellipsis"> {{ groupBuddy.group.name }} </span>
-          <span class="text-accent-color number"
-            >({{ groupBuddy.buddyList.length
-            }}{{ 'common.units.persons' | translate }})</span
-          >
-        </div>
-      </mat-list-option>
+      <perfect-scrollbar fxFlex="1 1 auto">
+        <mat-list-option
+          *ngFor="let groupBuddy of groupBuddyList$ | async"
+          [value]="groupBuddy.group"
+          [disabled]="getDisabled(groupBuddy)"
+          class="group-list"
+        >
+          <div class="group-name">
+            <span class="title-name ellipsis">
+              {{ groupBuddy.group.name }}
+            </span>
+            <span class="text-accent-color number"
+              >({{ groupBuddy.buddyList.length
+              }}{{ 'common.units.persons' | translate }})</span
+            >
+          </div>
+        </mat-list-option>
+      </perfect-scrollbar>
    </mat-selection-list>
+    <mat-card-actions class="button-form flex-row">
+      <button
+        mat-stroked-button
+        (click)="onClickChoice(false)"
+        class="mat-primary"
+      >
+        {{ 'common.messages.no' | translate }}
+      </button>
+      <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
+        {{ 'common.messages.yes' | translate }}
+      </button>
+    </mat-card-actions>
  </mat-card-content>
-
-  <mat-card-actions class="button-form flex-row">
-    <button
-      mat-stroked-button
-      (click)="onClickChoice(false)"
-      class="mat-primary"
-    >
-      {{ 'common.messages.no' | translate }}
-    </button>
-    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
-      {{ 'common.messages.yes' | translate }}
-    </button>
-  </mat-card-actions>
 </mat-card>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss
@ -14,9 +14,10 @@
  width: 100%;
  padding: 10px;
 }
-.confirm-card {
-  min-width: 500px;
+.selected-user {
+  height: 100%;
  .mat-card-content {
+    position: relative;
  }
  .button-form {
    text-align: right;
@ -40,12 +41,17 @@
      margin-left: 10px;
    }
  }
+  + .mat-selection-list {
+    border-top: 1px solid #999999;
+    height: calc(100% - 100px);
+  }
 }
-
-.mat-selection-list {
-  border-top: 1px solid #999999;
+.input-groupname-box {
+  + .mat-selection-list {
+    border-top: 1px solid #999999;
+    height: calc(100% - 200px);
+  }
 }
-
 .group-list {
  &.mat-list-item {
    border-bottom: 1px solid #dddddd;
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.ts
@ -215,7 +215,6 @@ export class SelectGroupDialogComponent implements OnInit {
      ConfirmDialogData,
      ConfirmDialogResult
    >(ConfirmDialogComponent, {
-      width: '300px',
      data: {
        title: this.translateService.instant('group.addNew'),
        html: this.translateService.instant('group.confirmAddNewWith', {
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html
@ -1,4 +1,4 @@
-<mat-card class="confirm-card mat-elevation-z">
+<mat-card class="confirm-card mat-elevation-z message-detail">
  <mat-card-header>
    <mat-card-title
      cdkDrag
@ -257,20 +257,20 @@
        </mat-tab-group>
      </mat-drawer>
    </mat-drawer-container>
+    <mat-card-actions class="button-form flex-row">
+      <button mat-stroked-button (click)="onClickConfirm()" class="mat-primary">
+        {{ 'common.messages.confirm' | translate }}
+      </button>
+      <button
+        mat-flat-button
+        *ngIf="messageDetail.msgInfo.type === MessageType.Receive"
+        (click)="onClickReply()"
+        class="mat-primary"
+      >
+        {{ 'message.sendReply' | translate }}
+      </button>
+    </mat-card-actions>
  </mat-card-content>
-  <mat-card-actions class="button-form flex-row">
-    <button mat-stroked-button (click)="onClickConfirm()" class="mat-primary">
-      {{ 'common.messages.confirm' | translate }}
-    </button>
-    <button
-      mat-flat-button
-      *ngIf="messageDetail.msgInfo.type === MessageType.Receive"
-      (click)="onClickReply()"
-      class="mat-primary"
-    >
-      {{ 'message.sendReply' | translate }}
-    </button>
-  </mat-card-actions>
 </mat-card>

 <mat-menu #messageMenu="matMenu" xPosition="after" yPosition="below">
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss
@ -1,24 +1,27 @@
-.mat-card-header {
-  .mat-card-header-text {
-    margin: 0;
+.message-detail {
+  width: 100%;
+  height: 100%;
+  .mat-card-header {
+    .mat-card-header-text {
+      margin: 0;
+    }
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
+    }
  }
-  .btn-dialog-close {
-    font-size: 20px;
-    display: flex;
-    margin-left: auto;
-    align-self: flex-start;
-    color: #444444;
-  }
-}
-
-.confirm-card {
-  min-width: 500px;
  .mat-card-content {
-  }
-  .button-form {
-    text-align: right;
-    .mat-primary {
-      margin-left: 4px;
+    mat-drawer-container {
+      height: calc(100% - 40px);
+    }
+    .button-form {
+      text-align: right;
+      .mat-primary {
+        margin-left: 4px;
+      }
    }
  }
 }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.ts
@ -465,6 +465,7 @@ export class MessageDetailDialogComponent implements OnInit {
            ConfirmDialogData,
            ConfirmDialogResult
          >(ConfirmDialogComponent, {
+            panelClass: 'miniSize-dialog',
            data: {
              title: this.translateService.instant('message.cancelReservation'),
              html: this.translateService.instant(
@ -509,8 +510,8 @@ export class MessageDetailDialogComponent implements OnInit {
            MessageWriteDialogData,
            MessageWriteDialogResult
          >(MessageWriteDialogComponent, {
-            width: '600px',
-            height: '600px',
+            maxWidth: '90vw',
+            maxHeight: '94vh',
            disableClose: true,
            hasBackdrop: false,
            data: {
@ -558,6 +559,7 @@ export class MessageDetailDialogComponent implements OnInit {
        ConfirmDialogData,
        ConfirmDialogResult
      >(ConfirmDialogComponent, {
+        panelClass: 'miniSize-dialog',
        data: {
          title: this.translateService.instant('message.cancelSending'),
          message: this.translateService.instant('message.confirmCancelSending')
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.html
@ -1,4 +1,4 @@
-<mat-card class="confirm-card mat-elevation-z">
+<mat-card class="confirm-card mat-elevation-z message-write">
  <mat-card-header>
    <mat-card-title
      cdkDrag
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.scss
@ -1,21 +1,17 @@
-.mat-card-header {
-  .mat-card-header-text {
-    margin: 0;
-  }
-  .btn-dialog-close {
-    font-size: 20px;
-    display: flex;
-    margin-left: auto;
-    align-self: flex-start;
-    color: #444444;
-  }
-}
-
-.confirm-card {
-  min-width: 500px;
+.message-write {
+  width: 100%;
  height: 100%;

-  mat-card-content {
-    height: calc(100% - 40px);
+  .mat-card-header {
+    .mat-card-header-text {
+      margin: 0;
+    }
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
+    }
  }
 }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.ts
@ -124,7 +124,7 @@ export class MessageWriteDialogComponent implements OnInit {
      CreateChatDialogData,
      CreateChatDialogResult
    >(CreateChatDialogComponent, {
-      width: '600px',
+      //width: '600px',
      data: {
        type: UserSelectDialogType.EditChatMember,
        title: this.translateService.instant('message.selectRecipient'),
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.html
@ -68,17 +68,17 @@
        </ucap-profile-user-list-item> -->
      </cdk-virtual-scroll-viewport>
    </div>
+    <mat-card-actions class="button-frame  flex-row">
+      <button
+        mat-stroked-button
+        (click)="onClickChoice(false)"
+        class="mat-primary"
+      >
+        {{ 'common.messages.cancel' | translate }}
+      </button>
+      <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
+        {{ 'common.messages.apply' | translate }}
+      </button>
+    </mat-card-actions>
  </mat-card-content>
-  <mat-card-actions class="button-frame  flex-row">
-    <button
-      mat-stroked-button
-      (click)="onClickChoice(false)"
-      class="mat-primary"
-    >
-      {{ 'common.messages.cancel' | translate }}
-    </button>
-    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
-      {{ 'common.messages.apply' | translate }}
-    </button>
-  </mat-card-actions>
 </mat-card>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.scss
@ -11,22 +11,24 @@
  }
 }

-.confirm-card {
-  min-width: 500px;
+.selected-user-dialog {
  .mat-card-content {
+    height: calc(100% - 80px);
    .item-list {
-      height: 450px;
+      height: calc(100% - 40px);
    }
-  }
-  .button-frame {
-    text-align: right;
-    .mat-primary {
-      margin-left: 4px;
+    .button-frame {
+      text-align: right;
+      margin: 0;
+      .mat-primary {
+        margin-left: 4px;
+      }
    }
  }
 }

 .selected-user-dialog {
+  height: 100%;
  .check-all {
    display: flex;
    border-bottom: 2px solid #444444;
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/profile/profile.dialog.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/profile/profile.dialog.component.ts
@ -235,8 +235,8 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
        MessageWriteDialogData,
        MessageWriteDialogResult
      >(MessageWriteDialogComponent, {
-        width: '600px',
-        height: '600px',
+        maxWidth: '90vw',
+        maxHeight: '94vh',
        disableClose: true,
        hasBackdrop: false,
        data: {
@ -273,7 +273,7 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
        ConfirmDialogData,
        ConfirmDialogResult
      >(ConfirmDialogComponent, {
-        width: '360px',
+        panelClass: 'miniSize-dialog',
        data: {
          title: this.translateService.instant('call.callTo'),
          html: this.translateService.instant('call.callWithNumber', {
@ -359,7 +359,6 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
        SelectGroupDialogData,
        SelectGroupDialogResult
      >(SelectGroupDialogComponent, {
-        width: '600px',
        data: {
          title: this.translateService.instant('group.selectTargetGroup')
        }
@ -387,7 +386,7 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
        ConfirmDialogData,
        ConfirmDialogResult
      >(ConfirmDialogComponent, {
-        width: '360px',
+        panelClass: 'miniSize-dialog',
        data: {
          title: this.translateService.instant('group.removeBuddyFromGroup'),
          html: this.translateService.instant(
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html
@ -1,4 +1,4 @@
-<mat-card class="confirm-card mat-elevation-z">
+<mat-card class="confirm-card mat-elevation-z integrated-search">
  <mat-card-header>
    <mat-card-title
      cdkDrag
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss
@ -1,12 +1,20 @@
-.mat-card-header {
-  .mat-card-header-text {
-    margin: 0;
+.integrated-search {
+  height: 100%;
+  .mat-card-header {
+    .mat-card-header-text {
+      margin: 0;
+    }
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
+    }
  }
-  .btn-dialog-close {
-    font-size: 20px;
-    display: flex;
-    margin-left: auto;
-    align-self: flex-start;
-    color: #444444;
+  .mat-card-content {
+    ucap-integrated-search {
+      height: 100%;
+    }
  }
 }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts
@ -219,6 +219,8 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
              ProfileDialogData,
              ProfileDialogResult
            >(ProfileDialogComponent, {
+              maxWidth: '90vw',
+              height: '500px',
              data: {
                userInfo: res.userInfo
              }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss
@ -1,6 +1,6 @@
 .setting-frame {
  padding: 16px;
-  height: calc(90vh - 40px);
+  height: calc(90vh - 50px);
  width: 100%;
  position: relative;

--- 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
@ -406,6 +406,8 @@ export class TopBarComponent implements OnInit, OnDestroy {
              ProfileDialogData,
              ProfileDialogResult
            >(ProfileDialogComponent, {
+              maxWidth: '90vw',
+              height: '500px',
              data: {
                userInfo: res.userInfo
              }
@ -687,7 +689,8 @@ export class TopBarComponent implements OnInit, OnDestroy {
      data: {
        keyword
      },
-      restoreFocus: false
+      restoreFocus: false,
+      panelClass: 'fullSize-dialog'
    });

    this.integratedSearchWord = '';
@ -699,7 +702,7 @@ export class TopBarComponent implements OnInit, OnDestroy {
      ConfirmDialogData,
      ConfirmDialogResult
    >(ConfirmDialogComponent, {
-      width: '400px',
+      panelClass: 'miniSize-dialog',
      data: {
        title: 'Clear & Logout?',
        html: 'Clear General Setting And Logout?'
--- a/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss
@ -53,7 +53,6 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  position: relative;
  height: 100%;
  width: 100%;
-  //background: $main;
  overflow: hidden;
  &_wrap {
    position: absolute;
@ -333,20 +332,6 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
    padding-top: 10px;
  }*/
 }
-
-::ng-deep .notice {
-  ol {
-    li {
-      list-style: decimal;
-      margin-bottom: 14px;
-      margin-left: 20px;
-      span {
-        color: #ff5722;
-      }
-    }
-  }
-}
-
@media all and (max-width: 1400px) {
  .slider {
    &_content {
--- a/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.ts
@ -168,7 +168,7 @@ export class LoginPageComponent implements OnInit, OnDestroy {
                AlertDialogData,
                AlertDialogResult
              >(AlertDialogComponent, {
-                width: '360px',
+                panelClass: 'miniSize-dialog',
                data: {
                  title: '',
                  html: this.translateService.instant(
@ -184,7 +184,7 @@ export class LoginPageComponent implements OnInit, OnDestroy {
                AlertDialogData,
                AlertDialogResult
              >(AlertDialogComponent, {
-                width: '360px',
+                panelClass: 'miniSize-dialog',
                data: {
                  title: '',
                  html: this.translateService.instant(
@ -234,7 +234,7 @@ export class LoginPageComponent implements OnInit, OnDestroy {
                AlertDialogData,
                AlertDialogResult
              >(AlertDialogComponent, {
-                width: '360px',
+                panelClass: 'miniSize-dialog',
                data: {
                  title: '',
                  html: this.translateService.instant(
@ -256,7 +256,7 @@ export class LoginPageComponent implements OnInit, OnDestroy {
                AlertDialogData,
                AlertDialogResult
              >(AlertDialogComponent, {
-                width: '360px',
+                panelClass: 'miniSize-dialog',
                data: {
                  title: this.translateService.instant(
                    'accounts.errors.loginFailed'
@ -298,7 +298,7 @@ export class LoginPageComponent implements OnInit, OnDestroy {
        AlertDialogData,
        AlertDialogResult
      >(AlertDialogComponent, {
-        width: '360px',
+        panelClass: 'miniSize-dialog',
        data: {
          title: '',
          html: msg
@ -381,7 +381,7 @@ export class LoginPageComponent implements OnInit, OnDestroy {
                  AlertDialogData,
                  AlertDialogResult
                >(AlertDialogComponent, {
-                  width: '360px',
+                  panelClass: 'miniSize-dialog',
                  data: {
                    title: this.translateService.instant(
                      'accounts.errors.loginFailed'
@ -402,7 +402,7 @@ export class LoginPageComponent implements OnInit, OnDestroy {
                AlertDialogData,
                AlertDialogResult
              >(AlertDialogComponent, {
-                width: '360px',
+                panelClass: 'miniSize-dialog',
                data: {
                  title: this.translateService.instant(
                    'accounts.errors.loginFailed'
@ -442,6 +442,8 @@ export class LoginPageComponent implements OnInit, OnDestroy {
      NoticeDialogResult
    >(NoticeDialogComponent, {
      width: '600px',
+      height: '540px',
+      panelClass: 'notice-dialog',
      data: {
        title: '이용시 주의사항',
        html: `
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
@ -353,6 +353,8 @@ export class MainPageComponent implements OnInit, OnDestroy {
              ProfileDialogData,
              ProfileDialogResult
            >(ProfileDialogComponent, {
+              maxWidth: '90vw',
+              height: '500px',
              data: {
                userInfo: res.userInfo,
                openProfileOptions: params.openProfileOptions
@ -389,7 +391,7 @@ export class MainPageComponent implements OnInit, OnDestroy {
        ConfirmDialogData,
        ConfirmDialogResult
      >(ConfirmDialogComponent, {
-        width: '360px',
+        panelClass: 'miniSize-dialog',
        data: {
          title: this.translateService.instant('call.callTo'),
          html: this.translateService.instant('call.callWithNumber', {
--- a/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
@ -283,6 +283,7 @@ export class Effects {
            ConfirmDialogData,
            ConfirmDialogResult
          >(ConfirmDialogComponent, {
+            panelClass: 'miniSize-dialog',
            data: {
              title: this.translateService.instant('accounts.logout'),
              message: this.translateService.instant('accounts.confirmLogout')
@ -334,8 +335,6 @@ export class Effects {
              ConfirmDialogData,
              ConfirmDialogResult
            >(ConfirmDialogComponent, {
-              width: '100%',
-              height: '500px',
              disableClose: true,
              data: {
                title: this.translateService.instant(
@ -365,8 +364,6 @@ export class Effects {
              ConfirmDialogData,
              ConfirmDialogResult
            >(ConfirmDialogComponent, {
-              width: '100%',
-              height: '500px',
              disableClose: true,
              data: {
                title: this.translateService.instant('accounts.resetPassword'),
@ -526,7 +523,7 @@ export class Effects {
            AlertDialogData,
            AlertDialogResult
          >(AlertDialogComponent, {
-            width: '360px',
+            panelClass: 'miniSize-dialog',
            disableClose: true,
            data: {
              title: this.translateService.instant('accounts.changePassword'),
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
@ -371,7 +371,7 @@ export class Effects {
                            AlertDialogData,
                            AlertDialogResult
                          >(AlertDialogComponent, {
-                            width: '360px',
+                            panelClass: 'miniSize-dialog',
                            disableClose: true,
                            data: {
                              title: '',
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/settings/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/effects.ts
@ -43,10 +43,8 @@ export class Effects {
              MessengerSettingsDialogData,
              MessengerSettingsDialogResult
            >(MessengerSettingsDialogComponent, {
-              width: '800px',
              maxWidth: '94vw',
              maxHeight: '90vh',
-              minHeight: '500px',
              disableClose: false,
              data: {}
            });
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@ -540,6 +540,16 @@ $daesang-grey: (
      }
    }
  }
+
+  .mat-calendar {
+    mat-calendar-header {
+      .mat-calendar-header {
+        .mat-calendar-controls {
+          margin: 0;
+        }
+      }
+    }
+  }
  .mat-calendar-body-selected {
    background-color: mat-color($accent);
  }
--- a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.scss
+++ b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.scss
@ -2,12 +2,13 @@
  width: 100%;
  height: 100%;
  form {
-    height: 400px;
+    height: calc(100% - 100px);
    perfect-scrollbar {
      .ps--active-x > .ps__rail-x {
        display: none;
      }
      .write-form {
+        height: 100%;
        padding-right: 10px;
      }
    }
@ -56,6 +57,8 @@
  flex-flow: row;
  position: relative;
  width: 100%;
+  min-height: calc(100% - 150px);
+  margin-top: 10px;
  .message-receiver-list {
    position: relative;
    width: 30%;
@ -64,15 +67,15 @@
  }
  .message-write-body {
    display: flex;
-    flex: 1 1 auto;
+    flex: 1 1 100%;
    flex-flow: column;
    margin: 0;
+    height: auto;
    .ucap-message-write-editor {
      display: inline-block;
      width: 100%;
      height: 100%;
      padding: 10px;
-      min-height: 250px;
      border: 1px solid #dddddd;
      word-break: break-all;
    }
--- a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.ts
+++ b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.ts
@ -372,7 +372,7 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit {
      ScheduleSendDialogResult
    >(ScheduleSendDialogComponent, {
      width: '600px',
-      height: '600px',
+      height: '560px',
      disableClose: true,
      data: {
        reservationDate
--- a/projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.html
+++ b/projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.html
@ -6,7 +6,7 @@
  </mat-card-header>
  <mat-card-content>
    <div fxLayout="row">
-      <div fxFlex="60%">
+      <div flFlex="0 0 100%" style="width:50%;">
        <div fxLayout="column">
          <div fxFlexFill>
            <ucap-pick-date
@ -101,31 +101,31 @@
        </div>
      </div>
    </div>
-  </mat-card-content>
-  <mat-card-actions>
-    <div class="actions-container">
-      <div class="actions-message text-warn-color">
-        <span *ngIf="dateIsToEarly">
-          {{ 'message.errors.minTimeReservation' | translate }}
-        </span>
-      </div>
-      <div class="actions">
-        <button
-          mat-stroked-button
-          (click)="onClickCancel()"
-          class="mat-primary"
-        >
-          {{ 'common.messages.cancel' | translate }}
-        </button>
-        <button
-          mat-flat-button
-          [disabled]="dateIsToEarly"
-          (click)="onClickSend()"
-          class="mat-primary"
-        >
-          {{ 'message.sendReservation' | translate }}
-        </button>
-      </div>
+    <div class="actions-message text-warn-color">
+      <span *ngIf="dateIsToEarly">
+        {{ 'message.errors.minTimeReservation' | translate }}
+      </span>
    </div>
-  </mat-card-actions>
+    <mat-card-actions>
+      <div class="actions-container">
+        <div class="actions">
+          <button
+            mat-stroked-button
+            (click)="onClickCancel()"
+            class="mat-primary"
+          >
+            {{ 'common.messages.cancel' | translate }}
+          </button>
+          <button
+            mat-flat-button
+            [disabled]="dateIsToEarly"
+            (click)="onClickSend()"
+            class="mat-primary"
+          >
+            {{ 'message.sendReservation' | translate }}
+          </button>
+        </div>
+      </div>
+    </mat-card-actions>
+  </mat-card-content>
 </mat-card>
--- a/projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.scss
+++ b/projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.scss
@ -8,6 +8,7 @@

  .actions-message {
    font-size: 0.9em;
+    height: 30px;
  }

  .actions-spacer {
@ -36,6 +37,10 @@
 }

 .Reservation-dete {
-  margin-top: 30px;
+  margin-top: 10px;
  font-size: 1.6em;
 }
+
+.actions-message {
+  height: 30px;
+}
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.scss
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.scss
@ -33,7 +33,6 @@ $login-max-height: 800px;

 .mat-card.profile {
  display: flex;
-  min-width: 600px;
  flex-flow: row;
  flex: 0 0 auto;
  width: 100%;
@ -228,7 +227,8 @@ $login-max-height: 800px;
  }
 }

-/*.btn-elephant {
+/* 프로필사진 옆에 보여줄때
+.btn-elephant {
  position: absolute;
  background-color: #ffffff !important;
  justify-content: center;
--- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_dialogs.scss
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_dialogs.scss
@ -63,6 +63,10 @@
      color: #444444;
    }
  }
+  .mat-card-content {
+    position: relative;
+    height: calc(100% - 50px);
+  }
  .button-form {
    text-align: right;
    .mat-primary {
@ -70,3 +74,56 @@
    }
  }
 }
+
+//기본 다이얼로그
+.cdk-overlay-pane {
+  max-width: 90vw;
+  max-height: 94vh;
+  .mat-dialog-container {
+    position: relative;
+    width: 800px;
+    height: 90vh;
+    @media screen and (max-width: 1000px) {
+      width: 800px;
+      height: 90vh;
+    }
+    @media screen and (max-width: 800px) {
+      width: 90vw;
+      height: 94vh;
+    }
+    & > .mat-card {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+//통합검색
+.fullSize-dialog {
+  width: 90vw;
+  height: 94vh;
+  .mat-dialog-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+//confirm-dialog
+.miniSize-dialog {
+  width: 400px;
+  height: 260px;
+  .mat-dialog-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+//viwer-dialog
+.app-dialog-full {
+  .mat-dialog-container {
+    width: 100%;
+    height: 100%;
+  }
+}
--- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_scrollbars.scss
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_scrollbars.scss
@ -20,3 +20,10 @@ body:not(.is-mobile) {
    border-radius: 12px;
  }
 }
+perfect-scrollbar {
+  .ps-content {
+    position: inherit;
+    width: inherit;
+    height: inherit;
+  }
+}
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
@ -110,6 +110,7 @@
        <line x1="8" y1="11" x2="14" y2="11"></line>
      </svg>
    </button>
+    <!--
    <button
      *ngIf="!imageOnly"
      mat-icon-button
@ -119,7 +120,6 @@
      aria-label=""
      (click)="onClickDownload()"
    >
-      <!--<mat-icon>get_app</mat-icon>-->
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="21"
@ -136,6 +136,8 @@
        />
      </svg>
    </button>
+  -->
+    <!--
    <button
      *ngIf="!imageOnly"
      mat-icon-button
@ -145,7 +147,7 @@
      aria-label=""
      (click)="onClickSaveAs()"
    >
-      <!--<mat-icon>get_app</mat-icon>-->
+
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="21"
@ -162,6 +164,58 @@
        />
      </svg>
    </button>
+  -->
+
+    <button
+      *ngIf="!imageOnly"
+      mat-icon-button
+      class="ucap-image-viewer-action"
+      matTooltip="{{ 'common.file.download' | translate }}"
+      matTooltipPosition="below"
+      aria-label=""
+      (click)="onClickDownload()"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 19.01"
+        width="20"
+        height="20"
+        fill="currentColor"
+      >
+        <polygon
+          points="12.01 9 11.96 0 7.96 0.02 8.01 9.02 3.01 9.05 10.04 15.01 17.01 8.97 12.01 9"
+        />
+        <rect y="17.01" width="20" height="2" />
+      </svg>
+    </button>
+
+    <button
+      *ngIf="!imageOnly"
+      mat-icon-button
+      class="ucap-image-viewer-action"
+      matTooltip="{{ 'common.file.saveAs' | translate }}"
+      matTooltipPosition="below"
+      aria-label=""
+      (click)="onClickSaveAs()"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="24"
+        height="24"
+        fill="currentColor"
+      >
+        <path
+          d="M10.2,18.6l0.7,2.9l2.9-0.7l6.3-10.6l-3.5-2.2L10.2,18.6z M21.4,6.4L19.3,5c-0.2-0.1-0.4-0.1-0.6-0.1
+          c-0.2,0-0.3,0.2-0.5,0.3l-1,1.7l3.5,2.2l1.1-1.8C22,7,21.9,6.6,21.4,6.4z"
+        />
+        <g>
+          <polygon class="st0" points="7.1,15.4 12.9,10.4 1.4,10.4 	" />
+          <rect x="5.5" y="2.9" class="st0" width="3.3" height="7.5" />
+        </g>
+        <rect x="1.4" y="16.6" class="st0" width="8.2" height="2" />
+      </svg>
+    </button>
    <span class="stroke-bar"></span>
    <button
      mat-icon-button
--- a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html
@ -1,4 +1,4 @@
-<div fxLayout="column" fxFlex="1 1 auto" class="rightDrawer-notice">
+<div fxLayout="column" fxFlex="1 1 auto" class="integrated-search-frame">
  <div class="search-area">
    <ucap-integrated-search-form
      [searchWord]="!!searchWord ? searchWord : ''"
--- a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.scss
@ -54,6 +54,7 @@
  width: 100%;
  overflow: hidden;
  display: flex;
+  height: calc(100% - 160px);
  table {
    table-layout: fixed;
    width: 100%;
--- a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html
@ -14,17 +14,17 @@
    <div #messageContainer class="notice">
      {{ data.message }}
    </div>
+    <mat-card-actions *ngIf="!hideAction" class="button-form flex-row">
+      <button
+        mat-stroked-button
+        (click)="onClickChoice(false)"
+        class="mat-primary"
+      >
+        {{ 'common.messages.no' | translate }}
+      </button>
+      <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
+        {{ 'common.messages.yes' | translate }}
+      </button>
+    </mat-card-actions>
  </mat-card-content>
-  <mat-card-actions *ngIf="!hideAction" class="button-form flex-row">
-    <button
-      mat-stroked-button
-      (click)="onClickChoice(false)"
-      class="mat-primary"
-    >
-      {{ 'common.messages.no' | translate }}
-    </button>
-    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
-      {{ 'common.messages.yes' | translate }}
-    </button>
-  </mat-card-actions>
 </mat-card>
--- a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss
@ -1,18 +1,27 @@
-.mat-card-header {
-  .mat-card-header-text {
-    margin: 0;
-  }
-  .btn-dialog-close {
-    font-size: 20px;
-    display: flex;
-    margin-left: auto;
-    align-self: flex-start;
-    color: #444444;
-  }
-}
+.confirm-card {
+  width: 100%;
+  height: 100%;

-form {
-  .mat-form-field {
-    width: 100%;
+  .mat-card-header {
+    .mat-card-header-text {
+      margin: 0;
+    }
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
+    }
+  }
+  .mat-card-content {
+    display: flex;
+    flex-flow: column;
+    .mat-card-actions {
+      display: flex;
+      align-self: flex-end;
+      flex-flow: row;
+      margin-top: auto;
+    }
  }
 }