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

2020-01-17 12:28:43 +09:00 · 2020-01-17 12:28:43 +09:00 · 3995f3ef01
commit 3995f3ef01
parent 9bc416cce3 660fce9dc6
40 changed files with 435 additions and 342 deletions
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "ucap-webmessenger",
-  "version": "0.0.5",
+  "version": "0.0.6",
  "author": {
    "name": "LG CNS",
    "email": "lgucap@lgcns.com"
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
@ -16,7 +16,6 @@
 .left-side-tabs-body {
  position: relative;
  height: 100%;
-  width: calc(100% - 60px);
  div[id^='tabs'] {
    height: 100%;
    width: 100%;
@ -31,7 +30,6 @@

 .mat-tab-group {
  display: flex;
-  width: 60px;
  flex-direction: row;
 }

--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
@ -10,7 +10,7 @@
      </button> -->
    </div>
  </div>
-  <div class="list-search">
+  <div class="list-search-frame">
    <div class="searchbox">
      <form [formGroup]="fgSearch" class="w-100-p">
        <mat-form-field floatLabel="never">
@ -65,7 +65,7 @@
  </perfect-scrollbar>
  <!-- <cdk-virtual-scroll-viewport
    #cvsvChatList
-    itemSize="80"
+    itemSize="60"
    perfectScrollbar
    fxFlexFill
  >
@ -96,7 +96,7 @@
    </ucap-room-list-item>
  </perfect-scrollbar>
  <!-- <cdk-virtual-scroll-viewport
-    itemSize="20"
+    itemSize="60"
    class="app-layout-chat-left-sidenav-chat-list-viewport"
  >
    <ucap-room-list-item
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
@ -13,63 +13,13 @@
  }
 }

-.list-search {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0;
-  font-size: 14px;
-  background-color: #f9f9f9;
-  border-bottom: 1px solid #dddddd;
-  .searchbox {
-    width: 100%;
-    height: 100%;
-  }
-}
-::ng-deep .searchbox {
-  .mat-form-field {
-    display: block;
-    .mat-form-field-wrapper {
-      padding: 0;
-      padding-bottom: 0 !important;
-      height: 100%;
-      .mat-form-field-flex {
-        height: 59px;
-        padding: 0 10px 0 20px;
-        align-items: center;
-        .mat-form-field-infix {
-          width: 100%;
-          font-size: 14px;
-          border: none;
-          min-height: 20px;
-        }
-        .mat-form-field-suffix {
-          .mat-icon {
-            line-height: 24px;
-          }
-        }
-      }
-    }
-  }
-  .mat-form-field-appearance-legacy {
-    .mat-form-field-wrapper {
-      padding: 0;
-    }
-    .mat-form-field-underline {
-      bottom: 0;
-      background-color: unset !important;
-    }
-  }
-}
-
 .app-layout-chat-left-sidenav-chat-header {
  width: 100%;
  height: 50px;
 }

 .app-layout-chat-left-sidenav-chat-list {
-  height: calc(100% - 120px);
+  //height: calc(100% - 120px);
  position: relative;
 }

--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss
@ -18,7 +18,7 @@
 }

 .search-result {
-  height: calc(100% - 130px);
+  //height: calc(100% - 130px);
  overflow: auto;
  .result-num {
    padding: 10px;
--- 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
@ -10,7 +10,7 @@
      </button> -->
    </div>
  </div>
-  <div class="list-search">
+  <div class="list-search-frame">
    <div class="searchbox">
      <form [formGroup]="fgSearch" class="w-100-p">
        <mat-form-field floatLabel="never">
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss
@ -16,55 +16,6 @@
    align-items: center;
  }
 }
-
-.list-search {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0;
-  font-size: 14px;
-  background-color: #f9f9f9;
-  border-bottom: 1px solid #dddddd;
-  .searchbox {
-    width: 100%;
-    height: 100%;
-  }
-}
-::ng-deep .searchbox {
-  .mat-form-field {
-    display: block;
-    .mat-form-field-wrapper {
-      padding: 0;
-      padding-bottom: 0 !important;
-      height: 100%;
-      .mat-form-field-flex {
-        height: 59px;
-        padding: 0 10px 0 20px;
-        align-items: center;
-        .mat-form-field-infix {
-          width: 90%;
-          font-size: 14px;
-          border: none;
-        }
-        .mat-form-field-suffix {
-          .mat-icon {
-            line-height: 24px;
-          }
-        }
-      }
-    }
-  }
-  .mat-form-field-appearance-legacy {
-    .mat-form-field-wrapper {
-      padding: 0;
-    }
-    .mat-form-field-underline {
-      bottom: 0;
-      background-color: unset !important;
-    }
-  }
-}
-
 .mat-tab-label-active {
  opacity: 1;
 }
@ -74,7 +25,7 @@
 ::ng-deep .message-box {
  .message-section {
    position: relative;
-    height: calc(100% - 120px);
+    //height: calc(100% - 120px);
    .message-tab {
      position: relative;
      height: 100%;
--- 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
@ -63,7 +63,7 @@
    </div>
    <div *ngIf="!isShowSearch" class="search-list">
      <cdk-virtual-scroll-viewport
-        itemSize="64"
+        itemSize="60"
        #cvsvDeptUser
        perfectScrollbar
        fxFlexFill
@ -89,7 +89,7 @@
    <div *ngIf="isShowSearch" class="search-result">
      <cdk-virtual-scroll-viewport
        #cvsvDeptSearchUser
-        itemSize="64"
+        itemSize="60"
        perfectScrollbar
        fxFlexFill
      >
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss
@ -16,15 +16,6 @@
 }

 .current-head {
-  /*display: flex;
-  justify-content: center;
-  padding: 0 10px;
-  height: 70px;
-  background-color: #eeeeee;
-  background: #f15f79;
-  background: -webkit-linear-gradient(to right, #352a37, #f15f79);
-  background: linear-gradient(to right, #352a37, #ef4c73);
-  color: #ffffff;*/
  h3 {
    display: inline-flex;
    padding-left: 10px;
@ -52,7 +43,7 @@
 }

 .oraganization-tab {
-  height: calc(100% - 120px);
+  // height: calc(100% - 120px);
  flex-direction: inherit;
  display: flex;
  .oraganization-tab-tree {
--- 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
@ -82,7 +82,7 @@
                  {{ roomInfoSubject.value.roomName }}
                </ng-template>
                <ng-template #roomNameNotExist>
-                  {{ _roomUserInfos | ucapTranslate: 'name':',' }}
+                  {{ getRoomNameByRoomUser(_roomUserInfos) }}
                </ng-template>
              </ng-container>
            </ng-container>
--- 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
@ -6,7 +6,8 @@ import {
  AfterViewInit,
  Output,
  EventEmitter,
-  Inject
+  Inject,
+  ChangeDetectorRef
 } from '@angular/core';
 import {
  ucapAnimations,
@ -67,7 +68,12 @@ import {
  RightDrawer,
  KEY_STICKER_HISTORY
 } from '@app/types';
-import { RoomInfo, UserInfo, RoomType } from '@ucap-webmessenger/protocol-room';
+import {
+  RoomInfo,
+  UserInfo,
+  RoomType,
+  UserInfoShort
+} from '@ucap-webmessenger/protocol-room';
 import { tap, take, map, catchError, finalize } from 'rxjs/operators';
 import {
  FormComponent as UCapUiChatFormComponent,
@ -119,6 +125,8 @@ import {
 } from '../dialogs/chat/mass-detail.component';
 import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
 import { TranslateService } from '@ngx-translate/core';
+import { TranslatePipe } from 'projects/ucap-webmessenger-ui/src/lib/pipes/translate.pipe';
+import { TranslateService as UiTranslateService } from '@ucap-webmessenger/ui';

@Component({
  selector: 'app-layout-messenger-messages',
@ -223,7 +231,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
    private localStorageService: LocalStorageService,
    private commonApiService: CommonApiService,
    private clipboardService: ClipboardService,
+    private uiTranslateService: UiTranslateService,
    private translateService: TranslateService,
+    private changeDetectorRef: ChangeDetectorRef,
    private dialogService: DialogService,
    private snackBarService: SnackBarService,
    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
@ -461,6 +471,18 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
      .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
  }

+  getRoomNameByRoomUser(roomUserInfos: (UserInfo | UserInfoShort)[]) {
+    let roomName = new TranslatePipe(
+      this.uiTranslateService,
+      this.changeDetectorRef
+    ).transform(roomUserInfos, 'name', ',');
+
+    if (!roomName || roomName.trim().length === 0) {
+      roomName = this.translateService.instant('chat.noRoomUser');
+    }
+    return roomName;
+  }
+
  /** 대화전송 가능한 방인지 판단 */
  getEnableSend() {
    if (!this.roomInfoSubject.value) {
@ -1505,13 +1527,11 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
          });

          if (!!result && !!result.choice && result.choice) {
-            const userSeqs: number[] = this.userInfoListSubject.value.map(
-              userInfo => {
-                if (userInfo.isJoinRoom) {
-                  return userInfo.seq;
-                }
-              }
-            );
+            // include me here..
+            const userSeqs: number[] = this.userInfoListSubject.value
+              .filter(userInfo => userInfo.isJoinRoom)
+              .map(userInfo => userInfo.seq);
+
            if (
              !!result.selectedUserList &&
              result.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
@ -65,6 +65,7 @@
        />
        <video
          controls
+          controlsList="nodownload nofullscreen"
          *ngIf="selectedFile.info.type === FileType.Video"
          [src]="getImageUrl(selectedFile)"
          class="preview-video"
--- 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
@ -14,7 +14,7 @@ import * as AppStore from '@app/store';
 import * as SyncStore from '@app/store/messenger/sync';
 import * as RoomStore from '@app/store/messenger/room';

-import { UserInfo, RoomInfo } from '@ucap-webmessenger/protocol-room';
+import { UserInfo, RoomInfo, RoomType } from '@ucap-webmessenger/protocol-room';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import {
@ -154,11 +154,11 @@ export class RoomUserListComponent implements OnInit, OnDestroy {
    });

    if (!!result && !!result.choice && result.choice) {
-      const userSeqs: number[] = this.userInfoList.map(userInfo => {
-        if (userInfo.isJoinRoom) {
-          return userInfo.seq;
-        }
-      });
+      // include me here..
+      const userSeqs: number[] = this.userInfoList
+        .filter(userInfo => userInfo.isJoinRoom)
+        .map(userInfo => userInfo.seq);
+
      if (!!result.selectedUserList && result.selectedUserList.length > 0) {
        result.selectedUserList.forEach(user => {
          if (userSeqs.indexOf(user.seq) < 0) {
@ -168,9 +168,6 @@ export class RoomUserListComponent implements OnInit, OnDestroy {
      }

      if (userSeqs.length > 0) {
-        // include me
-        userSeqs.push(this.loginRes.userSeq);
-
        this.store.dispatch(
          RoomStore.inviteOrOpen({
            req: {
@ -220,6 +217,9 @@ export class RoomUserListComponent implements OnInit, OnDestroy {
    event.preventDefault();
    event.stopPropagation();

+    if (this.roomInfo.roomType !== RoomType.Multi) {
+      return;
+    }
    if (buddy.seq === this.loginRes.userSeq) {
      return;
    }
--- 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
@ -424,7 +424,7 @@ export class MessageDetailDialogComponent implements OnInit {
                    // single :: success
                    this.snackBarService.open(
                      this.translateService.instant(
-                        'common.file.errors.savedToPath',
+                        'common.file.results.savedToPath',
                        { path: attachFile.downloadType }
                      ),
                      '',
@ -437,7 +437,7 @@ export class MessageDetailDialogComponent implements OnInit {
                    // all
                    this.snackBarService.open(
                      this.translateService.instant(
-                        'common.file.errors.savedAll'
+                        'common.file.results.savedAll'
                      ),
                      '',
                      {
--- 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
@ -22,7 +22,7 @@
  <mat-card-content>
    <div class="item-list">
      <cdk-virtual-scroll-viewport
-        itemSize="64"
+        itemSize="60"
        #cvsvDeptUser
        perfectScrollbar
        fxFlexFill
--- 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
@ -2,17 +2,13 @@
  .app-layout-native-title-bar {
    -webkit-user-select: none;
    -webkit-app-region: drag;
-
    position: fixed;
    right: 0;
    top: 0;
    display: flex;
    padding: 0 10px;
    cursor: pointer;
-    height: 60px;
    color: #ffffff;
-    //background: rgba(37, 27, 30, 0.9);
-    //border-bottom: 1px solid #d5dadb;

    .app-layout-native-title-bar-logo {
      width: 32px;
--- 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
@ -33,6 +33,7 @@ import { AppUserInfo, KEY_APP_USER_INFO } from '@app/types/app-user-info.type';
 import { LogoutInfo, KEY_LOGOUT_INFO } from '@app/types';
 import { AppAuthenticationService } from '@app/services/authentication.service';
 import { logoutInitialize } from '@app/store/account/authentication';
+import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-page-account-login',
@ -85,6 +86,7 @@ export class LoginPageComponent implements OnInit, OnDestroy {
  constructor(
    private store: Store<any>,
    private router: Router,
+    private translateService: TranslateService,
    private dialogService: DialogService,
    private protocolService: ProtocolService,
    private localStorageService: LocalStorageService,
@ -114,7 +116,7 @@ export class LoginPageComponent implements OnInit, OnDestroy {
        (this.rotateInfomationIndex + 1) % this.rotateInfomation.length;
    }, 8000);

-    this.defatulLoginBtnText = 'LOGIN';
+    this.defatulLoginBtnText = this.translateService.instant('accounts.login');
    this.defatulWaitingTime = 5 * 60; // sec

    this.store.dispatch(
@ -140,8 +142,10 @@ export class LoginPageComponent implements OnInit, OnDestroy {
              >(AlertDialogComponent, {
                width: '360px',
                data: {
-                  title: '로그인',
-                  html: `아이디 또는 패스워드가<br/>일치하지 않습니다.`
+                  title: '',
+                  html: this.translateService.instant(
+                    'accounts.errors.loginFail'
+                  )
                }
              });
            }
@ -154,8 +158,10 @@ export class LoginPageComponent implements OnInit, OnDestroy {
              >(AlertDialogComponent, {
                width: '360px',
                data: {
-                  title: '로그인',
-                  html: `비밀번호 오류 횟수 초과입니다.<br/>비밀번호를 확인하신 후<br/>잠시 후 다시 시작해 주세요.`
+                  title: '',
+                  html: this.translateService.instant(
+                    'accounts.errors.loginFailOverTry'
+                  )
                }
              });

@ -182,11 +188,26 @@ export class LoginPageComponent implements OnInit, OnDestroy {
      KEY_LOGOUT_INFO
    );

-    if (
-      !!personLogout &&
-      !!personLogout.reasonCode &&
-      personLogout.reasonCode === ServerErrorCode.ERRCD_DUPLICATE
-    ) {
+    if (!!personLogout && !!personLogout.reasonCode) {
+      let msg = this.translateService.instant('accounts.results.doLogout');
+      switch (personLogout.reasonCode) {
+        case ServerErrorCode.ERRCD_DUPLICATE:
+          msg = this.translateService.instant(
+            'accounts.results.doLogoutDuplicate',
+            {
+              ip: personLogout.ip,
+              mac: personLogout.mac
+            }
+          );
+
+          break;
+        case ServerErrorCode.ERRCD_FORCE_INIT:
+          msg = this.translateService.instant(
+            'accounts.results.doLogoutByOthers'
+          );
+          break;
+      }
+
      const result = this.dialogService.open<
        AlertDialogComponent,
        AlertDialogData,
@ -195,7 +216,7 @@ export class LoginPageComponent implements OnInit, OnDestroy {
        width: '360px',
        data: {
          title: '',
-          html: `다른 디바이스에서 로그인하였습니다.<br/> * Ip : ${personLogout.ip}<br/> * Mac : ${personLogout.mac}`
+          html: msg
        }
      });

@ -206,7 +227,9 @@ export class LoginPageComponent implements OnInit, OnDestroy {

    // Daesang..
    this.fixedCompany = environment.companyConfig.fixedCompanyCode;
-    this.fixedNotiBtnText = '이용 주의사항';
+    this.fixedNotiBtnText = this.translateService.instant(
+      'accounts.usageNotes'
+    );
  }

  ngOnDestroy(): void {
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
@ -2,7 +2,6 @@
  height: 100%;
  display: flex;
  flex-flow: row;
-  padding-top: 57px;
  border-top: none;
  .split-area {
    overflow: hidden;
--- a/projects/ucap-webmessenger-app/src/app/services/authentication.service.ts
+++ b/projects/ucap-webmessenger-app/src/app/services/authentication.service.ts
@ -110,5 +110,27 @@ export class AppAuthenticationService {
    this.sessionStorageService.remove(KEY_LOGIN_INFO);
    this.sessionStorageService.remove(KEY_URL_INFO);
    this.sessionStorageService.remove(KEY_AUTH_INFO);
+
+    let appUserInfo = this.localStorageService.encGet<AppUserInfo>(
+      KEY_APP_USER_INFO,
+      environment.customConfig.appKey
+    );
+
+    appUserInfo = {
+      ...appUserInfo,
+      settings: {
+       ...appUserInfo.settings,
+       general: {
+         ...appUserInfo.settings.general,
+         autoLogin: false
+       }
+      }
+    };
+
+    this.localStorageService.encSet<AppUserInfo>(
+      KEY_APP_USER_INFO,
+      appUserInfo,
+      environment.customConfig.appKey
+    );
  }
 }
--- a/projects/ucap-webmessenger-app/src/app/services/notification.service.ts
+++ b/projects/ucap-webmessenger-app/src/app/services/notification.service.ts
@ -113,6 +113,7 @@ import { MessageType } from '@ucap-webmessenger/api-message';
 import { LogoutInfo, KEY_LOGOUT_INFO } from '@app/types';
 import { TranslateService } from '@ngx-translate/core';
 import { deleteMessageSuccess } from '@app/store/messenger/message';
+import { ServerErrorCode } from '@ucap-webmessenger/protocol';

@Injectable()
 export class AppNotificationService {
@ -161,6 +162,12 @@ export class AppNotificationService {
                  'Notification::authenticationProtocolService::LogoutRemoteNotification',
                  noti
                );
+
+                this.sessionStorageService.set<LogoutInfo>(KEY_LOGOUT_INFO, {
+                  personLogout: true,
+                  reasonCode: ServerErrorCode.ERRCD_FORCE_INIT,
+                  forceType: noti.requestDeviceType
+                } as LogoutInfo);
              }
              break;
            default:
--- a/projects/ucap-webmessenger-app/src/app/types/logout-info.type.ts
+++ b/projects/ucap-webmessenger-app/src/app/types/logout-info.type.ts
@ -5,4 +5,5 @@ export interface LogoutInfo {
  reasonCode?: number;
  ip?: string;
  mac?: string;
+  forceType?: string;
 }
--- a/projects/ucap-webmessenger-app/src/assets/i18n/en.json
+++ b/projects/ucap-webmessenger-app/src/assets/i18n/en.json
@ -15,11 +15,15 @@
    "consentOfPrivacy": "Agreement of ",
    "changePassword": "Change password",
    "resetPassword": "Reset password",
+    "usageNotes": "Usage Notes",
    "passwordExpired": "Password expired",
    "descriptionOfPasswordExpired": "Password has expired.<br/>Please change your password and log in again.",
    "confirmLogout": "Do you want to log out?",
    "results": {
-      "changedPassword": "Password changed. Please log in again."
+      "changedPassword": "Password changed. Please log in again.",
+      "doLogout": "You have been logged out.",
+      "doLogoutDuplicate": "You logged in from another device.<br/> * Ip : {{ip}}<br/> * Mac : {{mac}}",
+      "doLogoutByOthers": "Forced logout by user."
    },
    "errors": {
      "requireLoginId": "Login ID is required.",
@ -38,7 +42,9 @@
      "notAllowedConsecutiveAlphaNumOver3TimesForPassword": "You cannot use consecutive numbers or letters more than 3 times.",
      "notSatisfiedCombineForPassword": "Combination of two or more kinds of letters, numbers and special characters.",
      "minLengthCombineForPassword": "Password must be {{lengthOfPassword}} characters if {{countOfCombine}} combination.",
-      "failToChangePassword": "Failed to change password."
+      "failToChangePassword": "Failed to change password.",
+      "loginFail": "Username or password do not match.",
+      "loginFailOverTry": "Password error count exceeded. <br/> Check your password <br/> Please try again later."
    }
  },
  "profile": {
@ -203,6 +209,7 @@
    "btnAttachFile": "Attach files",
    "btnSticker": "Sticker",
    "btnTranslate": "Translate",
+    "noRoomUser": "No chat users",
    "event": {
      "inviteToRoomWith": "{{owner}} invited {{inviter}}.",
      "exitFromRoomWith": "{{exitor}} has left.",
--- a/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
+++ b/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
@ -15,11 +15,15 @@
    "consentOfPrivacy": "개인정보 동의",
    "changePassword": "비밀번호 변경",
    "resetPassword": "비밀번호 초기화",
+    "usageNotes": "이용 주의사항",
    "passwordExpired": "비밀번호 만기",
    "descriptionOfPasswordExpired": "비밀번호가 만료되었습니다.<br/>비밀번호 변경 후 다시 로그인 하세요.",
    "confirmLogout": "로그아웃 하시겠습니까?",
    "results": {
-      "changedPassword": "비밀번호가 변경되었습니다. 다시 로그인하여 주십시오"
+      "changedPassword": "비밀번호가 변경되었습니다. 다시 로그인하여 주십시오",
+      "doLogout": "로그아웃 되었습니다.",
+      "doLogoutDuplicate": "다른 디바이스에서 로그인하였습니다.<br/> * Ip : {{ip}}<br/> * Mac : {{mac}}",
+      "doLogoutByOthers": "사용자에 의해 강제로그아웃 하였습니다."
    },
    "errors": {
      "requireLoginId": "로그인 아이디를 입력해 주세요.",
@ -38,7 +42,9 @@
      "notAllowedConsecutiveAlphaNumOver3TimesForPassword": "연속되는 숫자나 문자를 3번이상 사용할 수 없습니다",
      "notSatisfiedCombineForPassword": "문자, 숫자, 특수문자 중 2종류 이상 조합을 해야 합니다",
      "minLengthCombineForPassword": "비밀번호는 {{countOfCombine}}가지가 조합된 경우 {{lengthOfPassword}}자를 넘어야 합니다",
-      "failToChangePassword": "비밀번호 변경에 실패하였습니다."
+      "failToChangePassword": "비밀번호 변경에 실패하였습니다.",
+      "loginFail": "아이디 또는 패스워드가<br/>일치하지 않습니다.",
+      "loginFailOverTry": "비밀번호 오류 횟수 초과입니다.<br/>비밀번호를 확인하신 후<br/>잠시 후 다시 시작해 주세요."
    }
  },
  "profile": {
@ -203,6 +209,7 @@
    "btnAttachFile": "첨부파일",
    "btnSticker": "스티커",
    "btnTranslate": "번역",
+    "noRoomUser": "대화상대 없음",
    "event": {
      "inviteToRoomWith": "{{owner}}이 {{inviter}}을 초대했습니다.",
      "exitFromRoomWith": "{{exitor}}님이 퇴장하셨습니다.",
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@ -16,7 +16,7 @@ body {
  color: #333;
  font-family: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움',
    Gulim, '굴림';
-  font-size: 13px;
+  font-size: 14px;
  line-height: 18px !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
@ -259,7 +259,7 @@ $daesang-grey: (
    background-color: mat-color($accent, B100);
  }
  .main-container {
-    border: 3px solid mat-color($accent, B100);
+    border-color: mat-color($accent, B100);
  }
  .global-menu {
    background-color: mat-color($accent, B100);
@ -337,7 +337,6 @@ $daesang-grey: (
    display: flex;
    justify-content: center;
    padding: 0 10px;
-    height: 60px;
    background-color: #eeeeee;
    background: $gradient-light;
    background: -webkit-linear-gradient(
@ -349,10 +348,6 @@ $daesang-grey: (
    color: #ffffff;
  }

-  .list-search{
-    height:60px;
-  }
-
  mat-tab-group[vertical] {
    display: flex;
    flex-direction: row;
--- a/projects/ucap-webmessenger-protocol-authentication/src/lib/protocols/logout-remote.ts
+++ b/projects/ucap-webmessenger-protocol-authentication/src/lib/protocols/logout-remote.ts
@ -46,8 +46,10 @@ export const decodeLogoutRemote: ProtocolDecoder<LogoutRemoteResponse> = (
  } as LogoutRemoteResponse);
 };

-export const decodeLogoutRemoteNotification: ProtocolDecoder<
-  LogoutRemoteNotification
-> = (message: ProtocolMessage) => {
-  return { requestDeviceType: message.bodyList[0] } as LogoutRemoteNotification;
+export const decodeLogoutRemoteNotification: ProtocolDecoder<LogoutRemoteNotification> = (
+  message: ProtocolMessage
+) => {
+  return decodeProtocolMessage(message, {
+    requestDeviceType: message.bodyList[0]
+  } as LogoutRemoteNotification);
 };
--- 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
@ -1,6 +1,6 @@
 <cdk-virtual-scroll-viewport
  #cvsvGroup
-  itemSize="64"
+  itemSize="60"
  perfectScrollbar
  fxFlexFill
 >
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
@ -13,8 +13,6 @@

 .tree-node-frame {
  border-bottom: 1px solid #dddddd;
-  height: 64px;
-
  .tree-node-header {
    position: relative;
    width: 100%;
--- a/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html
+++ b/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html
@ -57,7 +57,7 @@
        *ngIf="!!message.resType && message.resType === ContentType.AttachFile"
        >attach_file</mat-icon
      >
-      {{ message.title }}
+      <span class="final-message">{{ message.title }}</span>
    </dd>
  </dl>
  <div class="date">
--- a/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.scss
+++ b/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.scss
@ -1,13 +1,13 @@
 .message-list {
  &.list-item {
    dl {
+      position: relative;
      display: flex;
      flex-flow: column;
      flex: 1 1 auto;
-      width: calc(100% - 80px);
+      width: calc(100% - 90px);
      dt {
        .name {
-          font-size: 1.1em;
          overflow: hidden;
          text-overflow: ellipsis;
          display: block;
@ -22,21 +22,21 @@
      }

      dd {
-        color: #777777;
-        white-space: nowrap;
-        word-wrap: normal;
-        text-overflow: ellipsis;
-        display: block;
+        display: flex;
        width: 100%;
        position: relative;
-        overflow: hidden;
-        font-size: 0.9em;
+        justify-items: center;
+        .final-message {
+          white-space: nowrap;
+          word-wrap: normal;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
      }
    }
    .date {
      display: flex;
      flex-flow: column;
-      font-size: 0.9em;
      height: 40px;
      .noti-new {
        border-radius: 50%;
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html
@ -1,4 +1,4 @@
-<div class="list-search">
+<div class="list-search-frame">
  <div class="selectbox">
    <!--<mat-label>회사선택</mat-label>-->
    <mat-select [(value)]="companyCode">
@ -30,16 +30,3 @@
    </mat-form-field>
  </div>
 </div>
-<!--검색창만 있는 경우--------------------------------------------------------------------------
-<div class="list-search">
-  <div class="searchbox">
-    <input
-      matInput
-      #searchWordInput
-      placeholder="name"
-      (keydown.enter)="onKeyDownEnter(searchWordInput.value)"
-    />
-    <div class="btn-search"><i class="material-icons">search</i></div>
-  </div>
-</div>
-->
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss
@ -11,55 +11,3 @@
    display: none;
  }
 }
-
-.list-search {
-  display: flex;
-  flex-direction: row;
-  position: relative;
-  height: 60px;
-  align-items: center;
-  padding: 0 10px 0 20px;
-  font-size: 14px;
-  background-color: #f9f9f9;
-  border-bottom: 1px solid #dddddd;
-  .selectbox {
-    display: inline-flex;
-    width: 38%;
-    margin-right: 2%;
-  }
-  .searchbox {
-    width: 60%;
-    display: flex;
-    input {
-      display: inline-flex;
-      width: 100%;
-      font-size: 14px;
-      padding-left: 0;
-      &:focus {
-        & + .mat-form-field-label-wrapper {
-          .mat-form-field-appearance-legacy {
-            .mat-form-field-label {
-              color: red;
-            }
-          }
-        }
-      }
-    }
-    .btn-search {
-      color: #777777;
-      font-size: 12px;
-      display: inline-flex;
-      margin-left: auto;
-      flex: none;
-    }
-  }
-}
-.selectbox {
-  display: inline-flex;
-  width: 45%;
-  margin-right: 1%;
-}
-+ .searchbox {
-  width: 54%;
-  display: inline-flex;
-}
--- 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
@ -16,22 +16,22 @@
      </div>
      <span
        *ngIf="getPresence(PresenceType.MOBILE) === 'mobileOn'"
-        class="text-accent-color badge-mobile-state"
+        class="text-accent-color marker-mobile-state"
      >
        <mat-icon>phone_android</mat-icon>
      </span>
    </dt>
    <dd class="info">
-      <div class="detail">
-        <div class="user-info">
+      <div class="user-info">
+        <div class="user">
          <span
            *ngIf="getWorkstatusInfo('text').length > 0"
            class="work-status"
            [ngClass]="getWorkstatusInfo('style')"
            >{{ getWorkstatusInfo('text') }}</span
          >
-          <span class="name">
-            <b>{{ userInfo | ucapTranslate: 'name' }}</b>
+          <span class="detail">
+            <b class="name">{{ userInfo | ucapTranslate: 'name' }}</b>
            <span class="grade">{{ userInfo | ucapTranslate: 'grade' }}</span>
          </span>
        </div>
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss
@ -48,16 +48,6 @@ $thumbnail-msize: 40px;
  border-radius: 4px;
 }

-/*.list-item {
-  @extend %list-item;
-  &:hover {
-    background-color: $bg-list-hover;
-  }
-  .mat-checkbox {
-    padding-left: 10px;
-  }
-}*/
-
 .item-default {
  display: flex;
  width: 100%;
@ -77,36 +67,29 @@ $thumbnail-msize: 40px;
    padding: 0;
    width: calc(100% - 50px);
    transform: translateY(2px);
-    .detail {
-      .user-info {
+    .user-info {
+      .user {
        display: flex;
        flex-flow: row;
        margin-bottom: 2px;
        .work-status {
-          margin-right: 4px;
-          border-radius: 4px;
-          padding: 0 6px;
-          color: #ffffff;
-          font-size: 0.9em;
-          width: 40px;
+          display: inline-flex;
+          justify-content: center;
          justify-items: center;
+          color: #ffffff;
          height: 100%;
+          min-width: 32px;
+          margin-right: 4px;
+          border-radius: 24px;
+          flex: 0 0 auto;
        }
-        .name {
-          margin-bottom: 2px;
+        .detail {
          color: $font-dark;
          width: calc(100% - 40px);
          @include ellipsis(1);
-          b {
-            font-weight: 600;
-          }
-          .grade {
-            font-size: 0.9em;
-          }
        }
      }
      .dept {
-        font-size: 0.9em;
        color: $font-mid;
        @include ellipsis(1);
      }
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
@ -10,7 +10,7 @@
          [default]="defaultPath"
        />
      </div>
-      <span *ngIf="roomInfo.isTimeRoom" class="text-warn-color badge-timer">
+      <span *ngIf="roomInfo.isTimeRoom" class="text-warn-color marker-timer">
        <mat-icon>timer</mat-icon>
      </span>
      <!-- <div style="position: relative;">
@ -24,8 +24,8 @@
      </div> -->
    </dt>
    <dd class="info">
-      <div class="detail">
-        <div class="room-name">
+      <div class="room-info">
+        <div class="detail">
          <div class="name">
            <ng-container [ngSwitch]="roomInfo.roomType">
              <ng-container *ngSwitchCase="RoomType.Mytalk">
@ -51,13 +51,13 @@
                  {{ roomInfo.roomName }}
                </ng-template>
                <ng-template #roomNameNotExist>
-                  {{ _roomUserInfos | ucapTranslate: 'name':',' }}
+                  {{ getRoomNameByRoomUser(_roomUserInfos) }}
                </ng-template>
              </ng-container>
            </ng-container>
          </div>
          <div
-            class="num bg-accent-light"
+            class="member bg-accent-light"
            *ngIf="roomInfo.roomType === RoomType.Multi"
          >
            {{ roomInfo.joinUserCount }}{{ 'common.units.persons' | translate }}
@ -66,7 +66,7 @@
            <mat-icon>notifications_off</mat-icon>
          </div>
        </div>
-        <div class="room-msg">
+        <div class="final-message">
          {{ finalEventMessage }}
        </div>
      </div>
@ -87,13 +87,12 @@
  </dl>

  <span
-    class="notiBadge"
+    class="noti-sum"
    *ngIf="roomInfo.noReadCnt > 0"
    [matBadgeHidden]="roomInfo.noReadCnt === 0"
    [matBadge]="roomInfo.noReadCnt"
    matBadgeOverlap="true"
    matBadgeColor="accent"
    matBadgePosition="below after"
-  >
-  </span>
+  ></span>
 </div>
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
@ -78,20 +78,19 @@ $thumbnail-msize: 40px;
  .info {
    position: relative;
    display: flex;
+    flex: 0 0 auto;
    margin: 0;
    padding: 0;

-    .detail {
+    .room-info {
      flex-direction: column;
      width: calc(100% - 80px);
-      .room-name {
+      .detail {
        display: inline-flex;
        color: $font-dark;
        width: 100%;
        align-items: center;
        .name {
-          font-size: 1.1em;
-          @include ellipsis(1);
          font-weight: 600;
        }
        .mat-icon {
@ -105,8 +104,7 @@ $thumbnail-msize: 40px;
          margin-left: 4px;
          line-height: unset;
        }
-        .num {
-          font-size: 0.9em;
+        .member {
          flex: none;
          margin-left: 6px;
          border-radius: 3px;
@ -114,10 +112,8 @@ $thumbnail-msize: 40px;
          color: #ffffff;
        }
      }
-      .room-msg {
-        font-size: 12px;
+      .final-message {
        color: $font-mid;
-        @include ellipsis(1);
      }
    }
    .date {
@ -127,7 +123,8 @@ $thumbnail-msize: 40px;
      text-align: right;
      margin-left: 10px;
      color: $font-mid;
-      @include ellipsis(1);
+      align-items: flex-start;
+      margin-top: -2px;
    }
  }

@ -145,21 +142,3 @@ $thumbnail-msize: 40px;
    background-color: $bg-list-hover;
  }
 }
-
-.noti {
-  position: absolute;
-  right: 22px;
-  bottom: 22px;
-  max-width: 60px;
-  padding: 0 6px;
-  font-size: 11px;
-  color: #ffffff;
-  @include ellipsis(1);
-  border-radius: 50%;
-}
-
-.notiBadge {
-  position: absolute !important;
-  right: 22px;
-  bottom: 22px;
-}
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.ts
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.ts
@ -4,7 +4,8 @@ import {
  Input,
  Output,
  EventEmitter,
-  ViewChildren
+  ViewChildren,
+  ChangeDetectorRef
 } from '@angular/core';
 import {
  RoomInfo,
@ -15,8 +16,9 @@ import {
 import { NGXLogger } from 'ngx-logger';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
-import { FormsModule } from '@angular/forms';
-import { MatCheckbox } from '@angular/material';
+import { TranslatePipe } from 'projects/ucap-webmessenger-ui/src/lib/pipes/translate.pipe';
+import { TranslateService as uiTranslateService } from '@ucap-webmessenger/ui';
+import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'ucap-room-list-item',
@ -50,7 +52,12 @@ export class ListItemComponent implements OnInit {
  finalEventMessage: string;
  RoomType = RoomType;

-  constructor(private logger: NGXLogger) {}
+  constructor(
+    private logger: NGXLogger,
+    private uiTranslateService: uiTranslateService,
+    private translateService: TranslateService,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}

  ngOnInit() {
    if (this.roomInfo.isTimeRoom) {
@ -96,6 +103,18 @@ export class ListItemComponent implements OnInit {
      .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
  }

+  getRoomNameByRoomUser(roomUserInfos: (RoomUserInfo | UserInfoShort)[]) {
+    let roomName = new TranslatePipe(
+      this.uiTranslateService,
+      this.changeDetectorRef
+    ).transform(roomUserInfos, 'name', ',');
+
+    if (!roomName || roomName.trim().length === 0) {
+      roomName = this.translateService.instant('chat.noRoomUser');
+    }
+    return roomName;
+  }
+
  // getChecked(value: boolean, roomInfo: RoomInfo) {
  //   if (value && !this.multiCheckable) {
  //     if (this.selected === roomInfo.roomSeq) {
--- a/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss
@ -6,6 +6,7 @@

 // Partials
@import 'partials/breakpoints';
+@import 'partials/main-frame';
@import 'partials/forms';
@import 'partials/general';
@import 'partials/helpers';
@ -14,6 +15,7 @@
@import 'partials/scrollbars';
@import 'partials/paginator';
@import 'partials/presence';
+@import 'partials/search-frame';
@import 'partials/list-item';
@import 'partials/dialogs';

--- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss
@ -1,32 +1,40 @@
@charset 'utf-8';

-.ellipsis {
+@mixin ellipsis($row) {
  overflow: hidden;
  text-overflow: ellipsis;
-  display: block;
-  white-space: nowrap;
-  word-wrap: normal;
-}
-.ellipsis2 {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  word-wrap: break-word;
+  @if $row == 1 {
+    white-space: nowrap;
+    word-wrap: normal;
+  } @else if $row >= 2 {
+    display: -webkit-box;
+    -webkit-line-clamp: $row;
+    -webkit-box-orient: vertical;
+    word-wrap: break-word;
+  }
 }

-$listH-row2: 64px;
+$listH-row2: 60px;
 $line-basic: 1px solid #dddddd;
 %list-item {
  position: relative;
  display: flex;
  align-items: center;
-  font-size: 14px;
  width: 100%;
  height: $listH-row2;
  border-bottom: $line-basic;
  padding: 0 20px;
 }
+
+//expansion-panel 높이
+.group-tree {
+  .tree-node-frame {
+    height: $listH-row2;
+    .group-name {
+      font-size: 0.96em;
+    }
+  }
+}
 .mat-card-header .mat-card-title {
  margin: 0 -16px;
  padding-bottom: 10px;
@ -56,7 +64,12 @@ $line-basic: 1px solid #dddddd;
      }
    }
  }
-  span[class*='badge'] {
+  &.checkbox {
+    .mat-checkbox {
+      margin-left: auto;
+    }
+  }
+  span[class*='marker'] {
    position: absolute;
    background-color: #ffffff;
    width: 20px;
@ -77,4 +90,37 @@ $line-basic: 1px solid #dddddd;
      min-height: 18px;
    }
  }
+  .noti-sum.mat-badge {
+    position: absolute;
+    right: 30px;
+    bottom: 20px;
+    font-size: 0.9em;
+  }
+}
+
+//list-item 폰트 사이즈
+.list-item {
+  font-size: 1em;
+  .name {
+    font-weight: 600;
+    @include ellipsis(1);
+  }
+  .grade {
+    font-size: 0.8em;
+    margin-left: 4px;
+    color: #777777;
+  }
+  .work-status,
+  .member {
+    font-size: 0.8em;
+  }
+  .final-message,
+  .dept {
+    font-size: 0.86em;
+    @include ellipsis(1);
+  }
+  .date {
+    font-size: 0.7em;
+    @include ellipsis(1);
+  }
 }
--- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_main-frame.scss
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_main-frame.scss
@ -0,0 +1,50 @@
+$frame-border: 3px;
+$frame-outside: 50px;
+$current-head: 50px;
+$search-frame: 50px;
+
+@mixin div-box-shadow {
+  width: calc(100% - #{$frame-outside});
+}
+
+.mat-toolbar {
+  &.mat-toolbar-single-row {
+    height: $frame-outside;
+  }
+}
+
+.main-container {
+  padding-top: $frame-outside;
+  border-width: $frame-border;
+  border-style: solid;
+  .mat-tab-group {
+    &.global-menu {
+      width: $frame-outside;
+    }
+  }
+  .left-side-tabs-body {
+    @include div-box-shadow;
+  }
+}
+
+.current-head {
+  height: $frame-outside;
+}
+
+// 글로벌 메뉴 별 리스트 높이 값
+.left-side-tabs-contents {
+  .left-group-side {
+    .search-result {
+      height: calc(100% - #{$current-head + $search-frame});
+    }
+  }
+  .app-layout-chat-left-sidenav-chat-list {
+    height: calc(100% - #{$current-head + $search-frame});
+  }
+  .oraganization-tab {
+    height: calc(100% - #{$current-head + $search-frame});
+  }
+  .message-section {
+    height: calc(100% - #{$current-head + $search-frame});
+  }
+}
--- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_search-frame.scss
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_search-frame.scss
@ -0,0 +1,112 @@
+$search-font-size: 14px;
+
+@mixin list-search {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  height: $search-frame;
+  align-items: center;
+  // padding: 0 10px 0 20px;
+  font-size: $search-font-size;
+  background-color: #f9f9f9;
+  border-bottom: 1px solid #dddddd;
+}
+
+.list-search-frame {
+  @include list-search;
+  .searchbox {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    input {
+      display: inline-flex;
+      width: 100%;
+      font-size: 1em;
+      padding-left: 0;
+    }
+    .btn-search {
+      color: #777777;
+      font-size: 12px;
+      display: inline-flex;
+      margin-left: auto;
+      flex: none;
+    }
+  }
+}
+
+/*.list-search-frame {
+  .selectbox {
+    display: inline-flex;
+    width: 40%;
+    padding: 0 20px;
+  }
+  & + .searchbox {
+    width: 60%;
+    padding-right: 20px;
+  }
+}
+*/
+.list-search-frame {
+  .searchbox {
+    height: 100%;
+    .mat-form-field {
+      width: 100%;
+      height: $search-frame;
+      .mat-form-field-wrapper {
+        padding: 0;
+        padding-bottom: 0 !important;
+        height: 100%;
+        .mat-form-field-flex {
+          height: 100%;
+          align-items: center;
+          flex: 1 1 auto;
+          padding: 0 20px;
+          .mat-form-field-infix {
+            font-size: 14px;
+            border: none;
+          }
+          .mat-form-field-suffix {
+            margin-left: auto;
+            .mat-icon {
+              line-height: 24px;
+            }
+          }
+        }
+      }
+    }
+    .mat-form-field-appearance-legacy {
+      .mat-form-field-wrapper {
+        padding: 0;
+      }
+      .mat-form-field-underline {
+        bottom: 0;
+        background-color: unset !important;
+      }
+    }
+  }
+}
+
+.selectbox {
+  display: inline-flex;
+  width: 46%;
+  padding-left: 20px;
+
+  & + .searchbox {
+    width: 54%;
+    display: inline-flex;
+    input {
+      display: inline-flex;
+      width: 100%;
+      font-size: 1em;
+      padding-left: 0;
+    }
+    .btn-search {
+      color: #777777;
+      font-size: 12px;
+      display: inline-flex;
+      margin-left: auto;
+      flex: none;
+    }
+  }
+}